Up First Previous

Architectures, hébergement et référencement

Next Last

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.

 Architectures d'un site 

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.

 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 :

  • Administratif : site étudiants
    • Dossier d'inscription
    • Débouchés
  • Contacts : site entreprises et site étudiants
    • Les entreprises
    • Les profs (version texte et/ou version trombinoscope)
    • Les étudiants (CVs par liste alphabétique globale + trombinoscope par promo avec pour chaque étudiant le nom de l'entreprise du stage en lien externe)
  • Pédagogie : site étudiants
    • Emploi du Temps
    • Cours
    • Bibliographie
    • Annales
  • Infos pratiques : site étudiants
    • Le logement à Lyon (lien vers site du CROUS, ...)
    • Sortir à Lyon
  • Forum : site étudiants

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), ...

 Architecture de stockage 

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 :

  • images
    • profs : les photos des profs pour le trombinoscope
    • site : les images pour le site (boutons, drapeaux, ...)
  • stylesetmodeles
    • style.css
    • CVtype.html
    • EdTtype.html
    • trombinoscopetype.html
  • scripts
  • administration
    • inscription.html
    • debouches.html
  • contacts : trombinoscope des profs,
    • profs.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
      • promo2003.html : trombinoscope et potins + lien vers forum
      • nom_prenom.jpg
      • nom_prenom.html
      • nom_prenom.pdf
      • nom_prenom.doc
    • promo2004
    • ...
  • pedagogie
    • enseignements.html
    • EdT.html
    • multimedia
      • annales.html
      • bibliographie.html
      • cours.html
      • tps.html
    • programmation
      • annales.html
      • bibliographie.html
      • cours.html
      • tps.html
    • ...
  • pratique
    • logement.html
    • sortir.html

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

 Gérer ou faire héberger son site 

en travaux ! en travaux ...

 Maximiser le référencement de son site 

en travaux ! en travaux ...

 Quelques règles de base 

Pour faciliter la navigation et apporter du crédit aux informations proposées, on respecte généralement les règles suivantes :

  • mettre sur chaque page un lien de contact du webmestre et la date de dernière mise à jour.
  • dire quelque part sur le site qui l'on est et son niveau de compétence sur les thèmes abordés.
  • ne pas faire de pages trop longues (navigation moins agréable) ni trop courtes (orientation, impression).
  • ne pas surcharger une page en images, sons et vidéos (le vrai haut débit pour tous, ce n'est pas pour tout de suite).
  • penser à la casse des noms de fichiers (majuscules/minuscules), certains navigateurs font la différence !

Le cahier des charges étant établi, il ne reste plus qu'à apprendre la syntaxe permettant de réaliset tout cela...