CSS3 : Alternative au Flex Book de Ruben

 Article modifié dernièrement le 30 Mai 2015 @ 19 h 36 min

Toujours dans le but de prouver qu’il est tout à fait possible de se passer de la technologie Flash, cet article devrait intéresser tous les littéraires qui passent par ici car il s’agit de programmer un livre virtuel pouvant être feuilleter à la souris.

© http://flashspeaksactionscript.com

© http://flashspeaksactionscript.com

Flash

Il faut bien l’avouer, la référence dans ce genre d’outil reste le composant Flex crée par Ruben Swieringa, distribué sous licence Creative Commons, qui est tout à fait bluffant.

Je l’ai moi même utilisé pour faire l’ancien site web du roman de Greg, Poesie, qui n’est malheureusement plus en ligne. Le code source de ce composant est simple à mettre en place et à paramétrer, le squelette du livre virtuel est le suivant :

Une démo s’impose en cliquant sur le lien suivant : Flex Book Component (beta).

Le livre généré est vraiment beau, on croirait tourner réellement les pages d’un livre, j’ai été bluffé lorsque je suis tombé dessus la première fois, toutefois j’émets quelques réserves quant à son optimisation car il exige de nombreuses ressources matériel pour le faire tourner et votre navigateur consommera de plus en plus de mémoire au fur et à mesure que vous tournerez les pages du livre.

Un autre site propose son « pageflip engine » opensource qui mérite le détour (je ne l’ai pas testé personnellement) : http://www.megazine3.de/

CSS3

Les nouvelles spécifications de CSS3 nous permettent de développer à présent des interfaces riches sans l’aide d’un quelconque plugin ou framework et sans JavaScript.

Les notions telles « animation », « ombrage », « transparence », « arrondi », « dégradé » ou « effet » seront désormais envisageable nativement sur tous les navigateurs récents qui implémente cette nouvelle spécification. Tout cela donne des idées et donne surtout envie d’utiliser ce nouveau potentiel sur nos navigateurs.

  • Avec effet « page flip »

L’effet de « pageflip », ou enroulement des pages, pour passer d’une page à l’autre à la souris a déjà été pensé et réalisé par Román Cortés, en voici la démonstration sur son site.

A mon avis il manque peu de chose et certainement un peu de JavaScript pour qu’un livre virtuel naisse de ce code car le principal effet du livre est là.

© http://www.romancortes.com

© http://www.romancortes.com

  • Sans effet « page flip »

Crée par Peter Craddock, ce livre virtuel est moins joli mais reste une alternative tout aussi intéressante. L’apparence du livre est réalisé en pur CSS sans image tandis que le comportement des pages est fait en JavaScript.

Le livre est statique (pages et coins), seul le contenu bouge et transite d’une page à un autre, simple mais efficace, en voici la démonstration.

Conclusion

