Nous avons désormais un site très structuré depuis l’espace privé, et de nombreux articles publiés. Il est temps de nous attaquer à la création du premier squelette.
Beaucoup de webmestres commencent cette étape en travaillant à partir d’un squelette standard, qu’ils modifient par petites touches.
De notre côté, non seulement pour les besoins de ce tutorial, mais aussi par habitude, nous construisons les squelettes à partir d’un document totalement vide. Étape par étape, les différentes boucles sont ajoutées, puis finalement l’interface graphique (au départ du code HTML extrêmement simple, la construction graphique avec des tableaux étant ajoutée en dernière étape). Cette méthode présente plusieurs avantages :
cela permet de bien comprendre sa propre construction intellectuelle lors du développement d’une page : quelle boucle dépend de quelle autre, etc. ;
initialement débarassé des éléments d’interface graphique, il est plus simple de bien percevoir la hiérachie des informations sur la page ; ainsi l’interface graphique découle-t-elle de cette hiérachie d’une manière plus cohérente ;
le code HTML généré est souvent plus clair : les redondances sont moins nombreuses (défaut fréquent du copier-coller de code HTML).
Dans ce qui suit, nous utiliserons donc du code HTML très simple (notamment : pas de tableaux). La création d’une interface graphique plus élaborée, en fin de processus, est laissée au soin du lecteur.
Volontairement, nous construirons le code étape par étape. Pour éviter des pages interminables, lorsque nous enrichirons une boucle existante, nous ne reproduirons pas l’intégralité de la page, mais uniquement la partie qui nous intéresse. Pour s’y retrouver, on se référera souvent au nom des boucles déjà existantes.
La page de base
Commençons donc avec un fichier « article.html » vierge.
Extrêmement simple, voici la structure minimale d’un article, sans aucun élément de navigation :
Facile :
la BOUCLE_titre permet d’afficher le titre de l’article dans l’entête de la page ;
la BOUCLE_principale contient d’intégralité de la page ; elle permet de positionner toutes les autres boucles à l’intérieur de l’article sélectionné.
Récupérer les infos sur le jeu
Le squelette précédent serait une bonne base pour un webzine standard (tout l’information nécessaire est dans l’article), mais dans notre cas, une information vitale ne se trouve pas dans l’article : de quel jeu s’agit-il ?
En effet, nous avons décidé que le titre du jeu n’était pas dans l’article, mais dans la rubrique contenant cet article. On pourrait se contenter de la boucle HIERARCHIE, mais nous préférerons ici prendre une habitude qui reviendra systématiquement dans nos exemples : il faut passer de l’article à sa rubrique pour récupérer le nom du jeu. (C’est le même principe pour récupérer le logo ; à la différence près que la balise #LOGO_RUBRIQUE_ARTICLE effectue automatiquement cette opération.)
Ce sera donc une constante sur ce site : les boucles ARTICLES contiennent souvent une boucle RUBRIQUES permettant de « remonter d’un cran », c’est-à-dire de récupérer le titre du jeu. Cela sera le cas dans les pages des rubriques, ainsi que sur la page de sommaire.
Reprenons le début du code, tout au début de la BOUCLE_principale :
Notez que le #TITRE de la rubrique est affiché avec la taille maximale (h1) ; logique, puisque c’est le titre du jeu. Le titre de la rubrique, qui est d’ordinaire seulement un élément de navigation dans le site, est ici l’information principale de l’article.
Afin d’obtenir une esquisse de navigation, affichons la hiérarchie. Nous allons démarrer cette hiérarchie depuis la rubrique qui contient la sous-rubrique actuelle, puisque ce qui nous intéresse est la liste des catégories de jeux (et nous connaissons déjà le nom de la dernière sous-rubrique - le titre du jeu). Nous nous plaçons donc à l’intérieur de la BOUCLE_rubrique, ajoutons une BOUCLE_rub_parent (qui permet encore de « remonter d’un cran » dans la hiérachie), et à partir de là nous demandons la hiérachie :
Laissons cette page « article.html » en l’état. Rien de compliqué pour l’instant. Il manque la gestion des mots-clés, et les liens entre les articles d’un même rubrique (c’est-à-dire traitant du même jeu).
Seule subtilité : il faut remonter à la rubrique qui contient l’article pour obtenir le titre du jeu, et il faut encore « remonter d’un cran » (la rubrique qui contient la rubrique qui contient le jeu) avant de démarrer la hiérarchie.
