jeudi 5 mars 2009

 

     / Pratique-sitePerso /4_MenusAuto

Découpage et navigation

 

Découpage a posteriori

Consignes

L'objectif de ce cours est de créer les pages qui permettront de naviguer dans votre site, et cela en visitant des pages Web générées automatiquement en php.

Plusieurs situations peuvent se présenter concernant vos désirs sur comment vous organiser pour développer votre site perso :

Pour répondre à ce double objectif, nous allons utiliser une démarche réutilisable pour d'autres projets de construction de sites Web.

Cette démarche consiste à déduire d'une page HTML "fixe", la structure (l'ossature) générale de la page, c'est à dire de repérer dans le code les différentes zones de la page et leurs rôles. On en déduira un fichier d'index génériques dont les différentes zones seront générées par des scripts PHP spécifiques, qui seront simplement inclus dans la structure générique de l'index.

Un gros avantage de cette démarche est qu'elle est incrémentale : en effet, on pourra progressivement remplacer chaque partie fixe du code par sa construction calculée, et ainsi mettre les différentes parties au point les unes après les autres.

Pb des logiciels de mise en page pour le pré-presse

Attention : les logiciels de mise en page pour l'impression, s'ils permettent de sauver "en page Web", ont généralement le gros défaut de positionner les différents éléments de la page de façon absolue (par exemple, pour un menu, à 5 centimètres du haut de le page, un item à 8 cm de la gauche, puis à 16, puis à 21...) ce qui est incompatible avec l'adaptation automatique de la mise en page en fonction d'un contenu dynamique. En conséquence, si ces logiciels sont très pratiques pour créer une présentation esthétique et soignée, on ne pourra en général récupérer qu'une maquette, c'est-à-dire une page à imprimer pour la présenter comme un objectif à une future réalisation. Mais lors du développement à proprement parler, il faudra remettre au point un modèle HTML associée à une feuille de style CSS de sorte que sa présentation dans une navigateur soit le plus ressemblant possible à la maquette, mais qui, lui, pourra porter des menus et des contenus dynamiques.

Exemples de pages de navigation dynamiques

EasyPHP

Par exemple, si vous utiliser un PC, avec EasyPHP, lors que vous demander à accéder au "WebLocal", vous tombez sur une page au fond gris qui vous propose de cliquer sur des liens précédés soit de l'image d'un dossier, soit de l'image d'un fichier. Cette page est dynamique. De plus, si vous avez accès aux dossiers C:\\Program Files\EasyPHP\www\ ou C:\\Program Files\EasyPHP\phpmyadmin\ (vérifiez vous-même), vous avez accès au code PHP lui-même.

Le défaut est que pour débuter, ces codes sembles assez complexes.

Un exemple incrémental

Le lien suivant montre plusieurs variantes de la contruction d'un menu proposant des liens de navigation dans le dossier qui le contient.

Ces liens déplacent vraiment dans la hiérarchie : une fois qu'on a cliqué sur un lien accédant à un dossier, si ce lien ne précise pas le fichier (index.html ou index.php), ou s'il n'y a pas de tel fichier dans le dossier, la navigation automatique "s'arrête". Il faudra dupliquer un tel menu automatique dans tous les sous-dossiers.

Voici donc quelques exemples de menus avec "replacement" de plus en plus "sofistiqués" : exemples-menu_auto/index.php et une archive à télécharger : exemples-menu_auto.zip

Une difficulté de mise au moint des menus "avec déplacement" est de préserver une homogénéïté de la présentation des menus de la "racine" opru permettre de remonter au premier niveau dans la hiérarchie de dossiers qui contiennent le "même" menu.

Plein d'index-type

Dans les exemples associés à ces cours, tous les liens proposés dans http://tiprof.fr/Essais-php-js//index-types/index-nav.php sont des variantes d'index automatiques dont certains codes sont dans un dossier zippé. Certains des "menus" permettent

L'exemple du site "site-auto"

http://tiprof.fr/Essais-php-js/site_auto/ et le dossier zippé contenant son code complet en php4 http://tiprof.fr/Essais-php-js/site_auto/site_auto.zip

Découpage a posteriori

A partir d'un site que vous aimez bien, vous pouvez vous inspirer pour construire le votre.

Si vous préférez utiliser un logiciel de mise en page pour l'impression, et créer une maquette, l'exemple ../../Exemples/w-decoupage/ montre comment on est passé d'une maquette faite avec le logiciel QuarkXPress à une ossature d'index à la présentation automatisable.

Ensuite, quelques états de la démarche d'automatisation (c'est-à dire du remplacement de portions de codes HTML en codes PHP qui calcule un code HTML équivalent-identique mais à partir de l'arborescence des dossiers et fichiers à rendre accessibles) ont été mémorisés dans /Techniques-swd/matériel/modular/explications.html

L'idée générale est de repérer dans le code, les différentes parties liées à la navigation ou au contenu, et de les inclure dans des fichiers soit de contenu, soit de code en PHP, puis de remplacer leurs anciens emplacements par des appels à la fonction include("code.php");code.php est le nom d'un des fichier de code qui génèrera un code HTML similaire au code récupéré.

Le but est qu'à l'issue de ce processus, le fichier principal soit simple et visible, et qu'il soit facile d'y reconnaitre la structure (l'ossature) de la page.

code PHP découpé :

résultat - code PHP découpé

code HTML résultant :

style CSS de cet exemple - code HTML résultat


L'intérêt de cette technique est qu'elle permet de séparer les tâches, de ne pas avoir à penser à tout en même temps, mais de s'intéresser à un problème , à une partie de la page à la fois.

Accompagnement "pas à pas"

L'objectif est de réaliser un site du genre du site_auto/, mais avec une navigation "sans" deplacement dans l'arborescence du site, c'est-à-dire en passant la demande de page à visiter dans un paramètre, mais toujours à partir de la même page d'index automatique.

Il y a 2 avantages à ce choix :

Vu que le site présent un menu horizontal pour les dossiers principaux, et un menu vertical pour donner accès au contenu de chacun des dossier principaux,

Après avoir transformée la page d'index en une ossature de site (étapes du paragraphe précédent), il restera à créer les codes pour les différentes zones de navigation. Ces étapes, plus relatives au code en PHP sont décrite dans http://tiprof.fr/SitesWebDynamic/Techniques-swd/matériel/modular/).

http://tiprof.fr/SitesWebDynamic/Techniques-swd/mat%C3%A9riel/functions/explications.html   Pas à pas pour créer des fonctions qui calculent le code HTML d'un sommaire
LicPro - PAGORA