Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc cecilia.carr

Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc cecilia.carriere@grenoble.iufm.fr page 1 caroline.schreiber@grenoble.iufm.fr C Cr ré éa at ti io on n d de e p pa ag ge es s w we eb b De nombreux documents existent sur le Web, pour vous guider dans la conception et la réalisation de pages Web en général, et de sites d'établissement en particulier. Voici une petite liste d'adresses utiles. Le présent document résume les quelques points principaux, mais ne dispense en aucun cas de consulter ces divers liens….. ________________________________________________________________________ "Créer un site web d'établissement" http://www.crdp.ac-grenoble.fr/utiliser/reseaux/technique/siteweb.htm "Construire son site web" http://www.uqtr.uquebec.ca/~lamyd/partage/construire_son_site_web/ "Créer et maintenir un site Web éducatif" http://db.ntic.org/nouvelles/nouvelles_vitrine_veille_frame.htf?q_id=279 "Guide de conception péda. et graphique d'un site éducatif" http://www.cpm.ulaval.ca/GUIDEW3EDUCATIF/ "Guide de la home page à l'usage de l'enseignant" http://members.tripod.com/~educaweb "Construire un site web à l'école, c'est possible !" http://www.cemis-saglac.qc.ca/cemis/webecole/webeco.htm Pour des conseils plus techniques d'ordre général : "Site AllHTML : cours complet de HTML, avec des conseils de créations de pages" http://www.allhtml.com/ "Site technosphère : son but est de faire comprendre les technologies du web" http://www.technosphere.tm.fr/ "Ecrire pour le Web, Jakob Nielsen" http://www.useit.com (et plus précisément "Writing for the web - be succinct" http://www.useit.com/alertbox/9703b.html, qui résume un article plus étoffé du même auteur, référence en matière de conception de sites Web, consultable à http://www.sun.com/980713/webwriting/) ''Site Mémoclic des conseils et méthodes pour la création de site’’ http://www.memoclic.com/site/ _________________________________________________________________ Avant de vous jeter sur votre éditeur HTML, vous devez savoir répondre aux questions suivantes : • Pourquoi créer des pages web ? Quel est le but ? • Quel est votre public cible (vous ne ferez pas du tout les mêmes pages selon que votre cible sera des élèves, des enseignants, des parents d'élèves… ou des entreprises privées équipées d'ordinateurs dernier cri !). • Comment allez-vous découper et organiser les informations à diffuser ? Sur une feuille de papier, dessinez l'arborescence de vos pages : à partir de votre page d'accueil, à quelle(s) autre(s) page(s) le visiteur va-t-il avoir accès ? et comment ? • Que contiendra chacune des pages en termes de textes, d'images, de photos,… et bien sûr en termes de navigation ? Ici, interviennent les notions de "charte graphique" du site et "d'ergonomie" de la consultation. • Qui maintiendra le site à jour, répondra aux mails ? Un site qui ne "vit" pas est très vite inutile. De manière générale, voici en vrac quelques règles d'usages à connaître : 1) La page d'accueil du site doit permettre au visiteur d'identifier "instantanément" l'identité du site, son contenu, ses nouveautés, ses auteurs… Elle doit donc comporter une date de mise à jour (au moins pour les rubriques nouvelles, qui doivent être clairement mises en avant), les références des auteurs (leur statut, leur mail, leurs objectifs…) ainsi que les principaux boutons de navigation pour se rendre aux différentes parties. Elle devrait se charger rapidement (en moins de 20 secondes, sous Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc cecilia.carriere@grenoble.iufm.fr page 2 caroline.schreiber@grenoble.iufm.fr peine de voir le visiteur cliquer ailleurs) et donc ne pas dépasser un poids de 70 Ko (ce qui interdit les grosses images, typiques des premiers sites d'école…). 2) La navigation doit être homogène, simple et claire : les mêmes boutons devront toujours se trouver aux même endroits, les pages devront toujours avoir le même "look" (d'où l'importance d'avoir réfléchi avant à une charte graphique du site). L'organisation de l'information doit avoir été pensée pour respecter la règle des 4 clics ("on ne doit pas avoir besoin de plus de 4 clics pour accéder à l'information recherchée"). Evitez également le soulignement (il est réservé aux hyperliens). 3) Le visiteur ne doit pas avoir le sentiment d'être perdu : il doit savoir où il se trouve à chaque instant, quels sont les moyens de "passer" à une autre partie. De même, les hyperliens doivent annoncer où ils envoient le visiteur avant que celui-ci n'ait cliqué (pas d'hyperliens ambigus, sans commentaires, …). Une carte du site, accessible depuis toutes les pages, s'impose souvent lorsque le site "grossit". 4) Les pages doivent être légères, tant sur le plan du poids que sur celui de l'esthétique. L'important est avant tout la lisibilité (éviter les fonds "moquettes", les contrastes texte/fonds trop faibles). La lisibilité dépend de la taille des caractères (attention, sous Mac, les polices sont affichées plus petites), du bon découpage du texte en paragraphes aérés, de la mise en relief des idées importantes (par le gras, la couleur, l'indentation…). Pour qu'une page reste lisible, le texte ne devrait pas en occuper plus 25% de la surface. 5) Une page Web n'est pas un document papier ! La lecture écran est 25% plus lente que la lecture papier : on ne lit pas à l'écran, on scanne. D'où l'importance à accorder • Aux titres et aux sous-titres • A la brièveté des textes (50% en moins par rapport à un équivalent papier) • A l'utilisation des listes à puces • A une syntaxe simple des phrases • A l'efficacité d'une écriture en pyramide inversée : donner en premier lieu l'idée principale (le résumé ou la conclusion) et ne détailler qu'ensuite • Au bon principe : pas plus d'une idée forte par paragraphe 6) L'hyper-textualité est un bon moyen de raccourcir, d'aller à l'essentiel, de découper et d'organiser un texte, mais il ne faut pas en abuser (sous peine de perdre l'utilisateur en quelques clics). Il faut penser à découper le contenu en fonction d'unités sémantiques, et ne pas "saucissonner" à l'aveugle (pensez aussi que le visiteur aura peut-être envie d'imprimer "une unité", sans être obligé de charger 10 petites pages web distinctes). 7) Sur le plan graphique, attention à : • Ne pas surcharger la page avec des graphiques inutiles (Gifs animés, photo du boss….) • Conserver une unité de couleur, de mise en page • Ne pas utiliser des images "lourdes" (ou prévenir le visiteur de leur poids avant qu'il ne clique dessus ; utiliser comme hyperliens des vignettes réduites, par exemple, pointant sur l'image "en grand" contenue dans un autre fichier) • Pour préserver l'unité visuelle, ne pas utiliser plus de 2 ou 3 polices différentes (idem pour les couleurs, les images de fond, …) Pages Web : Dreamweaver et quelques conseils généraux DreamWb2.doc cecilia.carriere@grenoble.iufm.fr page 3 caroline.schreiber@grenoble.iufm.fr 8) Attention au Copyright : contrairement à une idée assez répandue, les médias disponibles sur le web ne sont pas libres de droit (sauf quelques rares exceptions) ! En général, les sites qui "permettent" une utilisation pédagogique non commerciale de leur contenu le mentionnent explicitement dès la page d'accueil (pensez à le faire aussi, si c'est le cas du vôtre). 9) Sur le plan technique, utilisez des tableaux pour construire une mise en page cohérente. • Préférez les tableaux aux "cadres" (ou frames, en anglais) car ces derniers désorientent facilement le visiteur (lorsqu'il veut imprimer, créer un signet, …). • De même, préférez encore les tableaux aux "calques" (ou layers, en anglais) pour positionner vos objets correctement. Les calques ne sont en effet reconnus que par les navigateurs de version 4 ou supérieure, et engendrent de toute façon, même pour les navigateurs récents, des problèmes insurmontables lorsqu'on les mélange avec du texte (surtout si l'on veut être "lu" par un Mac et par un PC) ou lorsqu'on redimensionne la fenêtre de Netscape 4 (Bug !). 10) Dernier conseil technique : pensez à la machine qu'utilise votre visiteur (son écran, sa plateforme, Mac ou PC, et son navigateur). • L'affichage de votre page va dépendre de la taille du moniteur du visiteur. Il y a deux ans, il fallait tabler sur des écrans 14 pouces, donc travailler la mise en page pour des écrans de taille 640x480 pixels (en décomptant les boutons de navigation, les barres du navigateur,… il fallait considérer une surface utile de 630x420 pixels). Depuis cette année et la hausse des ventes d'ordinateurs avec écran 15 pouces (800x600), on peut augmenter "raisonnablement" la taille des pages web jusqu'à une résolution maximum de 760 x 420 pixels. • Les navigateurs n'ont pas exactement la même manière d'interpréter le langage HTML (et le Javascript), et votre visiteur n'a peut-être pas la dernière version même si vous l'avez (Internet Explorer 5 ou Netscape 4.7). Une seule règle : si vous voulez toucher une cible large, faites des tests de vos pages sur plusieurs navigateurs, de plusieurs générations, et sur plusieurs plateformes ! R Ra ap pp pe el l s su ur r l la a n no ot ti io on n d de e " "p pa ag ge e w we eb b" " Est-ce que c'est ce qui est contenu dans un fichier ? Non, puisque qu'une page web peut contenir du texte et des images, et les images constituent toujours un fichier informatique séparé du fichier "source". Une page web, c'est ce qui se charge sur votre écran en 1 clic de souris (1 page = 1 nœud d'info). On peut la consulter en utilisant les ascenseurs horizontaux et verticaux. A l'impression, 1 page web peut équivaloir à 15 pages papier. uploads/s1/ cours-support-fr-comment-creer-un-site-internet-avec-dreamweaver.pdf