Conception d'un site web

Cette page aurait du être la première de ce site car la réalisation d'un site web commence par faire ce qui est dit ici.

Cette page est la dernière de ce site car avant de se lancer dans la réalisation d'un site, il faut savoir ce qu'il est possible d'y mettre et comment le faire.

Cela, toutes les pages précédentes l'ont présenté. Maintenant, il est intéressant de passer à la réalisation. Mais avant de se jeter sur le clavier, il faut réfléchir...

Pour aider cette réflexion, voici encore une page à lire. Rien ici n'est absolu ni impératif, cette page est juste là pour aider à la réflexion voire donner quelques idées.

Cahier des charges

Le mieux avant de réaliser un site est d'en écrire le cahier des charges.

Là aussi cette page est une aide à cette réalisation.

Et si vous réalisez un site pour d'autres, le cahier des charges est un bon moyen pour savoir exactement ce qu'il faudra faire.

Sur ce dernier point, on peut constater qu'il est souvent difficile de faire exprimer par ceux qui ont peu de connaissances sur le web ce qu'ils veulent vraiment et qu'au fur et à mesure de la réalisation leurs désirs changent, parfois au point de mettre la structure du site en péril. Il est donc judicieux de voir au tout début le maximum de choses qui concernent la réalisation du site.

Définir les objectifs du site

Vous envisagez de construire un site. Donc vous savez pourquoi, alors autant le formaliser et répondre à quelques questions qui auront une incidence sur la façon de le réaliser.

On peut classer grossièrement les sites web selon les catégories suivantes, elles ne sont pas exclusives les unes des autres. Un site peut être de plusieurs catégories.

Site d'information

C'est le site web traditionnel, vous avez des choses (intéressantes) à faire connaître. Mais à qui ? Aux internautes du monde entier, à ceux qui partagent vos passions, aux membres d'une association, à vos amis...

La réponse à cette question aura une influence sur les contenus du site, sur le vocabulaire utilisé, peut-être aussi concernera les langues employées.

Il faut aussi savoir quelles sera la nature des informations que vous y mettrez : du texte (certainement), des images, photos (probablement), sons, vidéos ou animations (peut-être car plus compliqué). Cela dépend de vos objectifs d'information et conditionne le choix de l'hébergement (et son prix).

Et qui place ces contenus ? Si c'est uniquement vous, le concepteur, il n'y a pas de problèmes, vous savez ce que vous faites et vous savez le faire. Mais si d'autres interviennent.. De quelle façon le feront-ils ? Savent-ils utiliser un logiciel de composition de page web ? Vous transmettront-ils des documents produits avec un traitement de texte ? Utiliseront-ils des formulaires sur le site  ? ...

Les internautes visiteurs auront-ils une possibilité pour réagir, annoter vos pages... ? Attention, car là s'il y a de nombreuses réactions vous vous préparez du travail...

De plus, il faut savoir si l'information qui est proposée est stable ou changeante et dans ce cas quelle est la fréquence d'actualisation et quelle est sa méthode (manuelle ou automatique).

Site "outil"

Ce site est en fait un "logiciel en ligne". Il peut servir à réaliser des calculs mais le plus souvent ce sera un système de recherche dans une base de données.

Là aussi, il faut vous inquiéter de ceux qui l'utiliseront. Les productions correspondront-elles bien à toutes leurs attentes ? Sauront-ils s'en servir correctement ?

Il faudra aussi choisir un hébergement à la mesure des performances que vous attendez.
Si les traitements sont complexes et que beaucoup d'internautes accèdent au site simultanément, il faudra que le serveur vous accorde une bonne puissance.
Si les données hébergées sont volumineuses, il faudra non seulement une bonne capacité de stockage mais aussi une puissance adaptée.

Site très personnel

Il s'agit d'un site où vous, concepteur, êtes le principal voir l'unique utilisateur.

Cela peut paraître étrange à certains mais ce type de site est utile par exemple pour :

• stocker des données personnelles,
• gérer un agenda un carnet d'adresse...

L'intérêt du site web est d'être disponible partout ou se trouve Internet.

Là c'est simple car vous êtes le concepteur et l'utilisateur. On peut supposer que vous savez ce que vous voulez et que, le cas échéant, vous serez capable de l'améliorer.

D'autres types de sites...

Il y en a d'autres : vente en ligne, jeux, communication...

Mais là nous sommes dans le domaine professionnel et ce n'est pas notre sujet.

Identifier le type de population concernée

Le sujet a été un peu évoqué au paragraphe précédent, mais il est utile de l'approfondir.

