Micro-données…

HTML5 Logo by World Wide Web Consortium

Après une longue stagnation, HTML, le standard qui sous-tend la majorité du web a finalement recommencé à bouger, avec une version 5 qui s’impose peu à peu. Là où HTML4 a tenté – sans succès – d’imposer un système formel, avec une belle grammaire, HTML5 essaye plutôt d’ajouter les capacités qui manquent au système. Un des ajouts intéressant sont les µ-données (micro-données). L’idée étant de pouvoir ajouter des informations compréhensibles par un ordinateur à une page web.

Pourquoi est-ce utile ? La majorité des pages web sont, d’une manière ou d’une autre, lues par des algorithmes, que ce soit les moteurs de recherche ou les réseaux sociaux. Que ce soit pour inclure la page dans un indexe, ou bien pour partager un lien et afficher une vignette, il est utile pour le système de savoir de quoi parle une page web. Est-ce un article, qui est l’auteur, quel le titre, quelles sont les images ? Est-ce une critique ? Qu’est-ce qui est critiqué ? Quelle est la note de la critique ? Même si de grand progrès ont été faits en matière de traitement automatique de texte, aucun système ne peut pour l’instant extraire de manière fiable ces informations.

La solution est simple : ajouter ces informations, des méta-données, dans la page web dans une forme structurée qui puisse être analysée automatiquement. Ce n’est pas une idée nouvelle : une variété de systèmes ont été proposé à cet escient au cours des années, à commencer par le vénérable balise meta, qui fut abandonnée tant elle fut abusée par les sites web peu scrupuleux.

Le format proposé en 1999 est un système pour décrire des méta-données, mais une manière d’inclure ces informations dans une page web ne fut standardisée qu’en 2008, cet encodage est nommé , il utilise en partie des balises HTML existantes, mais introduit aussi les siennes.

Imaginons que je sois responsable d’un site web présentant des jeux de rôles, que je nommerais la Confrérie des Rôlistes Interstallaires (CRI). Voici comment je présenterais le jeu de rôles au format RDFa. Il me faut d’abord choisir un vocabulaire, i.e un suite d’attributs qui ont un sens pour le sujet dont je vais parler. Ici on parle de livre donc je choisis le vocabulaire , qui est abrégé dc.

<html xmlns="http://www.w3.org/1999/xhtml" dc="http://purl.org/dc/terms/" xmlns:biblio="http://purl.org/net/biblio#" >

<div xmlns:dc="http://purl.org/dc/elements/1.1/" about="urn:ISBN:9782847890525" typeof="biblio:book">
Titre: <span property="dc:title">Tigres Volants</span><br/>
Auteur: <span property="dc:creator">Stéphane Gallay</span><br/>
</div>
Éditeur: <span property="dc:publisher">2D Sans Faces</span><br/>
</div>

Avant de pouvoir parler, je dois donc importer les vocabulaires que j’utilise. Dans l’en-tête je définis donc que le préfixe dc correspond au vocabulaire Dublin Core, et biblio au vocabulaire sur les bibliographies (pour le type book). L’extrait de HTML rend explicite le fait qu’on parle d’un livre avec l’ISBN 9782847890525, le titre Tigres Volants et comme auteur Stéphane Gallay, publié par 2D Sans Faces. Il est possible de spécifier d’autres attributs, mais cela devient vite compliqué, car pour chaque domaine, il faut importer un nouveau vocabulaire et il en existe de nombreux, comme par exemple de Facebook.

L’idée des µ-données est de simplifier ce système en abandonnant la généricité du XML et en intégrant mieux le HTML. Comme auparavant, il faut choisir un vocabulaire, mais cette fois-ci il existe un vocabulaire généraliste qui décrit assez bien la plupart des choses : . Le même extrait ressemblerait cette fois-ci à cela :

<div itemscope itemtype="http://schema.org/Book">Titre: <span itemprop="name">Tigres Volants>/span><br/>
Auteur: <span itemprop="author">Stéphane Gallay</span><br/>
Éditeur: <span itemprop="publisher">2D Sans Faces</span><br/>
ISBN: <span itemprop="isbn">9782847890525</span><br/>
</div>

Le gros avantage de la solution µ-donnée est que le format est plus simple, le vocabulaire unifé et mieux documenté : pour savoir quels attributs sont supportés par un type, il suffit d’aller voir à l’url qui définit le type, ici le type livre.

Il existe un autre système, parallèle, appelé micro-formats (rien n’est simple), qui utilise uniquement les balise class utilisées par le CSS, ils ont l’avantage, mineur à mon sens, de ne pas introduire de nouvelle balise, ils ont l’inconvénient d’être plus complexe et d’interférer potentiellement avec la feuille de style.

Bon d’accord, mais en pratique, ça fait quoi ? Principalement, cela permet aux moteurs de recherche d’afficher les résultats de manière plus pertinente, par exemple si une page contient un évènement, d’afficher les dates, s’il s’agit d’une critique, d’afficher le score, par exemple avec des étoiles. D’une manière générale, cela permet aux engins de recherche d’afficher des informations à propos d’un sujet indépendamment d’une page web, par exemple, savoir que Tigres Volants est un jeu de rôle écrit par Stéphane Gallay.

