MySQL et CSS- P14

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

62
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

MySQL et CSS- P14: Dans la première partie, lancez-vous dans la création de votre premier site web dynamique en PHP. Au travers d’exemples simples et concrets, apprenez à votre rythme à développer un site web complet, relié à une base de données MySQL

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: MySQL et CSS- P14

Construction du site m Figure 5.64 : Version 2 avec fenêtre réduite sous IE Sans doute pour rendre le site "parfait", faudrait-il passer plus de temps et complexiﬁer 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. Double Poche CSS • 651
6 Les r ègles ssion d’acce été à la propri
6 Les règles d’accession à la propriété 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 proﬁter 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 proﬁte aux handicapés, et plus généralement à tous, y compris au webmaster. Quiconque peut, un jour, se retrouver invalide temporairement ou déﬁni- tivement, au point de ne plus pouvoir utiliser Internet. b Figure 6.1 : Accessibilité Déﬁnition de l’accessibilité L’accessibilité a été déﬁnie 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, 654 • Double Poche CSS
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 ﬁchier 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
6 Les règles d’accession à la propriété 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. m Figure 6.3 : Ocawa 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 : 656 • Double Poche CSS
La langue Si la présentation de la page est modiﬁée, il suffit d’ajouter : 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. b Figure 6.4 : Langues Avec le HTML 4, la balise html est modiﬁée par l’ajout de la propriété lang avec comme valeur le code ISO. 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. Double Poche CSS • 657
6 Les règles d’accession à la propriété Enﬁn, le XHTML 1.1 exige la propriété xml:lang dans la balise html. 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éciﬁer 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. m Figure 6.5 : Titre 6.4 Les liens Cliquer sur un lien est une aventure, surtout pour l’internaute qui ne bénéﬁcie 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.6 : Title 658 • Double Poche CSS
Les éléments de formulaires 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 signiﬁcation. 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éﬁnissant les goûts personnels, enﬁn 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. État civil Nom : Prénom : Adresse : Questionnaire Ce site est : Ergonomique Beau Intéressant Complet Améliorations Pensez-vous que nous puissions l’améliorer ? Double Poche CSS • 659
6 Les règles d’accession à la propriété Oui Non Si vous pensez que nous pouvons améliorer ce site, faites nous part de vos suggestions : 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 660 • Double Poche CSS
Les tableaux 6.6 Les tableaux La plupart du temps, les tableaux ne sont pas utilisés pour ordonner des données, comme c’était le cas à l’origine. On détourne leur fonction pour structurer une page et disposer les différents éléments, ce qui pose problème. Un tableau est habituellement créé comme ceci : Titre du tableau 1re colonne 2e colonne 3e colonne A B C D E F La balise caption donne le titre du tableau juste au-dessus de celui-ci. La balise th donne le titre des colonnes. On peut ajouter la propriété summary, qui ne sera pas affichée mais qui sera perçue par les navigateurs audio. 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). Double Poche CSS • 661
6 Les règles d’accession à la propriété m Figure 6.8 : Tableau des ventes Vente par trimestre - année 2005 Mois plantes vivaces fleurs plantes grasses S/Total 4.091,00 ¤ 10.493,00 ¤ 5.194,80 ¤ Jan. 1.254,00 ¤ 3.054,00 ¤ 1.574,80 ¤ 662 • Double Poche CSS
Les tableaux Fév. 1.378,00 ¤ 3.452,00 ¤ 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 s’afficher progres- sivement. Elle doit être placée juste après la balise table. 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 la colonne en question. Elles demandent ici au navigateur d’aligner la colonne 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éﬁnit l’en-tête du tableau. Elle est suivie par la balise tfoot, qui circonscrit le pied du tableau. Enﬁn vient le groupe tbody, qui caractérise les cellules du corps du tableau. La feuille de style est simple. caption { border: thick; background-color: #00CC36; } #entete1, #entete2, #entete3, #entete4 { border: thick; background-color: #F6E730; } tfoot { font-weight: bold; } Double Poche CSS • 663
6 Les règles d’accession à la propriété 6.7 Les listes Les énumérations de liens ou d’autres items sous forme de listes doivent pouvoir être identiﬁé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, y compris dans un menu de navigation. Voici les liens vers les journaux français : Le Monde Libération Le Figaro L’Humanité La Croix b Figure 6.9 : Journaux français 1 Rien, à part la vision de la page, ne permet au navigateur de savoir qu’il s’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 des indices. Il s’agit d’insérer les propriétés alt et title avec respectivement comme valeurs * et une chaîne vide. 664 • Double Poche CSS
Les listes Le Monde Libération Le Figaro L’Humanité La Croix b Figure 6.10 : Journaux français 2 Cette solution n’est cependant pas optimale car elle ne fait pas intervenir les feuilles de style. Une technique plus appropriée consiste à introduire la propriété list−style dans un sélecteur ul. ul.journauxl { list-style: url(/images/puce_sympa.gif) disc; } La liste devient alors : Le Monde Libération Le Figaro L’Humanité La Croix Double Poche CSS • 665
6 Les règles d’accession à la propriété L’image sera affichée comme une puce par la plupart des navigateurs. Les autres afficheront des puces à la place de l’image. b Figure 6.11 : Journaux français 3 Certains ne se posent pas de questions et se contentent d’aligner des liens dans une boîte. Le Monde Libération Le Figaro L’Humanité La Croix Ils pourraient faire de même en désignant clairement cette énumération comme une liste. ul.journaux { list-style: none; } Quelle que soit la manière, le balisage de la liste n’a pas changé, comme dans l’exemple précédent : Le Monde Libération 666 • Double Poche CSS
Les images Le Figaro L’Humanité La Croix b Figure 6.12 : Journaux français 4 Quelquefois, il vaut mieux ne pas aller trop vite et réﬂéchir quelques secondes pour éviter des désagréments aux visiteurs du site. Quand l’habitude est prise, le développeur n’a même plus besoin d’y penser, cela devient un réﬂexe. 6.8 Les images La propriété alt est toujours présente et a une valeur, sauf pour les éléments sans signiﬁcation, qui ne sont là que pour ajuster la mise en page, comme les pixels transparents. Pour les éléments graphiques non signi- ﬁants, la balise alt doit être vide, sans texte ni espace. Ainsi, les navigateurs qui lisent le contenu des pages ne tiendront pas compte de ces éléments. La balise alt permet de naviguer sans afficher les images pour les navigateurs texte comme Lynx (jeu de mots construit sur le terme anglais "links") http://lynx.isc.org/lynx2.8.5. Un émulateur Lynx permet d’accéder à l’affichage de Lynx sans qu’il soit nécessaire de le télécharger (www.delorie.com/web/lynxview.html). Double Poche CSS • 667
6 Les règles d’accession à la propriété Les pixels transparents Une des astuces utilisées par les développeurs et les graphis- tes consiste à ajouter des images GIF transparentes pour caler les colonnes et les différents éléments de la page. 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. En contradiction avec le XHTML Une balise alt sans valeur utilisée pour les éléments graphi- ques décoratifs ou utilitaires est en contradiction avec l’impératif du XHTML de donner une valeur à toutes les propriétés. C’est un choix. Entre l’accessibilité et les règles strictes du XHML, il faut parfois choisir. Il reste cependant possible de lui donner comme valeur un astérisque. 6.9 Les abréviations Les balises acronym et abbr ont la propriété title, qui donne aux navigateurs la signiﬁcation complète des abréviations ou autres acronymes. Avec la SNCF, c’est possible, M Dupont! C’est particulièrement intéressant pour les navigateurs qui lisent les pages web pour les 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
La navigation m Figure 6.13 : Page avec un charset 8859-1 et des caractères UTF-8 Le problème du système ISO-8859-1 est qu’il lui manque trois caractères ¨ en français : Œ, œ et Y. Pour rectiﬁer le problème, la norme ISO a ajouté le codage ISO-8859-15. Il existe aussi l’UTF-8, qui serait l’idéal et qui est la norme XML mais en HTML. L’affichage correct n’est pas certain. 6.11 La navigation La navigation paraît aller de soi pour tout un chacun. Les liens sont affichés dans la page à un endroit visible, la plupart de temps en haut, à gauche ou encore à droite de la page. D’un point de vue visuel, Double Poche CSS • 669
6 Les règles d’accession à la propriété l’internaute ne peut pas les manquer. Mais pour un non-voyant dont le navigateur lit la page de manière linéaire (ce qui est logique visuellement), cela peut devenir un cauchemar quand il faut passer par des contenus ré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 à la structuration auront un impact direct sur la facilité de navigation et de lecture à travers les pages du site. b Figure 6.14 : Le menu La barre du menus en version texte peut être répétée en haut ou en bas. Le développeur peut imaginer une lecture séquentielle de son site comme une visite 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 un caractère sans signiﬁcation comme | (sur le clavier du PC, il se trouve au-dessous du 6). Quand une page est longue, l’insertion de liens internes facilite l’accès à des parties précises de la page. 670 • Double Poche CSS