Outils de publication pour le CMS d'e-sidoc

9,599 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Outils de publication pour le CMS d'e-sidoc

  1. 1. Outils de publication pour le CMS d’
  2. 2. Comment procéder pour enrichir le portail documentaire ?On peut y ajouter des documents sur différents supports. Il fautles héberger au préalable sur des sites spécialisés afin de leurattribuer une adresse URL propre ou un code qui permettra deles intégrer à e-sidoc.La plupart des plateformes d’hébergements demandent lacréation d’un compte gratuit. Il est conseillé d’utiliser un mêmelogin et mot de passe pour tous. Par exemple : Login : début de l’adresse du CDI Mot de passe : RNECela peut s’avérer utile lorsque l’on est plusieurs documentalistesen poste ou en cas de mutation.Avant de choisir une plateforme d’hébergement, il faut prendreen compte les restrictions d’accès appliquées dansl’établissement d’exercice.
  3. 3. Le langage HTMLLe HTML (« HyperText Mark-Up Language ») est un langagedit de « marquage » (de « structuration » ou de « balisage ») dontle rôle est de formaliser lécriture dun document avec des balisesde formatage. Les balises indiquent au navigateur commentafficher le contenu de la page. (mise en valeur des paragraphes,titre de la page, titre dune partie, dune sous-partie, caractères engras, retour à la ligne, etc).Ces balises fonctionnent par paire, lune définit le début dun blocet lautre la fin.Remarquez que ces deux balises ne se différencient que par unslash "/" mais il est indispensable.Par exemple, le titre dune page est codé grâce à la balise <title>,et ce de la manière suivante dans votre éditeur de texte :<title>Ceci sera le titre de la page</title>. http://jlorenne.net/initiation-html.php
  4. 4. Quelques balises HTML Balises Utilisation <html>Texte</html> Obligatoire au début et à la fin du fichier HTML <h1>Texte</h1> <h2>Texte</h2> et <h6>Texte</h6> Titre de niveau 1, 2 et 6 <i> Texte </i> Texte en italique <strong> Texte </strong> ou <b>Texte</b> Texte en gras <u>Texte </u> Texte souligné <font face="Police de caractère">Texte</font> exemple : Spécifie la police de caractère <font face="Arial">Texte</font> <font color="couleur">Texte</font> ou <font Spécifie la couleur de la police (nom de la couleur en anglais color=#RRVVBB>Texte</font> exemples : ou paramétrage de la couleur en hexadécimal <font color="brown"> Texte </font> ou (voir http://www.code-couleur.net/) <font color=#330000>Texte</font> Spécifie la taille de la police, valeur allant de 1 à 7. Ces tailles peuvent varier suivant le navigateur. Il est possible de <font size=4>Texte</font> modifier ces valeurs de façon relative : La valeur "+1" indique une augmentation de la police à la taille supérieure. Les tailles varient de 1 à 7. <font face="Comic Sans MS" color="brown" Combinaison des 3 balises précédentes : spécifie la police de size=4>Texte</font> caractères, la couleur et la taille <center>Texte</center> Centrer le texte dun titre ou dun paragraphe ou <p align="center">Texte</p> <p align="justify">Texte</p> Justifier un paragraphe <br> Saut de ligne <hr> Barre horizontale <hr color="couleur"> Barre horizontale de couleur
  5. 5. Le langage HTMLPosséder quelques rudiments d’HTML permet de modifier,par exemple, la lettre de rappel proposée par défaut dansBCDI :C:BcdiServModelesInterfaces RestitutionLettreRappelsPage.htmOuvrir le fichier avec le bloc-notes installé par défaut souswindows dans le répertoire Accessoires ou avec le logiciellibre Nvu (prononcez n-view) qui propose un éditeur depage graphique, du type WYSIWYG. Il faut au préalable letélécharger et l’installer.On peut alors modifier le texte situé entre deux balises ousupprimer tel ou tel champ qui ne semble pas indispensable.L’avantage avec Nvu c’est que plusieurs types d’affichagesont proposés.
  6. 6. Le langage HTML : la lettre de rappelEn affichage normal apparaît à l’écran la page html telle qu’elle sera vuepar un usager. (exception faite des cadres roses qui seront invisibles). On peut supprimer des balises. Le texte de la lettre de rappel apparait et peut-être modifié quel que soit l’affichage.
  7. 7. Le langage HTML : la lettre de rappelL’affichage balises HTML est un affichage de travail. On peut supprimer des balises. Le texte de la lettre de rappel apparait et peut-être modifié quel que soit l’affichage.
  8. 8. Le langage HTML : la lettre de rappelL’affichage Source montre le code HTML avec les balises en rose et lesindications de mise en page en bleu, le texte tel qu’il apparaitra est en noir. Le texte de la lettre de rappel apparait et peut-être modifié quel que soit l’affichage.
  9. 9. C’est le langage HTML qui est utilisé pour la rédaction desarticles dans E-sidoc.Nvu peut donc être utilisé pour mettre en page un article.On le prépare en mode normal puis on copie le codeHTML obtenu en mode source.
  10. 10. Et on copie ce code dans l’éditeur de source HTML d’ E-sidoc.
  11. 11. Pour obtenir :en mode rédaction d’ E-sidoc puis en affichage final
  12. 12. L’utilisation du logiciel Nvu permet de mieux comprendre lelangage HTML mais n’est absolument pas indispensable pourpeaufiner la mise en page d’un article : E-sidoc propose uneoption très pratique qui permet de copier directement un textepréparé sous Word.Pour mieux comprendre le HTML, vous pouvez consulter undiaporama concocté par Christophe Poupet :balises-du-html-au-xml
  13. 13. Insérer dans E-sidoc des documents déjà finalisés1. sous forme de texte, tableur et diaporama
  14. 14. http://fr.calameo.com/Permet de créer un livret feuilletable à partir d’un document déjà finalisé Valorisation de travaux d’élèves :  Journal scolaire,  Recueil de textes,  Carnet de voyage… Publicité autour d’une action en cours :sélection de livres pour action lecture
  15. 15. 1. Créer un compte 2. Créer une publication 3. Charger le document à publier
  16. 16. 2. Créer une publication 3. Charger le document original à publier4. Pour que la publication soit accessible à tousles utilisateurs d’ E-sidoc il faut cocher public
  17. 17. (partager/Insérer la publication/Code HTML old version)
  18. 18. Il vaut mieux insérer un mini livret en fin d’article : en pleine page l’affichage est trop petit pour être lisible et peu maniable.Reste à copier ce code dans l’éditeur de source HTML d’ E-sidoc
  19. 19. Le mini livret feuilletable, il suffitde cliquer dessus pour obtenirl’affichage en plein écran.
  20. 20. www.scribd.com/Un défilement vertical idéal pour les affichesou pourles fiches outilscar il est possible de télécharger le document
  21. 21. Attention aux droits d’auteur et à la protectiondes données et de la vie privée. En hébergeantdes données sur un site extérieur, on les publieégalement dans le catalogue de ce site.A quelles conditions ?
  22. 22. Changez éventuellement le titre du document puis cliquez sur«save». Votre document est stocké et publié sur Scribd et possèdeune adresse URL propre.Pour obtenir le code permettant d’intégrer le document dansvotre article, copiez le code qui apparaît lorsque vous cliquez surle bouton </> puis « Embed ». Puis collez-le dans l’éditeur desource HTML d’ E-sidoc.
  23. 23. Insérer dans E-sidoc des documents déjà finalisés2. Des diaporamas
  24. 24. Présentation d’ E-sidoc à Tourshttp://www.slideshare.net/cddp37/esidoc-presentation-du-portail
  25. 25. copiez le code qui apparaîtdans l’éditeur de sourceHTML d’ E-sidoc.
  26. 26. Récupérer & insérer dans E-sidoc des documentsdéjà finalisés et mis en ligne par d’autres3. de la vidéo
  27. 27. Intégrer une vidéo provenant de You tubepour mettre en valeur des nouveautésBande annonce de Plutohttp://www.youtube.com/watch?v=LOGdeaf1pNwSous la vidéo,cliquez sur le bouton « Partager ».Cliquez ensuite sur « Intégrer »et copiez le code qui apparaît dansl’éditeur de source HTML d’ E-sidoc.Pour intégrer une vidéo en plein écran il convient d’utiliser le cadre prévu pour letexte d’introduction dans « configuration de la rubrique ». Il est situé en haut depage et ne comporte pas de vignette d’où un meilleur affichage.
  28. 28. Intégrer une vidéo provenant de DailymotionÉmanant de l’INPES pour la rubrique santé copiez le code qui apparaît et collez-le dans l’éditeur de source HTML d’ E-sidoc.
  29. 29. Les aventures de Tintin sur l’INAhttp://www.ina.fr/fictions-et-animations/animation/dossier/1898/les-aventures-de-tintin.20090331.fr.html
  30. 30. Cliquez ensuite sur </>et copiez le code quiapparaît dans l’éditeur desource HTML d’ E-sidoc.
  31. 31. Insérer dans E-sidoc des documents émanantde
  32. 32. Intégrer un planDans la barre de recherche Google Mapshttp://maps.google.fr/mapstapez ladresse que vous souhaitez. Un plan apparaît.Cliquez sur licône « lien » en haut à droite du plan : copiez le code qui apparaît dans l’éditeur de source HTML d’ E-sidoc.
  33. 33. Intégrer un Google agenda :Via un compte sur Google AgendaExemple :e-sidoc Médiathèque CDDP 37Attention pour réaliser un Google agenda, vous devez au préalable créer uncompte Google.Pour cela, cliquez sur « Connexion » en haut à droite de la page daccueil deGoogle, puis sur créer un compte.Une fois connecté sur Google, cliquez sur longlet « Plus » et sélectionnez« agenda ».
  34. 34. ouvrez le menu déroulant « mesagendas »sélectionnez « paramètres delagenda ». Ensuite cliquez sur« Personnalisez la couleur, la taille etdautres options ».
  35. 35. copiez le code qui apparaît dans l’éditeur desource HTML d’ E-sidoc.
  36. 36. Cette présentation a été conçue pour animer l’atelierE-sidoc niveau 2 : Optimisation du portailIl a été proposé le 5 puis le 17 octobre 2011 au CRDP d’Orléans .Préparé par Priscilla Mommessin, documentaliste au Lycée des Métiers des Services PaulGauguin à Orléanshttp://0450786k.esidoc.fravec l’aide de Sarah Bémer, documentaliste au Lycée Claude de France de Romorantinhttp://0410017w.esidoc.fr& de Laura Petiniot, documentaliste à la médiathèque du CRDP d’Orléanshttp://0450090d.esidoc.fr

×