0
Conception d'Applications
Interactives :
Applications Web et JEE
Séance #1
Côté navigateur
HTML5 / CSS / JS / AngularJS
Description du module
● Côté navigateur
○ HTML5 / CSS / JS / AngularJS

● Côté serveur - Concepts
○ J2EE, Serveurs d'appli...
Côté navigateur
● Les bases du web
○ HTTP, URL, HTML, CSS, JS, AJAX...

● HTML5
○ HTML5, CSS3, le casse-tête des navigateu...
Qui sommes nous
Horacio Gonzalez
Spaniard lost in Brittany, Java developer,
dreamer and all-around geek
● Senior Software Engineer at City...
Sébastien Lambour
Le développeur de l'Est le plus à l'Ouest, Java & C++
Developer, coder addict, continuous intégration ay...
Les bases du web
Les bases du web
●
●
●
●

Le Web, URLs, HTTP
HTML
CSS
JavaScript
Le Web, URLs, HTTP
Le Web
● Système hypertexte public fonctionnant sur
internet qui permet de consulter, avec un
navigateur, des ressources a...
Principaux composants du web
URLs
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les
ressources du web
URL - Query string
Chaîne de caractères envoyée au serveur
● Des données à passer à l'application web
● Personnalisation d...
URL - Identifiant de fragment
Chaîne de caractères interprétée par le
navigateur
● Identifie une ressource dans le documen...
HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur
développé pour le World Wide Web
Requête HTTP

● En-têtes HTTP : Information ajoutée

●
●

○ Host : domaine appelé (serveurs multi-domaines)
○ User-Agent :...
Méthodes HTTP
●
●
●
●

GET
POST
PUT
DELETE

●
●
●
●
●

HEAD
TRACE
OPTIONS
CONNECT
PATCH
Réponses HTTP

● Ligne de Statut
● En-têtes HTTP : Information ajoutée
○
○
○

Date

○

Content-Length : taille en octets d...
Web statique et web dynamique
HTML
HTML
HyperText Markup Language
Les documents HTML sont le cœur du web
● Composés de
○
○
○
○

Texte
Balisage
Références à d...
Document HTML
Balises HTML
Le contenu à marquer est délimité par des balises

●
●
●
●
●
●
●
●

Balises de premier niveau
Balises d'en-tê...
Balises de structuration du texte
Balises avec attributs
Balises vides
Les espaces et les sauts de ligne
Éléments inline et éléments bloc
Balises génériques : <span> et <div>
CSS
La mise en page HTML

Image : Wikipedia
La mise en page HTML

Image : Mosaic
La mise en page HMTL

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

Site Disney.com, 1999
Source : Wayback Machine
Les feuilles de style en cascade
Principes des CSS
● Arbre logique du document
○ DOM

● Concept de boîte

● Propriétés et valeurs
● Sélecteurs et blocs de ...
Objectifs des CSS
● Séparer la structure de la présentation

● Décliner les styles selon le récepteur

● Permettre la casc...
Le problème
Problème : Support différent selon le
navigateur
● Guerre des navigateurs
● Domination IE6
Technique du doctyp...
L'exemple par excellence :
CSS Zen Garden

Source : CSS Zen Garden
DOM
L'arbre DOM
Document Object Model
●

Interface indépendante de tout langage de programmation et de toute
plate-forme, perm...
JavaScript
Objectif : donner du dynamisme
● Né chez Netscape en 1995
○
○

Adopté par Internet Explorer 3 en 1996
Standardisé comme EC...
Caracteristiques de JavaScript
● Procédural et structuré
● Fonctionnel
○ Les fonctions sont objets de premier niveau
● Dyn...
XMLHttpRequest
● Appeler un serveur depuis un script JS
○ Traiter la réponse directement depuis le script
○ Réponse en JSO...
AJAX
Asynchronous JavaScript and XML
●

Ajax combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest
afin d'améliore...
AJAX polling
●
●

HTTP : modèle requête-réponse
Applications riches : besoin de pousser des infos du serveur vers client

...
JSON
Format de données
●

Simple et générique

●

Textuel et
independant du langage

●

Dérivé de la notation
des objets e...
Conclusions
Des technologies à la base du web
On a passé en revue les technologies de base du web

Ces technologies sont encore très i...
Voulez-vous en savoir plus ?
Voulez-vous en savoir plus ?
● Wikipedia
○ HTML, CSS, JavaScript...

● Tutoriels
○ Developpez.com, HTML.net, CSS Faciles.....
Upcoming SlideShare
Loading in...5
×

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

618

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
618
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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...
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×