Html5 par Florent Garin, au Toulouse JUG
-
Upload
jug-toulouse -
Category
Technology
-
view
1.839 -
download
1
Transcript of Html5 par Florent Garin, au Toulouse JUG
![Page 1: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/1.jpg)
HTML 5 ou l'évolu-on majeure du web et de l'internet mobile
Toulouse JUG, jeudi 21 avril 2011
![Page 2: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/2.jpg)
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
![Page 3: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/3.jpg)
1. HTML5 2. Le cas d’usage Webinage 3. HTML5 : Retour d’expérience 4. Conclusion & Ques-ons -‐ Réponses
Agenda
![Page 4: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/4.jpg)
HTML : l’historique
![Page 5: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/5.jpg)
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
![Page 6: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/6.jpg)
• 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
![Page 7: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/7.jpg)
Qu’est-‐ce qu’HTML5 ?
HTML5 = HTML + CSS + JavaScript APIs
![Page 8: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/8.jpg)
• 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
![Page 9: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/9.jpg)
• 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
![Page 10: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/10.jpg)
• 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
![Page 11: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/11.jpg)
• 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
![Page 12: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/12.jpg)
• 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
![Page 13: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/13.jpg)
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…
![Page 14: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/14.jpg)
• 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…
![Page 15: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/15.jpg)
HTML5 : Retour d’expérience
REX Webinage
![Page 16: Html5 par Florent Garin, au Toulouse JUG](https://reader030.fdocuments.fr/reader030/viewer/2022020207/5560b5b8d8b42af43b8b499f/html5/thumbnails/16.jpg)
Conclusion & Ques-ons -‐ Réponses
DocDoku & Webinage recrutent