Conception d'Applications
Interactives :
Applications Web et JEE
Séance #1
Côté navigateur
HTML5 / CSS / JS / Polymer
1/3 ...
Description du module
● Côté navigateur
○ HTML5 / CSS / JS - Polymer, Twitter Bootstrap
● Côté serveur - Concepts
○ Introd...
● Les bases du web
○ HTTP, URL, HTML, CSS, JS, AJAX...
● HTML5
○ HTML5, CSS3, le casse-tête des navigateurs...
○ Le web en...
Qui sommes nous
Horacio Gonzalez
Spaniard lost in Brittany, Java developer,
dreamer and all-around geek
● Senior Software Engineer at City...
Sébastien Lambour
Le développeur de l'Est le plus à l'Ouest, Java & C++
Developer, coder addict, continuous intégration ay...
Xavier Marin
● Chef de projet et développeur passionné
au Crédit Mutuel Arkéa
marin.xavier@gmail.com
Les bases du web
Les bases du web
● Le Web, URLs, HTTP
● HTML
● CSS
● JavaScript
Le Web, URLs, HTTP
Le Web
● Système hypertexte public fonctionnant sur
internet qui permet de consulter, avec un
navigateur, des ressources a...
Principaux composants du web
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les
ressources du web
URLs
URL - Query string
Chaîne de caractères envoyée au serveur
● Des données à passer à l'application web
● Personnalisation d...
URL - Identifiant de fragment
Chaîne de caractères interprétée par le
navigateur
● Identifie une ressource dans le documen...
HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur
développé pour le World Wide Web
Requête HTTP
● En-têtes HTTP : Information ajoutée
○ Host : domaine appelé (serveurs multi-domaines)
○ User-Agent : identi...
Méthodes HTTP
● GET
● POST
● PUT
● DELETE
● HEAD
● TRACE
● OPTIONS
● CONNECT
● PATCH
Réponses HTTP
● Ligne de Statut
● En-têtes HTTP : Information ajoutée
○ Date
○ Server : Info sur le serveur web
○ Content-...
Web statique et web dynamique
HTML
HTML
HyperText Markup Language
Les documents HTML sont le cœur du web
● Composés de
○ Texte
○ Balisage
○ Références à d'au...
Document HTML
Le contenu à marquer est délimité par des balises
Balises HTML
● Balises de premier niveau
● Balises d'en-tête
● Balises d...
Balises de structuration du texte
Balises avec attributs
Balises vides
Les espaces et les sauts de ligne
Éléments inline et éléments bloc
Balises génériques : <span> et <div>
CSS
La mise en page HTML
Image : Wikipedia
La mise en page HTML
Image : Mosaic
La mise en page HMTL
Sites Disney.com et Apple.com, 1997
Source : Wayback Machine
La mise en page HMTL
Site Disney.com, 1999
Source : Wayback Machine
Les feuilles de style en cascade
● Arbre logique du document
○ DOM
● Concept de boîte
● Propriétés et valeurs
● Sélecteurs et blocs de règles
Principes des...
Objectifs des CSS
● Séparer la structure de la présentation
● Décliner les styles selon le récepteur
● Permettre la cascad...
Le problème
Problème : Support différent selon le navigateur
● Guerre des navigateurs
● Domination IE6
Technique du doctyp...
L'exemple par excellence :
CSS Zen Garden
Source : CSS Zen Garden
DOM
L'arbre DOM
Document Object Model
● Interface indépendante de tout langage de programmation et de toute
plate-forme, perme...
JavaScript
Objectif : donner du dynamisme
● Né chez Netscape en 1995
○ Adopté par Internet Explorer 3 en 1996
○ Standardisé comme ECM...
Caracteristiques de JavaScript
● Procédural et structuré
● Fonctionnel
○ Les fonctions sont objets de premier niveau
● Dyn...
XMLHttpRequest
● Appeler un serveur depuis un script JS
○ Traiter la réponse directement depuis le script
○ Réponse en JSO...
AJAX
Asynchronous JavaScript and XML
● Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin
d'améliorer...
AJAX polling
● HTTP : modèle requête-réponse
● Applications riches : besoin de pousser des infos du serveur vers client
● ...
Conclusions
Des technologies à la base du web
On a passé en revue les technologies de base du web
Ces technologies sont encore très im...
Voulez-vous en savoir plus ?
Voulez-vous en savoir plus ?
● Wikipedia
○ HTML, CSS, JavaScript...
● Tutoriels
○ Developpez.com, HTML.net, CSS Faciles......
Prochain SlideShare
Chargement dans…5
×

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

2 607 vues

