Introduction :
Nous avons vu jusqu'ici comment créer correctement une page HTML ainsi que comment habiller cette page HTML avec le CSS. Nous allons maintenant nous préoccuper de la création d'un site web en entier et surtout de la méthodologie à employer.
La création d'un site web professuibbel peut être divisée en plusieurs étapes que voici :
- Le cahier des charges
- Le design (Mock-up)
- L'intégration HTML/CSS
- La mise en ligne
Le cahier des charges :
Cette partie ne sera pas détaillée. Vous aurez des cours dans votre cursus sur ce sujet mais retenez que chaque projet informatique commence toujours par un cahier des charges. Il s'agit tout simplement de poser sur le papier les demandes du client de manière la plus précise possible.
Pour vous, cette étape est déjà faite ! En effet, dans le cadre du projet de site web que nous vous demanderons de réaliser, le cahier des charges est tout simplement l'énoncé ou les instructions que l'on vous donnera.
Le design (Mock-up)
Cette étape consiste à réaliser sur papier ou avec un outil informatique une maquette du site. L'idée est de savoir comment sera découper le site web. Un menu en haut ? un menu à gauche ?, quelles rubriques ?, un logo ?; que mettre dans les différentes zones définies ?, comment agencer le contenu (niveau de titres, ...), choix des couleurs ?
Soyez le plus précis possible pour cette étape ! Exemple :
Il ne suffit pas de dire : "j'aurai un menu à gauche" mais posez-vous la question de savoir quels items constitueront ce menu et notez-les !
Dans le monde professionnel, cette étape sous--entend une communication avec le client car on réalise le site web selon ses goûts évidemment. Pour vous par contre, dans le cadre du projet vous êtes libre de créer le site web selon vos goûts ce qui devrait rendre cette partie moins chronophage.
Pour cette étape, n'hésitez pas à parcourir le web à la recherche d'idées, de vous inspirer d'autres sites. Attention toutefois à rester dans l'inspiration dans la copie intégrale d'un autre site. Ce syllabus que vous êtes en train de lire peut également faire partie de vos sources d'inspiration mais nous insistons sur le mot inspiration.
L'intégration HTML/CSS :
C'est cette partie qui vous prendra le plus de temps ! L'idée est la suivante : transcrire en HTML/CSS le design effectué. Pour cette étape, vous devez donc aboutir à un modèle de page pour l'ensemble de vos pages du site web. On place généralement en premier lieu l'entête, le menu et le pied-de-page. On crée une feuille de style CSS pour positionner, habiller ces éléments comme ce qui a été décidé dans le design. On place ensuite la partie centrale et autres de la même manière dans lesquelles on peut mettre un contenu fictif dans un premier temps.
Lors de cette étape, vous n'oublierez pas de valider le HTML et le CSS régulièrement !!!
La mise en ligne :
Pour être sur le Web, un site doit se trouver sur un serveur web. Un hébergeur a pour rôle de faire marcher un (des) serveur(s) web. Il faut donc contacter un hébergeur pour disposer son site sur Internet. Mais comment ?
De nombreuses sociétés proposent ce service avec des prix divers. Voici quelques critères dont il faut tenir compte lorsqu'on recherche un hébergeur :
- le support technique : l'hébergeur vous offre-t-il un système pour gérer vos questions/problèmes ?
- le transfert des données : y a-t-il une limite de quantité pour les données : y a-t-il une limite de quantité pour les données que votre site envoie aux visiteurs ?
- les sauvegardes : l'hébergeureffectue-t-il des sauvegardes de vos pages et de vos données ?
- les noms de domaine : le prix de l'hébergement inclut-il l'acquisition du nom de domaine
- la fiabilité : les serveurs de l'hébergeur sont-ils suffisamment fiables (et pas hors service 50% du temps) ?
- les mails : l'hébergement inclut-il des adresses e-mails ?
- ...
Cette étape finale n'est pas demandée !
Démonstration en vidéo
La vidéo présente ci-contre montre comment appliquer cette méthodologie pour créer un site Web. Elle vous sera normalement utile pour réaliser le petit projet HTML.
Vous avez ici un lien vers le code source de la démonstration. N'hésitez pas à le télécharger, le tester et à vous en inspirer !
Code source de la démonstration