SELFHTML/Aides à la navigation Graphisme| SELFHTML/Aides à la navigation Graphisme |
Exemple d'affichage: boutons typiques
Les boutons sont volontiers employés sur les pages WWW pour représenter des liens de façon graphique et attractive. Veillez toujours cependant à la quantité de données globale à charger. Pour une demie douzaine de liens, des petits boutons graphiques restent acceptables mais pas pour des douzaines de liens sur une page.
Davantage de détails sur l'incorporation de boutons en HTML dont donnés dans le chapitre sur les 
graphiques en tant que liens. Utilisez pour plusieurs boutons sur une page Web une palette de couleurs uniforme dans toute la mesure du possible!
La commande HTML typique pour incorporer de tels boutons de liens est:
<a href="fichier.html"> <img src="bouton.gif" width="100" height="25" alt="bouton" border="0"> </a> |
  |
Exemple d'affichage: puces typiques
Du texte seul à l'écran est ennuyeux et fatigant. L'œil cherche de quoi se repaître. . Avec des petits points, carrés, triangles et taches informelles de couleurs qui en raison de leur taille ne nécessitent que peu de mémoire, vous pouvez soutenir pour le plaisir de l'œil une information texte revêche. . Il est important d'observer ici que le lecteur a tendance à affecter aux puces une signification quelconque par exemple "Là où se trouve ce point bleu suit un nom de produit". Utilisez pour cette raison les puces de telle façon qu'on puisse déduire leur signification. N'utilisez pas sans arrêt des puces différentes sur une page Web, mais répétez plusieurs fois les mêmes puces sur la page Web. Ce n'est pas ennuyeux mais assure une belle image d'ensemble tout en réduisant le temps de chargement chez l'utilisateur, étant donné que le graphique concerné ne doit être chargé qu'une fois.
Les puces sont judicieuses par exemple pour définir des listes énumératives et peuvent même être incorporées de façon tout à fait élégante à l'aide de la propriété CSS list-style-image. La commande typique HTML pour l'incorporation est:
<ul style="list-style-image:url(dot.gif)"> <li>point de la liste</li> <li>autre point de la liste</li> </ul> |
|
|
Exemple d'affichage: barres typiques
HTML offre bien la possibilité d'insérer des , lignes de séparation dans le texte pour structurer plus clairement l'information. Celui qui cependant désire proposer sur ses pages Web quelque chose de particulier utilise des lignes graphiques. Similaires aux puces, les barres ont besoin de peu de mémoire. Même pour les barres la règle est valable: n'utilisez pas sans arrêt des barres différentes sur une page Web, mais répétez les mêmes barres plusieurs fois par page Web. Ce ne sera pas monotone mais contribuera à une belle image d'ensemble tout en réduisant le temps de chargement chez l'utilisateur, étant donné que le graphique concerné ne doit être chargé qu'une fois.
Pour un code HTML propre, les graphiques doivent être notés à l'intérieur d'autres éléments de bloc. Une notation typique HTML pour noter une barre, en définissant aussi des espaces identiques avec le contenu précédent et le contenu suivant grâce aux propriétés CSS margin-top et margin-bottom, pourrait donner ceci:
<div style="margin-top:20px; margin-bottom:20px;"> <img src="bar.gif" width="600" height="5" border="0" alt="ligne de séparation"></div> |
|
|
Exemple d'affichage: papiers peints typiques
Les images d'arrière plan (papiers peints) sont devenues populaires sur le WWW depuis leur introduction par Netscape. Quand vous ne mentionnez rien d'autre, l'image d'arrière plan est représentée copiée l'une à côté de l'autre aussi souvent qu'il est nécessaire (modèle de papier peint ou effet de carrelage). Quand le graphique employé n'apparaît pas uniformément sur les pages, on obtient des carreaux visibles. L'effet peut être voulu dans certains cas, dans d'autres cas, l'impression donnée est aussi celle de dilettantisme.
Il existe plusieurs types d'images d'arrière-plan. Les images classiques et les plus utilisées représentent une structure informelle quelconque et donnent ainsi l'impression par exemple d'une surface en fibres, en bois, en métal ou en papier. D'autres images d'arrière-plan représentent des carreaux visibles par des surfaces de couleur claire et donnent ensuite l'impression d'un carrelage à motifs géométriques. Et il y a encore ensuite, les images du type "trompe l'œil". Ce sont des graphiques qui sont extrêmement larges (par exemple 3000 pixels), qui ne peuvent donc pas être juxtaposés plusieurs fois à l'affichage dans les largeurs de fenêtres habituelles de navigateur. En hauteur par contre, ils ne mesurent souvent que de 1 à 5 pixels. Les premiers 200 pixels de cette longue bande contiennent ensuite par exemple un rectangle d'une couleur déterminée, alors que le reste du graphique est d'une couleur différente. Dans la fenêtre du navigateur apparaît alors à gauche une bande de couleur, sur laquelle par exemple il est possible de placer des boutons pour la navigation.
Pourtant, aussi géniale que soit l'idée de l'image d'arrière plan, elle peut conduire à faire beaucoup de travers. Avec des images d'arrière plan qui attirent trop l'attention, l'utilisateur est trop distrait du premier plan qui est le contenu proprement dit. Dans beaucoup d'exemples négatifs sur le Web, la lisibilité de l'information texte souffre aussi de l'image d'arrière plan.
La règle générale est la suivante: si vous voulez proposer sur une page Web du texte important, un papier peint d'arrière plan doit être agréable mais passer inaperçu. La mise en oeuvre de graphiques d'arrière plan "excitants" ne se justifie que pour des effets graphiques particuliers.
Pour poser un papier peint sous le contenu de toute la fenêtre d'affichage du navigateur, l'image d'arrière-plan est incorporée dans le repère d'ouverture <body> du fichier HTML:
<body background="arriere_plan.jpg" text="#000000"> |
À l'aide de la propriété CSS background-image il est par ailleurs possible d'affecter aussi à d'autres éléments HTML subordonnés un effet de papier peint. Dans l'exemple d'un paragraphe de texte, cela pourrait donner ceci:
<p style="background-image:url(arriere_plan.jpg)">texte<p> |
|
|
Exemple d'affichage: symboles typiques
De toutes les sortes de graphiques, c'est bien la sorte la plus importante quant au contenu. Avant tout pour des textes comme la documentation technique ou les textes scientifiques on taxerait presque l'auteur de paresse ou d'ignorance s'il renonçait aux symboles. Car spécialement pour la lecture en ligne de texte, la plupart des utilisateurs lisent en diagonale c'est à dire qu'ils ne lisent pas calmement phrase par phrase mais cherchent sans arrêt des possibilités d'orientation pour arriver vite à l'information désirée. À cet effet, les symboles sont une aide particulièrement précieuse.
Les symboles doivent s'orienter à des standards en vigueur. Ça ne traduit pas un manque d'imagination mais facilite l'orientation intuitive. Un graphique par exemple qui contient une "molaire" artistique suivie de la lettre "G" n'est pas perçu aussi rapidement qu'un triangle de signalisation avec un point d'exclamation ou un index levé. Les symboles doivent agir de telle façon sur l'utilisateur qu'il ne doit pas douter un seul instant de la signification du graphique.
Les graphiques-symboles peuvent être placés aux endroits les plus divers en HTML, par exemple devant des liens pour caractériser le genre et la cible du lien, ou devant des paragraphes qui contiennent du texte d'un certain type, par exemple une mise en garde, une information supplémentaire, une remarque sur une autre information ou autres.
|
|
Exemple d'affichage: Cliparts typiques
Les Cliparts sont des graphiques évocateurs le plus souvent humoristiques, qui peuvent aérer des textes plus grands en interpellant. Il est important de se servir des cliparts de telle façon qu'ils forment un complément à l'information texte environnante. De façon idéale, un graphique Clipart exprime exactement ce que mille mots n'arrivent pas à dire.
Certaines pages Web sont bourrées de cliparts tout prêts, "choisis" sans goût d'on ne sait où. Ici deux erreurs graves sont commises la plupart du temps: premièrement trop de graphiques différents placés un peu partout sont mauvais, parce qu'ils monopolisent l'attention et se traduisent chez l'utilisateur une sensation spontanée de stress, de surmenage et de perte du sens de l'orientation. Et deuxièmement parce que bien souvent les graphiques ne sont pas assortis pour les couleurs, la taille ou le style. Tout indique qu'il s'agit là de quelqu'un qui s'est procuré sans discernement un des nombreux CDROM avec des collections de cliparts proliférant sur le marché mais qui n'a pas le moindre sens de l'harmonie graphique. Les cliparts sont efficaces quand ils forment un équilibre avec le texte tout en établissant une relation avec celui-ci. Les séries de cliparts où, par exemple, un visage amusant adopte différentes poses en établissant ainsi un rapport avec le texte, sont idéales.
Deux possibilités s'offrent en HTML pour placer des cliparts à côté du texte. L'une est de laisser le texte passer à côté du graphique. L'exemple typique suivant aligne un graphique à droite à côté du texte d'un paragraphe, et le texte passe à côté du graphique:
<p><img src="clipart.gif" width="200" height="250" alt="clipart" border="0" align="right" hspace="10" vspace="5"> Texte du paragraphe</p> |
L'autre possibilité consiste à positionner le texte et le graphique à l'aide d'un tableau sans quadrillage. L'exemple suivant en montre le principe:
<table border="0" cellspacing="10"> <tr><td valign="top"> <img src="clipart.gif" width="200" height="250" alt="Clipart" border="0"> </td><td valign="top"> Texte à gauche au côté du graphique </td></tr></table> |
|
|
Exemple d'affichage: miniatures typiques
Malheureusement tous les visiteurs ne disposent pas des largeurs de bande de transmission qui permettent d'afficher "occasionnellement" à l'écran un graphique magnifique mais avide de mémoire. Si vous proposez des photos de grand format ou des cartes routières sur vos pages Web, vous ne devez jamais incorporer celles-ci directement dans vos pages. À la place, vous devez incorporer une version fortement réduite du graphique concerné. La version réduite doit être juste assez grande pour que l'utilisateur puisse décider s'il désire contempler le graphique en pleine taille ou non. Le graphique réduit doit pouvoir être cliqué et lorsqu'il l'est appeler le grand graphique. La commande typique pour cela est:
<a href="image.jpg" target="_blank"> <img src="miniimage.jpg" width="100" height="80" alt="aperçu" border="1"> </a> |
|
|
Exemple d'affichage: Photos typiques
Beaucoup trop de pages Web proposent beaucoup trop peu de photos. Ici les gens, donc les visiteurs de pages Web, sont pourtant curieux par nature et se réjouissent toujours quand ils ont des photos à voir. À l'ère de l'appareil photo numérique au prix devenu accessible et du scanneur, ce n'est vraiment plus un grand problème d'acquérir ses propres prises de vue comme graphiques en pixels sur l'ordinateur. Ce dont vous avez ensuite besoin est un programme graphique avec lequel vous pouvez le cas échéant ramener la taille des photos à une taille qui convienne au Web et avec lequel vous pouvez sauvegarder ces images dans un format graphique approprié comme JPEG. Avec la plupart des scanneurs et appareils photos numériques, ces programmes sont livrés avec le matériel.
Les photos sur les pages Web n'ont absolument pas besoin d'être dans un format particulièrement grand. Au contraire - cela ne fait bien souvent que casser la mises en page, garantit des temps de chargement longs chez l'utilisateur sans que ça ne soit particulièrement esthétique la plupart du temps. Les photos d'appareils numériques qui offrent une résolution de plusieurs "méga-pixels" , doivent donc avant tout être réduites en taille. L'important est ici de conserver le mode de l'image sur 16,7 Millions de couleurs. Les bons programmes graphiques disposent d'algorithmes au point qui permettent une réduction de la taille sans nuire à l'aspect de la photo. L'important est pour les photos que la réduction de taille se fasse en mentionnant le nombre de pixels souhaité pour la largeur et la hauteur, et non pas en mentionnant comme pour l'impression des centimètres ou des pouces. Pour des photos qui interpellent sur des pages Web, suffisent le plus souvent 200 à 400 pixels pour le petit côté et 300 à 600 pixels pour le grand côté Ce qui donne aussi pour JPEG et une compression moyenne des tailles de fichier acceptables qui se situent en règle générale à moins de 100 kilo octets.
|
|
Les puristes en HTML attrapent une éruption nerveuse quand ils entendent parler de "pixels invisibles". Mais plutôt que de passer cette astuce sous silence, il est préférable de la dévoiler et d'expliquer pourquoi et comment il n'est pas rare qu'elle soit mise en œuvre, et quels problèmes peuvent y être liés.
Le pixel invisible est une invention de David Siegel, un des premiers gourous de la conception Web. Irrité par la conduite des navigateurs Web de ne pas représenter les tableaux avec les valeurs d'attributs notées pour width= et pour height=, quand le contenu de la cellule est petit et que la cellule voisine a un contenu relativement important, il imposa l'espace souhaité tout simplement à l'aide d'un graphique invisible.
L'astuce comprend deux parties. Dans la première partie est créé un très petit graphique GIF qui ne représente absolument rien si ce n'est une surface monochrome. Il est préférable que le graphique ne mesure pas vraiment 1 pixel sur 1 pixel, mais plutôt 5 pixels sur 5 pixels. Des problèmes sont ainsi évités pour quelques navigateurs. La seule couleur que comprend le graphique GIF est alors définie comme transparente. Le résultat est que le graphique nécessite de l'espace, sans être visible. Les couleurs qu'il recouvre, par exemple des couleurs d'arrière-plan définies pour les cellules de tableau dans lesquelles le graphique est incorporé transparaissent.
La deuxième partie de l'astuce consiste à pouvoir affecter, lors de l'incorporation du graphique invisible, les valeurs quelconques souhaitées aux attributs width= et height= dans le repère <img>. Le graphique est alors déformé par le navigateur, mais étant donné qu'il est invisible, aucun effet de cette distorsion n'est visible.
Il est ainsi possible avec un graphique dont la taille n'excède pas quelques douzaines d'octets, d'imposer des emplacements et des espaces horizontaux et verticaux.
L'extrait HTML qui suit en montre une application typique. Le graphique est référencé tout au début dans deux cellules de tableau mitoyennes. Sa hauteur est déformée dans les deux références sur 1 pixel et sa largeur sur la valeur respectivement désirée. De cette façon, le tableau reçoit deux colonnes avec des largeurs minimales immuables:
<table border="0" cellspacing="0" cellpadding="0"> <tr><td valign="top"> <img src="pixel.gif" width="200" height="1" alt="" border="0"> Ici se trouve le contenu de la première colonne dont la largeur est au moins 200 pixels. </td><td valign="top"> <img src="pixel.gif" width="400" height="1" alt="" border="0"> Ici se trouve le contenu de la deuxième colonne dont la largeur est au moins 400 pixels. </td></tr></table> |
La méthode du pixel invisible n'est pas propre en ce sens que des vilains symboles "liens à l'image rompus" (broken-image) s'affichent quand le graphique, lors de la transmission de la page Web n'est pas transmis au navigateur, par exemple parce que l'utilisateur interrompt le chargement ou qu'il désactive l'affichage de graphiques. De plus la mise en œuvre de tels moyens est considérée par les puristes comme un détournement de l'objectif des graphiques et des propriétés HTML. Et finalement imposer des largeurs fixes est contestable étant donné que l'utilisateur par exemple lors de l'affichage dans une fenêtre de navigateur insuffisamment large est forcé de faire défiler l'écran horizontalement, ce qui n'est pas particulièrement convivial pour l'utilisateur. D'un autre côté, le pixel invisible est un pis-aller pour compenser des lacunes dans les possibilités offertes en HTML et CSS. Entre temps, on dispose certes de certaines propriétés CSS pour le Positionnement et affichage d'éléments, qui jouent également le rôle des pixels invisibles mais dans les navigateurs récents uniquement.
|
|
Il n'est pas rare que dans la conception Web, les graphiques servent à réaliser des choses qui ne sont pas (encore) possibles avec HTML et CSS. En font partie par exemple, les arcs de cercle plein cadre. Ces éléments graphiques sont ressentis par l'observateur étourdi d'une page Web non pas comme des graphiques "sur la page Web" mais comme composante élémentaire de la mise en forme. Un peu comme pour les pixels invisibles, de tels graphiques donnent une impression négative quand ils ne sont pas transmis au chargement de la page et qu'ils créent à l'affichage un "lien à l'image rompu".
Ce genre de composante graphique est utilisé le plus souvent dans des tableaux sans quadrillage ou pour les éléments positionnés de façon absolue. En ajoutant à côté l'une des l'autre et sans bordure, des cellules de tableau ou des éléments positionnés qui ont un graphique correspondant comme contenu, Il est possible d'obtenir les effets de mise en page comme ceux de l'exemple d'affichage. Avec l'utilisation de tableaux sans quadrillage pour ces effets, il est important de fixer expressément sur 0 les valeurs pour les attributs border=, cellspacing= et cellpadding=. Une construction HTML typique donne à peu près ceci:
<table border="0" cellspacing="0" cellpadding="0"><tr> <td><img src="arc_cercle.gif" width="100" height="100" alt="" border="0"></td> <td><img src="barre_haute.gif" width="500" height="100" alt="" border="0"></td> </tr><tr> <td><img src="barre_gauche.gif" width="100" height="500" alt="" border="0"></td> <td><!-- Contenu tel du texte, d'autres graphiques - souvent aussi des "tableaux intérieurs" etc... --></td> </tr></table> |
|
| |
 |
Techniques et terminologie du traitement de l'image
|
 |
Formats graphiques pour pages Web
|
| SELFHTML/Aides à la navigation Graphisme |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
