J-30 pour s’inscrire au concours

Nous sommes déjà à un mois de la clôture des inscriptions pour cette session. Il est encore temps de vous inscrire.

Vous hésitez ? Je vous invite à voir les productions des équipes de l’année dernière, ou encore à lire l’article « Pourquoi faire un blog avec ses élèves ? » avec celui-ci en complément : « Mais en fait, c’est quoi le concours de blog? »

Pour vous inscrire, c’est simple : cliquez ici !

Des images réutilisables pour ses articles

Internet est un vaste océan, dont chaque goutte d’eau est apportée par des milliers, pardon des milliards de contributeurs…

Comme l’océan, on peut naviguer d’une page à l’autre, accoster à quelques sites ou réseaux sociaux plus appréciés que les autres. À la surface, des milliers d’images flottent. Belles, émouvantes, frappantes, intrigantes, elles nous touchent et on les adore. Et puis, quand on publie un article, une image, c’est tout de suite de l’aération, un complément à notre texte, un élément de l’identité visuelle de notre blog, etc.

Alors, pour illustrer ses articles, nous avons deux possibilités :

  • réaliser soi-même des images (oui, mais on n’a pas tous la chance de voyager au bout du monde et de revenir avec des photographies d’îles paradisiaques…, ni d’être Picasso et de savoir utiliser des logiciels de dessin…)
  • prendre des images déjà disponibles sur internet…

Et précisément, il y en a des milliers… mais apprécieriez-vous de voir votre article, les dessins que vous avez réalisés être utilisés sans votre accord ?

Certaines personnes l’acceptent et le disent sans que l’on ait même besoin de leur demander. Ils utilisent des licences, comme les licences Creative Commons. Quant aux autres, leur silence ne vaut pas accord… et aux yeux de la loi par défaut leurs images sont leur propriété, protégée par le copyright.

Alors, pour ne pas retenir uniquement le goût salé de l’océan avec des contenus pris sans accord, voici une vidéo vous expliquant comment trouver des images réutilisables pour une publication sur internet :

Maintenant que vous avez trouvé, n’oubliez pas :

  • de citer l’auteur et les autres mentions, selon les licences ;
  • lorsque vous publiez une image personnelle de préciser vous aussi la licence que vous avez choisie ;
  • les conseils de Christelle en glissant des textes de substitution, afin que le grand océan soit accessible à tous !

Des images en fond transparent

Est-ce que cela vous est déjà arrivé de vouloir superposer des images et d’avoir l’arrière-plan de l’une d’elles, peut-être blanc, qui vous en empêchait ? Alors il est temps de se pencher sur les images en fond transparent…

Une image en fond transparent a plusieurs avantages :

– elle s’intègre mieux dans la page
– elle adopte automatiquement la couleur d’arrière-plan
– elle est plus légère que la même image avec un fond uni

Il est possible de supprimer le fond uni d’une image pour le rendre transparent, avec le logiciel GIMP par exemple, mais le résultat n’est pas toujours satisfaisant.

Voici un petit tutoriel expliquant comment faire : http://libresavous.com/doc/gimp-rendre-transparent-le-fond-uni-dune-image/

Les 3 formats les plus répandus sur internet sont le PNG, le GIF et le JPG.

Le format PNG est un format compressé (la taille des images est adaptée à la publication sur internet) qui n’altère pas la qualité de l’image lors de la compression et qui gère la transparence.
Le format GIF permet de faire des images animées (façon Tumblr), gère la transparence, mais lors de la compression l’image perd nettement en qualité.
Le JPG ne gère pas la transparence, et perd en qualité lors de la compression.

On optera donc en priorité pour le format PNG pour les images et le format GIF pour des animations, ces deux formats gérant la transparence.

Alors, à vous de jouer !

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