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

Commentaires

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

Nouvelle page d’accueil du site Framasoft , le 1er juin 2007 par Laurent Lauden (0 rép.)

Et quels plug-ins sont installés ? siouplai...

En tout cas, beau travail sur l’interface.

Par contre y faudrait penser à changer Veni, Vidi, Vici et agora, parce qu’il y en a marre du frantin (au moins un néologisme français), il y a des gens à l’Unesco... (qui je l’espère ne veulent pas étouffer la langue)

Enfin, pour des profs... vous vous débrouillez bien en informatique.... Et surtout merci pour cette compilation merveilleuse à tous les contributeurs (et tout spécialement aux créateurs)

promis, je vais essayer de me libérer un peu de temps pour créer des notices

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 21 mai 2007 par Amaury (1 rép.)

Bonjour et merci d’avoir mis ce squelette en téléchargement.

Je suis très intéressé par l’effet plier/deplier pour les forums mais après plus d’une heure dessus, je ne vois toujours pas comment vous l’avez obtenu...

Quelqu’un pourrait-il me mettre sur la piste ?

Nouvelle page d’accueil du site Framasoft , le 22 mai 2007 par Léviathan

Bonjour,

Ah, on dirait qu’il manque les fichiers javascript dans l’archive fournie.

Bon, il y a des fichiers javascript (1, 2, 3) contenant le code pour la fonction plier/déplier

Bonne recherche,
Léviathan

Répondre à ce message

et les sources ? , le 6 février 2007 par makoto (1 rép.)

tres beau boulot pour cette refonte et les sources sont il accessibles ? j

je veux dire : peut on accedder au squelette spip de framasoft ? non pas pour les piller mais pour voir la facon dont cela a ete realise et certains trouvailles pour l’antispam, le flicker, ...

cordialement

et les sources ? , le 10 février 2007 par julien

Bonjour à tous, je suis en train de moter un site sous SPIP pour une assoc et j’aimerais aussi jeter un coup d’oeil à ce magnifique squelette.

En tous cas, très beau boulot.

Cordialement.

Répondre à ce message

Page groupware blanche , le 24 janvier 2007 par Jnk2 (0 rép.)

Bonsoir à tous,

Je vous signale juste que la page http://www.framasoft.net/rubrique383.html correspondant aux logiciels de type groupware envoie sur une page toute blanche :)

Longue vie à Framasoft, et avec du texte dedans si possible

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 21 janvier 2007 par cilbvs60 (1 rép.)

mon message ne concerne pas la page d’ acceuil mais un pb de lancement d’ openoffice sur ma clé udb, 512 mo. Openoffice se lance bien sur le micro du boulot avec un runtime java 1.4.2.06. J’ ai installé le même sur mon micro perso, et là bug : openoffice ne se lance pas , on voie juste le logo FRAMAKEY. Et pius plus rien !!!! Que faire

Nouvelle page d’accueil du site Framasoft , le 21 janvier 2007 par elrik

Que faire ? Poster ce message sur le forum dédié à la Framakey me semble être la meilleure solution...

-----> Forum framakey

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 19 janvier 2007 par f1s1 (0 rép.)

re-salut,

J’avais pas vu : le popup "cliquer pour déplier" le e accent aigu a été oublié, question d’encodage...

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 19 janvier 2007 par f1s1 (0 rép.)

salut,

bureautique —> bibliothèques & co : page blanche

—> latex : page blanche

—> police de caractères : pages blanches

Courage. La fin des pages blanches arrive...

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 18 janvier 2007 (0 rép.)

http://www.framasoft.net/article1955.html

soit à partir du lien vers dotclear issu de la page http://www.framasoft.net/rubrique371.html

Bonne suite

Répondre à ce message

page tuto blanche comme neige , le 18 janvier 2007 par chinon37 (1 rép.)

