1

GUIDES DE STYLE et publication WWW

2

préambule

aide à la création d’ un ensemble de pages html permettant au lecteur d’acquérir des informations

Présupposé connu HTML (3.2 minimum) bases IHM

HTML: pas de contraintes fortes d’ écriture risques de conception erronée élevés l’ objectif est d’être lu... ce qui se conçoit bien s’ énonce clairement.....

les goûts et les couleurs.... souvent la simplicité est le meilleur choix

3

quelques références www style guide

les plus significatives Université de Yale (P Lynch et S Horton)

Yale C/AIM Web Style Guide : site http://info.med.yale.edu/caim/manual/contents.html

Tim Berners-Lee:

Style Guide for online hypertext : site du consortium http://www.w3.org

680 réponses altavista à web+style+guide à noter l’ IEEE web style guide site

http://power.eng.mcmaster.ca/alden/www_styl.html

4

adapté au lecteur analyse du public cible (user center design)

novices ou experts du domaine concernénovices: importance de la structurationexperts: ils ont une idée de ce qu’ils cherchent: ne

pas imposer son seul point de vue, mais fournir un accés rapide par liens directs vers les concepts clefs.

le novice évolue....vers l’ expert

connaître son audience quel browser , ...? intérêt du standard quelle bande passante (contraintes fortes sur la

taille des pages et les types MIME possibles)

5

Notions de base (1)

du livre traditionnel à l’hypertexte du premier livre moderne 1456 au livre actuel:

numérotation, table des matières, titres de chapitres, index, résumés,notes de bas de pages: plus d’ un siècle

hypertexte: non linéaire, approche événementielle (clic sur lien), navigation variée des lecteurs: nouvelle écriture

développement de nouveaux outils , d’ informations de contexte permettant au lecteur de se situer (la notion de numéros de pages sans signification)

6

Notions de base (2)

WWWW: Who, What, When, Where Who: le lecteur doit savoir qui parle:(et à qui

répondre)les tags ADRESS, les url de type MAIL TO

What:un titre clair , non ambigüe et significatif (pas de “introduction”, “début” et autre “complément”...)

ce titre apparait tel quel dans les bookmarks When: durée de vie d’ une information (la date de

révision d’ un document est souvent un critère de choix)

Where: l’ URL ne donne pas de façon immédiate la localisation (et la navigation désoriente)mettre en clair l’ URL (pour redonner l’accès direct)mettre un lien sur la page d’ accueil du serveur.

7

navigation inter et intra sites(1)

8

navigation inter et intra sites(2)

navigation possible à l’ intérieur du site 2

éviter les blocages:

9

navigation inter et intra sites(3) exemples connus

ou mieux!:

ces éléments apparaissant sur chaque page du site permettent une cohérence de présentation et par ces repères visuels donnent facilement au lecteur des éléments d’ identification essentiels

10

structure d’ un site trop d’ informations tue l’ information la structure doit être visible: exemple la couleur:

M: menus

11

les choix: complexité et lisibilité(Yale web style guide)

12

les éléments essentiels d’ un site

la page HOME vitrine essentielle du site actuellement deux tendances

approche par graphisme: images cliquables

( problème de performances)

approche texte peu attirant (image de marque...)

proche des CDROM

quelques exemples:

13

adobela home page tiens sur un écranaccés par liens hypertextes directs ou par images cliquables

14

kodakla home page tiens sur un écran (56K/ image)accés par liens hypertextes directs ou par images cliquables

15

consortium (texte structuré, beaucoup de choix, professionnel,...)

16

etversion graphique:images cliquables+ texte+formulaires

NON-JAVA

17

et sun version texte pur

18

et sun

version java de sun france car us...

19

Conception de sites Compléments

liens vers d’ autres sites: paragraphe “sites à visiter”

bibliographies, appendices : ne pas tout réécrire (NIH) (copier un document en garantit l’

accès mais pas la mise à jour)

FAQ et mail: obtenir l’avis et le profil des utilisateurs

mettre en évidence ce qui est nouveau

droits de copyright,logo, URL en clair

NEW

20

conception d’ une page: aspect graphique

aspect graphique général un texte dense: ennuyeux, fastidieux à la lecture les résolutions d’ écran sont faibles (< papier imprimé) hiérarchie visuelle entre les éléments d’ une page pour

