<C²: webløg />

Courriel - email address

Avatar Denis

samedi 27 septembre 2003
par Denis Boudreau

Changements majeurs, suite

Post-mortem. Voilà plus de 36 heures que la nouvelle version structurée de C² est en ligne, et je me félicite de n'avoir eu que de bons commentaires à son endroit par plusieurs d'entre vous. De petits problèmes d'affichage sous Safari 1.0 dans OS X m'ont tenu en haleine environ trente-cinq secondes dans la journée d'hier, soit le temps de modifier la largeur de ma colonne de contenu pour en passer la valeur de 58 à 57 pourcent. Autrement, tout est rentré dans l'ordre. Ah!, comme c'est merveilleux de coder selon les normes... voilà un doux réconfort comparativement aux affreux efforts d'ajustements qu'auraient demandé un support inconditionnel de Netscape 4, il y a pas si longtemps de cela. Un site, des dizaines de navigateurs... finie, oui, bien finie l'époque de la balkanisation du Web !

Je vous promettais dans le dernier billet de vous expliquer où je souhaite aller avec cette nouvelle forme de CYBERcodeur. Ma principale motivation avec ce site, c'est d'optimiser et de repousser les limites de l'expérience et du confort de l'utilisateur (c'est-à-dire, vous mes chers amis). J'aimerais que vous puissiez modifer l'interface selon vos besoins, que vous puissiez la configurer selon vos goûts et que vous puissiez la paramétrer selon votre contexte de lecteur. De belles intentions, mais comment les mettre en place sur une interface Web ? Simplement, avec un peu de structure XHTML, beaucoup de CSS et une pincée de PHP. Je vous explique.

Tout d'abord, j'avais une sérieuse réflexion à conduire quant à la direction que je prévoyais donner à mon code XHTML. Autrement dit, le restructurer de manière à lui rendre la flexibilité que je lui avait involontairement dérobé aux premières heures de C², alors que, même en le construisant tableless, j'avais structuré mon code dans l'esprit de la conception HTML par tableaux... en imbriquant les divers blocs au maximum, si bien que ceux-ci étaient en quelque sorte, soudés ensemble quand même, ce qui entrainait des frustrations constantes dans mes remaniements de CSS. Modifications importantes donc, réorganisation des fichiers d'inclusion et nouveau regard sur la sémantique se devaient d'être mis à l'honneur. Il y a évidemment encore beaucoup à faire au niveau sémantique, mais les éléments sont maintenant en place pour permettre de construire cette redéfinition de l'expérience utilisateur tant souhaitée.

Certains d'entre vous ont manifesté un certain inconfort quant à la largeur restreinte de la zone de contenu sur cette nouvelle version. Si j'aime personnellement beaucoup, je peux comprendre que d'autres préfèrent exploiter la pleine largeur de leur écran. Soit. Pourquoi ne pas permettre les deux alors ? Pourquoi pas ? C'est maintenant possible de mettre ça en place ! Vous avez peut-être remarqué les trois icônes grisées à gauche de cette colonne. À terme, il vous sera possible de cliquer sur le premier icône afin de faire sauter la colonne de droite et permettre à la colonne de contenu de s'étendre pleinement, afin de maximiser l'espace de lecture. Au besoin, il sera possible de ramener cette colonne disparue en recliquant sur l'icône qui représentera alors un schéma sur deux colonnes, pour bénéficier des raccourcis qui y figurent. Ce principe de basculement ou de permutation, bien connu des logiciels, devrait faire en sorte de satisfaire tout le monde, avec un peu de PHP. Un à zéro pour les principes d'utilisabilité et d'ergonomie. Continuons.

Le confort de l'utilisateur ne se limite pas qu'à une question de largeur de colonnes. Si dans sa version actuelle, le site est tout à fait "zoomable" avec un navigateur digne de ce nom™, il ne permet pas pour autant de changer ou de personnaliser les polices de caractères et/ou la dimension de celles-ci. C'est donc à ce moment que les deux autres icônes entreront en jeu. Avec un clic, il sera possible de basculer d'un style sans-serif à un style serif et vice-versa. Rien d'innovateur, mais puisque la valeur de la police par défaut sera inscrite par PHP et non plus directement dans mon fichier CSS, je n'aurai plus besoin d'avoir recours à deux versions de la même feuille de style comme auparavant pour permettre ce type d'ajustement. Une feuille, quelques paramètres, et le tour sera joué. La même chose sera possible pour la taille du texte, afin de vous laisser choisir la configuration qui vous convient. Que du bonheur. Et deux à zéro pour l'utilisabilité et l'ergonomie de l'interface.

Et le styleSwitcher, qu'en advient-il ? Je sais, vous aimiez les feuilles de style alternatives et pour le moment, vous ne remarquez pas de styleSwitcher en vue. Plusieurs d'entre vous m'ont écrit pour m'en faire part dans les dernières heures. Rassurez-vous, ce n'est qu'une question de temps avant qu'il ne revienne, mais dans une version capable de supporter tous les ajouts que la nouvelle version met dorénavant de l'avant. Je suis toujours en faveur des feuilles de style alternatives, mais dans la mesure où celles-ci servent réellement l'utilisateur ou qu'elles exploitent réellement la puissance des CSS en modifiant radicalement la mise en page du site. Nous nous sommes bien amusés avec ces CSS alternatives qui changeaient simplement la couleur du design, mais personnellement, je me suis lassé très vite de cette mode.

Le véritable intérêt, c'est de servir les besoins différents des utilisateurs, pas leurs excentricités. Ça aussi, c'est en route, et dès que ce sera prêt, vous pourrez en bénéficier ici-même. Je compte reproduire des équivalences des feuilles de style qui existaient à l'époque (soit la tristanesque et la zeldmanique), mais optimisées, grâce aux améliorations que ma structure permettent maintenant. Pour le reste, je ne sais trop. Je n'ai pas l'intention de créer 10 versions de mises en page pour CYBERcodeur. Par contre, je serais intéressé à accepter vos designs si vous avez le goût de m'en soumettre et que ceux-ci me plaisent bien entendu. Un CSS CYBERcodeur Garden ? Pourquoi pas ? :)

