EDIT : Si des personnes utilisent cette méthode pour leurs propres sites, je veux bien avoir des retours/liens. Merci ! 🙂

Attention, cette article ne traite ni des questions juridiques liées à l’affichage des images Amazon sur un portail de bibliothèque, ni de l’apparente volonté de la firme de laisser tomber son service gratuit.

J’ai donc essayé de m’appuyer sur le travail de mon stagiaire pour désormais étendre l’affichage de visuels des documents de la bibliothèque aux CD et DVD. Pour cela, je me suis donc appuyé sur l’existence du code ASIN qui est pour Amazon l’identifiant unique de chaque notice de son site (une sorte d’ISBN quoi…). Ainsi, si l’on a ce code, on pourra automatiquement retrouver l’adresse web de la notice ET de l’image liée. En effet, l’une et l’autre se compose :
http://www.amazon.fr/dp/<code ASIN>
http://images.amazon.com/images/P/<code ASIN>.01.MZZZZZZZ.jpg
À noter que l’extension .01.MZZZZZZZ.jpg permet de choisir la taille de l’image. D’autres extensions existent mais je trouvais les images ou trop grandes ou trop petites.

Sur ma page type, j’ai donc ajouté des champs lien hypertexte <a> et image <img> identifiés (« id= ») de manière précises. Ainsi :

<a target="_blank" href="" id="lienCDDVD"><img alt="La couverture n'est pas disponible" title="Source : Amazon" border="0" id="imageCDDVD" src="http://mediatheque.lorient.fr/images/px.jpg"></a>

J’y appelle également le script js (et les fonctions au cas où…) :

<script src="http://mediatheque.lorient.fr/modules/imagettesAmazon.js" type="text/javascript"></script><script type="text/javascript"> recupISBN2(); imagettes2(); liensAmazon();</script>

Le script est donc composé comme suit.
On récupère le contenu de la cellule dont l’id est isbn est qui est en fait le code ASIN :

function recupISBN2()
{
	var obj2 = document.getElementById("isbn");

var valeurISBN2 = obj2.innerHTML;

}

On crée l’adresse de l’image grâce à ce code ASIN et on remplace l’attribut src de la balise <img id= »imageCDDVD »> :

function imagettes2()
{
	var obj2 = document.getElementById("isbn");

var valeurISBN2 = obj2.innerHTML;

	var adresse = "http://images.amazon.com/images/P/" + valeurISBN2 + ".01.MZZZZZZZ.jpg";
	var obj = document.getElementById("imageCDDVD");
    obj.src = adresse;

}

Enfin, si besoin, on crée le lien renvoyant à la notice Amazon (on peut en penser ce qu’on veut mais je trouve que même concernant Amazon, c’est la moindre des choses…) et on remplace l’attribut href de la balise <a id= »lienCDDVD »> :

function liensAmazon()
{
	var obj2 = document.getElementById("isbn");

var valeurISBN2 = obj2.innerHTML;
	var adresse = "http://www.amazon.fr/dp/" + valeurISBN2;
	var obj = document.getElementById("lienCDDVD");
    obj.href = adresse;
}

Pour conclure.

Bien entendu, cette solution est également envisageable pour les livres. Pourtant, l’utilisation de l’ISBN reste autant que possible la plus simple puisque, intégré nativement aux notices Marc des différents fournisseurs, il n’y a aucune manipulation particulière pour les collègues catalogueurs (« C’est mon opinion »). Il s’agit donc bien de la limite principale de ce script/outil puisqu’il implique d’aller chercher le code ASIN à chaque fois sur les notices Amazon et (j’entends d’ici les cris d’effroi des puristes :p ) de l’indiquer dans notre SIGB en 010$a, c’est à dire en lieu et place de l’isbn.

Voici en tout cas pour le « rendu » avec le DVD du film Watchmen, les gardiens.

Pas d'utilisation commerciale - Certains droits réservés (licence Creative Commons)

« Passionnée par la littérature, je dispose d’une bonne culture générale ainsi que d’une très bonne connaissance des différents outils pédagogiques destinées à l’apprentissage des langues. »
Bon, ok. Cette demande de stage peut être intéressante… Mais bon, on est d’accord : des courriers de ce type, on en reçoit à la pelle dans les bibliothèques !

« Au cours de ma formation, j’ai pu acquérir des connaissances dans le domaine de la programmation d’applications, la réalisation de sites Internet et l’administration réseau.
Travailler au sein de votre service informatique serait pour moi une bonne expérience ainsi qu’une excellente occasion de mettre en pratique le contenu de ma formation. »
Soit. Allons-y ! Six semaines, ça risque d’être un peu court vu la tonne de demande que j’ai sous le coude…

J’ai donc accueillis ce stagiaire de BTS IRIS et l’ai fait travailler sur l’affichage des couvertures de livres sur le catalogue en ligne.

Je l’ai d’abord orienté sur une piste que j’avais auparavant exploré avec un peu d’aide (ref. 1 et ref.2) expliquée par Nicomo. Nous nous étions alors buté au problème que le serveur du portail fonctionne en PHP4 alors que certaines fonctions du script php (json_encode notamment) ne fonctionne que sous PHP5. Je lui ai demandé de trouver une fonction équivalente qui fonctionne en PHP4. Peine perdue. Des solutions existaient mais il fallait intervenir sur la configuration du serveur et ça nous menait trop loin.

Nous avons alors opté pour du javascript (de toute façon, le portail en était déjà archi-plein…). Il suffit donc d’appeler le script dans la page type des notices (chez nous, la feuille de style XML DetailHIP.xsl).  Deux fonctions sont appelée spécifiquement au chargement de la page :

