Dates : 2004

Notes (48)

CSS 3 et liens externes

La présentation du site est actuellement gérée par des feuilles de styles en cascade de niveau 3. Cette troisième version des CSS en est encore au stade d'ébauche et à l'heure actuelle, seule les recommendations css 2 ont fait l'objet d'une publication officielle (une version révisée 2.1 devrait être diffusée dans peu de temps).

Evolution de la maquette

Avec la création automatique des pages web du site grâce à cet « AutoIt-CMS », j'ai pu ajouter quelques petites fonctionnalités comme une navigation par "mois suivant" et "mois précédent" dans les pages de brèves archivées mensuellement ou l'affichage de l'identifiant de chaque sous-titre d'article lorsque le l'on passe la souris dessus. J'en ai aussi profité pour corriger quelques bugs de maquette.

Une mise à jour qui a du retard

La reconstruction du site va encore prendre quelques jours. D'abord pensée pour automatiser la publication d'articles, le petit script que je suis en train d'écrire va en fait gérer l'intégralité du contenu (exit donc Thingamablog). D'où le retard.

Menus de navigation : sémantique, structure, implémentation ?

Parmi les thèmes en vogue, la structure à donner à un menu de navigation fait régulièrement couler beaucoup d'encre, et donne lieu à des solutions aussi diverses qu'inventives : listes ordonnées, listes de définition, paragraphes… Tout ou presque est mis à contribution dans la recherche d'une structure que l'on voudrait à la fois valide, sémantique, accessible, belle et ergonomique.

Laurent Denis, « Menus de navigation (1) : sémantique, structure, implémentation ? », Blog & Blues, 06 novembre 2004.

Simplification du code pour les lettrines

A la suite de mes précédentes simplification du code, d'autres modifications me sont apparues judicieuses. Jusque là, j'utilisais une classe spéciale, debut, pour transformer en lettrine la première lettre du premier paragraphe après chaque titre. Il me suffisait de définir les propriétés de cette classe à travers le pseudo-élément first-letter, qui permet d'appliquer des styles à la première lettre d'un paragraphe :

Hellblazer, entre paradis et enfer

Chaque jour semble apporter son lot de nouvelles dans le domaine des adaptations cinématographiques de comic books. Et à chaque fois, on ne sait s'il faut s'en réjouir ou se désespérer. Après l'annonce plutôt rassurante de la production du film Death, en voici une autre qui amène des réactions plus mitigées : celle de Constantine (Hellblazer).

Des identifiants en moins

Poursuite du nettoyage du code des pages du site, avec la suppression d'identifiants inutiles. Si le gain en taille est anecdotique, cela simplifie tout de même la lecture des sources.

Des logos spécifiques à chaque style

J'ai par ailleurs souhaité pousser un peu plus loin la personnalisation des pages en fonction des styles. Outre le changement de couleurs, on peut facilement adapter les puces des listes ou tout autre icône en utilisant la propriété « image de fond » (background-image). Par contre personnaliser le logo était une autre affaire puisqu'il s'agit d'une image intégrée au code HTML.

La gestion des styles

Je parlerai de la gestion des styles en fonction des navigateurs dans une autre actu. Ici, c'est de relations entre les différentes feuilles dont il s'agit. Résumé de la situation: le site utilise des fichiers CSS pour la mise en forme des pages, un fichier pour le squelette (en-tête, contenu central, pied-de-page) et cinq autres fichiers spécifiques aux cinq styles (printemps, été, automne, hiver et nuit, qui modifient presque essentiellement les couleurs).

Des menus déroulants

J'ai transformé le menu vertical gauche en un menu horizontal déroulant pure CSS. Il fait appel à la fonction hover qui permet d'assigner certaines propriétés lorsqu'on passe la souris au-dessus d'une boîte spécifique. Dans le cas présent, elle est appliquée aux listes de définition utilisées dans le menu: seul le titre (balise dt) est affiché, les sous-titres (balises dd) étant masqués par un display: none. Ensuite, le fait de survoler les dits-titres avec la souris déroulera le sous-menu dans son intégralité grâce à un display: block.

Des corrections nécessaires

Commençons donc par le commencement: le petit lifting subie par le site. En dehors de l'envie de changer, une nouvelle maquette s'avérait nécessaire pour plusieurs raisons.

Changement de maquette

Moi qui disait vouloir accorder plus d'importance au fond qu'à la forme, on dirait que je passe plus de temps à modifier le contenant qu'à mettre à jour le contenu de ce site! Ce n'est qu'en partie vrai car quelques pages sont en préparation, notamment une échelle du temps géologique entièrement construite en CSS, sans tableaux (j'expliquerai le moment venu pourquoi), ainsi qu'un petit tutoriel Gimp pour créer une image de la planète Mars.

Des styles en fonction du navigateur

Voila quelque chose qui m'agaçait depuis quelque temps : les limitations d'Internet Explorer dans sa gestion des CSS rendaient l'affichage des pages du site quelque peu aléatoire. La solution était donc évidente : construire une feuille de style spécifique à IE qui serait utilisée uniquement pour ce navigateur. J'ai donc ajouté un petit script javascript sur chaque page pour identifier le navigateur qui se connecte et charger la feuille de style adéquate.

