html5 now light
Post on 26-May-2015
2.048 Views
Preview:
TRANSCRIPT
HTML5 en productionMaintenant
solutions pratiques de IE6 à nos jours
Jean-pierre VINCENT
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
HTML5 en productionMaintenant
solutions pratiques de IE6 à nos jours
Jean-pierre VINCENT
Le poids des mots
HTML5 : 2022 (Ian Hickson, éditeur HMTL5)
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)
2022 ? pas peur●
2022 ? pas peur● CSS 2.1 : candidate recommandation
●
2022 ? pas peur● CSS 2.1 : candidate recommandation
● Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery
●
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 ...
Production
!==
Recommandation W3C
Production
===
Accès facile+ stabilité+ besoin
Web Storage
Stockage
7 implémentations !
StockageDepuis
● IE 6-7 !
Web Storage● UserData
Web Storage● UserData● GlobalStorage
Web Storage● UserData● GlobalStorage● Flash shared object
Web Storage● UserData● GlobalStorage● Flash shared object● Hack window.name
Web Storage● UserData● GlobalStorage● Flash shared object● Hack window.name
Et enfin Web Storage
Web Storage● UserData● GlobalStorage● Flash shared object● Hack window.name
Et enfin Web Storage (3 implémentations)
Web StorageDéveloppeur Librairie
LibrairiesIE UserData :
• jQuery jStorage (jstorage.info)• YUI3 Storage lite (bit.ly/lib_store1)
LibrairiesIE UserData :
• jQuery jStorage (jstorage.info)• YUI3 Storage lite (bit.ly/lib_store1)
Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2)
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)
Web StorageConclusion
✓ OK pour la prod (je l'ai fait)
⚠ IE fiable < 64k ou 100k
HTML5Conclusion
✓ OK pour la prod (je l'ai fait)
⚠ IE fiable < 64k ou 100k
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :● Geolocation● SVG● Upload
Buzz :● CSS3 ...
HTML5Découper, enrober, servir chaud
découpons HTML5
● Sémantique
● APIs
Balises
Balises
<!doctype html>
bit.ly/HTML5_fr bit.ly/XHTML5_fr
Balises
✓Migration HTML5 OK
Merci :)
Balises (avant)<div><div>...</div>
</div><div><div>...<span> ...<p><div>...</div>
</div><div>...</div>
Balises (avant)<div><div>...</div>
</div><div><div>...<span> ...<p><div>...</div>
</div><div>...</div>
Balises (après)
Balises
Balises <meter value=25 max=100>
Balises <meter value=25 max=100>
<progress value=25 max=100>
Balises <meter value=25 max=100>
<progress value=25 max=100>
<figure><figcaption>
Balises <meter value=25 max=100>
<progress value=25 max=100>
<figure><figcaption>
Balises - Bilan● Standard● Facile à comprendre
===
● Bénéfices référencement (bientôt)● Maintenable● Accessible
Balises
✓ Production ⚠ Dépendance JS pour IE6-8
bit.ly/HTML5_shiv
Microdata
MicrodataBalisage sémantique avec
vocabulaire personnalisé
Concurrent de :● Microformats● RDFa
MicrodataIntérêt immédiat : Google
bit.ly/data-google
Microdata● Sémantique standardisée
===
● Référencement● Accessibilité● Exploitation par le navigateur
Microdata
✓ Utilisable en production
Formulaires
Formulaires - types<input type=email />
● Clavier approprié
● Pré-remplissage
● Interface
Formulaires - types<input type=url />
● Clavier approprié
● Pré-remplissage
Formulaires - types<input type=date />
● Interface appropriée
Formulaires - types<input type=color />
● Interface appropriée
Formulaires - types
Non reconnu ?
Formulaires - types
Non reconnu ? =
type=text
Formulaires - types
Non reconnu ? =
type=text=
✓ fonctionnalité OK
Formulaires - types
✓ Production ⚠ Accepter styles et Widgets natifs
</semantique>
<script src=HTML5/API >
découpons HTML5Officiel :
✓ Balises✓ Microdata✓ Forms
• Multimédia• Canvas✓ Web Storage
• Drag & Drop• WebSockets
Associé :● Geolocation● SVG● Upload
Buzz :● CSS3 ...
Spécifications
!==
innovation
Standardiser
Standardiser l'existant
Comment on faisait ?
Comment on faisait ?● Geolocation ? Adresse IP
Comment on faisait ?● Geolocation ? ● Drop de fichiers ?
Adresse IPApplet java
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ?
Adresse IPApplet javaJavascript
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ?
Adresse IPApplet javaJavascriptFlash
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?
Adresse IPApplet javaJavascriptFlashIE
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?● Online ?
Adresse IPApplet javaJavascriptFlashIEIE
Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?● Online ?● 2D ?
Adresse IPApplet javaJavascriptFlashIEIEVML, flash
Développeur Librairie
Formulaires
Forms - comportement
bit.ly/form2_demo
Forms - comportementEmulation :
● H5Fbit.ly/lib_H5F
● Webforms2bit.ly/lib_WF2
bit.ly/form2_demo
Forms - comportementDéclaratif et standardisé
Forms - comportementDéclaratif et standardisé
<input type=number
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"required
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"requiredautofocus
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"requiredautofocusmax=10
/>
Forms - comportementGain ?
Standard===
AccessibilitéFacilité de codage
Forms - bilan
✓ OK pour création
Forms - bilan
✓ OK pour création ✓ OK pour enrichissement
Forms - bilan
✓ OK pour création ✓ OK pour enrichissement⚠Modification : au cas par cas
Geolocation
Vous êtes ici
Geolocation
bit.ly/geoloc_demo
Geolocation
bit.ly/geoloc_demo
Natif Détection IP
4km
Geolocation
Alternative : ● Achat de bases d'IP
Librairie :● YQL-Geo-Library
• bit.ly/lib_geo
Geolocation
✓ Utilisable en production
découpons HTML5Officiel :
✓ Balises✓ Microdata✓ Forms
• Multimédia• Canvas✓ Web Storage
• Drag & Drop• WebSockets
Associé :✓ Geolocation
● SVG● Upload
Plus de démos ?
Je vais conclure
Utilisez les standards● Gains immédiats
● Accessibilité
● Référencement
● Utilisabilité
● Maintenance
Utilisez les librairies● Accès facile
● Maintenance
● Suivi des Specs
● Contribuez
Maintenant● Testez
● Jouez
● Déployez
● Partagez
2022
Questions ?
braincracking.orgRemerciez timeOfMyLife.com
top related