Opera : vers un Web en forme de livre

Anthony Nelzin-Santos |
Håkon Wium Lie, créateur du standard CSS et directeur technique d'Opera Software, appelle à faire évoluer une nouvelle fois la manière dont les pages Web sont mises en page. Après avoir créé les feuilles de styles, il veut faire disparaître le défilement, qui donne au Web l'apparence d'un rouleau géant : « il y a environ 2 000 ans, les gens utilisaient des volumen. C'était comme ça qu'ils enregistraient l'information. Les Romains ont mis les volumen en pièces, et relié les pages ensemble pour former des codex. Les livres sont tellement plus faciles à utiliser que les rouleaux. » On l'aura compris : Lie pense que les pages Web devraient évoluer vers une forme proche du livre électronique.

Opera%20Reader%3A%20Paging%20the%20Web

À cet effet, il a proposé une extension au standard CSS, CSS Generated Content for Paged Media (CSS3 GCPM), qui permet d'afficher les pages Web sous forme de… pages, mais de pages d'un livre, que l'on peut feuilleter. Le problème, selon Lie, est que la métaphore du défilement infini, empruntée aux logiciels de bureautique, ne serait pas adaptée au Web : le contenu est coupé de manière arbitraire par la fenêtre, et celui-ci est le plus souvent mis en forme de manière verticale, alors que les navigateurs peuvent très bien déplacer le contenu de manière horizontale. Son idée est donc de fournir un jeu d'outils permettant de construire un site Web avec une pagination similaire à celle d'un livre électronique.



