Print CSS Plugin (WordPress) Needs CSS Guru [en]

[fr] Un nouveau plugin, qui permet d'insérer automatiquement une feuille de style pour l'impression dans son blog WordPress.

La feuille de style que j'ai pondue étant bien pauvre, incomplète, et franchement pas terrible, l'aide d'un gourou CSS serait fort appréciée pour mettre à disposition une feuille de style pour impression qui soit jolie, conforme, et à un peu près universelle. Crédit sera donné, bien entendu. (C'est un anglicisme, ça?)

Right, here we go — another plugin. I noticed some time back that many WordPress themes were provided without a print stylesheet.

In my attempt to stop fiddling with my theme files, I dreamed up a simple little plugin that would add a link to a print stylesheet in the page header, and provide a simple, universal, print stylesheet that people could use.

Well, I’ve got half the work done, and it’s my new plugin Bunny’s Print CSS (zip, .phps. “Half the work” because it includes a sample stylesheet and links to it automatically in the theme header when activated, but the stylesheet is nowhere near “complete”, “universal”, “pretty”, or any other nice adjectives you’d like to find associated with a print stylesheet bundled in a plugin.

So, call to all you CSS gurus out there. Can you improve on my print.css? It would be nice if it were at least somewhat sandbox/kubrick compatible. Credit will be (loudly) given.

Now, aren’t there other plugins out there doing similar things? Not that many, at least in the plugin repository. MyCSS allows you to add custom theme-independant CSS to your blog. WP-Print creates a “printable version” of your blog (if I understood correctly, by creating a set of print-friendly pages).

Jeremy Keith: The Beauty in Standards and Accessibility (Web2.0Expo, Berlin) [en]

Here are my notes of Jeremy Keith‘s session. He’s somebody I always appreciate listening to, and he also happens to be the creator (and provider) of Buzzword Bingo. Play with your neighbour when keynotes or sessions go down the buzzword path.

My notes are as correct as I can make them, but they may be missing bits and pieces and I might even have misunderstood stuff.

Web 2.0 Expo 6 - Jeremy Keith

First define. Who knows about beauty? The poets.

John Keats: Ode on a Grecian Urn. “Beauty is truth, truth beauty, that is all ye know on earth, and all ye need to know.”

William Blake: Auguries of Innocence. “To see a world in a grain of sand, and heaven in a wildflower, hold infinity in the palm of your hand, and eternity in an hour.”

Looking deep beneath the surface. Close-up sketch of a flea. Micrographia. Beautiful. Viewing source. This is how we see the beauty of things.

This whole web2.0 stuff is not about details. We’re not using microscopes, but telescopes, looking at the “big picture”. Telescopes can be good: think “Galileo”.

He brought upon the world an a priori change. A new way of looking at the world, though the world had not changed. The earth revolves around the sun, and not the opposite.

Darwin: the world didn’t change from one day to the next when The Origin of Species was published, but our view of the world did.

We want to think about structure. How is the house built? It’s when you understand the structure that you can build solid houses. Same with web pages. This is where web standards come in.

Separation. Before: all mixed up (html, css, js). Now: separate. (cf. Progressive enhancement. An a priori change to how you design websites.

a) begin with your content
b) structure it (HTML)
c) think about how it’s going to look (CSS)
d) think about the behaviour (DOM Scripting)

Web 2.0 Expo 5

If you remove any of these layers, it will still work. It won’t look pretty, it won’t behave as well, but it will still “work”.


  # in a separate document!
 p { }
 #foo { }

Then, add rules using selectors. From general to specific.


Very similar approach. Make it external. You don’t put it in the document. The vocabulary is different, but you also reference elements in the page pretty easily


School of thought called “unobtrusive scripting”, “unobtrusive javascript”


First structure, then presentation. If you catch yourself doing this…

 <a href="..."> # wrong!

If you put behaviour in here, you’ve wasted a hyperlink.

