L'inventeur du CSS veut débarrasser le Web des barres de défilements

**Idelways** · 01/11/2011, 14h36

L'inventeur du CSS veut débarrasser le Web des barres de défilements
Jugés archaïques, et présente l’extension CSS3 Opera Reader

Parcourir la majeure partie du Web repose sur le défilement, une situation qui n'enchante pas l'inventeur du langage de présentation CSS, actuel Directeur technique d'Opera Software.

Håkon Wium Lie assimile le défilement aux archaïques parchemins qui ont dès le 5e siècle cédé leur place à une « killer app » appelée à l'époque codex, et aujourd'hui « livre ». Avant de revenir en force avec les navigateurs.

Dans le but de refaire l'histoire, il est l'auteur d'une proposition d'extension de CSS 3, au nom de code « Opera Reader ». Une fois standardisée et implémentée, elle devrait munir les navigateurs de capacité de navigation similaire à celle des e-reader, et représenter une alternative de faible coût à ces derniers.

La proposition intitulée « CSS Generated Content For Paged Media » est déjà hébergée sur le site du W3C et sera discutée dès cette semaine, pour son éventuelle intégration au standard en gestation : CSS 3.

Opera Labs téléchargeable, supporte cette extension pouvant être testée sur un document Web qui la décrit et l'implémente (via le préfixe propriétaire -o-).
Les pages peuvent être tournée à l'aide de la souris, des touches directionnelles du clavier ou les doigts sur les écrans tactiles.

Le code CSS se présente de cette manière, où l'élément <html> doit être contraint à 100% de la hauteur de la fenêtre, et le comportement de navigation est défini par la propriété overflow. Le tout englobé dans une nouvelle Media Querie.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@media -o-paged {
  html { 
    height: 100%;
    overflow: -o-paged-x;
  }
}

Le standard prend en charge la persistance visuelle d'éléments de navigation de la page, la gestion des sauts de page, la présentation multicolonnes, les illustrations flottantes et d'autres enrichissements...

Mais le W3C doit suivre, les éditeurs de navigateurs et les développeurs aussi. Cette initiative nous rappelle en tout cas que le gel de fonctionnalité n'a pas encore eu lieu pour CSS3.

La version formelle de la proposition (site du W3C)

Page de présentation

Source : Opera

Et vous ?

Que pensez-vous de la proposition d'Opera ?

Doit-on remplacer les barres de défilement par la navigation par page ?

**Killing Joke** · 01/11/2011, 15h12

Franchement de mon point de vue, le "paginé", en l'occurrence sur le web, ce serait plutôt une régression.

Certains sites ont des articles paginés : je trouve çà bien plus laborieux que de scroller !
En pagination, il faut des clicks supplémentaires (bouger la souris, repérer le lien, clicker). Attendre le chargement de l'autre page et repasser qqs millisecondes à répérer où reprend la lecture.
Les pages scrollées sont continues : c'est ce qui fait leur force, on a tout d'une traite. Avec les connexions actuelles, çà ne pose aucun souci de charger une "grosse" page de texte + images. Et on a des souris avec molette de défilement partout et des zones de défilement hyper pratiques sur touchpad.

Donc clairement non à cette régression !

**dourouc05** · 01/11/2011, 15h21

Envoyé par Killing Joke

Donc clairement non à cette régression !

Quand tu lis un livre, tu n'attends pas le chargement de la page suivante, tu as déjà le livre dans les mains ; de même, la lecture commence toujours au même endroit, la fin de même, sauf en cas de nouveau chapitre. C'est ce qu'ils semblent vouloir faire : tu charges d'un coup toute la page, avec un passage à la nouvelle page uniquement limité par le navigateur et la puissance de la machine, inutile de faire un rechargement.

Ils n'ont jamais parlé de tant de clics ou de réflexion pour aller à la page suivante, d'ailleurs :

Envoyé par http://people.opera.com/howcome/2011/reader/

