French Friday : Trucs et astuces du mois d’Avril 2017/ Tips & Tricks of the Month April 2017

0
1020
trucs et astuce moodle par https://formations-digitales.fr
Nous avons besoin de vous pour améliorer le French Friday cliquer ICI

Comme nous sommes le 1er vendredi du mois d’Avril C’est le bon jour pour partager quelques trucs et astuces avec vous.

Nous savons toutes et tous que rendre un cours engageant pour les apprenants est important.

J’aime bien utiliser le concept de carte de navigation pour illustrer une progression pédagogique ou pour orienter les apprenants.

Je construis des zones cliquables sur ces cartes pour adresser soit des pages soit des sections d’un cours ou simplement des liens externes.

Il est possible de réaliser ces cartes cliquables avec Gimp ou Photoshop. Je ne sais pas le faire alors j’utilise des balises HTML dans l’éditeur de texte Atto de  Moodle 😉

Pour cela je commence par passer en mode HTML (le bouton  <>). Je modifie les paramètres de l’image et j’utilise les balises  <MAP> et <AREA>.

Voilà comment faire, c’est un petit peu technique mais le résultat vaut vraiment cet effort 🙂 Déjà regardons l’image que vous avez mis dans l’éditeur.

Syntaxe des balises <IMG>

<IMG SRC="URL_de_l'image" NAME="nom_de_l'image" WIDTH="largeur" HEIGHT="hauteur" ALT="commentaire" BORDER="épaisseur_de_la_bordure" ALIGN="alignement" HSPACE="marge_horizonale" VSPACE="marge_verticale" USEMAP="#nom_de_la_carte">.

Syntaxe des balises <MAP>

<MAP NAME="nom_de_la_carte">
différentes balises <AREA>
</MAP>

Les attributs de la balise <AREA> sont NAME : le nom de la zone, SHAPE : le type de zone (cercle, rectangle ou polygone), COORDS : les coordonnées de la zone (séparées par des virgules), HREF : l’adresse destination, ALT : le commentaire qui apparaîtra lorsque le curseur de la souris passera sur la zone.

Syntaxe des balises <AREA>

 <AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées"

Il y a plusieurs types de zone :
Zone circulaire :
Une zone circulaire est définie par la balise <AREA SHAPE=”circle”> et dont l’attribut COORDS prend pour valeurs la liste des abscisse, ordonnée à l’origine du centre et le rayon du cercle.
Syntaxe :

 <AREA SHAPE="circle" COORDS="x,y,rayon" HREF="URL_de_destination">

Zone rectangulaire
Une zone rectangulaire est définie par la balise <AREA SHAPE=”rect”> et dont l’attribut COORDS prend pour valeurs les coordonnées des coins supérieur gauche et inférieur droit séparées par des virgules.
Syntaxe :

 <AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF="URL_de_destination">

Zone polygonale :
Une zone polygonale est définie par la balise <AREA SHAPE=”poly”> et dont l’attribut COORDS prend pour valeurs la liste des abscisse et ordonnée à l’origine de chacun des points.
Syntaxe :

 <AREA SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,x4,y4,...x27,y27,x1,y1" HREF="URL_de_destination">

Maintenant à vous de réaliser des cartes cliquables pour vos apprenants !

Enjoy 🙂

Nous avons besoin de vous pour améliorer le French Friday cliquer ICI

@jmd87fr pour le French Fridayjmd87fr


We need you to improve the French Friday click HERE


As we are the first Friday of April, I decided it was a good day to share some tips with you.

We all know that making an engaging course for learners is important.

I like to use the concept of a navigation map to illustrate a pedagogical progression or to orient the learners. 

I build click-able zone on these maps to link pages or sections of a course, or external links.

It is possible to make these clickable maps with Gimp or Photoshop. I don’t know how to do that so I use HTML tags in the Moodle Atto text editor 😉

To do that I start by switching to HTML mode (the <> button). I modify the parameters of the image and I use the <MAP> and <AREA> tags.

Here is how to do it is a little technical but the result is really worth this effort 🙂

First examine the the image you put in the editor.

Tag syntax <IMG>

<IMG SRC = "image_URL" NAME = "image_name" WIDTH = "width" HEIGHT = "height" ALT = "comment" BORDER = "thickness_of_border" ALIGN = "alignment" HSPACE = "horizonal_margin" VSPACE = "vertical_margin" "USEMAP =" # map_name ">

Tag syntax <MAP>

<MAP NAME = "map_name">
Different tags <AREA>
</ MAP>

The attributes of the <AREA> tag are NAME: the name of the zone, SHAPE: the type of zone (circle, rectangle or polygon), COORDS: the coordinates of the zone (separated by commas), HREF: Destination, ALT: the comment that will appear when the mouse cursor moves over the area.

Tag syntax <AREA>

<AREA NAME = "zone_name" SHAPE = "zonal_type" COORDS = "coordinates"

There are several types of zones:

Circular area:
A circular zone is defined by the <AREA SHAPE = “circle”> tag and whose COORDS attribute takes as values the list of abscissa, ordered at the origin of the center and the radius of the circle.

Syntax:

 <AREA SHAPE = "circle" COORDS = "x, y, radius" HREF = "URL_of_destination">

Rectangular area:
A rectangular area is defined by the tag <AREA SHAPE = “rect”> and whose COORDS attribute takes as values the coordinates of the upper left and lower right corners separated by commas.

Syntax:

<AREA SHAPE = "rect" COORDS = "x1, y1, x2, y2" HREF = "URL_of_destination">

Polygonal area:
A polygonal zone is defined by the tag <AREA SHAPE = “poly”> and whose COORDS attribute takes for values the list of the abscissa and ordered at the origin of each point.

Syntax:

 <AREA SHAPE = "poly" COORDS = "x1, y1, x2, y2, x3, y3, x4, y4, ... x27, y27, x1, y1" HREF = "URL_of_destination"

Now it’s up to you to make clickable maps for your learners!

Enjoy 🙂

We need you to improve the French Friday click HERE

@jmd87fr for The Frenjmd87frch Friday