Alors, en quelques mots, qu'y gagnerez-vous au final ? Un vrai panneau de configuration, entièrement paramétrable selon vos goûts et besoins ! Un site, plusieurs possibilités. Et trois à zéro pour tout le monde.

Denis Boudreau | 2003.09.27 @ 11:01

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.09.27 @ 14:06 par RiderCrazy

Comme dit dans un des précédents commentaires sur la nouvelle interface, il y'a un problème sur mozilla firebird... la feuille de style n'est pas prise en compte. Résultat, c'est du texte brut (balises h1, h2... et div en plus quoi). Sinon, félicitation pour la nouvelle interface, j'aime beacoup (vu sous IE).
Bonne continuation

Haut retour au début de la page

2003.09.27 @ 14:39 par CYBERcodeur

Hum, je crois vraiment que c'est ta cache qui te joue un vilain tour mon cher RiderCrazy :)

C'est testé avec une dizaine de FireBird différents depuis avant-hier sur autant de postes et tout est comme prévu. Je te suggère de la purger complètement dans les options du navigateur.

tools > options > privacy

C'est que ta mémoire cache lit encore la vieille version de ma CSS plutôt que d'aller chercher la nouvelle sur mon serveur. J'ai eu le même travail à faire sur mon PC au bureau l'autre jour. Un solide et viril coup de refresh et cela n'y paraitra plus. :)

Haut retour au début de la page

2003.09.27 @ 15:02 par RiderCrazy

Bien vu...
En fait, je pensais l'avoir fais mais je m'étais planté de bouton, j'avais effacé l'historique et non la cache... 'honte à moi'
Désolé pour le dérangement.
Bon boulot tout de même, ça le fait !

Haut retour au début de la page

2003.09.27 @ 15:51 par Anubis

Denis, d'où l'intéret de mettre des noms plus explicites que « default » pour les styles d'un site :-).

Ainsi, on ne conserve pas le même nom de fichier CSS d'une version à l'autre.

PS: Et sinon encore bravo, surtout pour ton travail sur la police sans-sérif, à l'heure où beaucoup travaille le sérif suite à l'article de Dave Shea, j'aime beaucoup les titres en grosse police minuscule ;-).

Haut retour au début de la page

2003.09.27 @ 18:13 par pastra

Je n'en pense que du bien, du bien, et du bien.
C'est beau, c'est clair, c'est super.
Ca lave plus blanc que blanc, c'est trop top cool.
C'est doux et soyeux.
Et les idées à implémenter sont excellentes.
Allez, stop la lèche. Je n'ai remarqué qu'un défaut : pourquoi ne pas aller directement aux commentaires de la news quand on va sur les commentaires ?
Pas dur pourtant, un petit 'id', parce que le scroll c'est sympa, mais tout de même...
OK, je crache dans la soupe...
Mais c'est vrai que la colonne de contenu est vraiment trop petite, comme pour chaque version de CYBERcodeur, à mon goût.
A moins que ce soit le menu qui soit trop gros !
Bravo, donc !

Haut retour au début de la page

2003.09.27 @ 20:11 par CYBERcodeur

C'est vrai, j'aurais pu y penser... Simplement changer le nom du fichier CSS aurait forcé le navigateur à retourner chercher la nouvelle CSS. Je me donne un grand coup de pied aux fesses et promet qu'on ne m'y reprendra plus.

Pour l'inspiration de la fonte century gothic, ça m'est venu en visitant un site dont j'oublie le nom. Ça donne un effet de fausse nouveauté qui fait bien plaisir. Je doute énormment que la times new roman revienne en force, mais il est clair que même si verdsana est une superbe fonte écran, il est te,ps de passer à autre chose... Un petit coup de trebuchet pourrait très bien faire l'affaire.

Pour ce qui est de coller un id aux commentaires, c'est quelque chose qu'on m'avait déjà mentionné et que j'oublie constamment. Je vais me pencher la-dessus dès que j'ai une minute, c'est vrai que ça serait une belle valeur ajoutée... à moins que je ne l'oublie encore... ;)