On est encore loin de rivaliser avec Flash pour le moment en faisant du CSS et JavaScript mais je pense sincèrement qu’il y aura moyen d’égaler le composant de Ruben dans quelque temps.

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 19 juillet 2010, 9 09

    D’une manière générale, je pense qu’il faut encourager les technologies susceptibles d’être diffusées au plus grand nombre

  • Mimie 19 juillet 2010, 19 07

    +1

  • meduz' 20 juillet 2010, 19 07

    Aussi surprenant que cela puisse paraître, j’ai à plusieurs reprises lu qu’il était possible de faire du Flash accessible. J’y connais rien en Flash, mais des prospections pour vérifier ces dires seraient intéressantes à faire.

  • Greg 20 juillet 2010, 19 07

    En ce qui me concerne, mon commentaire était dirigé sur le fait que Flash est une technologie propriétaire (privée) contrairement à Java, pour le reste, plus technique, ce n’est pas mon domaine mais plutôt celui de Mimie.

  • Mimie 20 juillet 2010, 19 07

    @meduz’ : Tu as raison générer du Flash reste relativement accessible en utilisant le framework Flex d’Adobe et les langages MXML et ActionScript, encore faut-il avoir quelques notions en programmation tout de même. Cependant ce n’est pas le problème souligné dans l’article, l’idée est de trouver des alternatives valables à la technologie Flash, qui s’est imposé les années passées.

  • meduz' 20 juillet 2010, 22 10

    Yep, et en ce sens, c’est vrai que l’AJAX s’est fait une belle place ! Reste à voir si le HTML5 ne risque pas de partir un peu dans tous les sens. La spec’ est encore jeune.

  • Mimie 29 juillet 2010, 15 03

    AJAX n’est pas vraiment une technologie mais une utilisation conjointe de plusieurs technologies existantes : HTML, CSS, JavaScript (et DOM) et XML, mais je comprends ce que tu veux dire.
    HTML5 + CSS3 + JavaScript + WebGL sont ou seront des alternatives sérieuses 🙂

  • Peter Craddock 7 août 2010, 9 09

    Merci pour cette mention du « CSS3 Book ».

    J’aimerais mentionner que la fonctionnalité « livre » que j’ai créée peut s’appliquer à n’importe quel design.
    J’ai appliqué la fonctionnalité à quelques autres designs, en plus du design sans images:
    une tablette (site live)
    un vieux livre (c’est une démo, avec une animation différente)
    Je travaille sur un design « farde », aussi, où j’essaierai de rendre l’animation plus réaliste.

    C’est peut-être moins facile à mettre en place que le Flex Book, mais vu que la fonctionnalité est entièrement modifiable, étant du Javascript et du CSS(3), c’est à mon sens plus « ouvert ».

  • Mimie 7 août 2010, 10 10

    @Peter Craddock : tout à fait d’accord avec toi sur la flexibilité qu’apporte HTML/CSS/JavaScript, ta démo « vieux livre » est vraiment sympa. Peut être faudrait-il inclure dans ton code l’effet pageflip de Roman Cortez pour en faire un véritable livre virtuel à la flex book 🙂
    Bonne continuation, n’hésite pas à poster le lien de ta future démo ^^

  • Greg 7 août 2010, 10 10

    En effet l’effet vieux livre est sympa, manque plus que la possibilité de tourner les pages à la souris… ou mieux : à la main sur un écran tactile 🙂

  • Peter Craddock 7 août 2010, 10 10

    Ca, c’est encore autre chose 😉

    Ceci étant, j’ai créé un petit fichier Javascript qui me permet d’utiliser les mouvements « swipe » sur iBidules et sur les trackpads multi-touch, mais je n’avais pas réussi à le rendre assez strict que pour compter chaque « swipe » comme uniquement un mouvement et pas plusieurs (ce qui faisait qu’en fonction de l’intensité du swipe, on passait une ou 3 pages en un coup).
    Je vais tenter de créer un vrai « page flip », et puis je tenterai d’améliorer l’effet multi-touch, et on aura peut-être un petit livre virtuel plus sympa.

  • Mimie 7 août 2010, 11 11

    @Peter Craddock : j’ai hâte de voir ça ^^

  • Peter Craddock 8 août 2010, 10 10

    Alors, ce vieux livre, il est mieux maintenant? 😉

    Pas encore de multi-touch, mais l’animation semble y être.

  • Mimie 16 juin 2011, 12 12

    Bon bah l’équipe de GoogleChrome nous met tous à l’amende … ils sont fort chez Google ^^ => http://www.20thingsilearned.com/fr-FR, le tout fait en HTML5 et CSS3.

  • Peter Craddock 17 juin 2011, 7 07

    Sauf que malheureusement pour eux, leur système « multi-colonnes » est tout simplement « div1 – colonne de gauche » – « div2 – colonne de droite ». Pas CSS3 sur ce plan… C’est dommage, d’ailleurs.

  • Jim 30 décembre 2011, 10 10

    Pour revenir à Flash, et au commentaire posté par meduz’
    Il est en effet possible de proposer du flash accessible (même si flash n’a plus trop le vent en poupe aujourd’hui).

    Voici un exemple d’une application accessible utilisant le composant de ruben :
    http://publispeak.com/veolia-environnement/recherche-et-innovation-2010/

  • Mimie 27 février 2013, 15 03

    Make a flip book with HTML5 : http://www.turnjs.com/

Article suivant:

Article précédent:

Share This