Intégrer des vidéos ou des sites externes dans ses articles

Dans un article, il est courant de vouloir inclure une vidéo une vidéo, une image interactive…

Le moteur WordPress n’est pas toujours adapté à la manipulation de ce type de contenus. Heureusement, Internet offre une solution : les iframes, véritables « cadres » dans l’article permettant d’afficher le contenu d’un autre site au choix dans l’espace indiqué.

Pour insérer un iframe dans son article, il suffit alors d’utiliser la balise [iframe] :

[iframe width="1280" height="850" src="//www.thinglink.com/card/920686387026460674" type="text/html" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"]

Voici les différentes options utilisées pour cette balise :

  • width : largeur du cadre (en pixels par défaut)
  • height : hauteur du cadre (en pixels par défaut)
  • src : adresse du contenu à afficher dans le cadre (ici, une image cliquable)
  • type : type de contenu à inclure, laisser « text/html » dans le doute
  • frameborder : taille en pixels de la bordure à afficher (0 pour ne pas en avoir)
  • webkitallowfullscreen/mozallowfullscreen/allowfullscreen : autoriser le plein écran dans Chrome, Firefox et les autres navigateurs
  • scrolling : afficher un ascenseur si le contenu ne tient pas dans les dimensions du cadre

Remarque : certains sites proposent déjà des codes tout prêt à insérer dans une page web. La notation <iframe> n’est pas supportée directement pas WordPress, il est nécessaire de la transformer en balise (remplacer « < » et « > » par des crochets et supprimer la partie </iframe>).

Pour une vidéo Mediane, par exemple :

<iframe frameborder="0" width="1330" height="770" src="https://be1d.ac-dijon.fr/mediane/m/338/d/i" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"></iframe>

devient

[iframe frameborder="0" width="1330" height="770" src="https://be1d.ac-dijon.fr/mediane/m/338/d/i" webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"]

Bonne rédaction 🙂

Guillaume Laville – Responsable des plateformes d’hébergement – DSI du rectorat de Dijon

Comment ajouter une vidéo dans un article de blog ?

Tout le monde le sait, un article qui comporte des images, ou encore mieux, une vidéo et un article plus lu que s’il ne contient que du texte.

Mais comment ajouter une vidéo dans un article ? En respectant les droits d’auteur ! Évidemment 😉

Cet article va être consacré à comment « intégrer » ou encore « embeder » une vidéo.

On va dans un premier temps supposer que la vidéo est déjà existante, sur Youtube ou Médiane (qui permet entre autre le dépôt et la consultation de vidéos, avec un hébergement académique).

Prenons l’exemple de la vidéo proposée par le réseau Canopé pour comprendre la classe inversée :
première possibilité : je surligne du texte et je fais un lien Hypertexte vers cette vidéo (ce que j’ai fait sur les mots « première possibilité ».)

– seconde possibilité : je vais aller chercher le code d’intégration de la vidéo pour le coller directement dans mon article. A la place d’avoir un lien, j’aurai directement la vidéo, comme l’exemple ci-dessous

Dans WordPress, vous utilisez le symbole vidéo qui se trouve dans la barre d’outils

Une fois que vous aurez cliqué sur le symbole, vous aurez la possibilité soit de renseigner l’adresse URL de la vidéo, soit d’intégrer directement l’iframe. Utiliser l’iframe vous permettra d’ajuster les paramètres de l’insertion.

Pour ce faire, je vais dans un navigateur et je lance la vidéo (depuis Youtube par exemple). Je repère le lien pour partager cette vidéo, en général sous le titre, près des « J’aime – J’aime pas ». Après avoir cliquer sur « partager, il faut trouver le code d’intégration, qui se présente comme ci-dessous :

<iframe
width= »560″ height= »315″
src= »https://www.youtube.com/embed/uLKmLDrGyjw »
frameborder= »0″
allow= »autoplay; encrypted-media »
allowfullscreen>
</iframe>

Les sauts de lignes ont été ajoutés pour gagner en lisibilité. Voici l’explication du code, car vous pouvez en modifier des éléments :

code signification
<iframe déclaration du début de l’insertion. Ne pas modifier
width= »560″ height= »315″ dimension de la fenêtre de la vidéo (en pixels). Typiquement, ce sont des paramètres que vous pouvez modifier
src= »https://www.youtube.com/embed/uLKmLDrGyjw » adresse du média que vous insérez. Ce peut être une vidéo ou tout autre type de média. Si vous le modifiez, vous modifiez le document qui s’affichera …
frameborder= »0″ précise que vous ne voulez pas de cadre autour de votre vidéo
allow= »autoplay; encrypted-media » paramètres liés à la vidéo, il vaut mieux ne pas les modifier
allowfullscreen intègre dans la vidéo un lien pour pouvoir la voir en plein écran
</iframe> fin de l’insertion

 

L’autre situation est que vous allez devoir réaliser votre vidéo, puis l’héberger sur un site, avant de pouvoir l’intégrer.

Il existe de nombreux outils qui vont vous permettre de réaliser une vidéo. Mais attention, de nombreuses questions sont à se poser en amont, et bien respecter les 3 étapes conception / réalisation / et publication.
La DANE de Dijon propose une formation de 9 heures sur cette thématique, qui ne peut-être résumée en quelques lignes.
Voici néanmoins quelques logiciels ou outils à découvrir : Edpuzzle, Camstudio, Windows Movie Maker ou encore Imovie. Vous trouverez ci-dessous des tutoriels pour certains de ces outils.

tutoriel Activ Presenter
Tutoriel Windows Movie Maker
Tutoriel Powtoon

 

Page, article, catégorie, étiquette, menu…. quelles différences ?

Vous êtes auteur ou administrateur d’un blog dans WordPress. Ce n’est pas toujours évident au début de comprendre la différence entre une page, un article, une catégorie, une étiquette (et comment faire apparaître tout cela dans les menus).

Cet article vient en complément de celui publié en décembre « Personnaliser son blog – version débutant » et de ce second, sur le même thème mais à destination de personnes moins débutantes sur WordPress.

Aussi nous ne reviendrons pas par exemple sur les différents thèmes proposés dans le cadre du concours.

Qu’est-ce qu’un article dans WordPress ? Un article comporte un titre et un corps, dans lequel vous pouvez y mettre du texte, des images, des vidéos, des liens… Les articles sont publiés de façon antéchronologique, c’est-à-dire du plus récent au plus ancien. C’est vous qui définirez le nombre d’articles accessibles depuis la page principale du blog (que l’on pourrait appeler la page « nouveauté » ou « dernières publications »). Il existe cependant plusieurs moyens de retrouver tous les articles d’un même thème, ou sur un même sujet : les associer à des étiquettes ou encore à des catégories. (cf paragraphes ci-dessous).

Qu’est-ce qu’un page dans WordPress ? Une page est un élément constitutif du menu principal du site. On ne peut pas l’associer ni à une catégorie, ni à une étiquette. Une page peut rester présente dans les menus sans « disparaître » au fur et à mesure de la publication d’autres contenus. C’est pour cela qu’une page sera utilisée par exemple pour les mentions légales, le descriptif d’un projet ou de la thématique d’un blog, une page d’accueil d’un site à laquelle on veut pouvoir accéder facilement.

Quand vous êtes dans votre tableau de bord WordPress, cliquez sur « Pages » – « Ajouter ». Trouver le titre de la page et « remplir » cette page (vous pouvez comme dans un article y déposer des images, vidéos, liens…)

Une fois votre page créée, il va falloir la faire apparaître dans les menus. Pour ce faire, passez par « Apparence » – « Menus ». Si aucun menu n’est créé, il faut créer un menu afin de pouvoir y attacher la page. Cela permettra de regrouper à un même endroit dans les menus plusieurs pages ou catégories. Dès que votre menu est créé, cliquez sur « Ajouter une page » – ouvrir le tiroir « Pages » (flèche vers le bas à droite de « Pages ») – cochez la ou les page(s) que vous souhaitez voir apparaître dans votre menu – Cliquez sur « Ajouter au menu ». Ne pas oublier d’enregistrer le menu.

Quelle est la différence entre les catégories et les étiquettes ?

Le site WordPress est un blog : par défaut, il affiche les articles du plus récent au plus ancien.
Mais il est possible de trier les articles en leur affectant une catégorie ou une étiquette.

Qu’est-ce qu’une étiquette ?  L‘étiquette ne peut pas être intégrée au menu principal. Mais elle permet également de trier les articles. En ajoutant le widget « Nuage d’étiquettes les plus souvent utilisées » dans le menu latéral droit, on obtient ainsi un autre moyen d’entrée dans les articles.

Qu’est-ce qu’une catégorie ? La catégorie est un élément constitutif du menu principal du site : en ajoutant une catégorie au menu, on l’affiche comme une rubrique dans laquelle se trouveront réunis tous les articles rattachés à cette catégorie.

Pour ajouter une catégorie dans un menu, après avoir créé cette catégorie (prendre exemple sur la création d’une page, premier paragraphe de l’article) ouvrez le tiroir « Catégories », cliquez sur « Afficher tout », cochez la ou les catégories et cliquez sur « Ajouter au menu ». Procédez de la même manière pour les étiquettes.

Exemples :

– Dans le menu principal, tri des articles par les catégories suivantes :
INFOS, CLASSE 1, CLASSE 2, CLASSE 3
En cliquant sur la catégorie CLASSE 2, on accède à tous les articles publiés par la classe 2.

– Si l’on souhaite également trier les articles de façon thématique, on peut utiliser des étiquettes :
Production écrite, Arts visuels, Sorties scolaires…
En cliquant sur l’étiquettes Sorties scolaires dans le nuage, on obtiendra tous les articles attachés à cette étiquette, par toutes les classes de l’école.

Remarque 1 : un article peut être rattaché à plusieurs catégories et/ou à plusieurs étiquettes, et cela peut être modifié après la publication.

Remarque 2 : les catégories sont indispensables si vous souhaitez créer un menu. Choisir des noms assez courts pour obtenir un menu horizontal équilibré.

Remarque 3 : on peut créer des sous-catégories, mais attention de ne pas trop découper le menu.

A noter, vous pouvez organiser vos articles à postériori en les rattachant à des étiquettes ou à des catégories. Il n’est jamais trop tard pour réorganiser un blog. Cela facilite la lisibilité de certains projets.

 

Écrire pour le blog

Oubliez les codes d’écriture de la presse écrite, le web répond à ses propres règles.

kaboompics.com_Office Space_ Woman writing

http://kaboompics.com/one_foto/1282/office-space-woman-writing#

Savez-vous que ce sont des millions de billets qui sont postés tous les jours sur la blogosphère ? Mais tous les auteurs ne connaissent pas les règles qui régissent l’art de l’écriture bloguesque… Aujourd’hui, je vous propose quelques règles simples pour vous lancer à votre tour.

 

L’internaute n’est pas un lecteur comme les autres

kaboompics.com_iPhone 6 Plus and laptop on wooden desk

http://kaboompics.com/one_foto/1113/iphone-6-plus-and-laptop-on-wooden-desk#

Sur un support numérique, la lecture se fait plus lente car il agit comme un filtre. Il en découle un certain nombre de désagréments dont :

  • une lecture plus longue et plus difficile (à cause de la luminosité et de la surcharge d’information)
  • la nécessité de capter plus rapidement l’attention du lecteur
  • le défilement des textes de haut en bas et de gauche à droite (ce qu’on nomme le scrolling) ; ce qui provoque un problème de mémorisation de la position des informations)

Pour en savoir plus sur les différences entre la lecture sur écran et sur papier, vous pouvez consulter un dossier d’Eduscol intitulé « Lecture sur écran ».

L’internaute ne lit pas, il survole les informations en diagonale. Il est attiré par des expressions percutantes et des visuels accrocheurs. Il est impatient car volatile.

Pour toutes ces raisons, en tant que rédacteur, vous devez adapter votre style d’écriture.

 

Attirer et retenir les lecteurs

billet_nuage

Que ce soit le fond ou la forme, soignez tous les aspects de votre article pour en rendre la lecture plus facile. Trouvez le juste équilibre entre le fond et la forme en écrivant un article attrayant, pratique et utile.

Un article peut se découper en quatre parties : le titre, le chapeau, le corps et la conclusion.

  • Le titre doit être considéré comme un élément capital d’un article. Il doit être suffisamment clair et percutant pour susciter la curiosité. Il doit être court (entre 4 et 10 mots).
  • Le chapô est l’occasion d’accrocher encore le lecteur et doit rassembler des informations-clés dites « les 6W » (Qui ? Quoi ? Où ? Quand ? Comment ? Pourquoi ?).
  • Le corps de l’article doit être composé de paragraphes courts où chaque idée est développée dans un paragraphe différent. Les informations les plus importantes seront positionnées au début.
  • La conclusion peut être une synthèse des éléments les plus importants, une question ouverte, une interpellation du lecteur etc.

Privilégiez les phrases courtes avec un vocabulaire varié et des paragraphes aérés. Entre deux expressions équivalentes, choisissez toujours la plus courte (par exemple, utilisez « sauf » plutôt que « à l’exception de ».

Pensez à utiliser des repères temporels fixes pour assurer la pérennité du contenu de votre article (par exemple, « en février 2014 » plutôt que « le mois dernier »). Restez vous-même : n’essayez pas d’adopter un style qui ne vous ressemble pas !

N’oubliez pas de vous faire relire pour les fautes d’orthographe mais aussi pour la compréhension de vos contenus. Votre professionnalisme pourrait être remis en cause…

Si vous souhaitez traiter d’un sujet vaste, n’hésitez pas à écrire plusieurs billets. Quant au billet, il ne doit traiter qu’un seul sujet à la fois.

 

L’importance des illustrations

N’hésitez pas à illustrer vos propos avec des photos (dont la licence vous permet la réutilisation). Un article sera bientôt publié à ce sujet. Pensez également aux infographies ou aux vidéos, des comparaisons, des liens vers d’autres articles, etc.

3ZHG0XOIT6

https://stocksnap.io/photo/3ZHG0XOIT6

Les images doivent être choisies avec soin et surtout, elles doivent être en lien avec le contenu. Pour en savoir plus, je vous invite à consulter l’article « L’image dans le texte : simple illustration ? ».

 

Écrire pour être (mieux) lu

La mise en forme est très importante :

  • pas d’italique (sauf pour les citations et les références bibliographiques) ;
  • pas de paragraphes en majuscules (dans le langage web, cela revient à hurler) ;
  • ne pas utiliser les soulignés (dans les conventions web, le soulignement est réservé aux liens hypertextes) ;
  • privilégier l’utilisation du gras (pour localiser et mettre en valeur les idées essentielles) ou encore une autre taille de police ;
  • utiliser aussi les retraits et les listes à puces…

 

Vous écrivez mais le sait-on ?

Favorisez les interactions en ouvrant les commentaires et acceptez la critique. Répondez également aux commentaires. Cela dit, soyez vigilant aux trolls. Pour en savoir plus, vous pouvez consulter l’article « Qu’est-ce qu’un Troll ? ».

Utilisez les titres pour structurer votre article. Un article « Derrière la page, du code… » vous explique pourquoi.

Utilisez des mots-clés dans des endroits stratégiques (ex. dans le titre et les sous-titres).

Pensez au référencement pour augmenter vos visiteurs. La notion de référencement sera traitée dans un autre article.

Utilisez les médias sociaux pour diffuser le lien.

 

Les 3 erreurs à éviter

 

Ne pas structurer son article.

Ecrire à chaud.

Ne pas tenir à jour son blog.

 

Vous l’aurez compris, l’écriture pour le web ne s’improvise pas, bien au contraire : elle se prépare, s’organise, se réfléchit. La bonne nouvelle, c’est que l’on peut apprendre…

PS : n’hésitez pas à réagir sur cet article pour le compléter ou le commenter.

Les finalistes du concours « Blogue ton école » ont rendu leur copie !

Cette année, les finalistes du concours de blog ont du produire un article autour de la question de la désinformation. Bravo à tous les enseignants et leurs élèves car les productions sont de grande qualité ! Vous voulez voir ? C’est par ici :o)

L’équipe de Françoise Lurier (Collège Le Mont Chatelet – Varzy) :
http://blogue-ton-ecole.ac-dijon.fr/blog/2018/10/01/des-eleves-saouls-au-college-de-varzy/

Les deux équipes de Claire Rafin (Collège André Lallemand – Pouilly-en-Auxois) :
http://blogue-ton-ecole.ac-dijon.fr/blog/2018/10/01/le-darkside-de-linfo-ne-vous-laisserez-vous-pas-pieger/
http://blogue-ton-ecole.ac-dijon.fr/blog/2018/10/01/les-fake-news-au-college/

L’équipe de Manuelle Desbrières (Collège Carnot – Dijon) :
http://blogue-ton-ecole.ac-dijon.fr/blog/2018/10/01/tous-les-enfants-francais-apprendront-obligatoirement-larabe/

L’équipe de Jérôme Virot (Lycée E.J. MAREY – Beaune) :
http://blogue-ton-ecole.ac-dijon.fr/blog/2018/10/01/attention-invasion-de-fake-news/

L’équipe de Sophie Vidal (Lycée Gabriel Voisin – Tournus) :
http://blogue-ton-ecole.ac-dijon.fr/blog/2018/10/01/attention-les-jeunes/

L’équipe de Cécile de Joie (Lycée Parc des Chaumes – Avallon) :
http://blogue-ton-ecole.ac-dijon.fr/blog/2018/10/01/leducation-aux-medias-pour-les-parents/

Rendez-vous le 10 octobre de 10h à 12h à l’UNA pour le palmarès et la remise des trophées. Celle-ci sera présidée par Frédéric Batlle, IA-IPR Établissements et vie scolaire de l’académie de Dijon et référent académique pour l’Éducation aux médias et à l’information.