Haut retour au début de la page

2003.09.28 @ 00:33 par Bobe

Félicitations pour cette nouvelle version, le design est très réussi :)
Je regrette par contre que les tailles de police restent dans le même ordre de grandeur :/ Je continue donc à augmenter d'un cran la taille des polices à mon passage sur ton site bien que je n'aie pas de problème de vue (enfin si, myopie, donc ça n'entre pas en jeu ici)

Pour le menu cachable, c'est une excellente idée! (que j'ai d'ailleurs mise en pratique sur mon propre site). Pour ma part, j'ai mis cette possibilité en place, tout en utilisant au maximum les possibilités de la balise <link>. Ainsi, le menu peut rester caché en permanence :) (pour peu qu'on accepte le cookie permettant la persistance de la feuille de style).

p.s: Un petit label[for]:hover { cursor: pointer; } serait un plus, insignifiant certes, mais un plus tout de même :)

Haut retour au début de la page

2003.09.28 @ 00:42 par CYBERcodeur

Pour le label, suffisait de demander mon cher. C'est intégré ! :)

Haut retour au début de la page

2003.09.29 @ 01:57 par stef

<cite>Un site, des dizaines de navigateurs... finie, oui, bien finie l'époque de la balkanisation du Web !</cite>

Denis, tu ne trouves pas que tu évangélises au point de faire croire que le web est un paradis ? ;-)

Chaque montage en CSS me force toujours à 'tweaker' ma CSS, comme tu l'as fait, pour que le rendu ne pose pas de problèmes sous IE, sous Opera, etc. Les bidouilles sont passées des tables aux CSS, mais elles sont toujours là et toujours nécessaires, semble-t-il.

En clair, on est encore balkanisés, et il est sans doute illusoire de penser qu'on ne le sera plus un jour.

Haut retour au début de la page

2003.09.29 @ 05:46 par Patrick

Toujours aussi agréable de voir la communication entre l'auteur de ce site et ses visiteurs, un vrai petit dialogue s'installe au fur et à mesure des nouvelles versions (et par mail aussi).

Sous IE 5.5 tout va bien comme je te l'ai dit, je n'ai pas trop eu le temps de fouiller les details :) Je te ferai un retour par mail dès que j'ai plus de temps.

Pour les features request j'attends avec impatience la possibilité d'avoir une largeur non fixe et d'aller directement sur les commentaires via une tite ancre.

Merci Fabien et Denis pour site de plus en plus agreable et interessant à visiter :)

PS : j'aime bien le blogroll

Haut retour au début de la page

2003.09.30 @ 10:01 par CYBERcodeur

Parfois, l'émotion m'emporte... oui, peut-être que je vis dans ce monde utopique ou la balkanisation du Web n'est plus qu'un mauvais souvenir... Je dois n'avoir que de bons clients (ou du moins, des clients qui ont comprit qu'il était temps de foncer vers l'avant).

Le Web, un paradis ? Comment oserais-tu en douter ? ;)

Comme tout le monde, je 'tweake' aussi ma CSS pour lui faire faire ce que je veux, mais je crois que c'est bien différent de ce qu'un 'tweaking' en règle pouvait vouloir dire à la glorieuse époque de NS4 et de MSIE 5... Je n'ai jamais vraiment l'impression de pervertir mes CSS pour les faire adopter par MSIE par exemple... Ce dont je suis conscient, c'est que je dois aborder les problématiques dans une certaine vue afin de m'assurer du rendu chez le plus nul des navigateurs modernes au point de vue du support des normes (et le plus important au niveau de la masse critique d'utilisateurs), soit msie 6.

Si msie 6 sp1 est devenu mon nouveau boulet à la cheville, je me sens quand même loin des préoccupations qui me hantaient au tournant du siècle. Au moins, je peux presque pleinement embrasser les standards et être confiant d'offrir un produit robuste et portable, ce qui était impossible avant. Le Web n'est peut-être pas le paradis que l'on se souhaite, mais il n'a jamais été aussi prêt de le devenir. Si je pensais comme toi qu'il ne pourrait pas un jour se sort de ce trou, je ne suis pas sûr que j'aurais la force de continuer. ;)

C'est vrai que CYBERcodeur commence à prendre une tournure communautaire / groupe d'intérêt / communauté active qui me plait beaucoup. Je trouve très enrichissant de pouvoir discuter avec vous tous soit par les commentaires, soit par mail, soit de vive-voix.

Les requêtes que vous nous faites pour l'amélioration du site sont toutes prises en compte et bien que parfois elles tardent à apparaitre, soyez certains qu'elles sont quand même mises sur une liste de production. C'est un travail à long terme, constamment en évolution qui ne cherche rien de moins que la perfection -- autrement dit, c'est pas demain la veille que les améliorations cesseront sur C2 !

Continuez donc à nous faire part de vos commentaires et de vos impressions, elles sont inestimables pour améliorer l'expérience que vous retirez sur ce site -- sans compter la motivation qui m'habite de savoir que notre travail vous tient à coeur.

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)