1 Création du site

Tout d'abord, il faut savoir de quoi parler et se demander si cela vaut le coup d'en faire un site. Si on n'a rien à dire, ce n'est pas la peine de faire tout un site, une simple page suffit, se taire est parfois encore mieux car le Net n'oublie rien et surtout pas le pire. Et puis des sites vides de contenu, il en existe déjà tant...
D'ailleurs il y a une grosse discussion juridique sur le droit à l'oubli que ne permet plus Internet : Une personne qui a fait une bêtise pour laquelle elle aurait été jugée et qui aurait purgée sa peine ne serait plus quitte par rapport à la société. Et sans aller si loin, on a parfois envie de ne pas voir "tout le temps" les mêmes choses nous revenir au visage dès que l'on tape son nom sur un moteur de recherche. Car il ne faut pas oublier non plus que ne pas être présent sur le net et parfois plus préjudiciable encore que certaines - petites - entorses borderline !
D'ailleurs, de plus en plus souvent, un éventuel employeur tape le nom d'un candidat sur Google ou dans les réseaux sociaux ! Autant y être de façon positive, non ? Même si le droit à l'oubli est maintenant reconnu en France, c'est parfois difficile à se faire entendre des sociétés à plus forte raison quand elle n'est pas sur notre territoire (genre Facebook, Google et consorts). Pour l'instant cela n'a été qu'une (mauvaise) blague, mais une autrichienne a fait un procès à ses parents pour 500 photos d'elle jeune, dans des positions pas forcément valorisante (bébé sur le pot, tout ça). Je le répète c'était une blague, démystifiée depuis, mais rien n'empêche demain une vraie histoire de ce genre.

Cette question de quoi faire (et comment le faire), il faut se la poser, comme un professionnel vous la poserait pour faire votre site. Ce sont des pratiques utiles à connaître pour réussir. Eric Dupin du site Presse-Citron avait fait un article où il exprime très simplement ce point pourtant capital (dans une optique certes professionnelle mais je viens de l'écrire, autant utiliser les "bonnes pratiques" pro). Je le cite :

Afin d'organiser ses idées, rien de mieux que de faire un plan du site sur papier avant même de commencer à chercher quoi faire au niveau du design (même avec une écriture déplorable comme la mienne ;o) . A partir de ce plan, on peut tirer l'architecture du site, en définissant les grands "chapitres" et les "paragraphes" qui vont amener le visiteur vers l'info qu'il cherche, les liens qui vont exister entre les pages...

croquis de siteLa page d'accueil étant le point d'entrée sur le site, elle doit contenir tous les renseignements indiquant de quoi parle le site ainsi que les points d'accès au moins vers les autres "chapitres", le plan du site, les infos légales, trop souvent oubliées...
Elle peut être unique ou en plusieurs volets : le premier volet affichant un minimum d'infos et passant automatiquement - ou pas - à la page principale. Cette technique n'est plus recommandée; surtout si l'action pour la transition n'est pas évidente ou qu'elle utilise exclusivement du Flash, peu accessible pour les personnes souffrants de handicap(s) et pas forcément installé sur le navigateur du visiteur (ou son support, genre téléphone à la pomme), qui se trouveras dès lors devant un site vide de contenu : se serait-il pas frustrant de perdre des visiteurs pour cela après avoir mis tant de temps et d'efforts dans une jolie page, non ? Toutefois, on peut mettre en œuvre des animations graphiques élégantes, des petits films comme sur certains site commerciaux, à condition d'ajouter des "boutons textuels" faciles à comprendre (genre "passer l'intro"), le mieux étant alors de le poser en dehors du Flash. Surtout que les moteurs de recherche sont eux aussi plutôt allergiques au Flash, même si Google a annoncé qu'il allait en indexer les contenus !

Le plan du site devrait contenir un accès à toutes les pages. Cela est surtout nécessaire si le site utilise des cadres et que le visiteur utilise un navigateur trop vieux ou qu'il inhibe l'affichage des cadres. Si on tient quand même à faire un site utilisant des cadres, il peut être intéressant de définir un deuxième point d'entrée pour ce type de visiteur... Pour qu'ils puissent leur permettre de réaliser une navigation quand même. Cela permettra également aux moteurs d'indexer l'ensemble du site (voir la page 3 sur la publicité)

Par contre, j'ai fait le choix de ne pas mettre toutes les pages sur le plan. Pour les Mouettes (l'ex-journal interne du MCMS) par exemple, il y en a juste deux : le point d'entrée aux Mouettes et l'index des Mouettes.

