1 guides de style et publication www. 2 préambule aide à la création d un ensemble de pages html...
TRANSCRIPT
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/