comment faire un projet web? manuel d'style 13/15

Rabat 2011- Comment faire un projet web?

Manuel de Style Web

Dabne

[email protected]

[email protected]


À envisager...

Nous savons que le bon contenu et son organisation est essentiel pour attirer les visiteurs. Mais, ils resteront là s’ils trouvent notre page confortable et agréable à l’œil.

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 général, nous devons utiliser les images alternant avec du texte, pour faciliter la lecture, utiliser les couleurs peu agressives et harmonisées avec le design général de la page. Nous pouvons dire la même chose pour les typographies.

http://creatuweb.espaciolatino.com/tutorhtml/tema21.html

2

Manuel de Style Web



Recommandations

En général, nous allons écrire nos contenus sur notre site nous mêmes, après qu'un/e informaticien/ne ait mis en œuvre le graphisme par défaut. 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... C’est pourquoi, on tiendra compte du style général du site, et nous allons donc voir quelques recommandations:

3

Manuel de Style Web


Rédaction

Huit conseils pratiques pour rédiger une page web:

• Utiliser un langage simple et clair

• Développer une seule idée par paragraphe

• Mettre la conclusion en premier

• Insérer des sous-titres descriptifs

• Mettre en gras les mots importants

• Faire des liens descriptifs (pas Lire ici)

• Présenter ses idées 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

4

Manuel de Style Web

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


Le texte. Les typographies

Les typographies sur les différents navigateurs

Les navigateurs (IExplorer, Opera, Safari, Firefox, Google Chrome, etc) sont les logiciels qui peuvent interpréter les codes du design web, et pour ça, ils utilisent les typographies installées dans le système d'exploitation (Windows, Linux, MacOS, etc.) où ils s'exécutent. Comme chaque ordinateur a différentes typographies installées, il est fortement recommandé d'utiliser les polices les plus populaires, pour s'assurer que tout le monde voie le page de la même manière.

5

Manuel de Style Web


Les typographies les plus utilisées sontArial, 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;

6

ArialHelveticaComic Sans MSGeorgiaTrebuchet MSVerdana

Manuel de Style Web


Le texte. Les caractères spéciaux

Évitez tous les caractères spéciaux si c'est possible. Ils peuvent interférer avec le code HTML. Par exemple, les traits d'union, guillemets, la césure automatique... faits avec le "Word", peuvent ajouter des caractères non standards qui ne sont pas bien montrés sur les navigateurs.

7

“ $ % &&& -----

#### @@@---______

{}[]

