HTML 5

Un avant got du HTML 5
par Lachlan Hunt (Auteur) Sylvain Jorge Do Marco (Traducteur)

Date de publication : 16/10/2008 Dernire mise jour :
Cet article est la traduction de A Preview of HTML 5 disponible
ici.
Translated with the permission of A List Apart Magazine and the author. Retrouvez toutes les traductions disponibles de A List Apart Magazine sur alistapart.developpez.com. Le web est en constante volution. De nouveaux sites innovants sont crs tous les jours, repoussant les limites du HTML dans toutes les directions. Le HTML 4 est prsent partout depuis prs d'une dcennie maintenant et les diteurs cherchant de nouvelles techniques pour fournir des fonctionnalits amliores sont limits par les contraintes du langage et des navigateurs. Pour donner aux auteurs plus de flexibilit et d'interoprabilit et rendre les sites web et applications plus interactifs et passionnants, le HTML 5 introduit et amliore un large ventail de fonctionnalits, comprenant les contrles de formulaires, les APIs, le multimdia, la structure et la smantique. Le travail sur le HTML 5, commenc en 2004, est actuellement men en collaboration par le W3C HTML WG et le WHATWG. Un grand nombre d'acteurs cls participent l'effort du W3C dont des reprsentants des diteurs des quatre principaux navigateurs : Apple, Mozilla, Opera et Microsoft ; et un ventail d'autres organisations et individus avec de nombreux intrts et comptences diffrents. Notez que la spcification est toujours en criture et trs loin d'tre acheve. En tant que tel, il est possible que toute fonctionnalit aborde dans cet article change dans le futur.
Cet article a pour objectif de fournir une brve introduction certaines des fonctionnalits principales telles qu'elles sont dans l'bauche actuelle.
Un avant got du HTML 5 par Lachlan Hunt (Auteur) Sylvain Jorge Do Marco (Traducteur)
La structure.................................................................................................................................................................. 4 Vido et Audio............................................................................................................................................................. 7 Reprsentation du document.......................................................................................................................................8 Comment contribuer...................................................................................................................................................10 Remerciements.......................................................................................................................................................... 10
-3Copyright 2008 - Lachlan Hunt. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://s-jdm.developpez.com/tutoriels/html/traductions/presentation-html5/
La structure
Le HTML 5 introduit une srie complte de nouveaux lments qui font qu'il est beaucoup plus simple de structurer les pages. La plupart des pages HTML 4 contiennent une diversit de structures identiques, comme les en-ttes (header), les bas de page (footer) et les colonnes. Aujourd'hui, il est relativement frquent de les baliser par des lments div, leur attribuant chacun un identifiant ou une classe descriptive.
Ce diagramme illustre une prsentation typique deux colonnes, balise l'aide de div ayant des attributs id et class. Elle contient un en-tte, un pied de page, et une barre de navigation horizontale sous l'en-tte. Le contenu principal comprend un article et une barre latrale sa droite. L'utilisation d'lments div est due principalement aux versions actuelles du HTML 4 qui n'ont pas la smantique ncessaire pour dcrire ces parties plus spcifiquement. Le HTML 5 s'attle ce problme en introduisant de nouveaux lments pour reprsenter chacune de ces diffrentes sections.
Les lments div peuvent tre remplacs par de nouveaux lments : header, nav, section, article, aside et footer. Le code de ce document pourrait ressembler celui-ci :
<body> <header>...</header> <nav>...</nav> <article> <section>...</section> </article> <aside>...</aside> <footer>...</footer> </body>
Il y a plusieurs avantages utiliser ces lments. Utiliss en conjonction avec les lments de titre (h1 h6), ils fournissent tous un moyen de baliser les sections imbriques avec des niveaux de titre, au del des six niveaux possibles avec les versions prcdentes du HTML. La spcification comprend un algorithme dtaill de gnration de sommaire qui prend en compte la structure de ces lments et reste compatible avec les versions prcdentes. Il peut tre utilis la fois par les outils d'dition et les navigateurs pour gnrer des tables des matires et ainsi aider les utilisateurs naviguer dans le document. Par exemple, la structure de balises suivante utilise des lments section et h1 imbriqus :
<section> <h1>Niveau 1</h1> <section> <h1>Niveau 2</h1> <section> <h1>Niveau 3</h1> </section> </section> </section>
Notez que pour une meilleure compatibilit avec les navigateurs actuels, il est aussi possible d'utiliser de faon approprie les autres lments de titre (h2 h6) la place des lments h1. En identifiant le rle des sections dans la page utilisant des lments spcifiques de sparation, une technologie d'assistance peut aider l'utilisateur naviguer plus facilement sur la page. Par exemple, ils peuvent facilement sauter la section de navigation ou rapidement aller d'un article au suivant sans que les auteurs aient besoin de fournir des liens spcifiques. Les auteurs en profitent galement puisque remplacer la plupart des div du document par un des quelques lments distincts peut aider rendre le code source plus clair et plus simple pour l'auteur. L'lment header reprsente l'en-tte d'une section. Les en-ttes peuvent contenir plus qu'un simple titre de section. Par exemple, il serait raisonnable d'inclure dans le header des sous-titres, une information sur l'historique de version ou des lgendes.
<header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header> <header> <h1>Blog exemple</h1> <h2>Insrer une ligne de citation ici.</h2> </header>
L'lment footer reprsente le bas de la section laquelle il s'applique. Un pied contient typiquement une information sur sa section comme son auteur, des liens vers des documents lis, les donnes de copyright et autres donnes du mme type.
<footer> 2007 Exemple Inc.</footer>
L'lment nav reprsente une section de liens de navigation. Il convient la fois pour la navigation dans le site ou une table des matires.
<nav> <ul>
<li><a <li><a <li><a <li><a </ul> </nav>
href="/">Accueil</a></li> href="/produits">Produits</a></li> href="/services">Services</a></li> href="/apropos">A propos</a></li>
L'lment aside est destin au contenu qui est indirectement li au contenu qui l'entoure et est typiquement utile pour baliser des barres latrales.
<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">Septembre 2007</a></li> <li><a href="/2007/08/">Aot 2007</a></li> <li><a href="/2007/07/">Juillet 2007</a></li> </ul> </aside>
L'lment section reprsente une section gnrique d'un document ou d'une application, comme un chapitre par exemple.
<section> <h1>Chapitre 1: La Priode</h1> <p>C'tait le meilleur des temps, c'tait le plus mauvais des temps, c'tait l'ge de la sagesse, c'tait l'ge de la sottise, c'tait l'poque de la croyance, c'tait l'poque de l'incrdulit, c'tait la saison de la lumire, c'tait la saison de l'obscurit, ...</p> </section>
(extrait de 'A Tale of Two Cities') L'lment article reprsente une section indpendante d'un document, d'une page ou d'un site. Il convient pour du contenu comme des nouvelles ou des articles de blog, des messages de forum ou des commentaires individuels.
<article id="commentaire-2"> <header> <h4> <a href="#commentaire-2" rel="bookmark">Commentaire #2</a> par <a href="http://example.com/">Jack O'Niell</a> </h4> <p> <time datetime="2007-08-29T13:58Z">29 Aot 2007 13:58</time> </p> </header> <p>Voici un autre article gnial !</p> </article>
Vido et Audio
Ces dernires annes, la vido et l'audio sur le web sont devenus de plus en plus viables et des sites comme YouTube, Viddler, Revver, MySpace et des douzaines d'autres ont rendu plus simple pour tout le monde la publication de vido et d'audio. Cependant, comme le HTML n'offre pas par lui-mme les moyens ncessaires pour intgrer et contrler avec succs le multimdia, de nombreux sites dpendent de Flash pour fournir cette fonctionnalit. Bien qu'il soit possible d'intgrer du multimdia en utilisant divers plugins (comme QuickTime, Windows Media, etc.), Flash est actuellement le seul plugin largement dploy qui fournit une solution compatible multinavigateur avec les APIs apprcies par les dveloppeurs. Comme cela a t mis en vidence par les divers lecteurs de mdias bass sur Flash, les auteurs sont intresss par le fait de fournir leurs propres interfaces utilisateurs qui, gnralement, permettent aux utilisateurs de lire, mettre en pause, arrter, chercher, et ajuster le volume. L'objectif est de fournir cette fonctionnalit dans les navigateurs en ajoutant un support natif de vidos et audios embarqus et fournir des APIs DOM pour que les scripts contrlent la lecture. Les nouveaux lments video et audio le rendent vraiment facile. La plupart des APIs sont communes aux deux lments, les seules diffrences tant lies aux diffrences inhrentes entre des mdias visuels et non visuels. Opera et WebKit ont tous les deux publi des versions avec support partiel de l'lment video. Vous pouvez tlcharger la version exprimentale d'Opera ou une rcente version quotidienne de WebKit pour essayer ces exemples. Opera inclut le support d'Ogg Theora et WebKit supporte tous les formats supports par QuickTime y compris les codecs tiers. La manire la plus simple d'intgrer une vido est d'utiliser un lment video et de permettre au navigateur de fournir une interface utilisateur par dfaut. L'attribut controls est un attribut boolen qui indique si l'auteur souhaite que cette interface utilisateur soit prsente ou non par dfaut.
Un avant got du HTML 5 par Lachlan Hunt (Auteur) Sylvain Jorge Do Marco (Traducteur) <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Tlcharger le film</a> </video>
L'attribut facultatif poster peut tre utilis pour spcifier une image qui sera affiche la place de la vido avant qu'elle ne commence. Bien qu'il y ait quelques formats vido qui ont leur propre fonctionnalit poster, comme le MPEG-4, cela fournit une solution alternative qui peut fonctionner indpendamment du format vido. Il est aussi simple d'intgrer de l'audio une page en utilisant l'lment audio. La plupart des attributs sont communs aux lments video et audio, bien que pour d'videntes raisons, l'lment audio n'ai pas d'attributs width, height et poster.
<audio src="music.oga" controls> <a href="music.oga">Tlcharger la chanson</a> </audio>
Le HTML 5 fournit l'lment source pour spcifier des fichiers alternatifs vido et audio que le navigateur peut choisir en fonction de leur type ou des codecs supports. L'attribut media peut tre utilis pour spcifier une demande de slection base sur les limitations de l'appareil et l'attribut type pour spcifier le type et les codecs du mdia. Notez que lorsque les lments source sont utiliss, l'attribut src doit tre omis de l'lment parent vido ou audio ou les alternatives donnes par les lments source seront ignors.
<video poster="poster.jpg"> <source src="video.3gp" type="video/3gp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>
Pour les auteurs qui souhaitent un peu plus de contrle sur l'interface utilisateur afin de la faire correspondre au design gnral de la page web, l'API, riche, fournit plusieurs mthodes et vnements pour laisser aux scripts le contrle de la lecture du mdia. Les mthodes les plus simples utiliser sont play(), pause() et positionner currentTime pour revenir au dbut. L'exemple qui suit illustre leur utilisation.
<video src="video.ogg" id="video"></video> <script> var video = document.getElementById("video"); </script> <p> <button type="button" onclick="video.play();">Lecture</button> <button type="button" onclick="video.pause();">Pause</button> <button type="button" onclick="video.currentTime = 0;"><< Rembobiner</button> </p>
Il y a de nombreux autres attributs et APIs disponibles pour les lments vido et audio qui n'ont pas t prsents ici. Pour plus d'informations, vous pouvez consulter la spcification actuelle du projet.
Reprsentation du document
Contrairement aux versions prcdentes du HTML et du XHTML, qui sont dfinies avec les termes de leur syntaxe, le HTML5 est dfini avec les termes du Document Object Model (DOM), l'arbre de reprsentation utilis en interne
par les navigateurs pour reprsenter le document. Par exemple, considrons un document trs simple compos d'un en-tte, d'un titre et d'un paragraphe. L'arbre DOM pourrait ressembler quelque chose comme a :
L'arbre DOM comprend un lment title dans l'en-tte et des lments h1 et p dans le corps. L'avantage de dfinir le HTML 5 avec les termes du DOM est que le langage lui-mme peut tre dfini indpendamment de la syntaxe. Il y a essentiellement deux syntaxes qui peuvent tre utilises pour reprsenter des documents HTML : la srialisation HTML (connue en tant qu'HTML 5) et la srialisation XML (connue en tant qu'XHTML 5). La srialisation HTML se rapporte la syntaxe inspire par la syntaxe SGML des versions prcdentes du HTML, mais dfinie pour tre plus compatible avec la manire dont les navigateurs traitent rellement le HTML en pratique.
<!DOCTYPE html> <html> <head> <title>Un document HTML</title> </head> <body> <h1>Exemple</h1> <p>Voici un exemple de document HTML. </body> </html>
Notez que comme dans les prcdentes versions du HTML certaines balises sont optionnelles et sont automatiquement implicites. La srialisation XML se rapporte la syntaxe utilisant le XML 1.0 et les espaces de noms, tout comme le XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Un document HTML</title> </head> <body> <h1>Exemple</h1> <p>Voici un exemple de document HTML.</p> </body> </html>
Mises part les diffrences d'espaces blancs et la prsence de l'attribut xmlns, ces deux exemples sont quivalents. Les navigateurs utilisent le type MIME pour distinguer les deux. Tous documents prsents comme text/html doivent tre conformes aux conditions de la srialisation HTML et tous documents prsents avec un type MIME XML comme application/xhtml+xml doivent se conformer aux conditions de la srialisation XML.
Les auteurs devraient faire un choix clair sur la srialisation utiliser, qui peut dpendre du nombre de diffrents facteurs. Les auteurs ne devraient pas tre forcs sans condition utiliser l'un ou l'autre ; chacun est optimis pour diffrentes situations.
Les bnfices de l'utilisation du HTML

Compatibilit descendante avec les navigateurs existants Les auteurs sont dj familiers avec la syntaxe La syntaxe lgre et indulgente signifie qu'il n'y aura pas d'"cran jaune de la mort" anti-utilisateur si une erreur se glisse accidentellement Une syntaxe stnographique pratique, i.e. les auteurs peuvent omettre certaines balises et valeurs d'attributs
Les bnfices de l'utilisation du XHTML

Une syntaxe XML stricte encourage les auteurs crire des balises bien formes, que certains auteurs peuvent trouver plus facile maintenir S'intgre directement avec d'autres vocabulaires XML, comme SVG et MathML Permet l'utilisation d'un parseur XML, que certains auteurs utilisent comme une part de leurs procds d'dition et/ou de publication
Comment contribuer
Le travail sur le HTML 5 avance rapidement, pourtant il est encore prvu qu'il continue plusieurs annes. En raison de l'exigence de produire des cas de test et de raliser des implmentations interoprables, la fin des travaux est actuellement estime environ dix ou quinze ans. Pendant ce processus, les retours d'un large ventail de personnes comprenant, entre autres, les concepteurs et dveloppeurs web, les vendeurs de CMS et d'outils d'dition, et les vendeurs de navigateurs est primordial pour assurer son succs. Tout le monde n'est pas seulement bienvenu, mais activement encourag contribuer aux remarques sur le HTML 5. En plus de la spcification, il y a plusieurs autres efforts apparents destins aider les personnes mieux comprendre le travail. Les diffrences depuis le HTML 4 dcrivent les modifications qui sont survenues depuis la dernire version du HTML. Les principes du design HTML traitent des principes utiliss pour aider prendre des dcisions et vous aideront comprendre la logique derrire la plupart des dcisions actuelles de design. Le guide du dveloppeur Web en HTML 5, qui a commenc rcemment, est crit pour aider les designers et les dveloppeurs comprendre tout ce qu'ils ont savoir pour crire des documents conformes au HTML 5, fournit des conseils et dcrit les bonnes pratiques.
Il y a de nombreux lieux o vous pouvez contribuer. Vous pouvez rejoindre le groupe de travail du W3C (W3C's HTML WG) et vous inscrire / contribuer aux listes de diffusion du groupe de travail HTML ou au wiki. Vous pouvez aussi vous inscrire et contribuer aux listes de diffusion du WHATWG, poster dans le forum WHATWG, poster des commentaires ou crire des articles dans le blog WHATWG.
Remerciements
Tous mes remerciements Bovino pour sa relecture.
- 10 Copyright 2008 - Lachlan Hunt. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.

HTML 5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML 5

Transféré par

Droits d'auteur :

Formats disponibles

Un avant got du HTML 5

par Lachlan Hunt (Auteur) Sylvain Jorge Do Marco (Traducteur)

Cet article est la traduction de A Preview of HTML 5 disponible

<li><a <li><a <li><a <li><a </ul> </nav>

href="/">Accueil</a></li> href="/produits">Produits</a></li> href="/services">Services</a></li> href="/apropos">A propos</a></li>

Les bnfices de l'utilisation du HTML

Les bnfices de l'utilisation du XHTML

Vous aimerez peut-être aussi