1 GUIDES DE STYLE et publication WWW. 2 préambule aide à la création d un ensemble de pages html permettant au lecteur dacquérir des informations Présupposé.

Présentation au sujet: "1 GUIDES DE STYLE et publication WWW. 2 préambule aide à la création d un ensemble de pages html permettant au lecteur dacquérir des informations Présupposé."— Transcription de la présentation:

1 1 GUIDES DE STYLE et publication WWW

2 2 préambule aide à la création d un ensemble de pages html permettant au lecteur dacqué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 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 4 adapté au lecteur analyse du public cible (user center design) novices ou experts du domaine concerné novices: importance de la structuration experts: ils ont une idée de ce quils 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 5 Notions de base (1) du livre traditionnel à lhypertexte 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 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 laccès direct) mettre un lien sur la page d accueil du serveur.

7 7 navigation inter et intra sites(1)

8 8 navigation inter et intra sites(2) navigation possible à l intérieur du site 2 éviter les blocages:

9 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 10 structure d un site trop d informations tue l information la structure doit être visible: exemple la couleur: M: menus

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

12 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 13 adobe la home page tiens sur un écran accés par liens hypertextes directs ou par images cliquables

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

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

16 16 et version graphique:images cliquables + texte+formulaires NON-JAVA

17 17 et sun version texte pur

18 18 et sun version java de sun france car us...

19 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 lavis et le profil des utilisateurs mettre en évidence ce qui est nouveau droits de copyright,logo, URL en clair NEW

20 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 loeil du lecteur et attirer son attention:

21 21 exemple courant 1er tiers: vu et lu en premier attention au clowns pants tout ce qui est excessif est insignifiant Lecture d un écran 10 cms essentiels d une home page

22 22 canevas de pages quelques rappels utiles tous les lecteurs nont 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 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 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 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 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 27 exemple:images et zoom image jpeg grossieimage gif grossie

28 28 texte/gif et texte/jpeg texte gif GROSSISSEMENT texte jpeg

29 29 palettes palette netscape :216 couleurs communes aux deux

30 30 palettes (suite). composition lena.gif et pepper.gif

31 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 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 33 génération html (2) vérifier les liens existent, les URL (relatives) lattribut 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 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/