Html5 Pour Les Web Designers Ed1 v1 (WWW - Videos-Formation - Org)

Les livres de ceux qui font le web
Ce document est la proprit exclusive de Fabrika Lankis (k_radja@yahoo.com) - 12 Septembre 2010 23:08
1
No.
Jeremy Keith
HTML5 pOuR LES WEB DESIGNERS

prface de Jeffrey Zeldman
user 177 at Wed Aug 25 04:01:34 +0200 2010
SIGNERS
LHTML5 est la spcification HTML la plus longue jamais crite. Cest galement la plus puissante et, en un sens, la plus droutante. Que doivent en retenir les web designers et les dveloppeurs? Comment exploiter toute la puissance de lHTML5 dans les navigateurs actuels? Avec beaucoup de style et desprit, Jeremy Keith va droit lessentiel dans ce guide de lutilisateur brillant et divertissant et rpond toutes ces questions, exemples clairs et concrets lappui.
Au sommaire
* Validation * Dtection de fonctionnalits * Choisissez votre stratgie * Impliquez-vous * Le futur *
La petite histoire du balisage * De lIETF au W3C * XHTML1: lHTML en XML * XHTML2: sauve qui peut! * Le schisme WHATWG TF * De Web Apps 1.0 lHTML5 * La runification * Le XHTML est mort: vive la syntaxe XHTML! * Lhistorique de lHTML5 * Les principes de lHTML5 * Principes de conception * Soyons pragmatiques * Gestion des erreurs * Cest grave DOCTYPE? * Syntaxe: baliser le sentier * On nutilise pas ce genre de langage * Turn and Face the Strange * Les nouveaux joujoux: les API JavaScript * Les mdias riches * Canvas * Audio * Vido * Web Forms 2.0 * Placeholder * Autofocus * Required * Autocomplete * Datalist * Types de champs * Tourns vers le futur * La smantique * Extensibilit * Nouveaux lments * Structure * Modles de contenu * Utiliser lHTML5 aujourdhui * Style * ARIA
Les livres de ceux qui font le web
user 177 at Wed Aug 25 04:01:34 +0200 2010
Jeremy Keith
HTML5 POUR LES WEB DESIGNERS
user 177 at Wed Aug 25 04:01:34 +0200 2010
DITIONS EYROLLES 61, bld Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Traduction autorise de louvrage en langue anglaise intitul HTML5 FOR WEB DESIGNERS de Jeremy Keith (ISBN : 978-0-9844425-0-8), publi par A Book Apart LLC Adapt de langlais par Charles Robert 2010 Jeremy Keith pour ldition en langue anglaise Groupe Eyrolles, 2010, pour la prsente dition, ISBN : 978-2-212-12861-1
Le code de la proprit intellectuelle du 1er juillet 1992 interdit en effet expressment la photocopie usage collectif sans autorisation des ayants droit. Or, cette pratique sest gnralise notamment dans les tablissements denseignement, provoquant une baisse brutale des achats de livres, au point que la possibilit mme pour les auteurs de crer des uvres nouvelles et de les faire diter correctement est aujourdhui menace. En application de la loi du 11 mars 1957, il est interdit de reproduire intgralement ou partiellement le prsent ouvrage, sur quelque support que ce soit, sans lautorisation de lditeur ou du Centre Franais dexploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.
user 177 at Wed Aug 25 04:01:34 +0200 2010
table des matires

1 9 22 40 56 78 86
chapitre 1
La petite histoire du balisage

chapitre 2
Les principes de l'HTML5

chapitre 3
Les mdias riches

chapitre 4
Web Forms 2.0

chapitre 5
La smantique
chapitre 6
Utiliser l'HTML5 aujourd'hui Index
user 177 at Wed Aug 25 04:01:34 +0200 2010
user 177 at Wed Aug 25 04:01:34 +0200 2010
avant-propos
Quand Mandy Brown, Jason Santa Maria et moi-mme avons fond A Book Apart, un sujet nous proccupait plus que les autres. Un seul auteur pouvait sy attaquer. Rien, pas mme larrive des vraies polices de caractres ni de CSS3, navait agit la communaut du web design standardis comme larrive imminente de lHTML5. Ne des dissensions provoques par la lenteur et les politiques du W3C, conue pour un Web dapplications et pas uniquement de documents, cette nouvelle dition de la lingua franca du Web a la fois excit, nerv et dsorient la communaut des web designers. Comme il la prouv avec le DOM et JavaScript, Jeremy Keith possde un talent unique qui lui permet dilluminer lHTML5 et daller droit lessentiel pour les besoins des designers-dveloppeurs. Cest ce quil fait dans ce livre, avec le strict nombre de mots et dimages ncessaire. Il existe dautres livres traitant de lHTML5, et il en paratra bien dautres encore. Il y aura des livres techniques de 500 pages pour les dveloppeurs dapplications, ceux dont les besoins ont largement aiguill le dveloppement de lHTML5. Il y aura des livres secrets encore plus longs pour les crateurs de navigateurs, abordant des dfis techniques que vous et moi naurons fort heureusement jamais envisager. Mais ce livre-ci est pour vous, vous qui crez du contenu sur le Web, qui utilisez ces balises pour leur sens et la smantique, vous qui concevez des interfaces et des expriences accessibles. Ce sera votre guide de lutilisateur dHTML5. Son but, commun tous les titres paratre dans le catalogue de A Book Apart, est de dmler un sujet dlicat, et de le faire vite pour mieux retourner au travail. Jeffrey Zeldman
user 177 at Wed Aug 25 04:01:34 +0200 2010
user 177 at Wed Aug 25 04:01:34 +0200 2010
LA PETITE HISTOIRE DU BALISAGE
LHTML est le langage unificateur du World Wide Web. Avec les simples balises quil contient, lHomme a cr un rseau de documents hyperlis , tonnamment vari, dAmazon, eBay et Wikipedia aux blogs et sites personnels consacrs aux chats sosies dHitler. LHTML5 est la dernire itration en date de cette lingua franca. Bien quelle constitue le changement le plus ambitieux de notre langue commune, ce nest pas la premire fois que le format HTML est mis jour. Ce langage volue depuis sa naissance. Comme le Web lui-mme, lHyperText Markup Language est une invention personnelle de Sir Tim Berners-Lee. En 1991, il crivit un document intitul HTML Tags dans lequel il proposa moins de deux douzaines dlments pouvant tre utiliss pour crire des pages web. Sir Tim nest pas linventeur des balises, ces mots compris entre les signes infrieur (<) et suprieur (>) ; celles-ci existaient dj
L a p e t i t e h i s to i r e d u b a L i s a g e
user 177 at Wed Aug 25 04:01:34 +0200 2010
dans le format SGML (Standard Generalized Markup Language). Plutt que dinventer une nouvelle norme, Sir Tim comprit quil tait prfrable de construire sur les fondations existantes, une tendance qui sobserve encore aujourdhui dans le dveloppement de lHTML5.
de lietF aU W3C : la roUte vers lHtml 4

LHTML 1 na jamais exist. La premire spcification officielle fut lHTML 2.0, publie par lIETF, lInternet Engineering Task Force. De nombreuses fonctions de cette spcification taient tires dapplications existantes. Par exemple, le navigateur web Mosaic de 1994, alors leader du march, permettait dj aux auteurs dincorporer des images dans leurs documents laide dune balise <img>. Llment img apparut plus tard dans la spcification HTML 2.0. LlIETF fut supplant par le W3C, le World Wide Web Consortium, qui publia les versions ultrieures de la norme HTML sur son site web http://www.w3.org. La deuxime moiti des annes 1990 vit une vague de rvisions de la spcification, jusqu la publication de lHTML 4.01 en 1999. ce moment, lHTML tait son premier tournant capital.
XHtml 1 : lHtml en Xml

Aprs lHTML 4.01, une nouvelle rvision du langage, appele XHTML 1.0, vit le jour. Le X signifiait eXtrme , et les dveloppeurs web devaient croiser les bras en prononant la lettre. Non, pas vraiment. Il sagissait du X de eXtensible , et la gestuelle tait tout fait facultative. Le contenu de la spcification XHTML 1.0 tait identique celui de lHTML 4.01 et ne comprenait aucun nouvel lment ou attribut. La seule diffrence rsidait dans la syntaxe du langage.
htML 5 p o u r L e s W e b d e s i g n e r s
user 177 at Wed Aug 25 04:01:34 +0200 2010
L o lHTML offrait une grande libert aux auteurs dans la rdaction des lments et des attributs, le XHTML exigeait que lon suive les rgles du XML, un langage de balisage plus strict sur lequel le W3C fondait la plupart de ses technologies. Des rgles plus strictes ntaient pas forcment mauvaises. Elles incitaient les auteurs utiliser un style dcriture unique. Alors que les balises et les attributs pouvaient prcdemment tre crits en majuscules, en minuscules voire en un mlange des deux, les balises et les attributs dun document XHTML 1.0 devaient tre crits en minuscules pour que celui-ci soit valide. La publication du XHTML 1.0 concida avec lessor des navigateurs compatibles avec CSS. Comme les web designers soutenaient lmergence de normes du Web incarne par le Web Standards Project, le XHTML, avec sa syntaxe plus stricte, semblait tre un langage de balisage rpondant aux bonnes pratiques . Puis, le W3C publia le XHTML 1.1. Alors que le XHTML 1.0 ntait que du HTML reformul en XML, le XHTML 1.1 tait du XML, du vrai, de lauthentique. Cela signifie quil ne pouvait pas tre trait avec un type MIME text/html. Pourtant, si un auteur publiait un document avec un type MIME XML, le navigateur web le plus populaire du moment, Internet Explorer, ne pouvait pas linterprter. Ctait comme si le W3C avait perdu pied avec la ralit quotidienne de la publication sur le Web.
XHtml 2 : saUve QUi peUt !

Si le personnage de Dustin Hoffman dans Le Laurat avait t web designer, le W3C lui aurait dit un mot, juste un mot : XML. Pour le W3C, lHTML tait fini depuis la version 4. Il commena dvelopper le XHTML 2, cens conduire le Web vers un nouvel horizon radieux, avec le XML pour dcor.
user 177 at Wed Aug 25 04:01:34 +0200 2010
Mme si le nom XHTML 2 ressemblait sy mprendre XHTML 1, ces deux langages navaient pas grand chose en commun. la diffrence du XHTML 1, le XHTML 2 tait incompatible avec le contenu existant du Web, et mme avec les versions prcdentes de lHTML. Ce devait tre un langage pur, affranchi du pass trouble des spcifications prcdentes. Ce fut un dsastre.
le sCHisme : WHatWG tF ?
Une rbellion se dessina au sein du W3C. On aurait dit que le consortium formulait des normes thoriquement pures sans aucun rapport avec les besoins des web designers. Les reprsentants dOpera, dApple et de Mozilla taient frustrs par la tournure des vnements. Ils voulaient que la priorit soit accorde aux formats permettant la cration dapplications web. Le diffrend atteignit son paroxysme lors dun sminaire, en 2004. Ian Hickson, qui travaillait alors pour Opera Software, proposa de dvelopper lHTML pour permettre la cration dapplications web. Sa proposition fut rejete. Les rebelles dsabuss formrent leur propre groupe : le Web Hypertext Application Technology Working Group, ou WHATWG pour faire court.
de Web apps 1.0 lHtml5

Ds le dpart, le WHATWG prit une toute autre direction que le W3C. Le W3C cherche le consensus : des questions sont souleves, dbattues, puis votes. Au WHATWG, des questions sont aussi souleves et dbattues, mais la dcision finale, en ce qui concerne le contenu dune spcification, revient lditeur. Cet diteur, cest Ian Hickson.
user 177 at Wed Aug 25 04:01:34 +0200 2010
premire vue, la procdure du W3C semble plus juste et plus dmocratique. Dans les faits, les opinions divergentes et les querelles internes peuvent freiner les avances. Au WHATWG, o tout le monde est libre de contribuer mais o lditeur a le dernier mot, les choses vont plus vite. Dailleurs, lditeur ne dispose pas vraiment dun pouvoir absolu : un comit de pilotage recrut sur invitation peut opposer son veto, dans le cas improbable dun scnario la Docteur Folamour. Au dbut, le gros du travail du WHATWG portait sur deux spcifications : Web Forms 2.0 et Web Apps 1.0. Ces deux spcifications taient destines complter lHTML. Avec le temps, elles furent regroupes dans une seule spcification, simplement appele HTML5.
la rUniFiCation
Pendant que le WHATWG dveloppait lHTML5, le W3C continuait travailler sur le XHTML 2. Il serait inexact de dire quil fonait droit dans le mur ; il y allait trs, trs lentement. En octobre 2006, Sir Tim Berners-Lee admit sur son blog que la tentative de migration du Web de lHTML vers le XML ne marchait tout bonnement pas. Quelques mois plus tard, le W3C tablissait une nouvelle charte crant un groupe de travail HTML. Au lieu de partir de zro, ils dcidrent judicieusement dutiliser le travail du WHATWG comme base pour les versions futures de lHTML. Toutes ces alles et venues rendirent la situation confuse. Le W3C travaillait simultanment sur deux langages de balisage diffrents et incompatibles : le XHTML 2 et lHTML 5 (notez lespace avant le chiffre cinq). Au mme moment, une autre organisation, le WHATWG, travaillait sur une spcification appele HTML5 (sans espace) qui devait servir de base lune des spcifications du W3C ! Un web designer dsireux de comprendre la situation aurait mieux fait de senvoyer luvre complte de David Lynch.
user 177 at Wed Aug 25 04:01:34 +0200 2010
le XHtml est mort : vive la sYntaXe XHtml !

