Editis

27/07/11

Widgets : nouvelle version

Introduction
Le Widget Editis est un dispositif destin favoriser la dcouverte des livres, en permettant aux internautes d'en feuilleter un extrait. Si on parle de widget, c'est parce qu'il s'agit d'un composant qu'il est possible d'insrer dans n'importe quel site web ou blog, en ajoutant quelques lignes de code. L'objectif est de favoriser une diffusion des extraits feuilletables des livres, partout o ces livres sont disponibles ou mentionns, que ce soit en librairie, sur des sites partenaires, sur des rseaux sociaux ddis ou sur des sites ou blogs de particuliers.

Description du widget actuel :

Le widget a t dvelopp en Flash. Il existe en deux tailles : - la version petit format (305 pixels en hauteur) - la version grand format (694 pixels en hauteur)

Version petit format

La version petit format affiche la couverture du livre sous forme d'une vignette de petite taille, encadre par une rgion contenant des zones permettant diffrentes interactions. Cette version petit format est destine s'insrer dans une page web simultanment avec d'autre contenus.

D'une taille proche des vignettes de couverture habituellement utilises pour dsigner les livres sur les sites web des libraires, et sur tous les sites diffusant ou commentant des livres, cette version du widget peut prendre la place du visuel de couverture sans modifier radicalement la mise en page d'un site.

au survol, affichage de la mention : "ajouter mon site" au clic : affichage du script copier/coller pour ajouter le widget dans son site. au choix : embed : affichera le widget l'identique dans le site de l'utilisateur script : ??? URL : collera le lien vers la version grand format du widget

au survol : affichage de la mention "Commander" au clic : ouverture d'une page permettant de slectionner un libraire pour acheter le livre

au survol : "page prcdente" ou "page suivante" au clic : permet de feuilleter le livre. en version petit format, le feuilletage donne un aperu de l'aspect des pages mais la lecture cette dimension est impossible.

La partie suprieure du widget en petit format affiche le titre du livre et le nom de l'auteur. L'espace ne permet pas l'affichage complet, et, en survolant la zone, titre et nom de lauteur s'affichent en entier.

version grand format

Au survol de la zone d'affichage du livre dans la version petit format, le curseur prend la forme d'une loupe. Au clic, affichage de la version grand format, sur deux pages juxtaposes, (livre ouvert) du widget. Cette version s'affiche dans un nouvel onglet du navigateur.

Dans cette configuration en double page, le curseur prend la forme d'une main au survol des pages. Un simple clic sur la page provoque un "tremblement de la page". Un cliqu-gliss horizontal provoque un changement de page : Cliqu-gliss de droite gauche sur la page de droite = double page suivante Cliqu-gliss de gauche droite sur la page de gauche = double page prcdente

On retrouve dans la version grand format du navigateur les boutons prsents sur la version petit format, auxquels s'ajoutent :

au survol, affichage de la mention "envoyer un ami" au clic, ouverture d'un formulaire de saisie permettant d'adresser un mail quelqu'un. Le mail contient par dfaut un lien vers le widget. Au test, j'ai chou ouvrir le lien reu, mon navigateur me proposant de charger un fichier...

au survol, affichage de la mention "agrandir la page" au clic : le curseur prend la forme de la mini-page affiche sur le bouton, et en cliquant avec le curseur sur l'une des deux pages affiches, la prsentation passe en mode "une page en largeur" et on obtient un zoom sur le texte.

au survol : affichage de la mention "double page" au clic : affichage du livre sur deux pages juxtaposes, ce qui correspond un zoom arrire.

au survol : affichage de la mention "Vignettes" au clic : affichage de l'ensemble des pages en rduction.

- Pour afficher une page, il faut cliquer sur "agrandir la page", et cliquer avec le curseur transform en mini-page sur la page que l'on souhaite consulter. - Une fois la page affiche en grand format, en mode une page, la taille de la page excde la taille de la fentre. Au survol de la page, le curseur prend la forme d'une main. Pour faire dfiler verticalement la page dans la fentre du widget, il faut faire un cliqugliss vertical sur celle-ci. - Pour tourner les pages, il faut utiliser les boutons "prcdent" et "suivant".

Les autres mentions qui apparaissent sont : - le logo de l'diteur au survol, affichage de la mention "site de l'diteur" au clic sur le logo, ouverture de la page d'accueil du site web de l'diteur dans un nouvel onglet. - la pagination sous la forme x/y, x tant le numro de page courante, y le nombre total de pages accessibles. le champ "page courante" est ditable, on peut saisir le numro d'une page o l'on veut se rendre, puis appuyer sur la touche return du clavier, la page demande s'affiche. La seule manire de quitter le widget est de fermer l'onglet du navigateur dans lequel il est ouvert.

