Conception d'Applications Interactives :

Applications Web et JEESéance #1

Le web en 2013 - HTML5/CSS3/JS

Description du module

● Le web en 2013 : HTML5/CCS3/JS● Applications web avec GWT ● La webapp dans un écosystème JEE● Frameworks JEE

○ Spring● Nouveaux langages et frameworks JEE

○ Groovy et Scala, Grail & Play Framework ● Sortons un peu du monde JEE :

○ NodeJS, Dart● Examen et TP

Le web en 2013 : HTML5/CCS3/JS

● 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

Qui sommes nous

Horacio Gonzalez

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

● Architecte technique au Crédit Mutuel Arkea○ Direction Technique Informatique

● JUG Leader du FinistJUG

http://lostinbrittany.org/ +Horacio.Gonzalez @LostInBrittany

Sébastien Lambour

Le développeur de l'Est le plus à l'Ouest, Java & C++ Developer, coder addict, continuous intégration ayatollah

● Référent technique au Crédit Mutuel Arkea○ Direction des Etudes Informatiques

sebastien.lambour@gmail.com +sebastien.lambour

@FinistSeb

David Herviou

Java Developer, Programming addict, Curious about new technologies

● Responsable du service Méthodes Appliquées au Crédit Mutuel Arkéamots clés : Architecture Applicative, Intégration Continue, Qualimétrie de code, Optimisation, GWT, Thrift, Java, Test de charge, Big Data, APM, Revue de Code, Testing...

david.herviou@gmail.com +david.herviou @herviou

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 : indentifiant 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 sectionnantes● 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 HTML

Image : Wikipedia

La mise en page HTML

Image : Mosaic

La mise en page HMTL

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

La mise en page HMTL

Site Disney.com, 1999Source : 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

L'exemple par excellence : CSS Zen Garden

Source : CSS Zen Garden

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