Moraphi.com

Internet

Moraphi.com

Interface

Screenshot 1

Description

La présentation de ce site, je l'ai finalement déjà faite sur la page d'introduction générale.

Je vais donc profiter de cette page pour vous donner un aspect un peu plus technique à propos de la construction de ce site. Je vais donc montrer comment j'ai construit les onglets, comment j'ai pensé le menu pour qu'il soit plus facile à mettre à jour, comment j'ai essayé de fabriquer des briques réutilisables pour construire le tout de façon plus homogène...

Fonctionnalités

  • Design sans aucune table HTML! Tout est fait à partir de DIV et de CSS.
  • Structure des onglets faite en XML (voir plus loin).
  • Fonctionnalité d'URL-Rewriting d'Apache (voir plus loin).
  • Aspect identique sous Internet Explorer, Firefox et Opera (ce dernier est moins facile à "dompter").

A savoir

Réalisation: Automne 2005.

Langue utilisée: Français.

Programmé à base de: php  

Autres éléments utilisés: smarty   css   xml

 

Menu en XML

Voici le fichier type que j'ai utilisé pour générer le menu (onglets de navigation et sous-onglets):

 

xml_example

 

On voit que dans ce fichier se trouvent toutes les informations nécessaires à la construction d'un menu: Chaque élément dispose d'attributs, certains facultatifs:

  • Un titre: Celui-ci sera affiché dans l'onglet, et en grosses lettres une fois l'onglet activé.
  • Un nom de fichier (page): le fichier contenant toutes la page en question. Il sera chargé une fois que l'utilisateur cliquera sur l'onglet en question.
  • Une Icône: ce champ est facultatif: elle est affichée dans l'onglet et dans le titre de page.

Ainsi, il est possible de modifier tout l'agencement du site en un seul endroit.

 

De plus, si je souhaite changer le titre ou l'icône d'une catégorie, je n'ai besoin de changer cette donnée qu'une seule fois. Il est très facile de rajouter des onglets, et aussi facile de créer des catégorie et des sous-catégories.

URL-Rewriting

Si vous regardez les liens internes à ce site, vous ne remarquerez rien de spécial !

C'est justement là qu'est l'intérêt de l'url-rewriting...

 

En effet, bien qu'étant un site dynamique, tous les liens de navigation à l'intérieur de ce site font croire que l'on pointe vers des pages html classiques. En fait, l'adresse d'une page est lue puis transformée selon des rêgles écrites à l'avance, pour devenir compréhensible et utilisable par un programme.

 

Cela présente quelques grands avantages:

  • Les robots d'indexation tels que celui de Google évitent bien souvent les URLs des sites dynamiques de la forme "index.php?a=1&b=5".
    Une fois l'url-rewriting activé, les robots ne voient que des pages classiques, et les indexent sans problème. Les chances de monter dans le classement des moteurs de recherche sont donc plus grandes.
  • Les utilisateurs se souviendront facilement de l'adresse d'une page.
  • Ne sachant pas que le site visité est dynamique, des hackers à la sauvette passeront leur chemin...

Présentation en CSS

Sans les feuilles de style CSS, il serait très difficile de donner une apparence unie à un site complexe. En effet, il faudrait par exemple répéter les informations de rendu pour chaque élément de chaque page.

Avec les styles, il devient possible d'attribuer une apparence à un type d'élément (paragraphe, titre, etc...), qu'il conservera sur toutes les pages du site.

 

Voici d'autres avantages :

  • Sur un même site, et sans modifier les pages, un utilisateur pourrait choisir une feuille de style alternative, selon ses goûts.
    Le meilleur exemple est www.csszengarden.com.
  • Il est possible de définir une feuille de style pour chaque média de présentation. Ainsi, une même page pourra apparaître différement sur écran ou lors d'une impression, permettant d'éviter le traditionnel boutton "imprimer" qui ouvre une nouvelle fenêtre...
  • Les pages s'adaptent plus facilement aux différentes résolutions d'écran, et sont représentées de manière universelle à travers tous les navigateurs (théoriquement du moins).

Un exemple vaut mieux qu'un long discours!

Pour que vous puissiez voir à quoi ressemblerait cette page sans ses styles, cliquez ici.