Html5 bonnes-pratiques
Upcoming SlideShare
Loading in...5
×
 

Html5 bonnes-pratiques

on

  • 3,991 views

les bonnes pratiques appliquées pour ou contre HTML5

les bonnes pratiques appliquées pour ou contre HTML5
présenté à strasbourg à la kiwi party

Statistics

Views

Total Views
3,991
Views on SlideShare
3,883
Embed Views
108

Actions

Likes
0
Downloads
66
Comments
0

6 Embeds 108

http://lanyrd.com 79
http://tipixel.leparaclet.net 16
http://s139981475.onlinehome.fr 7
https://twitter.com 3
http://paper.li 2
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 bonnes-pratiques Html5 bonnes-pratiques Presentation Transcript

  • Les bonnes pratiques et HTML5 Jean-pierre VINCENT
  • #fear
  • Qui ça ?
      Jean-pierre VINCENT braincracking.org @theystolemynick Je sers le Web et c'est ma joie : houra.fr, Yahoo!, timeofmylife.com Livre « 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éments
      Solution 1 : HTML5 shiv
    <script> document.createElement('article') </script>
  • Nouveaux éléments
      Solution 1 : HTML5 shiv
    <script> document.createElement('article') </script> < article class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </ article >
  • Nouveaux éléments
      Solution 1 : HTML5 shiv ✗ Dépendance de IE à JavaScript ✓ Sémantique OK ✓ Code normal
  • Nouveaux éléments
      Solution 2 : XML namespace <html xmlns:html5 =&quot;http://www.w3.org/1999/xhtml&quot;>
    < html5:article class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </ html5:article >
  • Nouveaux éléments
      Solution 2 : XML namespace ✓ Pas de dépendance JS ✗ Sémantique KO ✗ Code CSS et HTML modifié
  • Nouveaux éléments
      Solution 3 : éléments parents
    <article> <div class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </div> </article>
  • Nouveaux éléments
      Solution 3 : éléments parents ✓ Pas de dépendance JS ✓ Sémantique OK ✗ Code CSS et HTML modifié
  • Nouveaux éléments
      Conclusion :
    • 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érarchie HTML 4 : <body> <h1> titre page </h1> <div role=main class=article> <h2> titre article </h2> </div>
  • Hiérarchie HTML 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érarchie
      Pas 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)
    • 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
    • Liens d'évitement (BP#132)
      Pratique :
    • Utilisateurs clavier sans AT
    • Support actuel restreint (FF4)
    • Dans la spec, les rôles main et search sont à définir manuellement
    • Liens d'évitement (BP#132)
    • 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
  • Images
      Reproche à HTML5 :
    • alt non obligatoire (BP#1)
    • Suppression de longdesc
  • Images
      Reproche à 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=text
      • required
      • pattern=&quot;[a-zA-Z]{5,10}&quot;
      • />
  • 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
  • URL
      gawker.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. CSS 3. 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