D'abord le site doit intéresser les internautes qui viendront le consulter, ensuite il faut que ces visiteurs puissent l'utiliser efficacement.

Il est important est de savoir à qui est destiné le site s'adresse : à n'importe qui, à une certaine catégorie de population ou à un groupe restreint de personnes.

Le cas où l'on vise une population large est, bien sûr, le plus difficile à traiter. D'une part il faudra que le site soit connu des moteurs de recherche. D'autre part, il faut que tous puissent accéder aux contenus (langue, handicap) et y trouvent de l'intérêt.

En général les sites sont thématiques, il est donc nécessaire d'avoir une connaissance de la population concernée par le thème et d'identifier ses attentes.

Pour les sites s'adressant à une population restreinte comme les membres d'associations, il est souvent plus facile de connaitre leurs besoins (et leur compétence en utilisation du web).

Dans ce cas, il sera utile de faire tester la maquette du site par des représentants de cette population afin de vérifier l'adéquation de la production avec leurs attentes et leurs compétences.

A postériori, une fois le site en place, on peut obtenir des réactions des lecteurs par exemple avec un lien "Ecrivez-moi" mais il ne faut pas s'attendre à un grand nombre d'avis. Heureusement, car il faut les prendre en compte.
En revanche, il est utile d'observer les statistiques de fréquentation du site et en particulier les navigations entre page. Les adresses IP et heures d'accès des visiteurs sont aussi un moyen de connaitre leur localisation.

Inventorier et hiérarchiser les contenus

On commence par lister les thèmes à traiter et les décomposer en sous-thèmes. Il faut distinguer les points essentiels ce ceux qui sont accessoires ou complémentaires.

Il est aussi utile de se documenter sur ce qui existe déjà sur le web concernant le sujet. Evidement pas pour le copier mais pour intégrer sur le site ce que l'on trouve nulle part ailleurs.

De plus les contenus placés sur le site doivent être conformes à la législation sur l'information accessible au public telle qu'elle est définie par l'article 24 de la loi sur la liberté de la presse :
http://www.legifrance.gouv.fr/affichTexteArticle.do?cidTexte=LEGITEXT000006070722&idArticle=LEGIARTI000006419709&dateTexte=&categorieLien=cid

Liens vers d'autres sites

Dans certains cas, il peut être utile de placer sur le site des liens vers des sites externes où l'internaute pourra approfondir le sujet.

Ces liens posent le problème de la pérennité de leur validité. Il est utile de les vérifier régulièrement ou de réaliser un script (PHP) qui le fait.

Il n'est pas pertinent de placer des liens vers des sites qui ne sont pas connus des systèmes de recherche sur le web.

Structurer

Tout site est organisé en pages (au sens web). Trois éléments de structure sont à définir :

• structure des pages, ce qu'elles contiennent et leur organisation interne ;
• structure navigationnelle, comment l'internaute trouvera la page qu'il recherche ;
• structure informatique, organisation des fichiers sur le serveur.

Structure des pages

Le contenu total du site est organisé en thèmes et sous-thèmes (chapitres et sous-chapitres si on préfère). Il faut relier cette découpe au concept de page web.

Si le volume de contenu est conséquent, la question qui se pose alors est faut-il peu de pages éventuellement longues ou des pages courtes peut-être nombreuses ?

Voici quelques éléments pour y répondre.

• Beaucoup d'internautes n'utilisent pas (ou peu) le défilement vertical de la page. Ce qui pousse à éviter les pages longues.
• Si vous pensez que les pages seront imprimées il vaut mieux qu'elles soient peu nombreuses. Ce qui pousse à produire des pages longues.
• Les pages dynamiques, de type "outils', formulaires ou contenant des animations et vidéos ne seront pas imprimées ce sera donc des pages courtes.
• Les liens vers ancres permettent d'utiliser des pages longues avec un minimum de recours au défilement vertical.

Par ailleurs n'imaginez pas qu'écrire en caractères de petite taille soit une solution. La lecture à l'écran est malaisée, si les caractères sont petits il est probable que la page ne soit pas lue. De plus certains sont effrayés par un texte dense.

Enfin et bien sûr, il faudra des liens pour atteindre les pages. Si leur nombre est élevé la structure navigationnelle sera complexe à établir.

Structure navigationnelle

Il s'agit de permettre à l'utilisateur d'aller rapidement et sans hésitation à la page qui l'intéresse. Le minimum de lien à cliquer est donc le mieux, on considère généralement que tout endroit du site devrait être atteint en moins de trois (voire quatre) clics.

