A la découverte de HTML 5

Les templates

Le principe de templates a été introduit la première fois dans « Web Forms 2 » et sera appliqué à HTML5. L’idée est d’éviter les répétitions inutiles de code. Prenez l’exemple d’un formulaire de commandes de produits. Vous allez donc afficher à l’utilisateur une série de lignes qui contiendront toutes la même chose:

  • Un input de type text pour la référence du produit.
  • Un input de type number (rappelez vous qu’on parle de HTML5 ;) ) pour la quantité.
  • Un input de type checkbox pour indiquer si le produit doit être emballé dans un papier cadeau.

Si on prend cet exemple avec 4 lignes de produits, ça donnerait:

Référence Quantité Papier cadeau

Bref, un code un peu lourd … Sans compter que si on a écrit le document « à la main », c’est très souvent la source d’erreur. Encore pire: si l’utilisateur souhaite commander 5 produit, on doit générer un nouveau document (soit en passant par une application coté serveur soit par un javascript plutôt lourd). En gros, ce n’est pas l’idéal.

 

Les templates viennent au secours des auteurs face à ce problème. Ainsi, il suffit de prendre un élément, de lui préciser qu’il devra être répéter et lui dire combien de fois il devra être répété. Voici ce que devient l’exemple ci-dessus:

 

Refference Quantité Papier cadeau

Pour répéter un élément et ses enfants (ici le tr), il suffit donc de lui ajouter un attribut repeat avec pour valeur template. L’attribut repeat-start indique le nombre d’occurrence à répéter. A l’intérieur de l’élément répété, il est possible de récupérer le nombre de l’itération courante (0 pour la première itération, 1 pour la seconde, …) de cette façon: [id_du_conteneur].

Le gain en terme de simplification et d’allègement du code est indéniable. Mais les templates vont un peu plus loin. En effet, il est possible d’ajouter et de supprimer des occurrences de façon dynamique (coté client). Si on souhaite proposer à l’utilisateur d’ajouter une nouvelle occurrence avec un button, c’est très simple:

Bref, d’un point de vue sémantique, pratique et en terme de quantité de code, les templates représentent une très bonne chose. Là où les choses deviennent très pointues, c’est que les données encadrées par les templates peuvent provenir de sources de données (via datatemplate). A quoi ça sert ? Et bien imaginez que votre source de donnée soit dynamique (un script PHP coté serveur par exemple), vous pouvez générer le contenu de votre page dynamiquement. Au revoir donc xmlHttpRequest !

Les suppressions

La venue de HTML5 est l’occasion de supprimer un certains nombre d’éléments et d’attributs. On distingue 3 raisons de suppression: parce que l’élément ne fait que de la mise en forme pure (donc il télescope CSS), parce que leur utilisation est négative pour l’utilisateur ou parce qu’ils ne sont que très peu utilisé (ou qu’ils télescopent un autre élément).

 

Les éléments supprimés

Voici la liste des éléments qui ne seront pas dans HTML5:

  • Éléments de mise en forme supprimés: basefont, big, center, font, s, strike, tt et u.
  • Éléments négatifs supprimés: frame, frameset et noframes. Bref, c’est la fin des frames !
  • Éléments peu utilisés supprimés: acronym, applet (c’est object qui fait ce travail), isindex et dir.

 

Les attributs supprimés

Un grand nombre d’attributs ont été supprimés dans HTML5. Nous allons voir quelques un de ceux qui sont passés dans ce nettoyage de printemps (la liste est tellement grande que nous ne pourrons pas tous les voir):

  • accesskey sur tout les éléments.
  • name sur les éléments map, img, object, form, iframe et a. Préférez l’utilisation de id.
  • align sur tout les éléments.
  • alink, background, link, text et vlink sur l’élément body.
  • bgcolor sur tout les éléments.
  • cellpadding et cellspacing sur l’élément table.

En vrac pour finir

Pour finir, nous allons voir quelques petites choses en vrac qui viendront avec HTML5.

Le href devient optionnel

Dans l’élément a, le href deviendra optionnel avec HTML5. Plus besoin de faire quelque chose du genre: href=''#'' quand on souhaite simplement lancer une action javascript sur un lien. Le onclick suffira.

Les scripts deviennent asynchrones

Actuellement, quand un script est dans une page HTML, il est exécuté dès que celui-ci est chargé. Comprenez que dès que le script a été lu, il sera exécuté (même si la page n’a pas encore été entièrement chargée).

 

Avec HTML5, on trouve deux attributs qui permettent de changer de comportement. Avec defer (dans la définition de script), l’agent utilisateur attendra la fin du chargement du document pour exécuter le script. Avec l’attribut async, l’exécution du script et le chargement de la page seront asynchrones. Ainsi, le script pourra attendre la disponibilité d’une ressource extérieure sans soucis. Ca sent l’AJAX ça !

Des attributs avec des API d’édition derrière

Pour le moment, l’édition en ligne de contenus par le biais d’un document HTML est assez peu pratique. En fait, on doit passer par un certains nombre de frameworks pour avoir quelque chose de complet. C’est sans compter que c’est très lourd à charger pour le navigateur. Pour rendre les choses plus aisées, deux nouveaux attributs (applicables à la majorité des éléments) ont été ajoutés dans HTML. Bien évidement, il y a des API derrière.

 

Le premier attribut, c’est contenteditable. Il sert à indiquer que l’élément concerné est en fait une zone éditable. Ainsi, l’utilisateur peut en changer le contenu (et les métadonnées). C’est une standardisation de l’attribut du même nom utilisé par Internet Explorer depuis sa version 6.

 

Le second attribut, c’est draggable. Son rôle est d’indiquer que l’élément concerné est utilisable avec l’API de drag’n’drop. Notez que le drag’n’drop concerne les éléments du document entre eux, mais pas seulement. En effet, il est possible d’interagir avec des éléments de la machine hôte (le desktop).

 

Conclusion

Pour conclure, on peut dire que HTML5 représente une véritable avancée dans l’écriture des documents Web (d’ailleurs, on devrait parler maintenant d’application et non de document…). On s’oriente véritablement vers l’utilisation actuelle de l’Internet. C’est dommage, cependant, que la nouvelle version de HTML porte sur des usages qui sont déjà établis. Le fait est que quand la spécification de la norme HTML5 sera officiellement publiée, les auteurs de documents Web auront le choix entre la méthode traditionnelle et la méthode standard sur plus d’un point … Espérons que la confusion ne régnera pas trop.

 

Pour le moment, aucun document écrit en suivant la spécification HTML5 ne devrait être publié. En effet, ce n’est qu’un brouillon pour le moment. On estime que la publication finale aura lieu en 2010. Est ce qu’à cette date la spécification collera encore véritablement aux usages ? L’avenir nous le dira. Notez qu’une autre spécification est entrain de se préparer: XHTML2 … Les premiers brouillons ont déjà été publiés. On regrettera cependant que la conception de cette nouvelle spécification ne soit pas ouverte comme celle de HTML5. En effet, pour cette dernière, tout le monde peut faire part de ses observations. Pour XHTML2, il n’en est rien …

 

Liens

One Response to "A la découverte de HTML 5"

Add Comment
  1. Pingback: Quel sera l’impact de HTML5 sur la vidéo en ligne ? | Webd

Submit a comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">