Quelques Outils

A Beginner’s Guide to HTML

NCSA Mosaic Logo

One of the basic ideas of the web is that you do not copy data to your machine, instead you keep pointers (urls) to stuff. The underlying assumption is that said pointer will remain valid in the future. When I first learned to do HTML, I clearly remember printing out the page A Beginner’s Guide to HTML written by Marc Andreessen, so I could work offline, at home. I had dialup access, but loading a web page over a modem was just to slow. As internet became faster and more prevalent, I stopped keeping paper versions of documentation, and moved on to more modern HTML features, like the ones supported by Netscape. I eventually lost the paper version.

In response to assorted requests and queries, I have written a simple “Beginner’s Guide” to writing documents in HTML. It’s up for grabs at http://www.ncsa.uiuc.edu/demoweb/html-primer.html at the moment; comments are welcome (but no complaints about my coverage or use of the IMG tag that Mosaic supports; it’s important internally).
The guide also points to a rudimentary primer on URL’s that might be of interest to Web beginners (certainly the number of people who have sent me Mosaic bug reports saying “URL ‘machine.com’ doesn’t connect to the ftp server”, etc., would seem to indicate that basic knowledge of URL’s is not yet a given on the net).
Cheers,
Marc

Finding that particular guide again was not completely trivial, so I’m now putting another mirror online here. This document confirms what I outlined in my post about image formats, that what was considered a reasonable image file in these days is not anymore. We are still struggling with the format of video data, although that subject is already touched upon in 1993. In a sense, HTML-5 is much closer to the spirit of HTML-1, with various teams trying to get something done instead of having a nice formalism.

ILBM Animations

I have been hacking around on my small javascript library to load ILBM/IFF files, once I had fixed HAM decoding the next logical step was to add support for animations. This was for me a good opportunity to learn about animations in Javascript, in particular window.requestAnimationFrame. I’m not 100% sure that the code is correct, as the rare specs I found about the CRNG chunk are pretty thin on details, I have something that seems to work and does not kill the CPU of my laptop completely.

The animation on this page is For This, an ILBM file with an animated colour palette, created by Vector (Peter Szalkai). Interestingly this image has a pixmap of 320 × 256 which hints to a PAL Amiga.

Ham decoding fixed

After sharing my library for displaying ILBM/IFF files, Amiga Graphics correctly pointed out that the HAM image handling was buggy, this is now fixed: I was not making a copy of the palette colour used in Hold & Modify, so it was getting modified, i.e. corrupted.

The following image, Angel, by Dennis Jacobson/JAKE Productions is a ILBM/IFF Hold and Modify image based on a picture of Karen Velez from 1985. Note that the source pixmap is 400 × 320 pixels with a rendering ratio of 20 ÷ 11, the Amiga had strange video modes.

Amiga ILBM files


This image (MEDUSABL.IFF) is one of the few Atari ST IFF files I could find on the web, it is quite typical of the graphics of the time: low resolution, 4 bit palette.

The next big thing after the Commodore 64 was, of course the Amiga. While a 16 bit processor with a 8 Mhz clock is something you use for a washing machine today, in those days it was something awesome. The Amiga was renowned for its graphical capacities as it could display more than the 16 fixed colours of the C64.

One graphical mode that was particular interesting was Hold and Modify (HAM), which enabled the display of up to 4096 colours in a fixed image using only 8 bits per pixel. HAM is basically a hack, where each pixel can either be looked-up in a colour table (the standard way of doing things in those days), or re-use (hold) the colour of the previous pixel and modify the value one of one of the channels (Red, Green, or Blue), hence the name Hold and Modify.

The graphical image format of the Amiga was , a particular instance of the . I wanted to see if I could write a parser for the IFF/ILBM format that would read directly the original file and display it in an HTML5 canvas. It was a fun project, as the ILBM format stores image data in a way that is completely different from the way things are done nowadays: instead of storing all the bits for a given pixel together, they are split between bitplanes, each pixel is represented by a single bit in multiple bitplanes. This was related to the way Denise, the graphical chip of the Amiga, handled graphics. I also had to write code to decompress the data.

Interestingly this format shares some technology with the Macintosh: IFF reuses the idea of 32 bit type codes adopted by the Mac, and in return the Mac used a IFF based format for sounds, AIFF. ILBM also uses the compression introduced by Apple. The IFF format still survives in a way: the WebP format uses the RIFF container, which is basically the little endian version of IFF.

Anyway, I managed to get something that works, the code can load and display both palette and HAM ILBM files. I could not write code that handles HALFBRITE format because I did not find any example image. My code parses the palette animation tables, but does not perform the animation, although it looks like it is possible: this blog post shows some impressive colour table animations using the gorgeous art of Mark Ferrari, it also uses ILBM files as a source, but pre-converts the data in JSON.

You can find the standalone image visualisation web page here and the javascript library that does the work here, the library is distributed under the BSD license.

