ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
52
Conception d'Applications Interactives : Applications Web et JEE Séance #1 Côté navigateur HTML5 / CSS / JS / AngularJS
-
Upload
horacio-gonzalez -
Category
Technology
-
view
510 -
download
1
description
ENIB 2013-2014 - CAI Web - Séance #1 : Côté navigateur 1/3 - HTTP, HTML, CSS, JS
Transcript of ENIB 2013-2014 - CAI Web #1: Côté navigateur 1/3
Conception d'Applications Interactives :
Applications Web et JEESé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'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
● 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
Qui sommes nous
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
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
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 accessibles sur des sites (merci Wikipedia)
Image : CIA
Principaux composants du web
Uniform Resource Locator
Chaîne de caractères utilisée pour adresser les ressources du web
URLs
URL - Query string
Chaîne de caractères envoyée au serveur● Des données à passer à l'application web● Personnalisation des contenus
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
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 : identifiant navigateur○ Referer : Document duquel on vient○ ...
● Méthode : Commande demandée● Version : HTTP/1.0, HTTP/1.1
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 ○ Server : Info sur le serveur web○ Content-Type : identifiant de format de
données○ Content-Length : taille en octets de la
ressource○ ...
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'autres documents○ Liens
Document HTML
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
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 HMTL
Sites Disney.com et Apple.com, 1997Source : Wayback Machine
Les feuilles de style en cascade
● Arbre logique du document○ DOM
● Concept de boîte
● Propriétés et valeurs
● Sélecteurs et blocs de règles
Principes des CSS
Objectifs des CSS
● Séparer la structure de la présentation
● Décliner les styles selon le récepteur
● Permettre la cascade des styles
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
DOM
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)
JavaScript
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
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
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
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
AJAX polling● HTTP : modèle requête-réponse● Applications riches : besoin de pousser des infos du serveur vers client
● Comment fait-on ?
JSON
Format de données● Simple et générique
● Textuel et independant du langage
● Dérivé de la notation des objets en JS
Conclusions
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...
Voulez-vous en savoir plus ?
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...
