INFORMATIQUE : CRÉER UN SITE WEB

Des heures de plaisir en perspective!

Un site Web est constitué d'un ensemble de pages et de documents reliés entre eux par des liens hypertextes, consultables sur le Web, c'est-à-dire sur la toile mondiale des serveurs offrant des contenus se conformant au protocole HTTP (HyperText Transfer Protocol) et conçus dans le langage HTML (HyperText Markup Language).

Conception et réalisation

La réalisation d'un site Web comporte un aspect technique (la création du contenu, les différents langages, la programmation) et un aspect esthétique (la présentation du contenu, la création de graphiques et d'animations, le choix des couleurs et de la police, etc.) auxquels on doit attacher une égale importance.

La crédibilité d'un site Web repose, en effet, non seulement sur la qualité et la fiabilité de son contenu, mais également sur la qualité de son design (la composition de la page, le choix des couleurs et des éléments graphiques, la typographie, la cohérence visuelle...); on devra donc faire preuve de créativité artistique tout autant que technique.

Il existe d'excellents sites consacrés à la conception et à la réalisation de sites Web. Par exemple : W3Schools (en anglais, tutoriels pour débutants et initiés : HTML, XHTML, CSS, XML, JavaScript, DHTML, Flash, ASP, multimédia et WAP; exemples modifiables en ligne), Alsacréations (pour créer des sites Web grâce aux CSS et XHTML : tutoriels, forums, blog, FAQ), Le Site du Zéro (cours et tutoriels pour apprendre à créer un site Web), CSS play (en anglais, démonstration des possibilités du CSS : menus, galeries de photos, images, animations, texte, etc.). Je vous propose plutôt ici quelques outils, conseils, suggestions et ressources qui pourront vous aider à bien démarrer la mise en chantier de votre site ou, encore, vous guider dans la modification d'un site déjà existant.

Quelques conseils sans prétention

Projet

Concevoir un site Web, c'est bien; avoir quelque chose d'intéressant à dire, c'est mieux. On définira donc un sujet susceptible d'intéresser un certain nombre de personnes, un public auquel on proposera de l'information pertinente en regard de l'objectif visé. On évitera de faire un site pour faire un site.

Design

Il faudra décider, selon la structure du site, entre un design fluide, extensible, qui s'adaptera à la largeur de la fenêtre du navigateur, et un site à largeur fixe, chacun ayant ses contraintes propres. Certaines présentations se prêtent bien à un design fluide, d'autres moins. Dans le cas d'un site qui comporte beaucoup d'éléments devant être précisément positionnés, un design fixe peut s'avérer préférable car un design fluide, par définition, se déforme selon la résolution.

Contenant

Choisir soigneusement le contenant, l'enveloppe du site. Ainsi, un blogue devrait être avant tout une publication de billets ou d'articles sous forme de journal de bord et ne devrait pas, par exemple, servir à monter un site de recettes ou d'astuces informatiques; un forum est un espace virtuel qui permet à un groupe de personnes de discuter, d'échanger des opinions et des idées sur un thème donné, chacune pouvant voir les interventions des autres et intervenir à tout moment; un annuaire est un site Web, généraliste ou spécialisé, où sont recensés et répertoriés manuellement d'autres sites classés par catégories ou rubriques.

On s'assurera donc de choisir le contenant le plus approprié au contenu.

Contenu

Réunir les informations en relation avec le sujet traité (textes, images, sons, vidéos), les sélectionner puis les regrouper selon la structure définie. Favoriser un contenu pertinent, clair et concis, adapté pour le Web.

Textes

Rédiger des textes courts, bien mis en valeur, exempts de fautes d'orthographe et de grammaire, qui vont droit au but. Adopter un style rédactionnel adapté au Web (voir : Rédiger pour le Web).

Images

Intégrer quelques images pertinentes en veillant à ce que leur poids ne ralentisse pas trop le chargement de la page (analyseur de poids de page).

Les attributs alt et title

Dans le code HTML, l'attribut « alt » sert à mettre un texte de remplacement qui sera affiché en l'absence d'une image, d'un formulaire ou d'un applet, tandis que l'attribut « title », qui permet l'affichage d'une infobulle, donne des informations consultatives concernant l'élément sur lequel il se place.

Éviter d'établir, sans permission, un lien direct vers une image publiée sur un autre site pour l'afficher sur son propre site, blogue ou forum : cette pratique, appelée hotlinking, entraîne l'utilisation du serveur d'autrui et constitue ainsi un vol de bande passante. Pour mettre une image provenant d'un autre site (en respectant les droits d'auteur et les conditions d'utilisation, il va sans dire), l'enregistrer et la placer sur son propre serveur, et indiquer correctement la source, s'il y a lieu.

Musique