Ce brouillard de confusion commena se dissiper en 2009. Le W3C annona que la charte du XHTML 2 ne serait pas renouvele. Dans les faits, le format tait mort depuis plusieurs annes ; cette annonce ntait rien de plus quun certificat de dcs. Curieusement, plutt que de passer inaperue, la mort du XHTML 2 fut accueillie par la jubilation de quelques mauvais esprits. Les dtracteurs du XML se servirent de cette annonce pour tourner en ridicule quiconque avait jamais utilis le XHTML 1, mme si le XHTML 1 et le XHTML 2 navaient pratiquement rien en commun Paralllement, les auteurs qui utilisaient le XHTML 1 pour appliquer un style dcriture plus strict craignirent que lavnement de lHTML5 ne prsaget un retour au dsordre. Comme vous le verrez bientt, ce nest pas forcment le cas. LHTML5 est aussi dsordonn ou strict que vous le souhaitez.
lHistoriQUe de lHtml5
Ltat actuel de lHTML5 nest plus aussi confus quil a t, mais il nest toujours pas parfaitement clair. Deux groupes travaillent sur lHTML5. Le WHATWG cre une spcification HTML5 en suivant une procdure dite de Commit-Then-Review : les changements sont appliqus avant dtre examins et dbattus. Le groupe de travail HTML du W3C prend cette mme spcification en suivant la procdure inverse ( Review-Then-Commit ). Comme vous pouvez limaginer, lalliance est ardue. Toutefois, il semble que la question pineuse de lespace ait trouv un consensus (cest HTML5 sans espace, si vraiment a vous intresse).
user 177 at Wed Aug 25 04:01:34 +0200 2010
La question la plus troublante pour les web designers qui trempent leurs orteils dans les eaux troubles de lHTML5 est peuttre celle-ci : Quand sera-t-il prt ?
Dans un entretien, Ian Hickson a dclar que selon lui, lHTML5 obtiendrait le statut de proposition de recommandation en 2022. Cette annonce a dclench une vague de protestations de la part de quelques web designers. Ils ne comprenaient pas le sens de proposition de recommandation , en revanche ils savaient quils navaient pas assez de doigts pour compter les annes jusquen 2022. Ces protestations taient indues. Dans ce cas prcis, le statut de proposition de recommandation requiert deux implmentations compltes de lHTML5. Au vu de lenvergure de la spcification, cette date est incroyablement ambitieuse. Aprs tout, les navigateurs nont pas les meilleurs antcdents quant limplmentation des normes existantes. Il a fallu plus dune dcennie pour quInternet Explorer supporte llment abbr. La date vraiment importante pour lHTML5 est 2012. Cest en 2012 que la spcification doit devenir recommandation candidate , cest--dire tre fin prte dans le discours normatif. Mais cette date nest pas particulirement pertinente non plus pour les web designers. Ce qui compte avant tout, cest la compatibilit des navigateurs avec les nouvelles fonctionnalits. On a commenc utiliser des morceaux de CSS 2.1 ds que certains navigateurs ont t en mesure de les interprter. Si lon avait attendu que tous les navigateurs soient entirement compatibles avec CSS 2.1 avant de lutiliser, on serait encore en train dattendre. Cela vaut galement pour lHTML5. On ne pourra pas le dclarer prt lemploi un moment prcis. On commencera plutt utiliser des morceaux de la spcification au gr de leur implmentation dans les navigateurs. Souvenez-vous, lHTML5 nest pas un langage compltement nouveau, parti de rien. Cest une volution, plus quune
user 177 at Wed Aug 25 04:01:34 +0200 2010
rvolution, dans lhistoire ininterrompue des langages de balisage. Si vous crez actuellement des sites web avec nimporte quelle version de lHTML, vous utilisez dj lHTML5.
user 177 at Wed Aug 25 04:01:34 +0200 2010
LES PRINCIPES DE LHTML5
La Rvolution franaise fut une re de bouleversements politiques et sociaux. La ferveur rvolutionnaire sappliqua mme lheure : pendant une brve priode, la Rpublique franaise mit en place un systme horaire dcimal, chaque jour tant divis en dix heures et chaque heure en cent minutes. Ctait un systme parfaitement logique et clairement suprieur au systme sexagsimal. Le temps dcimal fut un chec. Personne ne lutilisa. On pourrait dire la mme chose du XHTML 2. Le W3C a redcouvert lhistoire de la France postrvolutionnaire : les comportements sont peu enclins au changement.
prinCipes de ConCeption
Dsireux dviter les erreurs du pass, le WHATWG a rdig une liste de principes de conception afin dorienter le dveloppement de lHTML5. Un des principes cls consiste supporter le contenu existant . Cela signifie quil ny a pas dan zro pour lHTML5.
L e s p r i n c i p e s d e Lh t M L 5
user 177 at Wed Aug 25 04:01:34 +0200 2010
L o le XHTML 2 avait tent de balayer tout ce qui prcdait, lHTML5 se construit partir de spcifications et dimplmentations existantes. Lessentiel de lHTML 4.01 a survcu dans lHTML5. LHTML5 comprend dautres principes, tels que ne pas rinventer la roue et paver le sentier des vaches . Cela veut dire que sil existe une faon rpandue daccomplir une tche chez les web designers, et mme si ce nest pas la meilleure, elle doit tre codifie en HTML5. On pourrait aussi dire : si ce nest pas cass, on ne rpare pas . Nombre de ces principes de conception vous seront familiers si vous vous tes dj intress la communaut des microformats (http://microformats.org). La communaut HTML5 partage la mme approche pragmatique, consistant dvelopper un format sans trop se soucier des problmes thoriques. Cette attitude est consacre par le principe de priorit des circonscriptions , qui dicte : En cas de conflit, privilgiez dabord les utilisateurs, puis les auteurs, puis les implmenteurs, puis les spcificateurs, et enfin la puret thorique. Ian Hickson a dclar de nombreuses reprises que ceux qui dcidaient vraiment du contenu de lHTML5 taient les crateurs de navigateurs. En effet, si le crateur dun navigateur refuse de supporter une proposition particulire, il est inutile dajouter cette proposition la spcification puisque celle-ci ne serait que fiction. Daprs le principe de priorit des circonscriptions, nous autres web designers avons une voix plus forte encore : si nous refusons dutiliser une partie de la spcification, celle-ci est tout aussi fictive.
soYons praGmatiQUes
La cration de lHTML5 est mue par une tension interne constante. Dun ct, la spcification doit tre assez puissante pour supporter la cration dapplications web ; de lautre, lHTML5 doit tre
10
user 177 at Wed Aug 25 04:01:34 +0200 2010
compatible avec le contenu existant, mme si celui-ci est, en grande partie, un foutoir sans nom. Si la spcification sgare trop loin dans une direction, elle subira le mme sort que le XHTML 2, mais si elle va trop loin dans lautre, elle ne fera quentriner les balises <font> et les tableaux, qui constituent lessentiel de la mise en page de nombreuses pages web. Il sagit dun quilibre fragile qui requiert une approche pragmatique et pondre.
Gestion des erreUrs

La spcification HTML5 ne se borne pas dclarer comment les navigateurs doivent traiter les balises bien formes. Pour la premire fois, une spcification dfinit galement comment les navigateurs doivent se comporter avec les documents mal forms. Jusqu maintenant, les crateurs de navigateurs devaient dterminer individuellement la faon de grer les erreurs. Cela consistait gnralement faire de lingnierie inverse partir du comportement du navigateur le plus populaire, soit une vraie perte de temps. Les crateurs de navigateurs feraient mieux dimplmenter de nouvelles fonctionnalits au lieu de perdre leur temps dupliquer les solutions des concurrents. Dfinir la gestion des erreurs dans HTML5 est une tche incroyablement audacieuse. Mme si lHTML5 disposait des mmes lments et attributs que lHTML 4.01, sans nouvelle fonctionnalit, dfinir la gestion des erreurs dici 2012 serait une tche sisyphenne. La gestion des erreurs ne prsente peut-tre pas beaucoup dintrt pour les web designers, surtout si lon crit des documents valides et bien forms ds le dpart, mais elle est trs importante pour les crateurs de navigateurs. Alors que les spcifications des langages prcdents taient crites pour les auteurs, lHTML5 est crit pour les auteurs et les implmenteurs. Gardez cela lesprit quand vous parcourrez la spcification. Cest la raison pour laquelle la spcification HTML5 est si paisse
11
user 177 at Wed Aug 25 04:01:34 +0200 2010
et semble avoir t crite avec un niveau de dtail normalement rserv aux philatlistes ou aux champions dchecs.
Cest Grave, doCtYpe ?

Une dclaration de type de document, ou doctype, est traditionnellement utilise pour spcifier le type de balisage du document. Le doctype de lHTML 4.01 ressemble ceci (le symbole indique que la ligne se poursuit) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Voici le doctype du XHTML 1.0 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ces dclarations sont difficilement comprhensibles pour vous et moi, mais elles ne font que dire leur faon ce document est crit en HTML 4.01 , ou ce document est crit en XHTML 1.0 . On pourrait penser que le doctype qui dclare ce document est crit en HTML5 comporte le numro cinq quelque part, mais ce nest pas le cas. Le doctype de lHTML5 ressemble cela :
<!DOCTYPE html>
Il est si simple que mme moi, je pourrais men souvenir. Mais cest de la folie ! Sans numro de version dans le doctype, comment allons-nous spcifier les versions futures de lHTML ?
12
user 177 at Wed Aug 25 04:01:34 +0200 2010
La premire fois que jai vu le doctype de lHTML5, jai pens que ctait le comble de larrogance. Je me suis dit : Pensent-ils vraiment quil sagit l de la dernire spcification dun langage de balisage jamais crite ? Une fois de plus, des gens semblaient convaincus quils inauguraient une nouvelle re. En ralit, le doctype de lHTML5 est trs pragmatique. Puisque lHTML5 doit supporter le contenu existant, le doctype doit pouvoir sappliquer un document en HTML 4.01 ou en XHTML 1.0. Toutes les versions futures de lHTML devront galement supporter le contenu existant de lHTML5 ; lide mme dajouter un numro de version un document est donc vicie. La vrit, cest que les doctypes ne sont pas vraiment importants. Admettons que vous criez un document avec un doctype HTML 4.01. Si ce document comprend un lment dune autre spcification, comme lHTML 3.2 ou lHTML5, les navigateurs interprteront quand mme cette partie du document. Les navigateurs supportent les fonctionnalits, et non les doctypes. Les dclarations de type de document taient, la base, destines aux validateurs et non aux navigateurs. Un navigateur ne prtera attention au doctype quen cas de changement de doctype, un petit bidouillage ingnieux permettant dalterner entre les modes daffichage quirks et standards , suivant la prsence dun doctype adquat. Le doctype HTML5 constitue le minimum requis pour garantir que les navigateurs affichent une page en mode standard. En fait, cest la seule et unique raison dinclure ce doctype. Un document HTML crit sans le doctype HTML5 peut quand mme tre un document HTML5 valide.
la simpliCit mme
Le doctype nest pas la seule chose avoir t simplifie dans lHTML5.
13
user 177 at Wed Aug 25 04:01:34 +0200 2010
Si vous souhaitez spcifier lencodage des caractres dun document balis, la meilleure manire est de vous assurer que votre serveur envoie len-tte Content-Type adquat. Si vous voulez en tre doublement certain, vous pouvez galement spcifier le jeu de caractres laide dune balise <meta>. Voici la dclaration meta pour un document crit en HTML 4.01 :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Voici une manire bien plus simple de faire la mme chose en HTML5 :
<meta charset="UTF-8">
Comme pour le doctype, cette dclaration dencodage simplifie compte le nombre minimum de caractres requis pour tre correctement interprte par les navigateurs. La balise <script> pouvait galement se permettre de perdre un peu de poids. On y ajoute couramment un attribut type avec la valeur text/javascript .
<script type="text/javascript" src="file.js"></script>
Les navigateurs nont pas besoin de cet attribut. Ils partiront du principe que le script est crit en JavaScript, le langage de script le plus populaire du Web (et soyons honntes : le seul langage de script du Web) :
<script src="file.js"></script>
De mme, il est inutile de donner la valeur text/css lattribut type pour appeler un fichier CSS :
<link rel="stylesheet" type="text/css" href="file.css">
Vous pouvez simplement crire :

<link rel="stylesheet" href="file.css">
14
user 177 at Wed Aug 25 04:01:34 +0200 2010
sYntaXe : baliser le sentier

Certains langages de programmation, comme Python, imposent une faon particulire dcrire des instructions : il est obligatoire dindenter le code. Dautres langages de programmation, comme le JavaScript, ne prtent pas attention au formatage ; lindentation est donc facultative. Si vous cherchez passer une soire divertissante moindre frais, mettez une bande de programmeurs dans la mme pice et prononcez les mots indentation obligatoire Dlectez-vous des heures de flaming qui sensuivent. Une question philosophique fondamentale est au cur du dbat sur lindentation : un langage doit-il imposer un style dcriture particulier, ou les auteurs doivent-ils tre libres dcrire dans le style qui leur convient ? Dans les langages de balisage, lindentation est optionnelle. Si vous souhaitez aller la ligne et ajouter une indentation chaque fois que vous insrez un lment, grand bien vous fasse, mais les navigateurs et les validateurs nen ont pas besoin. Cela ne veut pas dire que le balisage est une grande foire dempoigne. Certains langages de balisage imposent un style dcriture plus strict que dautres. Avant le XHTML 1.0, la casse tait sans importance pour le format des balises. Il ntait pas obligatoire de placer les attributs entre guillemets. On pouvait mme ne pas fermer certaines balises. Le XHTML 1.0 applique la syntaxe du XML. Toutes les balises doivent tre crites en minuscules, tous les attributs doivent tre dlimits par des guillemets, et tous les lments doivent comprendre une balise de fermeture. Dans le cas particulier des lments autonomes comme br, la balise de fermeture obligatoire est remplace par une barre de fermeture oblique : <br />. Avec lHTML5, tout est possible. Majuscules, minuscules, avec ou sans guillemets, balise auto-fermante ou non : cest vous de dcider.
15
user 177 at Wed Aug 25 04:01:34 +0200 2010
Jutilise le doctype XHTML 1.0 depuis des annes. Jaime le fait de devoir crire dans un style particulier, et jaime la faon dont le validateur W3C applique ce style. Maintenant que jutilise lHTML5, cest moi de choisir le style qui me convient. Je comprends pourquoi certaines personnes redoutent les approximations de la syntaxe de lHTML5. Elles ont limpression de tourner le dos des annes de bonnes pratiques. Certains disent mme que la syntaxe laxiste de lHTML5 favorise le mauvais balisage. Je ne pense pas que ce soit vrai, mais je comprends cette inquitude. Cest un peu comme si un langage de programmation qui appliquait lindentation obligatoire devenait subitement plus indulgent. Pour ma part, je nai pas de problme avec la syntaxe dcontracte de lHTML5. Jai fini par assumer le fait de devoir appliquer moi-mme mon propre style dcriture prfr, mais jaimerais voir plus doutils me permettant de lvaluer par rapport un style particulier. Dans le monde de la programmation, cela sappelle un outil lint : un programme signalant les pratiques de programmation suspectes. Un outil lint pour le balisage serait diffrent dun validateur, qui compare le code un doctype. Lidal serait de pouvoir combiner les deux outils en une super machine tout faire. Quiconque programmera un tel appareil gagnera le respect et ladmiration ternels de tous les web designers.
on nUtilise pas Ce Genre de lanGaGe

Dans les versions prcdentes de lHTML, le procd consistant supprimer de la spcification un lment ou un attribut existant auparavant tait appel dprciation. On conseillait aux web designers de ne pas utiliser dlments dprcis, de ne pas leur envoyer de carte de vux Nol, ni mme de les voquer pendant les repas de famille.
16
user 177 at Wed Aug 25 04:01:34 +0200 2010
Il ny a pas dlments ni dattributs dprcis dans lHTML5, mais il y a de nombreux lments et attributs obsoltes.
Non, ce nest pas un abus de politiquement correct. Il existe une subtile diffrence de sens entre obsolte et dprci . Puisque lHTML5 vise tre compatible avec le contenu existant, la spcification doit reconnatre les lments existant auparavant, mme quand ceux-ci ne font plus partie de lHTML5. On aboutit une situation lgrement confuse, o la spcification dit simultanment auteurs, nutilisez pas cet lment et navigateurs, voici comment interprter cet lment . Si llment tait dprci, il ne serait pas mentionn du tout dans la spcification, mais puisquil est obsolte, il est inclus pour les besoins des navigateurs. moins que vous ne fabriquiez un navigateur, vous pouvez traiter les lments et les attributs obsoltes de la mme faon que les lments et les attributs dprcis : ne les utilisez pas dans vos pages web et ne les invitez pas pour prendre lapro. Si vous tenez utiliser un lment ou un attribut obsolte, votre document sera non conforme . Les navigateurs linterprteront convenablement, mais vous serez la rise du Web.
Adieu, content de tavoir connu

Les lments frame, frameset et noframes sont rendus obsoltes. Ils ne nous manqueront pas. Llment acronym est rendu obsolte, nous faisant ainsi gagner des annes de discussion qui seraient plus utilement dpenses calculer le taux de disparition des petites cuillres dans les restaurants dentreprise. Ne pleurez pas llment acronym ; utilisez simplement llment abbr. Oui, je sais quil existe une diffrence entre les acronymes et les abrviations : les acronymes se prononcent comme un seul mot, linstar de lOTAN ou du laser. Rappelezvous seulement que tous les acronymes sont des abrviations, mais que toutes les abrviations ne sont pas des acronymes.
17
user 177 at Wed Aug 25 04:01:34 +0200 2010
Les lments de prsentation, comme font, big, center et strike sont rendus obsoltes en HTML5. En ralit, ils sont obsoltes depuis des annes ; il est bien plus simple dobtenir les mmes effets de prsentation laide de proprits CSS comme font-size et text-align. De mme, les attributs de prsentation comme bgcolor, cellspacing, cellpadding et valign sont obsoltes. Utilisez plutt CSS. Tous les lments de prsentation ne sont pas obsoltes. Certains ont suivi un programme de rducation et on leur a donn une nouvelle chance.
tUrn and FaCe tHe stranGe (CH-CH-CHanGes)

Llment big est obsolte, mais pas llment small. Cette incohrence apparente a t rsolue en redfinissant small. Il a perdu sa fonction stylistique afficher ce texte en petite taille . Il possde maintenant la valeur smantique voici des petits caractres , pour le jargon juridique ou les conditions dutilisation. videmment, neuf fois sur dix, vous voudrez afficher les petits caractres en petite taille. Il faut simplement comprendre que laspect purement cosmtique de llment a t supplant. Avant, llment b voulait dire afficher ce texte en gras . Il est maintenant utilis pour quune portion de texte soit stylistiquement dcale de la prose normale sans exprimer une importance supplmentaire . Si le texte est effectivement plus important, llment strong sera plus appropri. De mme, llment i ne veut plus dire afficher ce texte en italique . Il signifie que le texte est dans une voix ou une humeur alternative . Une fois de plus, llment nimplique pas dimportance particulire ou demphase. Pour lemphase, utilisez llment em. Ces changements peuvent sembler jouer sur les mots. Cest effectivement le cas, mais ils aident galement amliorer
18
user 177 at Wed Aug 25 04:01:34 +0200 2010
luniversalit de lHTML5. Si vous rflchissez aux mots gras et italique , ceux-ci nont de sens que pour un support visuel comme un cran ou une page. En enlevant laspect visuel de la dfinition des lments, la spcification reste utile pour les user agents non visuels, tels que les lecteurs dcran. Cela encourage galement les designers penser au-del des environnements de rendu visuel.
Illi-cite
Llment cite a t redfini dans lHTML5. Alors quil dsignait prcdemment une rfrence dautres sources , il signifie maintenant le titre dune uvre . Bien souvent, la rfrence cite sera le titre dun livre ou dun film, mais la source peut tout aussi bien tre une personne. Avant lHTML5, on pouvait baliser le nom de cette personne avec cite. Cest maintenant expressment interdit, et tant pis pour la rtrocompatibilit. La justification de cette uvre de rvisionnisme tient dans ce raisonnement : les navigateurs mettent en italique le texte situ entre deux balises <cite> ; le titre dune uvre est gnralement en italique ; le nom dune personne nest gnralement pas en italique ; donc llment cite ne doit pas tre utilis pour baliser le nom dune personne. Cest trop injuste. Je suis favorable ce que lHTML5 sinspire des navigateurs, mais l, cest la queue qui remue le chien. Heureusement, aucun validateur ne peut dterminer si le texte situ entre les balises <cite> fait rfrence une personne ou non. Rien ne nous empche donc dutiliser llment cite de manire sense et rtrocompatible.
Llment a gonfl aux hormones

Alors que certains changements jouent franchement sur les mots, un lment subit une transformation radicale avec lHTML5.
19
user 177 at Wed Aug 25 04:01:34 +0200 2010
Llment a est, sans conteste, llment le plus important de lHTML. Il transforme notre texte en hypertexte. Il forme le tissu conjonctif du World Wide Web.
Llment a a toujours t un lment de type en-ligne (inline). Si vous vouliez crer un lien partir dun titre et dun paragraphe, vous deviez utiliser plusieurs lments a :
<h2><a href="/about">About me</a></h2> <p><a href="/about">Find out what makes me tick.</a></p>
En HTML5, vous pouvez envelopper plusieurs lments dans un seul lment a :

<a href="/about"> <h2>About me</h2> <p>Find out what makes me tick.</p> </a>
La seule chose quon ne peut pas faire, cest insrer un lment a dans un autre lment a. Cela pourrait sembler tre un changement radical, mais les navigateurs nauront pas grand chose faire pour supporter ce nouveau modle dhyperlien. Ils le supportent dj, mme si ce type de balise ntait pas techniquement lgal jusqu prsent. Cela parat lgrement contre-intuitif : les navigateurs ne devraient-ils pas implmenter une spcification existante ? Au contraire, la nouvelle spcification documente ce que les navigateurs font dj.
de noUveaUX JoUJoUX : les api JavasCript

Pour la documentation de CSS, il y a les spcifications CSS ; pour la documentation de lHTML, les spcifications HTML. Mais o se trouve donc la documentation des API JavaScript comme document.write, innerHTML et window.history ? La
20
user 177 at Wed Aug 25 04:01:34 +0200 2010
spcification JavaScript ne traite que du langage de programmation vous ny trouverez rien sur les API.
Jusqu prsent, les navigateurs craient et implmentaient les API JavaScript de manire indpendante, tout en regardant par-dessus lpaule des concurrents. LHTML5 va documenter ces API une bonne fois pour toutes, ce qui devrait garantir une meilleure compatibilit. Il peut paratre bizarre dinclure la documentation JavaScript dans la spcification dun langage de balisage, mais rappelezvous que lHTML5 est n de Web Apps 1.0. JavaScript est un composant indispensable des applications web. Des sections entires de la spcification HTML5 sont consacres aux nouvelles API pour la cration dapplications web. On y trouve Undo-Manager, qui permet au navigateur de suivre les changements apports un document. Il y a une section sur la cration dapplications web hors-ligne laide dune mmoire cache. Le glisser-dposer y est dcrit en dtail. Comme toujours, sil existe dj une implmentation, la spcification construira sur ses bases plutt que de rinventer la roue. LInternet Explorer de Microsoft utilise une API de glisser-dposer depuis des annes, qui a donc servi de base pour le glisser-dposer de lHTML5. Malheureusement, lAPI de Microsoft est, pour rester poli, problmatique. Il peut tre bon de rinventer la roue si celle-ci est carre Les API de lHTML5 sont trs puissantes. Dailleurs, elles me passent compltement au-dessus de la tte. Je laisserai donc les dveloppeurs plus intelligents que moi dtailler le sujet : ces API mritent un livre elles seules. En attendant, il reste plein de trucs nouveaux dans lHTML5 avec lesquels nous autres web designers allons pouvoir nous amuser. La fte commence au tout prochain chapitre.
21
user 177 at Wed Aug 25 04:01:34 +0200 2010
3
22
LES MDIAS RICHES

Lhistoire du Web est ponctue damliorations technologiques. Lun des tout premiers ajouts lHTML fut llment img, qui a fondamentalement tranform le Web. Lintroduction du JavaScript permit ensuite au Web de devenir un environnement plus dynamique. Par la suite, la prolifration dAjax fit du Web une option viable pour crer de vritables applications. Les normes du Web ont tellement volu quil est maintenant possible de construire pratiquement nimporte quoi laide de lHTML, de CSS et de JavaScript. Pratiquement. Quelques couleurs manquent la palette des normes du Web. Si vous souhaitez publier du texte et des images, lHTML et CSS feront laffaire. Toutefois, si vous voulez publier de laudio ou de la vido, il vous faut utiliser un plug-in comme Flash ou Silverlight. Ces plug-ins , ou modules dextension, aident combler les failles du Web. Ils permettent de publier des jeux, des films et
user 177 at Wed Aug 25 04:01:34 +0200 2010
de la musique en ligne, assez facilement. Mais ces technologies ne sont pas ouvertes. Elles ne sont pas cres par la communaut. Elles sont sous le contrle dentreprises indpendantes.
Flash est une technologie puissante, mais lutiliser revient parfois pactiser avec le diable. Nous gagnons la possibilit de publier des mdias riches sur le Web, mais nous perdons ainsi une partie de notre indpendance. LHTML5 est en train de combler ces lacunes. Ce faisant, il est en comptition directe avec des technologies propritaires comme Flash et Silverlight. Sauf quen HTML5, les mdias riches sont interprts de faon native par le navigateur, sans laide dun plug-in.
Canvas
Quand le navigateur Mosaic a apport la possibilit dintgrer des images sur des pages web, il a donn un nouvel essor au Web, mais ces images sont depuis restes statiques. On peut certes crer des gif anims ; on peut utiliser JavaScript pour changer le style dune image ; on peut gnrer une image de manire dynamique sur le serveur, mais ds lors quune image a t charge par un navigateur, son contenu ne peut plus tre modifi. Llment canvas constitue un environnement permettant de crer des images dynamiques. Llment lui-mme est trs simple. Il suffit den spcifier les dimensions dans la balise douverture :
<canvas id="mon-premier-canvas" width="360" height="240"> </canvas>
Si vous mettez quoi que ce soit entre les balises douverture et de fermeture, seuls les navigateurs ne supportant pas llment canvas le verront (fig 3.01) :
Les Mdias riches
23
user 177 at Wed Aug 25 04:01:34 +0200 2010
<canvas id="mon-premier-canvas" width="360" height="240"> <p>Votre navigateur ne supporte pas llment canvas ? Voici une image classique :</p> <img src="chiot.jpg" alt="un mignon petit chien"> </canvas>
fig 3.01 : Les utilisateurs dont le navigateur ne supporte pas llment canvas verront limage dun mignon petit chien-chien.
Le gros du travail se fait en JavaScript. Tout dabord, vous devez rfrencer llment canvas et son contexte. Ici, le mot contexte dsigne simplement API. Pour le moment, le seul contexte disponible est bidimensionnel :
var canvas = document.getElementById('mon-premier-canvas'); var context = canvas.getContext('2d');
Vous pouvez maintenant commencer dessiner sur la surface bidimensionnelle de llment canvas laide de lAPI documente dans la spcification HTML5 cette adresse : http:// bkaprt.com/html5/11. LAPI 2D offre grosso modo les mmes outils que les programmes de cration graphique comme Illustrator : traits, remplissage,
1. adresse complte : http://www.whatwg.org/specs/web-apps/current-work/ multipage/the-canvas-element.html
24
user 177 at Wed Aug 25 04:01:34 +0200 2010
ombres, formes et courbes de Bzier. La diffrence rside dans le fait quau lieu dutiliser une interface graphique, tout doit tre spcifi laide de JavaScript.
Dessiner avec des lignes de code : une partie de plaisir

Voici comment spcifier que le trait doit tre de couleur rouge :
context.strokeStyle = '#990000' ;
Maintenant, tout ce que vous dessinerez aura un contour rouge. Par exemple, voici la syntaxe pour dessiner un rectangle :
strokeRect ( gauche, haut, largeur, hauteur )
Si vous voulez dessiner un rectangle de 100 par 50 pixels, plac 20 pixels de la gauche et 30 pixels du haut de llment canvas, vous crirez (FIG 3.02) :
context.strokeRect(20,30,100,50) ;
fig 3.02 : un rectangle, dessin avec llment canvas.
Cest un exemple trs simple. LAPI 2D offre beaucoup dautres mthodes : fillStyle, fillRect, lineWidth, shadowColor et bien dautres encore. En thorie, une image qui peut tre cre dans un programme comme Illustrator peut tre cre avec llment canvas. Dans la pratique, ce serait extrmement laborieux et donnerait un code JavaScript excessivement long. Et dailleurs, ce nest pas vraiment lobjet de cet lment.
Les Mdias riches
25
user 177 at Wed Aug 25 04:01:34 +0200 2010
Canvas, pour quoi faire ?

Cest trs bien de pouvoir utiliser JavaScript et llment canvas pour crer des images la vole, mais moins dtre un irrductible masochiste, quoi bon ? Le vrai pouvoir de llment canvas, cest que son contenu peut tre modifi et redessin tout moment, selon les actions de lutilisateur. Cette possibilit permet de crer des outils et des jeux qui auraient auparavant requis un plug-in comme Flash. Lune des premires dmonstrations de force de llment canvas fut luvre de Mozilla Labs. Lapplication Bespin (https://bespin.mozilla.com) est un diteur de code fonctionnant directement dans le navigateur (fig 3.03). Cest une application trs puissante, trs impressionnante. Cest aussi lexemple type de ce quil ne faut pas faire avec llment canvas.
fig 3.03 : Lapplication bespin, construite avec llment canvas.
26
user 177 at Wed Aug 25 04:01:34 +0200 2010
Accs refus
Un diteur de code, par sa nature, manie du texte. Lditeur de code Bespin manie le texte contenu dans un lment canvas, sauf que ce nest plus vraiment du texte, mais une suite de formes qui ressemble du texte. Sur le Web, chaque document peut tre dcrit par un Document Object Model (DOM). Ce DOM peut comporter de nombreux nuds diffrents, les plus importants tant les lments, le texte et les attributs. Ces trois blocs de construction suffisent assembler peu prs nimporte quel document. Llment canvas na pas de DOM, le contenu dessin ne peut donc pas tre reprsent sous la forme dune arborescence de nuds. Les lecteurs dcran et dautres technologies daccessibilit dpendent de laccs un DOM pour interprter un document. Pas de DOM, pas daccs. Le manque daccessibilit de llment canvas est un gros problme pour lHTML5. Heureusement, quelques personnes avises ont form une task force pour trouver des solutions (http://bkaprt.com/html5/2)1. Laccessibilit de llment canvas est une question importante, et je ne voudrais pas dune solution bcle. En mme temps, je ne veux pas non plus que cet lment retarde le reste de la spcification HTML5.
Canvas fut
Tant que ce manque daccessibilit nest pas rgl, on peut penser que les web designers doivent sinterdire dutiliser llment canvas. Ce nest pas forcment le cas. Chaque fois que jutilise JavaScript sur un site web, cest en tant quamlioration. Les visiteurs nutilisant pas JavaScript
1. adresse complte : http://www.w3.org/Wai/pF/html-task-force
Les Mdias riches
27
user 177 at Wed Aug 25 04:01:34 +0200 2010
ont quand mme accs tout le contenu, mme si leur exprience nest pas aussi dynamique que dans un environnement JavaScript. Cette approche plusieurs niveaux, appele JavaScript discret, peut galement sappliquer canvas. Plutt que de lutiliser pour crer du contenu, on lutilise pour recycler le contenu existant. Supposons que vous ayez un tableau rempli de donnes, et que vous souhaitiez illustrer les tendances de ces donnes par un graphique. Si les donnes sont statiques, vous pouvez gnrer un graphique, par exemple avec lAPI Google Chart. En revanche, si les donnes changent en raction des vnements dclenchs par lutilisateur, canvas est loutil idal pour gnrer un graphique dynamique. En plus, le contenu reprsent dans llment canvas est dj accessible dans llment table prexistant. Les grosses ttes du Filament Group ont mis au point le plug-in jQuery pour cette situation particulire (fig 3.04 ; http://bkaprt.com/html5/31).
fig 3.04 : utilisation de llment canvas pour gnrer un graphique partir de donnes entres par lutilisateur.
1. adresse complte : http://www.filamentgroup.com/lab/update_to_jquery_ visualize_accessible_charts_with_html5_from_designing_with/
28
user 177 at Wed Aug 25 04:01:34 +0200 2010
Il existe une autre option. canvas nest pas la seule API permettant de gnrer des images dynamiques. SVG, pour Scalable Vector Graphics, est un format XML pouvant dcrire le mme genre de formes que canvas. Puisque le XML est un format de donnes textuel, le contenu du SVG est thoriquement valable pour les lecteurs dcran. Dans les faits, le SVG na pas captiv limagination des dveloppeurs comme canvas. Mme si canvas est un petit nouveau, il bnficie dj dune large compatibilit. Safari, Firefox, Opera et Chrome le supportent dj. Il y a mme une librairie JavaScript qui permet Internet Explorer de lutiliser (http://bkaprt.com/html5/41). Vu les mantras paver le sentier des vaches et ne pas rinventer la roue , on pourrait trouver bizarre que le WHATWG recommande llment canvas pour lHTML5 alors que le SVG existe dj. Comme souvent, la spcification HTML5 ne fait que documenter ce que les navigateurs font dj. Llment canvas na pas t cr pour lHTML5 ; il a t cr par Apple et implment dans Safari. Dautres crateurs de navigateurs ont vu ce quApple faisait, lont aim, et recopi. Cela semble peu mthodique, mais cest de l que viennent la plupart des normes du Web. Microsoft, par exemple, a cr lobjet XMLHttpRequest pour Internet Explorer 5 la fin du xxe sicle. Dix ans plus tard, tous les navigateurs supportent cette fonctionnalit, qui fait maintenant lobjet dun brouillon de travail en dernier appel au W3C. Dans le monde darwinien des navigateurs web, canvas se reproduit un peu partout. Sil parvient voluer vers plus daccessibilit, sa survie est assure.
1. adresse complte : http://code.google.com/p/explorercanvas/
Les Mdias riches
29
user 177 at Wed Aug 25 04:01:34 +0200 2010
aUdio
Le tout premier site que jai cr tait une vitrine pour mon groupe de musique. Je voulais que les visiteurs du site puissent couter les chansons du groupe. Jai donc tudi les nombreux formats et lecteurs qui se disputaient mon attention : QuickTime, Windows Media Player, Real Audio. Jai pass beaucoup trop de temps me soucier des parts de march relatives et de la compatibilit entre plateformes. Entre-temps, le format MP3 a gagn la bataille de lubiquit. Mais pour offrir nos visiteurs une faon simple dcouter un fichier sonore, il faut tout de mme utiliser une technologie propritaire. Le lecteur Flash a gagn cette bataille-l. Et maintenant, voil que lHTML5 monte sur le ring pour tenter de dtrner le champion en titre. Il est extrmement simple dinsrer un fichier audio dans un document HTML5 :
<audio src="witchitalineman.mp3"> </audio>
Cest un peu trop simple. Vous voudrez probablement tre plus spcifique quant au comportement du fichier sonore. Imaginons quil existe un immonde salaud qui dteste le Web et tous ceux quon y croise. Il se fiche probablement de savoir quil est incroyablement grossier et stupide dinsrer un fichier audio qui dmarre automatiquement. Grce lattribut autoplay, de tels actes de malveillance sont possibles :
<audio src="witchitalineman.mp3" autoplay> </audio>
Si jamais vous utilisez lattribut autoplay de cette faon, je devrai vous abattre. Remarquez que lattribut autoplay ne prend pas de valeur. Cest un attribut boolen, du nom du grand mathmaticien de Cork, George Boole.
30
user 177 at Wed Aug 25 04:01:34 +0200 2010
La logique informatique est entirement base sur la logique boolenne : un courant lectrique passe, ou ne passe pas ; une valeur binaire est gale un ou zro ; le rsultat dune comparaison est vrai ou faux .
Ne confondez pas les attributs boolens et les valeurs boolennes. Il serait logique de penser quun attribut boolen prend les valeurs true ou false . En fait, cest lexistence mme de lattribut qui est boolenne par nature : soit lattribut est inclus, soit il ne lest pas. crire autoplay="false" ou autoplay="non merci" revient crire autoplay. Si vous affectionnez la syntaxe du XHTML, vous pouvez crire autoplay="autoplay". Solution offerte par le Service de la rptition redondante. Si lide dimposer votre fichier audio au dmarrage ne vous parat pas assez diabolique, vous pouvez infliger encore plus de souffrance en le jouant en boucle. Un autre attribut boolen, appel loop, tient ce rle perfide :
<audio src="witchitalineman.mp3" autoplay loop> </audio>
Si vous utilisez lattribut loop avec lattribut autoplay, je devrai vous abattre deux fois.
Hors de contrle
Llment audio peut reprsenter une bndiction comme une maldiction. Il peut tre judicieux de laisser lutilisateur le contrle de la lecture du fichier audio. Cest ce quon fait avec lattribut boolen controls :
<audio src="witchitalineman.mp3" controls> </audio>
La prsence de lattribut controls invite le navigateur afficher des contrles natifs pour lire et mettre laudio en pause, ainsi quajuster le volume (fig 3.05).
Les Mdias riches
31
user 177 at Wed Aug 25 04:01:34 +0200 2010
fig 3.05 : utilisez controls pour afficher les contrles de lecture et du volume de votre fichier audio.
Si les contrles natifs du navigateur ne vous conviennent pas, vous pouvez crer les vtres. Avec JavaScript, vous pouvez interagir avec lAPI Audio, qui vous donne accs des mthodes comme play et pause, et des proprits comme volume. Voici un exemple vite fait mal fait avec des lments button et dhorribles gestionnaires dvnement (fig 3.06) :
<audio id="player" src="witchitalineman.mp3"> </audio> <div> <button onclick="document.getElementById('player').play()"> Play </button> <button onclick="document.getElementById('player').pause()"> Pause </button> <button onclick="document.getElementById('player').volume += 0.1"> Volume Up </button> <button onclick="document.getElementById('player').volume -= 0.1"> Volume Down </button> </div>
fig 3.06 : Les contrles obtenus avec les lments button.
32
user 177 at Wed Aug 25 04:01:34 +0200 2010
Mise en mmoire tampon

un stade, la spcification HTML5 comprenait un autre attribut boolen pour llment audio. Lattribut autobuffer tait plus poli et prvenant que laffreux autoplay. Il permettait aux auteurs de dire aux navigateurs que, mme si le fichier audio ne devait pas dmarrer automatiquement, il allait sans doute tre lu un moment ou un autre, et que le navigateur devait donc commencer le charger en arrire-plan. Cet attribut aurait pu tre utile, mais Safari a malheureusement dpass les bornes, dcidant de charger les fichiers audio sans se proccuper de la prsence de lattribut autobuffer. Souvenezvous que, comme autobuffer tait un attribut boolen, il tait impossible de demander Safari de ne pas prcharger laudio : autobuffer="false" revenait crire autobuffer="true" ou nimporte quelle autre valeur (http://bkaprt.com/html5/51). Lattribut autobuffer a maintenant t remplac par lattribut preload. Ce nest pas un attribut boolen. Il peut prendre trois valeurs diffrentes : none, auto et metadata. Avec preload="none", vous pouvez maintenant demander explicitement aux navigateurs de ne pas prcharger laudio :
<audio src="witchitalineman.mp3" controls preload="none"> </audio>
Si vous navez quun seul lment audio sur une page, vous pouvez utiliser preload="auto", mais plus il y aura dlments audio en prchargement, plus la bande passante de vos visiteurs sen trouvera sature.
Joue comme ci, joue comme a

Llment audio semble quasiment parfait. Il doit bien y avoir une complication quelque part ? Eh oui.
1. adresse complte : https://bugs.webkit.org/show_bug.cgi?id=25267
Les Mdias riches
33
user 177 at Wed Aug 25 04:01:34 +0200 2010
Le problme de llment audio ne se trouve pas dans la spcification. Le problme vient des formats audio.
Bien que le format MP3 soit devenu omniprsent, ce nest pas un format ouvert. Le format tant brevet, les technologies ne peuvent dcoder les fichiers MP3 sans en payer les droits. Sans problme pour les grandes entreprises comme Apple ou Adobe, plus difficilement pour les plus petites ou les groupes open-source. Ainsi, Safari jouera volontiers des fichiers MP3, au contraire de Firefox. Il existe dautres formats audio. Le codec Vorbis (gnralement sous la forme dun fichier .ogg) nest perclus daucun brevet. Firefox supporte le format Ogg Vorbis, mais... pas Safari. Heureusement, il existe une autre faon dutiliser llment audio sans avoir faire un choix cornlien entre deux formats. Plutt que dutiliser lattribut src dans la balise <audio> douverture, vous pouvez spcifier plusieurs formats laide de llment source :
<audio controls> <source src="witchitalineman.ogg"> <source src="witchitalineman.mp3"> </audio>
Un navigateur pouvant lire les fichiers Ogg Vorbis sarrtera au premier lment source. Un navigateur pouvant lire les fichiers MP3, mais pas les fichiers Ogg Vorbis, sautera le premier lment source et jouera le fichier du deuxime lment source. Vous pouvez aider les navigateurs en prcisant les types MIME de chaque fichier source :
<audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> </audio>
34
user 177 at Wed Aug 25 04:01:34 +0200 2010
Llment source est un lment autonome ; par consquent, si vous utilisez la syntaxe XHTML, assurez-vous dinclure une barre oblique la fin de chaque balise <source />.
Solution de secours
La possibilit de spcifier de multiples lments source est trs utile, mais certains navigateurs ne supportent pas du tout llment audio lheure actuelle. Vous avez devin de quel navigateur je parlais ? Internet Explorer et ses semblables doivent tre nourris la petite cuillre, lancienne, via Flash. Le modle de contenu de llment audio le permet. Tout ce qui est situ entre les balises <audio> et qui nest pas un lment source sera expos aux navigateurs qui ne comprennent pas llment audio :
<audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3"> <param name="movie" value="player.swf?soundFile=witchitalineman.mp3"> </object> </audio>
Dans cet exemple, llment object ne sera visible quaux navigateurs ne supportant pas llment audio. On peut mme aller plus loin. Llment object vous permet galement dinclure une solution de secours. Cela signifie que vous pouvez toujours fournir un bon vieil hyperlien en dernier recours :
<audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash"
Les Mdias riches
35
user 177 at Wed Aug 25 04:01:34 +0200 2010
data="player.swf?soundFile=witchitalineman.mp3"> <param name="movie" value="player.swf?soundFile=witchitalineman.mp3"> <a href="witchitalineman.mp3">Tlcharger la chanson</
a> </object> </audio>
Cet exemple comprend quatre niveaux de dgradation progressive :

Le navigateur supporte llment audio et le format Ogg Vorbis. Le navigateur supporte llment audio et le format MP3. Le navigateur ne supporte pas llment audio mais le plug-in Flash est install. Le navigateur ne supporte pas llment audio et le plug-in Flash est absent.
Accs complet
Le modle de contenu de llment audio est trs utile pour fournir un contenu de secours. Un contenu de secours est diffrent dun contenu daccessibilit. Supposons quune transcription accompagne le fichier audio. Voici la marche ne pas suivre :
<audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <p>I am a lineman for the county...</p> </audio>
La transcription ne sera visible que pour les navigateurs ne supportant pas llment audio. Cette solution ne risque pas daider un utilisateur sourd dot dun bon navigateur. Dailleurs, ledit contenu daccessibilit est souvent trs utile pour tout le monde, alors pourquoi le cacher ?
36
user 177 at Wed Aug 25 04:01:34 +0200 2010
<audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> </audio> <p>I am a lineman for the county...</p>
vido
Si lavnement du support natif des fichiers audio dans les navigateurs est enthousiasmant, le support natif de la vido fait saliver les web designers davance. Grce laugmentation de la bande passante, la vido est de plus en plus rpandue. Le plug-in Flash est pour le moment la technologie de choix pour afficher des vidos sur le Web, mais lHTML5 pourrait bien changer la donne. Llment video fonctionne tout comme llment audio. Il comprend les attributs optionnels autoplay, loop et preload. On peut spcifier lemplacement de la vido avec lattribut src de llment video, ou en plaant des lments source entre les balises <video>. Vous pouvez laisser au navigateur le soin de fournir une interface utilisateur avec lattribut controls, ou vous pouvez scripter vos propres contrles. La principale diffrence entre le contenu audio et le contenu vido, cest que les films, par nature, prennent plus de place sur lcran. Vous voudrez donc sans doute prciser des dimensions :
<video src="film.mp4" controls width="360" height="240"> </video>
Vous pouvez choisir une image reprsentative de la vido et demander au navigateur de lafficher laide de lattribut poster (fig 3.07) :
<video src="film.mp4" controls width="360" height="240" poster="apercu.jpg"> </video>
Les Mdias riches
37
user 177 at Wed Aug 25 04:01:34 +0200 2010
fig 3.07 : cet aperu est affich laide de lattribut poster.
La guerre des formats vido concurrents est encore plus sanglante que celle des formats audio. Parmi les acteurs principaux, citons MP4, qui est brevet, et Theora Video, qui ne lest pas. Une fois de plus, vous devrez proposer des encodages alternatifs et un contenu de secours :
<video controls width="360" height="240" poster="apercu.jpg"> <source src="film.ogv" type="video/ogg"> <source src="film.mp4" type="video/mp4"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=film.mp4"> <param name="movie" value="player.swf?file=film.mp4"> <a href="film.mp4">Tlcharger le film</a> </object> </video>
Les auteurs de la spcification HTML5 espraient lorigine spcifier un niveau de rfrence pour le support des formats. Hlas, les crateurs de navigateurs ne pouvaient saccorder sur un seul format.
Lavnement du natif
La possibilit dintgrer des vidos de faon native dans des pages web pourrait bien tre lajout le plus enivrant depuis
38
user 177 at Wed Aug 25 04:01:34 +0200 2010
lintroduction de llment img. Les gros pontes comme Google nont pas manqu dexprimer leur enthousiasme. Vous pouvez avoir un aperu de ce quils ont prvu pour YouTube ladresse http://youtube.com/htML5. Lun des problmes avec lutilisation de plug-ins pour les mdias riches, cest que le contenu du plug-in est isol du reste du document, alors que des mdias riches natifs saccommodent trs bien dautres technologies, comme JavaScript et CSS. Llment video nest pas seulement scriptable, il est galement stylable (fig 3.08).
fig 3.08 : style appliqu un lment video.
Essayez donc de faire a avec un plug-in Laudio et la vido sont les bienvenus dans lHTML5, mais le Web nest pas quun support de diffusion. Il est interactif. Les formulaires sont la faon la plus ancienne, et la plus puissante, de permettre cette interaction. Au chapitre 4, nous allons nous intresser la nouvelle mouture des formulaires en HTML5.
Les Mdias riches
39
user 177 at Wed Aug 25 04:01:34 +0200 2010
4
40
WEB FORMS 2.0
Quand Javascript fut introduit dans les navigateurs web, il fut immdiatement utilis pour deux tches : les images ractives et les formulaires amliors. Quand CSS arriva avec sa pseudoclasse :hover, les web designers neurent plus besoin dutiliser JavaScript pour obtenir un simple effet au survol de limage. Cest une tendance rcurrente. Si un modle est suffisamment populaire, il voluera presque certainement dune solution scripte vers quelque chose de plus dclaratif. Cest pour cette raison que CSS3 comprend encore plus danimations qui requraient auparavant lutilisation de JavaScript. Pour ce qui est des formulaires amliors, CSS est limit. Cest l que lHTML5 entre en jeu. Suivant le mme modle migratoire (solution scripte vers solution dclarative), la spcification apporte de nombreuses amliorations.
user 177 at Wed Aug 25 04:01:34 +0200 2010
Ces fonctionnalits faisaient lorigine partie dune spcification du WHATWG appel Web Forms 2.0, fonde sur les travaux existants du W3C. Cette spcification fait dsormais partie de lHTML5.
plaCeHolder
Voici un modle de script DOM rpandu, souvent utilis pour les formulaires de recherche :
1. Quand un champ du formulaire est vide, insrer un texte de substitution. 2. Quand lutilisateur slectionne ce champ, retirer le texte de substitution. 3. Si lutilisateur quitte le champ en le laissant vide, rtablir le texte de substitution.
Le texte de substitution est gnralement affich dune couleur plus claire quune vritable valeur, laide de CSS, de JavaScript, ou dune combinaison des deux. Dans un document HTML5, vous pouvez simplement utiliser lattribut placeholder (fig 4.01) :
<label for="hobbies">Vos hobbies</label> <input id="hobbies" name="hobbies" type="text" placeholder="Tournage de pouces">
Lattribut placeholder fait des merveilles avec les navigateurs qui le supportent, mais hlas, ils sont encore bien peu nombreux. Cest vous de dcider de la manire daborder les navigateurs incompatibles.
fig 4.01 : tournage de pouces est affich dans le champ via lattribut placeholder.
W e b F o r M s 2 .0
41
user 177 at Wed Aug 25 04:01:34 +0200 2010
Vous pouvez dcider de ne rien faire du tout. Aprs tout, cest une fonctionnalit bien sympathique, mais pas indispensable. Vous pouvez aussi vous rabattre sur une solution en JavaScript. Dans ce cas, vous devrez vous assurer que la solution en question ne sapplique quaux navigateurs qui ne comprennent pas lattribut placeholder. Voici une petite fonction JavaScript gnrique qui permet de vrifier si un lment supporte un attribut particulier :
function elementSupporteAttribut(element,attribut) { var test = document.createElement(element); if (attribut in test) { return true; } else { return false; } }
Cette fonction cre un lment fantme dans la mmoire (mais pas dans votre document), puis vrifie si ce prototype dlment comprend une proprit portant le mme nom que lattribut dont vous testez la prsence. La fonction renvoie true ou false. Avec cette fonction, vous pouvez vous assurer que la solution JavaScript ne sapplique quaux navigateurs qui ne supportent pas lattribut placeholder :
if (!elementSupporteAttribut('input','placeholder')) { // Placez ici la solution de secours en JavaScript. }
aUtoFoCUs
Salut ! Je suis le modle autofocus. Vous vous souvenez peut-tre de ma prestation dans Google : Jai de la chance et Twitter : Quoi de neuf ?
42
user 177 at Wed Aug 25 04:01:34 +0200 2010
Il sagit dun modle simple comprenant une seule tape, facile programmer en JavaScript :
1. Quand le document est charg, slectionner automatiquement un champ prcis dun formulaire.
LHTML5 vous permet de faire cela laide de lattribut autofocus :

<label for="statut">Quoi de neuf ?</label> <input id="statut" name="statut" type="text" autofocus>
Le seul problme avec ce modle, cest quil peut tre franchement casse-pieds. Quand je surfe sur le Web, jutilise souvent la barre espace pour faire dfiler une page, comme on droulerait un journal. Au lieu de cela, sur les sites comme Twitter qui utilisent le modle autofocus, je me retrouve remplir despaces un champ de formulaire. Je vois bien pourquoi lattribut autofocus a t ajout lHTML5 (le sentier des vaches...), mais jai peur quil ne soit pas vraiment pratique, en script comme en natif. Cest une fonctionnalit qui peut savrer tout aussi utile qu'exasprante. Prenez bien le temps de rflchir avant de limplmenter. Il y a au moins un avantage ce que ce modle passe du script la balise. En thorie, les utilisateurs pourront dsactiver loption dans les prfrences de leur navigateur. En pratique, aucun navigateur ne le permet encore, mais le modle est encore jeune. Pour le moment, la seule faon de dsactiver lautofocus consiste dsactiver entirement JavaScript. Cest un peu comme sarracher les yeux pour se protger dune lumire vive, mais a marche. Comme avec lattribut placeholder, vous pouvez vrifier le support de lattribut autofocus et proposer une solution scripte de secours :
if (!elementSupporteAttribut('input','autofocus')){ document.getElementById('statut').focus(); }
43
user 177 at Wed Aug 25 04:01:34 +0200 2010
Lattribut autofocus ne marche pas seulement avec llment input. Il peut est utilis avec nimporte quel type de champ, comme textarea ou select, mais une fois seulement par document.
reQUired
Lune des utilisations les plus courantes de JavaScript est la validation de formulaire ct client. Une fois encore, lHTML5 migre la solution scripte vers une solution balise. Ajoutez simplement lattribut boolen required :
<label for="pass">Votre mot de passe</label> <input id="pass" name="pass" type="password" required>
Thoriquement, cela permet aux navigateurs dempcher la validation du formulaire si les champs requis nont pas t remplis. Bien que les navigateurs ne prennent pas encore lattribut required en charge, vous pouvez quand mme lutiliser dans votre validation de formulaire en JavaScript. Au lieu de garder une liste de tous les champs requis dans votre script ou dajouter class="required" vos balises, vous pouvez dsormais vrifier la prsence de lattribut required.
aUtoComplete
Les navigateurs ne se contentent pas dafficher des pages web. La plupart des navigateurs offrent des fonctionnalits supplmentaires conues pour rendre la navigation plus fonctionnelle, plus sre ou plus pratique. En gnral, elles sont trs utiles, mais elles peuvent parfois tre dsagrables, voire carrment dangereuses. Je veux bien que mon navigateur conserve mes coordonnes, mais je prfre viter quil conserve mes identifiants bancaires, au cas o quelquun dciderait de voler mon ordinateur. LHTML5 vous permet de dsactiver lautocompltion champ par champ. Lattribut autocomplete nest pas boolen, mais il ne peut pourtant prendre que deux valeurs, on et off :
<form action="/autodestruction" autocomplete="off">
44
user 177 at Wed Aug 25 04:01:34 +0200 2010
Par dfaut, les navigateurs supposeront que la valeur de lattribut autocomplete est on , leur permettant de prremplir les formulaires.
Vous pouvez avoir le beurre et largent du beurre. Si vous voulez autoriser le prremplissage dun formulaire, mais le dsactiver pour un ou plusieurs champs, cest possible :
<input type="text" name="usageunique" autocomplete="off">
Il nexiste pas de solution de secours en JavaScript pour les navigateurs qui ne supportent pas lattribut autocomplete. Dans ce cas, le nouvel attribut HTML5 complte le comportement existant des navigateurs plutt que de remplacer une solution scripte. La possibilit de dsactiver lautocompltion dans les navigateurs peut sembler tre un drle dajout la spcification HTML5. LHTML5 est cens codifier les modles rpandus, et ce nest pas un cas trs coutumier. Mais tant donn les risques de scurit potentiels induits par lautocompltion, il parat logique de permettre aux propritaires de sites web de neutraliser cette fonctionnalit particulire.
datalist
Le nouvel lment datalist vous permet dhybrider un lment input classique avec un lment select. Grce lattribut list, vous pouvez combiner une liste doptions et une zone de saisie (fig 4.02) :
<label for="maplanete">Votre plante de naissance</label> <input type="text" name="maplanete" id="maplanete" list="planetes"> <datalist id="planetes"> <option value="Mercure"> <option value="Vnus"> <option value="Terre">
45
user 177 at Wed Aug 25 04:01:34 +0200 2010
<option value="Mars"> <option value="Jupiter"> <option value="Saturne"> <option value="Uranus"> <option value="Neptune"> </datalist>
Cela permet aux utilisateurs de slectionner une option propose dans la liste ou dentrer une valeur qui nest pas la liste du tout. Cela savre trs pratique dans les situations o lon ajouterait normalement un champ du genre : Si autre, veuillez prciser... (fig 4.03).
fig 4.02 : Le nouvel lment datalist.
fig 4.03 : Llment datalist, avec la possibilit pour lutilisateur dentrer une valeur absente de la liste.
Llment datalist est une amlioration apprciable et discrte pour les formulaires. Si un navigateur ne supporte pas datalist, le champ se comporte alors comme une zone de saisie normale.
tYpes de CHamps
Lattribut type de llment input senrichit considrablement en HTML5. Il y a tellement de sentiers paver quon se croirait sur un chantier Duba.
46
user 177 at Wed Aug 25 04:01:34 +0200 2010
Recherche
Un lment input avec lattribut type="search" se comportera quasiment de la mme manire quun lment input avec un attribut type="text" :
<label for="recherche">Rechercher</label> <input id="recherche" name="recherche" type="search">
La seule diffrence entre text et search , cest quun navigateur pourra afficher un champ de recherche diffremment pour reflter le style des champs de recherche du systme dexploitation. Cest exactement ce que fait Safari (fig 4.04).
fig 4.04 : safari applique le style de Mac os aux champs de recherche.
Coordonnes
Il existe trois nouvelles valeurs pour lattribut type correspondant diffrents types de coordonnes, adresse mail, sites web et numros de tlphone :
<label <input <label <input <label <input for="adressemail">Adresse mail</label> id="adressemail" name="adressemail" type="email"> for="siteweb">Site web</label> id="siteweb" name="siteweb" type="url"> for="telephone">Tlphone</label> id="telephone" name="telephone" type="tel">
Une fois encore, ces champs se comporteront comme des zones de saisie, mais les navigateurs disposeront dun peu plus dinformations propos des donnes attendues dans le champ.
47
user 177 at Wed Aug 25 04:01:34 +0200 2010
Safari prtend supporter ces nouveaux types de champs, mais on ne constate premire vue aucune diffrence dans le navigateur de bureau par rapport lattribut type="text". Cependant, si lon commence interagir avec le mme formulaire sous Safari Mobile, les diffrences deviennent videntes. Le navigateur affiche un clavier diffrent sur lcran selon la valeur de lattribut type (fig 4.05).
fig 4.05 : safari Mobile affiche un clavier diffrent sur lcran selon la valeur de lattribut type.
Bravo WebKit, cest finement jou.
Sliders
De nombreuses librairies JavaScript offrent des widgets prconus utiliser dans vos applications web. Ils marchent bien du moment que JavaScript est activ. Il serait bon que nos utilisateurs naient pas tlcharger un fichier JavaScript chaque fois que nous souhaitons ajouter un contrle intressant sur nos pages. Le slider est un exemple classique. Jusqu maintenant, il nous fallait utiliser JavaScript pour muler ce type dlment
48
user 177 at Wed Aug 25 04:01:34 +0200 2010
interactif. En HTML5, grce type="range", les navigateurs peuvent maintenant proposer un contrle natif :
<label for="montant">Combien ?</label> <input id="montant" name="montant" type="range">
Actuellement, Safari et Opera supportent tous deux ce type de champ, proposant des contrles semblables (fig 4.06).
fig 4.06 : Le type de champ range sous safari et opera.
Par dfaut, la valeur saisie acceptera une plage allant de zro cent. Vous pouvez dfinir vos propres valeurs minimum et maximum laide des attributs min et max :
<label for="note">Votre note</label> <input id="note" name="note" type="range" min="1" max="5">
Cest bien beau pour les utilisateurs de Safari et dOpera, mais les autres navigateurs afficheront un simple champ de saisie textuel. Cela peut suffire, mais vous voudrez peut-tre dfinir un contenu de secours en JavaScript pour les navigateurs qui ne supportent pas type="range".
Test
Le test du support natif des types de champs requiert une manipulation semblable au test du support des attributs. Il vous faudra une fois de plus crer un lment input fantme dans la mmoire, puis dfinir lattribut type que vous souhaitez tester. Si vous obtenez la valeur text en demandant la valeur de la proprit type, vous saurez que le navigateur ne supporte pas la valeur entre.
49
user 177 at Wed Aug 25 04:01:34 +0200 2010
Voici un programme dexemple, mme si vous pouvez srement crire quelque chose de beaucoup plus lgant :
function inputSupporteType(test) { var input = document.createElement('input'); input.setAttribute('type',test); if (input.type == 'text') { return false; } else { return true; } }
Vous pouvez ensuite utiliser cette fonction pour vous assurer quun widget JavaScript est fourni aux navigateurs qui ne supportent pas tel ou tel type de champs :
if (!inputSupporteType('range')) { // Placez ici la solution de secours en JavaScript. }
Un contrle natif sera srement charg plus vite quune solution scripte, qui devra attendre la fin du chargement du DOM. De mme, un contrle natif sera gnralement plus accessible quun contrle script, mme si, curieusement, le contrle range de Safari nest pour linstant pas accessible au clavier !
Boutons flchs
Le contrle natif range nexpose pas la valeur sous-jacente lutilisateur. Au lieu de cela, le nombre est affich sur la forme dun slider. Cela convient pour certains types de donnes, mais il peut parfois tre prfrable de permettre lutilisateur de voir et de choisir la valeur numrique. Cest cela que sert type="number" :
<label for="montant">Combien ?</label> <input id="montant" name="montant" type="number" min="5" max="20">
50
user 177 at Wed Aug 25 04:01:34 +0200 2010
Lutilisateur peut non seulement entrer directement une valeur dans le champ de saisie, mais galement se servir des flches pour modifier celle-ci (fig 4.07).
fig 4.07 : boutons flchs utilisant le type number.
Le type de champ number est un hybride de text et de range. Il permet aux utilisateurs dentrer directement des valeurs, comme dans un champ text, mais il permet galement aux navigateurs de sassurer que seules des valeurs numriques sont entres, comme avec le contrle range.
Date et heure
Lun des widgets JavaScript les plus priss est le calendrier. Vous connaissez la chanson : vous rservez un avion ou vous crez un vnement et vous devez choisir une date. Un petit calendrier saffiche cet effet. Ces calendriers font tous la mme chose, mais vous remarquerez que leur implmentation est lgrement diffrente dun site lautre. Un widget calendrier natif permettrait de lisser ces divergences et de rduire la charge cognitive pendant le choix de la date. LHTML5 introduit un tas de nouveaux types de champs spcifiquement conus pour la date et lheure :
date renvoie lanne, le mois et le jour. datetime renvoie lanne, le mois et le jour en combinaison avec les heures, les minutes, les secondes et le fuseau horaire. datetime-local est identique mais sans le fuseau horaire. time renvoie les heures, les minutes et les secondes. month renvoie lanne et le mois sans le jour.
Tous ces types de champs utilisent le format standardis AAAAMM-JJThh:mm:ss.Z (o A est lanne, M le mois, J le jour, h les heures, m les minutes, s les secondes et Z le fuseau horaire).
51
user 177 at Wed Aug 25 04:01:34 +0200 2010
Prenons par exemple la date et lheure de la fin de la premire guerre mondiale, 11 h 11 le 11 novembre 1918 :
date : 1918-11-11
datetime : 1918-11-11T11:11:00+01 datetime-local : 1918-11-11T11:11:00 time : 11:11:00 month : 1918-11
Il nexiste pas de type de champ year, bien quil y ait un type de champ week qui renvoie un nombre entre 1 et 53 en combinaison avec lanne. Il est trs simple dutiliser ces types de champs :
<label for="dtstart">Date de dpart</label> <input id=dtstart" name="dtstart" type="date">
Opera implmente ces types de champs avec son incontournable touche disgracieuse (fig 4.08).
fig 4.08 : Laffichage du calendrier natif dopera, avec la touche moche.
Comme toujours, les navigateurs qui ne supportent pas ces types de champs se rabattront sur un champ de saisie normal. Dans cette situation, vous pouvez demander aux utilisateurs dentrer la date et lheure au format ISO, ou utiliser la librairie
52
user 177 at Wed Aug 25 04:01:34 +0200 2010
JavaScript de votre choix afin de gnrer un widget. Assurezvous de commencer par vrifier le support natif :
if (!inputSupporteType('date')) { // Placez ici un widget calendrier. }
En JavaScript, mme le calendrier le plus lgamment crit ncessitera un code complexe pour gnrer le tableau des jours et grer les vnements lors du choix de la date. Un calendrier natif sera considrablement plus simple et rapide, en plus dtre identique dun site lautre.
Choix des couleurs

En HTML5, le plus ambitieux des remplacements de widgets est peut-tre le type de champ color. Celui-ci utilise le fameux format hexadcimal : #000000 pour le noir, #FFFFFF pour le blanc.
<label for="bgcolor">Couleur darrire-plan</label> <input id="bgcolor" name="bgcolor" type="color">
Lide tant damener les navigateurs implmenter un widget natif pour le choix des couleurs, comme il en existe dj dans toutes les autres applications de votre ordinateur. Jusqu prsent, aucun navigateur ne la implment, mais a promet ! En attendant, vous pouvez opter pour une solution en JavaScript, mais assurez-vous de tester le support natif, afin que votre code soit lpreuve du temps.
Libre-service
Tous ces nouveaux types de champs ont deux utilits : ils permettent aux navigateurs dafficher des contrles natifs adapts au type de donnes attendu et de valider la valeur entre. Ces ajouts lHTML5 couvrent la majorit des scnarios, mais vous devrez parfois valider une valeur qui ne rentre dans aucune des nouvelles catgories.
53
user 177 at Wed Aug 25 04:01:34 +0200 2010
La bonne nouvelle, cest que vous pouvez utiliser lattribut pattern pour spcifier prcisment le type de valeur attendu. La mauvaise nouvelle, cest quil vous faudra utiliser une expression rationnelle :
<label for="cp">Code postal</label> <input id="cp" name="cp" pattern="[\d]{5}">
En gnral, vous naurez jamais besoin dutiliser lattribut pattern. Si cela devait toutefois vous arriver, vous auriez, croyez-moi, tout mon soutien.
toUrns vers le FUtUr

Les formulaires ont pris un coup de jeune en HTML5. Le fardeau traditionnellement port par JavaScript passe progressivement sur les paules des balises. Nous sommes en pleine phase de transition, et seuls quelques navigateurs supportent quelques nouvelles fonctionnalits. Nous ne pouvons pas encore mettre JavaScript au placard, mais nous ne sommes pas si loin dun avenir meilleur. La validation ct client va devenir beaucoup plus simple, mme si vous ne devez jamais vous en contenter et valider galement les valeurs sur le serveur. Vos utilisateurs nauront plus tlcharger de librairies JavaScript pour gnrer des contrles de formulaire ; tout sera gr par le navigateur de faon native. Vous voyez srement les avantages avoir des contrles natifs pour les calendriers et les sliders, mais je parie que vous vous demandez : Est-ce que je peux les styler ? Cest une bonne question. lheure actuelle, la rponse est non . Adressez-vous au groupe de travail CSS pour toute rclamation.
54
user 177 at Wed Aug 25 04:01:34 +0200 2010
Cela pourrait vous rebuter. Si vous trouvez que limplmentation standard dun lment de formulaire est un peu sommaire, vous prfrerez peut-tre utiliser un widget JavaScript vous offrant un plus grand contrle. Jaimerais alors que vous vous posiez une autre question : Est-ce que je dois les styler ? Rappelez-vous, le Web, ce nest pas que le contrle. Si un visiteur de votre site est habitu tel bidule de formulaire natif, vous ne lui rendrez pas service en remplaant celui-ci par votre propre widget, ft-il plus joli. Personnellement, jaimerais bien voir les crateurs de navigateurs se battre pour offrir les contrles de formulaire HTML5 les plus beaux et les plus simples dutilisation. Cest une guerre des navigateurs qui me sirait. Mettons maintenant les formulaires de ct, et intressonsnous la nouvelle smantique croustillante de lHTML5.
55
user 177 at Wed Aug 25 04:01:34 +0200 2010
5
56
LA SMANTIQUE
LHTML ne nous procure pas beaucoup dlments avec lesquels travailler. Le choix est digne dune picerie de quartier, plus que dune grande surface. Nous avons des paragraphes, des listes et des titres, mais pas dvnements, dinformations ou de recettes. LHTML nous donne bien un lment pour baliser les abrviations, mais rien pour les prix. Manifestement, cette restriction nest pas rdhibitoire. Voyez plutt la diversit incroyable des sites web. Mme si lHTML ne prvoit pas dlment spcifique pour baliser chaque type de contenu, il est suffisamment flexible. Pour paraphraser Winston Churchill, lHTML est le pire langage de balisage, lexception de tous les autres.
user 177 at Wed Aug 25 04:01:34 +0200 2010
eXtensibilit
Dautres langages de balisage vous permettent dinventer llment que vous voulez. En XML, si vous voulez un lment event ou price, il vous suffit de prendre votre petit clavier et de le crer. Linconvnient de cette libert, cest quil vous faut ensuite apprendre un parseur ce que event et price veulent dire. Lavantage davoir un nombre dlments limit, cest que chaque user agent connat chaque lment. Les navigateurs ont une connaissance intgre de lHTML. Cela ne serait pas possible si nous pouvions crer des noms dlments volont. LHTML offre un joker aux web designers pour ajouter une valeur smantique aux lments : lattribut class. Cet attribut nous permet de classer des instances spcifiques dun lment comme classe ou type spcial de cet lment. Le fait que les navigateurs ne comprennent pas le vocabulaire utilis dans nos attributs class naffecte pas le rendu de nos documents. Si, ce stade, vous vous dites attends une seconde, les classes, cest pas pour CSS ? , eh bien vous navez pas tout fait tort. Le slecteur de classe CSS est un exemple de technologie qui utilise lattribut class, mais ce nest pas la seule raison dutiliser les classes. Les classes peuvent galement tre utilises dans un script DOM. Elles peuvent mme tre utilises par les navigateurs si le nom des classes suit une convention entendue, comme cest le cas avec les microformats.
Microformats
Les microformats sont un ensemble de conventions fixes par une communaut. Ces formats utilisent lattribut class pour combler les lacunes les plus flagrantes de lHTML : hCard pour les coordonnes, hCalendar pour les vnements, hAtom pour les informations. Puisquil y a un consensus de la communaut concernant le nom des classes utiliser, des parseurs et des extensions de navigateurs acceptent maintenant ces modles spcifiques. Les microformats sont limits par essence. Ils ne prtendent pas rsoudre chaque cas dutilisation potentiel, mais se concentrent
La sMantique
57
user 177 at Wed Aug 25 04:01:34 +0200 2010
plutt sur les fruits porte de main . Ils traitent 80 % des cas dutilisation en produisant 20 % de leffort. Il est relativement facile de dterminer quels sont ces fruits : il suffit de regarder le contenu dj en place, ou en dautres termes familiers, de paver le sentier des vaches. a vous rappelle quelque chose ? Les microformats et lHTML5 sont construits sur des philosophies trs similaires. En fait, ma description des microformats (des conventions fixes par une communaut) pourrait tout aussi bien sappliquer lHTML5.
Vider locan la petite cuillre

Le fait davoir utilis les microformats comme modles pour le dveloppement de lHTML5 nest pas au got de tout le monde. La loi des 80/20 est assez bonne pour le monde rudimentaire des noms de classes, mais lest-elle pour le langage de balisage le plus important du monde ? Certaines personnes pensent que lHTML doit tre extensible linfini. Il ne serait donc pas suffisant de fournir des solutions pour la majorit des cas dutilisation ; le langage devrait fournir des solutions pour tous les cas dutilisation potentiels. Largument le plus loquent en faveur dune telle extensibilit fut peut-tre celui de John Allsopp dans son brillant article sur A List Apart, Semantics in HTML5 (http://bkaprt.com/ html5/61) : Nous navons pas besoin dajouter des termes spcifiques au vocabulaire de lHTML, nous devons ajouter un mcanisme qui permet dajuster la richesse smantique dun document selon les besoins. Il existe dj des technologies cet effet. RDFa permet aux auteurs dajouter du vocabulaire personnalis des documents HTML. Mais la diffrence des microformats, qui utilisent
1. adresse complte : http://www.alistapart.com/articles/semanticsinhtML5
58
user 177 at Wed Aug 25 04:01:34 +0200 2010
simplement un ensemble dtermin de noms de classes, RDFa utilise des espaces de nommage pour permettre la cration dune varit infinie de formats. Ainsi, l o un microformat utiliserait une balise du type <h1 class="sommaire">, RDFa utilisera <h1 property="monformat:sommaire">. Il est vident que RDFa est potentiellement trs puissant, mais son expressivit a un prix. Les espaces de nommage introduisent une couche de complexit supplmentaire qui saccommode mal de la nature relativement simple de lHTML. Le dbat sur les espaces de nommage nest pas nouveau. Il y a quelques annes, dans un article de son blog, Mark Nottingham songeait leurs effets secondaires potentiellement destructeurs (http://bkaprt.com/html5/71) : Ce qui ma paru intressant avec lextensibilit de lHTML, cest que les espaces de nommage ntaient pas ncessaires. Netscape a ajout blink, Microsoft a ajout marquee, et ainsi de suite. Je soulignerai le fait que si lon avait eu des espaces de nommage en HTML ds le dpart, on aurait lgitim et institutionnalis les diffrences entre navigateurs au lieu de converger vers la mme solution. Contre lextensibilit infinie, voil une argumentation percutante en faveur dun vocabulaire limit, fond sur le consensus de la communaut. LHTML5 sera probablement accompagn dune mthode permettant daccrotre sa smantique native. Bien sr, lattribut class est toujours valable, et les microformats continueront donc fonctionner comme auparavant. LHTML5 sera peut-tre altr pour devenir compatible avec RDFa, ou utilisera peuttre son propre vocabulaire pour les microdonnes . Dans tous les cas, cette extensibilit aura vraisemblablement trs peu dintrt pour la plupart des web designers. Ce qui compte vraiment, cest la smantique native, dtermine par une communaut et implmente par les crateurs de navigateurs.
1. adresse complte : http://www.mnot.net/blog/2006/04/07/extensibility
La sMantique
59
user 177 at Wed Aug 25 04:01:34 +0200 2010
noUveaUX lments
LHTML5 implmente une poigne de nouveaux lments de type en-ligne (inline) venant rejoindre span, strong, em, abbr et quelques autres dans larsenal existant. Oh, et on ne dit plus en-ligne . On prfrera dire quils dcrivent la smantique de niveau texte .
mark
En parcourant une liste de rsultats de recherche, vous verrez souvent le terme recherch mis en surbrillance dans chaque rsultat. Vous pourriez marquer chaque occurrence du terme recherch laide dun lment span, mais span nest quune bquille dpourvue de sens, tout juste bonne servir de support une classe des fins de style. Vous pourriez utiliser em ou strong, mais ce serait smantiquement incorrect ; on ne veut pas donner une quelconque importance sur le terme recherch mais simplement trouver une faon de le mettre en surbrillance. Utilisez llment mark :
<h1>Rsultats de recherche pour 'licorne'</h1> <ol> <li><a href="http://clearleft.com/"> Chevauche la <mark>licorne</mark> UX sur larc-en-ciel du Web. </a></li> </ol>
Llment mark naccorde aucune importance son contenu, sauf pour montrer que celui-ci prsente temporairement un intrt. La spcification nous dit que mark indique un morceau de texte marqu ou mis en surbrillance dans un document des fins de rfrence, du fait de sa pertinence dans un autre contexte . Llment mark est utilisable dans dautres contextes que les rsultats de recherche, mais je suis bien infichu de trouver un seul exemple du genre.
60
user 177 at Wed Aug 25 04:01:34 +0200 2010
time
hCalendar est lun des microformats les plus populaires car il rpond un besoin trs courant : marquer des vnements pour que les utilisateurs puissent les ajouter directement leur calendrier. Avec hCalendar, la seule tape dlicate consiste dcrire les dates et les heures de manire lisible pour une machine. Les humains aiment donner des dates sous la forme 25 mai ou mercredi prochain , mais les parseurs veulent une jolie date au format ISO : AAAA-MM-JJThh:mm:ss. La communaut des microformats a trouv quelques solutions intelligentes ce problme, en utilisant par exemple llment abbr :
<abbr class="dtstart" title="1992-01-12"> 12 janvier 1992 </abbr>
Si le fait dutiliser llment abbr de cette manire vous incommode, il existe de nombreuses autres faons de marquer des dates et des heures lisibles par une machine dans des microformats laide du modle de classe value. En HTML5, ce problme est rgl par le nouvel lment time :
<time class="dtstart" datetime="1992-01-12"> 12 janvier 1992 </time>
Llment time peut tre utilis pour les dates, les heures, ou une combinaison des deux :
<time datetime="17:00">17 h</time> <time datetime="2010-04-07">7 avril</time> <time datetime="2010-04-07T17:00">17 h le 7 avril</time>
Vous ntes pas oblig de dfinir lattribut datetime, mais si vous ne le faites pas, vous devrez alors exposer la valeur lutilisateur final :
La sMantique
61
user 177 at Wed Aug 25 04:01:34 +0200 2010
<time>2010-04-07</time>
meter
Llment meter peut tre utilis pour baliser des mesures, du moment que ces mesures font partie dune chelle avec une valeur minimum et une valeur maximum.
<meter>9 chats sur 10</meter>
Vous navez pas exposer la valeur maximum si vous ne le souhaitez pas. Vous pouvez utiliser lattribut max la place :
<meter max="10">9 chats</meter>
Il existe un attribut min correspondant. Vous pouvez galement jouer avec les attributs high, low et optimum. Si vous le souhaitez, vous pouvez mme cacher la mesure elle-mme dans un attribut value.
<meter low="-273" high="100" min="12" max="30" optimum="21" value="25"> Il fait plutt chaud pour cette priode de lanne. </meter>
progress
Alors que meter est utile pour dcrire quelque chose qui a dj t mesur, llment progress vous permet de baliser une valeur qui est en plein changement :
Votre profil est complet <progress>60 %</progress>.
Une fois encore, vous pouvez utiliser les attributs min, max et value :
<progress min="0" max="100" value="60"></progress>
62
user 177 at Wed Aug 25 04:01:34 +0200 2010
Llment progress est particulirement utile en combinaison avec un script DOM. Vous pouvez utiliser JavaScript pour mettre jour la valeur en temps rel, permettant ainsi au navigateur de communiquer ce changement lutilisateur. Pratique pour les envois de fichiers avec Ajax.
strUCtUre
En 2005, Google diligenta une tude pour voir quels fruits taient porte de main sur les sentiers battus du Web (http://code.google.com/webstats/). Un parseur soccupa de parcourir plus dun milliard de pages web et rpertoria les noms de classes les plus courants. Les rsultats furent sans surprise. Les classes comme header, footer et nav tenaient le haut du pav. Cette smantique mergente correspond bien certains des nouveaux lments structurels de lHTML5.
section
Llment section est utilis pour regrouper du contenu de manire thmatique. Cela rappelle llment div, souvent utilis comme un conteneur de contenu gnrique. La diffrence, cest que div na aucune signification smantique ; il ne nous dit rien de son contenu. Llment section, en revanche, est utilis explicitement pour regrouper du contenu apparent. Vous pourrez peut-tre remplacer quelques uns de vos lments div par des lments section, mais demandez-vous toujours si tout le contenu est apparent.
<section> <h1>DOM Scripting</h1> <p>Ce livre est destin aux designers plutt quaux programmeurs.</p> <p>Par Jeremy Keith</p> </section>
La sMantique
63
user 177 at Wed Aug 25 04:01:34 +0200 2010
header
La spcification HTML5 dcrit llment header comme un conteneur pour un groupe doutils dintroduction ou de navigation . Cela semble raisonnable. Cest le genre de contenu que je mattendrais trouver dans une manchette, et le mot header , ou en-tte, est souvent utilis comme synonyme de manchette. Il y a une diffrence cruciale entre llment header de lHTML5 et lusage rpandu du mot en-tte ou manchette . Il ny a gnralement quune seule manchette sur une page, mais un document peut comporter plusieurs lments header. Vous pouvez par exemple utiliser un lment header dans un lment section. En fait, cest sans doute ce que vous devriez faire. La spcification dcrit llment section comme un regroupement de contenu thmatique, comprenant gnralement un en-tte .
<section> <header> <h1>DOM Scripting</h1> </header> <p>Ce livre est destin aux designers plutt quaux programmeurs.</p> <p>Par Jeremy Keith</p> </section>
Un header apparatra normalement en haut dun document ou dune section, mais ce nest pas obligatoire. Il est dfini par son contenu (prsentation ou aide la navigation) plutt que par sa position.
footer
Comme llment header, footer semble dcrire une position, mais comme pour header, ce nest pas le cas. Llment footer contient plutt des informations au sujet de llment qui le contient : auteur, informations de copyright, liens vers des contenus apparents, etc.
64
user 177 at Wed Aug 25 04:01:34 +0200 2010
Cela correspond assez bien lide que les web designers se font du mot footer . La diffrence, cest quon a lhabitude davoir un seul pied de page pour tout un document. LHTML5 nous permet galement den placer lintrieur des sections.
<section> <header> <h1>DOM Scripting</h1> </header> <p>Ce livre est destin aux designers plutt quaux programmeurs.</p> <footer> <p>Par Jeremy Keith</p> </footer> </section>
aside
Si llment header correspond au concept de la manchette, llment aside est une sorte dencadr. Quand je dis encadr , ce nest pas une question de position. Il ne suffit pas que le contenu apparaisse gauche ou droite du contenu principal pour utiliser llment aside. Une fois de plus, cest le contenu, et non la position, qui est important. Llment aside doit tre utilis pour du contenu indirectement apparent. Si vous avez un morceau de contenu que vous considrez comme diffrent du contenu principal, llment aside est probablement le bon conteneur. Demandez-vous si le contenu de llment aside peut tre retir sans affecter le sens du contenu principal du document ou de la section. Un bon exemple de contenu indirectement apparent serait une citation extraite du document. Elle rend la lecture plus agrable, mais on peut la supprimer sans affecter la comprhension du contenu principal. Gardez lesprit que si votre concept visuel prvoit de placer une partie du contenu dans un encadr, aside nest pas
La sMantique
65
user 177 at Wed Aug 25 04:01:34 +0200 2010
ncessairement le conteneur adquat. Il est courant, par exemple, de placer la biographie de lauteur dans un encadr. Llment footer se prte mieux ce genre de donnes, comme lindique explicitement la spcification (fig 5.01).
fig 5.01 : Le texte about the author de cette capture dcran doit tre balis avec footer et non aside.
Dans 90 % des cas, un header sera plac en haut de votre contenu, un footer la fin, et un aside sur le ct. Mais mfiezvous de cette apparente simplicit. Marchez sur des ufs et prenez garde aux 10 % qui restent.
nav
Llment nav fait exactement ce quon attend de lui. Il contient des informations de navigation, gnralement une liste de liens.
66
user 177 at Wed Aug 25 04:01:34 +0200 2010
En fait, je ferais mieux de clarifier tout cela. Llment nav est conu pour les informations de navigation principales. Une simple liste de liens ne justifie pas lutilisation de llment nav. En revanche, les liens permettant de naviguer sur un site doivent presque obligatoirement utiliser llment nav. Bien souvent, un lment nav apparatra dans un lment header. Cela parat logique si lon considre que llment header peut tre utilis pour les aides la navigation .
article
Il peut tre utile de considrer header, footer, nav et aside comme des formes spcialises de llment section. Une section est un morceau gnrique de contenu apparent, tandis que les lments header, footer, nav et aside sont des morceaux spcifiques de contenu apparent. Llment article est un autre type de section spcialis. On lutilise pour le contenu apparent autonome. Le problme tant de dterminer ce qui constitue un contenu autonome . Demandez-vous si vous publieriez le contenu dans un flux RSS ou Atom. Si le contenu a toujours un sens dans ce contexte, article est probablement llment utiliser. En fait, llment article est conu spcifiquement pour la syndication. Si vous utilisez un lment time dans un article, vous pouvez ajouter lattribut boolen optionnel pubdate pour indiquer quil sagit de la date de publication.
<article> <header> <h1>Critique de DOM Scripting</h1> </header> <p>Un vraie lueur despoir pour JavaScript au terme dune longue et parfois sombre traverse.</p>
La sMantique
67
user 177 at Wed Aug 25 04:01:34 +0200 2010
<footer> <p>Publi <time datetime="2005-10-08T15:13" pubdate> 15 h 13 le 8 octobre 2005 </time> par Glenn Jones</p> </footer> </article>
Sil y a plus dun lment time dans un article, un seul peut comporter lattribut pubdate. Llment article est utile pour les billets de blog, les informations, les commentaires, les critiques et les fils de discussion. Il couvre exactement les mmes cas dutilisation que le microformat hAtom. La spcification HTML5 va encore plus loin. Elle dclare galement que llment article doit tre utilis pour les widgets autonomes : cours de la bourse, calculatrice, horloge, mto et autres. Llment article tche maintenant de couvrir les mmes cas dutilisation que les web slices de Microsoft (http://bkaprt.com/html5/81). Il me parat trs contre-intuitif dappliquer un lment appel article au concept des widgets. Mais aprs tout, les articles et les widgets sont tous deux des types de contenu publiables et autonomes. Ce qui est plus problmatique, cest que les lments article et section sont trs similaires. Tout ce qui les spare, cest le mot autonome . Il serait facile de dcider quel lment utiliser sil existait des rgles strictes. Au lieu de cela, tout est une question dinterprtation. Il peut y avoir plusieurs articles dans une section, il peut y avoir plusieurs sections dans un article, il peut mme y avoir des sections dans les sections et des articles dans les articles. Cest vous de dcider quel est llment le plus appropri smantiquement pour une situation donne.
1. adresse complte : http://www.ieaddons.com/en/webslices/
68
user 177 at Wed Aug 25 04:01:34 +0200 2010
Un remde contre la div-ite ?

LHTML5 apporte les quelques nouveaux lments structurels dcrits ci-dessus. Ceux-ci sont particulirement utiles si vous construisez un site conventionnel, comme un blog. La plupart des blogs comprennent un en-tte suivi dune srie darticles, avec du contenu parallle dans un encadr et un pied de page (fig 5.02).
fig 5.02 : Le blog de votre serviteur.
Vous pouvez maintenant remplacer certains de vos lments div par des lments structurels smantiquement plus prcis. Attention, nen faites pas trop. Il y a fort parier que si vous utilisez div aujourdhui, vous utiliserez encore div demain. Ne changez pas vos lments div pour des lments HTML5 tout neufs, simplement parce que vous en avez la possibilit. Pensez au contenu.
La sMantique
69
user 177 at Wed Aug 25 04:01:34 +0200 2010
Ces nouveaux lments nont pas t crs dans le seul but de remplacer les lments div. Ils offrent aux navigateurs web une toute nouvelle faon dapprhender votre contenu.
modles de ContenU
Les versions prcdentes des langages de balisage divisaient les lments en deux catgories : les lments de type en-ligne et les lments de type blocs. LHTML5 utilise une approche plus fine, rpartissant les lments dans un plus grand nombre de catgories. Les lments en-ligne ont maintenant un modle de contenu de smantique de niveau texte . De nombreux lments de niveau bloc sont maintenant rassembls sous la bannire des contenus de regroupement : paragraphes, lments de liste, sections et ainsi de suite. Les formulaires ont leur propre modle de contenu. Les images, laudio, la vido et les canvas sont des contenus intgrs . Les nouveaux lments structurels introduisent un modle de contenu compltement nouveau appel contenu de segmentation (sectioning content).
Contenu de segmentation
Il est possible de crer le plan dun document HTML avec les lments de titre h1 h6. Voyez plutt cet exemple :
<h1>An Event Apart</h1> <h2>Villes</h2> <p>Rejoignez-nous en 2010 dans les villes suivantes.</p> <h3>Seattle</h3> <p>Suivez la route de brique jaune jusqu la ville meraude.</p> <h3>Boston</h3> <p>Beantown pour les intimes.</p> <h3>Minneapolis</h3> <p>La plus <em>belle</em>.</p> <small>Logement non fourni.</small>
70
user 177 at Wed Aug 25 04:01:34 +0200 2010
Ce qui nous donne le plan suivant :

An Event Apart Villes
Seattle Boston Minneapolis
Cela marche plutt bien. Tout contenu plac la suite dun lment de titre est associ ce titre. Regardez maintenant le dernier lment small. Celui-ci devrait tre associ au document dans son intgralit, mais un navigateur na aucun moyen de savoir que llment small ne doit pas dpendre de len-tte Minneapolis . Le nouveau contenu de segmentation de lHTML5 vous permet de dlimiter explicitement le dbut et la fin du contenu apparent :
<h1>An Event Apart</h1> <section> <header> <h2>Villes</h2> </header> <p>Rejoignez-nous en 2010 dans les villes suivantes.</p> <h3>Seattle</h3> <p>Suivez la route de brique jaune.</p> <h3>Boston</h3> <p>Beantown pour les intimes.</p> <h3>Minneapolis</h3> <p>La plus <em>belle</em>.</p> </section> <small>Logement non fourni.</small>
Il est maintenant clair que llment small dpend de len-tte An Event Apart et non de len-tte Minneapolis .
La sMantique
71
user 177 at Wed Aug 25 04:01:34 +0200 2010
Il est possible de subdiviser encore plus ce contenu, en plaant chaque ville dans sa propre section :
<h1>An Event Apart</h1> <section> <header> <h2>Villes</h2> </header> <p>Rejoignez-nous en 2010 dans les villes suivantes.</p> <section> <header> <h3>Seattle</h3> </header> <p>Suivez la route de brique jaune.</p> </section> <section> <header> <h3>Boston</h3> </header> <p>Beantown pour les intimes.</p> </section> <section> <header> <h3>Minneapolis</h3> </header> <p>La plus <em>belle</em>.</p> </section> </section> <small>Logement non fourni.</small>
Ce qui nous donne le mme plan :

An Event Apart Villes Seattle Boston Minneapolis
72
user 177 at Wed Aug 25 04:01:34 +0200 2010
Lalgorithme de calcul du plan

Jusquici, le nouveau contenu de segmentation ne nous aide pas beaucoup plus que les versions prcdentes de lHTML. La nouveaut de lHTML5, cest que chaque section possde son propre plan autonome. Cela veut dire que vous navez plus besoin de garder le fil du niveau de titre utiliser. Vous pouvez partir de h1 chaque fois :
<h1>An Event Apart</h1> <section> <header> <h1>Villes</h1> </header> <p>Rejoignez-nous en 2010 dans les villes suivantes.</p> <section> <header> <h1>Seattle</h1> </header> <p>Suivez la route de brique jaune.</p> </section> <section> <header> <h1>Boston</h1> </header> <p>Beantown pour les intimes.</p> </section> <section> <header> <h1>Minneapolis</h1> </header> <p>La plus <em>belle</em>.</p> </section> </section> <small>Logement non fourni.</small>
Les versions prcdentes de lHTML auraient produit un plan erron :
La sMantique
73
user 177 at Wed Aug 25 04:01:34 +0200 2010
En HTML5, le plan est correct :

hgroup
Parfois, on voudra utiliser un lment de titre sans voir son contenu apparatre dans le plan du document. Cest ce que vous permet de faire llment hgroup :
<hgroup> <h1>An Event Apart</h1> <h2>Pour ceux qui font le web</h2> </hgroup>
Dans ce cas, le titre de niveau deux ( Pour ceux qui font le web ) nest en fait quun slogan. Dans un lment hgroup, seul le premier en-tte fera partie du plan. Celui-ci nest pas ncessairement un h1 :
<hgroup> <h3>DOM Scripting</h3> <h4>Web design avec JavaScript et le Document Object Model</h4> </hgroup>
74
user 177 at Wed Aug 25 04:01:34 +0200 2010
Racines de segmentation
Certains lments sont invisibles sur le plan gnr. En dautres termes, quel que soit le nombre de titres que contiennent ces lments, ceux-ci napparatront pas dans le plan du document Les lments blockquote, fieldset et td ne sont pas pris en compte par lalgorithme de calcul du plan. Ces lments sont appels racines de segmentation (sectioning roots), ne pas confondre avec le contenu de segmentation.
Portabilit
Puisque chaque contenu de segmentation gnre son propre plan, vous navez plus vous contenter des lments h1 h6. Il ny a pas de limite au nombre de niveaux de titres, mais surtout, vous pouvez commencer penser votre contenu de manire vraiment modulaire. Supposons que je veuille publier un billet sur mon blog appel Sandwich au fromage . Avant lHTML5, il maurait fallu connatre le contexte du billet afin de dcider du niveau den-tte utiliser pour le titre. Si le billet est sur le page daccueil, il apparat alors aprs un lment h1 contenant le titre de mon blog :
<h1>Mon blog gnial</h1> <h2><a href="fromage.html">Sandwich au fromage</a></h2> <p>Mon chat a mang un sandwich au fromage.</p>
Mais si je publie le billet sur sa propre page, je veux que le titre soit un titre de niveau un :
<h1>Sandwich au fromage</h1> <p>Mon chat a mang un sandwich au fromage.</p>
En HTML5, je nai pas me soucier du niveau de titre utiliser. Il me faut simplement utiliser un contenu de segmentation, dans ce cas, un lment article :
La sMantique
75
user 177 at Wed Aug 25 04:01:34 +0200 2010
<article> <h1>Sandwich au fromage</h1> <p>Mon chat a mang un sandwich au fromage.</p> </article>
Maintenant, le contenu est vraiment portable. Le fait quil apparaisse sur la page daccueil ou sur sa propre page na aucune importance :
<h1>Mon blog gnial</h1> <article> <h1>Sandwich au fromage</h1> <p>Mon chat a mang un sandwich au fromage.</p> </article>
Le nouvel algorithme de calcul du plan de lHTML5 produit le bon rsultat :

Mon blog gnial Sandwich au fromage
Scoped
Le fait que chaque contenu de segmentation dispose de son propre plan est idal pour Ajax. Une fois de plus, lHTML5 affiche lambition dune spcification conue pour les applications web. Il peut tre problmatique de transfrer un bout de contenu dun document un autre. Les rgles CSS sappliquant au document parent sappliqueront galement au contenu insr. On touche l lun des dfis majeurs de la distribution des widgets sur le Web. LHTML5 offre une solution ce problme sous la forme de lattribut scoped, qui peut sappliquer un lment style. Tout
76
user 177 at Wed Aug 25 04:01:34 +0200 2010
style dclar dans cet lment ne sappliquera quau contenu de segmentation qui le contient :
<h1>Mon blog gnial</h1> <article> <style scoped> h1 { font-size: 75% } </style> <h1>Sandwich au fromage</h1> <p>Mon chat a mang un sandwich au fromage.</p> </article>
Dans cet exemple, seul le deuxime lment h1 aura une valeur font-size de 75 %. Voil pour la thorie : aucun navigateur ne supporte encore lattribut scoped. Et cest bien le problme. Avant de pouvoir commencer utiliser les nouveauts de lHTML5, vous devrez rflchir la compatibilit des navigateurs. Je connais quelques stratgies qui vous permettront de commencer utiliser lHTML5, quelle que soit la compatibilit des navigateurs. Dans le dernier chapitre, jaimerais en partager quelques-unes avec vous.
La sMantique
77
user 177 at Wed Aug 25 04:01:34 +0200 2010
6
78
UTILISER LHTML5 AUJOURDHUI

Si vous voulez commencer utiliser les nouveaux lments structurels de lHTML5 ds aujourdhui, rien ne vous en empche. La plupart des navigateurs vous permettront de styler ces nouveaux lments. Non pas parce que ces navigateurs supportent activement ces lments, mais parce que la plupart des navigateurs vous permettent dutiliser et de styler nimporte quel lment de votre cration.
stYle
Les navigateurs nappliqueront pas de style par dfaut aux nouveaux lments. Il vous faudra donc, au minimum, dclarer que les nouveaux lments structurels doivent imposer un saut de ligne :
section, article, header, footer, nav, aside, hgroup { display: block; }
user 177 at Wed Aug 25 04:01:34 +0200 2010
Cela suffit pour la plupart des navigateurs, mais Internet Explorer a des besoins spciaux. Il refuse catgoriquement de reconnatre les nouveaux lments, moins quun exemplaire de chaque lment nait t cr au pralable laide de JavaScript, comme ceci :
document.createElement('section');
Remy Sharp, le gnie du JavaScript, a crit un petit script trs pratique qui gnre tous les nouveaux lments HTML5. Chargez ce script avec un commentaire conditionnel afin quil ne soit utilis que par le chtif Internet Explorer :

Vous pouvez maintenant styler les nouveaux lments votre aise.
En-ttes
Les navigateurs ne supportent pas encore le nouvel algorithme de calcul du plan de lHTML5, mais vous pouvez quand mme commencer utiliser les niveaux de titre supplmentaires mis votre disposition. Geoffrey Sneddon a mis en ligne un outil, bien commode lui aussi, qui gnre un plan comme spcifi en HTML5 (http://bkapart.com/html5/91). Si vous suivez le conseil de la spcification HTML5, en partant de h1 dans chaque contenu de segmentation, vos rgles CSS pourraient bien vite se compliquer :
1. adresse complte : http://gsnedders.html5.org/outliner
u t i L i s e r L' h t M L 5 au j o u r d ' h u i
79
user 177 at Wed Aug 25 04:01:34 +0200 2010
h1 { font-size: 2.4em; } h2, section h1, article h1, aside h1 { font-size: 1.8em; } h3, section h2, article h2, aside h2, section section h1, section article h1, section aside h1, article section h1, article article h1, article aside h1, aside section h1, aside article h1, aside aside h1 { font-size: 1.6em; }
Voil pour les trois premiers niveaux seulement, et cela ninclut mme pas toutes les combinaisons den-ttes potentielles dans un contenu de segmentation. Heureusement, lalgorithme de calcul du plan de lHTML5 est plutt flexible. Si vous souhaitez utiliser les niveaux de titres lancienne, le plan nen sera pas affect.
aria
Les nouveaux lments structurels de lHTML5 seront trs utiles pour les technologies daccessibilit. Au lieu de crer des liens dvitement (skip navigation), il nous suffit dutiliser llment nav correctement pour permettre aux utilisateurs de lecteurs dcran de passer dune section une autre sans que nous ayons fournir un lien explicite. Cest en tout cas ce qui est prvu. Il faut pour linstant faire avec les technologies que les navigateurs et les lecteurs dcran supportent dj. Par chance, il existe dj une compatibilit excellente avec ARIA (Accessible Rich Internet Applications).
80
user 177 at Wed Aug 25 04:01:34 +0200 2010
Au maximum de ses capacits, ARIA permet aux technologies daccessibilit de participer des interactions Ajax quasiment avant-gardistes. Plus simplement, ARIA nous permet denrichir la smantique de nos documents. Lunit ARIA de base est lattribut role. Vous pouvez ajouter role="search" votre formulaire de recherche, role="banner" votre manchette et role="contentinfo" votre pied de page. Vous trouverez la liste complte des valeurs dans la spcification ARIA, ladresse http://bkapart.com/html5/101. Vous pouvez galement utiliser lattribut role en HTML 4.01, en XHTML 1.0 ou avec tout autre langage de balisage, mais votre document ne pourra plus tre valid, moins que vous ne criez un doctype personnalis, ce qui est extrmement fastidieux. En revanche, les rles ARIA font partie de la spcification HTML5, si bien que vous pouvez avoir le beurre et, dfaut de largent du beurre, le sourire du validateur. Vous pouvez galement utiliser la smantique ajoute de lattribut role pour grer les styles. Le slecteur dattribut est votre ami. Ces slecteurs vous permettent de distinguer les en-ttes et les pieds de page dun document de ceux dun contenu de segmentation :
header[role="banner"] { } footer[role="contentinfo"] { }
validation
Utilis bon escient, un validateur est un outil trs puissant pour un web designer. Autrement, cest un moyen facile pour des nerds snobinards de se moquer du travail des autres.
1. adresse complte : http://www.w3.org/tr/wai-aria/roles#role_definitions
81
user 177 at Wed Aug 25 04:01:34 +0200 2010
Henri Sivonen a cr un validateur HTML5 complet ladresse http://validator.nu/.

Vous navez mme pas besoin de mettre jour ladresse du validateur W3C (http://validator.w3.org/) dans vos favoris. Celui-ci utilise galement le parseur dHenri ds quil dtecte le doctype HTML5.
dteCtion de FonCtionnalits
Si vous voulez commencer utiliser certains des types de champs avancs de lHTML5, il vous faudra une mthode pour tester la compatibilit des navigateurs afin de fournir des alternatives en JavaScript. Modernizr est un fichier JavaScript trs utile qui dtecte le support des types de champs et des lments audio, video et canvas (http://www.modernizr.com/). Ce script cre un objet en JavaScript appel Modernizr. En interrogeant les proprits de cet objet, vous saurez si le navigateur supporte ou non tel type de champ :
if (!Modernizr.inputtypes.color) { // Placez ici la solution de secours en JavaScript. }
Modernizr fait galement un tour de passe-passe qui vous permet de styler les nouveaux lments structurels sous Internet Explorer. Ainsi, si vous utilisez Modernizr, pas besoin dutiliser le script de Remy.
CHoisisseZ votre stratGie

Avec lHTML5, il ne tient qu vous dtre ambitieux, ou prudent.
82
user 177 at Wed Aug 25 04:01:34 +0200 2010
Au grand minimum, vous pouvez prendre vos documents HTML ou XHTML existants et changer le doctype en :
<!DOCTYPE html>
Vous venez de mettre le doigt dans lengrenage. Tant qu faire, vous pouvez galement utiliser les rles ARIA. Quavez-vous perdre ? Si le fait dutiliser les nouveaux lments structurels vous angoisse, vous pouvez tout de mme vous habituer la nouvelle smantique en vous aidant des noms de classes comme flotteurs :
<div class="section"> <div class="header"> <h1>Hello world !</h1> </div> </div>
Par la suite, quand vous vous sentirez plus laise avec les nouveaux lments HTML5, vous pourrez remplacer ces lments div et ces noms de classes par les lments structurels correspondants. Bien quil soit encore trop tt pour utiliser les types de champs les plus avancs tels que date, range et color, il ny a aucun mal utiliser search, url, email et dautres types de champs simples. Souvenez-vous, les navigateurs qui ne reconnaissent pas ces valeurs traiteront simplement le champ comme sil tait de type text. Si vous avez lme dun aventurier, vous pouvez commencer jouer avec les lments audio, video et canvas. Sans tre encore prts pour le grand jour, ils peuvent tre amusants exprimenter sur votre site personnel.
83
user 177 at Wed Aug 25 04:01:34 +0200 2010
Ressources
Jcris souvent au sujet de lHTML5 sur mon site personnel : http://adactio.com/journal/tag/html5
Je ne suis pas le seul memballer. Le mythique Bruce Lawson partage galement ses rflexions : http://brucelawson.co.uk/category/html5 Bruce est un des nombreux contributeurs de HTML5 Doctor, une excellente ressource communautaire comprenant de nombreux articles intressants : http://html5doctor.com Si vous voulez vous attaquer aux aspects plus complexes de lHTML5, Remy Sharp repousse les limites : http://html5demos.com Mark Pilgrim a crit un livre trs complet appel Dive Into HTML5 (en anglais). Achetez-le chez OReilly ou lisez-le en ligne : http://diveintohtml5.org Pour toutes les fois o vous devrez aller droit la source, gardez la spcification HTML5 porte de main : http://whatwg.org/html5 La spcification HTML5 comprend beaucoup dinformations destines aux crateurs de navigateurs. Le W3C hberge une version jour de la spcification spcifiquement pour les auteurs : http://www.w3.org/tr/html-markup
impliQUeZ-voUs
En vous engageant dans laventure HTML5, vous serez peut-tre drout par certaines parties de la spcification. Ce nest pas grave, cest mme une excellente chose : vos impressions comptent.
84
user 177 at Wed Aug 25 04:01:34 +0200 2010
Des personnes trs intelligentes travaillent sur lHTML5, mais les web designers sont en minorit. Votre point de vue est donc grandement recherch.
Vous pouvez rejoindre le groupe de travail HTML du W3C en tant quexpert public invit (oubliez cette histoire kafkaenne dauto-invitation), mais je ne vous le recommande pas. La liste de diffusion associe engendre un trafic considrable, essentiellement pour des histoires de politiques et de procdure. La liste de diffusion du WHATWG est le lieu visiter si vous voulez vritablement dbattre de la spcification HTML5 : http://www.whatwg.org/mailing-list#specs Il existe galement un canal IRC. Parfois, on aime bien se retrouver entre soi : irc://irc.freenode.org/whatwg Ne soyez pas timide. Le canal IRC est le lieu idal pour poser des questions et obtenir les rponses de Ian Hickson, dAnne van Kesteren, de Lachlan Hunt et dautres membres du WHATWG.
le FUtUr
Jespre que cette petite balade dans le monde de lHTML5 vous a donn lenvie dexplorer cette technologie passionnante. Jespre galement que vous rapporterez les fruits de votre exploration au WHATWG. LHTML est loutil le plus important quun Web designer puisse manier. Sans le balisage, le web nexisterait pas. Je trouve la fois remarquable et merveilleux que tout le monde puisse contribuer lvolution de cette technologie des plus vitales. Chaque fois que vous crez un site web, vous contribuez lhritage culturel commun tous les tres humains. En choisissant lHTML5, vous contribuez aussi au futur.
85
user 177 at Wed Aug 25 04:01:34 +0200 2010
indeX
A
abbr 61 accessibilit 27, 80 Ajax 22 algorithme de calcul du plan 73 API JavaScript 20 ARIA 80 article 67 aside 65 attribut boolen 30 audio 30 autobuffer 33 autocomplete 44 autofocus 42 autoplay 30
F
Flash 22 footer 64
G
gestion des erreurs 11
H
header 64 hgroup 74 HTML 4.01 2, 10
I
Ian Hickson 4, 7, 10 IETF 2 img 2, 22 indentation obligatoire 15 innerHTML 20
B
Bespin 26 boutons flchs 50
J
JavaScript 14, 15, 22 JavaScript discret 28 jQuery 28
C
calendrier 51 canvas 23 choix des couleurs 53 cite 19 class 57 codage de caractres 14 contenu de secours 35 de segmentation 70 controls 31 coordonnes 47 CSS 3, 7, 14, 18
L
lint 16 loop 31
M
mark 60 meter 62 microformats 10, 57 modles de contenu 70 Modernizr 82 Mosaic 2 MP3 30, 34
D
datalist 45 date et heure 51 dprciation 16 dtection de fonctionnalits 82 doctype 12 document.write 20 DOM 27
N
nav 66 nouveaux lments 60
O
obsolte 17 Ogg Vorbis 34
E
em 18 en-ttes 79 extensibilit 57
P
pattern 54 placeholder 41
86
user 177 at Wed Aug 25 04:01:34 +0200 2010
portabilit 75 poster 37 preload 33 principes de conception 9 priorit des circonscriptions 10 progress 62 pubdate 67
support natif 38, 49 SVG 29 syntaxe 15
T
time 61 types de champs 46
Q
QuickTime 30
U
Undo-Manager 21
R
racines de segmentation 75 RDFa 58 Real Audio 30 recherche 47 required 44 ressources 84 role 81
V
validateur 16 validation 81 vido 37
W
W3C 2, 6 Web Apps 1.0 5 Web Forms 2.0 5, 41 Web Standards Project 3 WHATWG 4, 6, 9 window.history 20 Windows Media Player 30
S
scoped 76 section 63 SGML 2 Silverlight 22 Sir Tim Berners-Lee 1, 5 sliders 48 small 18 source 34 strong 18 structure 63 style 78
X
XHTML 1.0 2, 15 1.1 3 2 3, 6 XML 3, 15 XMLHttpRequest 29
index
87
user 177 at Wed Aug 25 04:01:34 +0200 2010
a booK apart : les livres de CeUX QUi Font le Web

Le web design est une affaire de matrise multidisciplinaire et de haute prcision. Cest justement lide qui se reflte dans notre nouvelle collection de petits livres, destine tous ceux qui crent des sites Web. Les ouvrages de la collection A Book Apart sont des tudes approfondies et minutieusement dites sur des sujets prcis. Nous avons le plaisir de lancer cette collection avec HTML5 pour les web designers de Jeremy Keith.
user 177 at Wed Aug 25 04:01:34 +0200 2010
propos de laUteUr
Auteur de deux autres ouvrages DOM Scripting et Bulletproof Ajax, Jeremy Keith est un dveloppeur Web irlandais qui vit Brighton en Angleterre, o il collabore avec le cabinet de conseil Web Clearleft. Son site personnel est adactio.com et son dernier projet, Huffduffer, un service qui permet de crer des podcasts partir de sons trouvs sur le Web. Quand il ne cre pas des sites Web, Jeremy joue du bouzouki dans le groupe Salter Cane.
user 177 at Wed Aug 25 04:01:34 +0200 2010
user 177 at Wed Aug 25 04:01:34 +0200 2010

Html5 Pour Les Web Designers Ed1 v1 (WWW - Videos-Formation - Org)

Transféré par

Informations du document

Titre original

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

Html5 Pour Les Web Designers Ed1 v1 (WWW - Videos-Formation - Org)

Transféré par

Droits d'auteur :

Formats disponibles

Les livres de ceux qui font le web

HTML5 pOuR LES WEB DESIGNERS

* Validation * Dtection de fonctionnalits * Choisissez votre stratgie * Impliquez-vous * Le futur *

Les livres de ceux qui font le web

user 177 at Wed Aug 25 04:01:34 +0200 2010

HTML5 POUR LES WEB DESIGNERS

user 177 at Wed Aug 25 04:01:34 +0200 2010

DITIONS EYROLLES 61, bld Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com

user 177 at Wed Aug 25 04:01:34 +0200 2010

table des matires

La petite histoire du balisage

Les principes de l'HTML5

Les mdias riches

Web Forms 2.0

Utiliser l'HTML5 aujourd'hui Index

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

LA PETITE HISTOIRE DU BALISAGE

user 177 at Wed Aug 25 04:01:34 +0200 2010

de lietF aU W3C : la roUte vers lHtml 4

XHtml 1 : lHtml en Xml

user 177 at Wed Aug 25 04:01:34 +0200 2010

XHtml 2 : saUve QUi peUt !

user 177 at Wed Aug 25 04:01:34 +0200 2010

de Web apps 1.0 lHtml5

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

le XHtml est mort : vive la sYntaXe XHtml !

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

LES PRINCIPES DE LHTML5

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

Gestion des erreUrs

user 177 at Wed Aug 25 04:01:34 +0200 2010

Cest Grave, doCtYpe ?

Voici le doctype du XHTML 1.0 :

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

Vous pouvez simplement crire :

user 177 at Wed Aug 25 04:01:34 +0200 2010

sYntaXe : baliser le sentier

user 177 at Wed Aug 25 04:01:34 +0200 2010

on nUtilise pas Ce Genre de lanGaGe

user 177 at Wed Aug 25 04:01:34 +0200 2010

Adieu, content de tavoir connu

user 177 at Wed Aug 25 04:01:34 +0200 2010

tUrn and FaCe tHe stranGe (CH-CH-CHanGes)

user 177 at Wed Aug 25 04:01:34 +0200 2010

Llment a gonfl aux hormones

user 177 at Wed Aug 25 04:01:34 +0200 2010

En HTML5, vous pouvez envelopper plusieurs lments dans un seul lment a :

de noUveaUX JoUJoUX : les api JavasCript

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010

LES MDIAS RICHES

user 177 at Wed Aug 25 04:01:34 +0200 2010

Les Mdias riches

user 177 at Wed Aug 25 04:01:34 +0200 2010

user 177 at Wed Aug 25 04:01:34 +0200 2010