Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Dabne
carolina@dabne.net
ana@dabne.net

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

envisager...
Nous savons que le bon contenu et son organisation est essentiel pour
attirer les visiteurs. Mais, ils resteront l sils trouvent notre page
confortable et agrable lil.
La plupart de nos lecteurs sont la recherche de l'information, et
ils/elles ne le trouvent pas en lisant la page web mot mot, mais en
balayant des yeux les items importants.
En gnral, nous devons utiliser les images alternant avec du texte,
pour faciliter la lecture, utiliser les couleurs peu agressives et
harmonises avec le design gnral de la page. Nous pouvons dire la
mme chose pour les typographies.
http://creatuweb.espaciolatino.com/tutorhtml/tema21.html

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Recommandations
En gnral, nous allons crire nos contenus sur notre site nous mmes,
aprs qu'un/e informaticien/ne ait mis en uvre le graphisme par
dfaut. Peut-tre que l'informaticien/ne a mis en uvre aussi un
diteur WYSIWYG ("What You See Is What You Get") pour rendre plus
facile notre criture, et avec cet diteur, nous pourrons mettre les mots
en gras, souligner, les paragraphes... Cest pourquoi, on tiendra compte
du style gnral du site, et nous allons donc voir quelques
recommandations:

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Rdaction
Huit conseils pratiques pour rdiger une page web:
Utiliser un langage simple et clair
Dvelopper une seule ide par paragraphe
Mettre la conclusion en premier
Insrer des sous-titres descriptifs
Mettre en gras les mots importants
Faire des liens descriptifs (pas Lire ici)
Prsenter ses ides sous forme de listes
Aligner le texte gauche (a droite pour le criture en arabe)

http://www.ecrirepourleweb.com/ergonomie/des-besoins-des-utilisateurs-2-comportements

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Le texte. Les typographies

Les typographies sur les diffrents navigateurs
Les navigateurs (IExplorer, Opera, Safari, Firefox, Google Chrome, etc)
sont les logiciels qui peuvent interprter les codes du design web, et
pour a, ils utilisent les typographies installes dans le systme
d'exploitation (Windows, Linux, MacOS, etc.) o ils s'excutent. Comme
chaque ordinateur a diffrentes typographies installes, il est fortement
recommand d'utiliser les polices les plus populaires, pour s'assurer
que tout le monde voie le page de la mme manire.

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Les typographies les plus utilises sont

Arial, Helvetica, sans-serif;
Arial Black, Gadget, sans-serif;
Bookman Old Style, serif;
Comic Sans MS, cursive;
Courier, monospace;
Courier New, Courier, monospace;
Garamond, serif;
Georgia, serif;
Impact, Charcoal, sans-serif;
Lucida Console, Monaco, monospace;
Lucida Sans Unicode, Lucida Grande, sans-serif;
MS Sans Serif, Geneva, sans-serif;
MS Serif, New York, sans-serif;
Palatino Linotype, Book Antiqua, Palatino, serif;
Symbol, sans-serif;
Tahoma, Geneva, sans-serif;
Times New Roman, Times, serif;
Trebuchet MS, Helvetica, sans-serif;
Verdana, Geneva, sans-serif;
Webdings, sans-serif;
Wingdings, Zapf Dingbats, sans-serif;

Arial
Helvetica
Comic Sans MS
Georgia
Trebuchet MS
Verdana

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Le texte. Les caractres spciaux

vitez tous les caractres spciaux si c'est

possible. Ils peuvent interfrer avec le code HTML.
Par exemple, les traits d'union, guillemets, la
csure automatique... faits avec le "Word",
peuvent ajouter des caractres non standards qui
ne sont pas bien montrs sur les navigateurs.

