S'il est indispensable de maîtriser les aspects techniques de la création de pages web, ceci n'est pas suffisant pour définir un site complet qui saura trouver son public et vivre grâce à lui. Aussi, avant de commencer la programmation, il est très important d'accorder un long moment à la préparation de l'architecture apparente du site ainsi qu'à son architecture de stockage. Ceci fait, la phase de création sera bien définie et donc plus aisée ; il ne restera alors plus qu'à trouver le meilleur moyen d'hébergement du site puis à obtenir le meilleur référencement possible auprès des nombreux moteurs de recherche.
Le but de tout site web devrait être de proposer des services qui répondent aux besoins des internautes que l'on désire attirer. La phase la plus importante de la génèse d'un site est donc la définition du plan de ce site, c'est-à-dire son architecture apparente.
La première chose à faire est d'imaginer l'arborescence des pages du futur site afin de caractériser le squelette des menus. Considérons l'exemple de la création d'un site d'une promotion d'étudiants. On veut notamment permettre aux étudiants de connaître le parcours des promotions précédentes (lieux de stage, débouchés, ...), et aux éventuels employeurs de consulter des CVs. On prévoit aussi une section de vie courante (emploi du temps, cours en ligne, ...) et un recueil de certains TPs réalisés par les étudiants. On désire également définir une page d'introdution au site accrocheuse (animations, ...).
Une première ébauche de l'architecture apparente du site peut donc être :
On a donc choisi un site double selon la position du visiteur. La page d'accueil, après l'introduction dynamique, propose le choix entrepreneur ou étudiant. On définit donc deux autres pages d'accueil, une par sous-site.
Dans la page d'accueil des entrepreneurs, on mettra une présentation de la filière, le détail de la formation, ...
Dans la page d'accueil des étudiants, on mettra un lien sur le plan interactif du campus, le plan du site web, le calendrier de la promotion en cours (avec un lien sur ceux des autres années), ...
Il faut maintenant prévoir l'architecture de stockage correspondante. On définira toujours un répertoire pour les images utiles pour de nombreuses pages (logos, en_travaux, ...), un autre pour les modèles et les styles et un dernier pour les scripts. Ensuite, l'architecture de stockage colle généralement à celle des menus principaux de l'architecture apparente définie précédemment ce qui donne ici :
style.cssCVtype.htmlEdTtype.htmltrombinoscopetype.htmlinscription.htmldebouches.htmlprofs.html : trombinoscope avec lien vers leur web, leur
mail et la page de leur cours
etudiants.html : liste alphabétique globale avec lien
vers leur web et leur mail et leurs 3 CVs
entreprises.html : annuaire des entreprises partenaires avec
les années de leur collaboration
promo2003.html : trombinoscope et potins + lien vers forumnom_prenom.jpgnom_prenom.htmlnom_prenom.pdfnom_prenom.docenseignements.htmlEdT.htmlannales.htmlbibliographie.htmlcours.htmltps.htmlannales.htmlbibliographie.htmlcours.htmltps.htmllogement.htmlsortir.htmlLa page d'introduction s'appellera index.html et
sera placée dans la racine du site ainsi que les deux
pages d'accueil dénommées accueiletudiants.html
et accueilentreprises.html.
Pour faciliter la navigation et apporter du crédit aux informations proposées, on respecte généralement les règles suivantes :
Le cahier des charges étant établi, il ne reste plus qu'à apprendre la syntaxe permettant de réaliset tout cela...