nota-bene.org > Sur le web > Version 5

Version 5

À propos de cet article

Un article de Stéphane

Publié le 18 mars 2009

URL courte : http://nota-bene.org/314

29 commentaires

Mots-clés (tags)

Trois ans et demi sans rien changer. Il était temps de refondre complètement ce site, je m’impatientais.

Voilà un petit résumé de mon cheminement pour créer la version 5 de ce site.

Constat

La version 4 me sortait par les yeux, en partie à cause de son âge évidemment, mais aussi parce qu’à peine mise en ligne, elle m’agaçait déjà. Pendant que d’autres sortent encore et toujours des jolies choses, je suis face à mon manque de talent et ça me rend jaloux.

Et puis elle a fait l’objet de griefs justifiés, tant techniques qu’ergonomiques :

  • Les notes de bas de page dans les RSS ne marchaient pas.
  • Les liens de la page d’accueil ressemblaient à des publicités GoogleAds.
  • Les notes de bas de page dans les articles étaient au mauvais endroit : on perdait le contexte quand on voulait lire une note. Fausse bonne idée.
  • Le code avait été écrit en ISO et converti lors d’une mise à jour de spip à l’UTF. C’est un peu dangereux, et certaines pages sont restées mal codées un bon moment, faute d’y avoir pensé.

Mes griefs personnels en plus : (je passe au présent pour vous faire ressentir le côté pressant ; quel suspense, hein ?)

  • La décoration dans le bandeau du haut est laborieuse à mettre à jour, alors je ne l’ai pas fait. Il faut automatiser.
  • Les liens sont sous forme de brèves spip, et je finis par me ranger à l’avis de Cédric selon lequel les brèves sont un format bâtardisé des articles : pas d’auteur associé, l’obligation de les stocker au niveau des secteurs [1]
  • La gestion et la présentation des mots-clés ne me satisfait pas, or j’aimerais plus de croisement entre tous les contenus. Elle a été décidée à une époque où je ne m’en servais pas, et ce n’est pas pratique de mettre à jour les modèles de pages actuels.
  • Marre de voir ce site. La refonte date de septembre 2005, soit une éternité pour le web .Entretemps j’ai appris pas mal de choses, lu beaucoup, j’ai envie d’expérimenter. Mais entretemps est arrivé Paris Web, un deuxième enfant... Il fallait décider de prendre le temps une fois la tête sortie de l’eau.

Concepts : constats, attentes

Les constats :

  • Le site actuel est lisible par tous les navigateurs, il n’a aucun prérequis technique.
  • L’audience du site : elle est assez importante pour un site personnel mais très hétéroclite ; ça va des copains d’école aux technophiles qui remplissent les gradins lors de Paris Web en passant par mes proches qui eux ne sont pas du tout technophiles. Je ne peux, là encore, pas avoir d’attentes liées à la taille de l’écran, mis à part que le gros de la troupe aura au moins un écran en 1024x768.
  • Standards du web : depuis le temps que je prône les bonnes pratiques, je me dois d’y être fidèle. Il faut donc conserver une optique orientée-standards.

Les attentes de cette refonte :

  • D’abord évidemment c’est esthétique : le design (ou le stylisme, c’est selon) dans les nouvelles technologies vieillit très vite. En particulier sur le web, le design étant entièrement immatériel, il est très volatil et très facilement modifiable.
  • Ensuite un certain nombre d’évolutions techniques réclament qu’on s’y intéresse.
    • L’intérêt du web c’est sa facilité à faire des liens dans tous les sens. Jusque-là j’utilisais des brèves pour ce faire, assorties d’un bookmarklet et d’un peu de Greasemonkey pour les préremplir, mais ce n’est pas idéal. Netvibes fournit un service de « partage » assorti d’une extension Firefox, service qu’on peut ensuite rapatrier via RSS et afficher via des boucles spip.
    • J’ai envie de pouvoir facilement ajouter des retours de Twitter ou de Flickr, des blocs de publicité pour les événements auxquels je tiens, etc.
    • Un gadget que j’aime beaucoup, c’est Gravatar mais je l’avais ajouté à la version 4 comme une verrue, je veux donc pouvoir l’intégrer plus proprement dans le design : il y a même des chevauchements avec le texte des commentaires.
    • Les plugins spip sont intéressants, et je veux notamment utiliser des intertitres de plusieurs niveaux facilement. L’ancien design ne s’y prêtait pas trop, il était vraiment conçu avec un seul niveau d’intertitres en tête, et cette rigidité m’a parfois contraint dans l’écriture (or on est d’accord : c’est l’outil qui doit servir l’homme et pas l’homme qui doit se conformer à l’outil, amen).
  • Enfin une évolution éditoriale est nécessaire : le site est bilingue depuis de nombreuses années, mais depuis quelque temps je n’écris quasiment plus rien en anglais, mis à part pointer vers des articles en anglais dans la section des liens. Je veux donc que le site soit plus « visiblement » francophone, et prévenir les non-francophones de ce recalibrage en les détectant sur la base des langues de leur navigateur ou sur la base de la langue de l’article qu’ils sont en train de lire.

