ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
-
Upload
horacio-gonzalez -
Category
Software
-
view
104 -
download
3
Transcript of ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Conception d'Applications Interactives :
Applications Web
Séance #1 - Côté navigateur HTML5 / CSS / JS / Angular
1/3 - HTTP, HTML, CSS, JS
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Description du module
● Côté navigateur○ HTML5 / CSS / JS - Angular
● 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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
● 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 2017○ Rôles, technologies, langages, veille technologique
● Angular
Côté navigateur
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Qui sommes nous
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Horacio Gonzalez
@LostInBrittany
Cityzen Datahttp://cityzendata.com
Spaniard lost in Brittany, developer, dreamer and all-around geek
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Xavier Marin
● Chef de projet et développeur passionné au Crédit Mutuel Arkéa
● CTO chez @qaobee
[email protected] @XavMarin
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Les bases du web
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Les bases du web
● Le Web, URLs, HTTP● HTML● CSS● JavaScript
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Le Web, URLs, HTTP
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Principaux composants du web
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les ressources du web
URLs
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
URL - Query string
Chaîne de caractères envoyée au serveur● Des données à passer à l'application web● Personnalisation des contenus
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur développé pour le World Wide Web
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Méthodes HTTP
● GET● POST● PUT● DELETE
● HEAD● TRACE● OPTIONS● CONNECT● PATCH
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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○ ...
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Web statique et web dynamique
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
HTML
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Document HTML
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Balises de structuration du texte
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Balises avec attributs
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Balises auto-fermantes
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Les espaces et les sauts de ligne
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Éléments inline et éléments bloc
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Balises génériques : <span> et <div>
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
CSS
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
La mise en page HTML
Image : Wikipedia
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
La mise en page HTML
Image : Mosaic
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
La mise en page HMTL
Sites Disney.com et Apple.com, 1997Source : Wayback Machine
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
La mise en page HMTL
Site Disney.com, 1999Source : Wayback Machine
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Les feuilles de style en cascade
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
● Arbre logique du document○ DOM
● Concept de boîte
● Propriétés et valeurs
● Sélecteurs et blocs de règles
Principes des CSS
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Objectifs des CSS
● Séparer la structure de la présentation
● Décliner les styles selon le récepteur
● Permettre la cascade des styles
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
L'exemple par excellence : CSS Zen Garden
Source : CSS Zen Garden
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
DOM
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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)
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
JavaScript
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Caractéristiques de JavaScript
● Impé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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
● HTTP : modèle requête-réponse
● Applications riches : besoin de pousser des infos du serveur vers client
● Comment fait-on ?
AJAX polling
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Conclusions
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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...
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
Voulez-vous en savoir plus ?
Côté navigateur 1/3ENIB - CAI Web 2016-2017 2ème semestre
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...