|
|
Association Francophone des Utilisateurs de Logiciels Libres French speaking Libre Software Users' Association Promouvoir les logiciels libres ainsi que l'utilisation de standards ouverts. |
|
|
Mini guide pour réaliser des documents standardsPrésentation des standards et de la validité des documentsUn peu d'histoire...Au tout début du web, seules quelques documentations rudimentaires faisaient office de guide pour la création de page web. Mosaic, puis Netscape se sont emparés de ces documents pour créer des navigateurs de plus en plus puissants, en créant des extensions aux spécifications de départ. Microsoft, en 1996, a suivi Netscape dans le mouvement, créant à son tour des extensions à HTML qui lui étaient propres. L'émulation due à la concurrence faisant son office, Netscape et Microsoft ont chacun leur tour "amélioré" HTML d'une façon incompatible avec leur concurrent. C'est ainsi que l'on s'est retrouvé avec le Web divisé en deux camps, l'un pro-Microsoft, et l'autre pro-Netscape, chaque camp arborant autant de bannières proclamant son appartenance au "bon" camp. Le développeur Web devait pour supporter les deux navigateurs, faire des choix cornéliens :
Mais aujourd'hui, les choses ont bien changé. Car depuis les débuts du web, un organisme de standardisation, le W3C, a été créé, et il propose à la communauté les spécifications (ou cahier des charges) en vue de standardiser le Web. Les trois grands acteurs, Microsoft, Netscape et Opera, ont montré leur volonté de respecter ces standards. Pour la production de contenu web à moindre coûtLors la création de nouveaux sites web, la séparation du contenu structuré de sa présentation est une aubaine pour les développeurs Web. En effet, il est possible de créer des feuilles de style qui s'appliqueront à un ou plusieurs documents, permettant ainsi de changer l'apparence d'un site en changeant simplement la feuille de style. Un tel exploit est quasiment impossible pour les sites mélangeant contenu et présentation, et qui nécessitent de modifier chaque page pour ce genre d'opération. L'utilisation des feuilles de style permet aussi à l'utilisateur de configurer son système en fonction de ses goûts et de ses besoins. Pour la pérennité des documentsEnfin, la pérennité des documents HTML est aujourd'hui en cause. On pourrait en rire, si certaines anecdotes ne démontraient que le sujet est sérieux. On n'en citera que deux. De nombreuses entreprises ont à une certaine époque standardisé leur bureautique sur l'outil "standard" du moment. Le format (pourtant propriétaire) choisi était celui de WordPerfect. Lors de la disparition de ce format, ces mêmes entreprises ont du effectuer une migration longue et coûteuse de ce format... Et n'oublions pas que les données acquises par la Nasa sur Mars dans le cadre de l'opération Viking en 1976 sont stockées sur des bandes magnétiques que personne à ce jour n'arrive à relire. Aussi, les chercheurs en sont réduits à fouiller les listings papier qu'un de leur prédécesseur n'avait pas jetés! Dans 10 ou 20 ans, qui peut dire qu'on trouvera encore un vieil Internet Explorer 4 qui saura interpréter les documents anciens à la syntaxe défaillante ? ConclusionQue ce soit à l'occasion d'une refonte d'un site, ou la création d'un nouveau service, l'utilisation des standards est indéniablement la solution qui permettra de conjuguer favorablement les contraintes économiques, ergonomiques, humaines et de pérennité. L'utilisation de XHTML et de CSS (et si besoin, ECMAScript associé au DOM W3) est l'occasion pour les développeurs Web d'aborder les standards en douceur, en capitalisant sur leurs connaissances du HTML, et en contribuant à élargir leur audience (tous les navigateurs modernes, sur toutes les plate formes), tout en consolidant les fondations du Web. Une telle perspective n'est-elle pas extrêmement réjouissante ? ;-) Une dizaine de recettes pour faire des sites standards et valides1. Accès pour tousUn site doit toujours être accessible, peu importe le navigateur utilisé. Un visiteur ne doit jamais être empêché d'accéder à du contenu parce qu'il n'a pas telle ou telle version d'un navigateur, ne dispose pas d'un plugin, de JavaScript, de Java, etc. Il faut envisager la problématique dans l'autre sens : si un visiteur dispose de certaines fonctionnalités sur son navigateur alors on peut lui proposer certains contenus. 2. Utiliser du XHTMLHTML 4.01 est du SGML et XHTML 1.0 est du XML. XHTML 1.0, est juste du HTML 4.01 « accomodé à la sauce » XML. Donc si vous savez écrire du HTML 4, vous savez écrire du XHTML 1.0. Parmi les points les plus importants de XML par rapport à SGML :
Vous trouverez ci-dessous quelques exemples de structures à utiliser :
<p>
du texte du texte.
</p>
<br />
<img src="img/hello.png" title="Image de bienvenue"
alt="Une jeune femme souriante à l'entrée du siège social d'une entreprise" />
<hr />
<ul>
<li>blabla ;</li>
<li>blublu ;</li>
<li>blibli.</li>
</ul>
Un document XHTML doit avoir une entête particulière qui sert à spécifier quelles sont les normes qui sont suivies par le document. Il y a le choix entre 3 types de documents : le type strict, le type transitional et le type frameset :
La norme XHTML 1.0 : <http://www.w3.org/TR/xhtml1/> 3. Séparer contenu et présentationIl faut essayer de séparer au maximun le contenu de la présentation. Pour cela il est préférable d'écrire, de générer, des documents suivants la DTD XHTML 1.0 Strict plutôt que la DTD XHTML 1.0 Transitional. Les informations de présentation doivent être au maximum spécifiées dans des feuilles CSS. Ne pas utiliser les éléments <i> ni <b> : utiliser à leur place respectivement <em> et <strong> (qui produisent en plus souvent le même rendu dans les navigateurs). La norme CSS2 : <http://www.w3.org/TR/REC-CSS2/> 4. Fournir des alternativesPréciser impérativement des attributs alt pour vos images. Lorsque cela a un sens vous pouvez aussi avantageusement préciser l'attribut title, dont le rendu correspond à une bulle d'aide (tooltip).
<img src="img/hello.png" title="Image de bienvenue"
alt="Une jeune femme souriante à l'entrée du siège social d'une entreprise" />
5. Valider et testerAprès l'écriture ou la génération de pages HTML il faut que les pages soient valides. Il ne suffit pas de vérifier le rendu des pages sur différents navigateurs, cette validation doit être faite auprès des validateurs de référence du W3C :
6. De la bonne utilisation du JavaScriptL'utilisation systèmatique de JavaScript pour un site web peut nuire grandement à l'accessibilté du contenu.
7. Détection des objets et non du navigateur en JavaScriptPour faire du JavasSript portable, il faut detecter les objets et non le navigateur/ Ainsi au lieu de :
if (navigator.userAgent.indexof('internet explorer')
blah
else if (navigator.userAgent.indexof('Netscape'))
bloh
else if (navigator.userAgent.indexof('gecko'))
blih
il faut :
if (document.getElementById)
// code reposant sur getElementById, mais
// si besoin d'une autre fonction comme du dom style
// _la detecter aussi_
else if (document.all)
// code reposant sur document.all
else if (document.layer)
// code reposant sur document.layers
8. Utiliser des éléments structurantsLes documents doivent être écrits avec des éléments structurants comme <h1>, <h2>, <h3>, <ul>, <li>, <hr>, etc. Pour des pages HTML, il est possible d'utiliser des mises en page et des habillages graphiques qui donnent l'apparence que certains textes et éléments sont des titres, des listes, des puces, des séparations de texte, etc. Mais dès que l'habillage graphique disparaît, c'est la structure du document qui disparaît également, alors que les éléments structurants comme <h1>, <h2>, <h3>, <ul>, <li>, <hr>, etc. restent. Utiliser des éléments structurants permet enfin de pouvoir efficacement transformer et manipuler des contenus XHTML par le biais de XSL. |
|
Sauf mention explicite contraire le contenu de ce site est Copyright AFUL sous licence Creative Commons Paternité - Partage des Conditions Initiales à l'Identique 
|
