Download - Html5 now light
![Page 1: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/1.jpg)
HTML5 en productionMaintenant
solutions pratiques de IE6 à nos jours
Jean-pierre VINCENT
![Page 2: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/2.jpg)
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
![Page 3: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/3.jpg)
HTML5 en productionMaintenant
solutions pratiques de IE6 à nos jours
Jean-pierre VINCENT
![Page 4: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/4.jpg)
Le poids des mots
HTML5 : 2022 (Ian Hickson, éditeur HMTL5)
![Page 5: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/5.jpg)
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)
![Page 6: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/6.jpg)
2022 ? pas peur●
![Page 7: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/7.jpg)
2022 ? pas peur● CSS 2.1 : candidate recommandation
●
![Page 8: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/8.jpg)
2022 ? pas peur● CSS 2.1 : candidate recommandation
● Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery
●
![Page 9: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/9.jpg)
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 ...
![Page 10: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/10.jpg)
Production
!==
Recommandation W3C
![Page 11: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/11.jpg)
Production
===
Accès facile+ stabilité+ besoin
![Page 12: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/12.jpg)
Web Storage
![Page 13: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/13.jpg)
Stockage
7 implémentations !
![Page 14: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/14.jpg)
StockageDepuis
● IE 6-7 !
![Page 15: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/15.jpg)
Web Storage● UserData
![Page 16: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/16.jpg)
Web Storage● UserData● GlobalStorage
![Page 17: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/17.jpg)
Web Storage● UserData● GlobalStorage● Flash shared object
![Page 18: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/18.jpg)
Web Storage● UserData● GlobalStorage● Flash shared object● Hack window.name
![Page 19: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/19.jpg)
Web Storage● UserData● GlobalStorage● Flash shared object● Hack window.name
Et enfin Web Storage
![Page 20: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/20.jpg)
Web Storage● UserData● GlobalStorage● Flash shared object● Hack window.name
Et enfin Web Storage (3 implémentations)
![Page 21: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/21.jpg)
Web StorageDéveloppeur Librairie
![Page 22: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/22.jpg)
LibrairiesIE UserData :
• jQuery jStorage (jstorage.info)• YUI3 Storage lite (bit.ly/lib_store1)
![Page 23: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/23.jpg)
LibrairiesIE UserData :
• jQuery jStorage (jstorage.info)• YUI3 Storage lite (bit.ly/lib_store1)
Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2)
![Page 24: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/24.jpg)
LibrairiesIE 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)
![Page 25: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/25.jpg)
Web StorageConclusion
✓ OK pour la prod (je l'ai fait)
⚠ IE fiable < 64k ou 100k
![Page 26: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/26.jpg)
HTML5Conclusion
✓ OK pour la prod (je l'ai fait)
⚠ IE fiable < 64k ou 100k
![Page 27: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/27.jpg)
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :● Geolocation● SVG● Upload
Buzz :● CSS3 ...
![Page 28: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/28.jpg)
HTML5Découper, enrober, servir chaud
![Page 29: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/29.jpg)
découpons HTML5
● Sémantique
● APIs
![Page 30: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/30.jpg)
Balises
![Page 31: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/31.jpg)
Balises
<!doctype html>
bit.ly/HTML5_fr bit.ly/XHTML5_fr
![Page 32: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/32.jpg)
Balises
✓Migration HTML5 OK
Merci :)
![Page 33: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/33.jpg)
Balises (avant)<div><div>...</div>
</div><div><div>...<span> ...<p><div>...</div>
</div><div>...</div>
![Page 34: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/34.jpg)
Balises (avant)<div><div>...</div>
</div><div><div>...<span> ...<p><div>...</div>
</div><div>...</div>
![Page 35: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/35.jpg)
Balises (après)
![Page 36: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/36.jpg)
Balises
![Page 37: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/37.jpg)
Balises <meter value=25 max=100>
![Page 38: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/38.jpg)
Balises <meter value=25 max=100>
<progress value=25 max=100>
![Page 39: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/39.jpg)
Balises <meter value=25 max=100>
<progress value=25 max=100>
<figure><figcaption>
![Page 40: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/40.jpg)
Balises <meter value=25 max=100>
<progress value=25 max=100>
<figure><figcaption>
![Page 41: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/41.jpg)
Balises - Bilan● Standard● Facile à comprendre
===
● Bénéfices référencement (bientôt)● Maintenable● Accessible
![Page 42: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/42.jpg)
Balises
✓ Production ⚠ Dépendance JS pour IE6-8
bit.ly/HTML5_shiv
![Page 43: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/43.jpg)
Microdata
![Page 44: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/44.jpg)
MicrodataBalisage sémantique avec
vocabulaire personnalisé
Concurrent de :● Microformats● RDFa
![Page 45: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/45.jpg)
MicrodataIntérêt immédiat : Google
bit.ly/data-google
![Page 46: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/46.jpg)
Microdata● Sémantique standardisée
===
● Référencement● Accessibilité● Exploitation par le navigateur
![Page 47: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/47.jpg)
Microdata
✓ Utilisable en production
![Page 48: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/48.jpg)
Formulaires
![Page 49: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/49.jpg)
Formulaires - types<input type=email />
● Clavier approprié
● Pré-remplissage
● Interface
![Page 50: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/50.jpg)
Formulaires - types<input type=url />
● Clavier approprié
● Pré-remplissage
![Page 51: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/51.jpg)
Formulaires - types<input type=date />
● Interface appropriée
![Page 52: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/52.jpg)
Formulaires - types<input type=color />
● Interface appropriée
![Page 53: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/53.jpg)
Formulaires - types
Non reconnu ?
![Page 54: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/54.jpg)
Formulaires - types
Non reconnu ? =
type=text
![Page 55: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/55.jpg)
Formulaires - types
Non reconnu ? =
type=text=
✓ fonctionnalité OK
![Page 56: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/56.jpg)
Formulaires - types
✓ Production ⚠ Accepter styles et Widgets natifs
![Page 57: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/57.jpg)
</semantique>
<script src=HTML5/API >
![Page 58: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/58.jpg)
découpons HTML5Officiel :
✓ Balises✓ Microdata✓ Forms
• Multimédia• Canvas✓ Web Storage
• Drag & Drop• WebSockets
Associé :● Geolocation● SVG● Upload
Buzz :● CSS3 ...
![Page 59: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/59.jpg)
Spécifications
!==
innovation
![Page 60: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/60.jpg)
Standardiser
Standardiser l'existant
![Page 61: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/61.jpg)
Comment on faisait ?
![Page 62: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/62.jpg)
Comment on faisait ?● Geolocation ? Adresse IP
![Page 63: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/63.jpg)
Comment on faisait ?● Geolocation ? ● Drop de fichiers ?
Adresse IPApplet java
![Page 64: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/64.jpg)
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ?
Adresse IPApplet javaJavascript
![Page 65: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/65.jpg)
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ?
Adresse IPApplet javaJavascriptFlash
![Page 66: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/66.jpg)
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?
Adresse IPApplet javaJavascriptFlashIE
![Page 67: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/67.jpg)
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?● Online ?
Adresse IPApplet javaJavascriptFlashIEIE
![Page 68: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/68.jpg)
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?● Online ?● 2D ?
Adresse IPApplet javaJavascriptFlashIEIEVML, flash
![Page 69: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/69.jpg)
Développeur Librairie
![Page 70: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/70.jpg)
Formulaires
![Page 71: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/71.jpg)
Forms - comportement
bit.ly/form2_demo
![Page 72: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/72.jpg)
Forms - comportementEmulation :
● H5Fbit.ly/lib_H5F
● Webforms2bit.ly/lib_WF2
bit.ly/form2_demo
![Page 73: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/73.jpg)
Forms - comportementDéclaratif et standardisé
![Page 74: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/74.jpg)
Forms - comportementDéclaratif et standardisé
<input type=number
/>
![Page 75: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/75.jpg)
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"
/>
![Page 76: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/76.jpg)
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"required
/>
![Page 77: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/77.jpg)
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"requiredautofocus
/>
![Page 78: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/78.jpg)
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"requiredautofocusmax=10
/>
![Page 79: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/79.jpg)
Forms - comportementGain ?
Standard===
AccessibilitéFacilité de codage
![Page 80: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/80.jpg)
Forms - bilan
✓ OK pour création
![Page 81: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/81.jpg)
Forms - bilan
✓ OK pour création ✓ OK pour enrichissement
![Page 82: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/82.jpg)
Forms - bilan
✓ OK pour création ✓ OK pour enrichissement⚠Modification : au cas par cas
![Page 83: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/83.jpg)
Geolocation
Vous êtes ici
![Page 84: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/84.jpg)
Geolocation
bit.ly/geoloc_demo
![Page 85: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/85.jpg)
Geolocation
bit.ly/geoloc_demo
Natif Détection IP
4km
![Page 86: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/86.jpg)
Geolocation
Alternative : ● Achat de bases d'IP
Librairie :● YQL-Geo-Library
• bit.ly/lib_geo
![Page 87: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/87.jpg)
Geolocation
✓ Utilisable en production
![Page 88: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/88.jpg)
découpons HTML5Officiel :
✓ Balises✓ Microdata✓ Forms
• Multimédia• Canvas✓ Web Storage
• Drag & Drop• WebSockets
Associé :✓ Geolocation
● SVG● Upload
![Page 89: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/89.jpg)
Plus de démos ?
![Page 90: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/90.jpg)
Je vais conclure
![Page 91: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/91.jpg)
Utilisez les standards● Gains immédiats
● Accessibilité
● Référencement
● Utilisabilité
● Maintenance
![Page 92: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/92.jpg)
Utilisez les librairies● Accès facile
● Maintenance
● Suivi des Specs
● Contribuez
![Page 93: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/93.jpg)
Maintenant● Testez
● Jouez
● Déployez
● Partagez
2022
![Page 94: Html5 now light](https://reader035.vdocuments.site/reader035/viewer/2022081403/55635dafd8b42aed538b574d/html5/thumbnails/94.jpg)
Questions ?
braincracking.orgRemerciez timeOfMyLife.com