Le séminaire du 18 octobre 2008 aborde la conception d'un site web attractif, en détaillant les étapes essentielles telles que l'architecture, la charte graphique, et les protocoles de communication. Il souligne l'importance de l'ergonomie, de la navigation, et présente les outils et techniques liés au Web 2.0 pour interagir avec les utilisateurs. Enfin, des conseils pratiques sont offerts pour éviter les erreurs courantes et améliorer l'expérience utilisateur.

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

2. INTERNET Tour de toile – rappel historique Communication et protocoles BATISSEZ VOTRE SITE Etapes Charte graphique et structure du contenu Ergonomie et conseils d’experts Rédaction et navigation : comment, pourquoi Le web 2.0 : une révolution ! LIENS ET OUTILS Outils - ‘logiciels libres’ - Quelques sites à tagger Les solutions d’hébergement – Mine et Hostbasket CONCLUSION & MOT DE LA FIN 1

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

4. HISTOIRE DU WEB 1972 : Première démonstration d' Arpanet – réseau lancé par le pentagone en 1967 1979 : Compuserve et le courrier électronique 1989 : Tim Berners-Lee du CERN invente le terme World Wide Web 1994 : Yahoo et les premières images 1996 : Netscape et les premières animations 1998 : Apparition du XML et de Google 1999 : Apparition du format rss version 0.90 2000 : XHTML 2001 : Wikipédia et le début du participatif 2004 : Firefox et le retour de l'alternative à Microsoft 2006 : Explosion du haut débit, de la vidéo et du Web 2.0 2007 : Explosion des réseaux sociaux 3

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

6. Quelques notions de protocoles Internet utilise un ensemble de protocoles regroupés sous le terme " TCP-IP " ( T ransmission C ontrol P rotocol/ I nternet P rotocol) Voici une liste partielle des protocoles qui sont utilisés : HTTP (Hyper Texte Transfert Protocol) : c'est celui qu'on utilise pour consulter les pages web FTP (File Transfert Protocol) : protocole utilisé pour transférer des fichiers d’un ordinateur à un autre (par exemple, pour ‘charger’ un site sur Internet) SMTP (Simple Mail Transfert Protocol) : protocole utilisé pour envoyer des mails POP : C'est le protocole utilisé pour recevoir des mails IP (internet Protocol) : L'adresse IP identifie un périphérique réseau ou un ordinateur distant de manière unique (exemple : 192.168.2.1 ou 127.0.0.0). Lorsque vous surfez sur Internet, votre FAI attribue dynamiquement une adresse particulière à votre ordinateurà partir d’une liste d’adresses IP lui appartenant 5

7. BATISSEZ VOTRE SITE CRITERES DE BASE « La conception d'un site utile et performant demande non seulement que les contenus et services répondent aux besoins des visiteurs, mais surtout que l'ergonomie et la navigation soient pensées afin de les rendre facilement accessibles aux visiteurs finaux. » Les trois critères de base sont : L’efficacité : permettre aux utilisateurs d’atteindre le résultat prévu. L’efficience : temps minimal requis pour atteindre ce résultat. La satisfaction : confort et évaluation positive de l’interaction pour et par l’utilisateur. Un site web est un produit évolutif. Il faut donc : démarrer le site modestement ; le faire évoluer progressivement ; le maintenir en permanence 6

8. Ne brûlez pas les étapes ! Créer un site web nécessite un minimum d'organisation. Faites un plan ! Décrivez méthodiquement, sur papier, l’objectif, le contenu et l’apparence de votre site. Analysez les sites “concurrents” Établissez une charte graphique : identité visuelle, logo, gabarit(s), positionnement des textes et des images Définissez votre public cible et ses attentes Structurez la présentation et le contenu de votre futur site : arborescence du site (navigation), pages, thèmes et catégories d’informations La navigation est un élément majeur de structuration : menus, enchaînement des pages, retour à l’accueil, liens internes Ecrivez le « story-board » : cette étape consiste à définir quel contenu va sur quelle page Planifiez des mises à jour régulières, votre site doit être ‘ vivant ’ ! 7

9. La charte graphique Votre logo Vos couleurs : une bonne charte comporte 3 à 4 couleurs de base avec une seule couleur dominante. Votre site sera décliné dans les nuances de ces couleurs les polices de caractères utilisées afin de créer différents niveaux de textes et d'apporter un bon confort de lecture. La typographie est l'une des composantes essentielles de l'univers graphique représentatif d’une entreprise L’apparence générale et la position des différents éléments sur les différentes pages du site. Le but est de choisir un gabarit commun par page ou groupe de pages (principales, secondaires …etc) Pour se démarquer, votre site doit avoir une identité et cette identité doit être reconnue rapidement par les visiteurs sur base d'éléments clefs définis dans une CHARTE GRAPHIQUE : 8

