Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
23 février 2010 2 23 /02 /février /2010 00:01

Vous avez vu l'enchaînement habile avec le titre de l'épisode précédent ? Hum… Être réduit à ça montre qu'on n'a pas grand-chose à dire.

Depuis cet épisode précédent : beaucoup trop de technique à mon goût – et je crains que ça ne s'arrange guère. Je suis un peu en pilotage automatique en ce moment, intelligence abstraite tournant toute seule sans contrôle et sensibilité quelque peu engourdie. M'enfin il y a encore de la ressource, et dans le proche avenir quelques photos que j'espère agréables.

En attendant, causons abstraction concrétisée.


Dans la rubrique  ne prenons pas la grosse tête  j'ai enfin remarqué une bourde grossière dans la gestion des fonds animés. Vous avez cinq minutes ?

Au début de cette histoire je ne me sentais pas encore assez costaud en JS pour ajouter des éléments partout. Je m'étais donc contenté de faire de ces fichiers animés l'image de fond de l'élément body du blog, les livres constituant l'image de fond de l'élément html : le gif animé était posé par-dessus les livres. Et puis le design s'est enrichi à certains endroits, autrefois transparents, de versions plus sombres de la bibliothèque. Je me suis alors lancé dans diverses complications de CSS pour que le gif animé serve aussi de fond à d'autres éléments contenus dans ces éléments à fond sombre, histoire de répéter la superposition du gif animé et du fond (sombre) de livres. Vous suivez toujours ? Si bien que ce gif animé s'est retrouvé servir d'image de fond à deux, trois ou quatre éléments. Comme ces deux à quatre animations se superposaient au pixel près, la composition d'ensemble restait correcte. Mais comme il fallait faire bouger entre deux et quatre exemplaires au lieu d'un seul, le navigateur se traînait. Et je me demandais bien pourquoi…

Aujourd'hui que je suis grand et fort et très intelligent, j'ai repris la question à la base. Plus d'image de fond mais un div et un seul, glissé avec précision et du JavaScript au bon endroit de la pile de feuillets décoratifs. Le désormais unique exemplaire de l'animation tourne avec plus de rapidité et de fluidité. C'est particulièrement net pour la séquence où une chimère crache le feu sur un malheureux panneau routier : un certain petit trépignement méchant est enfin rendu comme je le voulais depuis le début. À mon âge, on a des joies simples.


Dans la rubrique  prenons la grosse tête  je crois avoir porté la colonne de modules à son maximum de compacité : le calendrier est désormais dedans, seuls dépassent la recherche (avec petit texte gaguesque, vous aviez vu ?) et le lien vers OverBlog.

Autre motif de contentement : il n'y a plus une seule barre de défilement dans ces menus. Les barres de défilement, c'est vilain et ça complique le design, donc bon débarras. Il s'en trouvait une dans la longue liste de liens. Après une tentative pas très convaincante de renvoyer le lecteur à l'article présentant tous les liens en détail, j'ai préféré répartir les liens en quatre listes : moins de clics, c'est toujours bon à prendre.


Bon, alors, ces photos ?

par Wilhelm von Schmürz - dans Journal du savant fou
commenter cet article

commentaires

mebahel 03/03/2010 19:37


J'comprends rien (d'ailleurs j'essaie même pas de lire, mais je salue la performance) mais chuis reviendue pour dire que chuis pas partie, hein, c'est pas aprce que je cause pas,que.
Ahem.
En gros, comme Ardalia, quoi :-)


WvS 03/03/2010 21:58


Ahem.
Tu tombes bien, j'ai enfin trouvé quelque chose à dire... :-)


Boobalechat 26/02/2010 19:33


tiens pas reçu de NL pour cet article...Justement dans mes tentatives désespérées de commenter l'article précèdent, je disais justement que -comparativement a avant l'arrivée de la barre- je
trouvais que ton blog chargeait maintenant plus rapidement

Sinon les photos j'aime bien le principe du "négatif" mais -vais jouer l'esprit chagrin patapé- je trouve que le fait que le négatif ne soit pas de la même largeur que les modules déséquilibre un
peu le truc...

Quoi qu'il en soit je suis admiratif de cette nouvelle trouvaille ;)


WvS 26/02/2010 20:38


