Visionneuses de documents : Outils libres (2/2)

Dans le cadre d’une veille technologique pour un de nos clients publics, nous avons étudié le sujet des visionneuses de documents. Il s’agit de permettre la lecture de fichiers bureautiques en ligne. L’article suivant constitue la 2ème partie sur les outils libres.

1. Critères de sélection

D’après le contexte de l’Administration et le cadre de l’étude, voici les critères retenus pour sélectionner les visionneuses de documents en ligne de ce panorama :

• une intégration facile et simple dans Drupal ;
• la lecture à minima des fichiers PDF ;
• la prise en charge des documents stockés sur les serveurs de l’Administration ;
• la gratuité de la solution au moins pour les fonctions de lecture basique ;
• pas d’installation ou de configuration nécessaires sur le poste de l’agent (full web).

2. Microsoft Office Online

Licence : Freemium

Site officiel : https://office.com/

2.1. Présentation

La visualisation de documents en ligne est une fonctionnalité de la solution Office Online de Microsoft, anciennement baptisée Office Web Apps. Comme son nom l’indique, c’est une version limitée de la suite bureautique MS Office qui fonctionne entièrement dans le navigateur Internet. Le visionnage d’un document se fait sans enregistrement préalable et est gratuit.

2.2. Fonctionnement technique

La visionneuse de Office Online est disponible sur tous les navigateurs Internet récents sans aucune configuration préalable à faire. L’accès se fait via URL sans devoir s’identifier selon la syntaxe suivante :

https://view.officeapps.live.com/op/view.aspx?src=[URL cible]

où [URL cible] est le lien URL qui permet de télécharger directement le document en question. Ce lien doit être public pour que Office Online puisse le visualiser. L’intégration dans Drupal se fait donc simplement en incluant l’adresse URL ci-dessus dans n’importe quel texte.

Les fichiers pris en charge sont les documents Word, Excel et Powerpoint sous format binaire ou Open XML (doc, docx, xls, xlsx, ppt, pptx). Chaque fichier doit avoir une taille inférieure à 10MB pour Word et Powerpoint et inférieure à 5MB pour Excel. Il n’y a donc pas de support pour les documents au format ODF (odt, ods, odp) ni les fichiers en PDF.

À noter qu’il est possible d’installer gratuitement Office Web Apps Server sur un serveur Windows, ce qui permet de visualiser en ligne les documents hébergés en interne ou en externe.

À l’utilisation, l’interface semble assez fluide et réactive. Il est possible de faire des recherches textuelles, de zoomer, d’imprimer et de télécharger en PDF ou au format d’origine. Office Online offre même la possibilité de faire la traduction du document. Le rendu est assez fidèle au document d’origine.

Illustration 1 : Interface de MS Office Online avec un document de présentation

3. Google Drive

Licence : Freemium

Site officiel : https://www.google.com/drive/

3.1. Présentation

La visualisation de documents en ligne est une fonctionnalité de la solution Google Drive, encore connue sous le nom de Google Docs. Elle est entièrement gratuite. Le visionnage d’un document se fait sans enregistrement préalable.

3.2. Fonctionnement

De manière similaire à MS Office Online, la solution Drive de Google possède une fonctionnalité de visionneuse de documents disponible sur tous les navigateurs Internet récents sans aucune configuration préalable à faire. L’accès se fait via URL sans devoir s’identifier selon la syntaxe suivante :

https://drive.google.com/viewerng/viewer?url=[URL cible]

où [URL cible] est le lien URL qui permet de télécharger directement le document en question. Ce lien doit être public pour que Google Drive puisse le visualiser. L’intégration dans Drupal se fait donc simplement en incluant l’adresse URL ci-dessus dans n’importe quel texte.

Les fichiers pris en charge sont les documents Word, Excel et Powerpoint sous format Open XML et ODF, et les PDF. Les fichiers multimédias usuels (images et vidéos) et zippés sont également prises en charge. Aucune limite de taille n’est indiquée par Google.

À l’utilisation, l’interface semble assez fluide et réactive. Les commandes possibles sont de zoomer, d’imprimer et de télécharger en PDF ou au format d’origine. Le rendu peut cependant être différent par rapport à un logiciel bureautique.

Illustration 2: Interface de Google Drive avec un document de présentation

4. ViewerJS

Licence : AGPL

Site officiel : http://viewerjs.org

Site projet : https://github.com/kogmbh/ViewerJS

4.1. Présentation

Financée par la fondation NLnet, ViewerJS est une combinaison de plusieurs outils Open Source basés sur le HTML et le JavaScript dont :

• PDF.js est une bibliothèque JavaScript qui permet d’afficher les PDF en utilisant les standards Web. Le projet est mené par la fondation Mozilla. Notons ainsi qu’un lecteur basé sur PDF.js est inclus par défaut dans le navigateur Firefox
• WebODF est une bibliothèque JavaScript qui permet d’afficher les documents ODF en utilisant les standards Web

