Remontage d’un site, jour 2 : CSS à nu et squelettes à revoir

Parti du constat que, pour résumer, tout était à refaire sur ce site pour le remonter à la hauteur de ce qu’on peut espérer, je me suis appliqué à commencer par un aspect très technique qui me taraudait depuis longtemps, les permaliens. Nous discuterons ici présentation et structure des pages.

Résumé des épisodes précédents

Parti du constat que, pour résumer, tout était à refaire sur ce site pour le remonter à la hauteur de ce qu’on peut espérer, je me suis appliqué à commencer par un aspect très technique qui me taraudait depuis longtemps, les permaliens.

Présentation insatisfaisante

D’abord, j’avais séparé les brèves et les articles, deux concepts de base de spip, ce qui correspondrait, si vous voulez, à leur équivalent presse. Sur le web on pourrait dire que les premiers sont des "entrées de blog" [1], et les seconds des articles qui ont vocation à une plus grande pérennité.

Il fallait donc les rassembler pour que l’archive historique de chaque année fasse figurer les deux types de données dans une seule liste chronologique. Merci spip de faire le plus gros du travail. Deux boucles, un filtre {annee_relatif=0} plus tard, et le gros du travail était presque fait.

Une page d’accueil pensée visuellement, c’est mal (TM)

nota-bene.org avec les anciennes CSS

Le gros défaut de la page d’accueil, outre qu’elle n’était pas spécialement esthétique, est sa structure. Dans l’ordre, on trouvait :

  1. "à la une", le dernier article publié
  2. "dernières brèves", quatre brèves et un lien vers les archives des brèves
  3. la suite de la une (quelques articles récents)

Autant dire qu’en désactivant les CSS tout se présentait bien mal, sans aucune lisibilité perticulière.

J’ai donc repris les squelettes de liste par année, et pour l’instant la page d’accueil liste les dix derniers éléments publiés, qu’ils soient articles ou brèves.

À nouveau une ou deux redirections et expressions régulières (encore une fois merci à Nicolas Hoizey pour sa suggestion) pour la gestion des années, et voilà déjà un site mieux structuré.

Reste à faire avant d’attaquer les CSS

Il reste à limiter autrement le nombre de nouveautés sur la page d’accueil, peut-être en donnant encore plus de poids aux brèves et en mettant une liste des derniers articles publiés à la suite... On verra comment ça évolue.

Il reste bien sûr à mieux présenter les résultats du moteur de recherche, et à rendre bilingue pour de bon le site. Spip le permet à présent sans aucune difficulté, il s’agit juste de s’y coller une bonne fois.

Leçon à tirer

On ne le répétera jamais assez : il faut désactiver les CSS ou faire exprès de concevoir des styles hideux comme c’est le cas actuellement sur le site pour bien comprendre ce qui manque dans la structure d’une page.

À titre d’information, temps passé sur cette étape 2 (RewriteRule, boucles, récupération des boucles en PHP, déploiement sur trois squelettes) : trois heures environ.

Notes