Publié le

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 607
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

  1. 1. Conception d'Applications Interactives : Applications Web et JEE Séance #1 Côté navigateur HTML5 / CSS / JS / Polymer 1/3 - HTTP, HTML, CSS, JS
  2. 2. Description du module ● Côté navigateur ○ HTML5 / CSS / JS - Polymer, Twitter Bootstrap ● Côté serveur - Concepts ○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava ● Côté serveur - NodeJS ○ NodeJS, ExpressJS, APIs ● Forge JavaScript et Web Components ○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman ● Autour de la webapp ○ Forge logicielle en Java - Test-driven development ● Examen et exposées des projets
  3. 3. ● 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 2014 ○ Rôles, technologies, langages, veille technologique ● Polymer ○ Web components & Polymer Côté navigateur
  4. 4. Qui sommes nous
  5. 5. Horacio Gonzalez Spaniard lost in Brittany, Java developer, dreamer and all-around geek ● Senior Software Engineer at Cityzen Data ○ Cityzen Data provides a scalable, secure, ethical and open platform for sensor data ● Leader du FinistJUG, du GDG Finistère et de la communauté BreizhBeans http://lostinbrittany.org/ +Horacio.Gonzalez @LostInBrittany
  6. 6. Sébastien Lambour Le développeur de l'Est le plus à l'Ouest, Java & C++ Developer, coder addict, continuous intégration ayatollah ● Senior Software Engineer at Cityzen Data ○ Cityzen Data provides a scalable, secure, ethical and open platform for sensor data sebastien.lambour@gmail.com +sebastien.lambour @FinistSeb
  7. 7. Xavier Marin ● Chef de projet et développeur passionné au Crédit Mutuel Arkéa marin.xavier@gmail.com
  8. 8. Les bases du web
  9. 9. Les bases du web ● Le Web, URLs, HTTP ● HTML ● CSS ● JavaScript
  10. 10. Le Web, URLs, HTTP
  11. 11. 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
  12. 12. Principaux composants du web
  13. 13. Uniform Resource Locator Chaîne de caractères utilisée pour adresser les ressources du web URLs
  14. 14. URL - Query string Chaîne de caractères envoyée au serveur ● Des données à passer à l'application web ● Personnalisation des contenus
  15. 15. 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
  16. 16. HTTP HyperText Transfer Protocol Protocole de communication client-serveur développé pour le World Wide Web
  17. 17. Requête HTTP ● En-têtes HTTP : Information ajoutée ○ Host : domaine appelé (serveurs multi-domaines) ○ User-Agent : identifiant navigateur ○ Referer : Document duquel on vient ○ ... ● Méthode : Commande demandée ● Version : HTTP/1.0, HTTP/1.1
  18. 18. Méthodes HTTP ● GET ● POST ● PUT ● DELETE ● HEAD ● TRACE ● OPTIONS ● CONNECT ● PATCH
  19. 19. 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 ○ ...
  20. 20. Web statique et web dynamique
  21. 21. HTML
  22. 22. 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
  23. 23. Document HTML
  24. 24. 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 de section ● Balises génériques
  25. 25. Balises de structuration du texte
  26. 26. Balises avec attributs
  27. 27. Balises vides
  28. 28. Les espaces et les sauts de ligne
  29. 29. Éléments inline et éléments bloc
  30. 30. Balises génériques : <span> et <div>
  31. 31. CSS
  32. 32. La mise en page HTML Image : Wikipedia
  33. 33. La mise en page HTML Image : Mosaic
  34. 34. La mise en page HMTL Sites Disney.com et Apple.com, 1997 Source : Wayback Machine
  35. 35. La mise en page HMTL Site Disney.com, 1999 Source : Wayback Machine
  36. 36. Les feuilles de style en cascade
  37. 37. ● Arbre logique du document ○ DOM ● Concept de boîte ● Propriétés et valeurs ● Sélecteurs et blocs de règles Principes des CSS
  38. 38. Objectifs des CSS ● Séparer la structure de la présentation ● Décliner les styles selon le récepteur ● Permettre la cascade des styles
  39. 39. 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
  40. 40. L'exemple par excellence : CSS Zen Garden Source : CSS Zen Garden
  41. 41. DOM
  42. 42. L'arbre DOM Document 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)
  43. 43. JavaScript
  44. 44. 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
  45. 45. Caracteristiques de JavaScript ● Procédural et structuré ● Fonctionnel ○ Les fonctions sont objets de premier niveau ● Dynamique ○ Typage dynamique ○ Avec objets : tableaux associatif (clé-valeur) ■ Propriétés dynamiques ● Basé sur des Prototypes ○ Héritage basé sur le clonage d'objets
  46. 46. 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
  47. 47. 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-Palmolive Source : Wikipedia
  48. 48. AJAX polling ● HTTP : modèle requête-réponse ● Applications riches : besoin de pousser des infos du serveur vers client ● Comment fait-on ?
  49. 49. Conclusions
  50. 50. 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...
  51. 51. Voulez-vous en savoir plus ?
  52. 52. 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...

×