Slightly better… but still bad

 <a href="#"> # JS equivalent of using the style attribute

steph-note: I’m learning stuff about JS! yay!

Bandwidth benefits in doing things the right way. Process benefits, you can separate the work. And also… the beauty of it. Flexibility. See how it reacts in situations you haven’t accounted for? It won’t fall apart if somebody accesses with no CSS, no JS, no images…

So, is this about making site accessible? Kind of. Note: go to the talk on accessibility Thursday morning.

Jeremy is talking more about universality. You’re not shutting out devices. Mobile. Search bots. Screen readers.

W.B. Yeats (April 1916) “All is changed, changed utterly: A terrible beauty is born.”


Wonderful, beautiful, but can be terrible depending on how it’s used. steph-note: reminds me of what we said of JS in 99-00

The key to Ajax is about asynchronous communication with the server. XmlHttpRequest.

Jeremy’s definition: “A way of communicating with the server without refreshing the whole page.” Just part of the page.

Buzzword Hijax.

Here is how Jeremy thinks we should build an ajax application.

a) build a website in the old-fashioned way — buttons, links, for interaction with the server
b) then, come along with ajax — which parts of this page benefit from just being refreshed separately, and intercept the links/events. Hijack the requests. Bypass the whole page interaction.

Progressive enhancement rather than a terrible beauty that locks people out. Switch off JS, and everything still works.

Where? When?

Patterns: when I click a link/form, and when I submit it, I return to the same page with almost nothing changed.

  • registration forms (specially for user name availability)
  • comments on a blog/forum
  • add to cart
  • steph-note: sign in links

“Web 2.0” is not about web applications versus documents in the old “Web 2.0”. It’s a sliding scale. Most sites are somewhere in between documents and application. Applications work with documents! It’s not an either… or thing.

This kind of Ajax is more on the document side of the scale, roughly mid-way to the application end. Doesn’t scale to “more application”.

But at that point, why the hell are you building that with HTML, CSS and JS? The reason to use them is that they degrade gracefully. If you decide that all three are required, maybe you need to use another technology, like Flash. These technologies have their place for applications which cannot degrade gracefully. Flash is made for building web applications! But there is an insistance in building “2.0 Apps” in HTML/CSS/JS.

Maybe hesitancy because Flash isn’t a standard in the same way as HTML/CSS/JS?

Standards: you know your stuff will work, you know there’ll be support there. The best thing that Adobe could ever do in Jeremy’s opinion is to open it up truly (steph-note: if I understood that correctly).

History of standards.


Open data. API. RSS. XHTML.

If you’re going to release and API, look at what Google and Yahoo are doing and copy. Build upon existing conventions. Your own format is not going to make it.

If you allow people to access your data like that, you start to see emerging patterns.

Microformats! steph-note: yay!

Machine tags! steph-note: yay again! There is a machine tags wiki.

Jeremy, like many of us, really hates the “Web 2.0” label/buzzword. It had its place a few years ago, but now it’s really putting us in a box. Ajax is a good buzzword, because it allows to talk about a certain technology in a snappy way. Whereas Web2.0… ask ten people, and you’ll get 10 explanations.

Web2.0: people.

But we don’t need a buzzword for that. We already have a word for “leveraging collective intelligence”: the WEB!

Combine looking through the microscope and looking through the telescope.

OpenID at CTTS [en]

[fr] Installé OpenID sur ce blog.

Well, without really knowing what I’m doing, I’ve got myself an OpenID, and installed both the WordPress OpenID Plugin and WordPress OpenID Delagation plugins. Stuck a few links in

You should normally be able to use OpenID to comment here, and I should normally be able to use OpenID where it’s accepted.

Microformats et Bloggy Friday d'octobre [fr]

[en] Announcement for the next Bloggy Friday formatted with hCalendar microformat, and my hCard. Can you do anything interesting with them?

