Archives pour la catégorie Les coulisses du web

Un plugin pour rendre ses articles plus interactifs

Utilisation de H5P dans WordPress : #1 présentation générale

Utilisation de H5P dans WordPress : #2 Créer son premier diaporama

Utilisation de H5P dans WordPress : #3 Ajouter des activités

Utilisation de H5P dans WordPress : #4 Publier le diaporama dans un article

N’hésitez pas à signaler dans les commentaires vos chefs d’œuvre !

Merci de faire la demande par mail à Fouzia Salihi ou Yasmine Ziati pour que l‘on vous installe ce qu’il faut dans votre blog pour pouvoir utiliser H5P ! Il faut 2 minutes pour le faire.

Vous voulez de l’interactivité dans vos articles ?

Rappelez vous, dans ce blog plusieurs articles vous proposent déjà des outils ou techniques pour dynamiser vos articles :  comment insérer une vidéo, ou encore comme intégrer une activité H5P dans un article.

En complément de ces deux articles, je vous propose ici une sélection non exhaustive d’éléments interactifs que vous pouvez intégrer dans votre blog.

– Thinglink : cet outil en ligne permet de positionner sur une image des tags qui deviendront des liens vers des vidéos, des définitions, des documents. Vous devez vous inscrire. Voici une petite vidéo de présentation :

Une fois votre Thinglink terminé, vous pourrez l’intégrer dans vos article : cliquez sur « Share » dans votre compte Thinglink. Cochez « ifram » – Copier le code proposé, puis dans votre article WordPress, cliquez sur l’icone « insérer/modifier un média » et collez le code.

Attention petite astuce : votre code ifram commence par des balises <. Il faut supprimer cette première balise et la remplacer par un crochet ouvert. Idem pour la dernière balise de votre code, il faut la supprimer et la remplacer par un crochet fermé.

Genially, l’outil qui donne vie à vos contenus.

Voici un exemple de ce qui peut être réalisé.