Nous avons choisi de présenter ViewerJS car c’est un produit packagé assez complet. Il existe bien évidemment d’autres solutions de visionnage de documents basées sur PDF.js et WebODF mais les fonctionnalités sont très similaires.

ViewerJS permet ainsi d’afficher des documents textes, des présentations, des feuilles de calcul et documents textes au format ODF, des PDF et des images.

ViewerJS fonctionne avec les navigateurs Firefox et Chrome sous Windows et sous Linux. Cependant Internet Explorer que ce soit la version 8 ou 9 ne fonctionne pas correctement1.

Le format MS Office (doc, docx, xls, xlsx, ppt, pptx) n’est pas pris en charge. Il est donc nécessaire de convertir au préalable ces fichiers en PDF ou ODF.

Il est éventuellement possible de faire une conversion automatique de fichiers MS Office vers PDF ou ODF par une version de Libre Office installée sur un serveur (via le module JODConverter). Cette solution peut être étudiée en détail si l’Administration le souhaite.

Illustration 3: Interface de ViewerJS avec un document texte

4.2. Fonctionnement technique

ViewerJS fonctionne avec tous les serveurs Web. Il suffit de le télécharger (taille 2MB) sur la racine du serveur Web de préférence. Ensuite pour tous les liens de documents, il suffit de changer le code source HTML de :

<a href= »/path/to/filename.ext »>

où /path/to/filename.ext est l’adresse absolue du document à afficher, en :

<a href= »/ViewerJS/#../path/to/filename.ext »>

Il existe également des plugins pour les gestionnaires de contenus courants dont Drupal qui permet d’insérer la visualisation de documents de manière plus simple.

3.3.1.3. Intégration Drupal de ViewerJS

Il existe un module ViewerJS pour Drupal sur Github2. L’intégration ne pose pas de difficulté particulière. L’auteur attache comme normalement le(s) document(s) dans l’article qu’il souhaite publier. Le document se présentera sous la forme d’une petite vignette avec un choix entre le téléchargement et la prévisualisation. La prévisualisation ouvrira un nouvel onglet sous ViewerJS où sera affiché le document.

Illustration 4: Intégration de ViewerJS dans Drupal

4. Flexpaper

Licence : Open Source / Commerciale

Site officiel : http://flexpaper.devaldi.com

4.1. Présentation de Flexpaper

La société néo-zélandaise Devaldi se spécialise dans la publication digitale professionnelle. Si seuls les fichiers PDF sont pris en charge, Flexpaper comporte de nombreuses fonctionnalités avancées dont la plupart sont payantes :

• Ajout de liens Web (vidéo, image, son,…)
• Personnalisation de l’interface
• Annotations collaboratives en ligne
• Affichage adaptatif (interface tactile pour tablettes et smartphones)
• Mesure d’audience avec Google Analytics

Illustration 5: Interface de Flexpaper avec la fonction d’annotations collaboratives en ligne

Devaldi propose également un autre produit, Flexpaper Zine adapté aux magazines, catalogues et autres publications de haute qualité. L’affichage se fait en mode brochure avec des effets spéciaux pour le défilement des pages. Toutes les fonctions de Flexpaper sont présentes sauf les annotations collaboratives en ligne.

Illustration 6: Interface du mode brochure (Flexpaper Zine)

Le tableau suivant résume les trois versions commerciales de Flexpaper :

Intitulé	Open Source	Commerciale	Illimitée
Produits proposés	Flexpaper	Flexpaper Flexpaper Zine	Flexpaper Flexpaper Zine
Licence	GPLv3	Propriétaire (1)	Propriétaire (2)
Marque blanche	Non	Oui	Oui
Nombre de domaines	Illimité	1	Illimité
Fonctionnalités avancées	Aucune	Interface personnalisable Affichage adaptatif	Interface personnalisable Affichage adaptatif Annotations collaboratives en ligne (3)
Version à jour	Non	Oui	Oui
Coût de la licence (à vie)	gratuit	149 USD	995 USD

(1) La licence permet d’accéder et d’adapter le code source de Flexpaper

(2) La licence permet d’accéder, d’adapter le code source de Flexpaper et d’en faire une réutilisation commerciale.

(3) Fonctionnalité spécifique à Flexpaper

3.2. Fonctionnement technique de Flexpaper

Pour l’hébergement, Flexpaper nécessite un serveur en PHP ou ASP.net et l’utilisation d’un certain nombre de modules complémentaires. Toutes les versions proposent les fonctions de téléchargement progressif et partiel qui permettent de mieux utiliser la bande passante. Flexpaper peut fonctionner soit en Flash soit en HTML5.

