E-sidoc niveau avancé
Publication de contenus
grâce à différents outils :
code html, plateformes d’hébergement, code embed...
Publier un article « enrichi »
Le module « Ajouter un article »
fonctionne comme un traitement
de texte basique :
• Choix ...
Insérer un lien
Un lien hypertexte peut renvoyer à
• un site ou une page internet,
• une adresse mail (avec le préfixe
« m...
Publier du contenu en html
E-sidoc offre la possibilité de publier du contenu en html (hypertext mark-up
language)
Ce lang...
Html : les bases
Balises permettant la structuration du texte
Balise ouvrante < ; balise fermante />
<h2>titre formaté</h2...
Caractéristiques de texte : la couleur
Chaque couleur se transcrit en code,
une suite de 6 caractères précédés de # :
roug...
Caractéristiques de texte : la police
Taille : 12px par défaut dans E-sidoc
Police : Verdana, Arial, Calibri…
Pour obtenir...
Intégration d’éléments
Possibilité d’intégrer de multiples objets dans les textes des
articles ou des actualités, en explo...
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éb...
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 d...
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
...
Intégration d’un document
Exemple d’un document texte hébergé sur Issuu :
Lien direct
ou
Code embed
Prochain SlideShare
Chargement dans…5
×

E sidoc niveau avancé html

4 535 vues

Publié le

E-sidoc niveau avancé

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
4 535
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 347
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

E sidoc niveau avancé html

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Intégration d’un document Exemple d’un document texte hébergé sur Issuu : Lien direct ou Code embed

×