The Bookshelf.

The Bookshelf. Le nom veut tout dire : une bibliothèque. Des livres, des journaux, des carnets, soigneusement alignés sur une étagère. Quel meilleur endroit pour raconter une histoire ? Ou bien des histoires, qui s'entrelacent et se croisent pour en conter une plus grande, plus étrange.

Il y a une île, perdue dans l'Océan Pacifique, loin de toute route maritime. Un îlot de quelques kilomètres carrés, couvert d'une végétation luxuriante sous un climat tropical.

Il y a sept personnes qui, à différentes époques, pour différentes raisons, à différents moments de leurs existences, vont y vivre. Ces livres sont leurs carnets, leurs journaux, qui relatent leur passage, leur vie et leur survie sur cet îlot volcanique. A travers leurs découvertes et leurs expériences, leur combat au jour le jour avec une nature parfois sauvage, leur exploration progressive du territoire, transparait l'histoire de l'ile en elle-même, son évolution sur plus de deux siècles. Sept voix, sept visions, sept manières d'aborder la vie sur l'îlot, et c'est à travers ces textes que le lecteur devra se forger sa propre image de l'île.

Ce projet ne pourra que rappeler à ceux qui me connaissent le concept de Kosua et du Club de Milan, une vaste fresque multi-supports qui tente de brouiller les frontières entre fiction et réalité en présentant des documents de toutes natures, images, vidéos, textes, sites, qui racontent l'histoire de la découverte des ruines d'une antique civilisation disparue dans les entrailles de la Terre... (plus d'infos).

Mais le choix de l'île comme décor confère une autre orientation et une autre portée à ce projet.

L'île est à la fois source de merveilles, abritant trésors cachés et ruines enfouies, anciennes épaves échouées et mille autres lieux à explorer, mais aussi rassurante : son périmètre est fini, la côte délimite une zone réduite, fermée. Contrairement à Kosua, où le choix d'une immense grotte souterraine permet au projet de s'étendre encore et toujours au fil des ans, l'île, finie, enclôt ce nouveau projet, en fixe dès le départ les limites. Mais ce choix n'est pas pour autant un frein. Les histoires des incroyables aventures qui peuvent se dérouler sur un îlot perdu au milieu de l'océan ont marqués mon enfance. De _l'Île au trésor_ à_ l'Île mystérieuse_ en passant par _Robinson Crusoé_ et _Vendredi ou la vie sauvage_, les exemples sont légions et me fascinaient. Survivre, en se débrouillant pour reconstruire progressivement un semblant de technique et de civilisation, et découvrir un monde nouveau, partir en exploration à l'aveuglette. Mais aussi d'autres histoires plus atypiques, comme celle du Kon-Tiki et des hommes qui en 1947 traversèrent le Pacifique sur ce radeau.

La forme, la bibliothèque, trouve sa source dans d'autres influences. Les aventures de l'oncle Ernest, qui rejoignent aussi cette atmosphère d'aventure et d'exploration, ont bercé mes premiers pas dans l'univers des jeux d'ordinateurs, en présentant de fabuleux carnets de voyage remplis de croquis, d'objets et de photos. Il y avait aussi les magnifiques albums de l'Atlas des Géographes d'Orbae, par François Place, où chaque lettre de l'alphabet correspondait à une contrée, décrite à travers des aquarelles, des croquis, des histoires et des contes, exotiques et fleurant bon l'aventure. Et toujours, la fascination des livres qui peuvent créer des mondes, les décrire, à l'image des ages de la série Myst.

Pour l'aspect technique, retour au web pour cette création. L'interface est une page formatée en HTML et CSS, et le placement des livres les uns à la suite des autres sur l'étagère est quasi-automatique. Le fond contient l'étagère, le titre, et toutes les ombres figées ; il était plus simple de les gérer ainsi plutôt que d'utiliser l'attribut shadow du CSS3, moins souple. Les livres viennent donc se superposer à leur ombre, ce qui peut être moins esthétique durant le chargement, mais la petitesse des images doit cependant permettre d'éviter des délais d'affichage trop long. Chaque tranche de livre sert de lien vers la galerie de pages correspondante, gérée avec jQuery et le plugin FancyBox. Ce dernier pouvant charger non seulement des images mais aussi des pages html (des frames), la question s'est posée de savoir sous quelle forme il valait mieux charger les pages des carnets.

Trois façons de réaliser ceci pouvaient être envisagées : soit l'affichage simple d'une image, soit l'affichage d'une image de fond, d'un texte (sous forme selectionnable) et de croquis placées en CSS, soit enfin la superposition d'une image de fond et d'une image calque contenant texte et images sur fond transparent. La première solution était la plus simple, mais aussi la plus volumineuse, chaque page étant alors un fichier png d'un demi méga-octet, ce qui alourdissait la quantité totale de données à télécharger pour l'utilisateur. La seconde solution a été éliminée rapidement parce qu'elle impliquait un formatage important pour placer correctement chaque image, et qu'il fallait charger avec le site les polices manuscrites non-standardes correspondant à chaque personnage. La dernière solution est celle qui a été finalement adoptée : le fond, spécifique à chaque livre, n'est téléchargé qu'une seule fois, et le contenu est affiché par-dessus, stocké pour chaque page dans un fichier png très léger. Le gain de place par rapport à la première méthode est d'environ 65%, ce qui est non négligeable.

Enfin, en bonus, une petite fonction javascript permet de noter le dernier livre et la dernière page visitée par l'utilisateur, ce qui ne s'est pas fait sans peines, puisqu'il a fallu greffer ce script sur l'extension FancyBox afin de tenir compte des changements de pages (qui sinon étaient invisibles pour le détecteur onclick, par exemple). Ces données sont stockées grâce à l'extension localStorage issue des spécifications HTML5, et appelées lors du rechargement ou de la réouverture de la page, permettant ainsi de rappeler au lecteur l'endroit où il s'était arrêté la fois précédente. Un petit gadget plus qu'autre chose, mais qui m'a permis de découvrir ce système de stockage local. Plus d'infos... plus tard ! :)