10. La charte graphique Lors de l’établissement de votre charte graphique, tenez compte des points suivants : Examinez les couleurs et les standards utilisés par les entreprises actives dans le même secteur que le vôtre Préférez un fond de page clair Utilisez des polices dites « standard » (Arial, Helvetica, Times new roman …) afin que vos textes s’affichent normalement sur la majorité des ordinateurs et limitez le nombre de polices utilisées à 3 ! Limitez les photos et autres illustrations à ce qui est "utile" 9

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

12. CONSEILS D’EXPERT Selon Jakob Nielsen, expert en ergonomie de sites Web, les facteurs de succès d'un site sont : La facilité d'apprentissage et de compréhension: t out nouveau visiteur doit comprendre rapidement le fonctionnement du site. (présence d’un menu générique) L'efficacité d'utilisation: le visiteur doit trouver rapidement l'information qu'il cherche (règle des 3 clics) L'utilisation sans erreur: le visiteur doit atteindre l'objectif visé sans effectuer de « fausses manœuvres » . (présence d’éléments de navigation sur toutes les pages , rubriques d’aide) La satisfaction: l'appréciation subjective du site par le visiteur est conditionnée par les aspects esthétiques ainsi que par les attributs précédents 11

13. Synthèse du contenu Quels sont les buts poursuivis au travers de votre site web ? Etre présent sur Internet ? Créer et valoriser votre image de marque ? Générer des contacts ? Des ventes ? Montrer vos produits ? Informer vos actionnaires ? 12

14. Le public cible Quel(s) public(s) visez-vous ? Définissez les attentes de chacun d'eux. (exemple : actionnaires => chiffre d’affaires, graphiques financiers, valeur de l’action …) Pourquoi vient-il visiter le site ? Que cherche-t-il ? Quelles actions aimerait-il pouvoir effectuer sur le site, et pour obtenir quoi ? Pourquoi reviendra-t-il ? A quelle fréquence ? 13

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

17. Plan des pages Quelles informations faire figurer sur chaque page ? contenu [plan, idées, liens…] mais aussi formats [textes, images…] Organiser les rubriques en fonction des contenus Prévoir les rubriques à venir, même si le contenu n’est pas encore disponible Construire un organigramme du site Que mettre sur la page d’accueil ? (logo, nom du site, infos de contact, sommaire, dernières nouvelles…) 16

18. Agencement de page Une page ne doit être ni trop longue, ni trop courte. Si les pages sont trop courtes : l'internaute reçoit l’ information de façon hachée. Si les pages sont trop longues : leur temps de chargement devient prohibitif. La largeur des pages doit être adaptée à la taille d’affichage de l’écran. Le défilement horizontal doit être proscrit, nous ne sommes pas habitués à lire des textes larges. 17

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

22. La mise en page La mise en page doit être conçue comme une pyramide. Cette pyramide va fonctionner comme un entonnoir qui va "aspirer" les lecteurs dans vos pages. Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant. Le chapeau : Situé sous le titre, ce texte court (en caractère gras ou de taille moyenne) permet aux lecteurs de vérifier que la page correspond bien à leurs attentes. Il doit résumer l'essentiel de votre page en 2 à 5 lignes. Ce texte doit donner envie à vos visiteurs de lire le reste du texte ! Les paragraphes : Vous devez développer une seule idée par paragraphe. Une fois votre texte terminé, demandez-vous si les paragraphes ne pourraient pas être réordonnés de façon plus logique. N'hésitez pas à supprimer les paragraphes qui n'apportent rien à votre propos. Les sous-titres : Capter l'attention, c'est bien. La conserver, c'est mieux. Le sous-titre vous permet de rattraper un lecteur qui allait quitter la page. 21

23. Respectez les standards Vos visiteurs sont habitués à certains mécanismes, ne les perturbez pas. Ils doivent se sentir comme chez eux ! Pas de textes soulignés : sur le web, un mot ou une expression soulignée est un lien. N'utilisez jamais le soulignement dans un autre but. Jouez plutôt sur la couleur, sur la taille ou sur le gras et l'italique. Du texte lisible : ce conseil à l'air stupide. On voit malheureusement beaucoup de sites qui proposent du texte jaune sur fond gris, par exemple. Le texte le plus lisible et le moins fatigant est le texte noir sur fond blanc. Vous pouvez vous éloigner légèrement de ce standard à condition de toujours garder un bon contraste entre le fond et le texte. Une taille de texte confortable : beaucoup d'internautes ont une vue basse ou moyenne. Les sites utilisant des caractères microscopiques sont fatiguants. Des titres de page : Où suis-je ? D'où viens-je ? Où vais-je ? Evitez à vos visiteurs de se perdre dans ces questions philosophiques ! Donnez leur des repères ! Des sous-titres, une mise en page aérée : Segmentez vos informations en chapitres clairement identifiés. Vos visiteurs doivent pouvoir choisir ce qu'ils veulent lire ou zapper. 22

