E-sidoc niveau avancé

1. E-sidoc niveau avancé
Publication de contenus
grâce à différents outils :
code html, plateformes d’hébergement, code embed
Canopé de la Haute-Marne - Mai 2015

2. Publier un article « enrichi »
Le module « Ajouter un article »
fonctionne comme un traitement
de texte basique :
• Choix du format = gras, italique,
souligné
• Taille des caractères (4 tailles
de caractères prédéfinies)
• Ajout de puces et numéros
Le bouton Word permet de coller
un texte mis en forme sous Word.

3. Insérer un lien
Un lien hypertexte peut renvoyer à
• un site ou une page internet,
• une adresse mail (avec le préfixe
« mailto: »)
Définir les propriétés d’édition du
lien
• URL ou adresse du lien
• Cible (_blank pour l’ouverture
du lien dans une autre fenêtre)
• Titre (facultatif)

4. Publier du contenu en html
E-sidoc offre la possibilité de publier du contenu en html (hypertext mark-up
language)
Ce langage informatique formalise l’écriture d’un document avec des « balises »
de formatage indiquant au navigateur comment afficher le contenu de la page
(fond et forme)

5. Html : les bases
Balises permettant la structuration du texte
Balise ouvrante < ; balise fermante />
<h2>titre formaté</h2>
br />Retour à la ligne
Pour obtenir :
Mémoire des génocides
et prévention des crimes
contre l'humanité
Mémoire des génocides
et prévention des crimes contre l'humanité
<h2><center><strong>Mémoire des génocides
br />et prévention des crimes
br />contre l'humanité</strong></center></h2>
<h4><center><strong>Mémoire des génocides
br />et prévention des crimes contre
l'humanité</strong></center></h4>

6. Caractéristiques de texte : la couleur
Chaque couleur se transcrit en code,
une suite de 6 caractères précédés de # :
rouge : #FF0000 vert : #21F400
(http://www.code-couleur.com/)
Pour appliquer une couleur à un texte, utiliser ces balises :
Pour obtenir :
Texte en rouge
Texte en vert
<span style="color:#FF0000;">Texte en rouge</span>
<span style="color:#21F400;">Texte en vert</span>
=> Attention à la syntaxe, les signes " : # ; sont indispensables

7. Caractéristiques de texte : la police
Taille : 12px par défaut dans E-sidoc
Police : Verdana, Arial, Calibri…
Pour obtenir :
Texte en gros
Texte en Verdana
<span style="font-size:18px;">Texte en gros</span>
<FONT face="Verdana">Texte en Verdana</FONT>

8. Intégration d’éléments
Possibilité d’intégrer de multiples objets dans les textes des
articles ou des actualités, en exploitant la possibilité d'accéder au
code html :
• des images hébergées en ligne (Joomeo, HostingPic, Flickr, …)
• des vidéos en ligne (YouTube, DailyMotion, Vimeo, INA, …),
• des présentations (Prezi, SlideShare, etc.)
• des documents numériques mis en page (Calameo, Scribd, Issuu, ...)
• des objets programmés (« Citer ses sources », lecteur de livres numérisés de
la BnF, …)
• des plans ou des agendas Google,
• des fils Twitter
• etc.

9. Pour tous ces éléments, la procédure est la même : copie du code
html, ou du code embed, proposé par les plateformes
d’hébergement, et report de ce code dans l’éditeur de code source
d’E-sidoc
Attention :
Les mentions de hauteur et largeur d’un élément intégré ne doivent pas
dépasser :
Height = 480
Width = 525
Le code embed est un code html appelant un lecteur interactif (Prezi,
Pearltrees, etc.)

10. Intégration d’une image
Exemple d’une image hébergée sur un site en ligne, comme
Joomeo http://www.joomeo.com/fr/
Coller dans l’éditeur de code source d’un article dans E-sidoc

11. Intégration d’une vidéo
Exemple d’une vidéo hébergée sur YouTube :
La charte de la laïcité à l’école, par Abdennour Bidar
https://www.youtube.com/watch?v=YnC7IgUq30A
• Copier le code html
• Le coller dans l’éditeur de code source d’un article dans E-sidoc

12. Intégration d’un document
Exemple d’un document texte hébergé sur Issuu :
Lien direct
ou
Code embed