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 une 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.
D'ailleurs il y a une grosse discussion juridique sur le droit à l'oublis 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 quite par rapport à la société.
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 ?
Cette question de quoi faire (et comment le faire), il faut se la poser, comme un professionel vous la poserait pour faire votre site. Ce sont des pratiques utiles à connaître pour réussir. Eric Dupin du site Presse-Citron a fait un article où il exprime très simplement ce point pourtant capital (dans une optique certes professionelle mais je viens de l'écrire, autant utiliser les "bonnes pratiques"). Je le cite :
- un site pourquoi ?
- pour qui ?
- comment ?
- comme qui (important ça, de situer l'environnement concurrentiel avec un petit benchmark) ?
- qui va dire quoi ?
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. 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.
La 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 vers les autres "chapitres", le plan du site...
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 souffrrants de handicap(s) et pas forcément installé sur le navigateur du visiteur, 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 œvre 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 à toute les pages. Cela est surtout nécessaires 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
- Page d'accueil
Chapitres composants la page d'accueil
- Infos générales sur l'élevage
- Info par race
- Infos générales sur l'éducation des chiens
- Plan du site
- Divers
Sous-chapitres.
- Infos générales sur l'élevage
- localisation (texte et plan)
- races élevées
- Info par race
- origine
- comportement
- prix
- disponibilité (attention, c'est déjà un pas vers le dynamique)
- pension
- Infos générales sur l'éducation des chiens
- propreté
- repas
- sorties
- dressage
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.(cf. le chapitre 2). Je serais 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. 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
- Saison 1997-1998.
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 police, 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ù:
- ligne 1/16 tout ce qu'il y a entre les deux fait parti d'une page Internet
- ligne 2/9 En-tête. N'est pas affiché tel quel ou pas du tout. Permet de définir la page au niveau du comportement ou des moteurs de recherche.
- ligne 3 titre de la page, affiché dans la barre de titre. Je conseille de laisser le nom du site dedans !
- ligne 4 description de la page pour les moteurs de recherche. (Texte affiché dans YAHOO ou GOOGLE par exemple)
- Ligne 5 auteur. Utiles pour se faire connaître ou s'il y a plusieurs auteurs pour le site
- Ligne 6 mots clés. Il faut les choisir intelligemment pour qu'une recherche aboutisse à la bonne page. Exemple, une recherche sur Alta Vista portant sur moto et Melun **DOIT** aboutir ! Je met tous les mots clés du site sur chaque page, plus des mots clés portant sur la page en question. Il semblerait que désormais les moteurs se moquent un peu de cela et index l'ensemble du contenu de la page, en donnant plus de poids - et encore - aux termes qui se trouvent à la fois dans le texte et dans les mots-clés.
- Ligne 7 dans le cas des Proxys, systèmes physiques ou logiciels pour ne pas recharger une page, si il n'y a pas cette ligne, une personne qui visite le site le 01.01 n'a pas accès à une page modifiée le 31.12 suivant !!! Faire varier le nombre de jours en fonction de la versatilité de la page. Est utilisé aussi par les robots pour ne pas venir trop souvent indexer une page.
- Ligne 10/16 corps de la page, c'est ce qui est affiché dans la fenêtre.
Les propriété de la fenêtres sont par défaut fond blanc s'il n'y a pas d'images de fond, texte noir. - Ligne 13 point de retour à la page principale. Sous la forme d'une image. En l'absence de l'image, le texte ALT est affiché. Cela semble redondant avec le title qui suit mais en fait,non ! Title est utilisé pour afficher une bulle d'aide en survolant le lien. IE affiche la bulle d'aide avec alt mais c'est un mauvais comportement puisque ce n'est pas fait pour cela. Apprenez rapidement à utiliser les bons outils pour faire les bonnes actions. L'image est cadrée à droite, le texte devrait s'afficher autour et pas dessous (pas toujours vrai, dépend du navigateur. Ces informations devraient être dans le fichier CSS et non dans le fichier HTML)
- Ligne 14 titre de la page. Je reprends encore le titre du site, cette ligne étant plus visible que le titre de la fenêtre. Elle est obligatoirement de type "h1" car c'est le titre le plus important. Des sous-titres seront de type "h2", "h3"..."h6"
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, si 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ébergé 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 tous 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 toutes 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" 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 ! 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 occurence comme dans mon CV
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 extentions... 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 exempe, 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.
Pour un petit site statique, je conseil d'utiliser le bloc-note, 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 (ou WORD) 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'utilise OPEN OFFICE uniquement pour les pages de formulaires (inscriptions aux organisations, à la liste de diffusion) mais il est aussi verbeux. Les documents que j'obtient de la mairie au format Word montrent également le "gachi" 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'obtient 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é par un navigateur américain ou japonais ! Et ils ne le sont pas plus sur certains navigateurs mobiles (téléphone, PDA...), comme celui de mon 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éniens.
é é ç ç ê ê è è ë ë
Pour les autres lettres, il suffit de changer le caractère après le &
à à etc.
règle 3 : si une page est longue à charger, le visiteur zappe ! Ou le navigateur sur un mobile, encore une fois, qui priviliera 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 ce engins paye parfois très cher au poids transmis.
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'images s'affichent petit à petit. Or, ces x petites images sont plus lourde qu'une seule grosse, du fait que l'entête qui était unique 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 !
Règle 4 : si on recueuil 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 (fichiers sur le disques 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"...
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
- L'architecture du site (un blog n'est jamais qu'un site après tout) est globalement gérée par Dotclear et l'aspect par le thème choisi. Si on a peu de pouvoir sur le premier point (mais un programme, ça se modifie), le second peut être de notre ressort. On peut partir de rien et tout créer si on a de bonnes dispositions pour la programmation et le design ou utiliser un thème existant mis à disposition par son auteur.
J'ai pour l'instant adapté des thèmes existants pour les faire coller le plus possible au sujet de mes blogs. - On peut ouvrir très facilement le blog à plusieurs rédacteurs, bien plus facilement qu'un site plus traditionnel. J'ai ainsi ouvert le blog du site mcmelun.free aux membres du bureau du MCMS avant de transformer mcmelun.free en site des archives du MC, ce qui ne justifie plus cette ouverture. Il n'y a d'ailleurs plus de blog sur ce site.
- Comme il existe des thèmes, il existe des extentions très simples d'utilisations pour augmenter les possibilité du blog. Remercions donc la communauté de programmeurs.
- Si le contenu des articles est intéressant, on a vite fait de regrouper une comunauté autour de soi. Les lecteurs viennent souvent, s'abonnent aux flux, laissent des commentaires (auxquels il faut imp&eacuet;rativement répondre) et pourquoi pas finissent par devenir rédacteurs de contenus. On crée alors ce qu'on appelle un réseau social et c'est une des forces du blog.