Tài liệu MySQL et CSS- P14 docx

Sans doute pour rendre le site "parfait", faudrait-il passer plus de temps etcomplexifier le code, mais le but est avant tout de communiquer et de sefaciliter la tâche avec les CSS.. La

Sans doute pour rendre le site "parfait", faudrait-il passer plus de temps etcomplexifier le code, mais le but est avant tout de communiquer et de sefaciliter la tâche avec les CSS Il est clair que les CSS n’ont pas encoreatteint leur maturité mais elles restent néanmoins un progrès par rapportaux tables.

m Figure 5.64 : Version 2 avec fenêtre réduite sous IE

Construction du site

Les règles d’accession

à la propriété

Internet mûrit et s’intéresse à l’accessibilité, c’est-à-dire qu’il se cupe de savoir si tout le monde a accès au contenu des pages Internet, etl’informatique en général, s’est construit autour d’un utilisateur sanshandicap Mais qu’en est-il par exemple des personnes qui ont unemauvaise vue, voire des aveugles, des daltoniens, des personnes qui nepeuvent utiliser une souris ? Un certain nombre de règles permettent auxhandicapés, quel que soit leur niveau d’handicap, de naviguer sur le Web

préoc-et de profiter de toutes les ressources disponibles En fait, conformer unsite aux critères de l’accessibilité oblige à porter une attention particulière

à la communication, à la rigueur et à la cohérence, ce qui profite auxhandicapé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 quipossède un vieux PC avec un affichage médiocre Dans des pays comme

la France, ó la polarité est très forte, il est difficile de s’accorder sur desmesures qui se penchent sur la condition de vie d’un certain nombre deconcitoyens 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 lessites web de l’État et des collectivités territoriales répondent aux normesinternationales d’accessibilité Peu de sites respectent encore ces règles,

b Figure 6.1 :

Accessibilité

mais cette norme deviendra incontournable et s’inscrira de plus en plusdans 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 demarque du site et donc de la société qu’il représente La qualité des sitesaccessibles est grandement éprouvée car l’accessibilité oblige à se poserdes questions sur l’ergonomie, la communication, etc Ce type de site offre

un panel complet des moyens de communication, avec une diversité depasserelles

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 Lestechnologies se développent de jour en jour pour rendre la navigation sur

le Web plus agréable pour tous Ainsi le site Agoravox propose unefonctionnalité qui génère un fichier MP3 ó une voix lit les articles du site.Agoravox (www.agoravox.fr) utilise, pour ce faire, la technologieReadspeaker, qui oblige à davantage de rigueur car un texte mal écrit est

lu plus difficilement et une simple erreur de ponctuation nuit à lacompréhension d’une phrase Les rédacteurs auront tout intérêt à passerleurs textes à la moulinette de Readspeaker : ce faisant, ils les améliore-ront notablement

m Figure 6.2 : Agoravox

La rigueur, l’ergonomie, la structuration des contenus sont des élémentsclé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 detraitement 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, leclavier, la voir sur son téléphone ou sa télévision C’est cette diversité quirépond le mieux à l’évolution générale de la société Avant d’aller plusloin, validez vos pages sur www.ocawa.com

Le doctype donne la grammaire selon laquelle la page est construite Ilparle directement au navigateur Si les pages sont déjà construites sansdoctype, 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

Si la présentation de la page est modifiée, il suffit d’ajouter :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR">

Il est important, pour les navigateurs qui naviguent en lisant le contenudes pages pour les malvoyants ou les aveugles, de connaître la langueutilisée dans ces pages Cette indication se fait dans la balise html et a unesyntaxe particulière selon le doctype

Avec le HTML 4, la balise html est modifiée par l’ajout de la propriétélangavec comme valeur le code ISO

<html lang="fr">

Pour le XHTML 1.0, la balise html est enrichie de deux propriétés Lapropriété lang subsiste mais elle n’est présente que pour assurer lacompatibilité avec les anciens navigateurs

b Figure 6.4 :

Langues

La langue

Le titre est un élément primordial dans une page Il s’affiche sur la borduresupérieure du navigateur et annonce, comme une enseigne de magasin, cequi sera mis à la disposition de l’internaute, au niveau du site et de la pageelle-même Il s’agit d’inciter le visiteur à cliquer sur le lien du titre Il estrecommandé d’inclure le nom du site dans tous les titres des pages.

Cliquer sur un lien est une aventure, surtout pour l’internaute qui nebénéficie pas du haut débit Le lien se doit d’être court et n’a pasforcé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.5 Les éléments de formulaires