Octobre approche! Allez, j’annonce déjà notre prochaine rencontre:

Bloggy Friday d’octobre au Café de l’Evêché, Lausanne
6 octobre 20h00 jusqu’à tard

Rencontre mensuelle, le premier vendredi de chaque mois, des blogueurs romands ou d’ailleurs (on n’est pas sectaires!)

Inscriptions par commentaire sur le blog de Stephanie Booth (merci d’utiliser le billet annonçant l’événement, publié en général une semaine avant la rencontre).

En venant au Bloggy Friday, vous avez l’occasion de rencontrer d’autres blogueurs du coin fort sympathiques. Les nouvelles têtes sont toujours bienvenues.

Si vous êtes timides, soyez tout de même prévenus que vous courez le risque d’être photographié, blogué, — si vous ne voulez pas, il sera donc important de le faire savoir aux paparazzi présents!

hCalendar event brought to you by the
hCalendar Creator and modified slightly by CTTS.

Pas mal, hein? Mais ce que vous ne voyez pas au premier coup d’oeil, c’est que j’ai utilisé le microformat hCalendar pour baliser le texte ci-dessus. Jetez un coup d’oeil à la source de cette page, vous y verrez des choses…

Microformats?! késako? Allez, une petite explication de vive voix [1.7Mb, 3min38] dans mon podcast du jour. 17.09 12h30: Je viens de corriger le lien vers le podcast, merci à Anne Dominique et bouuh à tous ceux qui ne m’ont rien dit…

Et comme promis dans le podcast, my carte de visite en format hCard (attention les vélos):

Photo of Stephanie Booth.

Climb to the Stars
Guiguer-de-Prangins 11




This hCard created with the hCard creator and modified slightly by CTTS.

Balèze, non? Ah oui, il vous faut encore essayer Tails. Tails est une extension Firefox qui permet de voir quels informations microformattées sont contenues dans une page. Si vous voulez ensuite faire quelque chose avec ces informations, n’oubliez pas d’installer les scripts Tails qui se trouve en bas de la page.

Qui arrive à importer la carte de visite hCard et l’événement hCalendar contenus dans ce billet dans son calendrier ou son carnet d’adresse? (Allez, tuyau, Technorati — entre autres — a un parseur pour hCalendar et hCard si vous ne vous en sortez pas avec Tails. Oops. En panne. OK, pas en panne, mauvaise adresse (corrigée). Mais ça semble quand même pas marcher pour moi.)

Côté podcast, mis à part les ratures habituelles, j’ai cette-fois-ci parsemé le fichier audio de liens en rapport avec ce dont je parle. Vous pouvez les voir dans iTunes (j’ai testé). Ça me rendrait service que vous me disiez ce que votre lecteur de podcasts préféré fait avec ces liens, et si ça vous est utile (ou bien est-ce que je les mets aussi dans le billet? existe-t-il un extracteur de liens de podcasts?).

Bon, allez, assez parlé. J’ai des tas de trucs à faire 🙂

Try Tails! [en]

[fr] Une extension Flock/Firefox qui permet de visualiser les informations présentes dans une page sous forme de microformats.

The Firefox extension Tails shows you what microformats are embedded in the page you’re viewing. Try it out here while K2 is still on! Thanks to Yoan for pointing it out to me.

Tail on CTTS

SpiroLattic Resurrection [en]

[fr] En 2001, j'ai créé ce qui était (à ma connaissance) le premier wiki qui soit à la fois conforme aux standards web, joli, et partiellement francophone. Je fais dans ce billet l'historique du wiki, des pages marquantes qu'il a hébergées (dont la page qui a donné naissance à!), de sa mort par le spam, et de sa lente résurrection. J'ai récupéré certaines pages dans l'archive internet.

In November 2001, I discovered wikis. I decided to set one up for myself and the people I was gravitating around with: SpiroLattic. The wiki died due to spam and is now up again. Prepare for a trip down memory lane.

