Cours 1 : intro à la programmation web
Applications web et mobiles
Christophe Gonzales
©CG(2023)
Choix des technologies
Cours 1 : intro à la programmation web 1/21
Contexte historique du web (1/2)
1989 World Wide Web / HyperText Markup Language (HTML)
1993 NCSA Mosaic : le premier navigateur
1994 Netscape : un navigateur ≪ bien plus rapide ≫
1994 Personal Home Page Tools (PHP)
1995 Javascript
1998 asynchronous JavaScript and XML (Ajax)
2000 [Link]
2005 Django
2005 Ruby on rails
2007 Golang
Cours 1 : intro à la programmation web 2/21
Contexte historique du web (2/2)
2009 NodeJS (node)
2010 AngularJS
2010 Flask
2012 TypeScript
2013 React
2013 Electron
2014 Angular, Vue
2015 Web assembly (wasm)
2016 [Link] core
Cours 1 : intro à la programmation web 3/21
Tendances (1/2)
▶ Tendances de requêtes google sur Angular/PHP/Javascript
sur les 5 dernières années (source : Google trends) :
Cours 1 : intro à la programmation web 4/21
Tendances (2/2)
▶ Tendances de requêtes google sur Vue/React/Angular sur
les 5 dernières années (source : Google trends) :
Cours 1 : intro à la programmation web 5/21
Types de développeurs
▶ Étude de StackOverflow de 2021 :
Cours 1 : intro à la programmation web 6/21
Langages de programmation utilisés
▶ Étude de StackOverflow de 2021 :
Cours 1 : intro à la programmation web 7/21
Technologies du web
▶ Étude de StackOverflow de 2021 :
Cours 1 : intro à la programmation web 8/21
Quelle technologie connaı̂tre/choisir ?
: WordPress, Drupal, Joomla
80% des sites web dans le monde
: Facebook, Twitter, Netflix, Instagram, Airbnb, Yahoo Mail
: Paypal, GMail, Netflix, Lego, Weather, Delta
: Nintendo, Gitlab, Alibaba, Xiaomi
stable update majeure API assez stable
tous les 6 mois (actuellement en
V3)
Cours 1 : intro à la programmation web 9/21
Un peu d’architecture. . .
client serveur(s)
interface utilisateur data processing
front-end back-end
2
HTML PHP
CSS/SCSS Javascript/node
Javascript bases de données
Angular/React/Vue
full-stack
Cours 1 : intro à la programmation web 10/21
Plan du module
Objectif : développement full-stack / mobile
Plan du module :
1 HTML/CSS/PHP/Javascript
2 Angular/TypeScript
3 Node/Express
4 Ionic
Cours 1 : intro à la programmation web 11/21
Objectif des TPs
▶ [Link]
▶ [Link]
Technologies : PHP, Angular, node/express, ionic
Cours 1 : intro à la programmation web 12/21
Rappels HTML/CSS
Cours 1 : intro à la programmation web 13/21
Rappels élémentaires de HTML
HTML 5
header
balises
corps
Cours 1 : intro à la programmation web 14/21
Balises HTML
Balises
▶ En général :
<balise>...</balise> ou
<balise attribut1="val1" attribut2="val2">...</balise>
▶ Quelques exceptions :
<balise/> ou
<balise attribut1="val1" attribut2="val2" />
▶ Exemples :
Balise Signification
<p></p> paragraphe
<div></div> conteneur de ≪ division ≫
<span></span> conteneur ≪ inline ≫
<ol></ol>, <ul></ul>, <li></li> listes
<img src="..." /> images
<br/> retour à la ligne
Cours 1 : intro à la programmation web 15/21
Attributs particuliers
Attributs
▶ class : classe =⇒ permet de manipuler l’élément via
CSS ou Javascript (sélecteur)
▶ id : identifiant unique =⇒ permet de manipuler l’élément
via CSS ou Javascript (sélecteur)
▶ Exemple :
HTML CSS
<h1>Section 1 :</h1> [Link] { text-align: right; }
<div class="mydiv"> div span { color: red; }
Hello #myspan {
<span>promo</span> color: blue;
<span id="myspan">3A</span> font-weight: bold;
</div> }
Cours 1 : intro à la programmation web 16/21
Javascript et le DOM
Cours 1 : intro à la programmation web 17/21
Le DOM
DOM : Document Object Model
[image wikipedia]
▶ Représente la page web affichée
▶ Structure d’arbre — racine : document
Cours 1 : intro à la programmation web 18/21
Javascript : window vs document
Pour Javascript :
▶ Dans un browser, window = objet global
▶ document = [Link]
=⇒ document est une propriété de window
▶ document = l’objet ≪ visible ≫ du browser
Cours 1 : intro à la programmation web 19/21
Manipuler le DOM
Cours 1 : intro à la programmation web 20/21
Rajouter des éléments au DOM
Cours 1 : intro à la programmation web 21/21