Débuter avec Ludiscape
Démarrer Ludiscape
La Bibliothèque Ludiscape possède des objets Pédagogiques très puissants et qui suffisent pour la plupart des projets.
Cependant pour optimiser vos créations pédagogiques il peut être utile de créer vos propres objets.
Ludiscape vous offre la possibilité de vous créer vos propres objets grâces aux plugins. Ce tutoriel est la pour vous expliquer le développement et l’intégration automatiques de ceux-ci.
Les prérequis :
Tout d'abord, vérifier si le plug-in existe dans notre base (he oui pas la peine de créer un plug-in s’il existe déjà), s’il n’existe pas : vérifier si un plug-in se rapproche du vôtre, de façon à limiter votre travail.
Ensuite, il vous faudra connaître le Javascript et le CSS. L'avoir pratiqué en ayant créé des programmes ou applications est un plus, car vous saurez comment organiser votre code.
Si vous ne connaissez pas le Javascript, vous pouvez trouver des tutoriels sur le site developpez.com , ils sont globalement bien, mais ils ne vous apprennent pas tous (les énumérations, par exemple).
Par ailleurs, je vous conseille l'environnement de travail Notepad ++. Je vous le recommande véritablement, car il est très simple à utiliser.
La structure d'un pluging :
Un plug-in est composé de 4 fichiers :
- Le fichier icon.jpg
Le fichier icon.jpg est l’image affichée dans Ludiscape il faut de préférence une image de taille 50px par 50px.
- Le fichier config.xml
Ce fichier contient les informations de paramétrage du plugin et la définition des fichiers qui vont être intégrés.
Descriptif des balises :
<?xml version="1.0" encoding="UTF-8"?>
<properties>
<data>
<type>Type objet</type>
<title>Titre du plugin</title>
<screenImage>Image affiché sur l’écran d’édition</screenImage>
<files>Fichiers supplémentaires lié au plugin</files>
<embeddedFiles>Bibliothèque javascript supplémentaire automatiquement intégrés</embeddedFiles>
<defautText>Texte par défaut</defautText>
<width>Largeur par défaut en pixels</width>
<height>Hauteur par défaut en pixels</height>
<options>
<resize>Objet redimensionnable à l’écran</resize>
<changeImage>Possibilité de changer l’image</changeImage>
<changeText>Possibilité de changer le texte</changeText>
<conditionalObject>Objet conditionnel</conditionalObject>
</options>
<fields>
<label1>Libellé champs N°1</label1>
<field1>Type de données</field1>
<label2></label2><field2></field2>
<label3></label3><field3></field3>
<label4></label4><field4></field4>
</fields>
</data>
</properties>
- Le fichier run.css
CSS supplémentaire
- Le fichier run.js
Le fichier run.js est le moteur principal du plug-in il possède trois fonctions qui permettent d'interagir avec le moteur JavaScript.
Les méthodes onPaint () et onZoom () sont appelés respectivement à l’exécution du plugin
onPaint permet de créer le DOM.
onZoom permet de redimensionner les éléments en fonction de la variable zoom écran.
La méthode isOK
Dans le cas où il s’agit d’un objet conditionnel, cette fonction renvoi true ou false pour le rendre valide ou non. (voir « page suivante si OK »).
function onPaint(obj){
var html = '';
html = '<div id="bloc' + obj.id + '" ';
html = html + ' style="border: solid 1px red;position:absolute;" ';
html = html + ' class="bloc' + obj.id + '" >';
html = html + '</div>';
return html ;
}
Note : La classe bloc + obj.id est une classe reconnue automatiquement qui redimensionne l’objet proportionnellement au zoom de l’écran.
function onZoom(obj){
var largw = parseInt(parseInt(obj.w) * zoom);
var largh = parseInt(parseInt(obj.h) * zoom);
$(".votreid" + obj.id) .css("height",largh + "px");
$(".votreid" + obj.id) .css("width",largw + "px");
}
function isOK(obj)(
)
Comment développer un plug-in et le tester directement dans Ludiscape ?
Les plugins sont deployer dans votre dossier utilisateur ;
C:\Users\NomUtilisateur\BatisseursNumeriques\FASTWEB\Plugins
Vous pouvez modifier le code directement en même temps que le logiciel Ludiscape est en cours d'execution.