JavaScript Function doc.Support LQDN banner

My Book ReadR V1.12 – HTML5 / jQuery polished “Page as a Book” reader

In Coding Projects,Molokoloco | 01:08 - 29 Aug 2011

[UPDATE 30/11/11 - Présentation en ligne : http://www.b2bweb.fr/bonus/my-book-readr/]

 

J’ai passé pas mal de temps pour réécrire complétement le code du lecteur de livre en ligne que j’avais publié avant les vacances.

My Book Readr, c’est un code source ouvert qui peut permettre à tout à chacun de publier un long texte sur Internet via une page dédiée à la lecture en ligne.

Voici donc un code tout frais, inspiré des recommendations officielles de la team jQuery.

Je ne suis pas parti dans un code purement orienté object, mais dans un concept qui me parait beaucoup plus souple, et adapté à une forte customisation de tous les paramètres.

Le mieux que vous puissiez faire, c’est jeter un coup d’oeuil sur le fichier JavaScript principal (Cf. lien plus bas…)

 

My Book ReadR V1.12

 

Au menu de cette V1.12 :

  • Mise en page simple, claire et typographique, compatible HTML5
  • Création d’un sommaire automatique, à partir des balises de titres (Ex. <H4>) du texte
  • Le texte est redimensionnale en largeur (Poignée à droite dans la marge) et en taille de police (CSS basé sur les .em)
  • Gestion du défilement vertical de la page, pour ne pas se perdre dans le texte
    • Un indicateur sur le paragraphe en cours de lecture pour stabiliser visuellement le défilement vertical (Repère)
    • Assouplissement du défillement par défaut de la molette, comportement progressif suivant la vitesse
    • Le défilement des chapitres est indiqué dans le sommaire, fixe à l’écran
    • Vignettes dynamiques indiquant le nombre “d’écrans” de la page (Nombre variant suivant l’affichage) et la position verticale actuelle
    • Le fond de page est cliquable et peut glisser de haut en bas
    • Flèches Haut/Bas pour défiler de page en page : Flèches Droite/Gauche pour défiler doucement
    • Fonction de lecture automatique (La touche “Entrée” active un défilement vertical continu réglable)
  • Commentaires dynamiques
    • Chaque paragraphe accueil un mini-forum Disqus. API gratuite, qui accepte plusieurs type d’identification (Open ID, Facebook, Google, Twitter, Disqus, etc))
    • Possiblité de commenter le texte en utilisant les petites bulles sur la gauche
    • Sélection du texte pour annoter, copier ou éditer
  • Edition WYSIWYG et HTML du texte, avec téléchargement d’une sauvegarde possible
  • Création de notes à partir d’extraits de texte et sauvegarde au format .txt
  • Défaut : Testé uniquement sous Firefox 6 et Chrome 14… (mais avec un code normalement générique !)

 

Utilisation du clavier
  • Espace” ou “Entrée” : Lecture automatique
    • Touches 1,2,3,…,9 pour régler la vitesse (5, valeur par défaut)
  • Flèches “Haut” et “Bas” : Défilement de la page
    • Flèches “Gauche” et “Droite” : Défilement doux
  • +” et “-ou “Ctrl” + “Molette de la souris : Ajustement de la taille du texte
  • … et “F11” pour le plein écran !

 

Exemple de code, créé pour l’application…

 

 

My Book ReadR V1.12 – Polished HTML5/CSS3 and jQuery powered “read-a-book” page

This start from the idea to design a page specially engineered to read a long book on the web…

RESSOURCES :

 

[Appel] Ce projet manque de contributeurs sur GitHub !!!

Il reste quelques pétouilles à corriger (évidemment… ;), deux ou trois TODOs dans les commentaires, et surtout, prendre un peu de temps pour le faire tourner sur les i-machins et autres Droids…