24. Quelques Jokers Ces « attrape-lecteurs » vous permettent de gagner quelques points d'audimat : Les images : Illustratives, explicatives, humoristiques, surprenantes : tous les coups sont permis !!! Vous devez intégrer au moins une image par page pour reposer l'oeil de vos lecteurs et capter leur intérêt. Attention au poids !!! Vous devrez trouver des images de petites dimensions parfaitement lisibles. Plus une image est simple, moins elle "pèsera" lourd et mieux elle jouera son rôle d'illustration. Les légendes d'images : Si votre image est illustrative, il faut absolument lui attribuer une légende ! Les légendes des belles images sont lues même par les visiteurs pressés ! Les encadrés : Un petit texte amusant ou anecdotique, ou un complément d'information peuvent être ajoutés à votre page sous la forme d'un encadré. L'encadré peut éventuellement avoir un fond légèrement plus foncé que le reste de la page. Cela permet de "casser" les mises en page trop rigides et apporte un côté un peu "fun" aux pages sérieuses. 23

25. LES 10 ERREURS A EVITER ! Les images et/ou les animations en nombre excessif Les fautes d'orthographe et de syntaxe(utilisez les correcteurs !) La musique (sauf si vous permettez au visiteur de couper le son) Les compteurs de visites (visibles) Les popup's et la pub intempestive Les phrases à rallonge, les pages trop grandes, un site surchargé Les pages “en construction” Les liens ‘morts’ Les entrées en flash (sauf si vous permettez au visiteur de les ‘passer’) La copie ou la reproduction d’images, d’articles ou de sources de données qui ne sont pas ‘libres de droit’ (respect des droits d’auteurs et des lois sur la ‘propriété intellectuelle’) 24

26. Le WEB 2.0 : une révolution ! Un concept « simple » synonyme de participatif et de collaboratif. Les contenus sont coproduits par les utilisateurs qui peuvent également enrichir le contenu des autres. Une technologie révolutionnaire ! RIA – Rich Internet Application Les RIA favorisent la fusion des logiciels traditionnels et des logiciels client-serveur de type Internet. La dimension interactive et la vitesse d'exécution sont particulièrement soignées dans ces applications web. Des évolutions techniques: Permettant d'augmenter de manière très sensible l'ergonomie des sites web. Augmentant la participation des usagers à la construction des contenus. 25

27. Les véritables apports du Web 2.0 Une meilleure ergonomie des interfaces Un accroissement des possibilités de publication, de partage et de collaboration Le développement de plateformes de services en ligne Le mixage de différentes plateformes ... Partage de contenus (vidéos, photographies, signets, documents bureautiques...)‏ Participation active à des contenus: blogosphère, wikis (wikipédia)‏, réseaux (Facebook, Del.icio.us), groupes (Google, Yahoo), vidéothèques (YouTube), albums photos (Picasa, Flickr) ... Des outils de veille partagée (fil RSS)‏ Travail collaboratif (mutualisation de documents de travail)‏ 26

28. Comment utiliser le WEB 2.0 De plus en plus de sociétés profitent des apports du Web 2.0 pour faire du Marketing par le biais de la publication et du partage de contenu sur des réseaux et des sites d’hébergement de vidéos ou d’albums photos. Ces plateformes Web, conviviales et ludiques, attirent beaucoup de public. N’hésitez pas à les utiliser pour vous faire connaître ! 27

29. Plateforme blog sans pub http://www.zeblog.com http://wordpress.com http://www.over-blog.com Plateforme de création de site http://www.weebly.com http://www.webzinemaker.com CMS (Content Management System) http://www.freeguppy.org/ http://www.spip.net/fr_rubrique91.html LIENS ET OUTILS UTILES 28

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

32. MINE.BE et hostbasket L’offre gratuite LJE Grâce à Mine , la marque jeune de Fortis , et Hostbasket, fournisseur d'hébergements, les jeunes entrepreneurs peuvent bénéficier d'un site Web gratuit pour leur mini-entreprise, pendant un an ! Les informations concernant la procédure d’inscription sont disponibles sur le site des Jeunes Entreprises de Belgique ( www.lesjeunesentreprises.be ) Pour en bénéficier, prenez contact avec Alain en lui envoyant un courriel à l'adresse : [email_address] Vous devez obligatoirement passer par les services de l’a.s.b.l. Les Jeunes Entreprises. Dans le cas contraire, le service vous sera facturé ! 31

33. Pour créer un site attrayant, il vous faut juste : Des idées, de la passion et du temps De la curiosité : recherche et consultation de sites spécialisés Des notions de base en XHTML et en CSS. Un logiciel pour créer votre site. Un logiciel de transfert ftp. Un espace pour héberger votre site. CONCLUSION Il existe dans le monde du ‘LIBRE’ quantité de logiciels, de ‘scripts’ et de sites consacrés à la conception, à la création et à la maintenance de site Web. Utilisez les moteurs de recherche web pour les trouver et vous informer. 32

34. MOT DE LA FIN Il est bon de connaître les conventions et les normes, non pas pour les appliquer systématiquement, mais pour être conscient de leur intérêt et de ce qu'on risque à ne pas les respecter ! 33