À l'heure où j'écris ces mots, la grande mise à jour de mon carnet web, filyb.info, est presque finie. Ce blog de test, mis en place il y a un peu plus d'un an pour tester DotClear 2, n'a donc plus lieu d'être. Il a été relégué dans un recoin, dctest.filyb.info, ses commentaires et ses rétroliens sont fermés, bref : il est mort.

Mais il ne sera pas mort en vain : c'est grâce à lui que cette mise à jour a été accomplie, et je lui en serait encore longtemps reconnaissant. Et parce qu'il serait triste de partir sans un ultime adieux, j'ai décidé de mettre à disposition les brouillons les plus accomplis de ce qui devait devenir le futur thème de mon carnet web. Attention : ce ne sont que des brouillons, je n'assure aucun support dessus, et il y a probablement du travail à faire dessus pour pouvoir les utiliser en production. Vous trouverez les archives en annexe, voici vaguement à quoi ressemblent ces thèmes :

Le thème Circle (celui utilisé actuellement ici) :

Le thème filybnews :

On nous parle de navigateurs standards, modernes, et voir, pour les meilleurs, qui passent le test ACID2. Mais cela ne veut pas dire parfait. Voici quelques problèmes que j'ai rencontré au cours du développement de ce site, sur divers navigateurs.

La propriété CSS content

J'utilise cette propriété pour afficher des images ou texte autour de certains liens, pour spécifier un de leurs particularité, comme le fait qu'ils pointent vers une adresse mail, ou qu'ils sont des liens externes. J'ai donc écris ce code :

a[href^="http"]:after {content:"\0000a0"url(img/external.png);}
a[href*="filyb.info"]:after {content:"";}

La première ligne ajoute une image de lien externe après un lien commençant par http (ce qui exclu les liens relatifs). Mais pour que cette image soit placée uniquement sur les liens externes, il faut aussi l'enlever sur les liens commençant par http://filyb.info. J'ai donc mis un contenu vide (content:"") à la place de l'image.

Le problème est que Konqueror 3.5.7 affiche un rectangle style caractère absent de la police dans ce dernier cas. Une solution est de remplacer content:"" par content:none. Ça marche... mais uniquement dans Konqueror. Cette propriété est ignorée par Mozilla Firefox.

La solution : utiliser les deux. Ça donne : {content:""; content:none}. Cela fonctionne parfaitement dans Mozilla Firefox, Konqueror et Opera. Dans Internet Explorer 6 et 7, il n'y a rien d'afficher, le problème ne se pose pas.

Les styles de citations et les citations imbriquées

En français, il existe deux types de guillemets pour les citations imbriquées. Les guillemets de premier niveau (« et ») et de second niveau (“ et ”). Pour que les balises <q> les utilisent, il faut utiliser les styles suivants :

q {quotes : "«\0000a0" "\0000a0»" "“" "”";}
q:before{content : open-quote;}
q:after{content : close-quote;}

Le \0000a0 correspond à une espace insécable en unicode.

Ces styles fonctionnent parfaitement sous Mozilla Firefox.

Opera 9.21 a un léger soucis dans le cas où il y a trois niveaux de citations imbriqués, comme dans les citations que vous venez de lire. Opera style correctement la citation de premier niveau, mais ferme celle de second niveau à la balise d'ouverture de celle de troisième niveau, affiche le caractère double-quote (") à la fermeture de celle de troisième niveau, et ferme correctement celle de second niveau.

Konqueror 3.5.7... échoue lamentablement. Il affiche avant les guillemets ouvrant et fermant de premier niveau le caractère Â, et affiche n'importe quoi pour les guillemets de second niveau. Je n'ai pas trouvé de parade.

Les Internet Explorer... n'affichent rien. Pas de marque de citation. Je ne vais pas chercher plus loin, changez de navigateur.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tincidunt ullamcorper felis. Aenean aliquet arcu cursus quam. Suspendisse blandit faucibus lacus. In sem arcu, aliquet sit amet, consequat ac, bibendum sit amet, orci. Ut eget turpis a magna dignissim congue. Pellentesque ac eros ut sapien feugiat pretium. Ut pellentesque suscipit nisi. Donec quis augue eget nunc mollis vulputate. Vivamus nibh lorem, sollicitudin id, pharetra sed, consequat ac, turpis. Maecenas libero ligula, euismod a, congue ac, ultrices et, elit. Ut condimentum. Etiam tortor magna, sollicitudin in, vehicula non, dictum ut, lectus. Nunc pharetra. Nunc porta ullamcorper pede. Praesent at dolor. Sed euismod elit quis urna.