diriger l’oeil du lecteur et attirer son attention:

21

exemple courant

1er tiers: vu et lu en premierattention au clown’s pantstout ce qui est excessif est insignifiant

Lecture d’ un écran

10 cms essentiels d’ une home page

22

canevas de pages

quelques rappels utiles tous les lecteurs n’ont pas des écrans 21” mais

plutôt 13 à 15”. résolution souvent limitée à 640x480 !! 10% seulement des lecteurs utilisent la

scrollbar V et encore moins la H...

donc se limiter à des pages 530H X320L pour l’ impression possible et 600HX350L pour les viewers

23

typographie H1 à H6 : non tous obligatoires (H5,H6 plus petits

que le texte normal) 3 niveaux suffisent! on lit 13% plus vite en minuscules qu ‘en

MAJUSCULES

par contre un mot en majuscules ressort BIEN d’ un texte en minuscules

l’ emploi d’ une grande variété de fontes rend la lecture plus difficile, idem pour les tailles.

la structuration visuelle d’ un texte en paragraphes séparés par des lignes blanches avec indentation est essentielle (ligne de 26 à 55 caractères)

ex: longue LONGUE

24

taille des pages

relation entre taille écran et taille page

se limiter à 2à 3 écrans/page 1 écran pour la home

page 1 écran pour les

menus,formulaires,..

25

style éditorial importance de TITLE écrit susceptible d’ impression un seul lien dans une phrase, court sur un à trois

mots (le texte souligné se lit mal) éviter les “ clic là “ mais bien désigner le nom du

lien dans une phrase lisible naturellement Windows = Mac

times 12 en Mac = times 14 en windows gamma 1.8 en Mac et 2.2 en Windows (correction

de gamma possible par ex dans Photoshop) les rendus Netscape et IE Microsoft sont différents

26

les graphiques sur WWW

bande passante de l’ utilisateur.... gif et jpeg gif ou jpeg?

gif: 256 couleurs, compression sans perte, supporte l’ entrelacement et la transparence, pour la plupart des browsers

jpeg: très bon taux de compression, millions de couleurs possibles, images naturelles ou médicales (peu structurées), dégrade les schémas ,dessins et textes.

27

exemple:images et zoom

image jpeg grossie image gif grossie

28

texte/gif et texte/jpeg

texte gif

GROSSISSEMENT

texte jpeg

29

palettes

palette netscape :216 couleurs communes aux deux

30

palettes (suite).

composition lena.gif et pepper.gif

31

éléments complémentaires

renseigner HEIGHT et WIDTH pour les images: le browser pourra afficher le texte

le fond: lecture plus rapide en fond clair si motif: attention au chargement,et lisibilité

sauf compétences graphiques: rester simple (pastels...) et conservateurs. et TESTER sur plusieurs plateformes

prévoir une version imprimable (monochrome...) les performances sont liées à la bonne utilisation

des caches

32

génération html (1) outils de création (liste sur www.w3.org)

html direct (avec traitement texte de base vi par exemple...)

traitement de texte avec add on (internet assistant /word,...)

éditeurs html (plus de 100, beaucoup de gratuits) mais.. filtres convertisseurs (rtf-->html, excel-->html,.....) éditeur html intégré à browser (Gold) traitement des images (gif transparence,gif animation,..)

les style sheet apportent la consistance d’ ensemble de dochtml

33

génération html (2)

vérifier les liens existent, les URL (relatives) l’attribut ALT pour les images extensions spécifiques du générateur html rendus différents selon les browsers (H1,...) et

plateformes (pas de H1,H2,.. dans les listes, ..)

valider: des sites (webtech,......) et des outils (Momspider(perl),checker(unix),cyberspider(Win),webdick(W3.1) existent ou sont intégrés dans des générateurs (ex AOLPress)

évaluer sur public cible

34

bibliowwwgraphie

http://www.w3.org

http://ugweb.cs.ualberta.ca/~gerald/validate/

http://www.hwg.org/resources/html

http://www.webtechs.com/html/

http://www.stars.com/

http://info.med.yale.edu/caim/manual/

http://www.imag.fr/Multimedia/archives/