Le code proposé ci-dessous est la version simplifiée. Voici comment apparaît le code à insérer dans l’article, qui correspond au genially ce-dessus. En rouge tout ce qui doit être supprimé – En vert tout ce qui doit être remplacé.
Code modifié : [ iframe frameborder= »0″ width= »1200″ height= »800″ src= »https://view.genial.ly/5a1d5045f8582727a0530e6c » type= »text/html » allowscriptaccess= »always » allowfullscreen= »true » scrolling= »yes » allownetworking= »all » ]

Code d’origine : <div style= »width: 100%; »><div style= »position: relative; padding-bottom: 66.67%; padding-top: 0; height: 0; »><iframe frameborder= »0″ width= »1200″ height= »800″ style= »position: absolute; top: 0; left: 0; width: 100%; height: 100%; » src= »https://view.genial.ly/5a1d5045f8582727a0530e6c » type= »text/html » allowscriptaccess= »always » allowfullscreen= »true » scrolling= »yes » allownetworking= »all »></iframe></div></div>

 

Une fois votre compte ouvert, et votre genially créé, vous procéderez de la même façon que pour le Thinglink. Pour tout ajustement de votre intégration (genially trop grand, mal positionné), reportez-vous à l’article « Comment ajouter une vidéo dans un article de blog? »

LearningApps : vous ne connaissez pas encore le site LearningApps qui vous permet de créer ou de réutiliser des applications (modules) de différents types (classement par paire  – regroupement – classement sur un axe – mise en ordre – QCM – texte à trou – placement sur une image….)

Prenons un exemple qui va nous rappeler des souvenirs : Une application sur les verbes irréguliers en anglais. Soit je créé mon application, soit j’en trouve une existante qui me convient. Je repère sous l’application le code iframe, je le copie et je le colle en passant par le bouton « insérer/modifier un média » de WordPress. Et bien sur je pense à remplacer la première balise et la dernière par des crochets (ouvert/fermé).

Si vous avez d’autres idées, merci d’utiliser les commentaires, je compléterai l’article au fur et à mesure des propositions.

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

 

Par où commencer ?

Pour bien commencer le concours de blog, il est important de bien comprendre ce qu’est un « blog », connaître la signification de certains termes récurrents et savoir où trouver de l’aide. C’est ce que vous propose cet article.

Définition d’un blog

Le terme blog provient d’une contraction anglophone : Web + Log = Blog. En français, nous pouvons le traduire par journal (log) en ligne (web).
À la manière d’un journal, un blog est constitué d’articles, parfois appelés billets, écrits au fur et à mesure, et apparaissant dans un ordre antéchronologique, c’est-à-dire du plus récent au plus ancien.
Le plus souvent, un blog contient des articles sur un même thème, écrit par un  auteur exprimant son point de vue et définissant ainsi son identité.

Il n’est pas possible d’opposer site internet et blog. Le blog est un type de site internet qui a vocation à évoluer, à s’enrichir régulièrement de nouveaux articles et à traduire une identité, une opinion ou encore une actualité.

La plupart des blog sont créés à l’aide d’outils permettant de travailler le contenu et l’apparence séparément. Ces outils, conçus pour permettre aux auteurs de se concentrer davantage sur le contenu, sont dénommés Système de Gestion de Contenu, dont l’acronyme anglais CMS signifie Content Management System.

Logo officiel de WordPress

WordPress est un CMS parmi les plus populaires pour commencer son blog. C’est l’outil utilisé dans le cadre de ce concours de blog.
Comme la plupart des CMS, il est constitué d’une partie publique, visible de tous les internautes, et d’une partie privée, réservée aux auteurs pour leur permettre d’écrire les articles et paramétrer l’apparence et les fonctionnalités du blog.

 

Demander l’ouverture d’un blog

Afin de participer au concours, vous devez avoir un blog mis en place à cet effet. Plusieurs cas peuvent se présenter.

Pour les écoles élémentaires

Les écoles élémentaires peuvent bénéficier d’un blog d’école antérieur au concours (site internet de l’école). Dans ce cas, elles indiqueront dans le formulaire d’inscription si elles souhaitent utiliser ce blog ou si elles préfèrent demander la création d’un nouveau blog dédié au concours (blog qui sera hébergé par le rectorat, avec une adresse URL en blogue-ton-ecole.ac-dijon.fr).

Les écoles n’ayant pas encore de site d’école peuvent soit demander via le centre de service (serveur d’assistance, depuis votre PIA) la création d’un site d’école, soit en passant par le formulaire d’inscription depuis le blog du concours, se faire créer un blog spécialement pour le concours (plus pour un projet spécifique, en lien avec une classe, sur une durée moins longue qu’un site d’école).

Blog-ecole-3cas

Pour les collèges et lycées

Pour les établissements secondaires, les professeurs porteurs de projet demanderont la création d’un blog dédié au concours en précisant le texte qu’ils souhaitent voir apparaître dans l’adresse internet du blog.

Dans tous les cas, il est nécessaire de procéder à votre inscription au concours par l’intermédiaire de ce formulaire. En cas de création d’un nouveau blog, une convention d’hébergement devra être signée par le directeur ou le chef d’établissement, et validée par un CA pour le second degré.

Pour les établissements qui veulent renouveler l’aventure, un avenant à la convention est disponible.
Avenant à la convention

Où trouver de l’aide

Tout au long de l’année, des articles qui accompagnent les participants au concours sont publiés sur le blog du concours.

Bien que WordPress soit relativement simple à prendre en main, certains apprécieront de trouver de l’aide afin de les aider à se familiariser à ce nouvel outil.

WordPress étant un système largement diffusé, une large documentation est disponible. Néanmoins, certains passages de cette documentation officielle ne sont pas encore traduits :

En outre, pour accompagner les écoles bénéficiant d’un blogue d’école fourni par l’Académie de Dijon , un site d’aide propose des articles d’aide pour les opérations les plus courantes.

Enfin, de nombreux sites proposent des tutoriels pour aider les utilisateurs de WordPress, que ce soit à propos de questions techniques ou de conseils à la rédaction. En voici quelques-uns :