Réalisation de sites web

Sommaire du site

Présentation
Comment apprendre
L'équipement
La page web
  Styles et CSS
  HTML, structure de la page
  HTML, éléments du corps
Le langage JavaScript
  JavaScript, objets "core"
  JavaScript, DOM, les bases
  JavaScript, DOM, node
  JavaScript, compléments
Le langage PHP, les bases
  PHP, fonctions utiles
  PHP pour le web
  PHP, compléments
SQL, introduction
  MySQL et PHP pour le web
  MySQL, plus loin...
Applications AJAX
Annexes utiles
  Fichier .htaccess
  Sécurité des sites web
  Conception d'un site web
  Référencement, syndication

Sommaire détaillé

Mentions légales.

Chapitres de cette page
Contenu  -> 

Page mise à jour le : 12-08-2015

Haut de la page

Définir les objectifs du site
Identifier la population concernée
Inventorier et hiérarchiser
Structurer
Définir une charte graphique
Concevoir, rédiger
Documenter

Conception d'un site web

«Ce qui se conçoit bien s'énonce clairement
  Et les mots pour le dire arrivent aisément.»

Nicolas Boileau, "L'Art poétique"

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.

Comme il l'a été dit sur la page de présentation du site actuel, on ne s'adresse pas ici aux professionnels de l'informatique. Normalement ceux-ci savent rédiger un cahier des charges qui, dans le domaine professionnel, est un document contractuel.

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  ? ...

L'expérience des sites associatifs m'a montré que si, au départ, l'idée du site était saluée et que beaucoup étaient prêts à y contribuer, cet apport s'estompait assez rapidement. Au bout de quelques mois les rédacteurs ne sont plus très nombreux. Pour maintenir la motivation, il faut que tous trouvent sur le site un intérêt permanent.

Malheureusement, cela met à l'écart ceux qui utilisent peu ou pas Internet. Heureusement, ils sont de moins en moins nombreux.

 

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 :

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.

La réalisation d'un site multi-langue est possible mais délicate.

Les textes doivent être placés dans une base de données et produits dans la page selon la langue.

Pour les langues où l'écriture ne se fait pas de gauche à droite, il faut prévoir des feuilles de styles adaptées. Attention aussi au jeu de caractères dans les en-têtes HTML.

Pour les images comportant du texte, il faut en avoir de plusieurs versions.

A la rédaction, il faut aussi les claviers appropriés aux langues utilisées.

Et des traducteurs...

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.

Attention au droit d'auteur et au droit à l'image

Si vous utilisez des ressources produites par d'autres, quelle que soit leur nature (y compris du code de programmation), vous devez vous assurer qu'ils sont libres de droits où que les ayants droit vous aient donné un accord écrit.

Il en est de même si vous placez des photos de personnages reconnaissables ou de certaines oeuvres d'art.

 

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.

Au sujet des liens externes, les avis sont partagés.

Il semble de bon aloi de demander au responsable du site externe l'autorisation de placer un tel lien ou tout au moins de l'en informer.
Mon expérience m'a montré d'une part qu'il était difficile de trouver un correspondant et d'autre part que celui-ci répondait rarement. Désormais je ne le fais plus. Mais ce n'est qu'un point de vue personnel...

Pour ce qui est de la cible du lien (remplacement de la page ou ouverture d'une autre fenêtre) la tendance actuelle est au remplacement de la page car beaucoup estiment que l'ouverture d'une autre fenêtre est perturbante.
Mais vous avez pu constater que sur ce site les liens externes ouvrent une autre fenêtre. Il m'a semblé que les internautes qui s'intéressent au sujet présenté par ce site ont suffisamment l'habitude de la navigation web pour ne pas être gêné par cela. De plus, ce fonctionnement est indiqué la plupart du temps.

Evidement, il ne faut pas placer les pages d'un site externe dans un cadre (frame) de votre site. Déontologiquement c'est inacceptable !

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

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.

Il est évident que le défilement horizontal de la page est une monstruosité qu'il faut absolument éviter (attention aux tableaux).

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  :

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.

CP/M -> MS-DOS -> Microsoft Windows -> Windows XP

 

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 :

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.

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'] ".

Avis personnel.

Comme j'ai déjà eu des problèmes lors du portage de site sur un autre serveur, j'ai pris l'habitude de créer un fichier à la racine du site qui définit les variables d'adresses absolues. Par exemple :

<?php //Version locale
$rep_doc= $_SERVER['DOCUMENT_ROOT']."/icioula";
$rep_rac= "$rep_doc/web";
$uri_rac= "/icioula/web";
$url_rac= "http://".$_SERVER['HTTP_HOST'].$uri_rac;
?>

Et je l'inclus dans toutes les pages :

<?php

require_once ($_SERVER['DOCUMENT_ROOT']."/rep_web.inc.php");

include ("$rep_rac/...."); //Autres inclusions

?>
?>

En cas de changement de serveur, il suffit de mettre à jour le premier fichier.

 

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.

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.

Personnellement, je relis mes pages, je les passe ensuite au vérificateur d'un logiciel de traitement de texte (plus performant que celui de l'éditeur de pages WEB) et je les relis encore depuis un navigateur. Je les fais lire à d'autres et... il reste encore des fautes !

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.

Eléments importants de la documentation.

Liste non exhaustive....

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.