• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 bonnes-pratiques
 

Html5 bonnes-pratiques

on

  • 3,871 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,871
Views on SlideShare
3,763
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