Pas de NL ? Aucune idée de la cause, cet article n'a pas subi de cuisine particulière.
Vitesse de chargement : juste avant l'arrivée de la barre j'avais nettoyé pas mal de choses (je commence d'ailleurs à avoir de quoi écrire un 'comment mettre son blog à genoux à coup d'idées
géniales' qui pourrait être drôle !), du coup il devient plus difficile de savoir ce qui revient à la barre et ce qui revient à mon coup de balai.
Il y a tout de même un gain en temps de chargement "perçu", c'est à dire que le blog commence de s'afficher plus vite qu'il ne le faisait avant (les travaux les plus chronophages se passent en fin
de chargement)
Il y a aussi un gain de vitesse de réaction (les modules et les liens des modules réagissent + vite au survol) et un gain de régularité de déplacement (cf supra, les comms de christina et mes
réponses)
Les n'images : c'est juste un module 'images aléatoires' standard OB ! avec un CSS peaufiné, parfaitement possible en confiance. Esthétique : oui il y a une question, là. 'Aussi large que les
autres' semble logique mais, justement, je me dis que 'ce n'est pas comme les autres'.
C'est peut-être le placement dans la suite, bien à l'aplomb, qui crée le trouble ? Ca peut encore changer, le chantier n'est pas clos. Je n'ai pas de formation artistique, juste un peu de goût
(j'espère), il me faut du temps pour avoir les idées claires. Leur réalisation, ensuite, est bien plus rapide !


LeChevalier Dauphinois 26/02/2010 07:37


Wahouuu
....Un article où il faut réfléchir dès le matin... tu es un tyran avec moi.
Je lis que tu es : Grand Fort et très intelligent... Sommes nous jumeaux (hihihihi)


W. v S. pcc. Bren du fat ! 26/02/2010 07:53


oh mais oh mais oh mais.... nul ne t'oblige à le lire dès le matin ! (ni moi à répondre à ces heures indécentes mais, puisque j'ai l'oeil ouvert, faisons honneur au métallifère visiteur.)
Sommes-nous jumeaux ? Possible, possible... Réfléchis bien cependant : c'était ça OU (exclusif) jeune et beau et riche (donc beau, par le fait). Les dieux sont durs en affaires, c'est connu.


christina 25/02/2010 00:06


Ha, ça doit y faire plus qu'un cheveu, parce que là ça marche bien toujours, et le biniou, impec, quel soulagement. Merci ! et sinon merci au hasard...


WvS 25/02/2010 13:05


Et puis je viens de trouver un truc tout simple qui stabilise beaucoup les modules pendant les déplacements : la disparition des barres de défilement a permis de les mettre tous en overflow:hidden.
Cela doit beaucoup simplifier la tâche du navigateur lorsqu'il recompose la page, puisqu'il est sûr que rien ne dépassera des rectangles. Petites causes, grands effets...


christina 24/02/2010 10:46


...et là ça marche (avec la barre), allez comprendre...
ou alors vous avez trouvé la solution cette nuit ?
bonne journée


WvS 24/02/2010 23:56


Non, je n'ai pas cherché, et encore moins trouvé, de solution. Mais ça m'a fait étudier autre chose : figurez-vous que, malgré les apparences, ce blog n'a pas une mais deux colonnes de modules...
L'une contient les modules élastiques, l'autre les deux derniers modules permanents (recherche et lien OB), j'ai besoin de cette séparation pour traiter commodément les modules élastiques. Disposer
ces deux colonnes l'une au-dessus de l'autre demande "un peu" de gymnastique de CSS, qui doit fatiguer le navigateur. J'ai tenté de revenir de 'franchement extravagant' à 'simplement acrobatique',
on a peut-être gagné un cheveu de régularité de déplacement - mais pas plus d'un cheveu, hélas.


christina 24/02/2010 02:39


bonne idée, finalement c'était simple à vérifier - et vous avez raison ça rame pareil... :(
(chez moi la chimère est bizarrement placée, à moitié cachée sous la page)


christina 24/02/2010 00:11


...une fois là elle ne gêne plus le fonctionnement... alors c'est par hasard que depuis ce jour-là rien n'avance plus, certains jours c'est pire que d'autres, mais c'est peut-être mon ordi qui se
fait vieux, faudrait que vous voyiez comment ça fait, ou c'est l'adsl de brousse, mais comme c'est la même galère partout où il y a la barre, je vous jure... et puis comment je ferais pour lire
sans scroller, et puis c'est pas qu'aux niveau des gifs, c'est toute la page qui a du mal, je devrais filmer mon écran et vous l'envoyer tiens. :(


WvS 24/02/2010 02:15


Rien ne remplace une expérience, je viens donc de changer deux choses :
1-la barre est désactivée
2-le fond aléatoire n'est plus aléatoire : c'est systématiquement la chimère. Comme auparavant, elle n'apparaît que 30 secondes après la fin du chargement des modules.
Quand elle apparaît, ça saute et ça découpe.

Pour info, mon PC est un Celeron 433MHz acheté autour de 2000, comme foudre de guerre on fait beaucoup mieux.

Avant de dire que la barre ne gêne plus le fonctionnement, je suis allé voir comment elle s'installait dans le blog, parce que j'aime bien comprendre. Donc je répète : autant elle est vorace pour
s'installer (et ça j'aime pas, et n'ai jamais aimé) autant elle ne consomme plus rien une fois installée.
Ce qui peut avoir un effet (mais je ne vais pas y passer la nuit qui vient), c'est qu'elle est en position:fixed, comme mon fond animé. Possible que gérer un élément fixe soit lourd pour le
navigateur, possible qu'il se dépatouille honorablement d'un seul et très mal de plusieurs.
C'est la première fois que je joue avec un élément fixe, pour ne pas risquer d'esquinter mon blog sous IE, qui ne gère le fixe que depuis IE7. Il doit sûrement exister de bonnes et de mauvaises
manières de s'en servir, des précautions à respecter, j'ai pu marcher dedans sans le savoir... C'est comme ça qu'on apprend :)


Ardalia 23/02/2010 18:31


Je fais la grève des commentaires, jusqu'à ce que les billets s'adressent à nouveau au commun des mortels. Non mais alors.
;)