Opera fournit plusieurs exemples, comme celui d'un journal, qui adopterait cette disposition. Sur un navigateur non compatible, la navigation est traditionnelle : le système se dégrade de manière acceptable. Avec la dernière build d'Opera 12, le site prend l'apparence d'un journal électronique dont on tourne les pages — même les publicités prennent l'apparence d'une pleine page, au fil de la lecture. On se rapproche du modèle du livre électronique, tendance Kindle, ou de l'application, tendance iPad. Lie a proposé que Generated Content for Paged Media soit intégré au standard CSS3, de manière à faciliter son adoption par les navigateurs, et donc par les créateurs de sites.
Tags
avatar Moonwalker | 
A voir.
avatar Tonton Nestor | 
Ce serait une bonne chose pour nos tablettes et ça permettrait aux concepteurs de sites de mettre les sites en page comme des magazines. De même, pour nos grands écran d'ordi cela permettrait d'avoir une mise en page plus travaillée que celle d'un simple rouleau infini. J'aimerais bien pouvoir consulter Wikipedia comme une encyclopédie papier en cherchant l'info du regard plutôt qu'en jouant avec ma molette.
avatar Giru | 
L'idée est bonne, mais en pratique ça risque d'être un casse tête incroyable... On en revient aux pages avec une hauteur définie, ce qui est un souvent un gros problème.
avatar gadom | 
Je suis déjà "tombé" sur un site fait en wordpress mais dans cette optique. Assez déroutant. Même dérangeant.
avatar iPadOne | 
pas con du tout comme idée , un peu comme flipboard … le web de demain devrais être sympa si des créateurs se penchent un peu sur les vielles base
avatar JR | 
Ou comment passer du scroll vertical au scroll horizontal. Wouah quel changement.
avatar Rigat0n | 
Pas con.
avatar chronos790 | 
Les pages d'un livre sont limitées à leur surface. Ce qui n'est pas le cas d'un ordinateur qui, comme indiqué, est un espace virtuellement infini. Ce que ce monsieur propose c'est de ne pas pleinement exploiter les capacitées d'affichage d'un ordinateur pour se limiter à la présentation d'un livre. A t'il compris qu'un "format" différent demande une approche différente ? "Unifier" la présentation d'un livre avec celle d'un site web c'est un peu faire un pas en arrière. Cela ne prends pas en compte les spécifications inhérentes à chaque support (avantages comme inconvénient).
avatar laurange | 
Moi je lui dis : banco ! mais faut vendre la caravane ... Ce mec doit avoir un mac avec un magic trackpad et un ipad pour avoir eu cette idée ... J'aime beaucoup, surtout en mode portrait, je consulte de plus en plus de sites avec Flipboard comme ça déjà, pas beaucoup de scroll, juste des pages à tourner et du zoom
avatar Mark Twang | 
Bof bof... Le volumen était encombrant... Pour le stockage. Le défilement peut être très avantageux pour le listage, surtout quand on sait bien utiliser les outils de recherche dans une page. A mon avis, il faut savoir utiliser les modèles du volumen et du codex à bon escient.
avatar zearnal | 
C'est valable sur du tactile, mais avec une souris, c'est pas plus pratique la molette verticale ?
avatar Ielvin | 
Ça me rappelle un peu safari sous Lion..
avatar Vanton | 
Je trouve la métaphore mal choisie ... Effectivement il est bien plus simple de se repérer dans un livre que dans un rouleau. Il y a des pages numérotées entre lesquelles on peut rapidement faire des déplacements. Un rouleau n'a pas cette souplesse, il faut le dérouler longuement pour avoir accès à l'information qu'on recherche. C'est finalement la même chose qu'une cassette audio et un cd. Ah la saveur du rembobinage ... ! Sauf qu'on parle là d'objets physiques ! Si la manipulation d'un livre est plus simple dans le monde réel, je trouve que sur un ordinateur elle est très fastidieuse. Entre afficher successivement 12 pages et faire défiler un texte, je vote sans conteste pour la seconde solution qui est bien plus fluide !
avatar sinbad21 | 
Comme dit précédemment c'est un vrai casse tête compte tenu de la diversité des supports. Entre une tablette en 1024*768 et un écran 30 pouces il y a de la marge, ce serait géré comment ? La mise en page ne peut pas être la même !
avatar Clébert | 
Mouais... ça peut fonctionner dans certains cas. Mais comme dit plus haut la résolution des écrans, la taille des fenêtres, les préférences de chacun ne sont absolument pas compatibles avec un tel système. Quid de l'accessibilité? Simplement le fait de grossir le corps du texte et donc de grossir la surface d'affichage? Avant on avait les rouleaux... maintenant on a les lien hypertextes... et les systèmes en ajax qui permettent d'appeler le contenu, sans devoir aller vers lui, bien plus pratiques que de défiler 50000 pixels plus bas ou d'aller à la page 157 avec le bouton next...
avatar YannK | 
@chronos790 Pourquoi un pas en arrière ? Je trouve, au contraire, que c'est une proposition à étudier dans le sens où aujourd'hui, il y a effectivement une notion de "non visible" et que nous sommes grave en train de tourner en rond niveau interface avec un canvas type "2 / 3 columns layout" (qu'on nous ressert à chaque fois dans les blogs par exemple). Au final, ça peut très vite devenir bordélique et les web-designers se cassent la tête pour faire différemment. Mais le résultat, c'est que tu as des millions de sites où les pages sont cernées de choses et d'autres (appelons-les Widgets) qui empiètent sur l'espace contenu, d'autres choses qui détournent l'attention, des choses qu'on ne voit pas (et on passe donc à côté si on ne plisse pas des yeux), etc. Au contraire, je trouve l'approche intéressante dans le sens où on pourrait imaginer quelque chose du genre : - organisation par catégories - contenu avec vraie prévisualisation (au lieu d'avoir simplement le titre avec ou sans photo ou carrément une page de 10 articles complets (!!!) où on en finit pas de scroller) - tout ce qui est accessoire (RSS-contact-etc. que les gens ne savent jamais où mettre) dans une page spéciale. - des articles/dossiers facilement organisés par pages pas trop longues avec vraie mise en avant des photos (si c'est le but) sans avoir à subir tout l'accessoire autour (widgets) - aérer - etc. Ce que certains font déjà, en réalité, sur des bases existantes genre CMS ou HTML5 (pour ne pas les citer). Quant au problème de résolution et taille d'écran, c'est à mon sens un faux problème dans le sens où nombre de sites ont une largeur max pour justement être lisibles par tous… on optimise à minima. Et là, on pourrait très bien imaginer un "CSS" intelligent qui adapte le flux de contenu à la taille de l'écran (comme EPUB le fait d'ores et déjà pour le livre numérique… en quelque sorte vu qu'il est possible de choisir la taille du texte).
avatar misc | 
Alors pas du tout d'accord ici, le scroll est un avantage du numérique. Devoir scinder l'info par page serai vraiment regrettable à mon avis.
avatar chronos790 | 
@YannK Par pas en arrière, j'entends que vouloir reproduire l'affichage d'un livre en guise de présentation web est ne pas prendre en compte ce qu'apporte le support informatique (lien hypertexte, recherche automatique, onglet, souris, molette,etc ...). Les possibilitées de présentation d'un site web sont infiniment plus vaste et large que celle d'un livre. Tous les exemples que tu prends pour l'affichage 'comme tu le dis toi même) sont actuellement faisables avec des menus déroulants, onglets ou autre. L'ergonomie c'est une chose qui s'apprend. Avec le temps et l'expérience, on va au plus simple et au plus lisible. On fait en sorte que l'information soit accessible de la façon la plus "direct" possible. Ce n'est pas une présentation type livre qui y changera quoi que ce soit.
avatar Jeckill13 | 
L'idée en soit n'est pas mal mais sa mise en pratique ardue, un livre lui a une taille constante alors qu'une page web à la taille de l'écran de l'utilisateur, et ça va du 11 pouce jusqu'au 27 pouce et c'est sans parler des résolutions d'affichage quand on fait un site faut trouver un compromis entre une taille qui va sur à peut près tout qui conviendra à plus ou moins toutes les résolution et tous les navigateurs, en faite surtout notre cher IE qui existe encore en version 6 sur beaucoup de Pc
avatar Moonwalker | 
Le scroll serait en quelque sorte horizontal. Rien de très différent par rapport à un scroll verticale s'il est fluide et qu'on ne charge pas une page à chaque fois. Comme relevé plus haut, il s'agit d'une approche très en phase avec les outils Apple (MagicMouse, Magic Trackpad, Trackpad multi-touch, iPad) ou des tablettes iPad-like. Quid des autres ?
avatar plezo | 
je ne vois pas ça comme un scroll H au lieu de V mais comme un contenu structuré par page avec une taille constante. le numérique apporte l'hypertexte et le fait de pouvoir aller à la page 584 en un instant, et la recherche en texte intégral le scroll n'est pas une avancée du numérique mais un retour en arrière au mode rouleau ;-) et puis pour sortir le doc sur papier avec les images coupées en deux le scroll c trop bien ! l'idée est de mettre en page, le rouleau permet de mettre à la suite tant qu'on peut c plus b... bonne idée donc phil
avatar frylone | 
Au vue de l'article çà à l'air intéressant mais au vue de la vidéo y'à rien de révolutionnaire (alors qu'il parle des volumen, Romains, etc,) puisque qu'il ne fait que changer le sens de défilement qui est vertical aujourd'hui en sens horizontal. C'est à dire qu'au lieu de balader la souris de haut en bas, on la baladera de la droite vers la gauche. Ouaouh, quelle révolution!
avatar oomu | 
Bof. Pas plus qu'autre chose.
avatar oomu | 
Le web est un média spécifique. L'écran informatique n'est pas du papier. Il a son propre espace, ses propres avantages et contraintes.
avatar Kringe | 
Quand je vois les merdes de design faites en ce moment sur le web (et par de grosses boîtes aussi). Je me dit qu'ils ont déjà beaucoup de travail sur la planche. Mais bon pourquoi pas si c'est bien fait... Il me semble plus simple de loader uniquement une qualité de contenu raisonnable à la fois pour quand on se retrouve sur un site qui fait un roman alors que ce n'était pas vraiment ce que l'on recherchais
avatar Ambobo25000 | 
Le gros souci, c'est que l'on tiens trop à notre médium livre et à sa sainte linéarité. Le scroll n'est que la métaphore du fil de la reliure d'une livre ou de l'enroulement du volumen. Le web et plus particulièrement l'hypertexte introduit ou réintroduit la notion de saut ou de digression dans l'écrit. On écrit à nouveau de la même manière que l'on pense : par fragment. Pour moi toutes les tentatives pour numériser le livre sont vaines. Il faut repenser la manière d'écrire sur le net. Ce n'est plus seulement un affaire de layout. Mais de design global, penser de la manière dont la pensée s'articule jusqu'à sa présentation. Et il y a des technologies formidables pour expérimenter cela comme Ajax qui permet de charger du contenu en parallèle à la consultation. Le contenu se construit en même temps qu'on le consulte et ça casse déjà d'avec l'écrit traditionnel qu'il s'agisse de codex ou de volumen. Il faut voir plus loin que la simple métaphore du livre. Car rien ne remplace un Vrai livre, le web est la pour offrir une autre expérience ! Il reste à l'inventer.
avatar GerFaut | 
@ YannK : OK avec ton analyse. Ce n'est pas parce que la lecture informatique se fait sur le mode du rouleau (volumen) que forcément c'est la meilleure. À preuve qu'elle est superficielle, parcellaire et fatigante. Nombre d'études ont bien démontré que les lecteurs lisent mal (ou pas du tout) de cette façon. Cette organisation est adaptée à un outil. La lecture sous forme de pages de livres (codex) est mieux adaptée à la concentration de l'attention puisqu'elle est découpée en pavés (pages) et chapitres organisés qui la maintiennent, autorise un repos lors de la tourne de chaque page, la possibilité d'une recherche mieux conçue puisqu'organisée par rapport à un ensemble construit (ce que ne permettent pas nombre de sites bordéliques à l'arborescence plus que douteuse), la vision globale et rapide d'une mise en scène du contenu. Cette organisation est adapté à l'humain. De plus, le système du livre adapté à l'informatique n'empêche nullement les annotations (popup), les liens hypertexte d'un paragraphe à un autre et autres spécificités numériques (genre son, video, etc.), la recherche, le design et facilite une mise en page d'un « objet-livre » en soi (couverture, index, chapitres, etc.), même s'il est virtuel. Il est à remarquer que beaucoup de sites internet se présentent sous la forme d'une page de couverture d'un livre (accueil) puis se délitent ensuite dans une accumulation de rouleaux sans fin et sans organisation, rendant la lecture fastidieuse et lassante. Accessoirement, si le système du rouleau a été abandonné au profit du livre, ce n'est pas par hasard (organisation de l'opus mieux concevable, recherche, rangement, classement, etc.). J'utilise de plus en plus cette solution pour mes sites internet.
avatar Oracle | 
Eh bin, ça promet. Déjà que sur la moitié des sites il n'est pas possible d'imprimer proprement du contenu sans passer par une sélection à la souris, sous peine de se taper des colonnes vides à droite ou à gauche, avec cette merveilleuse invention il ne sera purement et simplement plus possible de faire une sélection pour imprimer intelligemment, et donc faire confiance au concepteur pour la gestion de l'impression ? Régression. Vive le mode lecture de Safari !
avatar GerFaut | 
@ Oracle : le piratage est interdit !

CONNEXION UTILISATEUR