e sidoc niveau avancé html

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

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.

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)

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)

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>

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

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>

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.

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 = 480Width = 525

Le code embed est un code html appelant un lecteur interactif (Prezi, Pearltrees, etc.)

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

Intégration d’une vidéoExemple d’une vidéo hébergée sur YouTube :

La charte de la laïcité à l’école, par Abdennour Bidarhttps://www.youtube.com/watch?v=YnC7IgUq30A

• Copier le code html• Le coller dans l’éditeur de code source d’un article dans E-sidoc

Intégration d’un documentExemple d’un document texte hébergé sur Issuu :

Lien direct

ou

Code embed