ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

51
Côté navigateur 1/3 ENIB - 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

Transcript of ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

Page 1: 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

Page 2: 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

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

Page 3: 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

● 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

Page 4: 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

Qui sommes nous

Page 5: 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

Horacio Gonzalez

@LostInBrittany

Cityzen Datahttp://cityzendata.com

Spaniard lost in Brittany, developer, dreamer and all-around geek

Page 6: 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

Xavier Marin

● Chef de projet et développeur passionné au Crédit Mutuel Arkéa

● CTO chez @qaobee

[email protected] @XavMarin

Page 7: 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

Les bases du web

Page 8: 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

Les bases du web

● Le Web, URLs, HTTP● HTML● CSS● JavaScript

Page 9: 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

Le Web, URLs, HTTP

Page 10: 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

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

Principaux composants du web

Page 12: 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

Uniform Resource Locator

Chaîne de caractères utilisée pour adresser les ressources du web

URLs

Page 13: 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

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

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

HTTP

HyperText Transfer Protocol

Protocole de communication client-serveur développé pour le World Wide Web

Page 16: 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

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

Méthodes HTTP

● GET● POST● PUT● DELETE

● HEAD● TRACE● OPTIONS● CONNECT● PATCH

Page 18: 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

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

Web statique et web dynamique

Page 20: 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

HTML

Page 21: 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

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

Document HTML

Page 23: 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

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

Balises de structuration du texte

Page 25: 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

Balises avec attributs

Page 26: 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

Balises auto-fermantes

Page 27: 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

Les espaces et les sauts de ligne

Page 28: 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

Éléments inline et éléments bloc

Page 29: 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

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

Page 30: 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

CSS

Page 31: 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

La mise en page HTML

Image : Wikipedia

Page 32: 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

La mise en page HTML

Image : Mosaic

Page 33: 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

La mise en page HMTL

Sites Disney.com et Apple.com, 1997Source : Wayback Machine

Page 34: 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

La mise en page HMTL

Site Disney.com, 1999Source : Wayback Machine

Page 35: 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

Les feuilles de style en cascade

Page 36: 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

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

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

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

Page 39: 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

L'exemple par excellence : CSS Zen Garden

Source : CSS Zen Garden

Page 40: 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

DOM

Page 41: 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

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)

Page 42: 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

JavaScript

Page 43: 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

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

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

Page 45: 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

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

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

● HTTP : modèle requête-réponse

● Applications riches : besoin de pousser des infos du serveur vers client

● Comment fait-on ?

AJAX polling

Page 48: 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

Conclusions

Page 49: 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

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 50: 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

Voulez-vous en savoir plus ?