Overblog
Editer l'article Suivre ce blog 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 ?

commentaires

M
<br /> 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.<br /> Ahem.<br /> En gros, comme Ardalia, quoi :-)<br /> <br /> <br />
Répondre
W
<br /> Ahem.<br /> Tu tombes bien, j'ai enfin trouvé quelque chose à dire... :-)<br /> <br /> <br />
B
<br /> 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<br /> trouvais que ton blog chargeait maintenant plus rapidement<br /> <br /> 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<br /> peu le truc...<br /> <br /> Quoi qu'il en soit je suis admiratif de cette nouvelle trouvaille ;)<br /> <br /> <br />
Répondre
W
<br /> Pas de NL ? Aucune idée de la cause, cet article n'a pas subi de cuisine particulière.<br /> 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<br /> 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.<br /> 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<br /> de chargement)<br /> 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<br /> réponses)<br /> 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<br /> autres' semble logique mais, justement, je me dis que 'ce n'est pas comme les autres'.<br /> 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<br /> (j'espère), il me faut du temps pour avoir les idées claires. Leur réalisation, ensuite, est bien plus rapide !<br /> <br /> <br />
L
<br /> Wahouuu<br /> ....Un article où il faut réfléchir dès le matin... tu es un tyran avec moi.<br /> Je lis que tu es : Grand Fort et très intelligent... Sommes nous jumeaux (hihihihi)<br /> <br /> <br />
Répondre
W
<br /> 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.)<br /> 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.<br /> <br /> <br />
C
<br /> 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...<br /> <br /> <br />
Répondre
W
<br /> 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.<br /> 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...<br /> <br /> <br />
C
<br /> ...et là ça marche (avec la barre), allez comprendre...<br /> ou alors vous avez trouvé la solution cette nuit ?<br /> bonne journée<br /> <br /> <br />
Répondre
W
<br /> 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...<br /> 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<br /> 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',<br /> on a peut-être gagné un cheveu de régularité de déplacement - mais pas plus d'un cheveu, hélas.<br /> <br /> <br />
C
<br /> bonne idée, finalement c'était simple à vérifier - et vous avez raison ça rame pareil... :(<br /> (chez moi la chimère est bizarrement placée, à moitié cachée sous la page)<br /> <br /> <br />
Répondre
C
<br /> ...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<br /> 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<br /> 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. :(<br /> <br /> <br />
Répondre
W
<br /> Rien ne remplace une expérience, je viens donc de changer deux choses :<br /> 1-la barre est désactivée<br /> 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.<br /> Quand elle apparaît, ça saute et ça découpe.<br /> <br /> Pour info, mon PC est un Celeron 433MHz acheté autour de 2000, comme foudre de guerre on fait beaucoup mieux.<br /> <br /> 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<br /> s'installer (et ça j'aime pas, et n'ai jamais aimé) autant elle ne consomme plus rien une fois installée.<br /> 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<br /> navigateur, possible qu'il se dépatouille honorablement d'un seul et très mal de plusieurs.<br /> 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<br /> 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 :)<br /> <br /> <br />
A
<br /> Je fais la grève des commentaires, jusqu'à ce que les billets s'adressent à nouveau au commun des mortels. Non mais alors.<br /> ;)<br /> <br /> <br />
Répondre
W
<br /> Faire la grève des commentaires en laissant un commentaire... grève à la japonaise ? ;)<br /> Je suis certain que tu porterais kimono, obi, et chignon architecturé avec infiniment d'allure...<br /> (où donc ai-je fourré cette collection d'estampes, mais où ? ??)<br /> <br /> <br />
A
<br /> 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<br /> débordent !), la tonalité générale réussit un beau mélange de classicisme cosy et de modernité classieuse.... Chapeau !<br /> <br /> Bon maintenant il ne te reste plus qu'à tout changer !<br /> <br /> <br />
Répondre
W
<br /> Avoir atteint le bout d'une route : c'est aussi mon impression !<br /> Tant mieux si la colonne est efficace dans sa compacité, c'est ce que je cherche depuis le début.<br /> 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é :-)<br /> <br /> 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<br /> 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.<br /> 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<br /> 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 !<br /> <br /> <br />
C
<br /> 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<br /> 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ôôôô...<br /> <br /> 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<br /> 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<br /> d'arranger cela, parce que au lieu d'augmenter le trafic ça découragerait plutôt !<br /> Bonne nuit<br /> <br /> <br />
Répondre
W
<br /> é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<br /> 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<br /> 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<br /> contient se comportent, eux, comme des vrais.<br /> <br /> gif et barre : les deux sont indépendants.<br /> 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<br /> 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,<br /> une fois qu'elle a fini de se former elle ne gêne plus le fonctionnement du blog.<br /> "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<br /> 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...<br /> 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,<br /> 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,<br /> C'est sans fin............<br /> <br /> <br />

Archives