11521 sujets

JavaScript, DOM et API Web HTML5

Intégrateur de pdf (ebook en ligne)

Bonjour à tous et à toutes,

Quelle serait la solution la plus facile à mettre en oeuvre pour intégrer un ebook en pdf dans lequel on peut naviguer entre les pages directement sur le site ?
MisterJC (plus bas) a écrit :
Je viens de trouver quelque chose, ... : 
<iframe src="test.pdf" width="800" height="600" align="middle"></iframe>
Ce qui donne :
MisterJC (plus bas) a écrit :
Voici le site que je suis en train de créer (je viens de le mettre en ligne) : www.misterjc.be/bigmatlepot/index.html
Mot de passe et nom d'utilisateur : test
NB : soyez indulgent (il n'est pas fini et je l'ai fait à l’arrache pour aller vite), je ne l'ai pas encore bien conçu pour les petits écrans. C'est juste pour l'exemple Smiley langue

Moi ce qui m'intéressait, c'était que le pdf soit intégré comme ça sur le site, mais avec moins d'options. Il servira seulement à ce que les personnes puissent LIRE et ENREGISTRER (voir agrandir) rien de plus (pour que ça prenne moins de place) et qu'il y ait la possibilité d'afficher qu'une page à la fois...

Un peu comme dans cet exemple sauf qu'on peut enlever la barre du dessus et du dessous, mais en gratuit bien entendu : http://devaldi.com/zine/NZ_Tourism_2007.php?ro=html,flash&amp;prefer=true

Je cherche quelque chose de simple, mais qui soit aussi compatible tant sur gsm/tablettes, android/iphone, IE, Mozilla, Chrome, ... et idéalement rétro-compatible avec d'anciens navigateurs. Voir me conseiller plusieurs un pour les navigateur IE, Moz,... un autre pour iphone/ipad et un pour android...

Est-ce possible de trouver une telle chose ? Smiley confus

Au pire je laisse comme ça, je pense que c'est le meilleur mode de compatibilité l'iframe... => Ah non pour le premier exemple sur le site misterjc - bigmatlepot, je viens d'essayer et ça ne fonctionne pas sur android Smiley sweatdrop

Merci pour toutes vos solutions.
Modifié par MisterJC (07 Jul 2015 - 21:06)
Modérateur
Salut,

D'un point de vue accessibilité, l'HTML est plus adéquate sauf si le pdf est accessible.Après le moyen le plus pratique est mettre en ligne le pdf tel quel et faire un lien vers ce document.
Modifié par niuxe (03 Jul 2015 - 18:36)
Pour ce qui est de l’accessibilité, il en devient impossible dans le cas où on a affaire à un livre, on ne va pas réécrire et refaire toutes la mise en page de tout le livre.

Ce que j'aimerais idéalement ce serait de trouver une application du genre lecteur vidéo mais pour un pdf, avec la possibilité de "tourner" les pages (juste ça)...

Idéalement ce serait de pouvoir juste taper dans le html quelque chose comme (mais ça n'existe pas, sauf si je me trompe) :
<pdf src"chemin" />

Alors y a t'il un palliatif avec javascript en opensource ?
Modifié par MisterJC (03 Jul 2015 - 22:01)
Je viens de trouver quelque chose, mais je ne sais pas si c'est possible de faire en sorte que l'intégrateur iframe puisse être SIMPLIFIÉ où on ne puisse plus que naviguer d'une page à l'autre et avoir la page qui s'affiche entière sans bords :
<iframe src="test.pdf" width="800" height="600" align="middle"></iframe>
Et si c'est possible mais c'est une autre question, d'avoir une possibilité d'afficher le pdf en plein écran et de l'enregistrer RIEN DE PLUS
Modifié par MisterJC (03 Jul 2015 - 23:46)
Voici le site que je suis en train de créer (je viens de le mettre en ligne) : www.misterjc.be/bigmatlepot.html
Mot de passe et nom d'utilisateur : test
NB : soyez indulgent (il n'est pas fini et je l'ai fait à l’arrache pour aller vite), je ne l'ai pas encore bien conçu pour les petits écrans. C'est juste pour l'exemple Smiley langue

Moi ce qui m'intéressait, c'était que le pdf soit intégré comme ça sur le site, mais avec moins d'options. Il servira seulement à ce que les personnes puissent LIRE et ENREGISTRER (voir agrandir) rien de plus (pour que ça prenne moins de place) et qu'il y ait la possibilité d'afficher qu'une page à la fois...

Un peu comme dans cet exemple sauf qu'on peut enlever la barre du dessus et du dessous, mais en gratuit bien entendu : http://devaldi.com/zine/NZ_Tourism_2007.php?ro=html,flash&prefer=true

Je cherche quelque chose de simple, mais qui soit aussi compatible tant sur gsm/tablettes, android/iphone, IE, Mozilla, Chrome, ... et idéalement rétro-compatible avec d'anciens navigateurs.

Est-ce possible de trouver une telle chose ? Smiley confus

Au pire je laisse comme ça, je pense que c'est le meilleur mode de compatibilité l'iframe... => Ah non, je viens d'essayer et ça ne fonctionne pas sur android Smiley sweatdrop
Modifié par MisterJC (04 Jul 2015 - 14:39)
Ah ben je viens de trouver quelque chose qui tend vers ce que je veux faire et qui fonctionne sur tous les navigateurs même android (iphone je ne sais pas) Smiley biggrin

J'ai suivi ce tuto (qui n'est plus à jour) : http://lecarologeek.com/tuto-integrer-un-pdf-dans-une-page-web/