**********'''''

\\\\\\\\\\\

Manuel de Style Web


Le texte. L'alignement du texte

Lisibilité ou esthétique, 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 défaut à gauche et c'est très bien comme ça. Les paragraphes alignés à droite ou centrés diminuent la lisibilité et fatiguent la lecture. Ils conviennent bien pour des textes courts: titre, surtitre, légende, annotation.

Un texte justifié est un texte dont la longueur des lignes est identique pour un même paragraphe, à l'exception de la dernière ligne. Pour réaliser une telle disposition, le logiciel ajoute des espaces plus ou moins importants entre les lettres et entre les mots. Des études sérieuses ont démontré qu'un texte en drapeau est plus accessible à l'œil. Les fins de lignes servent de repère visuel. D'un point de vue esthétique, un alignement justifié donne un résultat plus agréable et une impression de plus grande régularité.

8

Manuel de Style Web


La justification en pratique

Voir: (http://www.tutoweb.be/typographie/texte-justifie/).

Il faut penser à la longueur de ligne.

Il devient donc extrêmement délicat 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

Manuel de Style Web

http://www.almassae.ma/

http://elpais.com/






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 différent d'un Times. Idem pour la longueur de ligne: de longues lignes obligent à augmenter l'interlignage pour faciliter le

saut de l'œil au début de la ligne suivante. D'autres facteurs influencent le choix de l'interlignage comme la graisse, la justification, le choix typographique, etc.


10

Manuel de Style Web



En résumé, le site web serait conçu et mis en œuvre par l’informaticien/ne avec une typographie, un interlignage, un alignement... par défaut. 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

Manuel de Style Web


Les liens

C'est important que notre page renvoie bien à d’autres pages, parce que cela augmente l’optimisation dans les moteurs de recherche, et nous collaborons aussi à partager l'information sur la toile.

D'habitude, les liens sont marqués avec une couleur différente, ou un soulignement, pour aider les lecteurs.

Nous pouvons écrire nos contenus en mettant les liens appropriés, mais il ne faut pas oublier qu’il n’est pas poli de mettre un lien brisé.

De plus, un texte plein de liens peut rompre l'homogénéité de la page, parce que les couleurs des liens peuvent distraire de la lecture.

12

Manuel de Style Web


Les barres de défilement

Il serait préférable qu’au moins la page principale se voie sur plein écran; si ce n’est pas possible, il faudrait qu’au moins la largeur ne soit pas plus grande. La barre de défilement horizontale est horrible.

13

Manuel de Style Web


Les couleurs

... ne sont pas les mêmes 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 précédemment.

14

Manuel de Style Web


Les images

Le poids de l'image

Les navigateurs doivent télécharger tous les fichiers de la web, et aussi les images. Habituellement un texte est moins lourd qu'une image. C'est pour ça qu’il n’est pas recommandé de mettre beaucoup d’images dans une même page.

Aussi, le poids de l'image est très important. Il dépendra de ce que le navigateur peut supporter, mais en général on téléchargera des images de moins de 1MB). Plus elles sont petites, mieux c’est. Pour faire les images petites, il faudra penser à la taille, à la résolution et au format)

15

Manuel de Style Web


Les formats de fichiers graphiques

• JPG comprime avec un taux de perte réglable des images codées en 24 Bits (Mode RVB). Le poids du fichier est inversement proportionnel au taux de compression, la qualité de l’image également). JPG ne permet aucune transparence. Ce format convient aux photographies et aux images comportant de nombreux effets de matière.

16

Manuel de Style Web


• PNG8 ou GIF compriment sans pertes des images codées en 8 bits (Mode Couleurs indexées ou Niveaux de gris). GIF est un format propriétaire tandis que PNG8 est un format libre prôné 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

Manuel de Style Web


• PNG24 comprime sans pertes des images codées en 24 Bits (Mode RVB). Il est un format libre prôné par le W3C et permet la transparence par degré. Il n’est 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 matière et de la transparence et est idéal pour importer en Flash des images Bitmap détourées (des silhouettes par ex.).

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

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

18

Manuel de Style Web




Le texte alternatif pour les images

Le texte alternatif c'est la façon dont le navigateur montre l'image si elle n’est pas chargé. Par exemple, les personnes aveugles "lisent" avec un lecteur tous les éléments 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 à l’esprit l’accessibilité, nous mettrons un texte alternatif qui décrive le mieux l'image. Par exemple: "Photo de la réunion de l'AMDH à Rabat", ou "Graphique de la structure d'un logiciel", ou "Logo de l’association..."

19

Manuel de Style Web


La taille et la résolution de l'image

Qu’est ce que c’est? La taille correspond à la largeur et la hauteur de votre image. La résolution d’une image correspond quant à elle au nombre de points par unité de surface de l’image, soit le rapport entre le nombre de pixels et les dimensions.

Pourquoi? Puisque votre image est destinée au web une résolution de 72 pixels par pouce suffit amplement. La taille dépend en revanche de l’utilisation 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-et-taille

20

Manuel de Style Web




21

Manuel de Style Web


Multimédia

(audio, diaporama, vidéo, animations)Pour insérer d’autres éléments multimédias que nous avons sur notre ordinateur, comme les audios, vidéos, diaporamas ou animations, on envisagera aussi le poids de l'élément.

Mais, d'habitude, on pourra intégrer ces éléments qui viennent d'un autre site web dans le nôtre. C'est la façon de faire la plus populaire, parce qu’ héberger des vidéos sur notre serveur peut être difficile. Par contre, nous pouvons les héberger sur des sites comme YouTube, Flickr, Scribd...

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

22

Manuel de Style Web

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


Références

• 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-son- site-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

Manuel de Style Web

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

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

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





http://www.tutoweb.be/


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



24

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.

comment faire un projet web? manuel d'style 13/15

Documents