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

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. Description du module
● Côté navigateur
○ HTML5 / CSS / JS - Polymer
● Côté serveur - Concepts
○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava
● Forge JavaScript
○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman
● Côté serveur - NodeJS
○ NodeJS, ExpressJS, APIs
● Écosystème de la webapp
○ Introduction à NoSQL : MongoDB, Redis, Cassandra…
● Autour de la webapp
○ Forge logicielle en Java - Test-driven development
● Examen et exposées des projets

3. ● Les bases du web
○ HTTP, URL, HTML, CSS, JS, AJAX...
● HTML5, CSS3
○ HTML5, CSS3, living standard, le casse-tête des navigateurs...
○ Le web en 2016, mobile first, le responsive design...
● Twitter Bootstrap
○ Outils, échafaudage, LessCSS, JQuery
● Le développeur web en 2016
○ Rôles, technologies, langages, veille technologique
● Polymer
○ Web components & Polymer
Côté navigateur

4. Qui sommes nous

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: Warp 10
● Leader du FinistJUG, du GDG Finistère
et de la communauté BreizhBeans
● Google Developer Expert
on Web Technologies
http://lostinbrittany.org/
+Horacio.Gonzalez
@LostInBrittany

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. Xavier Marin
● Chef de projet et développeur passionné
au Crédit Mutuel Arkéa
marin.xavier@gmail.com
@XavMarin

8. Les bases du web

9. Les bases du web
● Le Web, URLs, HTTP
● HTML
● CSS
● JavaScript

10. Le Web, URLs, HTTP

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. Principaux composants du web

13. Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les
ressources du web
URLs

14. URL - Query string
Chaîne de caractères envoyée au serveur
● Des données à passer à l'application web
● Personnalisation des contenus

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. HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur
développé pour le World Wide Web

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. Méthodes HTTP
● GET
● POST
● PUT
● DELETE
● HEAD
● TRACE
● OPTIONS
● CONNECT
● PATCH

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. Web statique et web dynamique

21. HTML

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. Document HTML

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. Balises de structuration du texte

26. Balises avec attributs

27. Balises vides

28. Les espaces et les sauts de ligne

29. Éléments inline et éléments bloc

30. Balises génériques : <span> et <div>

31. CSS

32. La mise en page HTML
Image : Wikipedia

33. La mise en page HTML
Image : Mosaic

34. La mise en page HMTL
Sites Disney.com et Apple.com, 1997
Source : Wayback Machine

35. La mise en page HMTL
Site Disney.com, 1999
Source : Wayback Machine

36. Les feuilles de style en cascade

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. 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. Le problème
Problème : Support différent selon le navigateur
● Guerre des navigateurs
● Domination IE6
● CSS 2 et CSS 2.1 jamais complètement implémentées
○ Technique du doctype switching
○ Différents sous-ensembles de CSS 1

40. L'exemple par excellence :
CSS Zen Garden
Source : CSS Zen Garden

41. DOM

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. JavaScript

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. Caracteristiques de JavaScript
● Imprératif 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. 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. 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. ● HTTP : modèle requête-réponse
● Applications riches : besoin de pousser des infos du serveur vers client
● Comment fait-on ?
AJAX polling

49. Conclusions

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. Voulez-vous en savoir plus ?

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...