<script type="text/javascript" src="http://mediatheque.lorient.fr/modules/imagettesDialogue.js"> </script><script type="text/javascript"> imagettes(); liensDialogues();</script>

Et prévoir un emplacement approprié pour les images :

<a id="lienLivre" href=""  target="_blank">
<img src="http://mediatheque.lorient.fr/images/px.jpg" id="imageLivre" border="0" title="Source : Librairie Dialogues" onerror="imgerror()" /></a>

Grâce aux ID « lienLivre » et « imageLivre »,  l’attribut href de la balise <a> sera remplis et l’attribut src de la balise <img> sera remplacé par les données liées à la notice affichée. Si aucune donnée n’est transmise par le script, la notice affichera un pixel.

Voici de quoi le script imagettesDialogue.js est composé :

  • Une fonction nécessaire pour d’anciennes versions de navigateurs (vous aurez compris qu’on parle d’IE :p) visant à éviter l’affichage de la grosse croix rouge en cas d’absence d’images.
function imgerror()
{
    var valeurISBN = recupISBN();
    var obj = document.getElementById("imageLivre");
	obj.src = 'http://mediatheque.lorient.fr/images/px.jpg';
}
  • La fonction qui sert à extraire de votre page de résultat l’ean/isbn (et de le modifier au besoin en cas d’isbn13). Il faut que la partie de la page contenant l’isbn soit identifiée par l’ID « isbn » (chez nous, il s’agit d’une cellule <td class= »opactext » id= »isbn »>) ou que vous changiez donc le code suivant document.getElementById(« id_de_votre_catalogue« ) :
function recupISBN()
{
	var obj1 = document.getElementById("isbn");

	var valeurISBN = obj1.innerHTML;
	valeurISBN = valeurISBN.replace(/\-/g, "");
	valeurISBN = valeurISBN.replace(/\./g, "");
	valeurISBN = valeurISBN.replace(/\_/g, "");

    var tempo = ISBN.parse(valeurISBN);
    if(tempo)
	{
	    return tempo.asIsbn13();
	}
}

À noter qu’il existe d’autres manières de repérer un élément sur une page.

  • Enfin les deux fonctions indispensables :
function imagettes()
{
	var valeurISBN = recupISBN();
	var adresse = "http://www.librairiedialogues.fr/ws/book/" + valeurISBN + "/cover/medium/";
	var obj = document.getElementById("imageLivre");
    obj.src = adresse;
}

function liensDialogues()
{
	var valeurISBN = recupISBN();
	var adresse = "http://www.librairiedialogues.fr/livre/" + valeurISBN;
	var obj = document.getElementById("lienLivre");
    obj.href = adresse;
}

La première envoie l’isbn récupéré au serveur d’images pour afficher celle correspondante, la seconde fait un lien vers la notice du livre sur la base de donnée référente. Au départ, nous nous étions rendu compte que cette méthode fonctionnait avec les images de la Librairie Sauramps car il suffisait de remplacer « http://www.librairiedialogues.fr/ws/book/ &raquo; + valeurISBN + « /cover/medium/ » par « http://www.sauramps.com/imagettes/ &raquo; + valeurISBN +
Mais bon, ça ne se fait pas de piocher éhontément dans une base de donnée sans autorisation donc nous la leur avons demandé puis nous nous sommes renseigné auprès d’autres librairies. Comme cela devient une habitude, la Librairie Dialogues de Brest est venue à notre rescousse. Ce sont eux qui nous ont donné les adresses d’identification des documents http://www.librairiedialogues.fr/ws/book/CODE/cover/TAILLE/ et http://www.librairiedialogues.fr/livre/CODE ou CODE est l’ean et TAILLE… la taille avec trois possibilités : medium (notre choix),  small ou small_medium

Je dois préciser bien entendu que ces adresses ne fonctionnent pas en l’état. Ce n’est qu’une fois que nous avons obtenu l’autorisation de Dialogues que nous avons pu y avoir accès, la condition (et c’est légitime) étant de faire un lien sur le site (sur leur notice du document recherché sur notre base, en l’occurrence). Pour les connaisseurs, le serveur de la librairie reconnait que la requête a été faite par le site mediatheque.lorient.fr et autorise l’affichage de l’image grâce à la mention de notre portail dans le header HTTP_REFERER.
Je dois dire que nous avons été doublement séduits par le fait de ne pas avoir à faire avec Amazon et en même temps de travailler de concert avec une librairie locale voisine.

Pour finir, il n’est pas utile de comprendre le reste du code, que vous trouverez donc ici, bien qu’il soit indispensable car il s’occupe de gérer les transformations autour de l’isbn. Et voilà le résultat !

Affichage des couvertures Dialogues

N’hésitez pas à poser des questions ou, pour les techniciens, à enrichir ce code.

Prérequis :
– avoir la main sur le serveur pour y déposer un fichier Javascript
– avoir la main sur la structure de votre SIGB/portail pour pouvoir interférer sur la notice type
– avoir l’autorisation d’une librairie en ligne pour accéder à leurs données

Bon ben voilà, je m’y mets aussi enfin…

Vendredi 16 septembre 2011 dernier, j’ai animé une journée de la formation Les ressources numériques en ligne pour les bibliothèques organisé pour le Grand ouest par le CNFPT d’Angers.

J’ouvre ce blog pour restituer avant tout cette journée : je verrai par la suite ce que j’en ferai.

Voici donc :

Voici une webographie moins visuelle reprenant les sites/exemples présentés :  .