Exemple : un élevage de chiens

Chapitres composants la page d'accueil

Sous-chapitres.

On remarquera que les pages "Infos par race" se trouvent aussi bien en tant que "chapitre" qu'en sous-paragraphe dans le "chapitre" Infos sur l'élevage. Naturellement, il s'agira des mêmes pages, avec plusieurs points d'accès.

Ce plan papier sera intégralement repris dans le fichier plansite.htm

En face de chaque ligne, on placera un nom de fichier. Même si on peut utiliser des noms de fichiers longs, avec des blancs, des caractères accentuées ou spéciaux, je conseille, pour des sites assez courts de s'en tenir aux caractères non accentués, en minuscules, avec pour seul caractère spécial, le souligné "_" à la place du caractère "espace". En effet, on ne sait pas forcément par avance si le serveur sur lequel sera hébergé le site est un serveur Windows ou UNIX et ce n'est pas la même chose au niveau des noms !!! Sans oublier la traduction en hexadécimal des caractères ASCII (%20 pour un espace) qui rendent vite les URL illisibles, mais toujours fonctionnel.(cf. le chapitre 2). Je suis désormais moins regardant sur la taille du nom de fichier (avant je conseillais le format 8+3 du DOS) car il semblerait que placer des mots clés dans le nom de fichier facilite le référencement. Et cela facilite la maintenance du site par la suite : il vaut mieux un nom du genre hebergement_en_gite.htm que hebgite.htm quand on reprendra le site 10 ans plus tard.

On utilisera le décalage avec des blancs ou des tabulations pour voir les différents niveaux de chapitre / paragraphe / sous-paragraphe / sous-sous-paragraphe... Il faut par contre savoir que les navigateurs n'en ont rien à faire et vont allègrement tout coller à gauche, voir même à la suite l'n de l'autre. Pour afficher dans le navigateur le décalage, il faudra utiliser les options de liste ("xL" et "LI") ou le CSS.

Par exemple, sur le site des archives du MCMS, pour afficher la page suivante, on code

<li><a href="saison00.htm">Conseil d'Administration Saison 2000</a></li>
<ul>
<li><a href="tarifs.htm">Tarifs d'adhésion </a></li>
</ul>
<li><a href="membre00.htm">Adhérents</a></li>
<li><a href="historik.htm">Historique</a></li>
<ul>
<li> Saison 1997-1998.</li>
<ul>
<li><a href="saison98.htm">Conseil d'Administration </a> </li>
</ul>
</ul>

ce qui donne (attention, les liens n'en sont pas, inutile de cliquer dessus)

  • Conseil d'Administration Saison 2000
    • Tarifs d'adhésion
  • Adhérents
  • Historique
    • Saison 1997-1998.
      • Conseil d'Administration

Le code <ul></ul> permettant de définir le décalage dans l'affichage sous forme de liste (code <li>).

Une fois le plan écrit, on crée un fichier vide qui va contenir tout ce qui doit toujours se présenter à l'écran, de façon à avoir un site cohérent : couleurs, styles des polices, image de fond... On pourra même créer des fichiers vides différents si on installe un système de répertoires pour contenir les différentes branches du site (un par répertoire).
Le paramétrage serait encore mieux conçu s'il se trouvait dans des fichiers CSS. Les appels à ces fichiers seront naturellement inscrits dans le fichier vide.

Une fois ce fichier vide créé, il suffit de le recopier autant de fois qu'il y a de pages dans le plan en utilisant le nom défini dans le plan. Une fois cela fait, le site existe, même s'il est encore vide !

Pour le site des archives du MCMS, le fichier vide est de la forme :

1<html>
2<head>
3<title>Archives du MCMS jusqu'a la saison 2007-2008 - titre de la page </title>
4<meta id="Description" content="Archives du MCMS jusqu'a la saison 2007-2008 - description de la page" />
5<meta id="Author" content="F. 'Bob' ROBAR" />
6<meta id="keywords" content="moto, motos, side, sidecar, moto-club, mcms, motards sympas, france, seine et marne, melun, balade, balades, tourisme, sport, ffm, rallyes, dragster, mots clés de la page" />
7<meta id="revisit_after" content="15 days" />
9</head>
10<body>
13<a href="mcms.htm"><img src="mcms.jpg" alt="retour page principale" title="retour page principale" align="right" hspace="3"></a>
14<h1>Archives du MCMELUN jusqu'a la saison 2007-2008 - Titre de la page</h1>
15</body>
16</html>

où:

Pour un site un peu fourni, j'ajoute également la date de création des pages, celle de modification, le nom du publisher (publieur en Français ?), l'url du point d'entrée (unique pour toutes les pages du site), un copyright, le n° de version, le langage des pages... Parce qu'avoir plus de texte dans l'entête que dans le corps des pages, ça fait désordre ! Certaines de ces propriétés ne sont plus à utiliser (en fait non, elles ne sont plus dans la norme, rien n'empêche de les utiliser, mais elles "plantent" le validateur). Vu qu'elles me sont quand même utiles dans ma démarche de suivi des sites, je les laisse, mais en commentaire pour ne pas perturber la validation.