Pour l’accessibilité d’un formulaire, il est judicieux d’utiliser la balisefieldset, qui encadre les champs regroupés par signification Dans unquestionnaire, il est ainsi possible de regrouper dans un fieldset tous leschamps concernant l’état civil, puis dans un autre ceux définissant lesgỏts personnels, enfin dans un troisième ceux relatifs aux observationspersonnelles 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">

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>

Pensez-vous que nous puissions l’améliorer ?

Les éléments de formulaires

<input name="amelioration"

type="radio"

value="oui" id="affirmative" tabindex="35" >

<label for="affirmative"> Oui </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 valeursqui 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.6 Les tableaux

La plupart du temps, les tableaux ne sont pas utilisés pour ordonner desdonnées, comme c’était le cas à l’origine On détourne leur fonction pourstructurer une page et disposer les différents éléments, ce qui poseproblème

Un tableau est habituellement créé comme ceci :

<table border="0" summary="Les 6 premières lettres de l’alphabet Le

✂ tableau est constitué de 2 rangs et 3 colonnes.">

La norme d’accessibilité recommande d’utiliser les propriétés headers, et

la propriété abbr dès que le titre d’une colonne contient plus de

15 caractères (voir Figure 6.8)

Les tableaux

<table summary="Tableau des ventes des plantes au cours

du premier trimestre de l’année 2005" >

<caption>Vente par trimestre - année 2005</caption>

<colgroup align="char" char=",">

La balise colgroup envoie au navigateur des informations sur le nombre

et la proportion des colonnes et permet au tableau de s’afficher sivement Elle doit être placée juste après la balise table

progres-La propriété width donne un ordre de grandeur de la colonne par rapport

à la taille totale du tableau Grâce à ce type de positionnement, le tableau

se déploie harmonieusement sur la page

Les propriétés align="char" et char="," gèrent l’alignement dans lacolonne en question Elles demandent ici au navigateur d’aligner lacolonne sur le caractère virgule

Trois groupes sont ici déployés, matérialisés par les balises thead, tfoot

et tbody La balise thead regroupe toutes les balises th et définit l’en-tête

du tableau Elle est suivie par la balise tfoot, qui circonscrit le pied dutableau Enfin vient le groupe tbody, qui caractérise les cellules du corps

du tableau La feuille de style est simple

caption { border: thick;

}

Les tableaux

6.7 Les listes

Les énumérations de liens ou d’autres items sous forme de listes doiventpouvoir être identifiées comme telles Une énumération est un ensemble,

et non pas plusieurs éléments isolés les uns à côté des autres

Un exemple courant de liste est celle utilisée pour afficher des liens, ycompris dans un menu de navigation

Voici les liens vers les journaux français :

<img src="/images/puce_sympa.gif" width="8" height="8">

<a href="http://www.lemonde.fr/">Le Monde</a> <br>

<img src="/images/puce_sympa.gif" width="8" height="8">

<a href="http://www.liberation.fr/">Libération</a> <br>

<img src="/images/puce_sympa.gif" width="8" height="8">

<a href="http://www.lefigaro.fr/">Le Figaro</a> <br>

<img src="/images/puce_sympa.gif" width="8" height="8">

<a href=" http://www.humanite.presse.fr/">L’Humanité</a> <br>

<img src="/images/puce_sympa.gif" width="8" height="8">

<a href=" http://www.la-croix.com/">La Croix</a> <br>

Rien, à part la vision de la page, ne permet au navigateur de savoir qu’ils’agit d’une liste Cela a l’apparence d’une liste, mais sans en être une.Une solution pour que le navigateur s’y retrouve est de lui fournir desindices Il s’agit d’insérer les propriétés alt et title avec respectivementcomme valeurs * et une chaîne vide

b Figure 6.9 :

Journaux français 1

<img alt="*" title="" src="/images/puce_sympa.gif" width="8"

height="8" >

<a href="http://www.lemonde.fr/">Le Monde</a> <br>

<img alt="*" title="" src="/images/puce_sympa.gif" width="8"

height="8" >

<a href="http://www.liberation.fr/">Libération</a> <br>

<img alt="*" title="" src="/images/puce_sympa.gif" width="8"

height="8" >

<a href="http://www.lefigaro.fr/">Le Figaro</a> <br>

<img alt="*" title="" src="/images/puce_sympa.gif" width="8"

height="8" >

<a href=" http://www.humanite.presse.fr/">L’Humanité</a> <br>

<img alt="*" title="" src="/images/puce_sympa.gif" width="8"

height="8" >

<a href=" http://www.la-croix.com/">La Croix</a> <br>

Cette solution n’est cependant pas optimale car elle ne fait pas intervenirles feuilles de style Une technique plus appropriée consiste à introduire lapropriété list−style dans un sélecteur ul