$ % &&&
----####
@@@--______
{}
[]
**********
'''''
\\\\\\\\\\\

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Le texte. L'alignement du texte

Lisibilit ou esthtique, il faut choisir. L'alignement d'un texte se fait
gauche, droite, centr ou justifi. Dans un navigateur, le texte (alphabet
latin) est align par dfaut gauche et c'est trs bien comme a. Les
paragraphes aligns droite ou centrs diminuent la lisibilit et fatiguent la
lecture. Ils conviennent bien pour des textes courts: titre, surtitre, lgende,
annotation.
Un texte justifi est un texte dont la longueur des lignes est identique pour
un mme paragraphe, l'exception de la dernire ligne. Pour raliser une
telle disposition, le logiciel ajoute des espaces plus ou moins importants
entre les lettres et entre les mots. Des tudes srieuses ont dmontr
qu'un texte en drapeau est plus accessible l'il. Les fins de lignes
servent de repre visuel. D'un point de vue esthtique, un alignement
justifi donne un rsultat plus agrable et une impression de plus grande
rgularit.
8

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

La justification en pratique
Voir:
(http://www.tutoweb.be/typog
raphie/texte-justifie/).
Il faut penser la longueur de
ligne.
Il devient donc extrmement
dlicat d'imposer une
justification surtout pour des
lignes courtes. L'alignement traditionnel gauche est un choix
judicieux et souvent plus pertinent surtout l'heure de la multiplicit
des supports: cran d'ordinateur, TV, projecteur, iPod, etc.
http://www.tutoweb.be/typographie/texte-justifie/

Voir: http://elpais.com (izda) // http://www.almassae.ma/

9

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Le texte. L'interlignage
L'interlignage doit galement tenir compte de l'il de la police. Plus
l'il est grand, plus grand sera l'interlignage. L'espace entre les lignes
d'un Georgia sera diffrent d'un Times. Idem pour la longueur de ligne:
de longues lignes obligent augmenter l'interlignage pour faciliter le
saut de l'il au dbut de la
ligne suivante. D'autres
facteurs influencent le choix
de l'interlignage comme la
graisse, la justification, le
choix typographique, etc.
http://www.tutoweb.be/typographie/texte-justifie/

10

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

En rsum, le site web serait conu et mis en uvre par

linformaticien/ne avec une typographie, un interlignage, un
alignement... par dfaut. C'est possible que notre site ait un diteur de
texte similaire Word (WYSIWYG: "What You See Is What You Get")
pour nous aider mettre nos contenus, mais, on recommande de ne
pas en abuser.

11

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Les liens
C'est important que notre page renvoie bien dautres pages, parce
que cela augmente loptimisation dans les moteurs de recherche, et
nous collaborons aussi partager l'information sur la toile.
D'habitude, les liens sont marqus avec une couleur diffrente, ou un
soulignement, pour aider les lecteurs.
Nous pouvons crire nos contenus en mettant les liens appropris, mais
il ne faut pas oublier quil nest pas poli de mettre un lien bris.
De plus, un texte plein de liens peut rompre l'homognit de la page,
parce que les couleurs des liens peuvent distraire de la lecture.

12

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Les barres de dfilement

Il serait prfrable quau moins la page principale se voie sur plein
cran; si ce nest pas possible, il faudrait quau moins la largeur ne soit
pas plus grande. La barre de dfilement
horizontale est horrible.

13

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Les couleurs
... ne sont pas les mmes que sur le papier.
Il y a des couleurs pour le web. Si on crit
avec l'diteur WYSIWYG, on choisira les
couleurs que notre informaticien/ne a
choisies prcdemment.

14

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Les images
Le poids de l'image
Les navigateurs doivent tlcharger tous les fichiers de la web, et aussi
les images. Habituellement un texte est moins lourd qu'une image.
C'est pour a quil nest pas recommand de mettre beaucoup dimages
dans une mme page.
Aussi, le poids de l'image est trs important. Il dpendra de ce que le
navigateur peut supporter, mais en gnral on tlchargera des images
de moins de 1MB). Plus elles sont petites, mieux cest. Pour faire les
images petites, il faudra penser la taille, la rsolution et au format)

15

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Les formats de fichiers graphiques

JPG comprime avec un taux de perte rglable des images codes
en 24 Bits (Mode RVB). Le poids du fichier est inversement
proportionnel au taux de compression, la qualit de limage
galement). JPG ne permet aucune transparence. Ce format
convient aux photographies et aux images comportant de nombreux
effets de matire.

16

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

PNG8 ou GIF compriment sans pertes des images codes en 8 bits

(Mode Couleurs indexes ou Niveaux de gris). GIF est un format
propritaire tandis que PNG8 est un format libre prn par le
W3C. Ils ne permettent pas plus de 256 couleurs mais permettent
une transparence par index (une couleur transparente). Le poids
du fichier est proportionnel au nombre de couleurs et la structure
du fichier. Ces formats conviennent aux logos, pictos, images en
aplats de couleurs ou dessins vectoriels.

17

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

PNG24 comprime sans pertes des images codes en 24 Bits

(Mode RVB). Il est un format libre prn par le W3C et permet la
transparence par degr. Il nest malheureusement pas bien
support par tous les navigateurs (Explorer par ex.) et produit des
fichiers plus lourds que JPG. Ce format convient aux images
comportant de nombreux effets de matire et de la transparence et
est idal pour importer en Flash des images Bitmap dtoures (des
silhouettes par ex.).
http://arts-numeriques.net/spip.php?article72
http://www.hooping.net/faq-formatos-imagenes.aspx#jpeg

18

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Le texte alternatif pour les images

Le texte alternatif c'est la faon dont le navigateur montre l'image si
elle nest pas charg. Par exemple, les personnes aveugles "lisent" avec
un lecteur tous les lments de la page, ainsi que les images.
Aussi, le texte alternatif montre aussi un petit cadre sur l'image quand
nous mettons la souris dessus. Il est utile pour en savoir plus.
En ayant lesprit laccessibilit, nous mettrons un texte alternatif qui
dcrive le mieux l'image. Par exemple: "Photo de la runion de l'AMDH
Rabat", ou "Graphique de la structure d'un logiciel", ou "Logo de
lassociation..."

19

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

La taille et la rsolution de l'image

Quest ce que cest? La taille correspond la largeur et la hauteur de
votre image. La rsolution dune image correspond quant elle au
nombre de points par unit de surface de limage, soit le rapport entre
le nombre de pixels et les dimensions.
Pourquoi? Puisque votre image est destine au web une rsolution de
72 pixels par pouce suffit amplement. La taille dpend en revanche
de lutilisation que vous voulez en faire, mais il faut envisager les
recommandations que nous fera l'informaticien/ne pour chaque partie
de notre page.
http://www.commentcamarche.net/faq/17625-choisir-une-image-et-savoir-l-optimiser-pour-son-site-pro#resolution-ettaille

20

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

21

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Multimdia
(audio, diaporama, vido, animations)
Pour insrer dautres lments multimdias que nous avons sur notre
ordinateur, comme les audios, vidos, diaporamas ou animations, on
envisagera aussi le poids de l'lment.
Mais, d'habitude, on pourra intgrer ces lments qui viennent d'un
autre site web dans le ntre. C'est la faon de faire la plus populaire,
parce qu hberger des vidos sur notre serveur peut tre difficile. Par
contre, nous pouvons les hberger sur des sites comme YouTube, Flickr,
Scribd...
Voir: http://christian.aubry.org/2010/06/integrer-une-video-youtube/

22

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Rfrences

http://creatuweb.espaciolatino.com/tutorhtml/tema21.html (en espagnol)

http://www.ecrirepourleweb.com/ergonomie/des-besoins-des-utilisateurs-2-comportements

http://www.tutoweb.be/typographie/texte-justifie/

http://www.tutoweb.be

http://arts-numeriques.net/spip.php?article72

http://www.hooping.net/faq-formatos-imagenes.aspx#jpeg

http://www.commentcamarche.net/faq/17625-choisir-une-image-et-savoir-l-optimiser-pour-sonsite-pro#resolution-et-taille

http://christian.aubry.org/2010/06/integrer-une-video-youtube/

http://www.webstyleguide.com/wsg2/style/online-style.html

http://www.webtaller.com/manual-estilo-web/indice_manual_estilo_web.php
23

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Cette oeuvre est mise disposition selon le contrat

Attribution-ShareAlike 3.0 Unported disponible en ligne
http://creativecommons.org/licenses/by-sa/3.0/ ou par
courrier postal Creative Commons, 171 Second Street,
Suite 300, San Francisco, California 94105, USA.

24