Voilà, il ne reste plus qu'à taper les bons paramètres, les textes avec les liens, intégrer les photos qui peuvent également servir de liens, et à tester tous les liens internes au site, hors connexion.

Ensuite, s'il y a des liens externes, les tester après connexion (utiliser le champ "title" pour indiquer que le lien est externe est un plus pour faire la différence). Cela peut être effectué par un outil, en lui passant page par page le site à tester.

Tout cela est possible sans avoir encore fait héberger; son site... Mais dans le cas où le site est hébergé, on peut exécuter l'outil qui fera ces tests pour nous sur l'ensemble du site en une seule fois en lui passant l'URL du site.

Avez-vous remarqué que je n'ai pas encore parlé du design du site ? En fait à notre niveau, on peut totalement dissocier le design et le contenu et fignoler notre contenu. C'est lui qui sera référencé et qui permettra aux visiteurs de trouver notre site. Une fois celui-ci en place, on pourra toujours le mettre en couleur ! Mais là, désolé, je ne suis pas assez calé côté artistique pour vous donner des idées ni encore moins des conseils. Pour un site "pro", cette démarche doit intervenir en même temps (voire avant) que la mise en place du contenu.

Par contre, que l'on soit pro ou amateur, une règle doit guider nos pas : on choisit une charte (un ensemble de couleurs, de positions des blocs les uns par rapport aux autres, etc.) et on la "plaque" sur toutes les pages.
A la limite, si on a un site séparé en plusieurs chapitres biens définis, on changera la couleur (et que la couleur) pour chacun de ces chapitres (comme sur Alsacreations.fr). Mais cela est déjà du fignolage...

Règles à avoir à l'esprit

Règle 0 : Penser aux handicapés qui n'utiliseront pas les mêmes navigateurs que vous ou aux personnes qui n'utilisent pas un ordinateur pour accéder au WEB (si, si, il y en a... Avec un smartphone par exemple, tout le monde dans ce cas n'utilise pas un des tout derniers modèles qui permet presque de ne pas voir de différence entre le site vu sur un écran d'ordinateur et le même site vu sur un petit écran... Enfin à part la taille).

De toute façon, rien ne permet de dire que ce qu'on fait sera visible de la même façon par tout le monde.
La guéguerre entre Microsoft et Netscape (à l'époque de la version 4) a fait que certaines fonctionnalités ont marché chez l'un (image de fond fixe MS) ou chez l'autre (texte "clignotant" de Netscape). Des versions de navigateurs non graphiques ou anciennes qui ne prennent pas en compte cadre, CSS ou images existent toujours, sans compter que l'utilisateur (ou son gestionnaire de réseau) peut paramétrer son navigateur pour refuser de les afficher, sans compter le refus de Flash, du javascript, etc. pour des raisons de lenteur de la connexion, de sécurité...
Avec les CSS, on s'aperçoit maintenant que les standards ne sont pas interprétés de la même façon par IE et les autres navigateurs (sachant que c'est IE qui ne fait pas ce qu'il faut le plus souvent !) Par exemple, pour mettre en avant les acronymes et autres abréviation, il existe deux verbes "ACRONYM" et "ABBR", qui ne signifient pas tout à fait la même chose... Ce serait simple si IE n'en "oubliais" pas un et Netscape l'autre ! Donc une solution, consiste à ne pas les utiliser (ni l'une ni l'autre) et à indiquer en clair dans le texte la signification pour la première occurrence comme dans mon CV. Dans la norme HTML5, "ACRONYM" disparaît carrément, rien n'est figé en fait, d'ailleurs la validation suit la règles courante et un site qui passait haut la main à un instant T peut présenter des erreurs quelques temps plus tard (je le sais, cela m'est arrivé !)

