Contenu connexe Similaire à Html5 now light (20) Plus de Jean-Pierre Vincent (13) Html5 now light2. Qui ça ?
Jean-pierre VINCENT
braincracking.org
@theystolemynick
Je sers le Web et c'est ma joie :
houra.fr, Yahoo!, Kelkoo
Time of my Life.com
4. Le poids des mots
HTML5 : 2022
(Ian Hickson, éditeur HMTL5)
5. Le poids des mots
HTML5 : 2022
(Ian Hickson, éditeur HMTL5)
“I don't think it's ready for production yet“
(Philippe Le Hégaret, chef HTML5)
7. 2022 ? pas peur
● CSS 2.1 : candidate recommandation
●
8. 2022 ? pas peur
● CSS 2.1 : candidate recommandation
●Selector API 2 : Draft, mais utilisé
par 90% des développeurs grâce à
jQuery
●
9. 2022 ? pas peur
● CSS 2.1 : candidate recommandation
●Selector API 2 : Draft, mais utilisé
par 90% des développeurs grâce à
jQuery
●HTML4 : 1999, CSS: 1996
implémentations variées ...
11. Production
===
Accès facile
+ stabilité
+ besoin
20. Web Storage
● UserData
● GlobalStorage
● Flash shared object
● Hack window.name
Et enfin
Web Storage (3 implémentations)
23. Librairies
IE UserData :
• jQuery jStorage (jstorage.info)
• YUI3 Storage lite (bit.ly/lib_store1)
Flash shared object :
✓ YUI2 Storage (yhoo.it/lib_store2)
24. Librairies
IE UserData :
• jQuery jStorage (jstorage.info)
• YUI3 Storage lite (bit.ly/lib_store1)
Flash shared object :
✓ YUI2 Storage (yhoo.it/lib_store2)
window.name :
• sessionstorage (bit.ly/lib_store3)
25. Web Storage
Conclusion
✓ OK pour la prod (je l'ai fait)
IE fiable < 64k ou 100k
26. HTML5
Conclusion
✓ OK pour la prod (je l'ai fait)
IE fiable < 64k ou 100k
27. quel HTML5 ?
Officiel : Associé :
• Balises ● Geolocation
• Microdata ● SVG
• Forms ● Upload
• Multimédia
• Canvas
• Web Storage
• Drag & Drop Buzz :
• WebSockets ● CSS3 ...
31. Balises
<!doctype html>
bit.ly/HTML5_fr bit.ly/XHTML5_fr
33. Balises (avant)
<div>
<div>...</div>
</div>
<div>
<div>...<span> ...
<p>
<div>...</div>
</div>
<div>...</div>
34. Balises (avant)
<div>
<div>...</div>
</div>
<div>
<div>...<span> ...
<p>
<div>...</div>
</div>
<div>...</div>
41. Balises - Bilan
● Standard
● Facile à comprendre
===
● Bénéfices référencement (bientôt)
● Maintenable
● Accessible
42. Balises
✓ Production
Dépendance JS pour IE6-8
bit.ly/HTML5_shiv
46. Microdata
● Sémantique standardisée
===
● Référencement
● Accessibilité
● Exploitation par le navigateur
58. découpons HTML5
Officiel : Associé :
✓ Balises ● Geolocation
✓ Microdata ● SVG
✓ Forms ● Upload
• Multimédia
• Canvas
✓ Web Storage Buzz :
• Drag & Drop ● CSS3 ...
• WebSockets
64. Comment on faisait ?
● Geolocation ? Adresse IP
● Drop de fichiers ? Applet java
● Forms 2 ? Javascript
65. Comment on faisait ?
● Geolocation ? Adresse IP
● Drop de fichiers ? Applet java
● Forms 2 ? Javascript
● <video> ? Flash
66. Comment on faisait ?
● Geolocation ? Adresse IP
● Drop de fichiers ? Applet java
● Forms 2 ? Javascript
● <video> ? Flash
● Drag & Drop ? IE
67. Comment on faisait ?
● Geolocation ? Adresse IP
● Drop de fichiers ? Applet java
● Forms 2 ? Javascript
● <video> ? Flash
● Drag & Drop ? IE
● Online ? IE
68. Comment on faisait ?
● Geolocation ? Adresse IP
● Drop de fichiers ? Applet java
● Forms 2 ? Javascript
● <video> ? Flash
● Drag & Drop ? IE
● Online ? IE
● 2D ? VML, flash
76. Forms - comportement
Déclaratif et standardisé
<input type=number
placeholder="Combien ?"
required
/>
77. Forms - comportement
Déclaratif et standardisé
<input type=number
placeholder="Combien ?"
required
autofocus
/>
78. Forms - comportement
Déclaratif et standardisé
<input type=number
placeholder="Combien ?"
required
autofocus
max=10
/>
82. Forms - bilan
✓ OK pour création
✓ OK pour enrichissement
Modification : au cas par cas
88. découpons HTML5
Officiel : Associé :
✓ Balises ✓ Geolocation
✓ Microdata ● SVG
✓ Forms ● Upload
• Multimédia
• Canvas
✓ Web Storage
• Drag & Drop
• WebSockets
94. Questions ?
braincracking.org
Remerciez timeOfMyLife.com