1. Conception d'Applications
Interactives :
Applications Web et JEE
Séance #1
Le web en 2013 - HTML5/CSS3/JS

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. 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. Qui sommes nous

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. Sébastien Lambour
Le développeur de l'Est le plus à l'Ouest, Java & C++
Developer, coder addict, continuous intégration ayatollah
● Référent technique au Crédit Mutuel Arkea
○ Direction des Etudes Informatiques
sebastien.lambour@gmail.com
+sebastien.lambour
@FinistSeb

7. David Herviou
Java 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. 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. URLs
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les
ressources du web

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 : indentifiant 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. 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 sectionnantes
● 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. 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. 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
Technique du doctype switching
● Différents sous-ensembles de CSS 1
CSS 2 et CSS 2.1 jamais complètement implémentées

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

49. JSON
Format de données
● Simple et générique
● Textuel et
independant du langage
● Dérivé de la notation
des objets en JS

50. Conclusions

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

52. Voulez-vous en savoir plus ?

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