Galerie d'aspects

Choisissez votre style et cliquez sur le lien pour qu'il s'applique aux autres pages du site

Pour que ça marche

Il faudra peut-être changer vos préférences de navigateur

Cette page permet de changer l'aspect des pages que vous visitez sur le site designvegetal.com. Elle utilise un changeur d'aspect (style switcher) en javascript et un cookie.

Si javascript n'est pas autorisé, vous ne pourrez pas changer l'aspect des pages. Chaque page prend alors l'aspect assignée par défaut pour un navigateur sans javascript. Pour cette page le fond est brun et il n'y a pas très peu de mise en forme du texte.

Si les cookies ne sont pas autorisés mais que javascript est autorisé, vous ne pourrez pas non plus changer l'aspect des pages. Chaque page prend alors l'aspect assignée par défaut pour un navigateur sans cookies mais avec javascript. Pour cette page l'aspect est celui utilisé pour le site général de www.designvegetal.com.

Conditions essentielles pour le site www.designvegetal.com

Rustique, extensible, portable

Le changement de feuille de style c'est vraiment très excitant car cela va changer notre regard sur les choses ordinaires.
Les choix actuels sont issus d'essais depuis la fin de l'année 2007.

Il y a des impératifs pour ce site.

Il existait avant les feuilles de style (css) et comporte trop de pages pour être changé d'un seul coup. Le changement doit donc pouvoir se faire progressivement. Seules les pages ajustées récemment peuvent changer d'aspect.

Les feuilles de style doivent pouvoir agir sur des pages très différentes les unes des autres. Les feuilles de styles ont donc un caractère généraliste.

L'écriture des pages html, des feuilles de style css et des javascripts éventuels doit pouvoir se faire dans n'importe quel ordre sans devoir changer tout le reste. Toutes les nouvelles feuilles de styles et les changeurs de style doivent être compatibles et ne pas s'appliquer à ce qui n'était pas prévu pour.

Le site doit rester portable entre mon ordinateur, une clef usb et le serveur web. Je veux pouvoir l'utiliser sur n'importe quel ordinateur même sans internet. Cela exclut donc tout recours à des fonctions qui font appel au serveur. Juste du html des css et du javascript.

HTML4 strict ou HTML5

Un choix nécessaire et pas trop difficile

Pour que les feuilles de style soient efficaces, il faut que le html soit propre et parfaitement conforme aux recommandations du 3WC. J'ai donc opté pour le HTML4 pas trop éloigné du HTML de base que j'utilisais auparavent. Pourquoi du HTML4 plutôt que du XHTML1 ? parce que cela me semblait plus facile et que je ne voyais pas la différence pour mon site. Le contenu est essentiellement du contenu pas de l'excitation changeante. En somme, sur mon site j'ai essentiellement du texte avec des images. Pourquoi du HTML4 strict ? pour que ça marche de façon prévisible quand on a de nombreuses pages qui doivent s'accommoder de plusieurs feuilles de style sans interférer avec les éléments d'aspect de chaque page.

Côté rigueur d'écriture:

• Déclarer le bon Doctype pour un affichage correct. ^*
• Utiliser la panoplie des balises HTML4 strict pour encadrer le contenu. ^*
• Pour qualifier ces balises utiliser des class pour les éléments qui reviennent tout le temps dans le site web, même si c'est une seule fois par page comme par exemple les diverses sortes de menu. Utiliser des id pour les éléments qui doivent être manipulés par javascript dans la page ou qui doivent servir de renvoi (ancre) dans l'affichage comme par exemple une image qui doit changer ou un chapitre qui doit être atteint par un renvoi.
• Utiliser des div et des span pour faciliter la mise en forme dans la page comme par exemple l'entête, le titre général le corps du texte. En théorie on pourrait s'en passer. En pratique la faiblesse actuelle des navigateurs pour utiliser correctement les sélecteurs de balise fait que c'est plus fiable d'encadrer les groupes de balise par un div et les balises en ligne par un span et de les qualifier par une class.
• Valider le code pour qu'il soit conforme en insérant la ligne Contrôle qualité dans chaque page.

CSS 2 et 3

Faire des feuilles de style pour tout le site web

Le site Jardin Zen css donne une bonne idée des prouesses que l'on peut accomplir avec des feuilles de style css. Les exemples pour changer l'aspect d'une page sont nombreux. Les exemples pour changer l'aspect d'un site avec de multiples feuilles de styles sont en revanche très rares. Les principales difficultés provient essentiellement du fait de vouloir écrire le html trop vite (manque de rigueur) et de vouloir tout régler dans les feuilles de style générales.

