enib 2013-2014 - cai web #1: côté navigateur 1/3
DESCRIPTION
ENIB 2013-2014 - CAI Web - Séance #1 : Côté navigateur 1/3 - HTTP, HTML, CSS, JSTRANSCRIPT
![Page 1: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/1.jpg)
Conception d'Applications Interactives :
Applications Web et JEESéance #1
Côté navigateur HTML5 / CSS / JS / AngularJS
![Page 2: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/2.jpg)
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
![Page 3: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/3.jpg)
● 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
Côté navigateur
![Page 4: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/4.jpg)
Qui sommes nous
![Page 5: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/5.jpg)
Horacio GonzalezSpaniard 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
![Page 6: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/6.jpg)
Sébastien LambourLe 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
[email protected] +sebastien.lambour
@FinistSeb
![Page 7: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/7.jpg)
Les bases du web
![Page 8: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/8.jpg)
Les bases du web
● Le Web, URLs, HTTP● HTML● CSS● JavaScript
![Page 9: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/9.jpg)
Le Web, URLs, HTTP
![Page 10: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/10.jpg)
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
![Page 11: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/11.jpg)
Principaux composants du web
![Page 12: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/12.jpg)
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les ressources du web
URLs
![Page 13: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/13.jpg)
URL - Query string
Chaîne de caractères envoyée au serveur● Des données à passer à l'application web● Personnalisation des contenus
![Page 14: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/14.jpg)
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
![Page 15: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/15.jpg)
HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur développé pour le World Wide Web
![Page 16: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/16.jpg)
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
![Page 17: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/17.jpg)
Méthodes HTTP
● GET● POST● PUT● DELETE
● HEAD● TRACE● OPTIONS● CONNECT● PATCH
![Page 18: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/18.jpg)
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○ ...
![Page 19: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/19.jpg)
Web statique et web dynamique
![Page 20: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/20.jpg)
HTML
![Page 21: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/21.jpg)
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
![Page 22: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/22.jpg)
Document HTML
![Page 23: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/23.jpg)
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
![Page 24: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/24.jpg)
Balises de structuration du texte
![Page 25: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/25.jpg)
Balises avec attributs
![Page 26: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/26.jpg)
Balises vides
![Page 27: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/27.jpg)
Les espaces et les sauts de ligne
![Page 28: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/28.jpg)
Éléments inline et éléments bloc
![Page 29: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/29.jpg)
Balises génériques : <span> et <div>
![Page 30: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/30.jpg)
CSS
![Page 33: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/33.jpg)
La mise en page HMTL
Sites Disney.com et Apple.com, 1997Source : Wayback Machine
![Page 35: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/35.jpg)
Les feuilles de style en cascade
![Page 36: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/36.jpg)
● Arbre logique du document○ DOM
● Concept de boîte
● Propriétés et valeurs
● Sélecteurs et blocs de règles
Principes des CSS
![Page 37: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/37.jpg)
Objectifs des CSS
● Séparer la structure de la présentation
● Décliner les styles selon le récepteur
● Permettre la cascade des styles
![Page 38: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/38.jpg)
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
![Page 40: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/40.jpg)
DOM
![Page 41: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/41.jpg)
L'arbre DOMDocument 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)
![Page 42: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/42.jpg)
JavaScript
![Page 43: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/43.jpg)
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
![Page 44: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/44.jpg)
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
![Page 45: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/45.jpg)
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
![Page 46: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/46.jpg)
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-PalmoliveSource : Wikipedia
![Page 47: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/47.jpg)
AJAX polling● HTTP : modèle requête-réponse● Applications riches : besoin de pousser des infos du serveur vers client
● Comment fait-on ?
![Page 48: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/48.jpg)
JSON
Format de données● Simple et générique
● Textuel et independant du langage
● Dérivé de la notation des objets en JS
![Page 49: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/49.jpg)
Conclusions
![Page 50: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/50.jpg)
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...
![Page 51: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/51.jpg)
Voulez-vous en savoir plus ?
![Page 52: ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3](https://reader034.vdocuments.pub/reader034/viewer/2022042714/5565fb7dd8b42a2a4d8b4aa8/html5/thumbnails/52.jpg)
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...