Bon, j’aime bien cette nouvelle présentation, mais que de pages vides... Pour aujourd’hui, ce sera "Tutoriels" (http://www.framasoft.net/rubrique4.html)rien que ça ! Sniff !! A part ça, continuez, on aime bien ce que vous faites

page tuto blanche comme neige , le 19 janvier 2007 par chinon37

pour tutoriels, ça marche maintenant, mais le sous menu sites web de tutoriel (http://www.framasoft.net/rubrique268.html) est immaculé.

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 18 janvier 2007 par f1s1 (0 rép.)

Salut

multimédia —> audio = page blanche

—> tv/fm = page blanche

—>vidéo —>lire/éditer = page blanche

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 18 janvier 2007 par f1s1 (0 rép.)

Salut,

Idem pour la page musique (voir jujuland). Passé par le menu et le moteur de recherche et blanc comme une portée pas encore écrite.

http://www.framasoft.net/rubrique380.html

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 17 janvier 2007 par JujuLand (2 rép.)

Les pages ’CDs live’ et ’Distributions Linux’ jouent à cache-cache ce matin.

Moi qui avait pris la décision, vu l’arrivée de Vista de m’intéresser de plus près à Linux

Putain de cache ...

A+

Nouvelle page d’accueil du site Framasoft , le 17 janvier 2007 par elrik

Essaie à nouveau, je suis passé sur chacune d’entre elle pour forcer le cache !

Cordialement.

Nouvelle page d’accueil du site Framasoft , le 17 janvier 2007 par JujuLand

Merci pour la promptitude, mais je ne vais pas pouvoir y aller avant demain.

Par contre, ça me semble une maladie contagieuse, et dont il faudra rapidement trouver la panacée, sous peine de voir les visiteurs pressés fuir vers d’autres cieux. Pourvu que ce ne soit pas pour le site de Microcrotte ...

Quelques indispensables contaminés : CDEX, FRAMAKEY et KNOPPIX par exemple sur la page.

A+

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 15 janvier 2007 par JoKoT3 (1 rép.)

salut, la rubrique utilitaires>utilitaires est blanked :

http://www.framasoft.net/rubrique165.html

Nouvelle page d’accueil du site Framasoft , le 15 janvier 2007

Ah bon ?

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 13 janvier 2007 par Hikapa (1 rép.)

Et pourquoi pas le XHTML 1.0 strict ? Ce serait bien plus respectueux des standards ! À part ça, très bons changements !

Je peux vous aider si vous vouliez passer cette validation !

Nouvelle page d’accueil du site Framasoft , le 14 janvier 2007

XHTML 1.0 strict n’est pas "plus respectueux des standards" que le HTML 4.01 Strict.

Ca ne veux rien dire que le XHTML 1.0 strict est plus respectueux des standards !

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 12 janvier 2007 par Tuxette (3 rép.)

Juste une remarque, purement graphique : La rubrique "à la une" dans la colonne en haut à droite semble contraire à la logique habituelle du regard ; problème d’ergonomie : c’est prouvé, d’instinct on cherche la une dans la zone centrale d’une page, en général.

Cela dit, mille mercis pour le contenu remarquable de votre site, extrêmement utile, et dont je vante les mérites à maintes occasions.

J’y puise régulièrement, car il est clair, complet, accessible aux néophytes et intéressant pour les plus expérimentés. La Framakey est une merveille qui m’a sauvé la mise dans un contexte de travail très étouffant où il est difficile aux utilisateurs de faire remonter leurs besoins, particulièrement s’agissant des outils libres... un comble quand on est documentaliste et sensibilisé(e) à la question ! Les problèmes posés sont à la fois pratiques et éthiques.

*Tuxette*

Nouvelle page d’accueil du site Framasoft , le 12 janvier 2007 par RNB

Bonsoir.

> Juste une remarque, purement graphique : La rubrique "à la une" dans la colonne en haut à droite semble contraire à la logique habituelle du regard ; problème d’ergonomie : c’est prouvé, d’instinct on cherche la une dans la zone centrale d’une page, en général.

En effet, on pourrait envisager d’intervertir certains blocs : placer "à la une" en début de colonne centrale et placer "présentation" en haut de la colonne droite.

Merci pour cette remarque, qui va rejoindre une todo-list qui n’e fait que s’allonger.

Nouvelle page d’accueil du site Framasoft , le 13 janvier 2007 par JoKoT3

Et pourquoi pas des colonnes déplaçables à la sauce ajax ?

(je suis dur là :p)

Nouvelle page d’accueil du site Framasoft , le 18 janvier 2007 par Ner0lph

Comme dans Netvibes tu veux dire, non ?

Répondre à ce message

J’ai de la peine à comprendre , le 11 janvier 2007 par Stéphane (1 rép.)

Bonjour Messieurs de Framsoft,

Vous avez voulu changer les pages pour être conforme aux normes ce qui est une bonne chose.

Mais SVP, supprimer le DOCTYPE strict ! Il empêche l’affichage de nombreuses page. Si vous chercher à perdre des visiteurs, continuter comme ça.

La vrai but du site internet est surtout d’être visible pour le plus grand nombre de personne et non à tout pris d’être aux normes

La page d’accuei Logitciel Libre n’est pas accessible, donc toute la partie des logiciels fermée. http://www.framasoft.net/rubrique2.html

Je souhaite vivement de retrouver mon cher ami Framasoft en bonne santé.

Stéphane de Neuchâtel

J’ai de la peine à comprendre , le 12 janvier 2007 par RNB

Bonjour.

Ce n’est pas le doctype strict qui empêche l’affichage de la page mais un problème de mise en cache des pages que nous tentons de régler.

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 11 janvier 2007 (1 rép.)

Bonjour,

où se cache donc le forum dans cette nouvelle présentation ?

Nouvelle page d’accueil du site Framasoft , le 11 janvier 2007

C’est le lien Framagora qui se trouve dans la barre de navigation en haut du site.

Répondre à ce message

¨Problème de liens , le 11 janvier 2007 par rng (2 rép.)

Tout d’abord merci pour tout le travail que vous faites.

Sur les adresses suivantes les pages sont vides

http://www.framasoft.net/article1039.html http://www.framasoft.net/rubrique4.html http://www.framasoft.net/rubrique163.html http://www.framasoft.net/article1138.html

J’ai vu sur le forum que d’autres liens ne fonctionnant pas sont dus à des problème de cache

Il serait peut être nécessaire de lancer une moulinette pour recalculer toutes les pages vides du site

¨Problème de liens , le 11 janvier 2007

Une autre page blanche :

http://www.framasoft.net/article2584.html

¨Problème de liens , le 11 janvier 2007 par RNB

Bonsoir.

Oui, nous avons actuellement quelques petits problèmes dans la gestion de la mise en cache des pages du site. Cela devrait se régler dans les jours qui viennent.

Désolé pour la gène occasionnée.

Répondre à ce message

Virage narcissique de Framasoft et lourdeur des pages , le 10 janvier 2007 par alouette (1 rép.)

Bonjour,

Il n’y a que 4 liens fonctionnels dans le RSS pour les logiciels (MacLibre, PCR Postit, PlanFacile, Metamorphose), les autres affichent une page vide (ex. NAT).

Une observation à propos des squelettes SPIP : la tendance actuelle tend à produire des pages très lourdes, largement supérieures à 100 Ko. Sarka-SPIP par exemple tourne avec un CSS de 2000 lignes !? (38 Ko)

Cette page se situe aussi dans cette démesure avec un poids de 107558 bytes. Après enregistrement de la page, sa taille est de 90.2 Ko (taille sur le disque 132 Ko). Les deux CSS pèse 23829 bytes (21.5 Ko, taille sur le disque : 28 Ko).

Rapport de vitesse : 14.4K - 84.16 seconds

28.8K - 42.48 secondes

33.6K - 36.53 secondes

56K - 22.24 secondes !!!

ISDN 128K - 7.36 secondes

T1 1.44Mbps - 1.37 secondes

Cette page comptabilise six "Warning" dans le rapport d’optimisation des pages web.

Bref, votre point de vue sur la conformité est un peu décalé avec cette surcharge continuelle dans chaque page. Par exemple, la rubrique "Juste une image" à gauche et celle du Framablog d’Aka au-dessus, cela devient narcissique depuis quelques temps : séduire, captiver, plaire, être beau,... il y a des facettes psychopathologiques du métier de professeur qui ressortent nettement dans ce site...

Ensuite, Framabook, Framakey, Framasoft, ce n’est pas français comme usage. Selon moi, c’est une erreur d’utiliser ce "franglais", ce n’est pas conforme à votre francité dont vous êtes responsable au premier chef. Il y a des gens qui se battent tous les jours pour empêcher cette dérive, notamment à l’UNESCO.

Enfin, votre Captcha Anti-Spam peut perturber des gens présentant des troubles de la calculie (trombose, ablation de zones corticales pour soigner une tumeur, ...).

À part cela, vous êtes devenus indispensables et c’est avec un grand contentement que je parle de Framasoft autour de moi. Espérons que le sillon des "dérives" actuelles ne se creusent pas à l’avenir.

Cordialement, Alouette

Virage narcissique de Framasoft et lourdeur des pages , le 10 janvier 2007 par Christian

Espérons que le sillon des "dérives" actuelles ne se creusent pas à l’avenir.

Cela est très difficile de rester humble.

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 10 janvier 2007 par Paul Wohler (0 rép.)

Je suis indulgent de nature, et bien content de framasoft par ailleurs et donc je me permets de signaler un pb j’ai voulu consulter l’article sur MediaCoder : inmpossible par ggogle ou directement sur le site la page est désespérément vide. article4345.html. Bon courage et merci encore pour tout votre travail ! ... et bonne année à framasoft galaxie !

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 10 janvier 2007 par Droopy (1 rép.)

Bonjour,

mon marque-page firefox pointe vers framasoft.net. Or la page m’apparait vide depuis 2 jours (depuis le 8 janvier) avec seulement 2 encarts-titres faisant la largeur de mon écran : "libre : actualités" et "libre : agenda". Seule la pratique et discète barre de navigation me permet de basculer vers framasoft.org qui lui fonctionne parfaitement.

Nouvelle page d’accueil du site Framasoft , le 10 janvier 2007 par Droopy

j’ajoute que les deux rubriques visées sont celles normalement situées en bas à droite de la page d’accueil du site

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 9 janvier 2007 par Gérard-Alexandre SANCHEZ (0 rép.)

Bonjour, j’adore votre site, vous faîtes un travail admirable au service du plus grand nombre, et même, de l’intérêt général. Pour l’instant, je n’ai pas encore eu de problèmes de navigationdûs au changement d’architecture du site. D’ailleurs, même si cela arrivait, je m’interdirais toute critique facile, je ne ferais que vous signaler un lien "délié" ou autre. Je suis arrivé sur Framasoft à partir d’un lien sur http://foxmail.free.fr, qui référence aussi 3 ou 4 autres sites (en français) dédiés au monde freewares et open source (www.espacefr.com et www.gratilog.net par exemple). Depuis, je suis un "fidèle" du site, et je ne manque pas de le faire connaître. Vous faîtes un excellent travail, et le résultat est un site agréable à naviguer, intéressant, riche de contenus utiles et variés. Je participe modestement à un site www.axelibre.org (dédié à l’art et à la culture).

-----> @xé libre - le magazine transdisciplinaire des arts et des cultures

Répondre à ce message

Nouvelle page d’accueil du site Framasoft : Bug ? , le 9 janvier 2007 (1 rép.)

Bonjour,

très belle mise en page, mais je n’arrive plus à lire cette page : http://www.framasoft.net/article4380.html

alors que je le pouvais il y a une semaine...

Cordialement

Bertrand

Nouvelle page d’accueil du site Framasoft : Bug ? , le 9 janvier 2007

Voilà c’est réparé. C’était un petit problème de cache.

Merci du signalement.

Léviathan

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 8 janvier 2007 (1 rép.)

Très élégant, rien à redire. Juste un petit souci javascript : les blocs sont dépliés et il n’y a pas moyen de les replier. J’utilise le navigateur Mozilla (sous Linux). La console javascript indique : "Erreur : state.indexOf is not a function Fichier Source : http://www.framasoft.org/scripts/switch.utils.js Ligne : 56" idem pour la ligne 90.

Voilà, j’espère que ça peut vous servir.

Et encore bravo

Nouvelle page d’accueil du site Framasoft , le 8 janvier 2007 par RNB

Bonjour.

Merci pour cette remarque : j’aurais en effet dû tester le javascript un peu plus. La méthode indexOf appliquée à des tableaux n’existe qu’à partir de la version 1.6 de javascript ; je pensais que cette version était supportée par tous les navigateurs à moteur Gecko, mais cela ne semble pas être le cas.

Je corrige ça de suite.

Encore merci.

Répondre à ce message

Accessibilité et navigation au clavier , le 6 janvier 2007 par mpop (3 rép.)

Bravo à tous, beau boulot !

La seule réserve que je ferais concerne l’accessibilité pour la navigation au clavier. Il y aurait selon moi deux choses à mettre en place :

1. Des liens d’accès rapide. Jean-Pierre Vilain les décrit dans l’article suivant : « Les liens d’évitement ».

2. Répercuter le style des liens au survol (pseudo-classe :hover) pour qu’il s’applique également lors du focus par la navigation au clavier (pseudo-classe :focus). Concrètement, cela signifie qu’au lieu d’avoir ceci : a:hover (color : orange ;) on aura ceci : a:hover, a:focus (color : orange ;) Cela ne suffira pas pour Internet Explorer (si on veut rentrer dans le détail et corriger ça aussi, on passera par des commentaires conditionnels), mais ça serait déjà pas mal.

Note : j’ai remplacé les accolades par des parenthèses, vu que les accolades sont transformées en ... de plus, les deux-points des pseudo-classes sont automatiquement précédés d’une espace.

Accessibilité et navigation au clavier , le 7 janvier 2007 par RNB

Bonjour mpop et merci pour ce commentaire.

ok pour la pseudo-classe focus, c’est implémenté.

Par contre, pour les liens d’évitements, ils doivent sans doute être utiles à certains endroits, mais je ne vois pas ce qu’ils apporteraient ici. La structure du code HTML a été pensée pour organiser le contenu dans un ordre logique : menu de navigation puis colonne centrale puis les colonnes droite et gauche.

Ce qui fait que si vous naviguez avec le clavier, les premiers liens actifs sont ceux du menu de navigation général qui permet d’accéder aux grandes rubriques du site (annuaire, tribune libre, tutoriels), puis le contenu principal de la page (colonne centrale) et finalement les informations annexes de la page (colonne droite et gauche).

Pourrais-tu me dire à quel type de liens d’évitement tu penses (surtout pour éviter quoi) ?

Amicalement

Accessibilité et navigation au clavier , le 9 janvier 2007 par mpop

Hello RNB,

Je ne sais pas si tu as pu lire l’article de Jean-Pierre Villain pointé dans mon précédent message ?

Tu as raison de dire que le site est structuré assez intelligemment : menu vers les principales rubriques d’abord, puis le contenu central, puis les contenus annexes. Si on veut juste naviguer dans le site et lire les contenus principaux, ça marche très bien. Si on veut aller au contenu annexe, par contre, ça peut demander une cinquantaine de tabulations, ce qui est assez pénible...

On pourrait avoir, par exemple, des liens d’accès rapide (cf. ceux que l’on peut voir sur la plupart des blogs Dotclear, dont le mien). Par exemple un lien vers le contenu principal (ce qui permet de sauter le menu, même si ça n’est pas vraiment nécessaire...) et surtout un lien vers le contenu secondaire (colonnes).

Mais j’avoue que je n’ai pas réfléchi en profondeur à l’intérêt d’utiliser ce genre de procédé sur Framasoft... L’accessibilité est toujours une question délicate, et on peut rarement appliquer des solutions « génériques ».

Voilà, désolé de ne pas pouvoir donner de réponse très concrète... Et je vais compliquer encore les choses en rajoutant ceci :

1. sur la page d’accueil, si on navigue au clavier on ne peut pas accéder à la version « condensée » de l’index de l’annuaire des logiciels libres. Les titres qui permettent de déplier (à la souris uniquement !) les catégories ne sont pas des liens, et ne sont donc pas activables au clavier. Par contre je ne connais pas trop les solutions javascript pour faire ça mieux... (Note : j’ai essayé de voir ce qu’il en était sur la page principale de l’annuaire, mais je ne peux y accéder... page blanche... problème de cache ?).

2. sur la page où je rédige ce message (avec un formulaire de saisie géré par SPIP, donc), l’ordre de tabulation a l’air complètement anarchique. Une petite recherche dans le code, et je trouve quelques attributs tabindex qui trainent. À la rigueur, si on s’en passait on ne s’en porterait pas plus mal. Au sujet des tabindex, encore un peu de littérature.

3. rien à voir avec la navigation clavier, mais je note que le premier lien de la « framabarre » pointe vers framasoft.ORG et non pas framasoft.NET. C’est peut-être voulu ? Le premier lien du menu de la page d’accueil de Framasoft pointe pour sa part vers framasoft.NET (tandis que les autres liens du site semblent prendre en compte le nom de domaine en cours).

En tout cas, bravo pour tout ce travail ! Quant aux corrections et améliorations encore possibles... eh bien, elles viendront peut-être, ou pas, suivant l’état de fatigue et la disponibilité des artisans de cette refonte ! Au pire, elles serviront peut-être à certains qui passeront par là, ou pour d’autres projets.

Accessibilité et navigation au clavier , le 10 janvier 2007 par RNB

Salut mpop.

Oui, j’ai lu le papier de Vilain (je traîne souvent sur AlsaCréations).

Oui, des liens pour accéder aux colonnes directement pourraient être intéressants.

1. Pour la page blanche, oui, pb de cache (un peu partout sur le site à cause de la migration spip) - ca devrait peu à peu se résorber dans les jours qui viennent.

Pour l’arbre pliable / dépliable de l’annuaire, effectivement il ne peut pas se déplier en navigation clavier parce que ce ne sont pas des liens. J’essayerai de voir s’il y a quelque chose à faire côté js (je pense à une soluce). Néanmoins, l’information reste accessible puisque le lien de fin de bloc conduit vers la page annuaire et que l’arbre sur cette page est toujours déplié.

2. Oui, faut faire le ménage dans les tabindex. Merci.

3. Oui, la aussi faut qu’on clarifie les "aller/retour" entre .org et .net dans les pages.

En tout cas, merci beaucoup de ce survol du site et de remonter ainsi des idées pour aider à améliorer la maquette. Je pense qu’on aura encore plusieurs jours de tripatouillage avant d’arriver à quelque chose qui se tienne à peu près.

Amicalement

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 1er janvier 2007 par jms821 (0 rép.)

J’apprécie aussi beaucoup la nouvelle présentation.

J’ai quand même un petit problème : il me semble que la liste des derniers posts ouverts ne se met à jour que rarement : actuellement, lorsque j’ouvre Framasoft, le dernier post ouvert date de plus de 6 heures... alors qu’en fouillant sur Framagora, j’en ai découvert des plus récents.

Quequ’un a-t-il des idées, parce qu’il me semble qu’avant cette liste se mettait automatiquement et immmédiatement à jour.

Bonne soirée Jms821

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 13 décembre 2006 par Slow Thunder (0 rép.)

je suggère de rajouter le/la Framapix dans la Framanav, cette galerie "vulgarise" très bien de façon visuelle les distributions libres enfin c’est mon avis...

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 10 décembre 2006 par soupaloignon (0 rép.)

Bonjour,

Bravo pour ce remaniement de la page d’accueil, du tres bon travail !!

Quelques remarques :

Assez d’accord avec Restouble dans son message ci-dessous, il y a double emploi avec le lien "1ere visite" et le le div "presentation", puisque les 2 pointent sur le même article. Il faudrait peut être supprimer le 1er lien, et adapter le titre du div, du genre : 1ere visite ? : Présentation Ou quelque chose dans le genre quoi ;)

Possibilité de retrouver la barre de nav du haut, quel que soit l’endroit où l’on est sur Framasoft. Beaucoup plus pratique pour la navigation.

Dans le div "Sur Framagora", il n’y a que les 10 dernières entrées sur le forum. C’est possible de passer à plus d’entrées ? 10 entrées ne représentent parfois qu’à peine une journée de forum.

Encore bravo à tous pour votre travail

Répondre à ce message

tout’petite amelioration , le 6 décembre 2006 par restouble (0 rép.)

juste pour gagner de la place sur le haut de la page il faudrais supprimer le lien "1er visite" et la barre horizontale bleu qui pour le 1ere est dans le bloc présentation et la seconde vraiment inutile !

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 6 décembre 2006 par isatis39871 (0 rép.)

Encore une fois félicitation. Un petit message pour signaler que les bugs graphiques (que vous aller tout de même corriger) ne se rencontrent pas sur les navigateurs libres qui respectent les standards serait il malvenu ?

Après tout c’est une raison de plus de migrer.

Répondre à ce message

Nouvelle page d’accueil du site Framasoft , le 4 décembre 2006 par Un fan (0 rép.)

Vraiment superbe mise à jour. Simple, élégant, classe. Beau boulot les gars, je viens tous les jours profiter du site. Merci.

Répondre à ce message

Nouvelle page d’accueil du site Framasoft : commentaires sur le forum , le 4 décembre 2006 par Omnisilver (0 rép.)

Merci pour cette nouvelle page, qui est une agréable surprise !

Des commentaires ont déjà été fait sur le forum :

-----> Mise à jour de la page d’accueil de Framasoft : bravo

Répondre à ce message

Informations complémentaires

Faire un don ? (défiscalisé)

Aidez-nous à atteindre notre objectif de 1080 donateurs récurrents pour assurer notre pérennité et notre développement !

Je soutiens Framasoft
pour 10€/mois

Dégooglisons Internet, l’an 2

Les services en ligne de géants tentaculaires comme Google, Apple, Facebook, Amazon ou Microsoft (GAFAM) mettent en danger nos vies numériques.

Pour cette 2e année, nous continuons le défi de vous proposer une alternative Libre, Éthique, Décentralisée et Solidaire à chacun de ces services.

Découvrez notre campagne
« Dégooglisons Internet »

Informations générales

Juste une image

Beethoven's Sixth Beethoven’s Sixth
Creative Commons BY