Sans doute pour rendre le site "parfait", faudrait-il passer plus de temps et complexifier le code, mais le but est avant tout de communiquer et de se faciliter la tâche avec les CSS. Il est clair que les CSS n’ont pas encore atteint leur maturité mais elles restent néanmoins un progrès par rapport aux tables. m Figure 5.64 : Version 2 avec fenêtre réduite sous IE Construction du site Double Poche CSS • 651 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 6 Les règles d’accession à la propriété Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Internet mûrit et s’intéresse à l’accessibilité, c’est-à-dire qu’il se préoc- cupe de savoir si tout le monde a accès au contenu des pages. Internet, et l’informatique en général, s’est construit autour d’un utilisateur sans handicap. Mais qu’en est-il par exemple des personnes qui ont une mauvaise vue, voire des aveugles, des daltoniens, des personnes qui ne peuvent utiliser une souris ? Un certain nombre de règles permettent aux handicapés, quel que soit leur niveau d’handicap, de naviguer sur le Web et de profiter de toutes les ressources disponibles. En fait, conformer un site aux critères de l’accessibilité oblige à porter une attention particulière à la communication, à la rigueur et à la cohérence, ce qui profite aux handicapés, et plus généralement à tous, y compris au webmaster. Quiconque peut, un jour, se retrouver invalide temporairement ou défini- tivement, au point de ne plus pouvoir utiliser Internet. Définition de l’accessibilité L’accessibilité a été définie comme le fait de mettre le Web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique ou leurs aptitu- des physiques et mentales. L’accessibilité est une philosophie de vie. C’est la vraie démocratie, quand la majorité porte son attention sur les problèmes de la minorité. L’accessibilité commence quand un développeur, lui-même utilisateur de PC, s’inquiète du visiteur qui possède un Macintosh ou de celui qui possède un vieux PC avec un affichage médiocre. Dans des pays comme la France, où la polarité est très forte, il est difficile de s’accorder sur des mesures qui se penchent sur la condition de vie d’un certain nombre de concitoyens. Et pourtant une loi a été votée dans ce sens. La France a voté une loi en février 2005 dont un article impose que les sites web de l’État et des collectivités territoriales répondent aux normes internationales d’accessibilité. Peu de sites respectent encore ces règles, b Figure 6.1 : Accessibilité 6 Les règles d’accession à la propriété 654 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. mais cette norme deviendra incontournable et s’inscrira de plus en plus dans le cahier des charges de création de sites. Si ce label aide à l’accession de tous au Web, il rehausse, en même temps, l’image de marque du site et donc de la société qu’il représente. La qualité des sites accessibles est grandement éprouvée car l’accessibilité oblige à se poser des questions sur l’ergonomie, la communication, etc. Ce type de site offre un panel complet des moyens de communication, avec une diversité de passerelles. Dans la vie réelle, l’humain a accès à de nombreux stimuli (visuels, auditifs, olfactifs…), qui lui permettent de communiquer avec le monde. L’accessibilité restituer cette polyphonie de la vie sur le Web. Les technologies se développent de jour en jour pour rendre la navigation sur le Web plus agréable pour tous. Ainsi le site Agoravox propose une fonctionnalité qui génère un fichier MP3 où une voix lit les articles du site. Agoravox (www.agoravox.fr) utilise, pour ce faire, la technologie Readspeaker, qui oblige à davantage de rigueur car un texte mal écrit est lu plus difficilement et une simple erreur de ponctuation nuit à la compréhension d’une phrase. Les rédacteurs auront tout intérêt à passer leurs textes à la moulinette de Readspeaker : ce faisant, ils les améliore- ront notablement. m Figure 6.2 : Agoravox Double Poche CSS • 655 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. La rigueur, l’ergonomie, la structuration des contenus sont des éléments clés pour que ces contenus s’adaptent facilement à n’importe quel média et se transportent avec souplesse d’un site à l’autre avec un minimum de traitement. Désormais, l’internaute pourra choisir son mode de connais- sance d’une page web : il préférera l’entendre, ou naviguer par la voix, le clavier, la voir sur son téléphone ou sa télévision. C’est cette diversité qui répond le mieux à l’évolution générale de la société. Avant d’aller plus loin, validez vos pages sur www.ocawa.com. 6.1 Le doctype Le doctype donne la grammaire selon laquelle la page est construite. Il parle directement au navigateur. Si les pages sont déjà construites sans doctype, il suffit d’ajouter une déclaration de type : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR" ✂ "http://www.w3.org/TR/html4/loose.dtd"> m Figure 6.3 : Ocawa 6 Les règles d’accession à la propriété 656 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Si la présentation de la page est modifiée, il suffit d’ajouter : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR"> 6.2 La langue Il est important, pour les navigateurs qui naviguent en lisant le contenu des pages pour les malvoyants ou les aveugles, de connaître la langue utilisée dans ces pages. Cette indication se fait dans la balise html et a une syntaxe particulière selon le doctype. Avec le HTML 4, la balise html est modifiée par l’ajout de la propriété lang avec comme valeur le code ISO. <html lang="fr"> Pour le XHTML 1.0, la balise html est enrichie de deux propriétés. La propriété lang subsiste mais elle n’est présente que pour assurer la compatibilité avec les anciens navigateurs. b Figure 6.4 : Langues La langue Double Poche CSS • 657 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> Enfin, le XHTML 1.1 exige la propriété xml:lang dans la balise html. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> Si une page est rédigée en plusieurs langues, la propriété xml:lang peut enrichir une balise p par exemple, ou d’autres balises, pour spécifier les langues en question. 6.3 Les titres Le titre est un élément primordial dans une page. Il s’affiche sur la bordure supérieure du navigateur et annonce, comme une enseigne de magasin, ce qui sera mis à la disposition de l’internaute, au niveau du site et de la page elle-même. Il s’agit d’inciter le visiteur à cliquer sur le lien du titre. Il est recommandé d’inclure le nom du site dans tous les titres des pages. 6.4 Les liens Cliquer sur un lien est une aventure, surtout pour l’internaute qui ne bénéficie pas du haut débit. Le lien se doit d’être court et n’a pas forcément à expliciter sa destination. C’est là qu’intervient la propriété title, qui affiche une étiquette explicative dans le navigateur. L’intitulé dans un lien ou dans un title ne doivent pas dépasser 80 caractères. m Figure 6.5 : Titre m Figure 6.6 : Title 6 Les règles d’accession à la propriété 658 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 6.5 Les éléments de formulaires Pour l’accessibilité d’un formulaire, il est judicieux d’utiliser la balise fieldset, qui encadre les champs regroupés par signification. Dans un questionnaire, il est ainsi possible de regrouper dans un fieldset tous les champs concernant l’état civil, puis dans un autre ceux définissant les goûts personnels, enfin dans un troisième ceux relatifs aux observations personnelles. Un fieldset ne touche pas à la présentation directement, mais le navigateur trace un encadrement avec des coins arrondis. <form action="…" method="post"> <p> <fieldset> <legend>État civil</legend> <label for="nom">Nom :</label> <input id="nom" type="text" tabindex="1"> <label for="prenom">Prénom :</label> <input id="prenom" type="text" tabindex="2"> <label for="adresse">Adresse :</label> <input id="adresse" type="text" tabindex="3"> </fieldset> </p> <fieldset> <legend>Questionnaire</legend> Ce site est :<br /> <input name="avis" type="checkbox" value="ergonomique" id="ergonomique" tabindex="20"> <label for="ergonomique"> Ergonomique </label> <input name="avis" type="checkbox" value="beau" id="beau" tabindex="21"> <label for="beau"> Beau </label> <input name="avis" type="checkbox" value="interessant" id="interessant" tabindex="22"> <label for="interessant"> Intéressant </label> <input name="avis" type="checkbox" value="complet" id="complet" tabindex="23"> <label for="complet"> Complet </label> </fieldset> </p> <p> <fieldset> <legend>Améliorations</legend> Pensez-vous que nous puissions l’améliorer ? Les éléments de formulaires Double Poche CSS • 659 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <input name="amelioration" type="radio" value="oui" id="affirmative" tabindex="35"> <label for="affirmative"> Oui </label> <input name="amelioration" type="radio" id="negative" value="non" tabindex="35"><label for="negative"> Non </label></p> <p><label for="suggestions">Si vous pensez que nous pouvons améliorer ce site, faites nous part de vos suggestions :</label> <textarea name="suggestions" id="suggestions" rows="20" cols="50" tabindex="40"> </textarea> </fieldset> </p> </form> La propriété tabindex permet de naviguer d’un champ à l’autre. L’ordre va du plus petit au plus grand sans qu’il soit nécessaire d’avoir des valeurs qui se suivent. Un champ avec une valeur négative sera ignoré. Dans l’exemple, la balise label est utilisée pour accompagner les champs du formulaire. Cette balise est reliée par sa propriété for à la propriété id du champ de formulaire. m Figure 6.7 : Fieldset 6 Les règles d’accession à la propriété 660 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Mois plantes vivaces fleurs plantes grasses S/Total 4.091,00 Ô 10.493,00 Ô 5.194,80 Ô Jan.... headers="entete2">1.254,00 Ô 3.054,00 Ô 1.574,80 Ô 662 Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Les tableaux Fộv. 1.378,00 Ô 3.452,00 Ô 1.758,80 Ô Mars... non-voyants 6.10 Le charset ou tableau de caractốres La balise meta a obligatoirement comme propriộtộ charset Le charset sert indiquer au navigateur le codage des caractốres Le codage par dộfaut sur Internet est ISO-8859-1 668 Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark La navigation ... charset 8859-1 et des caractốres UTF-8 Le problốme du systốme ISO-8859-1 est quil lui manque trois caractốres ă en franỗais : , et Y Pour rectier le problốme, la norme ISO a ajoutộ le codage ISO-8859-15 Il existe aussi lUTF-8, qui serait lidộal et qui est la norme XML mais en HTML Laffichage correct nest pas certain 1.758,80 Ô Mars 1.459,00 Ô 3.987,00 Ô 1.862,00 Ô La balise colgroup envoie au navigateur des informations sur le nombre et la proportion des colonnes et permet au tableau de safficher progressivement Elle doit ờtre placộe juste aprốs la balise... Au fur et mesure des versions, il devient de plus en plus complet et peut par exemple vộrier si la page rộpond aux impộratifs de laccessibilitộ ou nettoyer un chier web gộnộrộ par Word 2000 Le nettoyage des balises comprend lajout de la barre oblique dans la balise fermante ou la correction de la balise fermante si elle est mal intitulộe Les chevauchements de balises sont rectiộs Des guillemets sont... Figure 7.4) Le site est hộbergộ chez OVH et dộveloppộ en PHP3 puis avec la version 4 et avec une base de donnộes MySQL 3.5, qui na pas changộ depuis les dộbuts et qui fonctionne trốs bien Les modications ont portộ sur la maintenance car le serveur subit une charge de plus en plus forte au fur et mesure de laffluence des internautes, suite des passages la tộlộvision et des articles dans des magazines ... Ainsi, sur les navigateurs non conformes comme Internet Explorer, seul le titre de la page apparaợt, tandis que sur les autres, ce titre est accompagnộ des touches daccốs entre crochets et soulignộes Ces touches daccốs sont explicites et donnent plus de facilitộ ceux qui veulent les utiliser b Figure 6.16 : Le menu avec les touches daccốs sous Internet Explorer 6.12 Lordre de lecture Laffichage des ộlộments... sinscrire et de rộpertorier son parcours scolaire, grõce un formulaire et une liste dộcoles, de collốges, de lycộes, duniversitộs et autres grandes ộcoles, mise jour rộguliốrement Le site na pas changộ depuis ce temps, notamment au niveau de linterface et des fonctionnalitộs prộsentộes linternaute Christophe Bovio a simplement ajoutộ le concept des "bouteilles la mer" Il sagit dun systốme qui permet ... au projet Ensuite, il sagira de communiquer dans la transparence au fur et mesure de lavancement du projet Il faut un vrai renouveau et non pas un simple changement de look Si les ộchos des visiteurs du site rộvốlent que le site saffiche mal avec certains navigateurs, il faudra rafraợchir linterface pour quelle soit compatible Cest parfois lopportunitộ pour faire une vraie refonte du site et utiliser . value="complet" id="complet" tabindex="23"> <label for="complet"> Complet </label> </fieldset> </p>. Internet mûrit et s’intéresse à l’accessibilité, c’est-à-dire qu’il se préoc- cupe de savoir si tout le monde a accès au contenu des pages. Internet, et l’informatique