Mac versus PC post-mortem selon Neil Gaiman

L'écrivain et scénariste Neil Gaiman a posté aujourd'hui sur son blog une bien curieuse métaphore informatique. Il explique d'abord pourquoi il continue à utiliser Wordperfect plutôt qu'un autre traitement de texte pour écrire, puis il s'engage à petits pas dans l'éternel dilemne "Mac ou PC", sans trancher pour l'un ou l'autre, et termine sur ces mots:

Nvu 0.1 et Firefox 0.8

Daniel Glazman est grand, Daniel Glazman est géant!! Non seulement il anime quotidiennement un blog perso remarquable, le glazblog, que je vous invite à découvrir même si vous n'avez rien à faire des logiciels Libres en général et de Mozilla en particulier, mais en plus (et surtout) c'est un informaticien de talent, "coupable" en premier lieu du Composer de la suite Mozilla, et depuis quelque jours de la version indépendante et améliorée de cet éditeur de pages web, j'ai nommé Nvu 0.1.

Page de ressources Mozilla

Quelques légers changement dans la structure des fichiers css (pas encore totalement terminés), notamment pour la police par défaut: l'Arial me convient bien. Elle réduit légèrement la taille du texte mais j'aurai pu l'augmenter sans problème - et il y en a encore qui se demande pourquoi c'est si intéressant de développer un site en suivant les standards du W3C - c'est-à-dire en séparant le contenu du contenant grâce aux CSS.

Problèmes de mises à jour

Encore des changements dans la présentation du site. Et jusqu'à ce que je trouve un système simple et rapide de mises à jour et d'organisation en HTML pur, sans système de base de données, ces modifications seront sans doute courantes.

Contre la loi sur l'économie numérique

La « loi pour la confiance dans l'économie numérique » ou LEN vient d'être approuvée par nos chers députés, qui n'en manquent pas une ces derniers temps, décidément. Elle sera maintenant examiné le mois prochain par le Sénat. Si celui-ci ratifie la loi (ce dont je ne doute pas, vue sa composition!), nous serons dans de beaux draps; et comme le dit l'un des slogans préparés par l'association Odébi, « il ne vous restera plus que les yeux pour pleurer » !

Extinctions climatiques

Bon, ça fait déjà quelques années que les scientifiques tirent la sonnette d'alarme, sans que leur prise de conscience soit pourtant suivie de décisions politiques. Le récent article publié dans le numéro 6970 de la revue Nature (vol.427, 08 janvier 2004) ne changera certainement - et malheureusement - rien à l'affaire, mais ne baissons pas les bras.

L'année 2004 commence plutôt bien !

Le début d'année 2004 a été marqué par trois évènements scientifiques d'envergure. Cela a commencé en fin d'année dernière, avec l'arrivée aux abords de Mars de la sonde européenne Mars Express. Sa mission était de deux ordres: se placer en orbite autour de la planète rouge afin de cartographier la surface et le sous-sol pour en connaître l'histoire géologique ; mais surtout de larguer un petit robot, Beagle 2 le bien nommé, afin de trouver des traces de carbone dans le sous-sol de Mars.

Ca m'agace !!!

Un petit mot concernant le bouton Retour en haut de la page : ce bouton se trouve en bas à droite des pages, avec un attribut position: fixed. Cette propriété CSS permet de garder un objet en position fixe dans la fenêtre de navigation: le bouton reste toujours à sa place lorsque vous descendez dans la page. De plus, le morceau de code HTML décrivant le bouton se trouvant en toute fin de code, il faut lui définir une propriété z-index pour qu'il soit visible. Cette propriété permet de spécifier le niveau d'empilement des différentes structures; en lui attribuant la valeur z-index: 1, le bouton se placera par dessus tout le reste.

Articles (14)

Des styles en fonction du navigateur

L'utilisation des feuilles de styles en cascade pour mettre en page son site web n'est pas toujours évident, non que cette technique soit compliquée mais parce que, malgré l'existence de normes communes, chaque navigateur n'en fait un peu qu'à sa tête. Heureusement, des solutions existent. Cependant, leur utilisation ne risque-t-elle pas d'entretenir le statu quo ?!

Le show astro-médiatique

Quand la science fait la une des média de masse, elle doit se plier aux règles en vigueur en matière d'audimat et de « plan marketing ». Le diffuseur n'est cependant pas toujours l'initiateur de la lente dérive sensationnaliste qui touche l'information scientifique...

The children's crusade

Il faut toujours se méfier des choses que l'on désire plus que tout, durant des mois et des mois, avec curiosité et impatience, au point d'en perdre tout sens critique pour se jeter sur l'objet de sa convoitise, risquant par là même une cruelle désillusion.

Idéologie de bazar

Le développement des logiciels libres ressemble à un immense bazar a dit quelqu'un. Mais si le bazar est dans l'organisation, il est aussi quelque fois dans les têtes. Ou quand le monde du libre ne se réduit pas à Mozilla ou à Gimp et que l'idéologie qui le sous-tend à de biens curieuses affiliations.

Projets (2)

Biblio (1)