ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3

3 333 vues

Publié le

ENIB 2013-2014 - CAI Web - Séance #1 : Côté navigateur 1/3 - HTTP, HTML, CSS, JS

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

Aucun téléchargement
Vues
Nombre de vues
3 333
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3

  1. 1. Conception d'Applications Interactives : Applications Web et JEE Séance #1 Côté navigateur HTML5 / CSS / JS / AngularJS
  2. 2. Description du module ● Côté navigateur ○ HTML5 / CSS / JS / AngularJS ● Côté serveur - Concepts ○ J2EE, Serveurs d'applications, Servlets/JSP, Spring MVC WebServices, Cloud avec Angular JS ● Côté serveur - Frameworks RAD ○ Grails ● Nouveaux langages et paradigmes ○ Dart, NodeJS... ● Sortons un peu du monde JEE : ○ NodeJS, Dart ● Examen et projet
  3. 3. Côté navigateur ● 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 ● AngularJS ○ Modèle MVC 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. Les bases du web
  8. 8. Les bases du web ● ● ● ● Le Web, URLs, HTTP HTML CSS JavaScript
  9. 9. Le Web, URLs, HTTP
  10. 10. 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
  11. 11. Principaux composants du web
  12. 12. URLs Uniform Resource Locator Chaîne de caractères utilisée pour adresser les ressources du web
  13. 13. URL - Query string Chaîne de caractères envoyée au serveur ● Des données à passer à l'application web ● Personnalisation des contenus
  14. 14. 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
  15. 15. HTTP HyperText Transfer Protocol Protocole de communication client-serveur développé pour le World Wide Web
  16. 16. 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
  17. 17. Méthodes HTTP ● ● ● ● GET POST PUT DELETE ● ● ● ● ● HEAD TRACE OPTIONS CONNECT PATCH
  18. 18. Réponses HTTP ● Ligne de Statut ● En-têtes HTTP : Information ajoutée ○ ○ ○ Date ○ Content-Length : taille en octets de la ressource ○ ... Server : Info sur le serveur web Content-Type : identifiant de format de données
  19. 19. Web statique et web dynamique
  20. 20. HTML
  21. 21. 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
  22. 22. Document HTML
  23. 23. Balises HTML Le contenu à marquer est délimité par des balises ● ● ● ● ● ● ● ● 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
  24. 24. Balises de structuration du texte
  25. 25. Balises avec attributs
  26. 26. Balises vides
  27. 27. Les espaces et les sauts de ligne
  28. 28. Éléments inline et éléments bloc
  29. 29. Balises génériques : <span> et <div>
  30. 30. CSS
  31. 31. La mise en page HTML Image : Wikipedia
  32. 32. La mise en page HTML Image : Mosaic
  33. 33. La mise en page HMTL Sites Disney.com et Apple.com, 1997 Source : Wayback Machine
  34. 34. La mise en page HMTL Site Disney.com, 1999 Source : Wayback Machine
  35. 35. Les feuilles de style en cascade
  36. 36. Principes des CSS ● Arbre logique du document ○ DOM ● Concept de boîte ● Propriétés et valeurs ● Sélecteurs et blocs de règles
  37. 37. Objectifs des CSS ● Séparer la structure de la présentation ● Décliner les styles selon le récepteur ● Permettre la cascade des styles
  38. 38. 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
  39. 39. L'exemple par excellence : CSS Zen Garden Source : CSS Zen Garden
  40. 40. DOM
  41. 41. 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)
  42. 42. JavaScript
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. AJAX polling ● ● HTTP : modèle requête-réponse Applications riches : besoin de pousser des infos du serveur vers client ● Comment fait-on ?
  48. 48. JSON Format de données ● Simple et générique ● Textuel et independant du langage ● Dérivé de la notation des objets en JS
  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...

×