Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
-
Upload
horacio-gonzalez -
Category
Documents
-
view
629 -
download
1
Transcript of Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
![Page 1: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/1.jpg)
Conception d'Applications Interactives :
Applications Web et JEESéance #1
Le web en 2013 - HTML5/CSS3/JS
![Page 2: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/2.jpg)
Description du module
● Le web en 2013 : HTML5/CCS3/JS● Applications web avec GWT ● La webapp dans un écosystème JEE● Frameworks JEE
○ Spring● Nouveaux langages et frameworks JEE
○ Groovy et Scala, Grail & Play Framework ● Sortons un peu du monde JEE :
○ NodeJS, Dart● Examen et TP
![Page 3: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/3.jpg)
Le web en 2013 : HTML5/CCS3/JS
● Les bases du web○ HTTP, URL, HTML, CSS, JS, AJAX...
● HTML5 ○ HTML5, CSS3, le casse-tête des navigateurs...○ Le web en 2013, le responsive design
● Twitter Bootstrap○ Outils, échafaudage, LessCSS, JQuery
● Le développeur web en 2013○ Rôles, technologies, langages, veille technologique
![Page 4: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/4.jpg)
Qui sommes nous
![Page 5: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/5.jpg)
Horacio Gonzalez
Spaniard lost in Brittany, Java developer, dreamer and all-around geek
● Architecte technique au Crédit Mutuel Arkea○ Direction Technique Informatique
● JUG Leader du FinistJUG
http://lostinbrittany.org/ +Horacio.Gonzalez @LostInBrittany
![Page 6: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/6.jpg)
Sébastien Lambour
Le développeur de l'Est le plus à l'Ouest, Java & C++ Developer, coder addict, continuous intégration ayatollah
● Référent technique au Crédit Mutuel Arkea○ Direction des Etudes Informatiques
[email protected] +sebastien.lambour
@FinistSeb
![Page 7: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/7.jpg)
David Herviou
Java Developer, Programming addict, Curious about new technologies
● Responsable du service Méthodes Appliquées au Crédit Mutuel Arkéamots clés : Architecture Applicative, Intégration Continue, Qualimétrie de code, Optimisation, GWT, Thrift, Java, Test de charge, Big Data, APM, Revue de Code, Testing...
[email protected] +david.herviou @herviou
![Page 8: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/8.jpg)
Les bases du web
![Page 9: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/9.jpg)
Les bases du web
● Le Web, URLs, HTTP● HTML● CSS● JavaScript
![Page 10: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/10.jpg)
Le Web, URLs, HTTP
![Page 11: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/11.jpg)
Le Web
● Système hypertexte public fonctionnant sur internet qui permet de consulter, avec un navigateur, des ressources accessibles sur des sites (merci Wikipedia)
Image : CIA
![Page 12: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/12.jpg)
Principaux composants du web
![Page 13: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/13.jpg)
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les ressources du web
URLs
![Page 14: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/14.jpg)
URL - Query string
Chaîne de caractères envoyée au serveur● Des données à passer à l'application web● Personnalisation des contenus
![Page 15: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/15.jpg)
URL - Identifiant de fragment
Chaîne de caractères interprétée par le navigateur● Identifie une ressource dans le document
reçu● Jamais transmise au serveur
![Page 16: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/16.jpg)
HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur développé pour le World Wide Web
![Page 17: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/17.jpg)
Requête HTTP
● En-têtes HTTP : Information ajoutée○ Host : domaine appelé (serveurs multi-domaines)○ User-Agent : indentifiant navigateur○ Referer : Document duquel on vient○ ...
● Méthode : Commande demandée● Version : HTTP/1.0, HTTP/1.1
![Page 18: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/18.jpg)
Méthodes HTTP
● GET● POST● PUT● DELETE
● HEAD● TRACE● OPTIONS● CONNECT● PATCH
![Page 19: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/19.jpg)
Réponses HTTP
● Ligne de Statut● En-têtes HTTP : Information ajoutée
○ Date ○ Server : Info sur le serveur web○ Content-Type : identifiant de format de
données○ Content-Length : taille en octets de la
ressource○ ...
![Page 20: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/20.jpg)
Web statique et web dynamique
![Page 21: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/21.jpg)
HTML
![Page 22: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/22.jpg)
HTML
HyperText Markup Language
Les documents HTML sont le cœur du web
● Composés de○ Texte ○ Balisage○ Références à d'autres documents○ Liens
![Page 23: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/23.jpg)
Document HTML
![Page 24: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/24.jpg)
Le contenu à marquer est délimité par des balises
Balises HTML
● Balises de premier niveau● Balises d'en-tête● Balises de structuration du texte● Balises de listes● Balises de tableau● Balises de formulaire● Balises sectionnantes● Balises génériques
![Page 25: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/25.jpg)
Balises de structuration du texte
![Page 26: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/26.jpg)
Balises avec attributs
![Page 27: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/27.jpg)
Balises vides
![Page 28: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/28.jpg)
Les espaces et les sauts de ligne
![Page 29: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/29.jpg)
Éléments inline et éléments bloc
![Page 30: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/30.jpg)
Balises génériques : <span> et <div>
![Page 31: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/31.jpg)
CSS
![Page 34: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/34.jpg)
La mise en page HMTL
Sites Disney.com et Apple.com, 1997Source : Wayback Machine
![Page 36: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/36.jpg)
Les feuilles de style en cascade
![Page 37: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/37.jpg)
● Arbre logique du document○ DOM
● Concept de boîte
● Propriétés et valeurs
● Sélecteurs et blocs de règles
Principes des CSS
![Page 38: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/38.jpg)
Objectifs des CSS
● Séparer la structure de la présentation
● Décliner les styles selon le récepteur
● Permettre la cascade des styles
![Page 39: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/39.jpg)
Le problème
Problème : Support différent selon le navigateur
● Guerre des navigateurs
● Domination IE6
Technique du doctype switching ● Différents sous-ensembles de CSS 1
CSS 2 et CSS 2.1 jamais complètement implémentées
![Page 41: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/41.jpg)
DOM
![Page 42: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/42.jpg)
L'arbre DOMDocument Object Model
● Interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents XML (merci Wikipedia)
![Page 43: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/43.jpg)
JavaScript
![Page 44: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/44.jpg)
Objectif : donner du dynamisme
● Né chez Netscape en 1995○ Adopté par Internet Explorer 3 en 1996○ Standardisé comme ECMAScript en 1997
● Des scripts qui s'exécutent côté navigateur○ Pages webs dynamiques, DHTML
![Page 45: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/45.jpg)
Caracteristiques de JavaScript
● Procédural et structuré
● Fonctionnel○ Les fonctions sont objets de premier niveau
● Dynamique○ Typage dynamique○ Avec objets : tableaux associatifx (clé-valeur)
■ Propriétés dynamiques
● Basé sur des Prototypes○ Héritage basé sur le clonage d'objets
![Page 46: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/46.jpg)
XMLHttpRequest
● Appeler un serveur depuis un script JS○ Traiter la réponse directement depuis le script○ Réponse en JSON, XML, HTML ou simple texte
● Origine : un ActiveX pour IE 5 (1998)○ Ré-implémenté par Mozilla (2002), Safari (2004)
● Permet de la vraie interactivité client-serveur○ Réponse synchrone ou asynchrone
● Sécurité : same origin policy
![Page 47: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/47.jpg)
AJAX
Asynchronous JavaScript and XML
● Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches (merci Wikipedia)
(c) Colgate-PalmoliveSource : Wikipedia
![Page 48: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/48.jpg)
AJAX polling● HTTP : modèle requête-réponse● Applications riches : besoin de pousser des infos du serveur vers client
● Comment fait-on ?
![Page 49: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/49.jpg)
JSON
Format de données● Simple et générique
● Textuel et independant du langage
● Dérivé de la notation des objets en JS
![Page 50: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/50.jpg)
Conclusions
![Page 51: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/51.jpg)
Des technologies à la base du web
On a passé en revue les technologies de base du web
Ces technologies sont encore très importantes aujourd'hui
Si vous ne les maîtrisez pas, c'est le bon moment pour vous y mettre...
![Page 52: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/52.jpg)
Voulez-vous en savoir plus ?
![Page 53: Enib cours c.a.i. web - séance #1 - html5 css3-js - 1](https://reader033.fdocuments.us/reader033/viewer/2022052602/559a7d471a28abac648b46ed/html5/thumbnails/53.jpg)
Voulez-vous en savoir plus ?● Wikipedia
○ HTML, CSS, JavaScript...
● Tutoriels○ Developpez.com, HTML.net, CSS Faciles...
● En anglais○ W3C's intro to HTML, W3C's intro to CSS,
HTML Dog, w3schools.com...