Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
-
Upload
horacio-gonzalez -
Category
Documents
-
view
633 -
download
1
Transcript of Enib cours c.a.i. web - séance #1 - html5 css3-js - 1
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
[email protected] +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...
[email protected] +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 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 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...