In Opera Reader, you are able to control the page browsing via swiping the page in different directions on touch screen devices, using the arrow keys and the PgUp/PgDn keys on a device with a keyboard, and by activating the on-screen control buttons in any way you choose to do so. If you have a mouse, you can also navigate by dragging pages. This means that, in these special builds you cannont select text with the mouse. (If you'd rather select text than navigete, type opera:config in the address bar, and turn off Scroll is Pan.)

**Khleo** · 01/11/2011, 15h28

Je n'ose même pas imaginer un système de pagination sur Twitter ou Facebook ...

**Neko** · 01/11/2011, 15h17

Envoyé par Idelways

Que pensez-vous de la proposition d'Opera ?

Doit-on remplacer les barres de défilement par la navigation par page ?

D'après la version de teste, ils ne font que remplacer un défilement vertical par un défilement horizontal le tout sans barre de défilement donc impossible de voir facilement que du contenu reste à voir en cliquant. De plus, le fait de pouvoir cliquer pour changer de "page" empêche la sélection du texte.
Je vois pas où est l'avancée là-dedans.

**savageman86** · 01/11/2011, 15h29

Envoyé par Neko

D'après la version de teste, ils ne font que remplacer un défilement vertical par un défilement horizontal le tout sans barre de défilement donc impossible de voir facilement que du contenu reste à voir en cliquant. De plus, le fait de pouvoir cliquer pour changer de "page" empêche la sélection du texte.
Je vois pas où est l'avancée là-dedans.

Moi j'aime pas trop mal. Sur mobile ça peut être sympa !

Pour les barre de défilement, j'espère bien qu'elles seront natives en version finale. C'est encore au stade expérimental, ça ne demande qu'à évoluer hein.

Sinon on peut les afficher en JavaScript pour l'instant...
Et la sélection du texte c'est un problème connu, ça n'est pas censé être le cas.

Avec les écrans larges d'aujourd'hui, permettre de faire du colonnage est une bonne chose. La lecture est plus agréable sur colonnes de 400 px que sur une unique colonne de 1900...

**Khleo** · 01/11/2011, 15h19

Si j'ai bien compris, ils préfèrent tourner des pages plutôt qu'utiliser la roulette de leurs souris ?

**kimimo** · 01/11/2011, 15h29

Pareil... Je ne vois pas en quoi ce serait une avancée...
J'attends de voir concrètement sa proposition et surtout l'implémentation qui en sera faite. Mais j'ai peu d'espoirs...

**GuruuMeditation** · 01/11/2011, 15h56

Sur tactiles, je dis pas...mais sur écran PC je suis dubitatif. A moins que les souris aient (comme certaines l'ont déja depuis longtemps) la roulette qui peut-etre déplacée à gauche ou à droite, pour le défilement des pages.

**tomlev** · 01/11/2011, 17h23

A mon avis le mec veut remplacer le défilement par la pagination parce qu'il a pas de molette sur sa souris... alors plutôt que d'acheter une nouvelle souris, il préfère créer un nouveau standard

Perso je suis un peu dubitatif sur ce truc... faudrait voir à l'usage

**Arkal** · 01/11/2011, 19h13

Il y a meme des extensions dans les browsers qui permettent le chargement de plusieurs pages et de "scroller" a travers celles-ci...

**Gecko** · 01/11/2011, 19h36

Faut voir ce que ça donne mais à part l'effet gagdet à la apple je vois rien de novateur.

Encore un AppleFan qui à frappé u_u

**forthx** · 01/11/2011, 20h06

L'analyse de base est un peu étrange et la comparaison livre / parchemin ne me parait pas des plus pertinente. Je m'explique :

Si je veux faire tenir un livre sur un parchemin, ça va être compliqué :

100 pages au format A4 (rapport d’étude, mémoires, petite spec) se transforment en 29.7*100 = 2970 cm arrondis à ...

30m de parchemin (avec les rouleaux^^) si vous avez déjà imprimé sur du papier listing, vous conviendrez du côté novateur du livre et de l'apport. Si on utilise des parchemins de 5 m (de belle taille) ça nous fait 6 parchemins a transporter, c'est plus volumineux et pour les notes et références ça peut devenir compliqué !

Donc oui vive le livre !
Il apporte une autre dimension : les numéros de pages. Cela permet le sommaire, les indexes,... bref un meilleur repérage, et une possibilité de consultation non linéaire.

Pour un roman, le livre apporte peu par rapport au parchemin, tout au plus une belle page de couverture et une pose de marque page probablement plus simple.

Quand je lis un livre technique (C), là ça me change la vie (dans le cas hypothétique ou je travaillais avec des parchemins):
je peux marqué mes pages, me référer a l’index ou la table des matière, mais mieux, je peux rapidement garder des pages en y mettant les doigts, je peux "naviguer" instantanément de la page 10 (index) a la page 72 (qui décrit le printf( char[]) ) en gardant un doigt a la page 42 (qui me présente les tableaux de char) . C'est cette interaction qui est puissante.

Puis vint le html : là je suis sur la page web qui décrit le printf( char[])et j'ai un lien hypertexte vers char qui est sur une autre page, que je peux ouvrir dans une nouvelle fenêtre/onglet/(outils gérés rapidement par le navigateur). J'ai en plus, si le site est bien fait (selon mes critère on s’entend), un menu (généralement sur le côté) qui fait office d'index. Un autre bon exemple réel est la documentation java (mode frame "archaïque").

En considérant des pages "légères" avec les débits qu'on a le fait que l'on peut avoir plusieurs pages ouvertes à la fois, on a alors tous les avantages: on peut diviser les "pages web" en chapitres et naviguer aisément au travers (menu, index, liens,...) avec 3 pages ouvertes sur mon navigateur, j'ai plus d'infos qu’avec 5 doigt coincés dans mon livre.

Attention je parle de desktop ou laptop, pas de téléphone ^^ je ne dis pas qu'il faut des écrans de la taille d'un journal pour être a l'aise, mais sur un écran de 200*320 points on peut pas faire des miracles.

Enfin, rien n’empêche de travailler avec des pages, près chargées qui plus est (avec javascript) . Finalement on pourrait résumer cela par l'ajout du défilement par bloc en changeant l'orientation de la barre de défilement.

Pour moi c'est une fausse révolution (peut être une petite évolution?), basée sur des arguments discutables. Par contre la théorie de la souris sans roulette, hum ... ça expliquerait bien des choses

**spidermario** · 01/11/2011, 20h33

Ses arguments contre le défilement s’appliquent, certes, aux volumina, mais lesquels s’appliquent aux pages Web ?

Même sans pagination, elles permettent de se rendre directement à une certaine section : les ancres, ça ne vous rappelle rien ?

**Elepole** · 02/11/2011, 03h02

Envoyé par Idelways

Que pensez-vous de la proposition d'Opera ?

Sa peut avoir sont utilité. Le premier exemple qui me vient en tête c'est les site de webcomics, mais je suis sur qu'il ne sont pas les seul a pouvoir bénéficier de ca.

Envoyé par Idelways

Doit-on remplacer les barres de défilement par la navigation par page ?

Non, on doit juste utilisé la pagination a bon escient, mais sur beaucoup de truc la défilement est bien plus pratique.

**Twinspirit** · 02/11/2011, 06h49

S'il existe une certaine regle des trois clics pour arriver au contenu désiré, ce n'est pas pour rien. Avec ce système, on l'oublie ? Ce n'est pas du progrès.

Je suis totalement contre l'abolition des barres de défilements.
Par contre, ce style de présentation pourrait être adaptable sur certains contenus (exceptionnellement).

Du coup, on peut aussi utiliser jQuery qui fait ca très bien :
http://vandelaydesign.com/blog/web-d...age-galleries/

Bref, j'aime pas.

**plefebv** · 02/11/2011, 07h28

L' "innovation" se limite à la reprise de ce qui est déjà fait sur les ebooks.
C'est quand même une bonne idée de permettre la pagination car le défilement est trop souvent long et imprécis. Et si c'est plus ergonomique, la fonction finira par s'imposer.

On peut déjà entrevoir des extensions de cette fonction: comme par exemple, le numéro de page dans les coins qui permettent de la tourner, ou une barre de défilement avec les numéros de page, ou la saisie directe du numéro... c'est selon le périphérique, ce sera plus utile sur l'iPhone que sur un PC.

En contrepartie, l'HTML présente une fonctionnalité unique permise par la pagination à la demande, et qui est l'abstraction du périphérique d'affichage, ce qui permet l'affichage quelle que soit la résolution du périphérique utilisateur.
C'est une part notable de son succès.
Or, dans une présentation paginée, particulièrement si elle est obtenue via des styles CSS, il est à craindre qu'on ne revienne à une pagination en format fixe (c'est peut être aussi un objectif que de cannibaliser le PDF).
Ce qui a sa part d'intérêt, mais pas pour tous les besoins.

Ce seront les utilisateurs qui feront le choix. Pour cela, en tant qu'auteur de pages, je ne vais surtout pas leur interdire tel ou tel type de navigation.
Donc soit l'innovation est compatible avec la navigation standard, soit je ne l'utiliserai pas avant qu'elle ne se soit généralisée.

**plefebv** · 02/11/2011, 07h34

Dans la même veine, ce serait sympa de pouvoir visualiser simultanément deux parties d'une même page HTML.

Il suffirait pour cela que le navigateur intègre des barres de division, un peu comme dans Word ou Excel.

**ProgVal** · 02/11/2011, 07h57

Présenter un contenu paginé sur un ordinateur, ça me fait étrangement penser à autre chose... Ah oui ! J'appelle ça un diaporama.

Et c'est déjà possible d'en faire dans un navigateur.
http://slides.html5rocks.com/
http://adamzap.com/random/landslide.html

**Kobee1203** · 02/11/2011, 09h05

Envoyé par ProgVal

Présenter un contenu paginé sur un ordinateur, ça me fait étrangement penser à autre chose... Ah oui ! J'appelle ça un diaporama.

Et c'est déjà possible d'en faire dans un navigateur.
http://slides.html5rocks.com/
http://adamzap.com/random/landslide.html

Bientôt, on va nous faire croire que faire un powerpoint et l'insérer dans une page c'est novateur et c'est mieux que ce qui existe déjà ...