Il propose d'utiliser Google Drive il suffit après avoir téléchargé son pdf de l'ouvrir dans Drive et une fois ouvert aller dans :
Fichier -> Publier sur le web -> Intégrer -> Publié -> et copié collé le code iframe, lui ajouter un height et un width et voilà Smiley smile => Mais ça ne fonctionne pas très bien (ça met le texte en image puis en-dessous il le réécrit +/-) et il ne met pas l'entièreté du document...

Seul dernier problème, je ne trouve pas comment le mettre en mode ebook feuilletable comme ici Smiley ohwell : http://devaldi.com/zine/NZ_Tourism_2007.php?ro=html,flash&prefer=true

Et puis ce n'est pas très simple à faire comme opération. J'aimerais pouvoir arriver à simplement déposer un fichier dans un dossier sur le serveur du site et qu'en gardant le nom, il se met à jour automatiquement... Smiley ohwell
Modifié par MisterJC (04 Jul 2015 - 16:17)
Vu toutes les options que tu aimerais avoir, il vaudrait mieux mettre un lien de téléchargement tout simple et laisser l'utilisateur lire le PDF avec le logiciel auquel il est habitué.

A long terme, vouloir afficher du PDF et du HTML côte à côte est une connerie. Tu te heurteras toujours à des différences de comportement et de rendu entre navigateurs et OS, puisque ce genre d'intégration n'est pas standardisé et donc chacun fait son truc à sa sauce.

Si tu veux à tout prix intégrer ton PDF, tu aurais intérêt à le convertir en HTML, et si tu veux à tout prix que la mise en page originale du PDF soit conservée, le seul moyen de le garantir est de l'ouvrir dans un vrai logiciel qui suit le standard PDF.

En ce qui concerne plus spécifiquement l'accessibilité, il faut que
1 - Le PDF soit rendu accessible, c'est-à-dire qu'il soit balisé selon les normes PDF-UA
2 - ET qu'il soit ouvert dans un logiciel supportant les PDF balisés

Si tu peux encore intervenir sur le point 1 dans ton PDF d'origine, le simple fait de mettre ton PDF dans une iframe et tu as déjà perdu pour le point 2. LE seul logiciel restituant les balises d'accessibilité que je connais à ce jour pour windows est Adobe Reader, et uniquement quand le PDF est ouvert à part entière dans le vrai logiciel, pas quand il est intégré dans une iframe via un plugin. Je ne peux pas renseigner pour les autres OS, je ne suis pas suffisament au courant de la situation mais je ne pense pas que ce soit mieux.

Oui, c'est compliqué. Je te conseillerais bien de prendre un virage à 180° et opter pour le format epub, c'est fondamentalement du HTML/CSS donc intégration tout à fait envisageable probablement sans grosse difficulté. Le problème c'est que les mauvaises habitudes ont la vie dure.
Modifié par QuentinC (05 Jul 2015 - 13:59)
Très intéressante remarque Quentin, il est vrai que l'intégration de pdf en ligne n'a pas encore été standardisée, c'est vraiment dommage et c'est de là où vient le problème...

