Upload
jug-toulouse
View
1.839
Download
1
Embed Size (px)
Citation preview
HTML 5 ou l'évolu-on majeure du web et de l'internet mobile
Toulouse JUG, jeudi 21 avril 2011
Co-‐fondateur de DocDoku Société innovante IT hJp://www.docdoku.com
Co-‐fondateur du JUG de Toulouse Ouvert à tous, les technologies Java hJp://www.toulousejug.org
Auteur du livre : « Concevoir et développer des applica-ons mobiles et tac-les », 2ème édi-on
Florent Garin
1. HTML5 2. Le cas d’usage Webinage 3. HTML5 : Retour d’expérience 4. Conclusion & Ques-ons -‐ Réponses
Agenda
HTML : l’historique
HTML5 vs XHTML2
XHTML2 • Focalisé sur la sépara-on de la présenta-on
et de la structure • S’appuie sur XForms, XML Events, etc… • Abandonne l’héritage SGML • Bonne interna-onalisa-on
Clairement orienté document
• AJAX a prouvé qu’il était possible de développer de vraies applica-ons sur le web
• HTML5 poursuit le chemin • En formalisant les « bidouilles » ajaxiennes • En réduisant la barrière entre les
applica-ons web & desktop
Clairement orienté applica-on
et c’est ce qu’on veut !
AJAX a tué XHTML2
Qu’est-‐ce qu’HTML5 ?
HTML5 = HTML + CSS + JavaScript APIs
• Web Storage (session et local) • Facilite la montée en charge (ges-on de
l’état sur le client) • Web SQL Database • 1 seule implémenta-on SQLite (encore…) • Difficulté des migra-ons de schémas
• AJen-on à la confiden-alité des données
Stockage de données
• Se fait via un fichier manifest
• API JS • Pour déterminer le mode courant • Déclencher la MAJ atomique du cache
• Cache + Web Storage = Mode Offline
Ges-on fine du cache
CACHE MANIFEST style/default.css images/logo.png NETWORK: buy.do
• Enfin des threads en JavaScript • Comme toujours le thread en arrière plan ne
peut pas manipuler l’IHM (ici le DOM) • La communica-on entre threads s’opère par
messages
• Permet les traitements longs côté client sans figer la page
Web Workers
• Offre une véritable fonc-on de push • Remplace avantageusement Comet (long
polling) • Communica-on Bidirec-onnelle et full-‐duplex • Fonc-onne sur une seule connexion TCP • Proxy et firewall friendly grâce au mécanisme
d’upgrade HTTP…du moins en théorie !
• AJen-on au problème de -meout !
Web Socket
• Tags vidéo et audio • API JS
• Tag canvas • Zone de dessin
• Support du format SVG • WebGL • Portage JavaScript d’OpenGL
Fonc-onnalités mul-média
CSS3
• Nouveaux sélecteurs • Eléments de présenta-on • Nouvelles polices • Dégradés • Bords arrondis…
• Des anima-ons • Agrandissement • Transla-on • Rota-on…
• De nouveaux champs de formulaires • Autocomplé-on • Valida-on des données
• La géolocalisa-on • mobile & desktop (basée sur l’IP, GPS)
• Le glisser-‐déposer • A l’intérieur de la page • Depuis l’extérieur du navigateur
Et aussi…
HTML5 : Retour d’expérience
REX Webinage
Conclusion & Ques-ons -‐ Réponses
DocDoku & Webinage recrutent