1. HTML
5
ou
l'évolu-on
majeure
du
web
et
de
l'internet
mobile
Toulouse
JUG,
jeudi
21
avril
2011

2. Florent
Garin
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

3. Agenda
1. HTML5
2. Le
cas
d’usage
Webinage
3. HTML5
:
Retour
d’expérience
4. Conclusion
&
Ques-ons
-­‐
Réponses

4. HTML
:
l’historique

5. 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

6. AJAX
a
tué
XHTML2
• 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
!

7. Qu’est-­‐ce
qu’HTML5
?
HTML5
=
HTML
+
CSS
+
JavaScript
APIs

8. Stockage
de
données
• 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

9. Ges-on
fine
du
cache
• Se
fait
via
un
fichier
manifest
CACHE
MANIFEST
style/default.css
images/logo.png
NETWORK:
buy.do
• API
JS
• Pour
déterminer
le
mode
courant
• Déclencher
la
MAJ
atomique
du
cache
• Cache
+
Web
Storage
=
Mode
Offline

10. Web
Workers
• 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

11. Web
Socket
• 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
!

12. Fonc-onnalités
mul-média
• Tags
vidéo
et
audio
• API
JS
• Tag
canvas
• Zone
de
dessin
• Support
du
format
SVG
• WebGL
• Portage
JavaScript
d’OpenGL

13. 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…

14. Et
aussi…
• 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

15. HTML5
:
Retour
d’expérience
REX
Webinage

16. Conclusion
&
Ques-ons
-­‐
Réponses
DocDoku
&
Webinage
recrutent