Conseils fondamentaux | Étape de l'élaboration d'un site | Organigramme d'un site
Navigation | Principales structures de navigation | Typologie des objets de navigation | Amélioration de la structure des sites
Vue d'ensemble du langage HTML | CSS
Apprendre et respecter la syntaxe HTML, CSS... tel que l'a défini le
consortium W3 qui s'occupe
de la standardisation de ces langages de description. En respectant
complètement ce standard vous êtes sûr que vos pages seront lisibles sur la
majorité des navigateurs présents et futurs.
Ne pas oublier de valider ses pages avec un
analyseur syntaxique et ce, pour une version précise du standard. (http://validator.w3.org/
et
http://www.htmlhelp.org/tools/validator/)
Séparer le contenu (texte, image...) de la présentation grâce aux feuilles de styles (CSS). Cela facilite grandement l'adaptation à de multiples dispositifs de sortie, écran cathodique, ordinateur de poche, imprimantes... Et aussi, cela vous permet de modifier l'entière présentation de votre site en ne corrigeant qu'un seul fichier, votre feuille de style.
Rendez votre document accessible pour les logiciels ou matériels limités comme les navigateurs en mode texte, les petits écrans d'appareil portables, les accès réseau à débit lent, etc. N'oubliez pas non plus les personnes handicapées en ajoutant un commentaire pour chaque image, en mettant des touches de raccourci, etc.
Si vous appliquez ces conseils vos pages seront lisibles sur n'importe quelle plateforme, logicielle et matérielle, par n'importe qui comprenant votre langue, et facilement modifiables par vous.
Premièrement, analyser les objectifs du site, décomposer le site en sections et choisir des thèmes graphiques pour illustrer le site. Déterminer les logiciels et technologies nécessaires pour la mise en page et la mise à jour du contenu à partir du format des données initiales.
Deuxièmement, créer une présentation qui rende attrayant et lisible le contenu, une navigation qui rende accessible un contenu homogénéisé et ce, pour tous les profils de visiteurs ciblés.
Troisièmement, les liens externes doivent être complémentaires de vos pages (et non substituables), contextuels et classés, les mises à jour en rapport avec les attentes des visiteurs et clairement annoncées.
Quatrièmement, contacter les sociétés externes pour l'hébergement, le référencement, la publicité, les statistiques...
La présentation, d'une part, la structure et la navigation, d'autre part, sont deux facettes imbriquées essentielles à la conception d'un site hypertexte.
La présentation concerne la mise en forme visuelle voire auditive du contenu textuel, audio ou visuel. Elle doit être standardisée pour faciliter la lecture, faire porter l'attention sur l'essentiel du contenu et être plaisante à parcourir. La présentation recoupe le rôle de la navigation mais au niveau spatial d'un écran seulement et est généralement passive. Elle se réalise principalement à l'aide d'une feuille de style utilisée par tout le site.
La structure concerne le balisage du contenu de chaque fichier hypertexte ainsi que l'arborescence des répertoires qui contiennent les fichiers sur le serveur. Elle organise l'information selon des schémas qui simplifient son utilisation future tout en restreignant les possibilités d'utilisation. La structure détermine la navigation, l'inverse n'étant pas vrai. Elle se réalise principalement en répartissant les fichiers dans des répertoires et sous-répertoires ainsi qu'à l'aide du langage HTML.
La navigation concerne les moyens mis à disposition du visiteur pour se déplacer dans les pages et la structure du site hypertexte. Elle doit rendre accessible le contenu à partir de n'importe quel endroit du site et aider le visiteur à s'orienter. La navigation recoupe le rôle de la présentation quand il s'agit d'indiquer visuellement une direction ou lorsque que des repères d'orientation balisent le contenu. Elle se réalise principalement à l'aide des liens hypertextes, des objets de type formulaire et du langage de script JavaScript qui permet d'animer et de rendre interactif le contenu.
Quoi : un site Internet (comparable à un journal multimédia
hypertexte)
Qui : rédacteur, webmestre, maquettiste, graphiste...
Pour qui : visiteurs à titre privé ou professionnel
____________VISITEURS_________
| / \ |
| Présentation______Structure |
| | Navigation |
(1) Contenu (2)
| | |
Référencement | Mise à jour
Publicité | Retour courrier
\ | /
CONCEPTEURS
|
COMMANDITAIRES/PROPRIÉTAIRES
Autre acteurs : Fournisseurs d'accès à internet,
Hébergeurs de site, Moteur et annuaires de recherche (1),
Sociétés de publicité (1), Sociétés de statistiques (2).
Où et Quand : l'espace et le temps ont moins d'importance sur
Internet
Comment : catalogue/référence (souvent commercial), information
éphémère (actualité) ou durable (comme ce site)
Pourquoi : information commerciale (implique la recherche de
contact) ; information non commerciale avec recherche de contact ou non
|
Page de garde
Sommaire, table des matières Pages liminaires, de titre Pages centrales Index Page de garde |
Caractère
Ligne Paragraphe Bloc de texte ou cadre Page Ouvrage Support |
Le caractère (lettre ou symbole d'imprimerie) à les propriétés suivantes :
Haut/en-tête de page: rubrique principale (gauche), sous-rubrique
(milieu) ou icones
Titre/chapeau : sur-titre (accroche article) et/ou titre article,
sous-titre
Corps de l'article en colonne (facilite la lecture) comportant :
Bas/pied de page : numéro de page (indispensable), nom du journal, date ...
Huit à dix mots par ligne, 625 pixels de largeur maximum (résolution
Mac), 400 pixels de hauteur.
Une taille du texte en pixels sera identique
sur PC et Mac à taille d'écran et résolution identiques. Ce qui n'est jamais
le cas. De même les mesures en cm et analogues n'ont d'intérêt que pour
l'impression. Il est donc préférable d'utiliser les valeurs par défaut des
navigateurs : small, medium, large... puis de faire hériter les objets
enfants de cette taille la modifiant si nécessaire avec des
pourcentages. Dans le futur une autre solution consistera à utiliser les
valeurs en points, pt, et à utiliser le paramètre font-size-adjust pour
avoir une hauteur du 'x' qui soit la même quelle que soit la police.
Le gamma Web est de 2.2 (un compromis
Mac/PC), l'image doit être un peut sombre sur PC et inversement sur Mac.
Utilisez des polices dessinées pour l'écran
(Verdana est sans conteste la meilleure des polices standard), à des tailles
et des styles non extrapolés. Utilisez la propriété line-height (CSS),
leading ou espacement vertical des lignes avec la valeur de 140% de
la hauteur du texte pour une meilleure lisibilité et un espacement des
lettres suffisant.
Équivalents des polices Mac / PC :
Helvetica / Arial
Times / Times New Roman
Courier / Courier New
Symbol / Symbol
*Geneva / MS Sans Serif
*New York / MS Serif
*Verdana / *Verdana
Chicago / Aucun équivalent
Zapf Dingbats / WingDings
Palatino / Book Antiqua
(*police crée pour l'écran)
La palette web standard 6x6x6 de couleurs des images n'est importante que lors de l'affichage à 256 couleurs ou moins puisqu'alors il y a conflit entre les palettes des différentes images d'une page et que le navigateur doit faire un compromis.
Le visiteur doit pouvoir appréhender tout le contenu d'une page sans la faire défiler.
A la fin d'un texte toujours proposer un lien vers la suite ou le menu, jamais de "voie sans issue". On doit toujours savoir où l'on est et où l'on peut aller.
Au début et à la fin d'une page toujours mettre une barre de navigation. Situez toujours les élément de navigation aux mêmes endroits
L'expression qui sert de lien hypertexte doit décrire le document
auquel il renvoie, notamment ce ne devra jamais être "cliquez ici". Dans les
pages d'aides n'écrivez pas "cliquez ce lien" mais activez ce lien".
Quand les liens renvoient à des notes de bas de
page, on doit toujours mettre un lien aussi sur la cible pour renvoyer dans
le texte initial.
Un lien est par convention souligné, donc
n'utilisez jamais le soulignement pour d'autres mots ou ce sera générateur
de confusion.
Pas plus de six liens à la fois.
Concernant le type de liens, il est très intéressant de rajouter des
symboles devant le nom du lien pour signifier s'il mène à l'extérieur
du site ou s'il renvoie sur la page affichée actuellement.
A noter que les liens renvoyant vers une autre page du site
sont les plus nombreux et sont les plus courants, il n'est donc pas
conseillé de leur rajouter un symbole. Dans le cas particulier des pages
regroupant des liens externes, il est préférable de ne mettre aucun symbole,
le visiteur sachant déjà que les liens sont externes au site.
On rajoutera des liens contextuels à la fin d'une section. Ceux-ci permettront d'orienter le visiteur vers des rubriques connexes qui sont susceptibles de l'intéresser.
Tout en bas de chaque page, en petits caractères, on mettra le nom de l'auteur avec un lien vers son courriel ainsi que la date de dernière modification du fichier. Sur la page principale on ne mettra pas la date de dernière modification mais la date de début et de fin du site ainsi que l'adresse absolue de la page et la date de dernière vérification des liens internes et externes du site.
La première structure est celle minimaliste qui sous la forme d'une ligne au début et à la fin de la page donne la liste des liens vers les principales rubriques.
La deuxième structure est généralement composée d'un bandeau vertical gauche qui liste les liens vers les principales rubriques du site.
Parfois s'y ajoute un second bandeau, horizontal haut, qui donne soit les rubriques de niveau hiérarchique supérieur, soit ce que l'on appel les service ou rubriques annexes (tout ce qui n'est pas la spécialité du site : courrier, aide, abonnement...).
A noter que la place de ces deux bandeaux peut être intervertie.
La troisième structure ne s'applique qu'à la page d'accueil, il s'agit d'une image (balises HTML Map et Area) proposant les diverses rubriques de premier niveau regroupés par thème dans des zones activables de l'image.
Remarque : il est évident que l'un des concept clé est le lien hypertexte et qu'il faut le sous-entendre dans ces concepts de navigation.
(comme on lit de gauche à droite et de haut en bas, on positionne les objets de navigation en haut et/ou à gauche)
rem : les deux premières solutions sont fortement conseillées par rapport aux cadres ou pop-up
Le page de sommaire devrait toujours répondre aux questions quoi, pourquoi, qui et pour qui ? Ainsi on expliquera en 20-30 mots les objectifs, les compétences des auteurs du contenu de ce site et enfin à quel type de visiteurs est destiné ce site.
La question pourquoi aura une page dédiée qui expliquera les raisons de l'existence de ce site. De même la question comment aura une page dédiée, souvent nommée "aide" ou "comment utiliser ce site".
Plutôt que de proposer une liste des liens vers les principales rubriques, il est plus judicieux de proposer des liens groupés par type de visiteurs. Par exemple un groupe "première visite" et un groupe "seconde visite". Ou encore "Parcours rapide" et "Parcours détaillé".
De plus, la page de sommaire aurait intérêt à proposer 3 zones
centrales (ex. un tableau à 3 colonnes et 2 lignes (titre et éléments))
: actualité, navigation et annexes.
Actualité regroupe des liens vers les
derniers documents ajoutés, la liste des documents les plus lus, les
modifications structurelles du site, des dépêches d'actualité, un
éditorial...
Navigation regroupe les rubriques
principales concernant l'objet du site (s'il y a beaucoup de rubriques on
peut mettre un menu mais les 2 ou 3 rubriques principales doivent apparaitre
sous forme de liens pour les navigateur ne gérant pas les menus), le plan du
site, un moteur de recherche, des visites thématiques...
Annexes regroupe tout ce qui n'est pas la
spécialité du site : courrier, abonnement, les pages d'aides...
Je ne conseille pas l'option qui consiste à lister toutes les rubriques principales et laisser le visiteur se débrouiller tout seul et ce, sur chaque page. En plus de se perdre, il y a le risque de visiter les sections du site dans le mauvais ordre. Par exemple si un nouveau visiteur ne visite pas la page d'aide en premier, il risque de ne pas utiliser efficacement les moyens de navigation, tel que le concepteur les a défini.
En ce qui concerne les pages appartenant à des sous rubriques, je conseillerais plutôt de ne lister que les rubriques concernant le niveau en cours, plus celles du niveau supérieur.
Certains visiteurs, notamment ceux qui connaissent déjà bien le site,
voudront avoir en permanence la liste de toutes les rubriques principales. A
ceux là vous pourrez proposer un cadre de navigation (javascript permettra
d'automatiser l'affichage du cadre en testant si la largeur de l'écran est
suffisante) ou une fenêtre externe.
De même, il est toujours nécessaire de proposer une
page regroupant tous les liens de premier et de second niveau (voire plus)
vers les pages du site sous forme de plan ou de tableau. Si la page
devient trop grande il faudra alors rajouter un moteur de
recherche.
Le langage de publication de la toile mondiale, world wide web ou W3, est le HTML, langage de description hypertextuel. Son objectif est d'être un standard universel et indépendant, que ce soit du point de vue des systèmes d'exploitations, des applications, des périphériques de sortie, de la représentation des informations ou de la langue.
HTML 4 est une application du métalangage de description SGML se conformant au standard international ISO 8879.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Titre de la page</title> ... </head> <body> <h1>Titre de niveau 1</h1> <p> Paragraphe</p> <ul> <li>Élément de liste</li> <ul> <table> <tbody> <tr> <td>Cellule de tableau</td> </tr> </tbody> </table> ... <hr> <address> <a href="mailto:nom@messagerie.fr">nom@messagerie.fr</a></address> </body> </html>
Si vous utilisez des anciennes balises changez l'en-tête en : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Ou si vous definissez un contenant de cadre : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> ... </head> <frameset> ... </frameset> </html>
Structure globale du document Cadre de page <frameset> <iframe> En-tête <head> <title> Corps <body> Titre <h1..6> Séparateur <hr> Texte Nouvelle ligne <br> Paragraphe <p> <pre> Liste <ul> <ol> <dl> Tableau <table> Liens Lien hypertexte <a> <link> Voir l'extension XLink. Audiovisuel Image <img> <map> <area> Voir l'extension vectorielle SVG. Son <object> Animation <object> Voir l'extension SMIL. Interactivité Formulaire <form> Langage de script <script>
Général <em> Accentuation, mise en relief. <strong> Accentuation plus forte. <cite> Contient une citation ou une référence à une autre source. <blockquote> de niveau bloc ou <q> intraligne Citation. <dfn> Définition du terme encadré par les balises. <abbr> Abréviation. <acronym> Acronyme. <ins> et <del> Modification de parties d'un document avec date et auteur. <address> Adresse et coordonnées de l'auteur en bas de page. Informatique <code> Fragment de code informatique. <samp> Exemple de sortie d'un programme. <kbd> Texte devant être entré par l'utilisateur. <var> Instance de variable ou argument de programme. Mathématique <sub> et <sup> Exposant et indice. Utilisez plutôt l'extension MathMl.
Espace insécable. Notamment devant : ! ? « et » Guillemets français « ». & < > " Caractères de contrôle & < > "
attributs noyau id identificateur unique dans le document class liste de classes de style style information de style title titre consultatif international lang code international de la langue dir direction du texte évènements du langage de script onclick un bouton du pointeur a été cliqué ondblclick double cliqué onmousedown pressé onmouseup relâché onmouseover déplacé dessus onmousemove déplacé dedans onmouseout déplacé en dehors onkeypress une touche a été pressé et relaché onkeydown pressé onkeyup relâché
Dernière version de la spécification HTML.
Évolution du langage HTML avec la possibilité de définir ses propres
balises : XML.
Version XML du langage HTML : XHTML.
Le langage de description CSS, feuilles de style en cascade, permet aux auteurs et utilisateurs d'attacher des styles aux documents structurés. En séparant le style de présentation du contenu, les feuilles de style simplifient la mise en page et la maintenance des sites Internet.
display: block | list-item | table Éléments de niveau bloc. display: inline | inline-table Éléments intraligne. display: compact | run-in Éléments de niveaux mixtes. visibility: visible | hidden | collapse Visibilité de la boite.
position: static Positionnement normal. position: relative Positionnement relatif. float: left | right | none Positionnement flottant. position: absolute | fixed Positionnement absolu. top, right, bottom, left: <longueur> | <%> Indique le décalage par rapport au positionnement normal. clear: none | left | right | both Indique le comportement des boites adjacentes aux boites flottantes. z-index: <entier positif> Indique le niveau de superposition. vertical-align: top | middle | bottom... | <longueur> | <%> Alignement vertical des boites.
margin[-top|-left|-right|-bottom]: <longueur> | <%> Marge extérieure. border[-top|-left|-right|-bottom]: <longueur> | <%> border-style: none | dotted | solid | double... border-color: <couleur> Bordure. padding[-top|-left|-right|-bottom]: <longueur> | <%> Marge intérieure. height, min-height max-height: <longueur> | <%> Largeur, minimale, maximale. width, min-width max-width: <longueur> | <%> Longueur, minimale, maximale. overflow: visible | hidden | scroll | auto Gestion du débordement du contenu d'une boite. clip: <shape> | auto Fenêtre de découpage du contenu d'une boite.
text-align: left | right | center | justify Alignement : gauche, droite, centré, justifié. text-indent: <longueur> | <%> Renfoncement. line-height: normal | <longueur> | <%> Interlignage ou espacement vertical des lignes. font-stretch: normal | wider | narrower... Largeur ou chasse. letter-spacing: normal | <longueur> Interlettrage ou approche. word-spacing: normal | <longueur> Espacement entre mots. white-space: normal | pre | nowrap Comportement des espaces lors de la coupure des lignes. direction: ltr | rtl Direction du texte. font-family: <nom>, <nom générique> Famille de police. <nom générique> sans-serif, cursive, fantasy, monospace. font-style: normal | italic | oblique Orientation : normal, italique, oblique font-decoration: none | underline || overline || line-through || blink Décoration : aucune, souligné, surligné, biffé, clignotant. text-shadow: <couleur> <décalages> <épaisseur> Ombre portée du texte. font-weight: normal | bold | bolder | lighter Épaisseur ou graisse : normal, gras. font-transform: capitalize | uppercase | lowercase | none Transformation en capitale, majuscule, minuscule, aucune. font-size: small/medium/large | <%> | pt | em | ex | px | cm Taille, hauteur ou corps de la police.
color: <couleur> | #<hex6> | rgb(0-255, 0-255, 0-255) Couleur. background[-image|-color|-repeat|-attachment|-position]: ... Image de fond, couleur, répétition, fixité, position. cursor: crosshair | default | pointer | move | text | wait... Symbole du Curseur lors du survol de l'élément. empty-cells: show | hide Visibilité ou non des bordures de cellules vides d'un tableau. list-style[-type|image|position]:... Type de liste, image du marqueur, positionnement.
Tous les éléments peuvent prendre la valeur 'inherit'. Il hériteront alors des attributs de leur parents. Ce comportement à lieu par défaut pour tous les attributs non spécifiés.
Les propriétés en rapport avec les synthétiseurs vocaux, l'impression et les descripteurs de polices n'ont pas été traitées. Pour avoir les informations complètes sur un élément il est fortement conseillé de consulter la dernière version de la spécification CSS.
Bien sûr tous ces principes sont théoriques et rien ne vaut quelques
exemples pour se rendre compte de leur utilité et de leur faisabilité. Je
vous conseille donc d'aller jeter un coup d'oeil sur ma principale
réalisation de site web : le
Monde du Classement (c'est là de la pure auto-promotion et en plus je ne
suis pas sûr d'avoir respecté tous ces principes :-).
Enfin, si j'avais un seul site à vous conseiller
sur la conception des sites web, ce serait sans hésiter Web Page Design for
Designer. Attention ! Il est en anglais.
Si vous ne lisez pas l'anglais vous pouvez voir le site redaction.be qui s'occupe de l'écriture sur Internet.
Version : 2 (octobre 2000-mars 2002)
| Précédent : Mots de liaison dans le texte argumenté | Communication efficace | Suivant : Les règles de la composition d'une image |