html5 maintenant partie 1 : la sémantique
Post on 21-May-2015
3.308 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML5 en productionMaintenant
solutions pratiques de IE6 à nos jours
Jean-pierre VINCENT
Qui ça ?Jean-pierre VINCENT
braincracking.org (veille techno)@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
contraintes et préjugés
contraintes et préjugés
50% de visiteurs avec IE 6-8
contraintes et préjugés
50% de visiteurs avec IE 6-8
HTML5 annoncé pour 2022 (Ian Hickson, éditeur HMTL5)
contraintes et préjugés
50% de visiteurs avec IE 6-8
HTML5 annoncé pour 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 ...
2022 ? pas peur
Utilisation en production
!==
Recommandation W3
2022 ? pas peur
Utilisation en production
===
Facilité d'accès
2022 ? pas peur
Utilisation en production
===
Facilité d'accès+ stabilité
quel HTML5 ?Officiel :•
quel HTML5 ?Officiel :• Balises•
quel HTML5 ?Officiel :• Balises• Microdata•
quel HTML5 ?Officiel :• Balises• Microdata• Forms•
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia•
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas•
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage•
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop•
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :●
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :● Geolocation●
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :● Geolocation● SVG●
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :● Geolocation● SVG● Upload
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :● Geolocation● SVG● Upload
Buzz :● CSS3 ...
quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets
Associé :● Geolocation● SVG● Upload
Buzz :● CSS3 ...
Balises
Balises● Changer le doctype
<!doctype html>
● Testé en remplacement de ✓ XHTML strict ✓HTML4.01 transitional
bit.ly/HTML5_fr bit.ly/XHTML5_fr
Balises
✓ Site migré en HTML5Merci :)
Balises
Balises<div><div>...</div>
</div><div><div>...<span> ...<p><div>...</div>
</div><div>...</div>
Balises<header><nav>...</nav>
</header><article><header>...<time> ...<p><footer>...</footer>
</article><footer>...</footer>
Balises● Standard● Facile à comprendre
=
● Bénéfices référencement (bientôt)● Maintenable● Accessibilité
Balises <meter value=25 max=100>
<progress value=25 max=100>
<figure><figcaption> <datalist>
BalisesBalises inconnues :
● display:inline par défaut
article, nav ...{ display: block
}
BalisesBalises inconnues :
● non stylable sur IE6-8hack JS :
document.createElement('article');
</head>bit.ly/HTML5_shiv
Balises
✓ Production
Si :● Visiteurs IE sans javascript sacrifiables
Formulaires
Formulaires - types● Datetime, month, time, week ...● Number● Search● Range● Color● Tel
Formulaires - types
● Code compréhensible
● Utilisabilité, accessibilité
● Navigateurs aident l'utilisateur
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 =
type=text=
✓ fonctionnalité
Formulaires - typesFaut il styler les formulaires ?
Formulaires - typesFaut il styler les formulaires ?
Vieux débat
Formulaires - typesFaut il styler les formulaires ?
Peut être :)
Formulaires - types
✓ Production
Si :● Widgets natifs acceptés
Forms - bilanNouveaux types :
Forms - bilanNouveaux types :✓ OK pour la production
Forms - bilanNouveaux types :✓ OK pour la production
Validation :
Forms - bilanNouveaux types :✓ OK pour la production
Validation : ✓ OK pour création
Forms - bilanNouveaux types :✓ OK pour la production
Validation : ✓ OK pour création ✓ OK pour enrichissement
Forms - bilanNouveaux types :✓ OK pour la production
Validation : ✓ OK pour création ✓ OK pour enrichissement⚠Modification : au cas par cas
Microdata
MicrodataBalisage sémantique avec
vocabulaire personnalisé
Concurrent de :● Microformats● RDFa
MicrodataIntérêt immédiat : Google
data-vocabulary.org/Review-aggregate/
MicrodataGoogle a défini plusieurs vocabulaires :
● Avis et notes● Fil d'Ariane (breadcrumb)● Evènements● Personnes / Entreprises● Produits● Recettes de cuisine (!)
Microdata
<div><h1>Dragon Age</h1>Avis rédigé par GameSpot le 3 Novembre.
Note: 5 sur 5</div>
Microdata
<div><h1>Dragon Age</h1>Avis rédigé par GameSpot le 3 Novembre.
Note: 5 sur 5</div>
Microdata
<div itemscope><h1>Dragon Age</h1>Avis rédigé par GameSpot le 3 Novembre.
Note: 5 sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1>Dragon Age</h1>Avis rédigé par GameSpot le 3 Novembre.
Note: 5 sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Dragon Age</h1>
Avis rédigé par GameSpot le 3 Novembre. Note: 5 sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Dragon Age</h1>
Avis rédigé par <span itemprop="reviewer">GameSpot</span> le 3 Novembre.
Note: 5 sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Dragon Age</h1>
Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time>3 Novembre</time>.
Note: 5 sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Dragon Age</h1>
Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03">
3 Novembre</time>. Note: 5 sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Dragon Age</h1>
Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03"
itemprop="dtreviewed">3 Novembre</time>.
Note: 5 sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Dragon Age</h1>
Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03"
itemprop="dtreviewed">3 Novembre</time>.
Note:<span itemprop="rating">5</span> sur 5</div>
Microdata
<div itemscope itemtype="http://data-vocabulary.org/Review">
<h1 itemprop="itemreviewed">Dragon Age</h1>
Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03"
itemprop="dtreviewed">3 Novembre</time>.
Note:<span itemprop="rating">5</span> sur 5</div>
bit.ly/data-google
Microdata
✓ Utilisable en production
</semantique>
<script src=HTML5/API >
top related