Méthodologie de création de site web, étape 4 : partie technique

Maintenant vos idées sont bien ordonnées, vous avez déjà décidé comment vous allez présenter le contenu du site, où vous mettez vos jolis boutons et avec quelles polices vous écrirez vos textes. C’est merveilleux !
Donc, l’emballage (le design) est prêt et le plan d’actions à mener (le story-board) est bien défini. Alors, c’est le grand moment à réfléchir sur quelle armature nous allons tenir toute cette beauté !
Maintenant on arrêt de rigoler et attaque la partie la très technique du travail : la programmation, sans oublier que le squelette de pages doit être bien robuste que voudrais dire correctement fait !
Le squelette de pages est constitué de lignes de code. Le code utilisé par default pour représenter les pages web et structurer leur contenu est le code HTML (l'Hypertext Markup Language). Ce langage est assez simple et permet sans trop de difficultés de mettre en forme le contenu des pages, d’inclure des images, des formulaires de saisie etc. ; bref, créer des sites web peu complexes.
Pour structurer la mise en forme des pages web nous utilisons aussi le langage CSS (Cascading Style Sheets) en s’en servant d’outil supplémentaire pour gérer facilement leur contenu.
Exemple : voir plus bas Schéma3
Comme vous voyez ce langage de Feuilles de Style en Cascade complémente le HTML et élargie ses possibilités dans l’optique de baliser vos pages et décrire leurs présentation.
Mais pour réaliser les choses plus complexes comme la fonction de recherche ou de forum où les commentaires soumis par des internautes apparaissent au temps réel sur le site, il faut savoir coder en PHP, ASP, PERL, Java.
La différence entre HTML, CSS et PHP, ASP, PERL, Java est la même que entre la carrosserie de voiture et son moteur ! Les 4 derniers sont de la mécanique ou de la robotique (c’est comme vous préférez) du site qui fait qu’il réagisse à vos commandes et celles d’internautes !
Maintenant après avoir vu les grandes lignes on passe aux détails. Cela vous dit ?
Le but de mon billet d’aujourd’hui n’est pas de vous faire un cours d’HTML, de PHP ou autre langage mais, actuellement que j’ai passé en revue les possibilités techniques qui s’offrent à vous, de vous donner quelques conseils qui vous seront utiles quelques soient vos choix techniques.
Alors, voici quelques conseils :
1. Pour la réalisation des pages, comme on l’a vu dans le précédent article, vous devez réaliser leurs maquettes graphiques.
Commencez par découper l’image que vous avez créée en rectangles de différentes tailles (correspondants aux traits en noir dans le schéma de mon précédent post) : ces éléments seront utilisés comme « images de fond » des différentes parties du tableau que vous allez créer.
2. Ensuite il faut réaliser le squelette HTML de vos pages qui va servir de modèle de code HTML utilisable pour chaque nouvelle page.
Un premier conseil pour la réalisation de ce modèle est une conséquence de ce que je vous avais conseillé pour la maquette graphique.
Il y a fort à parier que dans toutes les pages du site il n’y ait que très peu de modifications des parties supérieures gauches.
Alors faites 2 squelettes : l’un inclus dans l’autre ; l’un définissant la globalité de la page à l’exception de la partie centrale et l’autre définissant justement cette partie.
La pluparts des technologies citées plus haut offrent la possibilité d’inclure des fichiers dans les autres (c’est la technique des « pseudo-frames »).
Ce schéma illustre la technique des pseudo-frames : un premier fichier contient la définition HTML d’une page (ici notre fichier contient aussi du PHP) et une instruction permettant d’inclure un second fichier (ici le fichier PHP de droite).

Schéma1
Ainsi il y a moins de répétitions du même code pour produire exactement la même chose mais à des endroits différents, il en résulte que le site est plus maintenable et plus facile à faire évoluer.
3. Revenons-en à notre squelette avec ce deuxième conseil : Pensez tableau !
En effet, en couplant la puissance de l’objet TABLE (en HTML on peut inclure autant de tableaux que l’on veut dans un) et les CSS vous allez pouvoir mettre en place votre puzzle.
Voici à quoi pourrait ressembler un découpage en tableau de la page de mon exemple précédent :

Schéma2

4. Reste à mettre les images dans chaque case pour que le puzzle soit reconstitué.
Voici encore quelques astuces pour y parvenir aisément :
- Créez un fichier style (ex : style.css) et définissez une clé pour chaque pièce de votre puzzle.
Dans notre exemple, 2 clés pour les rectangles bleus foncés et une pour celui orange comme ceci :

Schéma3

- Ensuite dans votre code, repérez la cellule du tableau qui correspond à votre pièce de puzzle et modifiez-la de façon à ce qu’elle utilise le style que vous venez de définir :

Schéma4
Vous noterez que la définition du tableau a aussi évolué : sans ces 2 attributs supplémentaires les pièces de votre puzzle ne seraient pas jointes entre elles.En appliquant ces conseils vous devriez sans trop de difficultés réaliser l’ensemble des squelettes nécessaires à votre site.
Voilà un bon travail de fait !
Cependant, il en reste encore car il vous faudra maintenant programmer toutes les comportements que vous avez imaginés au sein de votre story-board.
Vous allez, par exemple, créer une page de catalogue affichant vos produits. Cette page s’appuiera sur les maquettes que vous venez de réaliser mais elle usera aussi sans doute d’accès en base de données, etc.
La route est longue et il ne faut pas perdre de vue son objectif, se cantonner à ce qui a été planifié lors de l’étape du story-board et avancer par lots.
Ne mettez pas en chantier toutes les pages en même temps, par exemple, et procédez par ensemble cohérant.
Bon courage et au prochain post !

Référence :
HTML : http://fr.selfhtml.org/navigation/html.htm
CSS : http://fr.selfhtml.org/css/index.htm
PHP : http://www.php.net/
ASP : http://www.asp.net/