SELFHTML/Quickbar  Graphiques


Sortes de graphiques typiques pour pages WWW

Cette page est un document avec du texte et des informations

 Boutons (surfaces pour déclencher)
 Puces (points d'une liste énumérative)
 Barres (lignes de séparation)
 Papiers peints (images d'arrière plan)
 Symboles (complément de texte ou remplacement de texte)
 Cliparts (illustrations)
 Thumbnails (aperçus de graphiques)
 Collections de graphiques sur le WWW

 

Boutons (surfaces pour déclencher)

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.

La commande HTML typique pour incorporer de tels boutons de liens est:

<a href="fichier.html"><img src="bouton.gif" border=0></a>

Davantage de détails à ce sujet dans le chapitre  graphiques en tant que liens. Utilisez pour plusieurs boutons sur une page WWW une  palette de couleurs uniforme dans toute la mesure du possible.

Boutons typiques

    
 

Puces (points d'une liste énumérative)

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 WWW, mais répétez plusieurs fois les mêmes puces sur la page WWW. 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 dans les  titres. La commande typique pour l'incorporation est :

<h2><img src="dot.gif" align=middle> texte du titre</h2>

Plus de détails à ce sujet dans le chapitre  incorporer des graphiques.

Puces typiques

     
 

Barres (lignes de séparation)

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 WWW 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 WWW, mais répétez les mêmes barres plusieurs fois par page WWW. 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.

Barres typiques

 

Papiers peints (images d'arrière plan)

Les images d'arrière plan (papiers peints) sont devenues populaires sur le WWW depuis leur introduction par Netscape. Beaucoup de pages Web attrayantes utilisent des images d'arrière plan comme effet. 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 WWW, 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 WWW 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.

La commande HTML typique pour incorporer du papier peint est:

<body background="fichier.gif">

Plus de détails à ce sujet dans le chapitre  Images d'arrière plan (papier peint).

Papiers peints typiques

    
 

Symboles (complément de texte ou remplacement de texte)

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 pour 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. Les symboles doivent agir sur l'utilisateur de telle sorte qu'il ne perde pas un instant à s'interroger sur la signification du graphique.

Symboles typiques

        
 

Cliparts (illustrations)

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 atteint exactement ce que mille mots n'arrivent pas à dire.

Cliparts typiques

  
 
 

Miniatures (aperçus de graphiques)

Malheureusement les méthodes de transmission habituelles aujourd'hui sur Internet ne permettent pas encore 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 WWW, 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"><img src="miniimage.gif"></a>

Beaucoup de bons programmes graphiques permettent la réduction proportionnelle de graphiques.

Miniature typique

 

Collections de graphiques sur le WWW

Il y a beaucoup de collections de graphiques sur le WWW, desquelles vous pouvez télécharger des images en partie gratuitement. Veillez cependant dans tous les cas aux stipulations de droits d'auteur citées par le fournisseur. Voici un choix:

  Backgrounds
  Texture Land
  Caboodles
  ClipartCom
  Barry's Clipart Server
  FreeArt Cliparts
  Cliparts comme fichiers ZIP (répertoire FTP)
  The Clipart Universe
  Web Graphics & Links Collection
  Free Web Page Graphics
  New World Creations

après: Graphiques GIF animés
avant: Intensité de couleurs et palettes de couleurs
 

SELFHTML/Quickbar  Graphiques

© 1998 Stefan Münz / © 2001 Traduction  Serge François, 13405@free.fr