De même, pour êtes certain d'avoir accès à la majorité des lecteurs, la première règle est de ne pas utiliser Frontpage ou des produits du même genre, fortement propriétaire surtout avec les extensions... Mais surtout Frontpage. Déjà parce que les superbes possibilités du logiciels ne permettaient pas d'être hébergé sur un serveur UNIX mais surtout parce qu'elles ne tournent pas sous les vieux Netscape et ne donnent rien avec un autre navigateur que IE quand elles ne plantent pas lamentablement la navigation. Ne pas respecter cette règle, c'est être certain de passer à côté d'un certain nombre de "clients" potentiels (Pas loin de 15% si on croit le 85% d'utilisateurs de IE sur le net à l'époque où j'ai écrit ce texte, bien plus maintenant avec Firefox, Opera, camino et Konqueror : par exemple, début décembre 2007, 71% pour IE sur mes sites, en baisse régulière en faveur surtout de FF depuis 3 ans, mais 31% seulement sur mon blog moto.) !!!

Règle 1 : Avant toute chose, sachez qu'il convient d'écrire les balises et les propriétés en minuscules et non plus en majuscules et/ou minuscules comme on le faisait avant. L'XHTML et l'XML l'imposent et comme l'avenir semble tendre vers ces langages, autant s'y mettre, d'autant plus que cela ne pose aucun problème en HTML. J'utilise d'ailleurs la syntaxe XHTML sur tous mes sites "vivants", écrits "à la main", ce qui me permet de n'en retenir qu'une et de choisir la moins permissive, toujours dans l'optique d'un respect des standard W3C. Et c'est valide en HTML5.