Back in 2001, I was all a-buzz about web standards, after the “browser push” campaign. Who remembers those times? It seems like so long ago, now. I first thought about it, translated “To Hell With Bad Browsers” and launched in the process, before converting my site to a tableless layout and publishing a tutorial which soon became pretty popular. As I understood very recently during an interview, I’m interested in doing what not many people are doing. I like the cutting-edge stuff. So at the time, it was web standards — because people needed evangelising and convincing that you could do great stuff with CSS, and that producing standards-compliant markup was important. Now, most people are sold on the topic, so I’ve moved on. I guess that when nobody wonders if they need a blog or not, or what blogs can do for them, I’ll have moved on to something else too.

So, anyway. That’s for the historical context. At the end of 2001, there were hardly any French-language wikis (I think I found a couple), and wikis were bland-looking and didn’t validate.

So, I downloaded PHPWiki, because it was in PHP and I knew I could hack it, dug through lines and lines of code, and finally ended up with a wiki engine which output valid HTML. Then, with the help of Stephanie Troeth, who came up with the neat background graphic and kept my bad design sense in check while I did the CSS, I came up with what was, to my knowledge, the first pretty standards-compliant wiki.

We had fun for a moment with it. It was bilingual, like CTTS. We talked about hiding one’s real name, about education. I wrote one of the first articles on what a weblog was in French on SpiroLattic: C’est quoi un weblog?. Sometime in May 2002, I started collecting all the Swiss blogs I could lay my hands upon, and that list grew and grew, to finally become SwissBlogs.

So, what happened?

Well, first, the wiki never reached critical mass, so contributions slowly dwindled away. Then, spam. Some of the pages on the wiki were very popular and became the target of ugly spambots. At some point, I got tired of cleaning up all the spam and decided to pull the site down and install another engine. Which I did. It just took time.

So, dating from today, SpiroLattic is back into existance. As transferring the pages from PHPwiki to MediaWiki proved a monstrous problem, particularly as I don’t have a working install of PHPwiki anymore, I’ve hunted through the internet archive for clean versions of some old pages that I’ve either transferred into the new wiki or just collected on a special page.

I know it won’t reach critical mass or even attract much public, but at least I have a wiki playground for whenever I need it!

Revue de presse pas si expresse [fr]

[en] Updated my press page. Complaint about the sorry state of some journal online archives and sites. La Liberté seems to get it right, though. All this smattered with early Sunday afternoon ramblings.

Tout d’abord, un grand bonjour aux lectrices et lecteurs de Femina qui passeraient par ici pour la première fois. Je vais être d’une originalité déconcertante en disant que j’espère que mon blog vous plaira. Si le technologie vous rebute et que vous préférez les photos, j’ai aussi un certain nombre d’albums en ligne.

N’hésitez pas à laisser un commentaire pour me dire bonjour — je vous promets, même si c’est la première fois ça ne fait pas mal.

Passons aux choses plus graves. J’ai mis à jour la page presse du mieux que j’ai pu. Je commence à me retrouver citée dans les journaux sans le savoir. C’est d’ailleurs la deuxième fois que Raph me l’apprend — “(12:39) ah ben c’est ça, la popularité, machin”. Et dans le même ordre d’idées, Stéphane Le Solliec m’informait que mon nom figure dans le dernier Joël de Rosnay… Bref.

Si vous avez lu dans La Liberté que j’ai dit que la Suisse avait un net retard dans l’utilisation des blogs en politique… disons que je n’ai pas été aussi catégorique. J’ai plutôt dit quelque chose comme “euh… oui… ben je disais il y a quelque temps qu’on était un peu à la traîne, mais là il me semble depuis quelques semaines qu’il y a vraiment des choses qui sont en train de démarrer, enfin ça bouge, donc on a un peu de retard, c’est clair, mais il me semble que c’est en train de changer…” Bref, moins catégorique. Et comme j’ai précisé à la journaliste, je ne suis vraiment pas une grande spécialiste du blog politique. Parce que moi et la politique… ça fait plus qu’un.