L’intérêt d’Adobe Flash est le graphisme vectoriel qui permet d’avoir une qualité d’affichage plus élevé. De plus avec cette technologie, il est possible de personnaliser très facilement l’interface de Flexpaper avec un logiciel bureautique (ajout, supression, emplacement et taille des boutons) et ensuite de télécharger le contenu sur le serveur.

Avec le HTML, il n’est pas nécessaire de préparer le fichier à l’avance. La configuration de l’interface et la requête de lecture se font directement en lignes de commande en utilisant par exemple le code suivant :

$(‘#documentViewer’).FlexPaperViewer(

{ config : {

PDFFile : ‘pdf/Paper.pdf’,

RenderingOrder : ‘html5’

}});

où pdf/Paper.pdf est l’adresse du fichier à afficher

3.3. Intégration Drupal de Flexpaper

Il existe un module Flexpaper dans Drupal3. Il n’est cependant pas très utilisé (600 téléchargements au total et 86 sites l’utilisent au 19/11/2014). Nous n’avons pas réussi au moment de l’écriture de ce rapport à faire fonctionner correctement le module dans la version 7 de Drupal.

Le module Drupal de Flexpaper utilise la technologie Flash exclusivement (via Swftools) et il n’existe pas de version en HTML.

Il est envisageable de retravailler le module Drupal à partir du code source de Flexpaper

4. Synthèse du panorama des visionneuses de documents

Le tableau suivant résume les fonctionnalités des différentes visionneuses :

	MS Office Online	Google Drive	ViewerJS	Flexpaper
Licence	Propriétaire	Propriétaire	Open Source	Open Source Propriétaire
Type de solution	Interne (1) Externe	Externe	Interne	Interne
Intégration Drupal	Limité (2)	Limité (2)	Oui	Limité (3)
Technologie utilisée	URL	URL	Module HTML	Module Flash (3)
Support des documents en accès restreint	Oui (1)	Non	Oui	Oui
Format MS Office	Oui	Oui	Non (4)	Non
Format ODF	Non	Oui	Oui	Non
Format PDF	Non	Oui	Oui	Oui
Fichiers multimédias	Non	Non	Non	Non
Fonctions intégrées	Zoom Recherche Traduction	Zoom Recherche	Zoom	Zoom Recherche Annotations collaboratives (5)

(1) Via l’installation de Office Web Apps Server sur un serveur Windows

(2) Redirection vers un site externe

(3) Le module Drupal de Flexpaper utilise uniquement la technologie Flash ce qui pose des problèmes d’intégration

(4) Il est possible d’étudier la conversion automatique des fichiers MS Office en PDF et ODF via par exemple JODConverter4 (utilisation de LibreOffice sur un serveur)

(5) Uniquement disponible dans la version illimitée (payante)

4. Visionneuses en ligne de fichiers multimédias

La lecture en ligne des fichiers multimédias a un fonctionnement différent de celle des documents bureautiques d’où l’absence d’une visionneuse en propre qui intégrerait les deux. Nous allons brièvement présenter les solutions de visionneuses en ligne des fichiers multimédias qui sont en open source et s’intègrent bien dans Drupal.

Le tableau ci-dessous, présente les quatre visionneuses les plus utilisées sous Drupal :

	MediaElement.js	jPlayer	Video.js	OSM (Mediafront)
Site officiel	http://mediaelementjs.com/	http://jplayer.org/	http://www.videojs.com/	http://mediafront.org/
Technologies supportées (1)	HTML5 Adobe Flash Silverlight (2)	HTML5 Adobe Flash	HTML5 Adobe Flash Silverlight (2)	HTML5 Adobe Flash
Licence	GPL v2 MIT	MIT	GPL v3	MIT
Bibliothèque JavaScript nécessaire	jQuery	jQuery	Aucune	jQuery
Interface personnalisable	Oui	Oui	Oui	Oui
Mode plein écran	Oui	Oui	Oui	Oui
Support Drupal	7.x	6.x, 7.x	6.x 7.x	6.x 7.x
Dernière mise à jour	15 novembre 2014	21 novembre 2014	24 septembre 2014	30 septembre 2011
Support des sous-titres	Oui	Limité	Oui	Non
Support mobile	Oui	Oui	Oui	Limité
Statut	Actif	Actif	Actif	Semi-Actif
Nb de sites Drupal recensés	12 390	8 687	9 865	7 246
Nb de téléchargements recensés	152 577	38 703	53 240	72 125

(1) Sous réserve de disponibilité sur les navigateurs et les systèmes d’exploitation concernés

(2) Silverlight a été déprécié par Microsoft et ne sera plus supporté

Sources : https://www.drupal.org

Nous voyons que deux solutions sortent du lot. Video.js a la réputation d’être un lecteur en ligne assez léger tandis que MediaElement.js assure la plus grande compatibilité notamment avec les appareils mobiles. L’Administration peut donc décider d’intégrer l’une des deux solutions sur sa plateforme sous Drupal en fonction de ses besoins.