Il y a donc une hiérarchisation de la navigation, les liens de premier niveau correspondent aux grands thèmes traités dans le site, ceux de second niveau aux sous-thèmes, etc.

La structure thématique doit être proche de celle, supposée, de la démarche de recherche faite par l'internaute, donc en accord avec le contenu du site.

Considérons un site dédié à l'informatique, pour atteindre la page concernant Windows XP. On peut l'organiser, par exemple, selon trois approches  :

• Systèmes d'exploitation -> Systèmes multitâches -> Famille Windows -> Windows XP
• Ordinateur personnel -> Systèmes d'exploitation -> Windows XP
• CP/M -> MS-DOS -> Microsoft Windows -> Windows XP

La première s'adresse aux "connaisseurs", elle est adaptée à un site technique.

La seconde concerne plutôt les néophytes, pour un site orienté découverte.

La troisième est historique, il s'agit de l'évolution de l'informatique.

En revanche si le site à un contenu correspondant à un thème restreint et qu'il s'adresse à un public désireux de trouver rapidement l'information qui l'intéresse, on peut avoir un seul niveau d'indexation quitte à ce que l'index soit important (c'est le choix qui a été fait pour ce site).

Pour les sites qui ont une arborescence à plusieurs niveaux, il est intéressant d'indiquer en haut de chaque page sa position dans l'arborescence.

Structure informatique

Elle concerne l'arborescence des fichiers sur le serveur.

Cette structure doit être bien réfléchie, la modifier par la suite est à éviter car :

• de nombreux liens seront à revoir,
• les utilisateurs qui auront placés des "raccourcis/marques-pages/signets/favoris" sur les pages du site seront gênés.

Le "tout en vrac" dans un seul répertoire est à éviter (sauf pour de très petits sites).

Là aussi plusieurs possibilités existent, surtout en fonction de la sensibilité des concepteurs car cette structure n'est pas très visible par l'internaute.

• Reflet de la structure navigationnelle : un répertoire par thème, il contient les pages et médias du thème.
• Structure plus fonctionnelle : répertoire de pages, répertoire d'images ...
• Mixage de ces deux possibilités.

Cependant, on conseille de placer ce qui est commun à plusieurs pages : scripts-outils, feuilles de styles, images de logos et de pictogrammes, ...dans des répertoires spécifiques.

Il faut être prudent avec les liens absolus sur le site (ceux dont l'adresse commence par la racine '/') car ils sont dépendant de l'architecture du serveur. On peut, pour eux, utiliser des adresses à partir de la variable PHP " $_SERVER['DOCUMENT_ROOT'] ".

Définir une charte graphique

Elle est importante car elle caractérise l'identité du site.

Il est préférable que les pages aient toutes "un air de famille" par le rappel total ou partiel des éléments qui constituent la charte : couleur, typographie, logo, illustration ou photo de fond, etc...

Les feuilles de styles externes sont un excellent support pour définir une présentation homogène et adaptée au support.

En effet on n'utilisera généralement pas la même présentation pour un document lu (et utilisé) à l'écran que pour le même document imprimé. Dans ce cas, le concept de lien (hypertexte) n'a plus de sens. A l'écran, il est préférable d'utiliser des polices de type "sans-serif" (bâton) et sur papier de type "serif".

Si la page peut-être imprimée il faut être prudent avec les couleurs. En effet, les couleurs de fond ne sont pas prises en compte à l'impression : un texte écrit en blanc sur fond noir ne sera donc pas imprimé ! Cela peut être corrigé avec une feuille de style pour l'impression.

La composition optimale de la page est une affaire de professionnel de la communication. Comme on ne dispose pas toujours d'un infographiste, voici quelques règles et recettes de base.

• Evitez les perturbateurs. Restez sobres sur les couleurs, et les polices de caractères. Les animations (GIF) gênent la lecture. Les sons et les vidéos inattendus sont à proscrire.
• Résistez à la tentation de trop charger les pages. L'esthétique et le confort de lecture reposent sur un bon équilibre entre le vide et le plein.
• Dans les pays occidentaux, on lit de haut en bas et de gauche à droite. Par conséquent ce qui est important doit être placé en haut à gauche. Généralement c'est le logo du site qui est aussi un lien vers la page d'accueil.
  Les menus de liens importants doivent être en haut ou à gauche. On peut mettre un menu annexe à droite ou en bas de page (souvent menu d'outils : recherche, contact...).
• Evitez trop d''originalité. Les internautes ont des habitudes. Normalement les liens (et pas d'autres textes) sont bleus (souvent soulignés). Le site ne doit pas être un "jeu de pistes".
• Attention au "poids" des médias. Une page longue à charger ne sera pas lue.
• Pour les images et encadrement, pensez que normalement la lumière vient du haut (un peu vers la gauche).

En relief	En creux
Bouton sorti	Bouton enfoncé

Concevoir, rédiger

Conception du site

On l'a déjà dit, on le répète, prudence avec le JavaScript. Certains le désactivent : il faut que le site reste exploitable sans JavaScript. Les versions anciennes des navigateurs ont moins de fonctions JavaScript que les récentes.

Même problème de version de navigateur avec les feuilles de styles. En 2010, peu de navigateurs respectent complètement CSS2, alors attention avec CSS3 !

Attention aussi aux cookies. Si votre site nécessite l'usage de sessions et qu'il s'adresse à un large public. Il est utile de passer l'identificateur de session par l'URL.

Pour le PHP, ne pas trop en demander au serveur (surtout si vous êtes en mutualisé), il peut y avoir un temps de préparation de la page qui décourage les visiteurs.

Le problème des médias

On se trouve là dans un domaine où les "standards" sont rares et souvent propriétaires donc rarement gérés par le navigateur.

Souvent, un 'plugin' doit être chargé. Tous ne l'ont pas et il est irritant de voir un message invitant au téléchargement de plugin sur la page d'accueil.

Les formats sont variés notamment en vidéo, on ne peut pas demander aux internautes d'être équipé d'une multitude de codecs. Il faut faire comme le plus grand nombre. Et attention aux modes et obsolescences. Qui utilise encore "VDOLive" pour la vidéo en temps réel sur Internet, alors qu'il était très utilisé dans les années 1990 ?

Si vous mettez des documents en téléchargement le problème est le même. Ils doivent être utilisables par le plus grand nombre : les formats de fichier de type "Open Office" ne sont pas (malheureusement) très courants, il en est de même avec les derniers formats de fichier bureautique d'un éditeur de logiciels bien connu.

Rédaction des textes

La lecture à l'écran est moins facile que depuis un document imprimé. Il faut faire des phrases plus courtes.

Il faut se relire et essayer de soigner son orthographe. Et faire relire ses textes par d'autres.

La possibilité de déplacer des fragments de texte avec l'éditeur et bien pratique. C'est aussi un piège pour l'orthographe et la grammaire, voire la compréhension.

Dans la mesure du possible (car les tailles d'affichages sont très variées) essayer de faire des lignes qui comportent entre 40 et 80 caractères. Au delà, à la lecture, on fait des erreurs aux passages à la ligne.

Documenter

Toute réalisation informatique doit être documentée.

Il y a plusieurs raisons à cela.

• Faciliter la maintenance : améliorations, extensions ultérieures, afin de bien comprendre ce qui a été fait et limiter les risques de modifications néfastes.
• Pouvoir porter sur d'autres applications et adapter des fragments de code déjà développés et éprouvés.
• Formaliser ce que l'on a fait permet souvent de l'améliorer.

Eléments importants de la documentation.

Liste non exhaustive....

• Les particularités du serveur : logiciels, versions de PHP de SQL, ainsi que celles liés à l'installation : structure informatique (arborescence), fonctions du PHP indispensables.
• La structure navigationnelle.
• Les dépendances des éléments c'est à dire qui les utilise et ce qu'ils utilisent, notamment en ce qui concerne :
  • les fichiers inclus (PHP, JavaScript, feuilles de style)  ;
  • les constantes, objets, variables tant en PHP qu'en JavaScript ;
  • les styles (classes, usages...) ;
  • les éléments HTML qui ont des particularités, DIV, formulaires....
• Les éléments et structures des bases de données. Là aussi il faut indiquer qui les utilise.
• Les liens externes à vérifier régulièrement.
• Les sources de contenu utilisées (pour actualisation).

Il est souhaitable de commencer la rédaction de la documentation avant de mettre en place les premiers fichiers du site. On peut pour cela partir du cahier des charges.

Ainsi, on crée le site en accord avec la documentation. Naturellement, si des modifications sont faites en cours de réalisation (inévitable) la documentation sera actualisée au fur et à mesure.

Il existe des logiciels générateurs de documentation. Malheureusement ils s'appuient sur un site existant, il est utile de s'en servir à la fin de la réalisation afin de vérifier que leur production est en accord avec la documentation réalisée.

La documentation ne dispense pas de placer les commentaires judicieux dans les fichiers.

S'il s'agit d'un site "outil" et que son utilisation n'est pas très simple, il faut prévoir une documentation "utilisateur". Celle-ci peut être placée en ligne pour ce qui n'est pas confidentiel.