1. JOURNEE SEMINAIRES CONCEPTION D’UN SITE WEB ATTRACTIF 18 OCTOBRE 2008 Patricia Demoulin

3. LA TOILE Internet, WWW, W3, World Wide Web, Web ... Internet est un média particulier Qui a son « langage » et son ‘vocabulaire’ On parle de “ PROTOCOLES “ de communication 2

5. SERVEUR D’HEBERGEMENT POSTE CLIENT (PC de l’internaute) Lecture de la page par le navigateur SCHEMA DE COMMUNICATION 4

11. Le gabarit (template en anglais) Le principe consiste à découper une page en grandes zones qui vont accueillir du contenu . Dans l’exemple qui suit, 4 zones sont identifiées : en-tête (a), colonne de gauche (b), corps de page (c) et colonne de droite (d) : 10

15. REDACTION.BE le site des spécialistes de l’information en ligne 14

16. Un peu d’ergonomie Les conclusions des recherches effectuées sur la lecture à l’écran permettent de déterminer où placer les éléments de contenu les plus importants (suivez les flèches) Sur Internet, on ne lit pas de la même manière que sur un support papier, et l’attention des internautes est difficile à capter. 15

19. Conseils de navigation http://www.navigation-web.com 18

20. Arborescence du site Le contenu du site dépend de son but, il ne sera pas le même sur un site « plaquette » (dans lequel on va parler de l’activité de l’entreprise, de ses produits et/ou services et qui contiendra une fiche contact) que sur un site « catalogue » (où l’accent sera mis sur les produits et sur la vente). L’arborescence doit être pensée en fonction du type de site et organisée par thème (la société, le produit, les chiffres, les événements …etc.) Structure trop profonde Structure trop linéaire Les structures à éviter 19

21. Une arborescence bien pensée et organisée clarifie le contenu et rend le site plus agréable à visiter Exemple d’arborescence par thème Accueil Produits Chiffres Marketing Mini FAQ / divers 20

30. Les générateurs automatiques de sites Aussi simple à utiliser que Google Page Creator , il se paye le luxe d'offrir d'avantage de possibilités de mise en page mais n'a pas la souplesse de son rival pour ce qui est des réglages de tailles et de couleurs des textes. Un système très simple à utiliser, gratuit et sans publicité. L'offre de Google inclut l'hébergement avec un espace disque de 100 Mo, ce qui est largement suffisant pour la plupart des sites « perso » mais il faut disposer d'un compte GMail 29

31. Les outils ‘WYSIWYG’ What You See Is What You Get Compétence Micro a publié un très bon manuel intitulé ‘Votre site web facile et gratuit avec NVU’. (En vente en grande surface et dans plusieurs magasins spécialisés en micro-informatique. Prix : 6,00 €) Un outil WYSIWYG vous permet de créer un site web personnalisé sans connaissance du langage XHTML ni des feuilles de style. Vous dessinez et remplissez vos pages comme dans un traitement de texte et l’outil génère les pages web. Dreamweaver (ADOBE) et NVU (Open Source) sont les deux outils les plus connus. NVU est un outil gratuit et relativement facile à utiliser. Pour le charger et l’installer sur votre ordinateur : www.geckozone.org/telechargement 30