Une musique qui démarre automatiquement à l'ouverture d'un site peut être ressentie comme une agression et une nuisance. Il ne faut pas oublier que plusieurs personnes naviguent en écoutant leur propre musique ou utilisent leur ordinateur tard la nuit ou dans des endroits où le bruit peut déranger. Si on y tient, il vaudra mieux proposer plutôt qu'imposer. À cet effet, on pourra utiliser un lecteur comme Dewplayer (lecteur mp3 pour le Web sous licence Creative Commons), et donner le choix à l'internaute de démarrer ou non la pièce musicale. Ne pas oublier de respecter les droits d'auteur.

Droits d'auteur

Le plagiat ne s'applique pas qu'aux éléments originaux d'une page ou d'un site (images, photos, textes, musique...); il s'applique aussi au concept même de la dite page ou du site.

Si la richesse d'un site Web tient beaucoup à son originalité, tant dans son contenant que dans son contenu, rares sont les webmestres qui peuvent se targuer d'avoir tout créé sans aucun emprunt à d'autres sites ou d'autres sources. Il y a cependant moyen de présenter l'information de façon très personnelle, à l'intérieur d'un cadre graphique distinctif.

Par exemple, une procédure concernant un paramétrage Windows ne peut être réinventée; par contre, le texte décrivant cette procédure ou la démonstration graphique qui l'accompagne peuvent être une création originale et appartiennent dès lors à leur auteur. Dans le même ordre d'idée, copier intégralement le code source d'un site ou une partie de celui-ci sans autorisation est inadmissible dans l'univers de la webmestrie. Tout comme s'approprier un modèle graphique sans permission ou en supprimer les mentions de copyright.

Par considération envers le travail d'autrui, on citera donc la source de l'information reproduite ou on mettra un lien direct vers la page qui contient l'information en question. La rumeur circule rapidement sur le Web : pourquoi risquer de perdre sa réputation? On respectera donc les droits d'auteur, explicites et implicites.

Navigation

Réaliser un système de navigation accessible et discret. Vérifier les liens (internes et externes) avant la publication. Un principe simple, à respecter en tout temps : le moins de clics possible pour accéder à l'information désirée. Dans cet esprit, éviter la page d'entrée ou page tunnel : si un internaute choisit d'aller sur un site, il est évident qu'il voudra y entrer. Non seulement une telle page retarde-t-elle l'accès à l'information pour les visiteurs, elle leur impose une étape de plus pour accéder au contenu.

Logo

Par convention, un clic sur le logo du site, habituellement placé en haut à gauche, devrait permettre de revenir sur la page d'accueil. Logiquement, on veillera à désactiver le lien sur la page d'accueil elle-même.

Longueur des pages

Éviter de faire des pages d'un kilomètre de long, comme on en voit trop souvent sur les blogues, notamment. Si, pour une raison ou pour une autre, ce n'est pas possible, insérer des repères qui faciliteront la navigation sans qu'il soit nécessaire de toujours utiliser la barre de défilement verticale, parfois très réduite. Dans les archives du site, par exemple, j'ai placé des ancres qui séparent les petits mots par année de publication, ce qui permet de descendre ou de remonter rapidement et facilement dans la page.

Interactivité

Sans toutefois exagérer, ajouter formulaires, livre d'or, adresse de courriel, sondages... afin de permettre aux internautes de vous contacter et de vous faire part de leurs réactions. Répondre aux messages dans un délai raisonnable.

Publication

Réserver un nom de domaine, s'il y a lieu, et prendre contact avec un hébergeur qui répondra à vos besoins, selon vos moyens. À l'aide d'un client FTP (un logiciel de transfert de fichiers) comme FileZilla, par exemple, transférer (copier) les fichiers de l'ordinateur sur le serveur. Prendre bien soin de conserver une copie du site sur l'ordinateur et, idéalement, sur au moins un support externe, pour plus de sécurité.

Tester et re-tester

Pendant la conception, tester les pages sur différents navigateurs (Firefox, Opera, Safari, Chrome, les différentes versions d'Internet Explorer...) et, si possible, sur différents systèmes d'exploitation afin de s'assurer d'un affichage le plus identique possible. Vérifier aussi l'affichage sous différentes résolutions d'écran (800 x 600, 1024 x 768, 1280 x 960, etc.); un petit logiciel comme MultiRes pourra faciliter cette tâche. Une fois le site transféré sur le serveur, tester à nouveau toutes les pages. Vérifier aussi tous les liens, internes et externes.

Mise à jour du contenu

Un site Web n'est jamais terminé : il doit évoluer, s'enrichir progressivement et répondre, dans la mesure du possible, aux attentes des internautes qui le consultent et le comparent. Il nécessite donc des mises à jour régulières, un excellent suivi ainsi qu'une vérification périodique de la validité des liens externes et internes.