L'aspect du widget est paramtrable de la manire suivante : - possibilit de dsigner une couleur pour le fond, une couleur pour les boutons, et d'appliquer son logo. --------Un outil en ligne, Marketing Studio, est la disposition des maisons d'dition, et leur permet de crer, de paramtrer ou de diffuser leurs widgets, ainsi que d'accder aux statistiques de consultations. ---------

Problmes reprs sur la version actuelle du widget :

Le problme essentiel des widgets dans leur version actuelle est celle de la qualit des images affiches. Il est indispensable de chercher une solution pour amliorer cette qualit qui nuit la lisibilit, et cela avant mme que le dveloppement de la nouvelle version soit lanc.

Ci-dessous, quelques copies d'cran permettant de comparer la qualit de notre widget et celles d'autres widgets ou feuilleteurs : Widget Editis http://widget.yodawork.com/book/viewer 2.aspx?largeur=940&hauteur=718&ean13= 9782714444066&bookshop=belfond&page =0&wid=49617af8323940b683db30a811d3 c6eb Widget Random House http://www.randomhouse.com/book/200243 /escape-by-barbara-delinsky

En grand format, affichage double page :

En grand format, affichage une seule page :

Widget EDITIS

Feuilleteur Immatriel en mode image

De mme, il faudrait fixer le bug qui concerne l'export du widget vers un blog : le code qui s'affiche par dfaut au clic sur le bouton "+" n'est pas le bon.

Widgets, nouvelle version

Redveloppement en HTML5
Pourquoi ? Les terminaux mobile iOS ne supportent pas le Flash - Parce que les terminaux mobiles Apple ne lisent pas le Flash, et les widgets n'apparaissent donc pas lorsque les gens se connectent avec un iPad ou un iPhone : cela

signifie que lorsque le widget figure en lieu et place du visuel de couverture d'un livre comme c'est le cas sur certains sites diteurs, aucune couverture ne s'affiche sur les terminaux mobiles qui ne lisent pas le Flash. Exemple : sur le site Belfond : affichage sur un PC : affichage sur un iPad :

Questions : - HTML5 est peu ou mal support par les anciennes versions du navigateur Internet Explorer, jusqu' IE8 compris. Cela concerne encore une proportion importante des navigateurs utiliss aujourd'hui, environ 46%.

Parc des navigateurs en juin 2011 (selon Net Applications) : http://www.netmarketshare.com/report.aspx?qprid=2&qptimeframe=M&qpsp= 149 Navigateurs non compatibles avec l'ensemble des balises HTML5 : 46% Microsoft Internet Explorer 8.0 Microsoft Internet Explorer 6.0 Microsoft Internet Explorer 7.0 Navigateurs supportant HTML5 : 30.07% 10.18% 6.58%

Microsoft Internet Explorer 9.0 Firefox 4.0 Firefox 3.6 Firefox 5.0 Firefox 3.51. Firefox 3.0 Chrome 12.0 Chrome 11.0 Chrome 10.0

5.63% 10.46% 7.08% 2.05% 10% 0.75% 7.32% 3.93% 0.62%

Safari 5.0 Safari 4.0

5.04% 1.33%

C'est pourquoi la solution permettant une utilisation des widgets sur l'ensemble des navigateurs y compris les navigateurs implants sur des terminaux mobiles, pourrait tre de gnrer les widgets dans les 2 formats (fichier .swf et version HTML5), et de dtecter le navigateur pour afficher la version la plus adopte.

EXEMPLES DE FEUILLETEURS EXPORTABLES EN HTML5 : SCRIBD La plateforme Scribd a rcemment pass son feuilleteur exportable en HTML5, mais propose au moment de l'export "embed" la fois l'option Flash et l'option HTML5 :

