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

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

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

semestre
Qui sommes nous

semestre
Horacio Gonzalez
@LostInBrittany
Cityzen Data
http://cityzendata.com
Spaniard lost in Brittany,
developer, dreamer and
all-around geek

semestre
Xavier Marin
● Chef de projet et développeur passionné
au Crédit Mutuel Arkéa
● CTO chez @qaobee
marin.xavier@gmail.com
@XavMarin

semestre
Les bases du web

semestre
Les bases du web
● Le Web, URLs, HTTP
● HTML
● CSS
● JavaScript

semestre
Le Web, URLs, HTTP

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

semestre
Principaux composants du web

semestre
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les
ressources du web
URLs

semestre
URL - Query string
Chaîne de caractères envoyée au serveur
● Des données à passer à l'application web
● Personnalisation des contenus

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

semestre
HTTP
HyperText Transfer Protocol
Protocole de communication client-serveur
développé pour le World Wide Web

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

semestre
Méthodes HTTP
● GET
● POST
● PUT
● DELETE
● HEAD
● TRACE
● OPTIONS
● CONNECT
● PATCH

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

semestre
Web statique et web dynamique

semestre
HTML

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

semestre
Document HTML

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

semestre
Balises de structuration du texte

semestre
Balises avec attributs

semestre
Balises auto-fermantes

semestre
Les espaces et les sauts de ligne

semestre
Éléments inline et éléments bloc

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

semestre
CSS

semestre
La mise en page HTML
Image : Wikipedia

semestre
La mise en page HTML
Image : Mosaic

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

semestre
La mise en page HMTL
Site Disney.com, 1999
Source : Wayback Machine

semestre
Les feuilles de style en cascade

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

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

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

semestre
L'exemple par excellence :
CSS Zen Garden
Source : CSS Zen Garden

semestre
DOM

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)

semestre
JavaScript

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

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

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

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-Palmolive
Source : Wikipedia

semestre
● HTTP : modèle requête-réponse
● Applications riches : besoin de pousser des infos du serveur vers client
● Comment fait-on ?
AJAX polling

semestre
Conclusions

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

semestre
Voulez-vous en savoir plus ?

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

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

Plus de Horacio Gonzalez

Plus de Horacio Gonzalez (20)

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