De nombreuses ressources en ligne offrent dans leurs possibilités de partage, de générer un code d'intégration. Contrairement aux liens hypertextes qui obligent le lecteur à changer de site, Ce code va permettre d'intégrer ces ressources directement sur le portail dans le corps de l'article ou de la notice.
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é"",
Lorsqu'on clique sur le bouton html, l'éditeur de source html s'ouvre. Le texte saisi s'affiche en langage html. C'est ici qu'il faudra coller le code d'intégration (ou iframe, ou embed) pour intégrer les médias distants, hébergés par les différents services en lignes présentés ci-dessous
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.
Exemple : Exemple de notice enrichie d'une image et d'une vidéo dans la notice BCDI : aperçu sur esidoc
Héberger des images en ligne pour les intégrer dans Esidoc⚓
Toile libre et autres services Framasoft⚓
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)
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
Conseil : Modifier la taille de l'image
Soit directement dans l'éditeur de texte en étirant l'angle du cadre image
Soit en rajoutant les balises de taille : width="200px" height="400px"
On peut soit rajouter des valeurs fixes (mais attention à conserver les porportions, sans quoi l'image sera déformée, soit des pourcentages : width="75%" (n'appliquer le pourcentage que sur la hauteur ou la largeur)
exemple : <img width="200px" height="400px" src="adresse URL de l'image" />
ou : <img width="75%" src="adresse URL de l'image" />
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="500" height="181"
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 :
Attention cependant au respect du droit d'auteur : Si le site diffuseur ne propose pas de code d'intégration, c'est probablement qu'il ne souhaite pas partager cette vidéo sous forme d'embed. Prudence !
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 pdf 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="98%" height="500"
sandbox> <p> <a href="adresse url de la page WEB"</a> </p> </iframe>
Exemple : Pages web intégrées dans esidoc
Attention cependant à ce type d'intégration car la lecture n'est pas toujours très ergonomique. Parfois un lien est préférable. A utiliser donc, avec modération...
Intégrer un module de recherche dewey⚓
Méthode :
Dans l'éditeur de source html, insérer le code suivant :
<iframe src="http://www.tahitidocs.com/web2/dewey/dewey1.html" scrolling="yes" frameborder="0" height="400" width="500"></iframe>
intégrer un questionnaire⚓
Méthode :
Créer un Formulaire dans Google Drive (Google Form)
Cliquer sur Envoyer
Cliquer sur le symbole Intégrer le code HTML
Modifier largeur=500 hauteur =450
Cliquer sur copier, le code d'intégration est sélectionné ensuite faire un CTRL C pour copier ce code HTML
Dans l'éditeur de source html d'e-sidoc, coller le code d'intégration
Intégrer un calendrier google agenda⚓
Méthode :
Aller dans les paramètres de l'agenda
sélectionner l'agenda
intégrer l'agenda
personaliser
Cliquer dans la fenêtre suivante Personnaliser la couleur, la taille et d'autres options
Mettre à jour le code HTML (étape obligatoire pour que l'agenda soit réactualisé)
Copier le code HTML et le coller dans E-sidoc.
Si l'affichage est tronqué, possibilité de modifier hauteur (height) et largeur (width) dans le code HTML. Conseil : height=400 et width=400
intégrer un lien vers une adresse mail⚓
Méthode :
Sélectionner la zone de texte à partir de laquelle quel on veut insérer le lien
Cliquer sur l'icône Insérer un lien
Saisir l'adresse mail dans URL du lien de la façon suivante mailto:adressemel@adresse.fr
Mettre à jour puis Enregistrer
intégrer un document hébergé sur une dropbox ou sur un drive⚓
Attention :
Il semblerait qu'il ne soit plus possible de rendre public les documents et donc de les intégrer directement dans la page. Seul le lien ouvrant une nouvelle page est disponible
DROPBOX⚓
Méthode :
Ouvrir Dropbox.com –Choisir le dossier et ensuite le fichier.
Cliquer sur le bouton Partager
Copier l'adresse de partage
Puis l'introduire dans E-sidoc. Le fichier sera téléchargeable.
DRIVE⚓
Méthode :
Ouvrir Google Drive -Accéder à Google Drive par le web
sélectionner un fichier
clic droit
partager
insérer le lien dans l'article
Intégrer un tableau One drive⚓
Méthode :
Ouvrir un tableau enregistré dans onedrive
fichier
partager
incorporer
sélectionner la feuille à afficher
modifier les paramètres d'affichages
sélectionner la dimension du tableau
sélectionner la case d'ancrage à partir de laquelle va s'afficher le tableau (A1 en général)
sélectionner les cases à afficher : A1 D6 dans cet exemple
Attention :
Il ne faut pas que le tableau soit trop large sinon la lecture sera perturbée : dans ce cas, préférer un simple lien
Méthode :
Copier/coller le code d'intégration généré dans l'éditeur html d'esidoc
mise à jour - enregistrer
Insérer un livre numérique à partir de Gallica⚓
Méthode :
1. Choisir le livre numérique http://gallica.bnf.fr/
2. Cliquer sur le symbole Partager
3. Cocher le document en entier
4. Choisir les options d'affichage
5. Copier le code d'intégration
6. Coller le code d'intégration dans l'éditeur de source html d'e-sidoc
Intégrer des podcast audio⚓
Choisir un podcast sur radio France par exemple
copier le code d'intégration
coller le code dans l'éditeur html
mise à jour
