Olivier Mengué – Code & rando

Aller au contenu | Aller au menu | Aller à la recherche

lundi 11 février 2008

Les programmes télé de Télérama en XMLTV

XMLTV est un format informatique pour les programmes de télévision. Ce format est utilisable dans un nombre grandissant d'applications. Le magazine Télérama propose sur son site une grille des programmes télé, mais juste consultable sur le web. Pas de XMLTV.

Je vous propose donc de combler ce manque avec un petit cours de reverse engineering sur le web et la démonstration de quelques outils pour arriver rapidement à vos fins. La grille de Télérama est une excellente cible pour ce genre d'exercice parce que, vous le verrez, la tâche n'est pas simple, mais possible. Elle donne l'ocassion de montrer l'usage de plusieurs outils (curl, XSLT, Perl) et c'est un exemple de ma démarche de prototypage rapide en utilisant le meilleur de chacun.

MàJ 2008-02-15 : j'ai profondément remanié l'introduction et la conclusion suite à quelques commentaires de lecteurs.

Lire la suite...

samedi 3 novembre 2007

Une icône pour les liens vers Wikipédia

J'ai juste ajouté une petite touche à la feuille de style de ce blog (dont j'ai déjà longuement parlé en anglais) : une petite icône pour signaler les liens vers Wikipédia.

J'ai récupéré l'icône du site en ligne de commande avec Wget :

