Mise en ligne : RNB | 82430 visites

Auteur : RNB
Date : 3 décembre 2006 (25 février 2007)

Nouvelle page d’accueil du site Framasoft

Et bien voilà : cela à pris plus de temps que prévu, tout n’est pas terminé, loin de là, mais nous lançons aujourd’hui une nouvelle page d’accueil de Framasoft, certains diraient en version « beta ».

Pourquoi une nouvelle maquette ? Le cahier des charges que nous nous étions fixé était clairement définit dés le départ, bien qu’il se soit enrichi de nouvelles exigences au fil du développement : il s’agissait avant tout de « moderniser » les pages du site tout en gardant leur aspect visuel. Par moderniser, nous entendions surtout réécrire le code HTML des squelettes spip [1] pour qu’ils soient un peu plus respectueux des standards web. Vinrent ensuite se greffer à ces premières ambitions d’autres fonctionnalités telles que la Framanav ou la possibilité pour le visiteur de personnaliser l’affichage.

C’est sur les différents points de ce cahier des charges que nous allons nous arrêter un instant afin de préciser les changements effectués et ce qu’ils impliquent pour le visiteur.

La modification du code

Comme rappelé dans l’introduction, les modifications du code HTML ont surtout eu pour but de le nettoyer des structures obsolètes ou mal employées. Une maquette construite à base d’une multitude de tableaux imbriqués les uns dans les autres, cela ne faisait plus vraiment très sérieux en 2006 (ni en 2005 ou en 2004 d’ailleurs :-).

Côté structure du code d’abord :

Ecrire le code en HTML 4.01 strict.
Supprimer la surabondance de blocs conteneurs généralistes (divs) et utiliser des balises correspondant au sens du contenu (listes à puces, liste de définition, balises titre, etc.). L’aspect le plus visible de cette simplification fût évidemment la suppression des tableaux dans leur rôle de blocs structurants la maquette en 3 colonnes.
Replacer le contenu de la page dans un ordre qui ait un sens, à savoir l’information principale (colonne centrale) d’abord puis les informations secondaires (colonnes gauche et droite).

Côté présentation de la page ensuite :

Supprimer tout ce qui a un rapport avec la présentation, qui doit être préférentiellement gérée par les feuilles de styles en cascade (CSS).
Supprimer aussi tous les graphismes servant d’illustration - là encore pour les gérer à partir des CSS.

Bref, cette réécriture s’est parfois résumée à un grand nettoyage par le vide mais elle a surtout été confrontée à un casse-tête quasi-insurmontable : la maquette 3 colonnes ! Dur en effet de construire un tel habillage graphique quand la longueur des colonnes varie aléatoirement et quand on souhaite avoir une maquette fluide [2]. Après avoir testé d’innombrables configurations, parcouru des kilomètres de documentation, nous sommes arrivés à adapter une technique de présentation en trois colonnes aux besoins de la maquette de Framasoft. Tout n’est pas parfait, évidemment (voir Bugs et autres difficultés), mais le résultat est globalement satisfaisant.

La Framanav et la « galaxie Framasoft »

En dehors des changements techniques, la nouvelle page d’accueil se caractérise aussi par l’apparition d’une barre de navigation, la « Framanav ». Elle est placée au sommet de la page et réunit les liens menant aux principaux projet liés à ou dérivés de Framasoft, ainsi qu’un champ de recherche et le bouton paypal de donation à l’association.

A terme, cette barre se retrouvera sur tous les sites qui forment la « galaxie Framasoft » : Framakey, Framabook, Framagora, etc.

La personnalisation de l’affichage

Enfin, un mot sur le comportement de la page. Il vous est possible dorénavant de plier/déplier les différents blocs constituant la page en cliquant sur leur titre et/ou la petite flèche qui les accompagne. Les blocs présentant les nouveautés de la Tribune Libre et de la rubrique Tutoriels affichent de plus le descriptif de la nouveauté sous forme de popup lorsque l’on passe la souris au-dessus de son titre.

Le tout est géré par du javascript non-intrusif : il ne modifie en rien le contenu de la page, il facilite seulement son affichage et sa personnalisation, du moins nous l’espérons. Ainsi, si la gestion du javascript est désactivé dans votre navigateur, la page d’accueil de Framasoft ressemblera à sa forme intégralement dépliée.

Une case à cocher est disponible au bas de la colonne centrale et permet d’enregistrer les choix de présentation de chaque bloc (plier ou déplier) dans un cookie. Vous pourrez ainsi retrouver vos préférences de présentation de la page d’accueil lors de votre prochaine visite sur Framasoft (si vous n’avez pas effacé le cookie entre-temps, bien-sûr).

Bugs et autres difficultés

Nous le répétons encore une fois, tout n’est pas parfait, loin s’en faut. Des bugs d’affichage persistent si vous utilisez certains navigateurs : on peut observer par exemple que les popups passent sous les colonnes droite et gauche avec Internet Explorer. La colonne de gauche peut aussi se comporter bizarrement lorsque l’on redimensionne la fenêtre d’Internet Explorer trop rapidement.

Nous tenterons dans les jours qui viennent de corriger ses erreurs, et d’autres, pour aboutir à une maquette la moins imparfaite possible.

Ce qui vient ensuite

Cette mise en place de la nouvelle page d’accueil n’est qu’une première étape. A terme (avant la fin de l’année), ce sont tous les squelettes du site qui seront réécrits, accompagnés par une migration vers la version 1.9 de Spip et une modification de l’encodage du contenu en UTF-8. Le code HTML, les CSS ou le javascript évolueront donc encore dans les jours et les semaines qui viennent.

Mais il est avant tout nécessaire de recevoir quelques retours d’expérience. Vos commentaires sont donc les bienvenus ici-même, sur les éventuels problèmes que vous rencontrez lors de l’affichage de la page ou sur les possibles améliorations de celle-ci.

Ressources et références

Levine Matthew, « In Search of the Holy Grail », A List Apart, 30 janvier 2006.

Raggett Dave, Le Hors Arnaud, Jacobs Ian, « La spécification HTML 4.01 », W3C, 24 décembre 1999.

[1] Les squelettes spip sont des fichiers HTML qui servent de modèle, de canevas aux pages web.

[2] Une maquette fluide est une maquette dont la largeur s’adapte à la taille de la fenêtre du navigateur web. Elle s’oppose à la maquette fixe, dont la largeur est ...fixe. Il existe aussi des maquettes élastiques dont la largeur s’adapte à la taille des caractères.

maquette Framasoft
Squelettes spip et fichiers css de la nouvelle maquette du site Framasoft
Zip - 149,3 ko

<< Poster un message >>
:: question :: précision :: avis :: commentaire :: bug ::