[1Autrement dit des petits articles notés au fil de l’eau, un "carnet" comme dit Karl Dubost, un "blog" comme disent les anglosaxons... Si vous avez manqué cete grande révolution de la publication sur le web, voir c’est quoi un weblog de l’excellente Stephanie Booth, tout s’éclairera

Commentaires

  • encore une fois merci à Nicolas Hoizey pour sa suggestion

    De rien, de rien ... ;)

    Il reste à limiter autrement le nombre de nouveautés sur la page d’accueil, peut-être en donnant encore plus de poids aux brèves et en mettant une liste des derniers articles publiés à la suite... On verra comment ça évolue.

    Personnellement, j’ai beau chercher depuis pas mal de temps, j’ai du mal à voir l’intérêt des brèves.

    Je pense qu’il est plus simple de n’avoir que des articles, typés éventuellement par deux secteurs ou deux mots clefs.

    Tu pourrais ainsi les mettres à la suite chronologiquement via une seule boucle ARTICLES ...

    Gastero Prod

    Répondre à Nicolas Hoizey

  • Personnellement, j’ai beau chercher depuis pas mal de temps, j’ai du mal à voir l’intérêt des brèves.

    Telle que je la comprends, la différence article/brève se défend, dans l’optique éditoriale : une brève c’est comme un entrefilet, un élément d’animation éditoriale "léger", alors qu’un article c’est un contenu "de fond". Effectivement dans ton site par exemple, tu fonctionnes comme un blog avec des items développés à chaque fois, donc le seul modèle ’article’ te convient.

    Mais pour ma part j’ai gardé les deux usages : soit ça tient en quelques lignes et c’est une brève, soit ça va faire l’objet d’un développement, et dans ce cas c’est un article.

    Sans compter que je n’ai pas non plus tranché sur le rangement des brèves à la racine du site, dans les secteurs : ça me posera problème quand je n’aurai plus que deux secteurs, français et anglais et rien d’autre. On verra bien à ce moment-là.

    La notion de rubriquage par mots-clés m’ennuie un peu, sans trop savoir pourquoi. Pour le moment je n’utilise pas de mots-clés, mais je vais finir par le faire, avec les articles qui se croisent sur des thèmes communs, comme Larcenet (cf. Presque et Les quantités négligeables), Baudoin (Le premier Voyage, Le Voyage, BD BOUM au jour le jour), etc. Donc pour moi les mots-clés vont servir à faire du croisement de données pertinent (ce qui était leur but original), plutôt que du rangement. Mais l’un n’empêche peut-être pas l’autre. Plein de blogs américains utilisent un système de n mots-clés par item de blog, c’est assez bien vu.

    Répondre à Stéphane

  • Telle que je la comprends, la différence article/brève se défend, dans l’optique éditoriale : une brève c’est comme un entrefilet, un élément d’animation éditoriale "léger", alors qu’un article c’est un contenu "de fond".

    Je suis bien d’accord avec cette distinction éditoriale, ce que je voulais dire est que j’ai en fait du mal à voir l’intérêt des brèves dans SPIP ... ;)

    Je pense qu’on peut s’en sortir avec les articles pour tous les types de contenus éditoriaux.

    Effectivement dans ton site par exemple, tu fonctionnes comme un blog avec des items développés à chaque fois, donc le seul modèle ’article’ te convient.

    Effectivement, même si certains items ne contiennent parfois qu’un paragraphe ... ;)

    La notion de rubriquage par mots-clés m’ennuie un peu, sans trop savoir pourquoi. Pour le moment je n’utilise pas de mots-clés, mais je vais finir par le faire, avec les articles qui se croisent sur des thèmes communs [...]

    Oui, c’est bien là l’intérêt des mots clefs, pouvoir caractériser des thèmes multiples sur chaque article.

    Mais du coup, affecter des thématiques, c’est aussi un peu classer, donc autant se passer d’un classement supplémentaire par rubriques, non ?

    Tout ce qui manque pour faire un système vraiment sympa, c’est l’arborescence sur ces mots clefs pour gérer des granularités.

    Un mot clef "standards" pourra être affecté à un article général, alors qu’un sous mot clef "XHTML" sera affecté à un autre article plus technique.

    Quand tu voudras voir les articles qui parlent de standards, tu verras les deux, mais quand tu voudras voir les articles qui parlent de XHTML, tu ne verras que le second.

    Avec plusieurs groupes de mots clefs avec leurs arborescence, on peut construire des site vraiment intéressant, avec beaucoup de navigation transversalle, ce qu’est censé proposer le web, alors que trop de sites sont figés dans une structure arborescente.

    Répondre à Nicolas Hoizey

  • Je suis bien d’accord avec cette distinction éditoriale, ce que je voulais dire est que j’ai en fait du mal à voir l’intérêt des brèves dans SPIP

    Ah tu parlais des types de données de spip et pas de leur usage, je n’avais pas compris, pardon :)

    Il y a eu une discussion là-dessus sur la liste spip-dev il y a quelque temps, où Fil finissait par conclure qu’à ce moment-là, on pouvait aussi bien mettre toutes les données dans une seule table géante ;)

    Je crois que ces deux données ont une raison d’être. On retombe toujours sur ce format : soit le truc qu’on lit sur la page d’accueil appelle une suite et c’est un article, soit il est complet et c’est juste un descriptif d’article... J’aime bien la séparation des deux types de données, malgré tout. Un truc court, hop, pas d’états d’âmes, c’est une brève.

    Mais du coup, affecter des thématiques, c’est aussi un peu classer, donc autant se passer d’un classement supplémentaire par rubriques, non ?

    Je ne crois pas. Les fichiers que je range sur mon ordinateur suivent une logique à une dimension, arborescente. Dans la plupart des cas les sites ne demandent pas autre chose qu’une arborescence simple "à plat", comme c’est le cas dans spip.

    Pour autant les mots-clés permettent effectivement (mais là je crois qu’on se répète) une transversalité de navigation intéressante, qui fait prendre tout son sens à la notion d’hypertexte.

    Mais encore une fois, n’oublions pas que le web n’est pas le métier de tous les gens qui surfent : pour la plupart des visiteurs, une arborescence classique est claire et non équivoque. Quand je vois ton "arborescence" de mots-clés, elle n’apporte rien en tant que telle. C’est le double ou triple classement d’un article dans les mots-clés qui fait la valeur du croisement, mais ce n’est pas percetible dans ta présentation. Une arborescence classique en arbre aurait produit le même effet sur le visiteur, même si je sais que tu vas me reparler d’ubiquité du contenu avec les mots-clés, ubiquité impossible avec les rubriques.

    Répondre à Stéphane

  • Toute cette perception à priori arborescente sera bien oubliée quand on aura manipulé pendant quelques années des systèmes d’exploitation en base de données et non plus en arborescences de fichiers ... ;)

    Bon, d’accord, on a encore le temps.

    Quoi qu’il en soit, c’est vrai que c’est pas forcément clair sur mon site, mais je n’ai pas trouvé comment faire plus clair, la preuve sur un nouveau site que j’ai sorti aujourd’hui : Marketing Planet

    Répondre à Nicolas Hoizey

  • Il y avait un programme sous Mac, FileMaker pro si j’ai bonne mémoire, un “filer

    Répondre à Stéphane

  • bon alors ce squelette et css à nu ?
    quand est ce que le site va se parer de ses plus beaux atours ? Me dit pas que celà va rester un page blanche (avec du contenu bien sûr) !

    je teste sur ma becane Templeet

    templeet

    Répondre à Pittlabo

  • Comme tu y vas ! ;)

    Le site n’avance pas, enfin si, dans la tête. Je n’ai pas le temps en ce moment, tellement de choses nous sont arrivées ces derniers mois : déménagement dans une maison (si si, c’est possible en région parisienne...), et puis évidemment ma merveilleuse petite fille qui me tient loin de l’ordinateur et je me plie à l’exercice avec bonheur...

    Ça va bien finir par revenir. Déjà l’apparence du site s’est épurée, je n’ai gardé que le strict minimum.

    En secret, dans les alcoves du site, des modifications profondes se trament (des associations de mots-clés spip, notamment, qui vont permettre une structuration très marquée de la page d’accueil).

    Je traîne, je traîne.

    Répondre à Stéphane

  • [...] des associations de mots-clés spip [...]

    Encore du teasing ??? 😉

    Répondre à Nicolas Hoizey

  • Encore du teasing ??? 😉

     :)

    Disons que c’est déjà mis en place dans l’interface d’administration, pour pouvoir dès à présent travailler sur les squelettes sans avoir un décalage trop grand entre la préproduction (machine maison) et la production finale (ici même).

    Répondre à Stéphane

  • Tu veux dire que tu vas associer différents mots clefs à un même contenu, par thématique, plutôt que faire des rubriques, c’est à dire comme je fais moi, ou alors quelque chose de plus puissant qui m’échappe pour l’instant ???

    Sinon, tu les gères comment tes hreflang ? Tu utilises les liens SPIP, quand même, ou des liens HTML classiques ?

    Répondre à Nicolas Hoizey

  • Tu veux dire que tu vas associer différents mots clefs à un même contenu, par thématique, plutôt que faire des rubriques, c’est à dire comme je fais moi, ou alors quelque chose de plus puissant qui m’échappe pour l’instant ???

    Pas vraiment plus puissant, non... (je ne fais rien qui puisse échapper à qui que ce soit, c’est au-dessus de mes capacités ;)

    En fait chaque lien de type blogroll est "taggé" en tant que tel dans l’admin, et est stocké dans une rubrique correspondant à sa langue. Disons que je prépare la migration au fur et à mesure que je rentre du contenu.

    Tu y verras plus clair le jour où je débloquerai enfin du temps pour y travailler...

    Sinon, tu les gères comment tes hreflang ? Tu utilises les liens SPIP, quand même, ou des liens HTML classiques ?

    J’utilise les liens spip normaux mais avec un ’diacritique’ supplémentaire, en gros : "(en)http://www.w3c.org/", et une expression régulière en filtre de sortie.

    Ce n’est pas idéal mais ça permet de tester pour le futur de spip. Sait-on jamais, si je trouve mieux on pourrait peut-être le proposer...

    Répondre à Stéphane

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Lien hypertexte

(Si votre message se réfère à un article publié sur le Web, ou à une page fournissant plus d’informations, vous pouvez indiquer ci-après le titre de la page et son adresse.)