Le feuilleteur Scribd est recomposable : ce ne sont pas des images mais du texte qui est affich, avec un soin particulier apport pour prserver la mise en page initiale du PDF. Le blog de Scribd fournit des informations sur le dveloppement de ce viewer, qui utilise @font-face (l'un des rares lments HTML5 supports par Internet Explorer) :
" With the new Scribd HTML document conversion, we aimed for a higher goal: Lets create a version of a PDF file that looks exactly the same, but is also completely valid HTML. It turns out that since all major browsers now support @font-face, this is actually possible. Encoding documents in this way has numerous advantages: no proprietary plugins like Flash or Silverlight are required to view documents; we take full advantage of built-in browser functionality like zooming, searching, text selection, etc.; state-of-the-art embedded devices are supported out of the box; and even on older browsers it degrades gracefully (to HTML text with built-in fonts)."

http://coding.scribd.com/2010/05/17/facing-font-in-html/ Test de l'export sur blog Wordpress : cela fonctionne en HTML5 et en Flash. INTERNET ARCHIVE Internet Archive : http://openlibrary.org/dev/docs/bookreader

Version grand format : http://www.archive.org/stream/abroadcranethoma00craniala Petite et grande version de ce widget fonctionnent parfaitement sur un iPad. Possibilit de passer du mode image au mode texte.

En mode "double page", lorsque l'on fait varier la taille de la fentre du navigateur, l'image du livre affiche s'adapte la taille de manire impressionnante, sans perte de qualit.

CALAMEO Indications de partage sur Calameo :

WOBOOK (Feuilleteur utilis par Univers Poche :)

Les boutons permettant l'utilisation des fonctionnalits de partage ne sont pas intgrs au design du WoBook, mais juxtaposs celui-ci. Fonctionne parfaitement sur iPad.

Fonctionnalits rclames par les diteurs :

1) ajout de boutons permettant le partage sur les rseaux sociaux
Facebook, Twitter, Google+ - utilisation de boutons qui gnrent un message et le postent automatiquement sur Facebook, Twitter, Google+. Ces boutons seront prsents sur la version grand format. -> Regrouper dans la mme zone les boutons de partage vers les rseaux sociaux et l'icne enveloppe "envoyer un ami" ainsi que le bouton "exporter sur mon blog" aujourd'hui symbolis par le signe +

Note : Concernant Facebook, l'idal serait de disposer d'une application Facebook permettant l'insertion du widget dans sa page, et non uniquement celle d'un message contenant un lien. Aujourd'hui, le viewer de Gallica, par exemple, est exportable sur Facebook :

Faire en sorte que le clic sur les boutons de partage gnrent un message complet, qui s'affichera convenablement selon l'interface du rseau social choisi - Pour Twitter : < 140 caractres - Titre + auteur du livre et URL raccourcie vers la version grand format du widget. - Pour Facebook et LinkedIn : image de couverture + titre/auteur/diteur + argumentaire court - Prvoir bouton Google+ (nouveau site de rseau social ouvert rcemment par Google).

2) faciliter l'insertion de vidos

Aujourd'hui pour ajouter une vido, il est ncessaire d'hberger le fichier. Offrir la possibilit d'ajouter des vidos hberges ailleurs, par exemple sur YouTube ou DailyMotion.

3) ajouter un moteur de recherche

- recherche sur le texte complet (pour cela, les utilisateurs doivent charger le PDF complet, dont seulement les pages slectionnes seront visibles sur le widget). - ajout d'un bouton recherche sur la partie haute du Widget en version petit et grand format. - au clic sur ce bouton la zone de saisie apparat : dans le cas du petit format elle se substitue au titre de l'ouvrage inscrit dans la zone suprieure. La recherche se lance indiffremment via l'appui sur la touche "retour" du clavier ou via le clic sur le bouton "recherche". En tte des rsultats, le nombre de rsultats est affich avec la mention : nombre d'occurrences du mot [mot recherch] trouves : (n) Les rsultats prsentent les occurrences du mot recherch incluses dans un trs court extrait du texte (une centaine de caractres), et s'affichent de la manire suivante : - version petit format : les uns au dessous des autres, avec une barre de dfilement verticale si leur hauteur totale excde la hauteur disponible. - version grand format : dans un menu qui se droule, de taille identique la zone d'affichage en version petit format, avec une barre de dfilement verticale. - si l'occurrence du terme recherch est incluse dans la partie du texte propose en extrait : affichage de cette page au clic sur l'extrait - si elle ne l'est pas : affichage d'une mention "non disponible dans cet extrait"

4) dfilement des pages (version grand format)

Aujourd'hui : l'animation de changement de page en mode double page est un peu droutante (gliss des pages en deux fois, page de droite devient page de gauche, apparition nouvelle page droite, puis glissement de cette page gauche et apparition d'une nouvelle page droite)

Le remplacement de cette animation par une simple substitution des deux pages suivantes, sans effet particulier, serait plus confortable.

5) concerne plutt Marketing Studio :

- Possibilit de crer la vole une page supplmentaire alimente par des champs Ionix. - Possibilit de paramtrer les dates d'affichage des widgets (ajouter ou enlever facilement un widget )

