SlideShare uma empresa Scribd logo
1 de 30
Outils de publication pour le CMS d’
Comment procéder pour enrichir le portail documentaire ?



On peut y ajouter des documents sur différents supports. Il faut
les héberger au préalable sur des sites spécialisés afin de leur
attribuer une adresse URL propre ou un code qui permettra de
les intégrer à e-sidoc.




La plupart des plateformes d’hébergements demandent la
création d’un compte gratuit. Il est conseillé d’utiliser un même
login et mot de passe pour tous.
A. Le langage HTML

Le HTML (« HyperText Mark-Up Language ») est un langage
dit de « marquage » (de « structuration » ou de « balisage ») dont
le rôle est de formaliser l'écriture d'un document avec des balises
de formatage. Les balises indiquent au navigateur comment
afficher le contenu de la page (mise en valeur des
paragraphes, titre de la page, titre d'une partie, d'une sous-
partie, caractères en gras, retour à la ligne, etc).

Ces balises fonctionnent par paire, l'une définit le début d'un bloc
et l'autre la fin.
Remarquez que ces deux balises ne se différencient que par un
slash "/" mais il est indispensable.

Par exemple, le titre d'une 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
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 d'un titre ou d'un 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
C’est le langage HTML qui est utilisé pour la rédaction des
articles dans E-sidoc.
Le logiciel libre Nvu peut être utilisé pour mettre en
page un article. Il faut au préalable le télécharger et
l’installer. On prépare ensuite l’article dans Nvu en
mode normal puis on copie le code HTML obtenu en
mode source.
Et on copie ce code dans l’éditeur de source HTML d’ E-sidoc.
Pour obtenir :
en mode rédaction d’ E-sidoc   puis en affichage final
Il est possible aussi d’utiliser la fonction de l’éditeur wysiwig d’e-
sidoc :

     coller du texte tel que copié à partir d’un
document Microsoft Word


pour obtenir la mise en forme que l’on souhaite.
B. Insérer dans E-sidoc des documents déjà
finalisés
1. sous forme de texte, tableur et diaporama
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
1. Créer un compte                  2. Créer une publication




          3. Charger le document à publier
2. Créer une publication




            3. Charger le document original à
            publier




4. Pour que la publication soit accessible à tous
les utilisateurs d’ E-sidoc il faut cocher public
(partager/
Insérer la publication/
Code HTML old version)
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
Le mini livret feuilletable, il suffit
de cliquer dessus pour obtenir
l’affichage en plein écran.
www.scribd.com/
Défilement vertical

Idéal pour les affiches ou pour les fiches outils car il est possible de
télécharger le document
Changez éventuellement le titre du document puis cliquez sur
« save ». Votre document est stocké et publié sur Scribd et
possède une adresse URL propre.
Pour obtenir le code permettant d’intégrer le document dans
votre article, copiez le code qui apparaît lorsque vous cliquez sur
le bouton </> puis « Embed ». Puis collez-le dans l’éditeur de
source HTML d’ E-sidoc.
B. Insérer dans E-sidoc des documents déjà
finalisés
2. Des diaporamas
Présentation d’ E-sidoc à Tours
http://www.slideshare.net/cddp37/esidoc-presentation-du-portail
copiez le code qui apparaît
dans l’éditeur de source
HTML d’ E-sidoc.
C. Récupérer & insérer dans E-sidoc des
documents déjà finalisés et mis en ligne par d’autres
3. de la vidéo
Intégrer une vidéo provenant de You tube
pour mettre en valeur des nouveautés
Bande annonce de Pluto
http://www.youtube.com/watch?v=LOGdeaf1pNw




Sous la vidéo,
cliquez sur la case « Partager ».


Cliquez ensuite sur « Intégrer »
et copiez le code qui apparaît dans
l’é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 le
texte d’introduction dans « configuration de la rubrique ». Il est situé en haut de
page et ne comporte pas de vignette d’où un meilleur affichage.
Intégrer une vidéo provenant de Dailymotion
Émanant de l’INPES pour la rubrique santé




                                              copiez le code qui apparaît
                                              dans l’éditeur de source
                                              HTML d’ E-sidoc.
