Usages multimédia dans spip - publié le 21/12/2011 mis à jour le 19/06/2015 La publication des documents multimédia Descriptif :

Description
Espace pédagogique de l'académie de Poitiers Guide des auteurs du web pédagogique Rédiger - Auteurs : Stéphane Penaud - Jean-Marc Lucot Usages multimédia

Please download to get full document.

View again

of 10
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Health & Medicine

Publish on:

Views: 19 | Pages: 10

Extension: PDF | Download: 0

Share
Transcript
Espace pédagogique de l'académie de Poitiers Guide des auteurs du web pédagogique Rédiger - Auteurs : Stéphane Penaud - Jean-Marc Lucot Usages multimédia dans spip - publié le 21/12/2011 mis à jour le 19/06/2015 La publication des documents multimédia Descriptif : L article s adresse aux auteurs qui souhaitent insérer dans les articles, des images, du son et de la vidéo. La question des albums et des collections multimédias y est abordée. Sommaire : Album Photos Sons Vidéos Images L article s adresse aux auteurs qui souhaitent insérer dans leurs articles, des images, du son et de la vidéo. La question des albums et des collections multimédias y est abordée. Album Photos Création de l album -* rassembler toutes vos images dans un dossier ; compresser le tout en un fichier zip 1 ; charger le fichier zip en cliquant sur le bouton Ajouter un document situé au pied de la page aperçu/propriétés de l article, un message d avertissement demande si le serveur doit décompresser le paquet ; répondre décompresser ; choisir parmi les options proposées : Conserver l archive après extraction : permet d ajouter aussi le fichier zip parmi les documents joints, Titrer selon le nom des fichiers 2 : permet d appliquer le nom du fichier comme titre de l image, Déposer toutes les images dans le portfolio : pour créer un album d images ou insérer ces images sous forme de vignette cliquable dans l article ; valider ; compléter le champ Titre de chaque image 3 en cliquant sur le lien Modifier de chaque boîte image créée. Votre album photos est prêt! - Sur la partie publique, un lien «Images» est généré automatiquement dans le pied de l article (le lien peut être déplacé dans le corps de l article : cf. section Insertion de l album ci-dessous). Il ouvre une nouvelle fenêtre personnalisée, qui présente un catalogue des vignettes cliquables à gauche et un espace 1/10 d affichage des images à droite (le vignettage est assuré par spip). Insertion de l album dans l article Le lien Images présent dans le pied de l article peut être déplacé dans le corps de l article. Il suffit d utiliser la balise portfolioxx ou XX est le numéro de l article contenant l album photo (on peut donc importer dans un article X l album d un article Y) 4. Insertion de la vignette ou de l image Si vous souhaitez insérer une réduction cliquable d une des images de l album dans votre article (l album disparaîtra si toutes les images sont insérées), il suffit d insérer la balise docxx 4 à l endroit de votre choix. Si vous souhaitez insérer une image de l album en taille réelle dans votre article (celle-ci disparaissant alors de l album), il suffit de cliquer sur le bouton Retirer cette image du portfolio dans la boîte image (page d édition de l article) et d insérer la balise imgxx 4 à l endroit de votre choix (ATTENTION : l image ne doit pas faire plus de 500 pxs de large). Nota bene : dans l album, il est possible de classer les images téléchargées par numéro (chiffre + point + espace dans le champ titre de la boîte document ) et ainsi de hiérarchiser la présentation de ces dernières dans l album (le numéro permet de classer les images mais n apparaît pas en affichage public). Sons Pré-requis : pour pouvoir lire les fichiers sons dans un article, ceux-ci doivent être au format MP3 5. Si ce n est pas le cas, il sera nécessaire d utiliser un logiciel pour convertir ce fichier audio au format attendu. Insertion du son dans l article Si vous souhaitez permettre la lecture du son dans votre article, il suffit d insérer le code docxx xx à l endroit voulu, puis de remplacer doc par emb pour permettre l affichage du lecteur MP3. Exemple : docxx xx devient embxx xx Remarque : Il reste possible pour l internaute de télécharger le fichier en cliquant sur le lien qui se positionne entre parenthèses derrière le titre (cf. illustration ci-dessous). Fichier mp3 - discipline anglais (MP3 de 57.1 ko) Illustration chapitre Création d une collection sons rassembler toutes vos fichiers mp3 dans un dossier ; compresser le tout en un fichier zip 6 ; 2/10 charger le fichier zip en cliquant sur le bouton Ajouter un document situé au pied de la page aperçu/propriétés de l article, un message d avertissement demande si le serveur doit décompresser le paquet ; répondre décompresser ; choisir parmi les options proposées : Conserver l archive après extraction : permet d ajouter aussi le fichier zip parmi les documents joints, Titrer selon le nom des fichiers 7 : permet d appliquer le nom du fichier comme titre du son ; valider ; compléter les champs Titre et Description de chaque son 8 en cliquant sur le lien Modifier de chaque boîte son créée. Votre collection sons est prête! Sur la partie publique, un lien «Sons» est généré automatiquement dans le pied de l article (le lien peut être déplacé dans le corps de l article : cf. section Insertion de sons en collection ci-dessous). Il ouvre une nouvelle fenêtre personnalisée, qui présente un lecteur avec les différents sons téléchargés. Insertion de sons en collection dans l article Pour intégrer une collection de sons dans l article, il suffit d utiliser la balise audio en y insérant le numéro des documents SON concernés. Exemple : Il y a 2 documents SON (397, 398) à insérer dans l article pour insérer ces sons, il suffit d écrire : audio 397,398 pour insérer tous les sons d un article (exemple l article 101 qui contient 4 documents SON), il suffit d écrire : audio article101 N.B : il est possible, comme pour tout document, de choisir son positionnement dans la page ( left , center ou 3/10 right ) en utilisant la syntaxe ci-dessous : audio 397,398,399 center audio article101 center Nota bene : dans la collection sons il est possible de classer les documents téléchargés par numéro (chiffre + point + espace dans le champ titre de la boîte document ) et ainsi de hiérarchiser la présentation de ces derniers dans la collection où ils se trouvent (le numéro permet de classer les images mais n apparaît pas en affichage public). Vidéos L encodage des vidéos se fera au format MP4 afin de permettre une lecture directe dans l article. Ce format a aussi l avantage de permettre la lecture de ces vidéos sur les appareils mobiles (tablettes, smartphones etc.). Si votre fichier n est pas au bon format, vous devrez le convertir à l aide d un logiciel adéquat. La vidéo est automatiquement redimensionnée de façon optimale (si celle-ci est trop grande) lors de l insertion dans l article (540 pixels de large). Importation de la vidéo dans le site Une fois la vidéo importée dans le site, un encadré jaune comportant le message Cette vidéo n est pas correctement encodée. Consultez l aide peut apparaître dans la boîte de propriété du média. Cela signifie que cette vidéo ne sera pas lisible sur tous les supports et qu il faut envisager de la réencoder à l aide du logiciel Miro Video Converter. Insertion de la vidéo dans l article Si vous souhaitez permettre la lecture de la vidéo dans votre article (cf. exemple ci-dessous), il suffit d insérer le code docxx xx à l endroit voulu, puis de remplacer doc par emb pour permettre l affichage du lecteur vidéo. Exemple : docxx xx devient embxx xx Fichier MP4 - discipline technologie (durée 00:05) (MPEG4 de 41.2 ko) Insérer une vignette (pour modifier l image d accueil du lecteur). Éditer les propriétés du document en cliquant sur le lien Modifier pour accéder en bas de la fenêtre au lien Changer puis : 1. charger l image (celle-ci doit être au format jpg ou png) ; 2. cette image doit faire la même taille que celle de la vidéo. 4/10 Création d une collection vidéos rassembler toutes vos fichiers MP4 dans un dossier ; compresser le tout en un fichier zip 9 ; charger le fichier zip en cliquant sur le bouton Ajouter un document situé au pied de la page aperçu/propriétés de l article, un message d avertissement demande si le serveur doit décompresser le paquet ; répondre décompresser ; choisir parmi les options proposées : Conserver l archive après extraction : permet d ajouter aussi le fichier zip parmi les documents joints, Titrer selon le nom des fichiers 10 : permet d appliquer le nom du fichier comme titre de la vidéo ; valider ; compléter les champs Titre et Description de chaque vidéo 11 en cliquant sur le lien Modifier de chaque boîte vidéo créée. Votre collection vidéos est prête! Sur la partie publique, un lien «Vidéos» est généré automatiquement dans le pied de l article (le lien peut être déplacé dans le corps de l article : cf. section Insertion de vidéos en collection ci-dessous). Il ouvre une nouvelle fenêtre personnalisée, qui présente un lecteur avec les différentes vidéos téléchargées. 5/10 Insertion de vidéos en collection dans l article Pour intégrer une collection de vidéos dans l article, il suffit d utiliser la balise video en y insérant le numéro des documents VIDEO concernés 12. Exemple : Il y a 3 vidéos (397, 398, 399) à insérer dans l article pour insérer ces vidéos, il suffit d écrire : video 397,398,399 Exemple d insertion de vidéos en collection. pour insérer toutes les vidéos d un article (exemple l article 101 qui contient 4 vidéos), il suffit d écrire : video article101 Exemple d insertion de toutes les vidéos en collection. N.B : il est possible, comme pour tout document, de choisir son positionnement dans la page ( left , center ou right ) en utilisant la syntaxe ci-dessous : video 397,398,399 center video article101 center Nota bene : dans la collection vidéos il est possible de classer les documents téléchargés par numéro (chiffre + point + espace dans le champ titre de la boîte document ) et ainsi de hiérarchiser la présentation de ces derniers dans la collection où ils se trouvent (le numéro permet de classer les images mais n apparaît pas en affichage public). Insertion de vidéos Youtube et Viméo Une page dans l article Usages particuliers dans SPIP est dédiée à l ajout de vidéos issues de Youtube et Viméo : voir Usages particuliers dans SPIP 6/10 Images Vous souhaitez insérer une image dans votre article A. Télécharger votre image (cette image ne doit pas dépasser 500 pxs de large) en utilisant l encadré Ajouter une image ou un document . B. Décrire l image (cf. illustration ci-contre) Pour compléter les propriétés de l image, cliquer sur le lien Modifier de la boîte correspondante puis : 1 : compléter le champ Titre de l image (ce titre apparaîtra dans la partie publique dans une bulle sur l image au passage du pointeur de la souris - le descriptif sera positionné sous l image si vous utilisez la balise doc plutôt que la balise img ), 2 : cliquer sur le bouton Enregistrer . C. Insérer l image dans l article : 3 : copier la balise de votre choix ( imgxx left ; imgxx center ou imgxx right ) D. Coller la balise à l endroit souhaité E. L image est à présent insérée dans votre article, à l endroit de votre choix Exemples d insertion d images dans un article 7/10 Insérer une image centrée dans un texte Illustrations et correspondance des raccourcis SPIP J'ai embrassé l'aube d'été. img224 center Rien ne bougeait encore au front des palais. L'eau était morte. [...] Insérer une image à droite d un texte J'ai embrassé l'aube d'été. img224 right Rien ne bougeait encore au front des palais. L'eau était morte. [...] Insérer une image à gauche d un texte J'ai embrassé l'aube d'été. img224 left 8/10 Rien ne bougeait encore au front des palais. L'eau était morte. [...] Insérer deux images dans un texte img226 left J'ai embrassé l'aube d'été. clear Rien ne bougeait encore au front des palais. img226 right L'eau était morte. Les camps d'ombres ne [...] ATTENTION : notez la position de la balise clear 13 à l endroit où l on souhaite que les effets de la balise left précédente s arrête (pour éviter que le texte ne continue à remonter à droite de l image)! Insérer la vignette cliquable d une image dans l article 1. Télécharger votre image en utilisant l encadré Ajouter une image ou un document ; 2. cliquer sur le lien Modifier de la boîte image ; 3. compléter les champs Titre de l image 14 et Description 15 puis cliquer sur le bouton Enregistrer ; 9/10 4. cliquer sur le lien Déposer cette image dans le portfolio ; 5. copier la balise doc de votre choix ( docxx left , docxx center ou docxx right ) ; 6. coller la balise à l endroit souhaité 16 ; 7. la vignette est à présent insérée dans votre article. Cette vignette se présente comme une réduction (150x150 pixels) de l image d origine. On visualisera cette dernière dans une nouvelle fenêtre en cliquant sur la vignette. Exemple d une vignette cliquable : Les marches de l automne (1) Avec Windows xp : clic droit sur le dossier Envoyer vers Dossier compressé (2) Cette option ne remplace pas l ajout obligatoire d un titre explicite (3) Consigne impérative (cf. accessibilité) (4) Le choix du positionnement est bien entendu possible en utilisant center, left ou right (5) Le format MP3 présenté sur Wikipédia (6) Avec Windows xp : clic droit sur le dossier Envoyer vers Dossier compressé (7) Cette option ne remplace pas l ajout obligatoire d un titre explicite (8) Consigne impérative (cf. accessibilité) (9) Avec Windows xp : clic droit sur le dossier Envoyer vers Dossier compressé (10) Cette option ne remplace pas l ajout obligatoire d un titre explicite (11) Consigne impérative (cf. accessibilité) (12) Remarque : La taille du lecteur peut être ajustée en ajoutant le paramètre largeur X hauteur dans la balise. Exemple : video 397,398,399 center 400x224 . (13) cf. chapitre relatif à la balise clear (14) ce titre apparaîtra dans la partie publique dans une bulle sur la vignette au passage du pointeur de la souris (15) ce descriptif apparaîtra dans la partie publique sous l image (16) Les règles d insertion de la balise sont identiques aux exemples précédents. Avertissement : ce document est la reprise au format pdf d'un article proposé sur l'espace pédagogique de l'académie de Poitiers. Il ne peut en aucun cas être proposé au téléchargement ou à la consultation depuis un autre site. 10/10
Related Search
Similar documents
View more...
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks