Html5 bonnes-pratiques

Les bonnes pratiqueset HTML5

Jean-pierre VINCENT

Qui ça ?Jean-pierre VINCENT

braincracking.org@theystolemynick

Je sers le Web et c'est ma joie :

houra.fr, Yahoo!, timeofmylife.comLivre « HTML5 » en juillet 2011

HTML5 casse tout Accessibilité Nouvelle syntaxe Nouvelles failles de sécurité Javascript only

Bonnes pratiques ? Opquast codage

Et vous ?

Nouveaux éléments

header, nav et les autres (de type display:block)

Problème : Non stylable sur IE < 9

Nouveaux élémentsSolution 1 : HTML5 shiv<script> document.createElement('article')</script>

Nouveaux élémentsSolution 1 : HTML5 shiv<script> document.createElement('article')</script>

<article class="article" role="main"> <h1>...</h1> ...</article>

Nouveaux élémentsSolution 1 : HTML5 shiv

✗ Dépendance de IE à JavaScript

✓ Sémantique OK

✓ Code normal

Nouveaux élémentsSolution 2 : XML namespace<html xmlns:html5="http://www.w3.org/1999/xhtml">

<html5:article class="article" role="main"> <h1>...</h1> ...</html5:article>

Nouveaux élémentsSolution 2 : XML namespace

✓ Pas de dépendance JS

✗ Sémantique KO

✗ Code CSS et HTML modifié

Nouveaux élémentsSolution 3 : éléments parents

<article> <div class="article" role="main"> <h1>...</h1> ... </div></article>

Nouveaux élémentsSolution 3 : éléments parents

✓ Pas de dépendance JS

✓ Sémantique OK

✗ Code CSS et HTML modifié

Nouveaux élémentsConclusion :

facilité de codage ? Shim

IE sans JS mais BP de codage ? Éléments parent

Hiérarchie BP#3 : hiérarchie de titres dans la page

Problème : HTML5 a défini un nouvel algorithme

HiérarchieHTML 4 :<body><h1>titre page</h1><div role=main class=article> <h2>titre article</h2></div>

HiérarchieHTML 4 :

<body><h1>titre page</h1><div role=main class=article> <h2>titre article</h2></div>

HTML5 :<body><h1>titre page</h1><article role=main class=article> <h1>titre article</h1></article>

Hiérarchie

Très utilisé par les utilisateurs d'AT

Pas changeable selon le doctype

Différent selon le moteur HTML

HiérarchiePas de réelle solution

Ne pas utiliser de balises de section Servir un HTML différent selon le navigateur Ignorer le problème (petites hiérarchies)

Liens d'évitement (BP#132)


Théorie : Remplacés par rôles ARIA (main, navigation, search) Rôles ARIA transmis au AT par le navigateur Traduction automatique d'éléments HTML5 en ARIA


Pratique : Utilisateurs clavier sans AT

Support actuel restreint (FF4)

Dans la spec, les rôles main et search sont à définir manuellement


Toujours utile

HTML5 et ARIA aussi

Canvas

Inaccessible (pire que Flash)

BP#86 : proposer une alternative

Ou pas, dans le cas d'effets décoratifs

Canvas

ImagesReproche à HTML5 : alt non obligatoire (BP#1) Suppression de longdesc

ImagesReproche à HTML5 : alt non obligatoire (BP#1) Suppression de longdesc summary (pour table)

Solution : Utiliser alt comme aujourd'hui Utiliser aria-describedby

WebSocket mort ?Problème : faille dans le protocole

WebSocket mort ?Problème : faille dans le protocole

A relativiser : Attaque par proxy intermédiaire HTTP est déjà concerné Ceux qui utilisaient WebSocket en prod utilisent Flash en fallback Le protocole changera, pas l'API

Sécurité

Problème : html5sec.org recense 10 nouvelles attaques possibles

Solution ?

Sécurité

Problème : html5sec.org recense 10 nouvelles attaques possibles

Solution : comme toujours, on filtre la sortie HTML

Les formulaires

BP#35 : indication du contenu des input (placeholder)

Les formulaires BP#36 : affichage des erreurs (required, type, pattern) BP#39 : caractère obligatoire des champs (required + CSS)

<input type=textrequiredpattern="[a-zA-Z]{5,10}"/>

Les formulairesÇa va sans dire, mais ça va mieux en le disant :

BP#180 : validation des formulaires côté serveur

URL Mode du #! (convention google) Arrivée de HTML5 history

AJAX est (trop) dans la place

Twitter, gawker ...

URL twitter.com/#!/theystolemynick

URLgawker.com/#!5786244

URL Serveur : URL = 1 page+ Client : HTML5 history.pushState()=

Github

Questions ?

voir github.com/craigbarnes/html5-shiv

Développement par couches

1. HTML + serveur (2 pages)2. CSS3. JavaScript (1 page + XHR)4. API HTML5 (LocalStorage)

Server Sent Event

BP#53 : nommer les iframes (ou les éviter)

Problème : technique de long polling

Solution : Server Sent Event

Sniffing BP : détecter la fonctionnalité plutôt que le navigateur Problème : implémentations bancales

Html5 bonnes-pratiques

Technology

Transcript of Html5 bonnes-pratiques