Si je suis ta piste de réflexion, maintenant reste à savoir comment convertir les pdf en epub (si c'est faisable) et savoir comment l'intégrer.
a écrit :
Très intéressante remarque Quentin, il est vrai que l'intégration de pdf en ligne n'a pas encore été standardisée, c'est vraiment dommage et c'est de là où vient le problème...


Ca ne sera pas standardisé de sitôt, et tant mieux; ça donne meilleure légitimité à des formats comme epub qui sont bien meilleurs, et bien plus respectueux des particularismes des utilisateurs dont l'accessibilité.

a écrit :
Si je suis ta piste de réflexion, maintenant reste à savoir comment convertir les pdf en epub (si c'est faisable) et savoir comment l'intégrer.


Les convertisseurs PDF vers epub automatisés et vice-versa, ça existe, pour autant que tu ne tiens pas trop à la mise en page et pour autant que le texte du PDF n'ai pas été enregistré n'importe comment.

Pour l'intégration, en fait, le gros souci c'est que sauf plugin, les navigateurs n'affichent pas de l'epub nativement. Donc mission quasi-impossible en 2015 si tu comptes refaire exactement la même chose que PDF. C'est bien dommage compte tenu de la proximité des technologies, mais j'ose espérer qu'ils s'y mettront sérieusement. Firefox et Chrome ont déjà des plugins certes encore optionnels mais très bien fichus.

En revanche vu qu'epub en gros c'est des pages HTML dans des .zip, rien ne t'interdit d'extraire ce que tu souhaites côté serveur, tu n'es pas obligé de faire télécharger la totalité du livre à l'utilisateur (et ce n'est pas ce qu'il faut faire vu que ça ne marche pas sauf plugin). Ce n'est pas une difficulté insurmontable de codage php de faire en sorte que la navigation du livre fonctionne si tu veux donner la possibilité à l'utilisateur de naviguer.

J'évoquais epub mais en fait aujourd'hui c'est encore trop cutting edge pour pouvoir être utilisé sérieusement. Pour le moment, fais télécharger ton PDF plutôt qu'essayer de l'afficher directement.
Modifié par QuentinC (05 Jul 2015 - 20:41)
Mais il faut qu'un folder conçu en pdf soit intégré au site. C'est une obligation, va voir le début du site que j'ai réalisé sur misterjc.be/bigmatlepot/index.html (mp et user : test ).

Je pourrais enregistrer mes pdf en image et les intégrer au site, mais je n'aime pas trop cette idée, car ça prend du temps de les mettre en image. L'idéal (et c'est faisable avec iframe), c'est qu'à chaque fois que l'on veut changer le pdf sur le site (ce sera le cas toutes les deux semaines) qu'on ne doive que renommer le pdf et remplacer l'autre sur le serveur (histoire de ne pas devoir toucher au code html ou css, car celui qui le fera n'a aucune connaissances dans le domaine).

Je pense que je vais utiliser la balise html iframe et je mettrai un code qui détectera les supports où il ne s'affiche pas et le remplacera automatiquement par un lien. Bien que je n'aime pas cette solution.

Et si j'ai le temps de trouver des lecteurs pour android et iphone, alors je ferai un code de détection qui affichera le pdf avec le système que j'aurai trouvé...

Dans l'attente que quelqu'un ait une meilleure solution ?
Modifié par MisterJC (07 Jul 2015 - 21:04)
a écrit :
Je pourrais enregistrer mes pdf en image et les intégrer au site, mais je n'aime pas trop cette idée, car ça prend du temps de les mettre en image.


ET aussi, un PDF image, ça te détruit toute possibilité de faire quelque chose d'accessible.

a écrit :
Je pense que je vais utiliser la balise html iframe et je mettrai un code qui détectera les supports où il ne s'affiche pas et le remplacera automatiquement par un lien. Bien que je n'aime pas cette solution.


Encore une fois, je mettrais le lien et uniquement le lien dans tous les cas.

JE suis utilisateur de Jaws sous windows. Typiquement, je serais coincé par cette combine. Autant IE que firefox peuvent afficher des PDF dans une iframe, mais aucun de manière accessible. Du coup je n'aurais pas de lien, et donc, je ne pourrais pas lire le PDF dans Adobe Reader.

En bonus, le paramètrage des navigateurs est tellement compliqué qu'il m'est impossible de désactiver complètement ces lecteurs intégrés; et ça m'énerve; c'est comme le tentaculaire flash. Je voudrais bien qu'un lien vers un .pdf se comporte comme un lien vers un .zip ou autre chose.

Au fait, comment comptes-tu détecter le support ou non ?
QuentinC a écrit :

ET aussi, un PDF image, ça te détruit toute possibilité de faire quelque chose d'accessible.
Oui c'est bien pour ça que je ne veux pas le mettre en image Smiley cligne
QuentinC a écrit :

Encore une fois, je mettrais le lien et uniquement le lien dans tous les cas.
Il faut absolument qu'il soit affiché sur la page donc je reste sur mon idée. À moins d'avoir une solution plus efficace pour résoudre mon problème (et qui répondent à mes besoins cités ci-dessus)...
QuentinC a écrit :
JE suis utilisateur de Jaws sous windows. Typiquement, je serais coincé par cette combine. Autant IE que firefox peuvent afficher des PDF dans une iframe, mais aucun de manière accessible. Du coup je n'aurais pas de lien, et donc, je ne pourrais pas lire le PDF dans Adobe Reader.
À la limite je mettrai un lien pour télécharger le pdf en plus du lecteur, car les personnes venant sur le site ne prendront pas la peine de télécharger le pdf...
QuentinC a écrit :
Au fait, comment comptes-tu détecter le support ou non ?
Soit je fais quelques lignes de code en javascript qui détectera si c'est de l'android ou de l'apple grâce au "user-agent" côté serveur et/ou client soit je ne me fie qu'à la taille de l'écran... C'est encore à voir si je mettrai ce système-là en place.
Modifié par MisterJC (06 Jul 2015 - 15:30)
Juste une question Lionel, avec jquery l'utilisateur n'aura pas besoin d'avoir installé un lecteur de pdf au préalable (qu'il soit android, iphone, pc, mac,...) ?
Sujet clos
Aller à