À suivre

Ça c’est fait : les bases de la refonte sont posées. Il reste des défauts (je dois refaire la CSS handheld par exemple), mais ça ira pour ce soir.

Maintenant je vous jette cette version en pâture, à vous de me donner votre avis. Merci à ceux qui m’ont subi ces deux derniers mois sur le sujet (ils se reconnaîtront).

Tiens, par exemple : ça vous intéresse d’avoir un article technique sur tous les bricolages de cette nouvelle version ?


Notes

[1Secteurs : catégories à la racine dans Spip.


Commentaires

    • 18 mars 2009

    C’est beau !

    Bravo !

    Répondre à Pierre

    • 18 mars 2009

    Bravo Steph’, un peu dérouté au départ, je m’y fais bien....

    Moi, je signe tout de suite pour un aticle technique sur telle refonte. Ca me permettra de comprendre (enfin) certains trucs de SPIP.

    Répondre à Elie

  • DI

    • 18 mars 2009

    j’adore !! beau travail, très beau ..
    - technophile sans gravatar

    Répondre à DI

    • 18 mars 2009
    • en réponse à Elie

    Moi, je signe tout de suite pour un aticle technique sur telle refonte. Ca me permettra de comprendre (enfin) certains trucs de SPIP.

    Alors voilà, on jette une idée en l’air et il y a toujours quelqu’un pour vous la renvoyer à la figure sourire

    Je dors un peu et j’essaie de mettre tout ça au propre.

    Répondre à Stéphane

    • 18 mars 2009

    Enfin !

    Comme tu le sais déjà moi j’adhère bien à cette refonte, même si j’ai évidemment quelques remarques névrotiques... alors puisqu’on est là j’y vais :

    * Je trouve un peu déstabilisant de ne pas avoir de rollover sur les liens en images (générées par Spip j’imagine ?). Au focus, on a bien l’outline, mais au roll, rien. L’accessibilité elle raconte quoi à ce sujet ?

    * Je trouve toujours qu’il manque un poil de padding sur ton conteneur principal (celui qui contient les articles) : +10px de chaque côté ça ferait pas de mal !

    * Beaucoup de couleurs différentes pour les liens hypertextes ? Pas envie d’homogénéiser ça ?

    Répondre à STPo

    • 18 mars 2009
    • en réponse à STPo

    1. Effectivement. Je vais sans doute faire revenir les "lire la suite".

    2. Non, le padding, non. Non au padding ! clin d'œil

    3. Je dois y réfléchir.

    Merci en tout cas.

    Répondre à Stéphane

    • 18 mars 2009

    C’est vrai que ça déroute un peu mais finalement, on s’habite. En tout cas, ça a le mérite d’être aéré... Bravo Steph !!!

    Répondre à Mimi

    • 18 mars 2009

    Salut,
    Je trouve cette nouvelle version bien meilleure que l’ancienne, mais je dois dire que donner un peu de couleur égayerait le tout ^^

    En tout cas bravo !

    Sinon, ça serait vraiment bien si vous faites un petit article technique sur cette nouvelle version car je suis de plus en plus intéressé par spip.

    Répondre à Kadus

    • 18 mars 2009
    • en réponse à Kadus

    Ah non non non, pas de couleurs, je n’aime pas les choses fun, je veux que mes lecteurs soient tristes, déprimés, abattus. C’est la crise, non ? clin d'œil

    Blague à part j’ai longtemps creusé les couleurs avant d’arriver à cette « épure », on verra si je fais bouger des choses... Déjà, les liens vont s’égayer, normalement.

    Répondre à Stéphane

    • 18 mars 2009

    Beautiful sourire

    Répondre à Pascale

    • 18 mars 2009

    C’est très élégant sourire

    Répondre à Thanh

    • 18 mars 2009

    Bon si je vous dis que ça ne me fait pas plaisir ces louanges, je serai un menteur. sourire

    Mais il y a des choses à améliorer, voir plus haut notamment les questions de STPo.

    À suivre donc. Ce n’est jamais fini !

    Répondre à Stéphane

    • 19 mars 2009

    ’me disait bien que la gestion de #about avait pas une gueule de CSS ; tout ceci est très intéressant... sourire

    Répondre à an.archi

    • 19 mars 2009

    Plutôt bien réussi. Ca fait du bien le changement !

    Truc dont je suis pas fan : la photo dans le bandeau... Avant qu’elle se charge tout le bandeau était gris et je trouvais ça plus classe...

    http://www.jsmansart.com

    Répondre à Jean-Sébastien Mansart

  • J’expliquerai tout ça dans l’article technique sourire

    Répondre à Stéphane

  • Après, tous les goûts sont dans la nature. Cependant, sans ça, c’était encore plus terne (déjà que plusieurs personnes me disent que ce n’est pas festif)...

    En fait si tu enlèves l’image en bricolant dans la Web Developer Toolbar tu verras que c’est vraiment, mais alors vraiment triste.

    Répondre à Stéphane

    • 19 mars 2009

    Yoooh ! Yeeeeeh ! Yipi !

    • Pour le bandeau, un plugin dédié devrait voir le jour... un jour... espérons qu’il propose une rotation des images !
    • Hééé, t’embête plus avec les gravatars, SPIP gère ça trop bien, avec ce plugin Gravatar sourire
    • Et tu me donnes d’autres idées de plugins...

    C’est chouette, la vie continue !

    Répondre à tetue

    • 19 mars 2009
    • en réponse à tetue

    Oui j’ai vu le plugin Gravatar, mais j’expliquerai bientôt comment je bricole.

    En gros (je développerai) l’idée c’est de ne pas retarder l’affichage à cause d’une tierce partie (souvent les images distantes de gravatar.com ralentisssent l’affichage de la page), donc j’ajoute une classe au conteneur du nom, et au chargement je vais les parcourir avec Javascript et déduire quel gravatar on veut, puis l’insérer comme image de fond.

    Répondre à Stéphane

  • Intéressant ! Et ce serait reversable au plugin ?

    Répondre à tetue

    • 19 mars 2009
    • en réponse à tetue

    Tiens je n’y avais pas pensé.

    Je documente et je livre ça à la communauté dès que faire se peut.

    Répondre à Stéphane

    • 23 mars 2009

    C’est plus beau en vrai qu’en Jpg !

    =))

    Répondre à Je suis Voulf et toi ?

    • 23 mars 2009

    Houlala, mais j’avais pas vu la mise en page des commentaires... C’est la grande classe ! J’aime beaucoup.

    Répondre à Pierre

    • 26 mars 2009

    Petit problème trouvé, il n’y a pas de formulaire de recherche sur le blog ?

    Répondre à Kadus

    • 26 mars 2009
    • en réponse à Kadus

    Pour l’instant il y a un lien en haut de chaque page, et puis une page de recherche.

    Répondre à Stéphane

  • Ah désolé je l’avais pas vu ^^ ;

    Répondre à Kadus

    • 26 mars 2009
    • en réponse à Kadus

    Note que ça veut bien dire que ce n’est pas parfait, sans doute... sourire

    Répondre à Stéphane

    • 30 mars 2009

    Jolie épure sourire

    Bon, comme mes petits camarades avant moi, j’ai quelques remarques
    * pourquoi ne pas laisser tes intertitres (hn) en gras ? J’ai du mal à distinguer les différentes parties de ton texte.
    * j’ai fait un test avec un background en #eee sur la partie contenu (class="texte") et c’est vachement plus lisible. Sinon l’oeil se perd dans ce grand fond blanc immaculé sourire

    Répondre à Oric

    • 14 avril 2009

    J’arrive un peu tard, mais félicitations, ce renouveau est le bienvenu !

    Je ne suis pas fan des images typo, mais ça permet d’améliorer le style, je peux comprendre leur usage.

    Sinon, dommage qu’il n’y ait pas de vignettes de tes photos, sur la page d’accueil comme dans la rubrique dédiée.

    Répondre à Nicolas Hoizey

  • Je ne suis pas fan des images typo, mais ça permet d’améliorer le style, je peux comprendre leur usage.

    À vrai dire, moi non plus je n’en suis pas fan. Les espaces insécables sont mal gérés (mais bon, ce n’est pas la faute de spip), le multilinguisme au sein d’une même phrase est par la force des choses passé à la trappe.

    Je vais faire une deuxième passe sur le design bientôt, grâce aux remarques ci-dessus notamment. Je me demande si je ne vais pas carrément revoir la typographie.

    Sinon, dommage qu’il n’y ait pas de vignettes de tes photos, sur la page d’accueil comme dans la rubrique dédiée.

    Pas bête. Je te pique l’idée. sourire

    Répondre à Stéphane

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.

Ceci est la version Bureau Afficher la version Mobile