On notera en passant que sur le site de La Liberté, on peut faire des fouilles assez efficaces dans les archives web (une fois qu’on a trouvé le minuscule lien dans la colonne de gauche). En utilisant la recherche par date, je trouve sans problème toute la liste des articles “Régions” du 17.02.2006, par exemple. En mettant mon nom dans les mots-clés, on trouve deux articles — mais pas celui-ci, bizarrement? Donc, bravo La Liberté, c’est bien mieux que d’autres que nous ne nommerons pas ici!

On notera également en passant (je vois bien que je suis incapable de publier quoi que ce soit “d’express”) que la romandie compte maintenant enfin une star blogueuse: Marie-Thérèse. J’ai voulu ouvrir un blog chez, pour voir, mais alors là … Un gros cactus, allez — vous avez vraiment envie de donner votre adresse postale quand vous ouvrez un blog, vous? Allez plutôt chez Même si pour le moment c’est en anglais, il y a plein de blogs en français là -bas, c’est joli, il n’y a pas de pub, on vous demande juste une adresse e-mail pour vous inscrire, et c’est une super plate-forme. Laissez l’adresse en commentaire si jamais vous décidez de vous lancer à l’instant, et j’irai jeter un oeil!

Je termine ce billet avec un autre gros cactus, pour Femina. Eh oui. (Rien à voir avec l’article, qui est très gentil et flatteur.) En allant chercher la version en ligne de l’article en question pour ma collection, j’ai vu que le site de Femina avait été refait. Peut-être il y a longtemps, je n’y vais pas souvent. Bon. Alors. D’abord, intro Flash avec son, non. On ne me donne même pas le choix d’y échapper. Et si j’étais en train d’écouter la radio pendant que je surfe, déjà ? Ou ma chanson préférée? Me flanquer du son dans les haut-parleurs de mon iBook sans me demander, c’est vraiment malpoli.

Ensuite, recherche d’articles. D’abord, c’est tout en je-sais-pas-quoi-j’veux-pas-l’savoir, et puis il faut s’inscrire avant de pouvoir voir quoi que ce soit. Au revoir, moi j’essaie même pas. C’est quoi le problème avec un bon vieux répertoire d’archives en HTML (valide, si possible)? Je crois vraiment qu’il faut arrêter d’essayer à tout prix de rendre l’accès à l’information difficile…

Bonne fin de dimanche! Rip-Off [en] was ripped off.

[fr] Le design de a été copié, par un site qui (d'après ce que je comprends) vise à  promouvoir l'utilisation du galicien.

Well, here we are: a splendid rip-off of Sam, the original designer and editor-in-chief of, is not happy.

Bad, bad, bad.

Pompage tout frais! [fr] change de design et de structure.

[en] redesigns for the new year. Samuel Latchman is now the new Head Editor. fait peau neuve. L’expression est usée, mais c’est vraiment ça.

En plus des changements cosmétiques, on voit apparaître une page consacrée aux articles traduits ailleurs, une liste de ressources, et un index général de tous les articles qui permet maintenant de trier les articles parus par thème, par niveau, ou même par auteur!

Cette nouvelle année est également l’occasion de rendre officiel ce qui est déjà  la réalité pratique depuis une nombre de mois qui doit friser — voire dépasser — l’année: j’abandonne mon poste de rédactrice en chef pour ne garder qu’un pied honoraire dans la rédaction de Le nouveau rédacteur en chef est donc Samuel Latchman — cela ne doit guère être une surprise, puisqu’il remplit cette fonction avec une compétence admirable depuis déjà  fort longtemps.

Mes félicitations au nouveau rédacteur en chef et à  toute l’équipe, avec une mention particulière pour Stéphane, responsable de l’introduction de SPIP dans la vie de ceux qui font