jQuery.ReadR.JS

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

"Designing a page done specially to read a long text on the web..."

GPL/MIT/Copyleft - @molokoloco 2011 - http://b2bweb.fr

A l'origine du de ReadR.js...

Un PDF...

A l'origine du de ReadR.js...

Une application...

A l'origine de ReadR.js...

Inspiration...

Paul Da Silva a écrit un livre « Piratons la démocratie », distribué au format .PDF, il était difficile (!!!) à lire à l'écran

Comment publier un long texte sur Internet ?
Une page réellement dédiée à la lecture en ligne ?

Parcourir la majeure partie du Web repose sur le défilement,
est-il raisonnable de faire une page HTML contenant un très long texte ?

Mon avis : Les navigateurs sont des bêtes de course !
Selon http://ace.ajax.org : il est possible de travailler avec des documents de plus de 100,000 lignes

Les idées...

Principes de base

Mise en page simple, claire et typographique, compatible HTML5
Création d'un sommaire, à partir des balises de titres (Ex. <H4>) du texte
Le texte est redimensionnable en largeur (Poignée à droite dans la marge) et en taille de police (CSS basé sur les .em)

Les idées...

Principes intéractifs

Commentaires dynamiques, chaque paragraphe accueil un mini-forum Disqus. (API gratuite, qui accepte plusieurs type d'identification : Open ID, Facebook, Google, Twitter, Disqus, etc)
Sélection du texte pour annoter, copier ou éditer, sauvegarde au format .txt
Édition WYSIWYG et HTML du texte, avec téléchargement d'une sauvegarde possible

Simplicité...

La lecture...

Contextuels...

Les outils au services de la lecture

Le menu (JS)

Ne pas se perdre dans le texte

Le défilement vertical de la page

Un indicateur sur le paragraphe en cours de lecture pour stabiliser visuellement le défilement vertical (Repère)
Assouplissement du défilement par défaut de la molette, comportement progressif suivant la vitesse et le nombre de "mousewheel"
Le chapitre en cours est indiqué dans le sommaire, fixe à l'écran
Vignettes dynamiques indiquant le nombre "d'écrans" de la page (Nombre variant suivant l'affichage)
Le fond de page est cliquable et peut glisser de haut en bas (Défilement précis)
Flèches Haut/Bas pour défiler de d'écran en écran : flèches Droite/Gauche pour défiler plus doucement
Fonction de lecture automatique (La touche "Entrée" active un défilement vertical continu réglable)
L'URL de la page est mise à jour (#hash) de manière synchronisée

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 écran par écran, 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 !

Résumé

Qualités typographiques de base
Repères visuels et textuel
Outils contextuels et configurables
Intéractivité

Autre (très) bonne idée

Flexible Nav jQuery library

"Flexible Nav is a small jQuery library which add a smart navigation bar with nav links distributed proportionally to the page sections It improves a web page navigation and helps to visualize different sections of a document"
https://github.com/gre/flexible-nav (Gaetan Renaudeau)

Parenthèse : Opera Reader ?

Håkon Wium Lie (inventeur du CSS) voudrait débarrasser le Web des barres de défilements qu'il juges archaïques. Il présente l’extension CSS3 Opera Reader, dans l'esprit des E-reader

@media -o-paged {
    html { 
        height   : 100%;
        overflow : -o-paged-x;
    }
}

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 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...

ReadR.js : Les ressources et dépendances

Frameworks

With jQuery and jQueryUI (you know) from http://jquery.com
BoilerPlate HTML5 starter pack : https://github.com/paulirish/html5-boilerplate
TinyMCE, JS WYSIWYG HTML editor (jQuery version) : http://tinymce.moxiecode.com

Plugins

jQuery Waypoints v1.1 : https://github.com/imakewebthings/jquery-waypoints/
jQuery Mousewheel : http://adomas.org/javascript-mouse-wheel/
Copy to clipboard with ZeroClipboard.swf : http://www.steamdev.com/zclip/

Social APIs

DISCUS comment system API : http://docs.disqus.com/developers/universal/
Google Plus API : https://code.google.com/intl/fr/apis/+1button/
Twitter API : https://twitter.com/about/resources/tweetbutton
Facebook API : https://developers.facebook.com/docs/reference/plugins/like/

Others

Use Google Fonts API : http://www.google.com/webfonts/v2

Les problèmes...

Le scroll.. : 'html, body' for setter... window for getter... (window.scrollBy(0,0) is native also)
Le mousewheel, le CTR + mousewheel dans Chrome (problème pour détecter le zoom)
Events-o-drome ! : Il faut mettre des setTimeout() pour ralentir les événements...

$window
    .bind('scroll.'+name, scrollling)
    .bind('resize.'+name, resizing)
    .bind('mousewheel.'+name, wheeling);

$document
    .bind('keydown.'+name, pageKey)
    .bind('keyup.'+name, pageUnKey)
    .bind('mousedown.'+name, mouseIsDown)
    .bind('mouseup.'+name+' click.'+name, mouseIsUp)
    .focus(); // Bing !

$container
    .delegate(titlesChapter,     'waypoint.reached',    chapterWaypointReached)
    .delegate(articlePrgh,       'waypoint.reached',    prghWaypointReached)
    .delegate(articlePrgh,       'mouseenter.'+name,    prghMouseenter)
    .delegate(articlePrgh,       'mouseleave.'+name,    prghMouseleave)
    .delegate('span.comment a',  'click.'+name,         commentClick);

Facile : Parser le texte pour construire un menu

var titles = '';
$container
    .find('h1,h2,h3,h4')
    .each(function(i) {
        titles += '<li style="padding-left:'+((parseInt(this.nodeName[1], 10)-1)*3)+'px;"><a href="#chapter_'+(i+1)+'" data-id="'+i+'">'+$(this).text()+'</a></li>';
    })
    .waypoint({offset:'10%'});
$(titles).appendTo($summaryUl);

Facile : Inclure Disqus pour chaque paragraphe

if (disqusEnabled) {
    $articlePrgh.each(function(i) {
        // href : page.html?pirate=78#disqus_thread // Create fake identifier, force Discus beliving that it's a new page
        $(this).append('<span class="comment"><a href="'+disqus_url+'?pirate='+i+disqus_thread+'" data-disqus-identifier="pirate='+i+'" id="pirate_'+i+'" title="Commenter le texte (P#'+i+')">-</a></span>');
    });
}

Admin des commentaires via Discus

Presque facile : Créer un viewport viewer

Exemple : http://jsfiddle.net/molokoloco/Atj8Z/

Limitations

Readr.js n'est pas un "plugin" jQuery : trop de dépendances avec le HTML, le CSS et d'autres plugins jQuery : C'est un mini-framework. (Livré avec un example ou un simple texte HTML4/5 est a remplacer

Défauts :

Testé uniquement sous Firefox 6/7 et Chrome 14/16 PC... (mais avec un code normalement générique !)
Pas de CSS trop poussé : On ne peut pas mettre de "text-shadow" ou de "border-radius", etc... sans perdre en performances
...

Le projet

jQuery.viewport.js : Window viewport "screen to thumbs" scrolling navigator
http://jsfiddle.net/molokoloco/Atj8Z/

[Appel] Vous pouvez aider ce projet sur GitHub !!! Il reste quelques bugs à 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…...

jQuery.ReadR.JS

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

"Designing a page done specially to read a long text on the web..."

A l'origine du de ReadR.js...

Un PDF...

A l'origine du de ReadR.js...

Une application...

A l'origine de ReadR.js...

Inspiration...

Les idées...

Principes de base

Les idées...

Principes intéractifs

Simplicité...

La lecture...

Contextuels...

Les outils au services de la lecture

Le menu (JS)

Ne pas se perdre dans le texte

Le défilement vertical de la page

Utilisation du clavier

Résumé

Autre (très) bonne idée

Flexible Nav jQuery library

Parenthèse : Opera Reader ?

ReadR.js : Les ressources et dépendances

Les problèmes...

Facile : Parser le texte pour construire un menu

Facile : Inclure Disqus pour chaque paragraphe

Admin des commentaires via Discus

Presque facile : Créer un viewport viewer

Limitations

Le projet

Voilà...

Merci :)