ul.journauxl { list-style: url(/images/puce_sympa.gif) disc;

<li><a href="http://www.lefigaro.fr/">Le Figaro</a></li>

<li><a href=" http://www.humanite.presse.fr/">

L’Humanité </a> </li>

<li><a href=" http://www.la-croix.com/">La Croix</a></li>

</ul>

b Figure 6.10 :

Journaux français 2

Les listes

L’image sera affichée comme une puce par la plupart des navigateurs Lesautres afficheront des puces à la place de l’image.

Certains ne se posent pas de questions et se contentent d’aligner des liensdans une boîte

<div align="left">

<a href="http://www.lemonde.fr/">Le Monde</a><br />

<a href="http://www.liberation.fr/">Libération</a><br />

<a href="http://www.lefigaro.fr/">Le Figaro</a><br />

<a href=" http://www.humanite.presse.fr/">L’Humanité</a>

<li><a href="http://www.lefigaro.fr/">Le Figaro</a></li>

<li><a href=" http://www.humanite.presse.fr/">L’Humanité</a>

La propriété alt est toujours présente et a une valeur, sauf pour leséléments sans signification, qui ne sont là que pour ajuster la mise en page,comme les pixels transparents Pour les éléments graphiques non signi-fiants, la balise alt doit être vide, sans texte ni espace Ainsi, lesnavigateurs qui lisent le contenu des pages ne tiendront pas compte de ceséléments La balise alt permet de naviguer sans afficher les images pourles navigateurs texte comme Lynx (jeu de mots construit sur le termeanglais "links") http://lynx.isc.org/lynx2.8.5 Un émulateur Lynxpermet d’accéder à l’affichage de Lynx sans qu’il soit nécessaire de letélécharger (www.delorie.com/web/lynxview.html)

b Figure 6.12 :

Journaux français 4

Les images

Les pixels transparents

Une des astuces utilisées par les développeurs et les tes consiste à ajouter des images GIF transparentes pour caler les colonnes et les différents éléments de la page.

graphis-Le nombre de caractères dans la propriété alt ne peut dépasser 60,excepté quand l’image sert de lien, la limite étant alors de 80 caractères

Avec la <acronym title="Société Nationale des Chemins de fer

✂ Français">SNCF</acronym>, c’est possible, <abbr title=

✂ "Monsieur">M</abbr> Dupont!

C’est particulièrement intéressant pour les navigateurs qui lisent les pagesweb pour les non-voyants

6.10 Le charset ou tableau de caractères

La balise meta a obligatoirement comme propriété charset Le charsetsert à indiquer au navigateur le codage des caractères Le codage pardéfaut sur Internet est ISO-8859-1

<meta http-equiv="Content-type" content="text/html;

✂ charset=iso-8859-1" />

Le problème du système ISO-8859-1 est qu’il lui manque trois caractères

en français : Œ, œ et Y¨ Pour rectifier le problème, la norme ISO a ajouté

m Figure 6.13 : Page avec un charset 8859-1 et des caractères UTF-8

La navigation

l’internaute ne peut pas les manquer Mais pour un non-voyant dont lenavigateur lit la page de manière linéaire (ce qui est logique visuellement),cela peut devenir un cauchemar quand il faut passer par des contenusrépétitifs et fastidieux Certains aménagements simples sont nécessaires.

Une navigation homogène

L’accessibilité d’un site se mesure aussi par l’homogénéité et la cohérence

de construction et de structuration des pages Les efforts liés à lastructuration auront un impact direct sur la facilité de navigation et delecture à travers les pages du site

La barre du menus en version texte peut être répétée en haut ou en bas Ledéveloppeur peut imaginer une lecture séquentielle de son site comme unevisite guidée avec des liens vers la page principale puis celle qui suit dans

un ordre donné pour donner le plus de sens possible à cette navigation.Ainsi la page principale peut ensuite conduire à la page de nouvelles, puis

à la page du dernier article, etc Les liens peuvent être séparés par uncaractère sans signification comme | (sur le clavier du PC, il se trouveau-dessous du 6)

Quand une page est longue, l’insertion de liens internes facilite l’accès àdes parties précises de la page

b Figure 6.14 :

Le menu

Si une page est trop lourde, il vaut mieux la diviser en plusieurs pages parégard pour tous ceux qui se connectent encore par modem Le poids de lapage est composé du poids du code source et de tous les fichierspériphériques afférents, comme les images, les fichiers JavaScript, lesfichiers son, les feuilles de style, etc Il est conseillé d’éviter les pages quifont plus de 70 Ko et d’indiquer le poids de l’image que l’utilisateurs’apprête à afficher en cliquant sur la miniature correspondante.

Les touches d’accès

Les touches d’accès pour accéder aux liens sont très pratiques Tous lesgraphistes ou maquettistes professionnels le savent : utiliser les touches deraccourci va beaucoup plus vite que d’utiliser la souris Les accesskeyfournissent ces touches de raccourci dans un site pour naviguer d’une page

à l’autre La plupart des navigateurs y obéissent Les utilisateurs quin’utilisent pas un navigateur audio ne s’en aperçoivent pas Une solutionest de faire commencer l’intitulé de chaque lien avec une lettre différente

et de s’en servir comme touche (toujours combinée avec[Alt] ou [Alt]+[Maj]

ou[Ctrl] selon le navigateur)

<a href="accueil.htm" accesskey="a"><em>A</em>ccueil</a>

<a href="catalogue.htm" accesskey="c"><em>C</em>atalogue</a>

<a href="magasin.htm" accesskey="m"><em>M</em>agasin</a>

<a href="nous_contacter.htm" accesskey="n">

<em>N</em>ous contacter</a>

<a href="forum.htm" accesskey="f">Notre <em>F</em>orum</a>

Il est aussi possible de mettre des chiffres (ceux en haut du clavier, nonceux du clavier numérique) comme touches d’accès

<a href="accueil.htm" accesskey="1">Accueil</a>

<a href="catalogue.htm" accesskey="2">Catalogue</a>

<a href="magasin.htm" accesskey="3">Magasin</a>

<a href="nous_contacter.htm" accesskey="4">Nous contacter</a>

<a href="forum.htm" accesskey="5">Forum</a>

Une astuce intéressante est d’afficher automatiquement les accesskeyaprès le lien pour en faciliter l’usage Ici les touches d’accès sont inscritesentre crochets après le lien Cela ne fonctionne pas pour Internet Explorer

La navigation

a:after { content: " [" attr(accesskey) "] ";

}

Le site http://openweb.eu.org/articles/accesskey_essai_non_transformeexplique les procédures dans un article mettant en avant queles accesskey sont une méthode non aboutie

Pour le site Écoute S’il Pleut, nous l’avons utilisée

div.liens { background-color: #FFFFE1;

color: navy;

} div.liens a:hover{

text-decoration: none;

background-color: navy;

color: yellow;

} liens a:after { content: "[" attr(accesskey) "]";

<a href="gites.php" accesskey="B" title="Les Gîtes"></a>

<a href="#" accesskey="C" title="Venir"></a>

<a href="#" accesskey="D" title="Visites"></a>

<a href="#" accesskey="E" title="Notre Projet"></a>

<a href="#" accesskey="F" title="Liens amis"></a>

<a href="#" accesskey="G" title="Contact"></a>

<a href="#" accesskey="H" title="Les pépinières"></a>

<a href="#" accesskey="I" title="Le Conseil"></a>

<a href="#" accesskey="J" title="Nos Partenaires"></a>

</div>

Le lien vers la page courante est désactivé (ici c’est la page Accueil)

tandis que les balises de lien n’ont pas de contenu Ainsi, sur lesnavigateurs non conformes comme Internet Explorer, seul le titre de lapage apparaît, tandis que sur les autres, ce titre est accompagné destouches d’accès entre crochets et soulignées Ces touches d’accès sontexplicites et donnent plus de facilité à ceux qui veulent les utiliser

Qu’est-ce qui est le plus important après tout le contenu d’en-tête ? Levisiteur vient chercher le contenu sur une page, le lit, puis cherche desliens pour passer à une autre page C’est pourquoi, il est préférable deplacer le conteneur div, qui contient le texte de la page, avant l’autreconteneur div, qui renferme le contenu de la palette de navigation.

En attendant que tous les navigateurs soient conformes aux dations, le développeur peut insérer un lien invisible qui amène le visiteurdirectement au contenu, en court-circuitant les liens de navigation

recomman-<link rel="contenu" title="contenu de la page" href="#contenu" />

La page de Xavier Robin est un exemple de bonnes pratiques pour la paged’aide (http://home.etu.unige.ch/~robin0/accessibilite.html)

Les aides invisibles de navigation

La balise link permet d’insérer dans la page des liens invisibles denavigation qui sont, cependant, perçus par les navigateurs audio etpermettent au besoin de court-circuiter la page Le développeur peut faireune sorte de circuit de son site pour les personnes handicapées

<link rel="home" title="Accueil" href="http://url/de/la/page/accueil" />

<link rel="prev" title="Titre de la page précédente"

m Figure 6.17 : Page d’aide du blog de Xavier Robin

Les aides