2 La réflexion Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le site web est un outil qui sert à communiquer. Avant de le réaliser, il est donc essentiel de connaître le public visé car ce dernier donnera l’orientation de la charte graphique et le ton du contenu. Si vous vous adressez à une tranche 15-24 ans avec la musique rock comme thème, vous aurez un ton familier, avec le vocabulaire adéquat, pour créer un lien immédiat avec ce public. Le design d’un site parle immédiatement au visiteur, mais il est le résultat d’un travail en amont. Le site est donc au cœur d’un projet et le projet ne se construit pas au fur et à mesure de l’élaboration du site. Ce projet doit se voir au premier coup d’œil, sur la page d’accueil. Internet relie des millions de sites ; il est donc nécessaire de se démarquer des autres sites par une intention originale et annoncer immédiatement le contenu et le ton. 2.1 Les types de sites Il existe plusieurs types de sites selon l’objectif visé. Ils demandent une charte graphique différente. Par exemple, le site vitrine est avant tout un travail de graphiste. Le contenu doit être court et efficace, alors que le portail communautaire sera davantage centré sur l’interactivité. Les sites vitrine ou sites plaquette Les sites vitrine ou sites plaquette ont comme objectif de présenter une société sur Internet pour des internautes qui ne connaissent pas la société. Ils contiennent quelques pages présentant les produits et services, la situation géographique, une page contact, des points pratiques (heures d’ouverture, plan d’accès…). Cette catégorie de sites reprend souvent le graphisme de la plaquette de la société et leur interactivité est restreinte à la page contact avec éventuellement un formulaire. Les internautes viennent y chercher une information précise s’ils connais- sent l’entreprise. Ils peuvent découvrir le site à travers un moteur de recherche parce qu’ils recherchent un produit ou un service local. Le site n’est pas destiné à apporter toutes les informations mais à donner envie au visiteur d’en savoir plus en téléphonant ou en rendant visite à l’entreprise. Le design doit être agréable, clair, avec des polices faciles à lire, une 2 La réflexion 452 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. navigation classique et un accès simple aux pages. www.nexusdev.com constitue un exemple de site vitrine bien conçu et complet. Il est mis à jour fréquemment et constitue une bonne vitrine pour la société Nexus Développement. Les sites catalogue Le premier objectif d’un site catalogue est d’éviter, trivialement, l’envoi d’un catalogue par la poste. L’autre objectif est que le chaland voit immédiatement les produits pour un achat d’impulsion. L’article ne sera pas acheté sur le site, mais le visiteur pourra se faire une idée et se déplacer. Tous les échanges s’accélèrent et le consommateur est sensible à la frustration, qui a comme effet qu’il ira voir la concurrence plutôt que d’attendre. m Figure 2.1 : Le site de Nexus Développement Les types de sites Double Poche CSS • 453 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Ces sites épousent la mise en page du catalogue de produits du magasin. Parfois, comme sur www.feuvert.fr, les pages sont feuilletées comme un catalogue papier. Le site catalogue ne permet pas d’acheter un produit en ligne. Il doit être ergonomique pour que le produit soit facile à trouver et ne nécessite pas de feuilleter tout le catalogue. Les pages ont parfois tendance à être lourdes, ce qui a pour effet d’agacer le visiteur. Il est judicieux, en plus de classer les produits en de nombreuses catégories, d’insérer un moteur de recherche avec plusieurs modes de recherche (mots-clés, catégorie, référence produit, nom du produit…). La documentation des articles peut être présente sur une page web ou un document à télécharger. Une foire aux questions (FAQ), avec un formulaire pour le SAV, pourront être proposés. m Figure 2.2 : Le site de Feu Vert 2 La réflexion 454 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Les sites d’information Les sites d’information approfondissent un thème et diffusant des infor- mations avec une visée professionnelle. Les pages doivent être dé- pouillées pour en faciliter la lecture, avec un beau graphisme restant sobre. Le design est là pour souligner le contenu mais c’est le contenu qui importe le plus. Les liens de navigation sont explicites. Un exemple de beau site d’information sur la typographie est www.planete- typographie.com. Les sites marchands Les sites marchands vendent directement leurs produits sur Internet avec la possibilité de payer en ligne ou par un autre moyen. Le design dépend du type de produit vendu et de la ligne de marketing suivie. Un site qui construit toute sa publicité sur les prix va mettre en avant les promotions sur sa page d’accueil et tenir au courant les inscrits par un mailing m Figure 2.3 : Le site Planète Typographie Les types de sites Double Poche CSS • 455 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. régulier, comme le fait www.bexley.fr. Un site comme www .outilssolaires.com, qui présente des produits dans une niche et sans vraie concurrence, mettra plutôt les nouveautés en avant et, parfois, se rapprochera d’un portail communautaire dans la mesure où cette commu- nication entre les membres génère du chiffre d’affaires ou tout simplement par passion. Les sites institutionnels Les sites institutionnels présentent l’organisation et leurs valeurs fonda- trices. Ils ont un souci de clarté. La page d’accueil affiche généralement les dernières nouvelles, avec une colonne de liens sur la gauche qui mènent aux ressources sur l’organisation interne d’une part, et aux ressources diverses sur leur principal thème d’autre part. Le site de l’Unesco (http://portal.unesco.org/fr) en est un exemple. m Figure 2.4 : Le site Outils Solaires 2 La réflexion 456 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Les sites personnels Ces sites sont réalisés par des amateurs, poussés par leur passion pour un sujet. Ils sont multiformes, divers et changeants. C’est le terrain d’expé- rimentation des développeurs en herbe. Certaines de ces adresses, au fil des métamorphoses, deviennent des sites d’information ou des sites communautaires. Par définition, ils n’ont pas de forme définie et permet- tent la plus grande originalité, à l’image de http://lesmains.free.fr. m Figure 2.5 : Le site de l’Unesco m Figure 2.6 : Le site Les Mains Les types de sites Double Poche CSS • 457 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Les sites communautaires Les sites communautaires sont des portails qui permettent à des internau- tes de partager un intérêt commun, avec beaucoup d’interactivité. Ils sont faits par les internautes eux-mêmes, le webmaster n’étant là que pour animer et lancer une dynamique. Leur ambition est de réunir le maximum de passionnés et de devenir incontournables sur le sujet traité, comme Wikipédia http://fr.wikipedia.org/wiki/Accueil ou encore www.agoravox.fr. m Figure 2.7 : Le site Agoravox m Figure 2.8 : Le site Wikipédia 2 La réflexion 458 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Les sites intranet et les sites extranet Les sites intranet sont accessibles de l’intérieur d’une entreprise ou d’une direction. Ils ont pour objet la mise à disposition et le partage d’informations professionnelles. Leurs pendants sont les sites extranet sur le Web qui, grâce à une authentification, permettent à des salariés d’une entreprise d’accéder à une interface personnalisée et d’administrer des informations. Ils peuvent cibler les fournisseurs, les acheteurs, les commerciaux itinérants, etc. 2.2 Quelques règles générales Le site doit être centré sur l’utilisateur visé. Ses fonctions vitales (navigation, contenu…) doivent être visibles pour toutes les configura- tions. L’internaute a peu de patience et vous le perdrez s’il fait face aux situations suivantes : ¶ Il doit chercher où cliquer. ¶ Il ne voit pas dès la première page le thème du site au-delà de son titre. ¶ Les caractères sont petits et il ne peut les agrandir avec son navigateur. ¶ Les couleurs parasitent une bonne lecture. ¶ Le site est conçu avec des couleurs fluorescentes et dissonantes. ¶ Une partie de l’écran n’est pas accessible. ¶ La page est trop lourde à charger ou, pire, fait planter le navigateur. ¶ La page demande une extension du navigateur que le visiteur ne possède pas. Le concepteur du site se met à la place du visiteur lambda. L’ordinateur et la technique doivent se faire oublier pour que l’internaute se plonge dans le site et vive une vraie expérience qui lui donnera envie de revenir. Nous allons prendre en exemple la réalisation d’un site pour un gîte rural. 2.3 Le site Le but du site des Jardins d’Écoute S’il Pleut est de se faire connaître, de constituer un repère sur Internet pour les visiteurs qui le connaissent déjà et enfin d’exposer la philosophie de l’entreprise, qui développe trois pôles : Le site Double Poche CSS • 459 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ¶ les gîtes ; ¶ la pépinière ; ¶ le conseil. La difficulté consiste à réunir ces trois activités sans qu’il n’y ait de hiatus entre elles. Le but est donc de trouver une charte homogène, qui différencie cependant les trois pôles. La gageure est ici de faire en sorte que chaque partie du site trouve son public, ou plutôt que chaque public identifie bien ce qu’il vient chercher sur le site. 2.4 Le public À qui le site est-il destiné ? Il s’adresse aux curieux, aux personnes indécises quant à leurs prochaines vacances, qui cherchent à passer un séjour convivial, au calme. Il doit contenir de nombreuses photos et mettre en valeur le gîte, l’accueil et les activités possibles dans les environs. Un m Figure 2.9 : Écoute S’il Pleut 2 La réflexion 460 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... ; ả ; ả ; ả ; ả ; ả ; ả ả ả ả ả ả ả ả ả NOFOLLOW : ajoute cette... ColorZilla Colourificator Colouricator est une petite palette pour PC, dotộe dune pipette qui permet de recueillir nimporte quelle couleur affichộe lộcran Les couleurs sont codộes en RVB et restituộes en hexadộcimal ou en pourcentage ou en valeurs de rouge, vert et bleu jusqu 255 La couleur peut ờtre ensuite copiộe dans le Presse-papiers via un bouton Cette palette peut ờtre conservộe au-dessus des autres... fournir une rộponse exhaustive et pertinente toute requờte de linternaute an de dộliser ce dernier, de sassurer quil revienne faire ses recherches et visualise par la mờme des encarts de publicitộ Il est donc important de bien dộnir le thốme et les sous-thốmes et de les reporter dans les mots-clộs et la description du site Les balises meta Voici une liste des nombreuses balises meta Elles ne sont pas toutes... NOINDEX : supprime cette page du moteur de recherche All Content : ajoute toutes les pages au moteur de recherche ; ; ; ; ; ; ; ; ; Les balises meta les plus utiles sont keywords et description, qui sont lues par les robots et utilisộes par les moteurs pour rộpondre une recherche Le rang dộpend de la pertinence,... gộnộrateurs de mộtatags existent sur Internet (www.toulouserenaissance.net/c_outils/c_meta-tag_test.htm ou www referencement-fr.com/generateur_metatags par exemple) m Figure 2.33 : Gộnộrateur de mộtatags Les mots-clộs comme dộcor La bonne idộe pour ờtre bien rộfộrencộ est de mettre sur la page une boợte avec des mots-clộs, de sorte quils gurent dans la page elle-mờme Cette boợte peut ờtre aussi un bon moyen... to remove this watermark Internet na rien inventộ Dans le rộpertoire secret, mettez les chiers qui ne regardent personne, mais qui doivent vous ờtre accessibles sur le Web Aucun lien ny mốne et ils sont sộcurisộs par le chier robots.txt situộ dans le rộpertoire www ou htdocs ou public_html m Figure 2.36 : Arborescence Il vaut mieux ne pas y mettre des chiers trop secrets car certains robots ne respectent... compris de la fenờtre active Ce petit logiciel est extrờmement pratique Il est tộlộchargeable sur http://colourificator.sitekit.net 466 Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Choisir les outils b Figure 2.16 : Colouricator EclipsePalette EclipsePalette est lộquivalent de Colouricator, avec une interface moins ergonomique et moins pratique, mais avec... moins ergonomique et moins pratique, mais avec la possibilitộ dộclaircir ou de foncer la couleur rộcoltộe par la pipette Un mộlangeur permet de crộer un dộgradộ entre deux couleurs EclipsePalette est tộlộchargeable sur www.greeneclipsesoftware.com/eclipsepalette.html b Figure 2.17 : EclipsePalette Color Schemer Color Schemer est un logiciel qui se sert des lois de lharmonie des couleurs pour proposer partir... org/extensions/moreinfo.php?id=60) est un outil intộressant et indispensable Il permet de voir les coulisses des pages web et, entre autres, davoir un accốs direct aux feuilles de style Non seulement les styles deviennent visibles mais ils sont, en plus, modiables, ce qui est intộressant Cette derniốre fonctionnalitộ est nộcessaire car le dộveloppeur peut voir comment une page a ộtộ conỗue, modier le code et voir instantanộment le . site est donc au cœur d’un projet et le projet ne se construit pas au fur et à mesure de l’élaboration du site. Ce projet doit se voir au premier coup. sites intranet et les sites extranet Les sites intranet sont accessibles de l’intérieur d’une entreprise ou d’une direction. Ils ont pour objet la mise