Le CMS Esidoc offre la possibilité de charger une image directement pour illustrer un article ou une actualité, mais cette fonction est assez limitée puisqu'on ne peut pas importer l'image directement dans le corps du texte de l'article. D'autre part l'affichage des vignettes de livres est conditionnée par la saisie du code barre dans BCDI, mais pour les DVD ou les autres supports, aucune image ne s'affiche. Pour pallier à ces limitations et enrichir vos notices ou articles avec des éléments multimédias il est parfois nécessaire d'avoir recours à des médias distants, hébergés en ligne. Cette rubrique à pour but de vous donner quelques solutions pratiques.
La fonction HTML Pour intégrer un média distant dans Esidoc et BCDI : principes de base⚓
Méthode : Dans Esidoc
Pour intégrer et afficher un média distant (texte, image, vidéo, page web...) sur le portail esidoc, il faut utiliser la fonction d'édition html.
Le bouton html, en haut à droite est présent dans tous les menus d'édition de texte d'esidoc : "Configuration", "Publier du contenu" : "article" ou "actualité"",
Méthode : Dans BCDI
Il est possible d'intégrer ce code directement dans le résumé des notices de BCDI à la suite du texte.
Pour enrichir les notices des ouvrages de votre base BCDI, il est possible de faire apparaître des images, animations et vidéos. Cette fonction est utile pour les bootrailer, ou vidéorègles des jeux, mais aussi pour attribuer une images aux DVD, et autres supports dépourvus de vignettes dans esidoc
Cela a un double avantage :
Donne une autre dimension aux recherches dans e-sidoc en rendant plus dynamiques les fiches des ouvrages,
Peut éviter, dans e-sidoc, d'avoir à créer des articles contenant les animations crées par les élèves puisque celles-ci seront déjà présentes dans la base BCDI.
Héberger des images en ligne pour les intégrer dans Esidoc⚓
Toile libre et autres services Framasoft⚓
![](../res/toile-libre.png)
Service gratuit d'hébergement d'images. La création d'un compte n'est pas nécessaire, elle est simplement facultative, mais fortement recommandée ! Elle permettra de retrouver ses images hébergées, de les gérer (suppression) et d'obtenir à tout moment une série de liens permettant de les afficher, de les intégrer dans une page web, etc...
Toile libre offre l'avantage de générer directement un code d'intégration
Méthode :
Avec le bouton"Parcourir", sélectionnez sur votre ordinateur l'image à héberger
Vous pouvez ensuite lui appliquer des mots clés et une description pour le référencement sur les moteurs de recherche ou cocher la case "Je ne veux pas que mon image apparaisse dans les moteurs de recherche" si vous voulez la rendre "privée" (ou plutôt accessible seulement via votre portail)
L'image chargée s'affiche alors, ainsi que les différents liens d'intégration à copier.
Dans notre cas ceux sont les deux derniers qui nous intéressent :
Insérer la miniature à votre site : vous donnera une image réduite adaptée au format des articles. C'est le format que je conseille
Insérer l'image à votre site : affichera l'image dans sa taille réelle. Risque de sortir du cadre de publication, donc moins recommandé
Dans les deux cas il sera néanmoins possible de redimensionner l'image dans l'article sur esidoc
Copiez le texte du lien sélectionné
Complément : Autres services d'hébergement
Voici deux autres services de Framasoft : Framapic et Lut.im.
L’intérêt de ces deux services est qu'ils sont libres, sécurisés et respectueux des données hébergées en proposant un chiffrement des données. Il est possible de choisir la durée de l'hébergement
En revanche s'ils permettent de générer différents types de liens (visualiser, télécharger), ils ne proposent pas directement de code d’intégration : il faut donc générer ce code soi-même (cf tuto plus bas : code html pour générer un code d'intégration)
Framapic est un service en ligne libre qui permet de partager des images de manière confidentielle et sécurisée. Vos images sont chiffrées et stockées sur les serveurs sans qu'il soit possible de les déchiffrer.
Les images sont chiffrées sur le serveur (Lutim ne stocke pas la clé).
Flickr⚓
Flickr
appartient à Yahoo
permet le stockage 1To de photos et vidéos
récupère toutes les informations de l'image (appareil, date, etc.)
propose une application mobile synchronisable
permet le partage et le réglage de la confidentialité
permet la récupération dans la résolution d'origine
analyse les images (reconnaissance intelligente)
![](../res/flickr.png)
Code HTML pour intégrer une image⚓
Méthode :
Pour intégrer une image en ligne, il faut d'abord faire un clic droit sur l'image dans le navigateur et sélectionner "afficher l'image".
Copiez ensuite l'adresse URL de l'image et insérez la dans la ligne de code ci dessous :
<img src="adresse URL de l'image" />
Copiez la ligne de code HTML pour intégrer l'image sur votre portail
Attention :
Vous pouvez appliquer ce code à n'importe quelle image en ligne. En revanche, si le site qui diffuse cette image décide de ne plus la publier votre lien sera mort et l'image ne s'affichera plus sur votre portail. Il est donc conseillé, dans la mesure du possible, d'héberger vous même vos images afin de contrôler la durée de publication.
Rappel :
Pour les notices de DVD ou autres supports ne disposant pas de vignettes dans esidoc, vous pouvez intégrer ce code directement dans le résumé de la notice dans BCDI.
héberger et intégrer des vidéos dans BCDI et Esidoc⚓
Youtube, Dailymotion, Vimeo⚓
Youtube, Dailymotion, Vimeo sont les trois principales plate-formes d’hébergement de vidéo.
Pour déposer une vidéo il faut d'abord créer un compte gratuit.
Il est conseillé de dédier une adresse mail spéciale afin de ne pas être envahi par les publicités. Si l'on possède une adresse Gmail ou un compte Facebook, la création du compte peut parfois être simplifiée.
Une fois le compte créé, il suffit de charger sa vidéo sur la plate-forme. Les plateformes d'hébergement proposent différentes options d'importation. Vimeo, par exemple offre la possibilité de charger la vidéo directement depuis une dropbox ou un drive.
Une fois la vidéo chargée, on peut régler les options de publication : confidentialité, tags, options de partages, etc..
Code d'intégration des Vidéos⚓
Si l'option "permettre l'intégration", cochée par défaut dans les options de publication, n'a pas été désactivée, le code d'intégration est disponible avec l’icône Cette icône se trouve soit dans l'angle en haut à droite lorsqu'on passe la souris sur la vidéo,
soit en dessous de la vidéo, comme sur Youtube
Parmi les options de partage, choisir : intégrer, ou code d'intégration, ou embed, ou iframe, selon les cas
Il ne reste ensuite plus qu'à copier le code d'intégration proposé.
Conseil :
Lorsqu'on récupère le code d'intégration, il est souvent possible de régler la taille du document dans les paramètres ou options.
Suivant la plate-forme support, les options de dimensions ne se situent pas au même endroit.
Le document à intégrer ne devra pas dépasser 500 pixels de large, sous peine d'être tronqué dans e-sidoc.
Format conseillé pour l'affichage des vidéos dans esidoc: width="300" height="180"
Héberger et publier une vidéo avec le mediacenter académique (plateforme académique sécurisée)⚓
Déjà utilisé par des webmestres de sites disciplinaires ou d'établissement, des animateurs d'ateliers vidéos dans les collèges ou des formateurs, le mediacenter académique (http://mediacenter.ac-montpellier.fr) permet, dans un espace centralisé, de déposer des vidéos, de les gérer et de les diffuser sur tout type d'espace.
Cette plateforme, hébergée sur les serveurs de la DASI est donc exempte de publicité.
La diffusion s'effectue très simplement par un lien permanent ou par l'intégration du code d'un lecteur exportable, compatible avec la plupart des sites web.
Ce lecteur issu de la technologie HTML5 permet également la consultation des vidéos sur tablettes et smartphones.
L'utilisation avancée du service, offre la possibilité :
de créer des chapitres directement en ligne
d'annoter certains passages
d'associer un document à une vidéo
d'ajouter des sous-titres après le dépôt de la vidéo
et de ralentir ou d'accélérer la vitesse de lecture
source : http://www.ac-montpellier.fr/cid91592/le-mediacenter-academique.html
Pour utiliser la plate-forme mediacenter, il est nécessaire de demander l'ouverture d'un compte auprès des services académiques.
Pour toute information : contact-assistance@ac-montpellier.fr
Complément : Générer un code d'intégration pour les vidéos en ligne ne proposant pas ce service
Certains sites diffusent des vidéo mais ne proposent pas de code d'intégration dans les options de partage. Dans ce cas il est possible de se servir d'un petit utilitaire en ligne pour générer le code d'intégration à partir de l'adresse URL de la vidéo :
Rappel :
Il est possible d'intégrer le code directement dans le résumé de la notice dans BCDI : utile par exemple pour les booktrailer ou videorègles de jeux pour qu'ils apparaissent directement dans la notice sur esidoc.
Héberger et intégrer des documents texte avec CALAMEO⚓
CALAMEO⚓
Calaméo est un service en ligne qui permet la conversion gratuite de documents en publications numériques.
Calaméo permet également aux utilisateurs d'intégrer des éléments multimédia (vidéos, extraits sonores, animations interactives) à l'intérieur de leurs publications.
Fonctionnalités⚓
Calameo est un site pour publier et partager vos documents en ligne.
Il permet d'intégrer facilement des éléments multimédia (vidéos, animations interactives) dans vos publications.
La version gratuite permet de publier :
Nombre de documents illimité
Nombre de pages par document illimité
Nombre de lectures par mois illimité
Temps de stockage illimité
Vous téléversez votre fichier (pdf, word, excel, open office) sur le serveur. Il est automatiquement converti au format flash.
Par la suite, vous pourrez transmettre le lien de votre document.
Calaméo vous offre aussi un lecteur exportable qui vous permet d'intégrer vos documents sur votre site Web. (par exemple e-sidoc ou site d'établissement)
Les publications sont mises en valeur grâce à un large choix d'options de personnalisation (image de fond, ambiance sonore, liens interactifs, etc.).
Calaméo vous permet également de partager vos publications avec les personnes de votre choix et cela en toute sécurité.
Des options payantes avec beaucoup plus de fonctionnalités sont disponibles ici : http://fr.calameo.com/upgrade/
(source : https://frama.link/3tcfqqKt)
Rappel : Seuls certains formats sont convertis.
Il faut que votre document d'origine soit en format pdf, issu de Word (format .doc ou .docx), issu de Powerpoint (formats .ppt, .pps ou .pptx) ou encore d'Open/LibreOffice.
Méthode : Quelques aides à l'utilisation de l'outil.
(source : https://frama.link/oWMvDcxk)
Exemple : Utilisations
Calaméo peut être utilisé pour mettre en valeur des productions d'élèves ou soi même produire des documents de type catalogues thématiques, promotion de projets...
Classe de 6e 4, collège la Garenne de Voiron. Raconte-moi Susie en images : ICI
Classe de 6e C, collège Voltaire, Remoulins. Les douze travaux d'Hercule : ICI
Des publications au CDI : ICI
Journal scolaire : ICI
Complément : Intégration d'un Calaméo dans e-sidoc
Une fois le document enregistré dans votre espace Calaméo, vous choisissez le type de partage :
partage par lien
partage par insertion, Calaméo vous donne le "code html" de votre publication à coller dans e-sidoc.
Tutoriel de publication e-sidoc, correspondant à l'ancienne version de Calaméo. Les boutons ont changé de couleur mais les fonctionnalités restent identiques : Publier_sur_Esidoc_avec_Calameo_2013-01.pdf
Sur Calaméo : ICI
Complément : Intégrer l'aperçu d'un pdf en ligne
Si vous souhaitez faire apparaître sur votre portail l'aperçu d'un document pdf publié en ligne, vous pouvez utiliser le même utilitaire en ligne que pour les vidéos, en générant un code d'intégration avec : http://tools.webmasters.sk/embedded-media.php
Intégrer une page web⚓
Code Html avec la balise <iframe> :
<iframe width="100%" height="500" src="adresse url de la page WEB"> </iframe>
Il est conseillé de rajouter le lien de la page pour les navigateurs qui ne supportraient pas les iframe et n'afficheraient pas la page :
<iframe src="adresse url de la page WEB" width="100%" height="500"
sandbox> <p> <a href="adresse url de la page WEB"</a> </p> </iframe>
Insérer un lien actif dans une notice BCDI⚓
Il est possible d'intégrer un lien cliquable, directement dans le résumé d'une notice de BCDI.
Cette option qui suppose d'écrire le lien en code HTML, a pour avantage de faire apparaître la ressource directement dans le corps de la notice. En effet, lorsque l'on rentre un lien web dans le champs "ressources associées" de BCDI, celui-ci n’apparaît que dans un onglet de la notice sur Esidoc et le lecteur n'explore pas toujours cette option.
Méthode : Code pour l'écriture du lien
<a href="adresse URL de la page web"> masque </a>
Exemple :
<a href="http://ludikecole.fr/wp-content/uploads/2015/07/Gagne-ton-papa-Fiche-jeu.pdf "> Fiche pédagogique </a>
Complément : Ouvrir le lien dans une autre fenêtre ou un autre onglet
Pour que le lien ne s'ouvre pas sur la même page, mais dans une autre fenêtre ou un autre onglet, il faut rajouter un élément à la ligne de code :
<a href=" http://ludikecole.fr/wp-content/uploads/2015/07/Gagne-ton-papa-Fiche-jeu.pdf "target="_blank" > Fiche pédagogique </a>
Conseil : Sauter une ligne
Lorsqu'on intègre une vidéo ou une image à une notice dans BCDI, il ne sert à rien de sauter une ligne en mode texte pour aérer la notice. Pour que le saut de ligne soit pris en charge, il est nécessaire de le remplacer par la balise HTML: <br />
Exemple : écriture de la notice html dans BCDI et aperçu dans esidoc
<a href='http://pix.toile-libre.org/?img=1490307524.jpg'><img src='http://pix.toile-libre.org/upload/img/1490307524.jpg' /></a>
<br />
En duel, soyez le plus rapide à remplir votre espace avec les pièces imposées. En solo, formez un maximum de figures parmi les milliers de combinaisons possibles. Et grâce au nouveau livret Houdini, réalisez même des figures en 3D ! Seul ou à 2, le plaisir du jeu sera au rendez-vous pour toute la famille ! Un jeu de logique et de construction incontournable !
<br />
<iframe width="300" height="180" src="https://www.youtube.com/embed/ymV772vGXJ8?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
<br /><br />
<a target="_blank" href=" http://ludikecole.fr/wp-content/uploads/2015/07/Gagne-ton-papa-Fiche-jeu.pdf"> Fiche pédagogique </a>
Intégrer un texte défilant dans e-sidoc⚓
Voici un site proposant de paramétrer un texte défilant.
Copier le code html généré et le coller dans la section (ou corps de l'article) en cliquant sur le petit onglet HTML.
Mettre à jour l'éditeur pour avoir un aperçu.
En re-cliquant sur HTML, il est possible modifier la largeur et la hauteur du bandeau.