Propositions d'amliorations concernant l'ergonomie

1 pour une meilleure identification du widget
Identification du widget comme outil permettant le feuilletage de l'ouvrage. La remarque "les gens ne cliquent pas dessus, et ne devinent pas ncessairement qu'il s'agit d'un outil de feuilletage" a t faite plusieurs fois. tudier la possibilit d'ajouter dans le design de la version petit format une mention explicite "feuilleter un extrait" "feuilleter ce livre" ou "cliquez pour feuilleter"

Mention "what's this ? accompagne le widget. Mention "see large cover" affiche couverture en grand format.

Mention "Open the Book"

Mention "Browse inside" Mention "Get this fir your site"

2) indication des changements de mode d'affichage dans le mode grand format

Particulirement contre-intuitive est la gestion du passage de l'affichage "double-page" ou "chemin de fer" l'affichage "une page", ainsi que de manire gnrale la gestion de l'affichage une page / deux pages. Lorsque le chemin de fer est affich, le rflexe est de se dire : si je clique sur une page, celle-ci va s'afficher en mode "une page". En ralit, il est ncessaire de cliquer une premire fois sur l'icne "une seule page", puis de cliquer avec le curseur qui a pris la forme d'une petite page sur la page que l'on souhaite afficher en mode "une page". -> Prfrer le passage en mode "1 page" par simple clic sur la vignette de la page, et ajouter une barre de dfilement vertical pour faire dfiler les vignettes dans la fentre. Lorsque l'on est en mode double-page, on imagine que le clic sur l'icne "une seule page" va permettre d'obtenir directement l'affichage "une seule page". Il n'en est rien : l aussi, le clic sur cette icne change la forme du curseur, avec lequel il faut nouveau cliquer, cette fois-ci sur la page sur laquelle on souhaite zoomer. La raison est la ncessit de permettre l'utilisateur de dsigner laquelle des deux pages il souhaite voir s'afficher. En ralit, on le contraint faire ce choix, alors que probablement son souhait est simplement de zoomer. Comment ce problme est-il rsolu par les autres feuilleteurs : WOBOOK : Le clic dans l'une des doubles pages provoque l'affichage de la page clique en mode une page. En mode une-page, une partie seulement de la page s'affiche : pour la faire dfiler, le dplacement verticla du curseur fait monter ou descendre la page. Seuls les coins de la page ragissent au clic par le passage la double-page suivante : le bord de la page se soulve lgrement au survol par le curseur pour indiquer cette possibilit. CALAMEO Fonctionnement identique. SCRIBD Scribd affiche tous les titres sur une seule page. Pas d'affichage double page.

INTERNET ARCHIVE et IMMATERIEL Le clic sur l'icne "une seule-page" (ou ce choix dans le menu Immatriel) affiche toujours sur une seule page la page de gauche. Il faut cliquer ensuite sur "suivante" pour afficher la page de droite. -> Cette dernire solution est le meilleur compromis : au clic sur l'icne "une seule page", affichage par dfaut de la page de gauche. Cela vaut mieux que d'obliger l'utilisateur cliquer deux fois. Lui permettre de spcifier ainsi la page agrandir revient risquer de l'empcher de trouver facilement comment faire ce qu'il veut faire, au prtexte de lui permettre de "bien" le faire. Permettre d'obtenir simplement le rsultat attendu (grossir la taille de l'affichage) sans permettre d'indiquer avec prcision sur laquelle des deux pages s'effectuera le zoom me semble une meilleure approche : l'action attendue est le zoom, et si c'est la page adjacente que l'on souhaitait zoomer, il n'y a aucune question se poser pour cliquer sur "page suivante". Il faut privilgier la satisfaction immdiate du besoin le plus important (zoomer) un raffinement secondaire (choisir sur laquelle des deux pages de la double page on va zoomer).

3 Taille de l'affichage "grand format".

Dans sa version actuelle, la taille de la version grand format du widget est fixe (paramtre). Le widget occupe 940 pixels en hauteur. Il s'affiche dans la partie suprieure de la fentre du navigateur, quasiment coll au bord haut. Il est un peu agaant de ne pas profiter de la totalit de l'espace disponible l'cran et d'tre oblig de dplacer la page dans le fentre du widget, de taille nettement infrieure la taille de la plupart des crans. Il serait plus agrable que la taille d'affichage du widget s'adapte dynamiquement la taille de la fentre du navigateur, tout en veillant la qualit de l'affichage du texte.