Nunc a diam. Duis lectus ligula, bibendum congue, mattis a, pellentesque ut, turpis. Aliquam arcu nisl, tincidunt non, dignissim vitae, scelerisque vitae, erat. Morbi eget turpis. Duis condimentum, eros nec auctor laoreet, dui lorem fermentum nulla, at sodales arcu neque nec justo. Quisque elementum turpis a purus. Praesent dapibus cursus felis. In id elit quis mi imperdiet pretium. Morbi tellus nisl, interdum porta, rutrum sit amet, volutpat quis, elit. Donec feugiat orci eu justo. Praesent turpis.

Vivamus eget magna. Nulla ullamcorper hendrerit purus. Vestibulum tempor condimentum leo. Pellentesque non purus a enim viverra facilisis. Fusce pharetra turpis non enim adipiscing molestie. Praesent in est. Nam orci. Sed nunc. Aenean enim urna, commodo quis, vestibulum quis, hendrerit non, velit. Praesent ac sem. Sed ut pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque faucibus, neque eget aliquam pretium, purus velit vehicula massa, sit amet sagittis turpis odio non odio. Suspendisse potenti.

Vivamus erat. Sed ac leo. Pellentesque adipiscing, est vel luctus scelerisque, orci leo tempus elit, id condimentum leo arcu ut tortor. Nunc iaculis tortor et nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tincidunt mauris vel ligula. Nam semper adipiscing nunc. Donec id turpis. Sed vitae purus sed lacus ullamcorper ultricies. Phasellus ante nulla, ornare nec, elementum ac, vestibulum varius, nisl. Curabitur augue. Ut neque. Phasellus ligula. Donec mattis malesuada massa. Sed tempor. Vestibulum ut pede at libero sollicitudin pretium. Nulla facilisi. Cras lacus. Donec fringilla. Vivamus pellentesque lectus ultrices dolor.

Ut arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla at lorem a sapien sollicitudin mollis. Integer auctor nunc a dui. Fusce at est id augue mattis dignissim. Sed eu urna vel pede gravida nonummy. Ut lobortis. Cras mollis tincidunt orci. In orci. Fusce enim sem, varius posuere, sagittis a, consequat nec, odio. Sed scelerisque. Quisque pretium. Fusce nec nulla ac est mattis molestie. Aenean diam. Quisque nulla tortor, semper nec, tempor et, congue in, purus. Cras ullamcorper auctor velit.

Après quelques mois d'absence (pour cause d'une mise à jour vers DotClear 2 beta 2 foireuse, que j'avais abandonnée), re-voici ma plate forme de test en DotClear 2 beta 3. Le moteur s'est grandi de nouvelles extensions (plugins), c'est toujours aussi beau et confortable.

J'attends toujours certains plugins (galeries, page connexes...) pour faire passer le vieux ici. Et si possible que DotClear 2 soit passé en version stable, même si ça ne me dérangerai pas d'utiliser une RC (ce n'est qu'un site perso, après tout).

Voilà voilà, de tous les thèmes sur lesquels j'avais travaillé cet été pour DotClear 2, aucun ne me plaisent, je vais donc repartir sur une idée toute neuve, on verra ici ce que ça donnera...

Et hop, un nouveau thème fait en vitesse : circle. Il sera peut-être le thème par défaut, peut-être pas.

Avantages : super légé, presque pas d'images et de bidouillages avec des png transparents.

Inconvénients : utilise énormément la future propriété css3 border-radius. Cette propriété n'étant implémentée dans aucun navigateur à l'heure actuelle, j'ai utilise -moz-border-radius (propriété propriétaire de Gecko) et -webkit-border-radius (propriété propriétaire de Safari) dans une feuille de style supplémentaire pour simuler cette propriété dans les navigateurs basés sur Gecko et Safari.

Par contre, Internet Explorer, Opera et Konqueror ne bénéficient pas des coins arrondis. C'est un peu gênant.

Donc je vais peut-être ajouter des bidouillages pour que ceux qui n'ont pas les coins arrondis aient quelque chose en remplacement, pour que ça soit plus beau... Ou peut-être carrément des coins arrondis avec images... faut voir.

Sinon, j'ai un bug gênant avec Konqueror : les caractères spéciaux en UTF-8 ajoutés depuis la feuille de style avec des content: ne passent pas, et ça fait moche. Pas glop.