Les aventures de Tintin sur l’INA
http://www.ina.fr/fictions-et-animations/animation/dossier/1898/les-aventures-de-
tintin.20090331.fr.html
Cliquez ensuite sur </>
et copiez le code qui
apparaît dans l’éditeur de
source HTML d’ E-sidoc.
Insérer dans E-sidoc des documents émanant
de
Intégrer un plan

Dans la barre de recherche Google Maps
http://maps.google.fr/maps
tapez l'adresse que vous souhaitez. Un plan apparaît.
Cliquez sur l'icône « lien » en haut à droite du plan :




                                                      copiez le code qui apparaît
                                                      dans l’éditeur de source
                                                      HTML d’ E-sidoc.
Intégrer un Google agenda :

Via un compte sur Google Agenda
Exemple :
e-sidoc Médiathèque CDDP 37

Attention pour réaliser un Google agenda, vous devez au préalable créer un
compte Google.
Pour cela, cliquez sur « Connexion » en haut à droite de la page d'accueil de
Google, puis sur créer un compte.
Une fois connecté sur Google, cliquez sur l'onglet « Plus » et sélectionnez
« agenda ».
Une fois votre Google agenda créé et
rempli, cliquez sur la flèche située à droite
du nom de votre agenda et sélectionnez
« paramètres de l'agenda ». Ensuite cliquez
sur « Personnalisez la couleur, la taille et
d'autres options ».
copiez le code qui apparaît dans l’éditeur de
source HTML d’ E-sidoc.

Mais conteúdo relacionado

Mais procurados

HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
Vlad Posea
 
Html de base
Html de baseHtml de base
Html de base
krymo
 
Charte graphique multimédia - Web
Charte graphique multimédia - WebCharte graphique multimédia - Web
Charte graphique multimédia - Web
Royer Sophie
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEB
Gaspar Daniel
 

Mais procurados (20)

HTML basics
HTML basics HTML basics
HTML basics
 
cours Php
cours Phpcours Php
cours Php
 
Formation HTML pour Bac Informatique
Formation HTML pour Bac InformatiqueFormation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Html
HtmlHtml
Html
 
Html de base
Html de baseHtml de base
Html de base
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Programmation web
Programmation webProgrammation web
Programmation web
 
Css
CssCss
Css
 
Charte graphique multimédia - Web
Charte graphique multimédia - WebCharte graphique multimédia - Web
Charte graphique multimédia - Web
 
Css+html
Css+htmlCss+html
Css+html
 
Alimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEBAlimentation et Reporting de Bases de données via le WEB
Alimentation et Reporting de Bases de données via le WEB
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Intégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsIntégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to Basics
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
XHL8
XHL8XHL8
XHL8
 

Semelhante a Outils de publication pour e-sidoc

seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
Bruno Delb
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
Thabet Chokri
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutes
Netpathie
 

Semelhante a Outils de publication pour e-sidoc (20)

Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
Html
HtmlHtml
Html
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
CSS 3
CSS 3CSS 3
CSS 3
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Construire un blog avec canalblog.
Construire un blog avec canalblog.Construire un blog avec canalblog.
Construire un blog avec canalblog.
 
Formation web
Formation webFormation web
Formation web
 
Chap 2 animations___vf
  Chap 2 animations___vf  Chap 2 animations___vf
Chap 2 animations___vf
 
Cours html5
Cours html5Cours html5
Cours html5
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutes
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 

