Enib cours c.a.i. web - séance #1 - html5 css3-js - 1

3 710 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Enib cours c.a.i. web - séance #1 - html5 css3-js - 1

  1. 1. Conception dApplications Interactives : Applications Web et JEE Séance #1 Le web en 2013 - HTML5/CSS3/JS
  2. 2. 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
  3. 3. 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
  4. 4. Qui sommes nous
  5. 5. 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
  6. 6. Sébastien Lambour Le développeur de lEst le plus à lOuest, Java & C++ Developer, coder addict, continuous intégration ayatollah● Référent technique au Crédit Mutuel Arkea ○ Direction des Etudes Informatiquessebastien.lambour@gmail.com +sebastien.lambour @FinistSeb
  7. 7. David HerviouJava Developer, Programming addict, Curious about new technologies● Responsable du service Méthodes Appliquées au Crédit Mutuel Arkéa mots 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... david.herviou@gmail.com +david.herviou @herviou
  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. URLs Uniform Resource LocatorChaîne de caractères utilisée pour adresser lesressources du web
  14. 14. URL - Query stringChaîne de caractères envoyée au serveur● Des données à passer à lapplication web● Personnalisation des contenus
  15. 15. URL - Identifiant de fragmentChaîne de caractères interprétée par lenavigateur● 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 : indentifiant 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 LanguageLes documents HTML sont le cœur du web● Composés de ○ Texte ○ Balisage ○ Références à dautres documents ○ Liens
  23. 23. Document HTML
  24. 24. Balises HTMLLe contenu à marquer est délimité par des balises● Balises de premier niveau● Balises den-tête● Balises de structuration du texte● Balises de listes● Balises de tableau● Balises de formulaire● Balises sectionnantes● 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 HMTLSites Disney.com et Apple.com, 1997Source : 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. Principes des CSS● Arbre logique du document ○ DOM● Concept de boîte● Propriétés et valeurs● Sélecteurs et blocs de règles
  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èmeProblème : Support différent selon lenavigateur● Guerre des navigateurs● Domination IE6Technique du doctype switching● Différents sous-ensembles de CSS 1CSS 2 et CSS 2.1 jamais complètement implémentées
  40. 40. Lexemple par excellence :CSS Zen Garden Source : CSS Zen Garden
  41. 41. DOM
  42. 42. Larbre DOM Document Object Model● Interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts daccé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 sexé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 associatifx (clé-valeur) ■ Propriétés dynamiques● Basé sur des Prototypes ○ Héritage basé sur le clonage dobjets
  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 daméliorer maniabilité et confort dutilisation 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. JSONFormat de données● Simple et générique● Textuel et independant du langage● Dérivé de la notation des objets en JS
  50. 50. Conclusions
  51. 51. Des technologies à la base du web On a passé en revue les technologies de base du webCes technologies sont encore très importantes aujourdhui Si vous ne les maîtrisez pas, cest le bon moment pour vous y mettre...
  52. 52. Voulez-vous en savoir plus ?
  53. 53. Voulez-vous en savoir plus ?● Wikipedia ○ HTML, CSS, JavaScript...● Tutoriels ○ Developpez.com, HTML.net, CSS Faciles...● En anglais ○ W3Cs intro to HTML, W3Cs intro to CSS, HTML Dog, w3schools.com...

×