WvS 24/02/2010 01:24


Faire la grève des commentaires en laissant un commentaire... grève à la japonaise ? ;)
Je suis certain que tu porterais kimono, obi, et chignon architecturé avec infiniment d'allure...
(où donc ai-je fourré cette collection d'estampes, mais où ? ??)


Axi 23/02/2010 09:10


Dis donc, j'ai l'impression que tu as poussé ce design de blog à son paroxysme : la colonne de module est ultra-efficace tout en restant compacte et élégante (et plus de problèmes de pop-ups qui
débordent !), la tonalité générale réussit un beau mélange de classicisme cosy et de modernité classieuse.... Chapeau !

Bon maintenant il ne te reste plus qu'à tout changer !


WvS 23/02/2010 18:18


Avoir atteint le bout d'une route : c'est aussi mon impression !
Tant mieux si la colonne est efficace dans sa compacité, c'est ce que je cherche depuis le début.
Tu écris pop-ups, il faut peut-être lire bulles ? Il y a eu en effet quelques retouches discrètes pour tout faire rentrer dans la largeur. En tout cas je suis content que tu l'aies remarqué :-)

Tout changer : voilà une idée logique et excellente. Si excellente qu'il serait dommage de la gâcher par une mise en oeuvre prématurée... non ? :-D
Il y a encore des petites choses trop rapidement réalisées à retoucher pour obtenir une meilleure harmonie d'ensemble, le genre de petits détails qu'on ne remarque que lorsqu'ils sont ratés.
Les barres de défilement en étaient un, les motifs de fond dans les modules en étaient un autre (certains trop gros, et le noir et blanc n'était pas très heureux - je préfère le sépia mis en place
depuis... hier soir !, je le trouve mieux assorti au brun-rouge des textes). Encore une ou deux bricoles aussi que je ne nommerai pas : on verra bien si quelqu'un remarque leur correction !


christina 23/02/2010 02:20


Trèèèèèès bien tout ça tout ça, super qu'il n'y ait plus d'ascenseurs, c'était une épine dans mon oeil, je l'avoue. J'avais vu la liste de liens - c'est aussi ce que j'avais fini par faire, mais il
est vrai que ce n'est pas pratique (quand on sait que tout le monde est toujours trop pressé...) là c'est impec ! c'est bôôôô...

Par contre, concernant les gifs, on (je ?) ne profite pas du tout du gain de rapidité, parce que depuis qu'il y a la barre ça rame vraiment à mort et il faut être bien accro à votre blog et très
très patients pour supporter ces à-coups, ça gâche tout, tout saute, se découpe, se dédouble, prend un temps fou pour réagir, c'est un vrai calvaire... j'espère qu'ils vont trouver le moyen
d'arranger cela, parce que au lieu d'augmenter le trafic ça découragerait plutôt !
Bonne nuit


WvS 23/02/2010 18:08


épine dans l'oeil : dans le mien aussi ça faisait mal ! Restait à trouver une idée jolie, maniable, et immédiatement compréhensible (ou, du moins, compatible avec le reste réputé déjà compris). Ca
ne va pas forcément de soi... Quatre modules au lien d'un, ça parait évident mais on bute sur la technique : je dépasse  (et largement) le nombre total de textes libres autorisé. Donc il a
fallu ruser : faire un seul module en contenant plusieurs autres, et ensuite adapter JS et CSS pour que ce gros module ne se comporte pas comme les autres tandis que les pseudo-modules qu'il
contient se comportent, eux, comme des vrais.

gif et barre : les deux sont indépendants.
La barre a le défaut de demander un temps non négligeable pour se mettre en place, temps pendant lequel le blog est figé. Je l'ai signalé à qui de droit. Une observation optimiste : maintenant
qu'elle est optionnelle, on peut espérer qu'il ne faille plus la programmer avec autant de protections contre les manoeuvres des uns et des autres. Moins blindée elle sera plus légère. Cela dit,
une fois qu'elle a fini de se former elle ne gêne plus le fonctionnement du blog.
"tout saute, se découpe, etc." : je l'ai observé aussi et ça m'a contrarié. Ca n'a rien à voir avec cette barre et tout avec mon changement de technique. Vous verrez que la partie qui saute change
selon l'animation affichée : c'est toute la bande verticale contenant l'animation qui a du mal à suivre le mouvement quand on scrolle. Faut que je trouve...
Mais je maintiens que, si on laisse la souris tranquille, certaines animations tournent plus vite qu'avant. Ca dépend de l'endroit où je les affiche. Celles qui se tiennent du côté gauche (l'arbre,
les personnages) ont peu changé (parce qu'il y avait peu de background en double) , en revanche la chimère et les ciels vont plus vite,
C'est sans fin............


Archives