Edit: changed the frame page code to be a bit more generic.
Edit: the library now has its own page, it now supports animations and EHB images.

Seamless iframes

HTML5 Logo by World Wide Web Consortium

One of the interesting additions of html5 is the the notion of seamless iframe, that is, an iframe that looks like it is part of the parent web-page, inheriting its styles and such. While this feature is not widely available, in fact the Webkit nightly only had it for a few days, I found some interesting use for it: testing new blog posts.

While WordPress offers some modicum of WYSIWIG editing, I tend to write the html myself, partly because I have heavily customise the CSS of the blog, partly because I tend to use features that are awkward to use in an editor, like tables, or are not supported at all, like using non-breaking thin spaces in front of punctuation in French texts, i.e. following the typographical rules.

More and more, I write the blog entry in a text-editor, which is more confortable and much faster than using a web-interface (I know, I’m old school). This also has the advantage of working offline, which in a country where trains tend to go through tunnels, is a nice advantage. Still it would be nice to be able to preview the general look of the page.

Now I can do this using a seamless iframe. To do this I wrote a minimal web-page that mimics the general structure of a WordPress blog, it basically loads the CSS, sets a few structural divs, and that’s it. This div in turn includes a minimal web page that contains the content of the blog entry, encapsulated in a single div that needs to be emulated.

You can have a look at the test frame, the actual blog-post snippet is here. Of course this will only work with a web-browser that supports seamless iframe.

The web browser of the Playstation 3

PlayStation 3 Slim Model

This February, Sony did something unexpected: it did something smart. Included with the release notes for firmware update 4.11 is the following text

The Internet browser has been updated for improved content display.
Some websites that could not be displayed correctly, including interactive websites, are now supported, and page layouts are now displayed with better accuracy.

Playing around revealed something interesting: the web-browser is webkit based, version 531.22.8 according to the headers. Looking at the license acknowledgements, it looks like it is based on the GTK API. The browser has the same interface as the previous one, so the change is quite subtle, but CSS and Javascript supports has significantly improved, which is good because the previous browser was really bad. There are many missing features, including SVG image and video tag support, but this is a step in the right direction, and one can hope that Sony’s engineers can now iterate and add new features to the browser.
Mozilla 5.0 (Playstation 3 4.11) AppleWebKit/531.22.8 (KHTML, like Gecko)
Given the fact that Sony won’t release a new living room console for a least one year, keeping the venerable PS3 relevant sounds like a good strategy to me.

What I find interesting is that many HTML5 additions designed for mobile phones are actually very relevant for a gaming console. Consider the following:

Video
The PS3 is typically connected to a TV or a big screen, and has hardware support for playing back H264 content.
Input forms
By default, the PS3 uses a soft-keyboard, so having specialised keyboards for numbers, e-mail addresses, and ranges would make it much more usable.
Vibration
Most PS3 come with Dualshock controllers which can produce vibrations.

Media Capture
The PS3 can be equipped with a webcam and a microphone.
WebGL
The PS3 has respectable Open GL ES rendering capacities

I suspect the main issue is going to be RAM, the PS3 is now six years old, and has only 256 MB or RAM, but smartphones those days don’t have much more. I will be interesting to see if Sony updates the browser and at which pace, but at least it is now in a situation where progress is possible.

Html 5 Spring cleaning

HTML5 Logo by World Wide Web Consortium

I have done some spring cleaning on this blog, mostly simplifying stuff by using two nice html5 features: video and ruby. The first fixes a long standing mess in html, the lack of of standard way of putting video clips into web pages. There was a large debate about the codec to use, with Microsoft and Apple pushing for h264, Google pushing for WebM, and Firefox pushing for the OGG format. The dust has not settled on this issue, most video on this site are in h264 format simply because this is the format my mobile phone produced, and the format most mobile phones can render. While the current solution is not perfect, before I had to use a combination of embed and object tags, which was much worse.

I took advantage of the cleanup to fix a few links that were still pointing to the old site’s address, in one case there were still links to the address free.fr, from seven years ago. I also have been playing around with microdata those days, so I added the relevant meta-data to the video, I doubt this will have much of an impact, but I like the idea of embedding meta-data into the html, microdata is not a part of html5, by the way.

Zürich(ˈtsyːrɪç)

The ruby tags are more specialised, and bear no relationship with the ruby programming language. The tag is surprisingly old: it was first suggested in 1996, and implemented as an extension by Internet Explorer 5, the fact that it took 15 years to standardise that tag is quite depressing. Ruby tags allows the writer to add phonetic annotations to some html text. The classical use-case is adding furigana to japanese kanji, but it can basically be used for any kind of annotation, like for instance IPA phonetics. There are basically three tags: ruby which acts as a container, rt which contains the annotation, and rp which wraps the fallback code when ruby is not supported, that tag typically contains parenthesises. The source for the text in the box will look like this: <ruby>Zürich<rp>(</rp><rt>ˈtsyːrɪç</rt><rp>)</rp></ruby>

I have not back-converted all my existing content, the css tricks work, and it would be a lot of work, but I will use the standard tags from now-on.