Pour les css, voici ce qui me semble important:

• Ranger toutes les feuilles de style dans un dossier css avec des sous-dossier au nom de chaque aspect et appeler l'aspect avec le même nom que son dossier css/nom-aspect/nom-aspect.css. Le même nom facilite l'accès par javascript. Avoir un dossier au nom de l'aspect permet d'y ranger les images de cet aspect.
• Ne pas créer un aspect pour une page particulière.
  Régler dans la feuille de style uniquement ce qui est général au site et pas ce qui est particulier à la page. Par exemple l'aspect des menus, des titres ou des références mais ne pas remplacer un titre par une image graphique de ce titre.
• Ne pas faire un style particulier dans la page html qui dépend d'une feuille de style générale.
  Dans la page on peut placer une image de fond spécifique pour un titre avec une balise style mais on ne doit pas le faire pour un menu général qui guide dans la page ou dans le site.

Javascript et les deux changeurs d'aspect (style switcher)

Le javascript permet d'animer la page.

Faire changer les images, changer les feuilles de style, autant d'exemples d'actions qui se font bien avec du Javasript. Parfois on pourrait se contenter de le faire uniquement avec des css, parfois pas. Les instruction css qui permettent de se dispenser partiellement du javascript ne sont pas toutes bien implantées dans les navigateurs. Et puis il y a des action qui ne seront jamais implantées dans les css comme par exemple placer dans un cookie l'asspect de page que vous préférez pour faire afficher une autre page avec cet aspect.

Pour le Javascript, voici ce qui me semble important:

• Le Javascript ne doit jamais être essentiel à la page. Si le javascript est coupé la page doit quand même être fonctionner.
• Le Javascript ne doit pas vous ralentir ou même vous interdire l'accès au contenu de la page.
• Le programme doit marcher pour toutes les pages du site quelles que soient leurs positions dans un sous-répertoire ou sur un ordinateur sans internet.
• Les différentes versions des programmes doivent être compatibles pour ne pas nécessiter de changer l'écriture des pages html, des css ou des cookies.

Sur ce site il y a deux changeurs d'aspect en javascript.

Fin 2007, j'ai installé le changeur d'aspectÊ: Styleswitcher de Paul Sowden (lien perdu http://www.alistapart.com/stories/alternate/). Il fonctionne pour un grand site. Il faut déclarer les feuilles de style alternatives dans le fichier html. C'est parfait quand toutes les feuilles de style sont écrites avant les fichiers html. Sinon il faut faire une mise à jour de tous les fichiers html quand une nouvelle feuille de style est créeé. Autre difficulté, lorsque le cookie contient un nom de feuille de style qui n'est pas déclarée dans le fichier html, la page n'affiche aucun style. J'ai résolu ce dernier point en ajoutant une ligne de vérification dans le script. Voir le changeur d'aspect (style switcher) en javascript. Ce script est parfait lorsqu'on veux que la page de puisse avoir quelques aspects préalablement choisis.

Le problème de mise à jour des fichiers html pour déclarer les feuilles de style alternatives m'a fait entrevoir les limites de cette façon de procéder. La liste des css risquait de devenir plus longue que le fichier lui-même.

Septembre 2008 j'ai trouvé le simplissime Style Switcher de Dem Pilafian parfait pour faire plusieurs aspects sur quelques pages dans un même répertoire. Je l'ai adapté pour le sortir de la page html, qu'il fonctionne avec des répertoires et qu'il puisse avoir des noms de feuilles de style compatibles avec le style switcher de Paul Sowden. Ce changeur d'aspect utilise le cookie pour créer à la vollée la déclaration du link dans le head du fichier html. Plus besoin de mise à jour des fichiers html quand on fait une nouvelle feuille de style. Dans la page html il y a seulement 1 link à déclarer pour le cas où on n'active pas javascript et on lui donne un attribut title pour avoir une feuille de style quand le javascript est actif mais que les cookies ne sont pas acceptés. J'ai aussi modifié la façon de lire et écrire le cookie pour qu'il soit compatible avec le style switcher de Paul Sowden. Voir le changeur d'aspect (style switcher) en javascript.

Pour tester les deux changeurs d'aspect que j'utilise vous pouvez charger ce mini site web www.changecss.com.zip.