$ wget -O wikipedia.ico http://fr.wikipedia.org/favicon.ico
--19:23:35--  http://fr.wikipedia.org/favicon.ico
           => `wikipedia.ico'
Résolution de fr.wikipedia.org... 145.97.39.155
Connexion vers fr.wikipedia.org|145.97.39.155|:80... connecté.
requête HTTP transmise, en attente de la réponse... 200 OK
Longueur: 318 [image/x-icon]

100%[====================================>] 318           --.--K/s             

19:23:35 (30.79 MB/s) - « wikipedia.ico » sauvegardé [318/318]

Je l'ai ensuite convertie à la taille 14x14 au format GIF avec l'outil convert d'ImageMagick :

$ convert wikipedia.ico -resize 14x14 wikipedia.gif

L'image résultante faisait 595 octets. L'utilisation de l'application en ligne Image Optimizer m'a permis de réduire le nombre de couleurs de l'image à 16 et de réduire la taille à 167 octets.

En suivant Megan McDermott, j'ai modifié ma feuille de style pour ajouter la ligne suivante :

Il peut être utile parfois de désactiver ce style localement ou pour les blocs de code :

pre.code a:link, pre.terminal a:link,
.no-link-icon a:link,
a:link.no-icon
{ background: inherit; padding-right: inherit }

Mise à jour 2007-11-05 à 22:25 : mes règles pour les exceptions ne fonctionnent pas ! Je me suis fait avoir par les règles de précédence des règles CSS ! Il va falloir que je corrige cela...

Mise à jour 2007-11-05 à 22:46 : voici, j'espère, la correction. Il faut que j'augmente le poids des règles d'exception en augmentant le nombre d'attributs ou de pseudo-classes dans le sélecteur.

pre.code a:link[href], pre.terminal a:link[href],
.no-link-icon a:link[href],
a:link.no-icon[href]
{ background: inherit; padding-right: inherit }

lundi 3 septembre 2007

Paris Bluetooth MobiGuide : première réaction sur la forme

Je viens de découvrir ce soir que la Mairie de Paris a commencé une expérimentation de diffusion de contenu par Bluetooth à partir des stations Vélib’ : le Paris Bluetooth MobiGuide. Voici mes premières réactions, plutôt d'un point de vue technique (comme souvent ici), c'est à dire sur la forme plutôt que sur le fond et notamment du point de vue d'un utilisateur de Nokia N800.

Il y a quelques mois j'avais déjà reçu par Bluetooth une image JPEG de l'affiche du film Spiderman 3 en passant à coté d'un panneau d'affichage sur le boulevard Haussmann. J'ai repéré un panneau semblable du côté de la rue de la Gaîté. Dans le cas du MobiGuide, c'est potentiellement, pour le récepteur, une utilisation plus intéressante de la technologie Bluetooth.

Le MobiGuide est disponible de plusieurs façons :

  • pour consultation hors-ligne sur un téléphone mobile, sous la forme d'une application Java à installer après téléchargement :
    • par diffusion vers le téléphone mobile depuis des fontaines Bluetooth placées à des stations Vélib' ;
    • par téléchargement depuis en allant naviguer sur http://mobile.paris.fr/ ;
    • par téléchargement avec un ordinateur sur paris.fr ;
  • par consultation en ligne sur http://mobile.paris.fr/.

Ma première réaction : malgré la multiplicité des moyens d'accès, aucun ne me permet d'accéder facilement au MobiGuide avec les appareils dont je dispose :

  • L'application Java ne fonctionne que sur appareils mobiles, pas sur PC.
  • Le Nokia N800 est un appareil mobile qui dispose d'un chip Bluetooth, mais il n'a pas de machine virtuelle Java.
  • Mon téléphone mobile (Nokia 3100) n'a pas la capacité mémoire suffisante pour stocker l'application. 300 Ko, c'est trop pour lui !
  • Le site en ligne est inaccessible aux navigateurs web standards à cause d'un bête problème de configuration du serveur :
    C:\>curl -I http://www.v2asp.paris.fr/v2/mobile/bluetooth/site_PB1er/index.xhtml
    HTTP/1.1 200 OK
    Server: Microsoft-IIS/5.0
    Date: Sun, 02 Sep 2007 22:04:48 GMT
    Content-Type: application/octet-stream
    Accept-Ranges: bytes
    Last-Modified: Mon, 30 Jul 2007 14:25:45 GMT
    ETag: "20399984b5d2c71:86e"
    Content-Length: 1383
    Le Content-Type devrait être « application/xhtml+xml; charset=iso-8859-1 ». Ce simple paramètre bloque la consultation sur le N800 ou sur un PC (MSIE, Firefox) : au lieu de simplement montrer le fichier, le navigateur propose de le télécharger. Quant aux téléphones mobiles, le navigateur intégré de mon Nokia 3100 indique « Réponse inconnue », et Opera Mini signale « Opera Mini Basic ne supporte pas les téléchargements. Ignore "index.xhtml" avec le type "application/octet-stream". »

Je suis finalement arrivé (mais c'est laborieux) à accéder au contenu hors-ligne entièrement depuis mon N800 en bidouillant ainsi :

  1. téléchargement par wifi de Paris1.jar (j'aurais aussi pu aller me rendre à une fontaine Bluetooth pour récupérer le fichier, mais bon, j'habite pas à côté) ;
  2. renommage de Paris1.jar en Paris1.zip ;
  3. décompression de Paris1.zip dans le répertoire Paris1 ;
  4. lancement du navigateur web (l'extension .xhtml n'est pas reconnue directement depuis le Gestionnaire de fichiers) ;
  5. menu Page Web, Ouvrir fichier... pour ouvrir Paris1/microsite/index.xhtml ;
  6. ça y est ! J'accède au contenu XHTML.

Le résultat : j'obtiens un site qui ne prend même pas un quart de l'écran parce que la largeur est fixée en dur sur chaque page à 176 pixels (alors que l'écran du N800 fait 800 pixels). Et j'aboutis à des impasses telles que http://www.v2asp.paris.fr/v2/mobile/bluetooth/site_PB1er/622_ballades.xhtml où les liens pointent vers des fichiers texte qui sont probablement utilisés par l'application Java pour afficher des cartes, mais qui ne sont visibles ni dans le N800 ni sur le PC.

En résumé, c'est plutôt un fiasco. Faut que ça mûrisse encore pour être disponible sur un plus grand nombre de plateformes.

mardi 28 août 2007

TiddlyWiki and favicon

TiddlyWiki is a standalone wiki that is fully interactive and fully contained in a single HTML file. Here is a tip to add a favicon to your wiki.

To enable saving you have to give to the browser some special permissions allowing the JavaScript code to write to your disk. When using it with Microsoft Internet Explorer, the easy way to enable saving is to just rename your wiki as .hta to transform it into an "HTML Application", as Microsoft calls it.

But you can do better with HTML Applications than just decreasing the security level. I was particularly interested in a better integration with Windows. I wanted in particular to change the icon of the window that appears in the taskbar (I commonly have about 30-40 windows opened on my desktop). This is quite easy: you just have to add an <HTA:APPLICATION ICON="myfile.ico"> tag the <head> section of the HTML file.

Here is how to do it the TiddlyWiki way:

  1. Get an icon and save it as tiddlywiki.ico in the same directory as your wiki.hta file. For example: http://www.tiddlywiki.org/favicon.ico. You can also create you own icon here or here.
  2. Edit the built-in tiddler MarkupPreHead
  3. Insert the following text just after <!--{{{-->:
    <!--[if IE]>
    <HTA:APPLICATION ID="oHTA" APPLICATIONNAME="My wiki" ICON='tiddlywiki.ico'/>
    <![endif]-->
    <link rel='shortcut icon' href='tiddlywiki.ico' type='image/vnd.microsoft.icon '/>
    
  4. Reload your wiki.hta. That's it!

I now have to explore how to convert this to a plugin...

samedi 25 août 2007

Syntax highlighting on this blog using semantic tags and Vim

The regular readers of the HTML view of this blog (if they exist) may have noticed some changes in the syntax highlighting of the source code in my posts. I've tweaked the CSS style sheet to use the RubyBlue Vim theme instead of the Blue Vim theme. This is the occasion to explain you my process to format source code samples in HTML.

I'm a Vim addict, using it on Linux, AIX and Windows. Vim has a powerful and extensible syntax highlighting engine that can format almost any existing text file format. And most importantly, it has a plugin that can export the highlighted code as HTML.

There is many advantages in using Vim and storing statically highlighted code:

  • I can use the huge set of languages supported by Vim highlighting ;
  • I can use the huge set of themes built for Vim and easily convert to a CSS for the web ;
  • if a language is not supported, I can define highlighting myself (I already did it for 4 languages) and it will be done once for use both in Vim and on my blog ;
  • as I store only pure HTML as data in the blog engine (no special wiki code, no plugin), I am not dependent on the engine I'm currently using ;
  • no charge on the server (as with PHP formatting engines such as GeSHi) or on the client (such as with syntaxhighlighter) ;
  • as we are using simple <pre> tags, there is no characters/tags pollution: the reader can simply select and copy the text to the clipboard ;
  • last but not least, I can tweak the output to improve it and fix the highlighting bugs (some languages are very hard to parse).

In Vim you can invoke the conversion to HTML from the "Syntax" menu or that way:

:runtime syntax/2html.vim

To get the best XHTML code, I'm using the following settings in $HOME/.vimrc:

syntax on
" Conversion HTML (:help 2html.vim)
let g:html_use_css = 1
let g:html_use_encoding = "utf8"
let g:use_xhtml = 1

For example, here is the HTML I extract (I remove anything around the <pre> tag) from what is generated by 2html.vim from the code above:

<pre>
<span class="Comment">&quot; Conversion HTML (:help 2html.vim)</span>
<span class="Statement">let</span> g:html_use_css <span class="Operator">=</span> <span class="Constant">1</span>
<span class="Statement">let</span> g:html_use_encoding <span class="Operator">=</span> <span class="Constant">&quot;utf8&quot;</span>
<span class="Statement">let</span> g:use_xhtml <span class="Operator">=</span> <span class="Constant">1</span>
</pre>

I just have to add my own set of classes to enable highlighting:

<pre class="code vim vimft-vim">...</pre>

Here is the semantic associated to the classes:

  • code is my generic class for source code blocks 
  • vim is for source code formatted using the Vim classes for highlighting 
  • vimft-html is the class for the specific kind of source code: Vim's filetype option, displayed with ":set ft?".

For terminal output samples, I'm using my own highlighting using semantic XHTML tags :

  • <pre class="terminal">, the enclosing tag, with an optional class :
    • unix for Unix/Linux samples ;
    • cmd for Windows cmd.exe shell code.
  • <kbd> for what is typed in the terminal, with the following optional classes:
    • shell for any Unix shell samples ;
    • bash or ksh (in addition to shell) for Unix shell samples that uses features which are not in the standard POSIX shell ;
    • cmd for Windows cmd.exe shell code.
  • <samp> for programs output:
    • prompt for shell or interactive programs prompts ;
    • shell, bash, ksh or cmd for shell prompts (in addition to prompt) ;
    • sqlite, sqlite3 for SQLite client samples...
  • <var> for variable input/output. Everything except the <var> content should exactly match if you repproduce it yourself. The title can indicate what the variable represent, and on which data it depends. The tag is always a direct child of either <kbd> or <samp>.

Here is an example:

<pre class="terminal unix">
<samp class="prompt shell">$ </samp><kbd class="shell">echo Hello, world!</kbd>
<samp>Hello, world!</samp>
<samp class="prompt shell">$ </samp><kbd class="shell">date</kbd>
<samp><var>samedi 25 août 2007, 18:51:00 (UTC+0200)</var></samp>
</pre>

And the final result:

$ echo Hello, world!
Hello, world!
$ date
samedi 25 août 2007, 18:51:00 (UTC+0200)

This semantic tags will allow me to provide later additional feature using JavaScript code. I'm thinking to a button that would hide any <samp> tags and keep only <kbd> tags to ease copy of the commands to a terminal to run the commands.

With these tags in place, the CSS stylesheet is quite short and simple. More importantly it is easily replaceable in case I change the theme of the blog.

pre.code.vim,
pre.terminal { margin-left: 1pt; padding: 5pt; }

/* Text not embedded in samp or kbd will be in red, to easily detect errors */
pre.terminal { background: #000; color: #f00; }
pre.terminal samp.prompt { color: #888; }
pre.terminal samp { color: #eee; }
pre.terminal kbd { color: #fff; font-weight: bold; }
pre.terminal var { color: #55f; font-style: italic; }

/* colorscheme rubyblue */
pre.code.vim { color: #c7d4e2; background-color: #162433; }
pre.code.vim a[href] { color: #0f0; }
pre.code.vim .Constant { color: #0c0; }
pre.code.vim .Comment { color: #428bdd; }
pre.code.vim .Identifier { color: #fff; }
pre.code.vim .Label { color: #ff0; }
pre.code.vim .Operator { color: #ff0; font-weight: bold; }
pre.code.vim .PreProc { color: #f9bb00; }
pre.code.vim .Special { color: #0c0; }
pre.code.vim .Statement { color: #f9bb00; }
pre.code.vim .Title { color: #fff; font-weight: bold; }
pre.code.vim .Type { color: #fff; text-decoration: underline; }
pre.code.vim .Underlined { color: #208aff; text-decoration: underline; }

I had to tweak a bit the blog engine I use (DotClear) to add this style sheet: modifying the template.php in the theme directory is not enough because the theme is used only on the public part of the blog. So I added an @import rule in ecrire/style/default.css to enable the CSS in the private area of the blog.

 

I would be glad to read your experiences about source code formatting on your own blog or CMS.

Update 2007-09-06: added missing information about the usage of <var> tags.

samedi 11 novembre 2006

DailyMotion's poor HTML code

For my post of this morning that included a video I did use DailyMotion services. When you upload a video, they provide HTML code to embed it on your site. OK, that seems fine. But it's not. Here is the code:

<div>
  <object width="425" height="335">
    <param name="movie" value="http://www.dailymotion.com/swf/2JarEXHqOuOxZ4psf"></param>
    <param name="allowfullscreen" value="true"></param>
    <embed src="http://www.dailymotion.com/swf/2JarEXHqOuOxZ4psf" type="application/x-shockwave-flash" width="425" height="334" allowfullscreen="true"></embed>
  </object><br />
  <b><a href="http://www.dailymotion.com/video/xmj2z_rallye-de-vence-2006-speciale-3-96">Rallye de Vence 2006 - Spéciale 3 - 96</a></b>
</div>

Here are my grievances:

  • This code uses <embed> tags, which have never been part of any W3C HTML specifications. <embed> is, AFAIK, a Netscape-only tag. Firefox/Mozilla now recognizes the standard <object> tag, so <embed> is only required for compatiblity with Netscape 4.x which, at web2.0 time, nobody uses anymore.
  • They do not provide alternative strictly validating XHTML code. Most blog and CMS software are now XHTML strict compliant. Embedding this code breaks strict validation and could cause the page to not display at all.
  • The code is not working with old Flash versions and does not tells why or proposes to upgrade. My parents have Flashplayer 6, and the display is weired. Even worse, when clicking on the link below the video to go to DailyMotion site, it crashes IE6 (with latest security patches).

So, here is my own code:

<div class="video dailymotion">
  <object width="425" height="335" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="movie" value="http://www.dailymotion.com/swf/2JarEXHqOuOxZ4psf"></param>
    <param name="FlashVars" value="playerMode=embedded"></param>
    <!--[if !IE]>-->
      <object width="425" height="335" data="http://www.dailymotion.com/swf/2JarEXHqOuOxZ4psf" type="application/x-shockwave-flash"></object>
    <!--<![endif]-->
  </object><br />
  <b><a href="http://www.dailymotion.com/video/xmj2z_rallye-de-vence-2006-speciale-3-96">Rallye de Vence 2006 - Spéciale 3 - 96</a></b>
</div>

Tested with Firefox 1.5.0.8 and Internet Explorer 6. I just hope it works with Opera/Safari/Konqueror…

Some reference documentation from Netscape/Mozilla and Ado be were useful.