Embed Size (px)
Citation preview
La conception Web,de l’ébauche à la publication
Haute Ecole de la Ville de Liège (catégorie technique)
Institut Supérieur d’Enseignement Technologique
Rue Sohet, 21 — 4000 Liège
i
i
Travail de fin d’étude présenté par Massinissa Belkassam
En vue de l’obtention du diplôme de Bachelier enTechniques graphiques, finalité Techniques de l’édition
Année académique 2006 — 2007
La conception Web,de l’ébauche à la publication
Haute Ecole de la Ville de Liège (catégorie technique)
Institut Supérieur d’Enseignement Technologique
Rue Sohet, 21 — 4000 Liège
i
i
Travail de fin d’étude présenté par Massinissa Belkassam
En vue de l’obtention du diplôme de Bachelier enTechniques graphiques, finalité Techniques de l’édition
Année académique 2006 — 2007
5
Remerciements
Je tiens à remercier tout particulièrement mes parents et monsieurDidier Orban pour avoir effectué la correction de ce travail et fait partde leurs critiques.
Je remercie également mes professeurs pour les conseils qu’ils m’ontprodigués tout au long de mes études et qui ont contribué à laréalisation de ce mémoire ; ainsi qu’à toutes les personnes qui m’ont deprès ou de loin apporté leur soutien tout au long de mon projet.
6
Introduction
J’ai choisi ce sujet, parce que je suis un passionné d’informatique etparticulièrement du Web.
De plus, ce média d’actualité a connu, ces dernières années, unecroissance rapide et devient de plus en plus incontournable dans la viecourante.
En effet, de l’institution financière à l’ASBL, en passant par le particulier,tous sont représentés sur le Web.
Le succès grandissant de ce médium a profondément modifié notreconception de l’information, la preuve en est que la presse écrite a dû,ses dernières années, se repenser afin de continuer à toucher un vastepublic.
Un site Web peut être un outil formidable, encore faut-il l’utiliser à bonescient. Il est donc important d’avoir une bonne méthode de travailpour obtenir de bons résultats.
Ne pas faire partie de la révolution du Web serait se couper du nouveaumonde de la communication.
Mon mémoire sera axé autour de trois grandes idées. La premièretraitera de la conception, la seconde de la réalisation graphique et ladernière la programmation.
7
Avant de commencer
Bref historique
Le début des réseauxL’idée de réseaux qui permettraient aux utilisateurs d’échanger del’information fit son apparition dans les années 50 ; les technologies,quant à elles, furent mises au point dans le courant des années 60.
Les premiers réseaux étaient très rudimentaires ; il n’était possible deconnecter que deux ordinateurs entre eux.
Pour exemple, une telle structure permit à des chercheurs de Californied’être reliés à la Pennsylvanie afin de vérifier des théorèmesmathématiques.
Très rapidement, ces réseaux informatiques prirent de l’importance, sibien que des entreprises privées créèrent les leurs, suivies desuniversités et bibliothèques. En quelques années, le phénomènetoucha toute le monde entier.
8
La naissance du WebL’idée d’hypertexte voit peu à peu le jour. A partir de 1989, Tim Berners-Lee, chercheur au CERN, soutenu par son collègue Robert Caillau(chercheur belge), tente de proposer son aide à l’élaboration d’unsystème de navigation — sans succès.
Il décide donc de travailler sur son propre projet et, en 1991, rend publicson application qui aura un succès mondial. On le considère commel’inventeur du World Wide Web. Il développera également lestechnologies connexes, notamment l’« HTTP », qui permet auxordinateurs d’échanger des données, et le langage HTML, qui permetde créer des documents écrits.
Le World Wilde Web Consortium (W3C) et l’Initiative WAI (WebAccessibility Initiative) voient le jour en 1994. Son directeur n’est autreque Tim Berners Lee.
L’objectif de cette organisation est de surveiller l’évolution du Web.
Cette instance regroupe différents acteurs du secteur : organisationsdiverses, industries de l’informatique, scientifiques, etc., leur but étantde mettre en œuvre les normes relatives au Web afin de donner unecohérence aux réseaux.
Tim Berners-Lee l’inventeur du Web
9
Le WebLes liens hypertextes
Il s’agit de textes ou d’images qui, lorsque qu’ils sont « cliqués » à l’aidede la souris, donnent accès à d’autres informations.
Les liens permettent d’aller de document en document, et de site ensite sans que l’utilisateur ne soit obligé de taper l’adresse dans unnavigateur.
Les navigateurs graphiques
Internet ExplorerLe navigateur le plus répandu est Internet Explorer qui occupe 80% dumarché.
Son succès est dû au fait qu’il est directement intégré au systèmed’exploitation Windows. Il est également disponible pour Mac OS.
Depuis la dernière version, on peut constater que l’interface a évolué enprenant le calque sur Firefox.
FirefoxFirefox, le logiciel le plus récent, a fait son apparition il y a 5 ans. Il est unsérieux concurrent d’Internet Explorer.
Le navigateur Internet Exploreraffichant la page d’accueil de Google.
10
Il permet l’ajout de fonctionnalités à la carte telles que des outils derecherche, des logiciels de dialogue en direct,… on peut donc lepersonnaliser entièrement (ainsi que son interface).
De plus, il respecte les standards et supporte déjà certainestechnologies qui sont encore en cours de développement. C’est le seulnavigateur compatible avec tous les systèmes d’exploitation et il estfréquemment mis à jour ce qui en fait un très bon outil pour tester etaméliorer un site.
Pour toutes ces raisons, Firefox est devenu une référence pour laconception Web.
SafariCe logiciel est développé par Apple, et est fourni avec le systèmed’exploitation Mac OS. Il propose approximativement les mêmesfonctionnalités que Firefox.
Cependant, bien que rapide, il arrive souvent que les sites ne s’yaffichent pas correctement.
OpéraCe dernier est moins connu du public. Pourtant il n’a rien à envier à sesconcurrents, vu qu’il le seul navigateur à afficher les sites correctement.De plus, il intègre les « widgets » inspiré de Mac OS.
Les « widgets » sont de petites applications qui sont exécutées à partirdu navigateur et qui se placent sur le bureau.
Opéra intègre un synthétiseur vocal ( en anglais uniquement).
Le navigateur Opéra
11
Les navigateurs textuelsIl existe sur le marché des navigateurs n’affichant que le texte.
Ce type de navigateur ne lit que le texte et n’interprète pas laprogrammation ce qui permet un affichage rapide des informations.
Le plus connu est Lynx. Il permet de naviguer avec le clavier en tapantdes commandes. Les flèches du clavier permettant de passer d’un lienhypertexte à un autre. Il permet également une intégration aisée d’unsynthétiseur vocal, c’est la raison pour laquelle il est très apprécié parles déficients visuels.
Les outils pour personne handicapéeIl existe également des équipements adaptés aux personneshandicapées, principalement pour les personnes malvoyantes.
« Clavier braille »Les personnes souffrant de déficiences visuelles peuvent équiper leursclaviers d’une barrette braille, celle-ci se plaçant sous le clavier.
Elle est équipée de petits poinçons reconstituant les caractères braille,leur nombre dépendant du modèle.
L’usager, pour lire, parcourt des doigts les barrettes.
Chaque poinçon sort et se rétracte pendant lecture. La barrette estéquipée d’un bouton qui permet d’aller à la ligne suivante et demanipuler l’interface des logiciels.
12
Le synthétiseur vocalCe système simule la voix humaine et lit le texte affiché sur l’écran.
Il peut être, soit interne sous forme de logiciel ou carte intégrée, soitexterne (boîtier).
Ce type de programme est paramétrable. Il est possible de l’activer ounon, de choisir la vitesse de lecture, ou la voix (changement de langue,voix féminine, etc.).
Il existe des programmes utilisant soit la technique dite « parconcaténation de diphtongues » qui utilise des enregistrementsvocaux, soit celle de la « synthèse vocale par règles », qui est généréepar l’ordinateur.
Le bloc-notesIl est équipé d’un clavier et d’une barre de lecture.
Le clavier est constitué de 8 touches qui correspondent aux points dubraille informatique.
Il est équipé d’une mémoire qui lui permet d’enregistrer des notes.Celle-ci peuvent être transférer sur un ordinateur, soit sans fil(infrarouge), soit en utilisant un câble.
Bloc-notes intégrant un clavier braille.
13
La conception
La définition du projetIl est évident que le début d’un projet professionnel fait suite à unedemande de devis et à une remise de prix de la part du client. Mais jene m’attarderai pas sur le sujet qui s’écarte des limites de mon mémoire.
Evidemment, il n’y a pas nécessairement de client. Pour ledéveloppement d’un site personnel, les étapes de « fabrication » sontidentiques.
Rencontre avec le clientLa rencontre avec le client est sans aucun doute la phase la plusimportante dans le développement d’un site Web car c’est à cet instantque les besoins et les attentes du client vont être déterminés. Lors decette première rencontre vont se dégager les priorités, les grandesvoies du projet.
Le client sera présent tout au long du projet. Plusieurs réunions serontorganisées.
Les buts de cette rencontre est de connaître le client et de déterminerses objectifs.
14
L’ensemble des données récoltées donneront naissance à un cahier descharges dont une description détaillée est réalisée dans le chapitresuivant.
Evidement, il ne faut pas être trop restrictif. En réalité, il faut voir large(créer plusieurs profils) et ne jamais oublier que d’autres visiteurs necorrespondant pas aux critères établis visiteront également le site.
Prenons l’exemple d’un site de jeux. Bien qu’il soit principalementfréquenté par un public masculin relativement jeune (12-25 ans), il estévident que celui-ci l’est également du public féminin.
Le fait d’établir une liste de visiteur potentiel va permettre auconcepteur de s’adapter au mieux lors de la réalisation de l’interface.Par exemple, si le site est destiné à des personnes malvoyantes, le textesera plus grand. Dans la même suite d’idées, un site pour des enfantsaura une interface plus colorée, plus saturée.
Le cahier des chargesLe cahier des charges est un document qui définit les spécificationstechniques et d’organisation ainsi que les objectifs poursuivis en vue deréaliser un produit ou un service.
Il permet d’appréhender au mieux les coûts de la réalisation. Cedocument est donc avant tout un procès verbal qui a pour rôle demettre tous les intervenants du projet d’accord.
15
Précisons que ce document est une obligation légale pour les offrespubliques et les sociétés importantes mais n’est pas une obligationpour un petit projet. Souvent, un cahier est fourni par l’institutioncommanditaire.
Cependant, pour un projet mené par un particulier ou un indépendant,il peut être intéressant de se constituer un dossier regroupant toute ladocumentation nécessaire ce qui fera gagner du temps lors del’évolution du projet (mise à jour, changement d’hébergement, etc.).
Il faut ajouter que, sans ce document, il n’y aurait plus de trace physiquedu site puisque ce dernier est immatériel.
Grâce à ce cahier, il est possible de recommencer le projet après uneperte des données informatiques (notamment en cas de panne duserveur).
Il n’existe pas une manière précise de rédiger un cahier des charges,toutefois il devra comporter les informations suivantes :
Présentation de l’entreprise, collecte des informations concernant leclient.
Le projet, c’est-à-dire le sujet du site, son but, le public cible et uneanalyse des éventuels sites concurrents.
Les spécifications techniques du projet, c’est-à-dire les langages deprogrammations utilisés, les technologies, une liste des fournisseurs deservices, etc.
Le planning ainsi que le délai de mise en ligne du site.
16
La collecte de donnéesDeux scénarii possibles : soit le client fournit déjà une matièrepremière (textes, vidéos, photographies, etc.), soit il ne la fournit pas –ou elle est de mauvaise qualité, et il faut alors aller chercher ce dont ona besoin au travers d’autres supports. Il ne faut pas se limiteruniquement aux données accessibles sur le Web, mais privilégier undécorticage des différents médias mis à disposition : vidéosthématiques, comptes-rendus d’émissions de télévision ou dans deslivres et des encyclopédies.
Les photos et illustrations
Les images : les photographies et les illustrations peuvent être trouvéessur internet aux travers de banques de données. Ces sites sont avanttout destinés à des professionnels. La plupart d’entre eux proposentdéjà des photographies optimisées pour le Web. Il est possible des’acquitter des droits d’utilisation par achat à la pièce ou parabonnement pour des sommes modiques (quelques euros).
Les outils de recherches disponibles sur ces bases de donnéespermettent d’effectuer des recherches par des mots clés (idée ou nomd’objet), par catégorie et par couleurs (par exemple chercher unephotographie de voiture dont la dominante colorée est rouge).
Il en va de même pour les vidéos et les sons : de nombreux outils derecherches sont mis à disposition du public.
17
Le texteIl est important de structurer les textes sous formes d’articleshiérarchisés, l’idée étant d’aller des généralités vers des informationsparticulières, chaque article correspondront à une page du site.
Il faut prévoir également un résumé et un titre en vue de les afficher surune page d’accueil.
Les textes rédigés doivent être plus courts que sur un format papier(soit un A4), car il est difficile de trouver un repère visuel, surtout si lescolonnes sont larges.
Il est à noter que la lecture sur écran fatigue plus rapidement les yeuxque la lecture d’un texte écrit sur du papier. En effet, lorsque l’onregarde un écran, on a tendance à moins cligner des yeux que lorsd’une lecture normale. Ceux-ci se déshydratent donc plus facilement.De plus, rester trop longtemps devant un ordinateur peut provoquerdes maux de tête. Il faut donc aller à l’essentiel.
Il faut éviter les caractères emphatiques, tels que les pointsd’exclamation et la composition en capitale (majuscule), qui peuvent« agresser le lecteur » et rendre le texte illisible.
En résumé, un bon texte pour le Web ira à l’essentiel et un résumédonnera un aperçu immédiat du sujet traité.
L’orthographe
Bien que ce ne soit pas le travail premier d’un webdesigner, il estimportant de relire les textes et d’en vérifier les fautes orthographiquesou typographiques, qui sont monnaie courante sur le Web et qui fonttrès mauvaise impression.
18
Le correcteur orthographique de Word est sans cesse amélioré mais ilest fortement recommandé d’utiliser d’autres logiciels de correctionorthographique tels que « Antidote » ; qui est l’un des principauxcorrecteurs de langue française sur le marché. Les correcteurspermettent de corriger les fautes d’orthographe, d’analyser la structuregrammaticale (en proposant plusieurs corrections lorsque la langue lepermet). Ils intègrent le plus souvent des dictionnaires (synonymes,définitions, etc.). Il ne faut pas perdre de vue qu’il s’agit d’un logiciel quiest là pour aider et non pour faire le travail à la place du rédacteur.
Le nom de domaine et l’hébergementLa première chose à faire lors du développement d’un site Web est dedéterminer le nom du site et de commander l’hébergement s’yrapportant afin que ses derniers soient prêts lors du lancement du siteet d’éviter que d’autres personnes ne se les approprient (souvent dansle but de les revendre).
Qu’est-ce qu’un nom de domaine ?Tout ordinateur connecté à Internet possède un numéro appeléadresse IP qui est comparable à un numéro de téléphone.Evidemment, il serait fastidieux de mémoriser l’ensemble de cesnuméros. C’est pour cette raison que les DNS (domain name system –système de noms de domaine) ont été mis au point.
Le logiciel « Antidote ».
19
Cette technique permet de faire correspondre à une adresse IP un nomcompréhensible pour l’homme (par exemple « www.yahoo.com » dontl’adresse IP est «87.248.213.14 »).
Un nom de domaine se compose de trois parties :
Les lettres « www » qui indiquent que l’on visite une page web ;
L’identité, c’est-à-dire le nom du site, qui peut être le nom d’unemarque, d’un produit, etc. ;
L’extension qui indique la position géographique ou le secteurd’activité (extensions génériques).
Il existe 247 extensions nationales composées de deux lettres mais peusont activées,Internet n’étant pas accessible partout. Les extensionsgénériques sont au nombre de 14 (.com, .org, etc.).
Choisir le bon nomLe nom de domaine est important car c’est grâce à cette référence queles visiteurs accèderont au site.
Le plus souvent, le nom sera celui de l’entreprise ou d’une marque suivid’une extension qui peut être, soit un code géographique, soit un coded’activité (par exemple « gov » pour les sites gouvernementaux).
Le nom doit être le plus court possible afin qu’il soit facile de se leremémorer. Dans certains cas, les concepteurs n’hésitent pas à utiliserdes mots écrits en « phonétique » proche du langage parlé, voire mêmeà faire des fautes d’orthographe pour que les internautes distraitsarrivent toujours sur le site.
20
Il est donc intéressant, mais pas obligatoire, d’enregistrer plusieursnoms de domaines pointant vers le même site.
Depuis peu, il est possible dans les pays francophones de choisir desnoms de domaine comportant des caractères accentués, mais leursusage n’est pas recommandé, puisque le public non francophonepourrait rencontrer des problèmes d’accessibilité ; les claviers n’étantpas équipé des caractères spéciaux, ceux-ci ne pourront pas taperl’adresse dans leur navigateur.
Il existe une alternative au nom de domaine, beaucoup moinsonéreuse, qui s’adresse aux particuliers : il s’agit des redirections. Grâceà ces services, il vous est possible de personnaliser les adresses sansdébourser un centime ! Cependant, rien n’étant totalement gratuit,cela implique l’affichage de publicités.
Choisir un hébergeurIl existe un nombre impressionnant d’hébergement dont les prixvarient selon les options proposées (espace disque disponible, …).L’hébergement sera donc choisi en fonction des besoins du projet qui,dans le cadre d’un travail professionnel, est décrit dans le cahier descharges.
Il en existe de deux types : le premier, le mutualisé, est un serveur(ordinateur) dont l’espace disque est loué par plusieurs clients ; lesecond, le serveur dédié, permet de louer des ordinateurs mais cettesolution est très coûteuse et demande des connaissances pousséesdans le domaine de la configuration.
21
S’il s’agit d’un site personnel, il est préférable d’opter pour unhébergement gratuit mais celui-ci sera très souvent accompagné depublicités. Certains hébergeurs n’imposent pas d’annoncespublicitaires. Seulement, vous devrez déposer une candidature. Et rienn’indique que le site sera hébergé car seuls les sites dont le contenu estde qualité sont repris.
L’ergonomieIl est difficile de savoir où intégrer un chapitre sur l’ergonomie car ils’agit d’une matière qui entre en ligne de compte tout au long dudéveloppement, tant du point de vue du processus intellectuel, quelors de la création proprement dite. Il est donc nécessaire de faire uneparenthèse sur ce qu’est la démarche ergonomique et tous les facteursà prendre en considération.
D’une manière générale, l’ergonomie (domaine de la psychologie) estune discipline ou l’on observe et analyse le rapport liant l’homme à lamachine, le but étant d’améliorer l’environnement de travail.
Appliquée au Web, elle consiste à adapter le site aux utilisateurs et d’enrendre la consultation confortable et sécurisée c’est-à-dire que leconcepteur ne doit pas penser à ses capacités mais bien à se mettredans la peau d’un visiteur. En effet, ce qui peut lui sembler être uneévidence, ne le sera pas forcément pour quelqu’un d’autre.
Pour obtenir des résultats probants, il est important de bien connaîtreles profils des gens susceptibles de venir sur le site. Il faut donc estimerleur âge, leurs attentes, ainsi que leur niveau de connaissances.
Afin que les règles d’ergonomie soient claires et respectées, desorganismes veillent à leurs respects.
22
Ceux-ci éditent des ouvrages et des outils pour conseiller lesconcepteurs.
Nombre de critères sont à prendre en compte mais diffèrentmalheureusement suivant les sources (université, ASBL,…).
La rapiditéLe chargement des données doit s’effectuer rapidement sinon levisiteur risque de s’impatienter. Les pages ne doivent pas être « troplourdes » sans quoi les gens possédant de petite connexion neparviendront pas au contenu.
Les images devront également être légères. Il peut être intéressant demettre des vignettes, donnant accès aux illustrations nonredimensionnées. Dans ce cas, le visiteur ne télécharge que ce dont il abesoin. Il en va de même pour les vidéos.
La lisibilitéComme cité précédemment les textes doivent être plus courts que surle format papier. Ils devront être structurés à l’aide de titres et deparagraphes, les informations énoncées allant des généralités auxspécificités.
La sobriétéLe site doit être reconnaissable immédiatement. Cependant, il doit allerà l’essentiel : il faut éviter de trop le charger (trop de textes, d’images,etc.).
23
L’adaptabilitéLe site doit pouvoir s’adapter à l’environnement de travail du visiteursans que celui-ci ne soit obligé d’intervenir. Le design du site ainsi queles polices doivent s’adapter à la taille de l’écran.
L’accessibilitéEt, enfin, l’accessibilité est le terme le plus connu des surfeurs. Elle estsouvent confondue avec l’ergonomie. Il faut préciser qu’un site peutêtre ergonomique (facile à utiliser) sans pour autant s’affichercorrectement sur tous les ordinateurs…
La mise en pratique de l’accessibilité se fait souvent aprèsprogrammation du site, puisqu’il s’agit avant tout d’améliorer le codesource.
Il faut tenir compte des points suivants :
• Le site doit fonctionner quels ques soient le navigateur et sa version.De même il doit pouvoir s’afficher sur n’importe quel écran ;
• Les personnes souffrant de déficiences visuelles (aveugle, daltoniens,etc.) doivent pouvoir le consulter en toute quiétude ;
• Une alternative doit être mise sur pied pour les utilisateurs qui ontaccès à un autre outil que l’ordinateur, par exemple un téléphoneportable équipé de la fonction WAP, d’un PDA, etc. ;
• L’ensemble des données affichées à l’écran doivent être imprimableset téléchargeables par l’utilisateur. Il faut mettre, par exemple, àdisposition le contenu au format PDF ;
• La programmation doit être impeccable tant au niveau de la pageHTML que de la feuille de style ;
• Enfin, l’utilisateur doit pouvoir modifier la taille du texte.
24
La structure du siteAvant même de commencer à concevoir le graphisme d’un site web, ilfaut penser à la structure générale du site ; c’est-à-dire déterminer lesrubriques qui le constitueront et les liens qui les lieront.
Grouper les idéesIl faut constituer les différentes rubriques, puis grouper les idéessimilaires, afin de déterminer une catégorie principale à laquelle lesdifférentes sous-rubriques se rattacheront.
Il faudra également fixer des priorités pour chaque rubrique.
Lors de la réalisation de la barre de navigation, on veillera à respectercette hiérarchie.
L’arborescenceOn évite de créer une arborescence trop profonde. Il ne faut pas plus dedeux pages pour arriver au contenu recherché par l’internaute car, au-delà, il risque de se perdre.
Il existe différentes manières d’organiser les pages.
De façon linéaire (ou séquentielle), les pages se suivent à la manièred’un livre. Ce type de structure convient parfaitement pour un siteexplicatif ou un dictionnaire.
Hiérarchique : toutes les pages sont liées à une page principale, la paged’accueil introduisant le contenu, les autres le détaillant.
25
Mixte (en réseau) : c’est l’association des structures énoncéesprécédemment.
La plupart du temps, on met sur pied un organigramme pour vérifier lacohérence des rubriques. Certains programmes établissentautomatiquement le plan du site lors de sa réalisation.
Dans ces graphiques, les pages sont représentées par des icônes et lesliens sont matérialisés grâce à des lignes. Toutes les pages représentantles catégories principales sont disposées sur un premier niveau, lesunes à côté des autres.
26
La conception graphique
La conception graphique est la phase la plus importante du projet. C’està ce moment que l’on va penser à la présentation de l’ensemble despages et en concevoir le moindre aspect comme la barre de navigation,les couleurs, etc. Il est utile, à ce stade du développement, de préciserqu’il faut être particulièrement minutieux et structurer son travail, uneerreur obligeant – parfois – à tout recommencer.
Le lay-outLe lay-out, appelé également « template », est simplement la mise enpage.
Le plus simple est de se munir d’un crayon et d’une feuille et de laisservagabonder son imagination. Il est inutile de savoir dessiner. Des carréspour symboliser les différents éléments (navigation et images), et deslignes horizontales pour représenter le texte suffiront ; l’idée étant defaire une esquisse avant de transposer le travail dans un logiciel decréation graphique.
27
La structure des pagesUne page est en général composée d’un en-tête, d’une barre denavigation, d’un corps et d’un pied de page.
L’en-tête accueille le logo et souvent un emplacement publicitaire.
Sous le logo ou à côté de celui-ci, vient généralement se greffer unebarre de navigation. Le corps quant à lui accueille bien évidement lecontenu.
Le pied de page fait référence aux informations juridiques : droitsd’auteur, politique de confidentialité, etc.
D’un point de vue graphique (en général), les différents élémentsdisposés sur la page sont des carrés et des rectangles disposés les unsà côtés des autres. Les teintes se rapprochent des couleurs primaires(bleu, jaune, rouge) avec ajout, souvent à outrance, du noir…
Tout ceci n’est pas sans rappeler les travaux du peintre hollandais d’Artabstrait Piet Mondrian qui, sans le savoir, a eu une influence sur lesfondements du graphisme numérique.
En effet, ce dernier cherchait, par ses œuvres, à obtenir un équilibreentre les formes et les couleurs tout en excellant dans la simplicité de lacomposition en cherchant la simplification des représentations,principes que l’on retrouve pour le Web, puisque l’atout majeur de cemédia est (en théorie)… la lisibilité!
28
Le parcours visuelLors de la réalisation du lay-out, il ne faut pas perdre de vue que leparcours visuel s’effectue en oblique, de gauche à droite.
Cela signifie que le logo (qui permet d’identifier le site) sera le plussouvent placé en haut à gauche sur l’écran.
Les informations importantes devront être placées au centre de l’écran.
Les différents styles
Pour imaginer un graphisme élaboré, le mieux est d’arpenter le Web etde prendre exemple sur les nombreux sites existants. Si le plagia n’estpas recommandé, l’inspiration ne peut être que bénéfique.
Evidemment, chaque style s’adapte à un contexte particulier. Ilsemblerait incongru de mettre au point un lay-out « rouge sang » pourun site vantant les bienfaits d’une boisson naturelle. Il est doncnécessaire de trier les styles en fonction des besoins d’un client ou deses envies.
Voici la présentation des styles graphiques les plus répandus sur le Webet qui, actuellement, font des émules dans le monde du graphisme.
29
Wicked WornUn style majeur qui s’inspire avant tout de l’après-guerre,principalement des affiches et du packaging de l’époque. Il secaractérise par l’emploi de teintes « fanées » à dominante verte oubleue et d’une typographie qui semble usée par le temps, le toutdonnant un aspect rétro à la création. On retrouve de tels graphismessur les sites d’antiquaires ou d’histoire.
30
VintageLe terme était utilisé à l’origine pour qualifier la mode du début du XXesiècle (jusqu’aux années 80). Désormais, il désigne tous les objetsdatant de cette époque.
De nombreux graphistes utilisent donc des numérisations de broderieset créent des textures « tissus » qu’ils intègrent dans leurs compositionsafin de donner un cachet « manufacturé » à leur travail. Cela convientparfaitement pour des sites parlant de mode.
31
OrnementalIl prend source dans l’Art Nouveau. Et tout comme son grand frère,l’Ornemental utilise des motifs floraux et organiques. C’est le style leplus dynamique qui vient briser, avec ses courbes, la monotonie dessites qui sont généralement trop carrés.
32
UrbainLa référence aux gratte-ciels et au bitume des mégapoles américainesest omniprésente. C’est un style assez sombre à la typographiedéstructurée et aux couleurs « fluo » rappelant les néons des grandesenseignes.
Des effets scéniques sur les photographies, telles que des pelliculesusagées, des différences d’opacité, sont couramment utilisées à l’aided’outils tel que Flash (animations vectorielles).
33
CartoonTrès riche en couleurs vives et en illustrations, le style « cartoon » est lestyle « enfantin » par excellence. Le texte n’occupe plus que quelqueslignes sur l’écran pour laisser place à des dessins « naïfs » aux traitssimplifiés et aux couleurs unies rappelant les bandes dessinées pour lejeune public.
34
Pixel ArtCe style prend sa source aux origines des jeux vidéos. En effet, dans lesannées 90, se sont retrouvées sur le marché mondial les premièresconsoles de jeux, dont Nintendo est la plus célèbre. Les graphismes del’époque étaient peu élaborés vu les capacités limitées des composantsélectroniques. Ceux-ci étaient matérialisés à l’aide de quelques pointscolorés.
Cet « art », comme son nom l’indique, consiste donc en la créationd’illustrations faites à la main, pixel par pixel. Il est donc dur d’obtenir unrésultat satisfaisant, d’autant plus que cela prend beaucoup de temps.
35
CorporateC’est le nom que l’on donne aux sites Web d’entreprises. C’est avant toutun site informatif sans recherche graphique particulière, assez pauvreen illustrations. Un bon exemple est le site de Microsoft.
36
AquaS’inspire de l’interface bien connue de Mac OS. Ce type de graphisme secaractérise par l’effet « plastique » appliqué aux éléments des sites.Couleurs pastel, effets de réflection, boutons aux bords arrondis sont aurendez-vous… ce style s’est facilement propagé, d’autant plus qu’il estfacile d’obtenir un résultat probant grâce aux éditeurs d’images tel quePhotoshop.
37
La couleurLa couleur est importante dans la communication. c’est grâce à celle-cique l’on va donner vie au site et rendre son aspect d’autant plusagréable à l’œil… Il est donc primordial de bien en comprendre lemoindre aspect et de maîtriser son emploi.
La synthèse soustractive (CMJ)Lorsqu’un rayon arrive sur la surface du papier et sur le pigment (encre),une partie de celui-ci est absorbée tandis que l’autre partie estréfléchie. La couleur parvenant à notre œil dépend donc des couleursabsorbées par le support.
L’absence de tout pigment sur le papier donnera du blanc (si le papierest de cette couleur). C’est pour cette raison que l’on parle de synthèsesoustractive.
La synthèse additive (RVB)Contrairement aux supports opaques, l’écran émet directement de lalumière.
Toutes les teintes affichées sur un écran correspondent à un mélangede trois couleurs qui sont le rouge, le vert et le bleu.
Il est dès lors possible de constituer une gamme de teintes assezétendue, théoriquement l’ensemble des teintes existantes.
Un mélange des trois teintes à part égale donne une couleur blanche.L’absence de coloration donne du noir (les pixels de l’écran sont alorséteints).
Ci-dessus, la synthèse soustractive.
Ci-dessous, la synthèse soustractive.
38
Les caractéristiques d’une couleur
La TeinteUne teinte est obtenue par le mélange de deux ou plusieurs couleurs.Dans le cas du mémoire, le terme est synonyme de couleur.
Une teinte secondaire est un mélange de deux couleurs primaires.
Une teinte intermédiaire (ou tertiaire) est obtenue à partir d’unmélange d’une couleur primaire et d’une secondaire.
La luminositéIl s’agit de la quantité de lumière que reçoit l’œil. Il s’agit de la variationentre clair (blanc) et foncé (noir).
La SaturationC’est la proportion qu’occupe la teinte sur une surface. Si la teinteoccupe l’entièrement de la surface, on dit qu’elle est saturée. Si laproportion de blanc est plus importante, on dira que la teinte est nonsaturée (ou pastel).
39
Le cercle chromatiqueLes couleurs de bases utilisées en imprimerie sont le jaune, le cyan et lemagenta c’est-à-dire les couleurs primaires (couleurs pures qui ne sontpas obtenues à partir d’un mélange) qui permettent de créerl’ensemble des autres tonalités.
Le cercle chromatique complet est constitué de 12 couleurs, qui outreles teintes primaires, comprend 3 couleurs secondaires constituées demélange de deux primaires à part égale et de 6 teintes intermédiairesobtenues par le mélange d’une couleur primaire à 100 % et d’unesecondaire à 50 %.
Le noir, le blanc et le gris n’entrent toutefois pas dans le cerclechromatique car ils ne sont pas considérés comme des couleurs à partentière. Pour rappel, le noir est l’absence de couleur et le blanc unmélange de toutes les couleurs. On les qualifie de « couleurs neutres ».
Ces teintes neutres pourront être utilisées sans retenue en complémentdes accords.
Vu que la synthèse additive est peu utilisée dans la vie courante il estintéressant d’utiliser la roue chromatique soustractive et de la convertirensuite au format RVB.
Les accords chromatiques
La théorie des accords chromatiques a longtemps été utilisée pour laréalisation d’imprimés et d’œuvre picturales. Il est donc logique quecelle-ci aie été récupérée en conception Web.
La roue chromative basée sur lasynthèse soustractive.
40
Tout comme un graphiste ou un peintre, le webdesigner utilise la rouechromatique qui est une représentation graphique du spectre descouleurs visibles. Par le biais de ce diagramme, il devient aisé de mettreau point des accords de couleurs qui doivent apporter une valeuresthétique au site.
Il existe bon nombre de possibilités d’accords. Parmi ceux-ci, il y a desaccords de deux, trois, quatre, six couleurs… ainsi que des accords paranalogie (c’est-à-dire des teintes proches).
Pour les sites Web, on privilégie l’utilisation d’un accord à trois couleursmais cette règle n’est pas figée : la décision appartient au concepteur,le tout est de ne pas abuser des mélanges sous peine d’obtenir unrésultat « kitch » difficilement supportable à l’œil.
L’accord se composera d’une dominante souvent utilisée pour la barrede navigation et le fond de la page et d’une tonique utilisée pour lestitres et les liens hypertextes. Le noir et le blanc viennent s’ajouter, l’unpour le texte, l’autre pour le fond du contenu.
Dans la pratique il est possible de mettre au point un accord soit à l’œilen se basant sur le cercle chromatique, soit en utilisant un logiciel quiva générer des jeux de couleurs prêts à l’emploi ou encore enconsultant les nombreux sites abordant le sujets (avec souvent desexemples).
Harmonie par analogie
Il faut choisir une teinte et faire varier sa saturation.
L’accord par analogie est sans doute le plus simple à obtenir. On esttoujours sûr d’obtenir un bon résultat.
41
Liens chromatiques simples
Pour créer une telle harmonie, il faut que les teintes soient voisines surle cercle chromatique. Elles doivent avoir une composante commune(cyan, magenta, jaune).
On peut obtenir trois accords différents :
Une primaire et une secondaireLes couleurs primaires peuvent être associées à chacune des deuxsecondaires qui l’entourent.
Une primaire et une intermédiaireIl existe six solutions puisque chacune des trois primaires peut êtreassociée aux deux intermédiaires qui l’entourent.
Une secondaire et une intermédiaireChacune des trois secondaires peut être associée aux deuxintermédiaires qui l’entourent.
Les liens chromatiques complexes
Les liens complexes forment des accords de trois couleurs consécutivessur la roue chromatique.
Une intermédiaire, une primaire et une intermédiaireCe qui donne une possibilité pour chaque primaire.
42
Une intermédiaire, une secondaire et une intermédiaireIl y a trois possibilités d’accord, une pour chaque secondaire.
Une primaire, une intermédiaire et une secondaireIl existe six possibilités d’accord, une pour chaque intermédiaire.
Harmonie par contrastes
On peut mettre au point des harmonies plus « dynamiques » quiprovoqueront une sensation d’inconfort et de déséquilibre visuel chezle public.
Contraste clair-foncé
Le contraste « clair-foncé » est une variation (de luminosité) de deux outrois teintes différentes d’une même couleur. Le meilleur exemple est lecontraste qu’il existe entre le blanc et le noir.
Contraste chaud-froid
Chaque couleur peut être qualifiée suivant sa tonalité (froide à chaude)et sa valeur (clarté à obscurité).
Un bon exemple de ce type de contraste est le jaune et le bleu qui ontdes propriétés qui les opposent. Si on ajoute du jaune, la couleur seréchauffe et si on ajoute du bleu, elle se refroidit.
Contraste des complémentaires
Chaque couleur primaire a pour complémentaire le mélange des deuxautres. Par exemple, le magenta et vert (bleu + cyan).
43
Chacune des primaires peut être associée avec la secondaire qui lui faitface. Il y a donc trois possibilités.
Deux teintes complémentaires contiennent les trois couleurs primaires.
Deux couleurs diamétralement opposées (face à face) sur le cerlce sontcomplémentaires entre elles et leur mélange produit du gris.
Contraste de quantité
La force d’expression d’une couleur est déterminée par sa luminositéet la surface qu’elle occupe.
Pour illustrer ce qu’est le contraste de quantité, prenons l’exemple dujaune, qui est trois fois plus lumineux que le violet, et donc devraoccuper trois fois moins de place que sa complémentaire.
Les pièges à éviterEviter au maximum les couleurs trop lumineuses qui affaiblissent lalisibilité (vert trop clair, jaune trop chargé) et donnent la migraine.
Il est préférable d’utiliser un texte foncé sur fond clair, blanc depréférence, ce qui offre un meilleur contraste.
Le code RVBPour bien comprendre le code hexadécimal, il est important d’expliquercomment fonctionne le format RVB…
Ce format gère 256 nuances de rouge, de vert et de bleu.
44
Chacun de ses niveaux sont numérotés de 0 à 255, la valeur la plushaute représentant la teinte la plus saturée.
En résumé, toutes les teintes sont traduisibles par une série de 3nombres. Pour donner un exemple, le blanc équivaut à ceci : 255, 255, 255.
Grâce à ce format, il est possible d’obtenir 1.677.216 teintes différentes.
Le code hexadécimalChaque teinte se voit associée à un code hexadécimal (constitué delettre et de chiffre) qui permet son utilisation dans les fichiers HTML oudans les logiciels de graphisme.
Voici un exemple de code hexadécimal : #FFFFFF.
Le code hexadécimal « FF » correspond à « 255» au format RVB.
Les deux premiers caractères définissent la couleur du rouge, les deuxsuivants le vert, enfin les derniers le bleu.
Dans notre exemple « FF » indique que les trois couleurs sont aumaximum. Or, à part égale, ces trois couleurs nous donnent du blanc.
Obtenir le code
Dans le cas où une teinte vous intéresse et que vous voudriez obtenir lecode correspondant, vous devrez ouvrir le fichier désiré avec un éditeurd’images capable de lire les informations relatives aux couleurs. C’est lecas de Photoshop qui affiche la teinte sélectionnée en RVB, en CMJNtout en donnant le code hexadécimal correspondant.
45
Certains petits utilitaires permettent à l’aide du curseur d’aller chercherinstantanément les informations relatives à une couleur.
Conserver les teintes…
Il est important de prendre note de toutes les références des couleurs(au format hexadécimal) dans un document texte ou sur feuille, pourpouvoir les réutiliser dans les logiciels graphiques.
Le choix typographiqueLa typographie est l’art d’assembler les caractères. Longtemps, ceux-ciétaient en plomb, puis, dès la fin de la seconde guerre mondiale, laphotocomposition a pris le relais. La typo telle que nous la connaissonsaujourd’hui s’est développée dans les années 60, avec le balbutiementde l’informatique…
Il existe plusieurs classifications et d’innombrables types de caractèremais il serait fastidieux d’en faire le tour. Pour simplifier, on peutdégager deux types de caractères : les « sérif » et les « sans sérif ».
Les caractères sérif ont des empattements, c’est-à-dire des extensionsaux extrémités des caractères, alors que les sans sérif ont des bordsrectilignes, c’est d’ailleurs pour cette raison qu’on les appelle descaractères bâton.
Les caractères bâtonPour une utilisation à l’écran, il est conseillé d’utiliser les caractèresbâton (sans sérif ) pour le corps du texte, puisque les bords rectilignesdes lettres « épousent » parfaitement les pixels de l’écran ce qui leursconfère une excellente lisibilité.
46
Arial est un bon exemple de ce type de caractère. Son emploi pour leWeb est recommandé car il est l’une des polices les plus repandues etest présent sur tous les systèmes d’exploitation.
Ce type de police donne une allure moderne et professionnelle autexte.
Attention à la taille : le texte ne devra pas être inférieur à 10 points caril deviendrait illisible.
Caractère à empattementsLes polices à empattements tel que le Times New Roman peuventégalement être utilisées mais il faut que le texte ait de préférence unetaille supérieure à 12 points.
En effet, ces dernières sont plus fragiles sur un écran parce que leursdétails sont plus fins. Apparaît donc un effet de morcellement deslettres, qui n’est pas du plus bel effet et qui produit une perte delisibilité.
Caractère fantaisiePour l’interface et les titres, la typographie peut apporter un plusgraphique. Dans ce cas, on utilise des caractères « fantaisie ». Il fautévidemment que les polices choisies soient en adéquation avec le styleque l’on souhaite donner au site. Et qu’elles soient complètes, car,malheureusement, beaucoup des polices disponibles sur Internet nepossèdent pas les caractères accentués !
47
Enfin, il faut évoquer les polices « ornementales » qui sont constituéesnon pas de caractères mais de formes géométriques, pictogrammes etd’arabesques. Elles sont utilisées pour créer des logos, des iconesservant à la navigation et, enfin, à la décoration de l’interface.
La création graphiqueNous avons une ébauche sur papier, une gamme de couleurs et un jeude polices. Nous pouvons donc passer à la conception graphique dansun éditeur d’image.
Photoshop est le plus connu d’entre eux. Il sert de référence auxgraphistes de tous bords. Bien qu’il soit un standard, il connaît tout demême de la concurrence de la part de l’open source. Son rival s’appelle« The Gimp ».
L’avantage de tels logiciels c’est qu’ils permettent de travailler sur descalques. Il est donc possible de superposer plusieurs images et demodifier individuellement une partie de leur composition. Ils sontégalement équipés d’options permettant de modifier les propriétés desphotographies et d’appliquer des effets artistiques (par exemple, créerun dessin à partir d’une photographie).
A noter qu’il existe également des logiciels vectoriels tels qu’Illustrator,dont les images pourront être importées dans un logiciel de retouchephotographique ou être incorporées dans le logiciel « Flash ».
48
Regrouper les sourcesAvant de commencer à dessiner le site, il faut s’assurer au préalable quetoutes les polices nécessaires soient installées sur l’ordinateur.
Il est conseillé également de regrouper toutes les illustrations etphotographies dans un dossier et de les mettre en mode RVB afin depouvoir les modifier plus aisément. Enfin, il est indispensable de semunir de son lay-out papier et de sa charte graphique.
Création du documentLa première étape consiste à créer un nouveau document possédant,soit un fond blanc, soit un fond transparent et dont la résolution (lenombre de point par pouce) est de 72 pixels.
Auparavant, il s’agissait souvent d’un document possédant commedimension 800 pixels de large pour 600 de hauteur. A l’heure actuelle,on peut majorer cette entrée car les écrans disponibles sur le marchéont une résolution minimum de 1024 sur 768 pixels.
L’important est de faire attention à la largeur de la page. En effet si celle-ci est plus large que l’écran, le visiteur devra utiliser l’ascenseurhorizontal de son navigateur pour afficher la totalité du document, cequi rend la consultation du site difficile et peut agacer l’internaute.
Cela n’empêche pas de certains webmasters de prendre le contre-piedet de réaliser des sites dont le développement se fait horizontalementet non verticalement. Cependant, ce type de site est rare.
En réalité, la taille du document créé dans Photoshop n’est pas trèsimportante. L’agencement des éléments graphiques se fera lors de la« programmation » de la page HTML.
49
Dessiner les blocs
Dans un deuxième temps, on va dessiner les blocs tels qu’ils sont sur lelay-out. Il est possible d’utiliser des formes prédéfinies ou de créer deséléments plus complexes grâce à l’outil plume. Il est égalementpossible d’utiliser l’outil de sélection afin de créer rapidement desrectangles.
Par défaut, la couleur de remplissage sera le noir. Les motifs et autreseffets seront ajoutés par la suite.
Chaque élément sera disposé sur un calque et tous les calques serontgroupés par nature (il est possible de créer des groupes de calques).
Par exemple, les éléments qui constituent la barre de navigation serontgroupés sous l’appellation « barre de navigation ».
Une fois ces deux opérations terminées, on peut passer à la créationproprement dite. Grâce aux options de fusion, il est possibled’appliquer sur un calque des effets de dégradés, d’incrustation decouleur et de texture. On peut également ajouter des effets d’ombresportées, de lueur, et appliquer du relief avec le biseautage.
Découpes, optimisation et exportationUne fois la maquette terminée, il faut découper l’ensemble en demultiples images, ceci dans le but de réduire la taille des fichiers finauxet surtout pour faciliter l’intégration des éléments dans la page finale.
L’idée est de créer une découpe pour tous les éléments présents àl’écran, en prenant soin de masquer les calces indésirables.
50
Il faut impérativement masquer le calque de fond, pour afficher le fondtransparent.
Pour chaque découpe créée, il est possible de sélectionner le formatd’image souhaité et de lui attribuer un « profil de couleur » (appelénuancier) suivant la nature de l’image.
Pour les photographies, on choisira le format JPEG.
Pour l’interface graphique, le GIF conviendra mieux car il permettra defaire des fichiers très légers.
Enfin, certains éléments de l’interface qui doivent être en transparentsdoivent être exportés en PNG.
Les différents formats d’images
JPEG (Joint Photographic Expert Group)
Ce format a été mis au point par des professionnels de la photographiedans les années 80. Ce qui fait son succès, c’est son taux de compressionimportant (fichier très léger). Malheureusement, une partie desdonnées est perdue lors de la création de l’image.
On utilise ce format pour les photographies et les illustrations pouvantcomprendre jusqu’à plusieurs millions de couleurs.
51
GIF (Graphic Interchange Format)
Mis au point par la société privée « Compuserve », le GIF convientparfaitement aux dessins et aux illustrations et peut contenir de 2 à 256couleurs.
Il existe deux versions différentes : le format GIF 87A et GIF 89a.
La première supporte la compression LZW et l’entrelacement, c’est àdire l’affichage progressif de l’image lors de son chargement et aussi lapossibilité d’animer l’image.
La seconde permet de gérer la transparence.
Cependant, les sociétés souhaitant utiliser ce format pour leur logicieldoivent payer des droits d’auteur.
La compression LZW est un algorithme qui permet de compresser lesimages afin de réduire leur taille. A la base, il a été développé pourcompresser n’importe quel fichier. L’une des applications du LZW est lefameux « Winzip », bien connu des utilisateurs Windows.
PNG (Portable Network Graphics)
Le PNG, quant à lui, allie de nombreux avantages des deux autresformats, tout en étant libre de droit (utilisable par tous).
Le format permet de créer aussi bien des illustrations en niveau de gris,en couleurs réelles (comme les photographies), ainsi qu’en illustrationscontenant 256 couleurs.
Un de ses avantages est le support de la transparence. Il est, en effet,possible de définir 256 niveaux d’opacité différents.
52
Il permet, tout comme le GIF, d’être affiché progressivement (entrelacé).L’image ne connaît pas de perte de qualité malgré la compression.
Ce format a encore de beaux jours devant lui… et son emploi segénéralisera dès que l’ensemble des navigateurs supporteront sonaffichage.
Les nuanciersIls permettent d’optimiser l’affichage et la taille des illustrations et desphotographies. On les utilise également pour se constituer une palettede couleurs pour la création graphique.
Le nuancier Websafe
Ce nuancier est constitué de 216 couleurs.
Il s’agit d’une palette générique qui garantit, contrairement à unepalette système, un affiché correcte dans le navigateur.
La présentation de ce nuancier dépent du système d’exploitation.
le nuancier « Web Adaptative »
Cette palette trouve les couleurs qui correspondent le mieux à l’image.Il remplace les couleurs par les couleurs sécurisées Web quand lesteintes sont ressemblante.
Cette palette permet d’afficher des images correctement sur les anciensmoniteurs.
53
Création d’un site vectoriel…Il est possible de créer un site sans passer par la programmation HTMLgrâce au logiciel vectoriel tel que Flash (avec l’intervention éventuelled’Illustrator).
Pour bien comprendre ce qu’est un site vectoriel, il faut le différencieravec les images traditionnelles que l’on appelle « bitmap ».
Images bitmap et vectoriellesPhotoshop permet de manipuler les fichiers bitmap qui peuvent êtrecomparés à une grille dont chaque pixel se voit attribuer une couleur.Évidemment, plus l’image à manipuler est grande et plus le nombre depixels est important. Ses inconvénients sont le poids (si ce sont degrosses images), ainsi que la perte de qualité qu’entraine unredimensionnement.
Flash, par contre, travaille avec du vectoriel, c’est-à-dire que les dessinssont traduits en équations mathématiques. Chaque élément est enréalité un tracé composé de points dont on peut modifier la courbe, etc.Il suffit alors de remplir la forme obtenue d’une couleur. Évidemment,un fichier vectoriel, vu qu’il ne comprend que la position des points etles références de couleurs, est beaucoup plus léger qu’une imagebitmap.
De plus, le vectoriel est plus facilement modifiable et peut êtreredimensionné « à l’infini », l’ordinateur recalculant alors l’image àafficher à l’écran. Il n’y a pas de perte de qualité et il est possible deconvertir ce type de fichier en image « traditionnelle ».
54
FlashCe logiciel de part ses fonctionnalités est utilisé à des fins diverses. Il esttout à fait possible de créer un petit dessin animé, tout comme il l’est defaire un site.
Outre le côté animation, Flash permet également au travers de sonlangage de programmation « Action Script » de communiquer avec desbases de données et de créer de véritables applications.
Son interface
Son interface est constituée d’une scène sur laquelle on place lesimages (soit vectorielles, soit des bitmaps), d’un « scénario » qui permetde créer des effets et d’animer les éléments présents sur la scène.
Il possède, tout comme les logiciels de retouche photographique, unebarre d’outils assez sommaire qui permet de dessiner directement dansle logiciel.
Enfin, il est possible d’afficher en quelque sorte une « console » quipermet de programmer, afin d’ajouter des effets supplémentaires surles éléments du site. Bien que l’emploi de la programmation ne soit pasnécessaire, elle est souvent bien utile mais nécessite une fois de plus laconnaissance d’un langage supplémentaire, « l’ActionScript ».
Limiter son emploi
Son emploi reste souvent limité car on déconseille fortement ledéveloppement complet d’un site. Ceci pour diverses raisons…
Tous les internautes ne possèdent pas le lecteur indispensable à lecturedes fichiers flash (« swf »).
55
Mais aussi, parce qu’on ne sait pas sélectionner l’ensemble du contenu,par exemple, en vue de l’imprimer.
La charte graphiqueLa charte graphique est un document reprenant les règles de mise enpage et de disposition des éléments graphiques. Son but est degarantir une cohérence au niveau du contenu afin que l’image duproduit ou de la société reste intacte et qu’elle soit facilementidentifiable auprès du public.
La charte viendra s’ajouter au cahier des charges.
Dans certain cas, la charte graphique existe déjà. Il faudra donc se basersur celle-ci. Dans le cas contraire, il faudra en rédiger une.
Ce descriptif détaillé doit être impérativement dressé afin de conserverla cohérence du site et d’ainsi permettre à quiconque de le faire évoluerfacilement.
Une charte graphique établie dans le cadre de la production d’un projetWeb peut être aussi bien présentée sous forme d’un documentimprimé, que faire l’objet d’un site Web (souvent une rubrique jointe ausite développé).
Un très bon exemple de charte graphique est disponible sur le site dela région wallonne à l’adresse suivante :
http://www.chartegraphique.wallonie.be
56
En outre, la charte graphique reprendra :
• Le logotype ;• Une liste des polices de caractères ; • L’ensemble des éléments graphiques ;• Les jeux de couleurs;• Ce qu’il est permis ou non de faire en termes de disposition des
éléments et le fond de la page.
Le logoPour le logo, il faudra donc indiquer les dimensions de l’image, lescouleurs ainsi que la police utilisée. Si des effets ont été appliqués, ilpeut être intéressant d’indiquer le logiciel utilisé.
Il faudra également montrer les bons et mauvais usages du logo.
Les policesPour les polices, il faut indiquer le nom, le style (gras, italique, etc.). Il estimportant de stipuler l’usage de chaque police, par exemple d’indiquersi la police est utilisée pour les titres, le texte courant ou le logo.
Pour avoir une idée de l’aspect du texte, il est important d’établir un jeude caractère pour chaque police. Ce dernier reprend les caractèresalphanumériques et numériques, ainsi que les caractères spéciaux telsque « & », « @ ».
Les éléments graphiquesTous les éléments utilisés (puces, barres de séparation, etc.) devrontêtre repris.On indiquera leurs caractéristiques, c’est-à-dire leurs poids,leurs dimensions (en pixel) et leurs couleurs aux formats hexadécimalet RVB.
57
Les jeux de couleursIl faut stipuler les couleurs utilisées pour l’interface générale du site(fond de la page, dominante colorée, etc.), leurs références étantindiquées en RVB et en hexadécimal.
58
Programmation
HTMLL’HTML (Hypertext Markup Language) est un langage de balises qui estlu et interprété par le navigateur ce qui explique que l’affichage peutdifférer d’un logiciel à l’autre.
Ce langage de par sa simplicité est rapidement maîtrisé.
Sans HTML, il n’y aurait pas de site. En effet, ce dernier estincontournable puisque il sert de squelette à la page web. Il permetdonc de positionner tous les éléments et de manipuler le texte.
Au vue du nombre d’éditeurs visuels sur le marché, on pourrait se direque connaître le langage html n’est pas important. En effet, les éditeurs« WYSIWYG » (à traduire par « ce que vous voyez est ce que vous faites »)permettent à quiconque de créer une page visuellement au traversd’outils et d’assistants et cela en quelques minutes, certains poussent levis jusqu’à proposer des « kits graphiques ».
Cependant, maîtriser ce langage présente de nombreux avantages. Unbon « codeur » ira plus vite pour programmer son code dans un éditeurde texte tel que « bloc note » plutôt qu’avec un logiciel tel que« Dreamweaver ». De plus, cela évitera de générer un mauvais code quipourrait être mal interprété par les navigateurs et alourdir inutilementle fichier.
59
Sur le marché, c’est le célèbre « Dreamweaver » de la suite d’Adobe quiprédomine mais il en existe bien d’autres. Il faut, évidemment, citer sonadversaire open source « Nvu », petit nouveau mis au point par l’équipedu W3. Celui-ci, à l’instar de son concurrent, bien que plus pauvre enoutils, permet de générer un code conforme… et il ne faut pas oublierun atout majeur : sa gratuité !
Un fichier HTML portera toujours soit l’extension « .htm » ou « .html ».
Les différentes versions d’HTMLLe langage a fortement évolué en quelques années. La premièreversion était rudimentaire et ne permettait que de traiter le texte. Par lasuite, les tables et les cadres (possibilité d’intégrer une page dans unepage) sont venus s’ajouter aux possibilités qu’il offrait.
Depuis 1999, l’HTML n’a plus été développé et il a été remplacé par unenouvelle mouture appelée XHTML (eXtensible Hyper Text MarkupLanguage, à comprendre par « HTML étendu »).
Cette nouvelle version emprunte sa syntaxe à un autre langage connudes programmeurs Web… le XML !
Mais aucune fonctionnalité supplémentaire n’a été ajoutée. Seule lasyntaxe, c’est-à-dire la structure du document et la manière d’écrire lesbalises, a évolué.
L’XML est un langage qui permet de créer ses propres balises.
60
Il est aussi bien utilisé pour programmer les logiciels présents sur votreordinateur (c’est le cas de Windows Live Messenger) que pour desapplications sur le Web.
La structure d’une page webCi-dessous, vous trouverez l’exemple d’une structure minimale (sanscontenu) d’une page XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<title>Titre de la page</title><meta name="keywords" lang="fr" content="motcle1,mocle2"" /><meta name="description" content="Description de ma page web." /><meta http-equiv="Content-Language" content="fr" /><link href="style.css" rel="stylesheet" type="text/css" />
</head><body></body></html>
Il faut savoir qu’une page est constituée de deux parties, l’en-tête et lecorps du document.
L’en-tête permet de mettre des informations relatives à la page Web(mots-clés, etc.) mais, également, le titre du document et des scripts quiajoutent des fonctionnalités au document (détaillés dans le chapitresuivant). L’ensemble de ses données est invisible aux utilisateurs.
Le corps reçoit le contenu qui sera affiché dans le navigateur.
Décryptons l’exemple : la première ligne indique la version du langageutilisé et les règles de mises en forme à utiliser.
61
La balise « html » se voit greffer l’attribut « lang » qui indique dansquelle langue le document est écrit.
Le « doctype » indique au navigateur quel version du langage HTML estutilisée.
La partie « head » introduit l’en-tête et est suivie du titre et des balisesmétas (décrites dans le chapitre consacré à la promotion).
Les possibilités de l’HTMLIl est possible de créer des tableaux qui permettent d’afficher desdonnées tabulaires, par exemple des heures d’ouverture, des listes deproduits à vendre, etc. Avant l’arrivée du XHTML, on les utilisait pourfaire la mise en page, en lieu et place à l’heure actuelle des feuilles destyles.
On peut évidement travailler avec le texte en choisissant l’alignement,la couleur, le type de police utilisée, la taille, la graisse, etc. Il est possibleà partir d’un texte, de créer des énumérations avec différents types depuces ou de numérotations.
Il en va de même pour les images dont on contrôle les dimensions etl’alignement.
A partir d’un texte ou d’une illustration, on peut établir un lienhypertexte, soit vers un autre document, soit vers un lien intérieur à lapage. On peut aussi mettre un lien vers un courriel. Dans ce cas,l’application de courrier par défaut sur l’ordinateur s’exécute.
Une fonctionnalité importante est la création de formulaire… qui estutilisée pour récolter des données.
62
Quelques notions d’HTMLPar exemple, pour créer un paragraphe, il faut utiliser la balise « p ».
Concrètement, le code sera :
<p>Ceci est un paragraphe</p>
Dans cet exemple, le texte qui est placé entre la balise d’ouverture et defermeture est considéré comme un paragraphe.
Cette syntaxe est la même pour toutes les balises à l’exception desbalises métas et du retour à la ligne « br » qui n’ont pas besoin d’une« balise de fermeture ».
Pour prendre un second exemple, un texte en gras sera codé de cettemanière : <b>texte en gras</b>.
Les feuilles de stylesPour éditer l’apparence, on utilise les feuilles de styles en cascade(cascading style sheet en anglais), qui permettent de personnaliser etcréer des éléments au sein d’une page HTML pour en modifierl’apparence.
Il est donc possible de créer, soit de nouvelle balise, soit de modifierl’apparence d’une balise HTML.
La feuille de style peu être interne à la page Web comme elle peut êtreplacée dans un fichier externe.
63
L’avantage est qu’il suffit d’un simple fichier pour modifier l’ensembled’un site. On gagne également en clarté. Et, surtout, ce langage permetde combler les lacunes de l’HTML en proposant de nombreuses optionssupplémentaires.
Les CSS permettent de modifier l’apparence du texte, de créer des blocs« image » et des blocs « texte », d’en paramétrer les marges et lesbordures.
Mais cela va plus loin… elles proposent également des options pluspoussées telles que le paramétrage linguistique. Il est possible, parexemple, de modifier l’apparence des guillemets en fonction de lalangue de l’internaute.
Les prochaines versions promettent plus de fonctionnalités. Dès lors, ilsera possible de faire avec une page Web tout ce qu’il est possible defaire avec un logiciel de PAO.
SyntaxeUn style CSS est composé d’un nom de balise qui est, soit une baliseHTML, soit un élément que l’on crée et que l’on appelle « sélecteur »,ainsi que des propriétés et des valeurs qui leurs sont attribuées et quivont permettre de modifier l’apparence de l’élément.
p {font-family: Verdana;font-size: 18px;font-style: bold;color: yellow ;}
64
Dans l’exemple précédent, on indique que la balise de paragraphe seraen caractères « Verdana » de taille 18 points en gras et que la couleursera jaune.
Tous les éléments qui constituent la page devront donc être encodésde cette manière.
Les langages dynamiquesA ce stade, nous obtenons des pages prêtes à l’emploi qui sont idéalespour un petit site, mais qui peuvent vite devenir difficileq à gérer si leurcontenu s’accroît rapidement (ajout de rubriques, etc.).
De plus, si le site est réalisé pour un client, il est fort probable que celui-ci n’ait pas de connaissance en programmation Web mais qu’il désiretout de même le mettre à jour. Il devient donc nécessaire d’aller plusloin et d’opter pour les langages dynamiques.
Les langages clientsIls sont exécutés par le navigateur du visiteur. Le plus bel exemple est leJavaScript qui permet de créer des pop up, menus déroulants, etc.
Il s’agit d’un script qui est intégré directement dans la page, le plussouvent introduit dans l’en tête du document (dans la partie « head »)et son appel s’effectue dans le corps du document afin de le liredirectement lorsque le contenu de la page est chargé.
Pour les scripts récurents, il est possible de créer un fichier « js » similaireà un fichier CSS, ce qui évite de devoir copier l’ensemble du code surtoutes les pages.
65
Petit bémol, la fonctionnalité doit être activée. En effet, certainssurfeurs préfèrent ne pas utiliser cette option.
Il ne faut pas trop abuser de ce type de langage qui permet avant toutde mettre au point des « gadgets » qui, hormis quelques effets« surprenant », n’apportent rien au contenu.
Les langages serveursLe PHP et l’ASP sont les langages dynamiques les plus populaires sur leWeb mais il en existe bien d’autres (Coldfusion, Python, etc.).
Ces langages sont utilisés pour ajouter de l’interactivité aux pagesHTML dites « statiques ». Le principal avantage de ces langages est qu’ilest possible de les utiliser avec une base de données. Il devient dès lorstrès facile de récupérer des données et de les collecter (notamment lesdonnées introduites dans un formulaire).
Outre la possibilité de communiquer avec une base de données, rien nevous empêche de créer un éditeur d’image, un système de gestion desstocks et bien d’autres applications encore, la seule limite étant votreimagination.
Il devient aisé de créer des sites composés de milliers de pages puisquele contenu de la base de données fusionne avec une page HTML type.
Exemple de code PHP
<?php echo "Hello World !" ?>
Le code s’intègre dans la page HTML à l’aide de la balise <? php ?>. Celaindique au serveur (supportant le PHP), qu’il doit l’interpréter.
66
Intégration du contenuLes pages types étant terminées, nous pouvons donc passer àl’intégration du contenu dans les pages. Dans le cas d’un site statique(en HTML uniquement), il faut placer le texte à l’endroit désiré enutilisant Dreamweaver ou un éditeur de texte.
Tester le site
Les règles d’accessibilitéMaintenant que les pages sont programmées, il faut s’assurer que le sitesoit opérationnel et que celui-ci respecte un certain nombre de critèresconnus sous le nom « d’accessibilité ».
Le but de l’accessibilité est de permettre à quiconque de pouvoirconsulter facilement les ressources disponibles sur le Web et cequelques soient le matériel ou logiciel, les différences ethniques etculturelles ou les aptitudes physiques ou mentales des individus. Onpeut prendre l’exemple de la personne aveugle ou d’une personnecherchant à consulter ses sites préférés sur son téléphone portable.
Afin d’arriver à établir des règles uniformes, le W3C a créé desrecommandations connues sous le nom de WAI (Web AccessibilityInitiative) dont une deuxième version est en cours de préparation.Selon le Consortium, les outils de production, le contenu créé et lesoutils de consultation doivent être accessibles. Ses recommandationss’adressent avant tout aux professionnels de l’informatique maispeuvent être et devraient être appliquées par quiconque.
67
La législationCertains gouvernements ayant compris l’intérêt de l’information par lebiais du Web ont décidé de légiférer sur les règles d’accessibilité, afin decontraindre l’ensemble des autorités à les respecter. C’est le cas desEtats-Unis et du Canada et de la Belgique depuis peu.
La Commission Européenne, quant à elle, travaille sur un projetd’accessibilité numérique.
S’il s’agit d’un site dynamique, l’encodage des données aura lieu dans labase de données. La plupart du temps c’est MySQL qui est disponiblechez de nombreux hébergeurs. On peut y avoir accès grâce à un simplenavigateur.
Vérifier le siteDans un premier temps, on vérifiera qu’il n’y a pas d’erreur dans le codeXHTML. Une erreur pourrait empêcher le site de s’affichercorrectement.
Pour cela, on utilise un vérificateur d’accessibilité.
Ils sont disponibles sous forme de logiciel (Dreamweaver par exemple)mais également via des sites Web.
Ces programmes vont analyser le code des pages. Si une erreur estconstatée, la correction à effectuer pour y remédier sera indiquée.
Si les pages sont programmées en HTML, il est possible de faire un testdepuis l’ordinateur. Par contre, si les pages utilisent des langagesserveurs il faudra, au préalable, le mettre sur le serveur.
68
L’ensemble de son contenu (animations vectorielles, images, etc.)devront être accessibles au format texte.
Il faut veiller à ce que toutes les images présentes dans les pages aientune légende.
Si l’image ne s’affiche pas, le navigateur affichera le texte deremplacement. De cette manière, une personne déficiente visuelle auraaccès à l’information grâce à son synthétiseur vocal.
Les « testeurs »Il faut demander à des tiers de visiter le site. Une équipe sera constituéeet chaque personne recevra l’organigramme du site et un « scénario ».
Un scénario est un document dans lequel on indique à un individutoutes les tâches à effectuer. Par exemple, il sera demandé à l’un desvisiteurs de visiter des rubriques précises.
Le but de cette opération est de vérifier que les internautes nerencontrent pas de problèmes lors de sa visite (mauvais affichage,navigation trop compliquée, etc.).
Les « testeurs » auront pour rôle de visiter page après page pour vérifierqu’il n’y a pas d’erreurs d’orthographe ou des oublis flagrants. Ilsdevront également vérifier que les liens soient fonctionnels.
Toutes les erreurs constatées devront être consignées sur papier (ou parcourrier électronique) et transmisse au concepteur. Ce documentreprendra une liste de toutes les erreurs constatées, ainsi que les pagesoù elles ont été constatées. Les testeurs pourront également donnerleurs appréciations.
69
Publication
Maintenant que le site est terminé, il faut le mettre en ligne. Pour cefaire, vous devez utiliser un logiciel « ftp » (filezila par exemple) ou les« favoris réseau » de Windows.
Pour cette opération, vous devez posséder au préalable unhébergement et vous munir des identifiants de votre compte fournislors de l’inscription.
Logiciel FTPL’utilitaire se présente en deux fenêtres : du côté gauche, vous voyezl’arborescence des fichiers présents sur votre disque dur et à droite, lesrépertoires de votre espace Web.
Il faut, dans un premier temps, créer un nouveau compte. N’importequel nom fera l’affaire, par exemple le nom de l’hébergeur. Ensuite, lelogiciel demande le nom d’utilisateur et le mot de passe.
Une fois le compte créé, en cochant sur l’option adéquate (souvent unbouton nommé « connexion »), le logiciel se connecte.
Pour placer les fichiers sur le serveur, il faut simplement sélectionner lesdossiers à copier et les déposer dans la fenêtre de droite.
Filezila, un logiciel FTP
70
Les Favoris réseauxSi on utilise Windows, il n’est pas indispensable de posséder un logicielFTP. En effet, le système d’exploitation intègre déjà cette fonctionnalité.
Les favoris réseaux sont utilisés pour accéder à des dossiers présents surun autre ordinateur. Dans le cas présent, il s’agira de l’espace Web.
On peut ajouter facilement un compte FTP en utilisant l’assistant qui estaccessible à partir du dossier « favoris réseau ».
Il suffit dès lors d’indiquer son nom d’utilisateur et mot de passe et lecompte est créé.
Le compte FTP se présente comme n’importe quel dossier del’ordinateur. Pour publier son site, il suffit d’y déplacer les fichiers et letour est joué.
Un compte FTP affiché via le dossier « Favoris réseaux » de Windows.
71
Marketing
Bien que le développement d’un site prenne du temps (quelquesheures à quelques semaines), il n’en est qu’à ses premiers instants. Leplus gros du travail reste à faire. En effet, il faut sans cesse renouvelerson contenu et sa forme afin de correspondre au mieux aux désidératades visiteurs. Encore faut-il au préalable assurer sa promotion…
Il n’y a aucune garantie à ce que le site soit connu du public. Il faut doncmettre en place des outils pour en faire la promotion.
Il existe différents supports qui conviennent parfaitement. Il seraitévidement impossible de tous les énumérer ici, ce sujet pouvant fairel’objet d’un ouvrage particulier.
Néanmoins voici un bref descriptif des méthodes les plus utilisées.
Les supports « traditionnels »On ne peut s’empêcher de penser aux supports « traditionnels » telsque les imprimés, la presse écrite, la télévision et la radio qui sontsouvent très efficaces car ils touchent beaucoup de monde et unecampagne aura d’autant plus de succès si les supports sont multiples etsi leur nature permette de cibler parfaitement le public. On pensenotamment aux « flyers », pour la promotion d’un concert ; la radio oula télé pour promouvoir un commerce…
72
Tout est une question de budget… S’il y a lieu de faire la promotionpour un site professionnel basant entièrement son activité sur le Web, ilest recommandé d’utiliser la presse nationale et régionale (écrite ettélévisuelle), soit en diffusant un spot, soit en envoyant uncommuniqué. Certaines sociétés se sont spécialisées dans la diffusionde communiqué de presse, mais cela s’avère onéreux.
Toutefois, si vous n’en avez pas les moyens, rien ne vous empêched’envoyer un courrier aux équipes de rédaction, en espérant qu’ilsrelaient l’information.
En ligne
Le référencementIl existe sur le Web deux types d’outils permettant de trouver del’information : soit les annuaires, soit les moteurs de recherche. Lesannuaires répertorient les sites en fonction de leur thématique. Lessites présents dans les annuaires sont référencés par la main del’homme (cf. Yahoo).
Les moteurs de recherche permettent de faire des recherches par motclé. Certains outils permettent également d’utiliser le langage parlé(sous forme de questions) mais ce type de technologie est complexe etdonc peu de sites proposent ce service.
Ces outils sont très répandus. Le référencement est donc une étape trèsimportante dans la promotion d’un site Web.
Cette technique, qui consiste à soumettre son URL aux moteurs etannuaires, est la plus utilisée. D’abord, parce qu’elle est la moinscoûteuse, ensuite parce que dans la majorité des cas les internautes
73
trouvent les références des sites au travers d’un outil de recherche.L’exemple le plus célèbre est le moteur Google dont la réussite ne resteplus à démontrer car s’il ne comptait que quelques milliers de page en1998, en janvier 2007, son index avoisine 6 milliards de références. C’estpour cette raison qu’il est l’un des sites les plus visité.
Malheureusement, vu le nombre de sites indexés, il est parfois difficilede se retrouver en tête de liste et il faut souvent attendre plusieurssemaines avant d’être répertorié et espérer la visite de quelquesinternautes.
Il est à noter que certaines sociétés proposent des soumissionspayantes, qui, bien que rapides, ne garantissent rien quant aux réellesretombées que cela pourrait apporter.
Il est important de signaler l’existence de logiciels et de sites deréférencement qui vous permettent de référencer automatiquementvotre site auprès de milliers d’annuaires. Ici encore, il faut être prudent :une offre alléchante peut vite se révéler inefficace.
Comment fonctionne le référencement ?Les éditeurs des moteurs de recherches mettent au point ce que l’onappelle des « robots », connus également sous le nom de « spiders » ;qui sont des programmes chargés de sillonner le Web.
Ils se connectent aux sites dont on leur a demandé l’exploration, soitpar soumission, soit simplement en suivant les liens présents sur lespages qu’ils indexent.
Lors de leurs passages, ils copient les données présentes sur le site,notamment les mots qui se répètent le plus souvent, le titre des pages.
74
Certains tiennent compte des balises métas.
Le PageRankLe système, mis au point par Google, est légèrement plus compliqué,puisqu’ il se base sur un indice de popularité d’une page. Cet indices’appelle le PageRank et son résultat est obtenu grâce à une équationmathématique.
En résumé, plus une page aura de liens pointant vers elle et plus sonPageRank sera élevé.
Plus les sites référents auront un PageRank élevé et plus le site cible seravalorisé (mis en tête des résultats).
Google ne se base pas uniquement sur la popularité d’une page. Ilregarde également le contenu. Plus un site a de contenu et plus ilaugmente ses chances d’être répertorié.
Les métadonnéesLes métadonnées appelées « balise méta » vont de paire avec leréférencement. Bon nombre de moteurs au début du Web en tenaientcompte. A l’heure actuelle, elles sont très rarement utilisées par lesoutils de recherche.
Certains tentent de remettre au goût du jour ce type de balises. C’est lecas du Consortium Dublin Core. Les métadonnées qu’il proposepermettent d’apporter des informations sur la position géographiquedu site, ainsi que des informations liées à la langue et à l’entrepriseéditrice.
75
Les balises métas sont comprises dans l’en-tête des pages HTML, entreles balises « head ».
Parmi ses balises, on retrouve :
• Une balise de description : résumé du sujet abordé par le site ;• Une liste de mots clés en rapport avec le contenu. Les mots sont
séparés par des virgules ;• Le nom de l’auteur ;
Une balise « d’indexation » : qui indique si la page doit ou non êtreindexée.
Cette dernière peut avoir plusieurs valeurs, à savoir :
• All précise que toutes les pages du site doivent être indexées ;• None indique aux spiders qu’ils ne doivent pas indexer les pages ;• Index autorise l’indexation par le robot ;• Noindex donne l’ordre de ne pas indexer ;• Follow autorise le robot à suivre les liens ;• Notfollow n’autorise pas le robot à suivre les liens.
Elles sont accompagnées de la balise de titre qui est la plus importante,puisque elle doit résumer le contenu de la page. Dans de nombreux cas,les résultats des recherches sont affichés par ordre alphabétique detitre. Certains webmasters utilisent fréquemment des caractèresspéciaux qui apparaissent avant les caractères « ordinaires » pour êtreaffichés en première position.
76
Les échanges de liens et de contenusLe principe d’un site web est d’offrir du contenu au plus large publicpossible. Certains l’ont bien compris. C’est pourquoi de plus en plus desites intègrent un système d’échanges de liens ou proposent des« parrainages » de contenus.
Cette solution, bien que peu évidente à mettre en place, peutaugmenter significativement le nombre de visiteurs et la lisibilité dusite dans les annuaires, surtout si le contenu est régulièrement mis àjour. Un bémol tout de même : il faut l’accord d’autres webmestres etsouvent les contraintes techniques sont nombreuses (bonneconnaissance en programmation, compatibilité des sites, etc.).
Bien que tombés en désuétude ses dernières années, les bandeauxpublicitaires sont toujours présents sur nos écrans. Ceux-ci permettentde donner vie aux liens ce qui n’est pas le cas avec un lien textueltraditionnel. S’ils sont bien conçus, ils peuvent donner envie dedécouvrir le site. Cependant les internautes, souvent harcelés par lepassé, ont tendance à ne plus se laisser duper aussi facilement. Il fautrecourir d’ingéniosité par exemple pour créer des bannières plusdiscrètes sous forme de boutons animés.
Liens sponsorisésIl est depuis peu de temps possible de déposer des annonces textuellesauprès des annuaires et moteurs de recherche. Les annonces crééessont affichées sur les pages de résultats de recherches en fonction desmots clés tapés par l’utilisateur. Cette technique permet de cibler aumieux son public cible et de diminuer les frais mais ne garantit pas lesuccès de l’annonce.
77
Conclusion
La conception Web est un domaine très riche, qui nécessite denombreuses connaissances et compétences tant au point de vuetechnique qu’artistique, ce qui en fait une activité enrichissante.
En réalisant ce mémoire, j’ai constaté que créer un site n’était pas aussiaisé qu’il n’y paraissait… Cependant, ce thème rentre en parfaiteadéquation avec les matières abordées lors de mon baccalauréat.Finalement, la réalisation d’un site Web est fort similaire à la manièredont on élabore un imprimé.
Malheureusement, lors de mes recherches, je me suis aperçu que peude concepteurs respectent les règles élémentaires de mise en page, detypographie, etc. Et parmi les mauvais élèves se trouvent, ceux qui, àmon sens, devraient être les premiers concernés : les professionnels dugraphisme.
De plus, j’ai constaté un désintérêt profond de la part des industriesgraphiques par rapport à ce nouvel outil. Pourtant, celles-ci devraientse pencher d’avantage sur le Web car c’est sans doute le futur del’imprimerie (et des métiers périphériques).
Preuve à l’appui, le format PDF a longtemps été utilisé pour échangerdes informations, avant de devenir le format de prédilection desgraphistes et des imprimeurs.
78
De plus, les technologies Internet sont déjà utilisées. C’est le cas dulogiciel de PAO « Scribus » (open source) qui utilise le langage XML et leconcept des CSS pour faire des mises en page.
La presse quotidienne, quand à elle, s’est déjà adaptée à ce nouveausupport et propose dès à présent ses publications par le biais de sites.
Même si ce n’est pas demain qu’il supplantera les supportstraditionnels, loin de là d’ailleurs, le Web est un concurrent horsnorme…
Pourtant un site peut être utile pour faciliter la communication avec lesclients. La conception peut également devenir un servicesupplémentaire.
C’est donc aux professionnels des industries graphiques qu’ilappartient d’en faire un outil efficace…
79
Bibliographie
LivresWIEDEMANN Ed. J. , Web Design : Music Sites, éd. Taschen, Allemagne,2006 — Web Design : Flash Sites, éd. Taschen, Allemagne, 2006.
CROWDER D., Crowder R. et Lopuck L. , Concevoir et créer un site pourles nuls, éd. First Interactive, France, 2006.
MARAN S., MARAN R., MARAN M. et MARAN J. , Créer des pages Web enHTML c’est simple, éd. First Interactive, France, 1999.
CLAESSENS G. , Référencer et promouvoir son site, éd. Micro Application,France, 2001.
DREW J. et Meyer S. , La gestion de la couleur, guide exhaustif à l’usagedes graphistes, France, 2006
VALADE J. , PHP et MySQL pour les nuls, éd. First Interactive, France,2004
ANDRES C. , Architecture Web, éd. First Interactive, France, 2000
SCHÄFFER F. , Construction de Sites Web, trucs astuces et secrets, France,1999
80
MémoiresWEECKMANS P. , les standards des sites Web, ISET Liège, 2004-2005
GEMIS-MUNEZ G. , l’élaboration d’un site Web de a à z, ISET Liège, 2005-2006
CALAY M. , Les procédés d’impression braille en Belgique, ISET Liège, 2004-2005
CoursHUVELLE M. , Atelier d’animation et de design WEB, IFPME Liège, 2006
Sites WebComment Ca Marchewww.commentcamarche.net
Macaroon Designwww.macaroondesign.com
Smart Pixel — Chromowebhttp://www.smartpixel.net/chromoweb/
Site personnel de Cyril Cambienhttp://ccambien.free.fr/ergonomie/
Encyclopédie en ligne « Wikipédia »http://fr.wikipedia.org/wiki/
81
Université Lavalhttp://aptic.ulaval.ca/guidew3educatif/
Openwebhttp://openweb.eu.org/
Alsacréationshttp://css.alsacreations.com/
82
Table des matières
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Avant de commencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Bref historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Les liens hypertextes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Les navigateurs graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Opéra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Les navigateurs textuels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Les outils pour personne handicapée . . . . . . . . . . . . . . . . . . . . . . . . . . 11
« Clavier braille » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11Le synthétiseur vocal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Le bloc-notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
La conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13La définition d’un projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Rencontre avec le client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Le cahier des charges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
La collecte de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Les photos et illustrations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Le nom de domaine et l’hébergement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Qu’est-ce qu’un nom de domaine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Choisir le bon nom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Choisir un hébergeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
L’ergonomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21La rapidité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22La lisibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22La sobriété . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22L’adaptabilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23L’accessibilité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
83
La conception graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Le lay-out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
La structure du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Le parcours visuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Les différents styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28La couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
La synthèse soustractive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37La synthèse additive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Les caractéristiques d’une couleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Le cercle chromatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Les accords chromatiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Harmonie par analogie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Liens chromatiques simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Liens chromatiques complexes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Les pièges à éviter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Le code RVB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Le code hexadécimal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Le choix typographique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Les caractères bâtons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Les caractères à empattements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Les caractères fantaisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
La création graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Création du document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Dessiner les blocs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Découpes, optimisation et exportation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Les différent formats d’images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Les nuanciers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Création d’un site vectoriel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53La charte graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Programmation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Les différentes versions d’HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59La structure d’une page Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Les possibilités de l’HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Quelques notions d’HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Les feuilles de styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Les langages dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Les langages clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Les langages serveurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Publication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Logiciel FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Les favoris réseaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
84
Marketing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Les supports «traditionnels» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71En ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Le référencement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72Les échanges de liens et de contenus . . . . . . . . . . . . . . . . . . . . . . . . . . 76Les liens sponsorisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
