Overblog
Editer l'article Suivre ce blog Administration + Créer mon blog

Paris, photo, humeurs, un peu de HTML/CSS pour faire sérieux. Feinte innocence et vraie naïveté (ou vice-versa). Encore un blog qui agite ses petits bras en couinant "Viens me lire !"

JavaScripteries

Quand on ne sait pas quoi écrire, le JavaScript c'est rigolo et ça occupe. J'ai donc été particulièrement actif ces dernières semaines – en JavaScript, s'entend.


Il y a, depuis un petit moment, un mignon (je trouve…) bandeau en bas des articles, où s'affichent les albums photos.

Il y a, depuis le même long petit moment, un changement dans les photos de grande taille : on les fait défiler en les 'agrippant' par le curseur plutôt qu'en utilisant des barres de défilement. Qui ont disparu parce que je trouve ça vilain. Comme personne ne semble l'avoir encore remarqué je fais ma pub, sans vergogne aucune.

Il y a, depuis quelques jours, un petit truc discret qui m'a occupé un bon moment : les demi-pastilles dans les marges des articles. J'y ai regroupé tout ce qui peut aider à se promener d'une page à l'autre dans le blog, j'espère que vous trouverez ça commode. Vous me direz ?


Tout ce petit travail m'a conforté dans l'idée que le plus difficile n'est pas forcément de faire ce qu'on a en tête (avec de l'obstination on y arrive toujours) mais 1 - de savoir clairement ce qu'on veut faire et 2 - d'anticiper les interactions vicelardes et les cas particuliers piégeux.

Ainsi du bandeau des albums. Il y a, pour le moment, sept albums et ce nombre ne devrait pas baisser. C'est trop pour faire tenir toutes les vignettes sur une seule ligne dans la largeur du blog, donc j'ai mis au point un système de défilement trèèèèès astucieux dont j'étais plutôt fiérot. Et puis j'ai réalisé que la largeur du blog pouvait changer, par exemple lorsqu'on met une grande photo en plein écran. Il serait dommage de ne pas profiter de ce confort nouveau pour élargir le bandeau, non ?

Seulement voilà : comment détecte-t-on un changement de dimension ? Je me suis dit que, en fouinant un peu, je dégotterais un événement au nom à coucher dehors, ondimensionchange ou quelque chose dans ce goût-là, pour m'en sortir. Bien sûr il faudrait sûrement tenir compte des minauderies d'IE mais rien de bien insurmontable. Seulement seulement… pas plus d'événement onbloodytrucmuche que de beurre en broche.

Ah.

Alors j'ai fabriqué un petit système de gestion d'événements rien qu'à moi. J'ai parfaitement conscience d'avoir réinventé l'eau chaude dans mon coin (et j'ai d'ailleurs vérifié discrètement, sur des sites plus sérieux que celui-ci, n'avoir pas fait trop scandaleusement fausse route) mais j'adore ça : j'ai l'impression de m'instruire et d'être intelligent, on ne fait pas plus grisant.

Autre exemple, les fameuses petites pastilles de navigation. La difficulté, là, n'était pas de les fabriquer mais de savoir ce que j'y mettais et où.

Explication : vous lisez de gauche à droite, je pense, et moi aussi. Vous vous attendez donc à ce que le début soit du côté gauche et la fin du côté droit, que l'article précédent, le passé, soit à gauche et l'article suivant, le futur, à droite (ceci n'est pas une consigne de vote, attention !). Hé bien moi aussi, et c'est d'ailleurs le principe adopté.

De même vous comptez (sur vos doigts ou non, je ne veux pas le savoir) en partant de 'un' ? Moi aussi. Donc vous vous attendez à ce qu'une séquence de numéros d'ordre (des numéros de page, exemple tout à fait innocent) s'écrive de gauche à droite, du plus petit au plus grand ? Moi aussi, et j'étais d'ailleurs parti dans cette direction sans autre question.

Seulement seulement… ce blog, comme beaucoup d'autres, est rangé en ordre chronologique inverse : l'article le plus récent se trouve en page 1 (l'accueil), l'avant-dernier en page 2… et ainsi de suite jusqu'au premier (dans le temps) article du blog qui se trouve sur la dernière (dans l'ordre des numéros) page du blog. En peu de mots : la page suivante est celle de l'article précédent.

Alors comment on fait ?

J'ai choisi, dans mon insondable sagesse, de me laisser guider par la chronologie :  précédent  et  suivant ,  avant  et  après  s'entendent ici en un sens temporel. Simplement, pour éviter de vous faire lire des choses trop choquantes, je n'écris pas  avant  ou  après  avec un numéro de page. Vous en sortirez-vous ?

Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
A
Eh bien c'est parfait maintenant ! C'était exactement le sens de ma remarque.<br /> <br /> Sinon je vois que tu allé très loin dans la spécification des détails, c'est impressionnant. Et le mieux (je me répète) c'est que ce n'est pas spectaculaire ou intrusif (je n'avais pas remarqué que<br /> les pastilles restaient en permanence accessibles, mais c'est très pratique). Encore bravo.
Répondre
W
<br /> <br /> Content d'avoir compris :-)<br /> <br /> <br /> Spécifier les détails : ben... bien obligé, si je veux que l'utilisateur trouve une interface homogène dans des pages dont la structure ne l'est pas toujours (homogène) - et juge ça tout naturel.<br /> Le code source est un vrai buisson de branchements ! Mais je suis trop flemmard pour ne pas préférer le travail bien fait... (d'ailleurs je suis en train de corriger deux petits trucs vilains,<br /> découverts en jouant moi aussi avec les fléflèches.<br /> <br /> <br /> Si tu veux te faire peur, voilà le source de la<br /> version en cours de développement<br /> <br /> <br />  <br /> <br /> <br /> <br />
A
J'aime bien les pastilles, discrètes, propres et très pratiques. SI je comprends bien, on peut naviguer sur l'article précédent, l'article suivant, le premier article de la catégorie courante ou de<br /> tout le blog. C'est synthétique et intuitif, bravo !<br /> <br /> Juste un truc, un tout petit détail de finition : les signets sur le côté des pastilles s'affichent lorsque le pointeur de la souris survole le rectangle englobant la pastille, alors que la<br /> pastille change de couleur lorsque le pointeur survole le demi-cercle (sur Chrome et Firefox).
Répondre
W
<br /> <br /> Ahhh, ils ne dorment pas tous ! :-) Merci pour ce retour agréable et précis.<br /> <br /> <br /> Agréable : à te lire, leur fonctionnement se comprend sans explication supplémentaire (car tu as bien compris ce qu'on en peut tirer). "Synthétique et intuitif" est exactement ce que je voulais<br /> obtenir, donc je suis content.<br /> <br /> <br /> Précis : j'ai lu deux fois le 'détail de finition' avant de comprendre l'évidence. Si j'ai bien capté, ce qui te chiffonne est qu'il se produise quelque chose alors que le pointeur se trouve<br /> encore dans une zone qui devrait être inerte ? J'espère avoir bien capté, parce que c'est ce que je viens de corriger :-)<br /> <br /> <br /> Re-pastilles : on ne les trouve pas que dans les articles mais dans tout le blog : archives, liste complète des articles... partout où il y a du précédent et du suivant. C'est ce qui m'a plongé<br /> un temps dans le gouffre de perplexité évoqué dans l'article.<br /> <br /> <br /> Re-re-pastilles : dans les articles dotés de mots clés, le menu sous la pastille permet de naviguer aussi le long de ces mots clés et pas seulement dans la catégorie courante.<br /> <br /> <br /> Re-re-re-pastilles : en plus, elles glissent le long des marges quand on scrolle, ce qui permet de naviguer à tout moment de la lecture et pas seulement au début ou à la fin de l'article.<br /> <br /> <br /> Ben oui, j'ai cherché à épuiser la question...<br /> <br /> <br /> <br />