Juste quelques titres pour tester les feuilles de styles :

Hache un (pô bien)

Hache deux (pô bien)

Hache trois

Hache quatre

Hache cinq

Hache six

('va faire plaisir à un certain prof. d'histoire-géo, tout ça.)

Édition du 14 juillet 2006

Et un test d'adresse mail : toto@auzey.ailles, et un autre de JID : toto@auzey.ailles.

Installation du plugin Theme Switcher pour sélectionner le thème voulu.

Comme le précédent, on va sur la page, on télécharge l'archive, et on l'extrait. Le dossier obtenu doit être placé dans le dossier plugins de votre installation de DotClear 2.

Ensuite, rendez-vous dans l'interface d'administration, section Widgets de présentation. Placez le widget Theme switcher là où vous voulez, et cliquez sur le plus pour le configurer.

Vous pouvez choisir si le sélecteur doit être sous forme de liste ou de formulaire, si le thème courrant doit être affiché, si des vignettes de prévisulations doivent se montrer (voir la page d'installation pour les styles correspondants), et vous pouvez même définir une liste d'exclusion. Bref, que du bon !

Souvenez-vous, le but de ce blog, outre d'être un recueil temporaire de conneries diverses et variées, est de devenir le nouvel ancien blog. Vous me suivez ?

Je vais décrire en détail toute la migration. Ce billet va recenser ce qui est fait et ce qui reste à faire, avec un lien vers les billets détaillés correspondants.

Fait :

• Server & co :
  • Installation de dotclear 2 sous 1&1
• Plugins :
  • Installer un plugin pour afficher les derniers commentaires (piste : lastestComments)
  • Installer un plugin pour changer de thèmes (piste : themeSwitcher)
• Thèmes :
  • Créer le nouveau thème par défaut filyb news (en cours)
• Server & co :
  • Créer le nouveau fichier OpenSearchDescription (plugin de recherche Firefox 2) dans /blog/osd.xml
  • Ajouter le code RDF de la licence creative commons
• Aménagements esthétiques :
  • Réorganiser la sidebar

À faire :

• Thèmes :
  • Porter le thème FilywintuL (thème par défaut de l'ancien blog)
  • Porter le thème Bridge
  • Porter le thème Light
• Plugins :
  • Installer un plugin page connexes
  • Installer un plugin galeries
  • Installer un plugin de statistiques (bbclone ?)
  • Installer un plugin gravatar
• Pages connexes :
  • Porter la page de copyright
  • Porter la page programmation et les pages filles
  • Porter la page écrits et les pages filles
  • Porter/recréer la page d'accueil
• Server & co :
  • Migrer le contenu de l'ancien blog
  • Rediriger les url de l'ancien blog vers le nouveau (piste : redirection avec un .htaccess)
• Aménagements esthétiques :
  • Ajouter le nombre d'annexes sur les pages de type archives_months, category, home, search et tag
  • Ajouter le compteur de billets

Mes amis, visons peu, visons bien.

L'ennemi ? Aujourd'hui, il est double. Nos services de renseignements ont réussi à lire discrètement un billet de Mitternachts qui divulgue les renseignements suivants : deux dangereux terroristes de la désinformation organisée (l'axe du diable) auraient tenté de s'attaquer à deux des plus grands joyaux du Monde Libre (l'axe de nous), j'ai nommé DotClear et OpenOffice.org.

L'heure est grave. J'ai donc décidé à l'unanimité de m'engager dans ce combat à l'issue certes incertaine mais donc les résultats ne peuvent être qu'à notre honneur. C'est pourquoi, dans les instants qui viennent, la Brave Patrie a besoin d'un soutiens indéfectible de la part de tout ceux qui en sont capables. Mais nous ne sommes pas seul !

Google est avec nous. Cette multinationale, bien que connue pour ses agissement subversifs et ses tendances communistes nous a assuré de son aide, dans des moments où de telles alliances sont nécessaires.

En ce moment même, à l'aide du soutiens logistiqueciel de Google, nous bombardons l'infâme Suceur de roues, ainsi que l'infecte scam. Ce dernier, pire que le premier, a osé s'attaquer aux valeurs essentielles qui nous rattachent à l'humanité : il a perverti économiquement le travail désintéressé pour se l'approprier de façon quasi frauduleuse.

Mais rassurez-vous. Vous pouvez compter sur moi comme je compte sur vous. Nous gagnerons. In Google, we trust.

Votre président, G.W.B.