Outils de publication pour e-sidoc

  • 1. Outils de publication pour le CMS d’
  • 2. Comment procéder pour enrichir le portail documentaire ? On peut y ajouter des documents sur différents supports. Il faut les héberger au préalable sur des sites spécialisés afin de leur attribuer une adresse URL propre ou un code qui permettra de les intégrer à e-sidoc. La plupart des plateformes d’hébergements demandent la création d’un compte gratuit. Il est conseillé d’utiliser un même login et mot de passe pour tous.
  • 3. A. Le langage HTML Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises indiquent au navigateur comment afficher le contenu de la page (mise en valeur des paragraphes, titre de la page, titre d'une partie, d'une sous- partie, caractères en gras, retour à la ligne, etc). Ces balises fonctionnent par paire, l'une définit le début d'un bloc et l'autre la fin. Remarquez que ces deux balises ne se différencient que par un slash "/" mais il est indispensable. Par exemple, le titre d'une 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. 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 d'un titre ou d'un 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. C’est le langage HTML qui est utilisé pour la rédaction des articles dans E-sidoc. Le logiciel libre Nvu peut être utilisé pour mettre en page un article. Il faut au préalable le télécharger et l’installer. On prépare ensuite l’article dans Nvu en mode normal puis on copie le code HTML obtenu en mode source.
  • 6. Et on copie ce code dans l’éditeur de source HTML d’ E-sidoc.
  • 7. Pour obtenir : en mode rédaction d’ E-sidoc puis en affichage final
  • 8. Il est possible aussi d’utiliser la fonction de l’éditeur wysiwig d’e- sidoc : coller du texte tel que copié à partir d’un document Microsoft Word pour obtenir la mise en forme que l’on souhaite.
  • 9. B. Insérer dans E-sidoc des documents déjà finalisés 1. sous forme de texte, tableur et diaporama
  • 10. 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
  • 11. 1. Créer un compte 2. Créer une publication 3. Charger le document à publier
  • 12. 2. Créer une publication 3. Charger le document original à publier 4. Pour que la publication soit accessible à tous les utilisateurs d’ E-sidoc il faut cocher public
  • 14. 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
  • 15. Le mini livret feuilletable, il suffit de cliquer dessus pour obtenir l’affichage en plein écran.
  • 16. www.scribd.com/ Défilement vertical Idéal pour les affiches ou pour les fiches outils car il est possible de télécharger le document
  • 17. Changez éventuellement le titre du document puis cliquez sur « save ». Votre document est stocké et publié sur Scribd et possède une adresse URL propre. Pour obtenir le code permettant d’intégrer le document dans votre article, copiez le code qui apparaît lorsque vous cliquez sur le bouton </> puis « Embed ». Puis collez-le dans l’éditeur de source HTML d’ E-sidoc.
  • 18. B. Insérer dans E-sidoc des documents déjà finalisés 2. Des diaporamas
  • 19. Présentation d’ E-sidoc à Tours http://www.slideshare.net/cddp37/esidoc-presentation-du-portail
  • 20. copiez le code qui apparaît dans l’éditeur de source HTML d’ E-sidoc.
  • 21. C. Récupérer & insérer dans E-sidoc des documents déjà finalisés et mis en ligne par d’autres 3. de la vidéo
  • 22. Intégrer une vidéo provenant de You tube pour mettre en valeur des nouveautés Bande annonce de Pluto http://www.youtube.com/watch?v=LOGdeaf1pNw Sous la vidéo, cliquez sur la case « Partager ». Cliquez ensuite sur « Intégrer » et copiez le code qui apparaît dans l’é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 le texte d’introduction dans « configuration de la rubrique ». Il est situé en haut de page et ne comporte pas de vignette d’où un meilleur affichage.
  • 23. Intégrer une vidéo provenant de Dailymotion Émanant de l’INPES pour la rubrique santé copiez le code qui apparaît dans l’éditeur de source HTML d’ E-sidoc.
  • 24. Les aventures de Tintin sur l’INA http://www.ina.fr/fictions-et-animations/animation/dossier/1898/les-aventures-de- tintin.20090331.fr.html
  • 25. Cliquez ensuite sur </> et copiez le code qui apparaît dans l’éditeur de source HTML d’ E-sidoc.
  • 26. Insérer dans E-sidoc des documents émanant de
  • 27. Intégrer un plan Dans la barre de recherche Google Maps http://maps.google.fr/maps tapez l'adresse que vous souhaitez. Un plan apparaît. Cliquez sur l'icône « lien » en haut à droite du plan : copiez le code qui apparaît dans l’éditeur de source HTML d’ E-sidoc.
  • 28. Intégrer un Google agenda : Via un compte sur Google Agenda Exemple : e-sidoc Médiathèque CDDP 37 Attention pour réaliser un Google agenda, vous devez au préalable créer un compte Google. Pour cela, cliquez sur « Connexion » en haut à droite de la page d'accueil de Google, puis sur créer un compte. Une fois connecté sur Google, cliquez sur l'onglet « Plus » et sélectionnez « agenda ».
  • 29. Une fois votre Google agenda créé et rempli, cliquez sur la flèche située à droite du nom de votre agenda et sélectionnez « paramètres de l'agenda ». Ensuite cliquez sur « Personnalisez la couleur, la taille et d'autres options ».
  • 30. copiez le code qui apparaît dans l’éditeur de source HTML d’ E-sidoc.