Pour un petit site statique, je conseille d'utiliser le bloc-notes, voir VI pour les UNIXiens, ou un éditeur gratuit du genre de Hapedit qui a l'avantage de mettre en couleur la syntaxe, et pour les plus fainéants, OPEN OFFICE (Libre Office ou WORD on n'importe quel autre traitement de texte) qui sait générer du HTML à partir d'un document texte ,tableur ou présentation plutôt qu'un éditeur WYSIWYG [What You See Is What You Get, ce que vous voyez est ce que obtiendrez ou éditeur graphique] lourd du genre de Dreamweaver : je n'ose pas croire qu'une personne qui souhaiterait apprendre à piloter un avion commencerait directement par un 747.
Par contre, il sera préférable de faire le ménage ensuite dans les balises inutiles et/ou redondante, dans les fichiers générés (WORD depuis la version 2003 génère du XML dans le HTML avec le CSS inclus, c'est une horreur)...
J'utilisais OPEN OFFICE uniquement pour les pages de formulaires (inscriptions aux organisations, à la liste de diffusion) mais il est aussi verbeux. Les documents que j'obtiens de la mairie au format Word montrent également le "gâchis" de la génération. Je les retravaille ensuite "à la main" pour leur faire perdre du poids : pour un conseil municipal de 46Ko au format Word, j'obtiens un fichier HTML de 38 Ko. Une fois passé à la moulinette et en ajoutant encore les éléments de décoration et de navigation propre au site, le fichier ne fait plus que... 7 ko !!!

Règle 2 : tout le monde n'est pas Français ou assimilé. Donc s'il ne faut pas forcément doubler toutes ses pages en Anglais (pour un site international, c'est mieux) il faut déjà éviter d'utiliser les caractères accentués ou spéciaux tels quels. Ils ne sont pas forcément affichés par un navigateur américain ou japonais ! Et ils ne le sont pas plus sur certains navigateurs mobiles (téléphone, PDA...), comme celui d'un ancien téléphone par exemple. Au mieux, on obtint un petit carré, au pire un caractère totalement illisible
Il faut prendre l'habitude dès l'écriture d'utiliser les codes correspondant. C'est contraignant, mais c'est le seul moyen de ne pas en oublier. Remarque: Word et Openoffice le font à notre place, ils n'ont donc pas que des inconvénients.

&eacute; é &ccedil; ç &ecirc; ê &egrave; è &euml; ë

Pour les autres lettres, il suffit de changer le caractère après le &

&agrave; à etc.

Règle 3 : si une page est longue à charger, le visiteur zappe ! Ou le navigateur sur un mobile, encore une fois, qui privilégiera quand même le texte aux images si la page devient trop grosse : il existe des solutions pour supprimer l'affichage des images dans l'optique d'un affichage sur mobile, d'autant plus que l'utilisateur de ces engins paye parfois très cher au poids transmis (et en cas de dépassement de forfait, c'est jackpot à l'envers !), en javascript ou plus finement avec les media queries.

Donc il est convenu, pour les navigateurs courants, de ne pas dépasser 70 Ko par page, sauf à prévenir avant de cliquer le lien. Et dans ces 70 Ko, on compte aussi bien le texte que les images !!!
Référentiel ADAE, Merci Raphaël

Donc, mieux vaut créer des vignettes pour avoir un petit aperçu de l'image (motos des membres) et un lien vers l'image en grand (dragster de Pollux ou de Fô, images du BB 2000) et d'éclater sur plusieurs pages ce qui est trop gros sur une seule (concessionnaires, fabricants d'accessoires...) Avec un système de cadres et une ergonomie poussée, cela permet même de donner un meilleur look au site (à mon avis, mais il existe des réfractaires aux cadres. Il existe des alternatives avec un design rapprochant comme sur le site de la mairie mais ce n'est plus du simple HTML, je fais appel au PHP pour générer ces pages) : par exemple, accès aux motocistes, en passant par la région, puis le département.
Pour les grandes images, il peut être intéressant d'utiliser le mode d'affichage progressif lors de la sauvegarde plutôt que l'internaute ait l'impression qu'il ne se passe rien sur la page tant que l'image n'est pas complètement chargée... On conseillait auparavant de découper ces grands images en plusieurs petites, de façon à ce que des morceaux de l'image s'affichent petit à petit. Or, ces x petites images sont plus lourdes qu'une seule grosse, du fait que l'entête qui était unique avec une seule est désormais présent pour chaque morceau et augmentent artificiellement le nombre de hits, appel à un fichier sur le serveur, ce qui peut parfois poser des problèmes chez son hébergeur quand on a un compte de base !

Règle 4 : si on recueil des infos sur les visiteurs, il faut les prévenir (loi informatique et liberté oblige - de plus, la loi Len impose plus de précaution.) et ne pas créer de cookies (fichier sur le disque du visiteur pour connaître ses préférences) sans son accord. Certaines personnes refusent d'accéder aux sites commençant par demander l'écriture de cookies !!!

Règles 5 : utiliser au minimum les tableaux, et de préférence des tableaux de petites tailles. Les navigateurs chargent complètement la page avant d'afficher le contenu du tableau. Cela peut se traduire par un écran vide pendant longtemps, donc zappe ! Si possible, ne pas utiliser la mise en page avec des tableaux mais uniquement les tableaux pour ce qu'ils ont été défini : afficher des lignes et des colonnes de valeurs.

Règle 6 : ne pas faire un site où la navigation n'est que graphique. Ou prévoir une version texte. Ceci pour des raisons d'accessibilité au contenu.
De plus, pour des raisons de coûts de connexion, un nombre d'internautes encore important annulent l'affichage des images (appareils portables ou absence d'ADSL). Elles ne sont pas chargées. Le navigateur affiche un rectangle à la place... On DOIT utiliser ce rectangle pour afficher un texte de remplacement (alt, longdescr) qui remplace le message porté par le dessin sans quoi le rectangle est vide (le alt sera vide sur les dessins qui n'apportent rien au contenu du site, comme un astérisque mis en début de paragraphe). Un visiteur qui ne peut pas naviguer sur un site, zappe et ne revient jamais ! Si quelqu'un autour de vous possède un téléphone portable connecté WAP ou WEB, faites donc l'expérience, elle est édifiante (il faut d'ailleurs que je retouche mes sites). Le CSS permet de gérer différemment un seul site pour prendre en compte ce genre d'effet, je vais le tester sur le site de la mairie.

Règle 7 : si on veut "juste" faire un site pour montrer ce que l'on sait faire, oublier les règles 3, 4 et 6 et en mettre plein la vue et les oreilles, avec du Flash, des animations, de la musique, des images et des vidéos dans tous les coins, une ergonomie "décalée"...

Je rajouterai bien une règle 0, soignez orthographe et grammaire, il est très préjudiciable de lire un article, fut-il fortement argumenté s'il est truffé de fautes... Je viens d'en corriger une vingtaine au moins, rien que sur cette page ! Les correcteurs des traitements de textes sont utilisables pour corriger les textes (depuis le navigateur, copier le texte, le coller dans le traitement de texte et regarder le nombre de fautes qui s'affichent, c'est parfois édifiant ! J'ai également eu la chance sur mon site sur la Bretagne de bénéficier des bons services d'une personne amoureuse de notre langue qui a pris le temps de me corriger, merci à elle.

Cas d'un blog

Aujourd'hui, le phénomène blog ne peut nous laisser indifférent lorsque l'on veut créer un site.

J'ai décidé d'utiliser Dotclear pour réaliser mes blogs, mais il existe d'autres plateformes, comme Wordpress, Blogger.

Avantages

Inconvénients


Retour au menu - Page suivante