ENIB 2013-2014 - CAI Web - Séance #1 : 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 / AngularJS

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. 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. 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
● Leader du FinistJUG, du GDG Finistère
et de la communauté BreizhBeans
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. Les bases du web

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

9. Le Web, URLs, HTTP

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

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

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

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

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

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

20. HTML

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

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

25. Balises avec attributs

26. Balises vides

27. Les espaces et les sauts de ligne

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

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

30. CSS

31. La mise en page HTML
Image : Wikipedia

32. La mise en page HTML
Image : Mosaic

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

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

35. Les feuilles de style en cascade

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. 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. 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. L'exemple par excellence :
CSS Zen Garden
Source : CSS Zen Garden

40. DOM

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

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

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