Les standards graphique du Web

Tous les syllabus d’Infographie sur
http://b i s c h o f f s h e i m . p i e r r e c l e m e n s . n e t
29-1-2001
Les standards graphique du Web
L
a construction de page web nécessite quelques notions de base, quand à la
dimensions des graphiques. Qu’il s’agisse de l’interface proprement dite
(l’ensemble des boutons, titres et autres logo, constituant l’aspect global de
la fenêtre web) ou d’ajout, tels que bannières et autres script de programmation.
Les dimensions du lay-out Web :
Chaque utilisateur du Net, appelé généralement Surfeur, regarde un écran
dont la taille peut varier. La taille physique tout d’abord : On trouve sur le marché
des écrans dont la taille est exprimé en pouce. Un écran quinze pouces sera aussi
appelé : Ecran 15’. Chaque écran à une capacité d’affichage calculé en pixels. La
limite la plus répandue est souvent de 1280 x 1024 pixels. La carte graphique est
aussi un éléments qui rentre en compte dans les limites d’affichage. (Les
ordinateurs portables ont une taille d’affichage plus petites que des écrans 21’ ou
encore (mais plus rare) 24’. Ma carte graphique par exemple est capable d’afficher
une image de 2560 x 1024, due à une propriété DualHead (cartes Matrox), ce qui
vous permet d’avoir deux écrans : Un pour travailler sur l’image en grand format,
l’autres pour les palettes. Les écrans de très grande taille entre dans le cas des
industrie graphique lié à la modélisation 3D, par exemple. Peut de « surfeur » en
sont équipés !
Nous avons donc :
a) Des tailles d’écran différents :
Ecran 15’
Ecran 17’ (Standard maison, bureau).
Ecran 19’
Ecran 21’
Ecran 24’
et Ecran 28’
b) des tailles d’affichage différents :
640 x 480
800 x 600
1024 x 768
1152 x 864
1280 x 1024
1600 x 1200
et plus…
(2ème. Publicité – Année académique 2000-2001 – Haute Ecole Francisco Ferrer - Cours de M. Pierre De Moey).
1
Tous les syllabus d’Infographie sur
http://b i s c h o f f s h e i m . p i e r r e c l e m e n s . n e t
Nous devons choisir une taille pour notre lay-out, que tous le monde pourra voir
dans
son
entièreté.
Les
statistiques
de
fréquentation
de
site
(www.thecounter.com par exemple) nous fournissent de bonnes indications à ce
sujet. C ‘est ainsi que l’on constate que une taille d’écran 800 x 600 pixels est la
plus répandues. Alors pour ceux qui ont un écran plus grand, ils pourront sans
problème m’observer. Pour ceux qui ont une taille d’affichage plus petite (640 x
480), on ne peut que les encourager à augmenter la définition de leurs écrans, soit
d’en changer tout simplement.
800 pixels
Exemple avec une
fenêtre Windows
600 pixels
Mieux vaut fixé une limite de taille pour la largeur de votre lay-out, à savoir : 800
pixels. Pour la hauteur, la limite est plus difficile à définir. L’ascenseur de droite
sur la fenêtre de votre navigateur web (Netscape ou Iexplorer) permet de monter
et descendre la page. On peut donc allonger à loisir sa composition (fait en
générale de morceaux éparts).
Exemple : (www.altavista.com) >>> page suivante.
(2ème. Publicité – Année académique 2000-2001 – Haute Ecole Francisco Ferrer - Cours de M. Pierre De Moey).
2
Tous les syllabus d’Infographie sur
http://b i s c h o f f s h e i m . p i e r r e c l e m e n s . n e t
Limite de l’écran >>>
Ensemble des infos concernant le site (Copyright, droits d’utilisation –
legacy), ainsi que les liens vers d’autres sites.
(2ème. Publicité – Année académique 2000-2001 – Haute Ecole Francisco Ferrer - Cours de M. Pierre De Moey).
3
Tous les syllabus d’Infographie sur
http://b i s c h o f f s h e i m . p i e r r e c l e m e n s . n e t
Composition traditionnelle d’un lay-out Web :
logo
bannière
Menu
généraux
Sousmenu
Contenus - Info
Les Bannières :
Une bannières est une petite animation de 2 à 10 images qui se succèdent.
Le tout forme une sorte de dessin animé, comprenant évidemment aussi des
images. Des bannières plus complexes peuvent proposés en leur sein des moteurs
de recherches sous formes de scritp, faisant le lien vers une base de données.
Nombres de bannières fourmillent actuellement sur le Net, tentant de vous
faire cliqué sur l’une d’elle, avec plus ou moins de succès. Les chiffres montrent
que ces dernières attirent de moins en moins. Il n’empêche qu’elles ont un rôle
obligatoire pour la visibilité des activités sur le net. Celle-ci ont de nombreux
formats différents. Pourtant, l’un deux se dégage très nettement par rapport aux
autres. Il s’agit du format rectangle-horizontale de 468 x 60 pixels.
En voici quelques exemples :
(2ème. Publicité – Année académique 2000-2001 – Haute Ecole Francisco Ferrer - Cours de M. Pierre De Moey).
4
Tous les syllabus d’Infographie sur
http://b i s c h o f f s h e i m . p i e r r e c l e m e n s . n e t
Voyons de quoi est composé l’une d’entre elle, nous allons la découper dans toutes
ces étapes (la bannière Tintin) :
1)
2)
3)
Dans un autre genre… :
1)
2)
3)
4)
(2ème. Publicité – Année académique 2000-2001 – Haute Ecole Francisco Ferrer - Cours de M. Pierre De Moey).
5
Tous les syllabus d’Infographie sur
http://b i s c h o f f s h e i m . p i e r r e c l e m e n s . n e t
L’idée doit être simple (pas simpliste) et directe. Elle doit dire en trois à quatre
images, qui je suis et pourquoi je m’adresse à la personne. Tout est permis.
________________
(2ème. Publicité – Année académique 2000-2001 – Haute Ecole Francisco Ferrer - Cours de M. Pierre De Moey).
6