DocAide Documents

Sommaire

Si un document en ligne est simplement la transposition sur l'écran d'un polycopié papier, il est moins confortable d'utilisation donc il est moins intéressant. Par contre si vous concevez un document en ligne avec toutes les possibilités offertes par WIMS au service de votre pédagogie, alors vous améliorez votre document : mettez de la couleur, concevez la taille des pages (bloc) en fonction de la taille de l'écran et des objectifs pédagogiques, faites des liens vers des ressources internet, vers des exercices, insérez des figures, des graphiques, proposez une navigation aisée dans le contenu, concevez des exemples aléatoires, prévoyez des zones qui peuvent être cachées ou vues...

Pour vous familiariser avec le type document WIMS, naviguez un peu dans celui-ci en suivant les conseils de navigation .

Maintenant lancez vous dans cette oeuvre de création sans hésiter ! Tout devient très simple quand on a commencé, WIMS balise très bien les étapes du processus ; en particulier, dès que le document est créé, vous avez droit à la documentation (cliquer sur Aide dans la barre WIMS). Les étapes de votre apprentissage :

1. Créez votre document
2. Comment éditer un document
   • Quelques commandes html
   • Quelques commandes Latex
3. Les commandes spécifiques à WIMS
4. Insertion d'exercices, images, documents, dessins ...
5. Exemples aléatoires, programmation ...
6. Composition, statut d'un document ...

Navigation dans un document

La navigation dans le document comme dans la classe se fait avec les liens du bandeau supérieur de la page WIMS ou avec les flèches vertes sur les côtés des pages.

Les flèches de

Vous venez de cliquer sur l'image d'un lien utile de WIMS, c'est un faux lien, le vrai est sur la barre de navigation de WIMS

Vous venez de cliquer sur l'image d'un lien utile de WIMS, c'est un faux lien, le vrai est sur la barre de navigation de WIMS

Vous venez de cliquer sur l'image d'un lien utile de WIMS, c'est un faux lien, le vrai est sur la barre de navigation de WIMS

Vous venez de cliquer sur l'image d'un lien utile de WIMS, c'est un faux lien, le vrai est sur la barre de navigation de WIMS

Vous venez de cliquer sur l'image d'un lien utile de WIMS, c'est un faux lien, le vrai est sur la barre de navigation de WIMS

Exercice : Visiter ce document (sans nécessairement lire en détail le contenu des parties) et dessiner sa carte.

Créez votre document

• Ouvrez une nouvelle fenêtre ou un nouvel onglet pour aller dans votre classe.
• Sur la page de garde, cliquez sur ajouter un document.
• Donnez un titre au document mais n'écrivez rien dans la fenêtre entête (vous saurez bientôt quoi écrire).
• Ensuite créez le bloc principal ou page d'entrée (main) de votre document, donnez-lui un titre (sommaire par exemple)
• Dans la fenêtre d'édition, écrivez le texte ( Attention !

  L'avertissement n'a plus lieu d'être mais comme le pli est donné en exemple, je le laisse.

  )
  

  \link{html}
  
  \link{latex}{J'écris des mathématiques}

• Enregistrez.
• Consultez le premier paragraphe de l'Aide.
• Vous êtes invité(e) à créer deux nouveaux blocs.
  • Créez le bloc html : donnez-lui le titre Ecrire en html et choisissez son précédent et son suivant.
  • Ensuite cliquez sur sup ou hist pour revenir à la page précédente et créer le second.
  • Créez le bloc latex : donnez-lui le titre Composer des formules mathématiques et choisissez son précédent et son suivant.
• Revenez au sommaire et comparez les deux liens.
• Consultez la liste des blocs (Autres blocs).
• Vous pouvez mettre dans un bloc le contenu d'un fichier en cliquant sur Insérer un fichier.

Nous avons vu ici comment créer un document dans une classe. Il est possible aussi de le créer dans un compte Modtool, la gestion du document est ensuite la même (voir DocAide Modules d'exercices OEF ).
Le transfert d'un document de la classe vers un compte Modtool est possible par le lien transfert dans la page des propriétés du document.

Comment éditer un document

Un document s'édite bloc par bloc dans la fenêtre d'édition. Un éditeur d'html et de commandes WIMS est disponible. La mise en forme du texte se fait grâce à des commandes html et les formules mathématiques se composent avec Latex . Consultez le deuxième paragraphe de l'Aide.

• Quelques commandes html
• Quels styles définir ?
• Où mettre les styles ?
• Quelques commandes Latex

Dans votre partie Ecrire en html, faites les exercices d' html et dans la partie Composer des formules mathématiques les exercices de Latex .

Quelques commandes html

Votre navigateur ou divers logiciels vous permettent de composer des pages web en html. La commande source de la page vous permet d'accéder au code d'une page et donc de découvrir comment coder certaines mises en forme.

Les bases

L'avertissement n'a plus lieu d'être mais comme le pli est donné en exemple, je le laisse.

 <br/> 
aller à la ligne
 <p>paragraphe</p>
<p class="wimscenter">pour centrer</p>
ou
<div class="wimscenter">pour centrer</div>
 <ul>
   <li>liste</li>
   <li>liste</li>
 </ul>
 <ol>
  <li>liste numérotée</li>
  <li>liste encore</li>
 </ol>


<span style="color:purple;">en violet</span>
<span style="font-weight:bold">En gras</span>)

Exercice : Ecrivez votre liste de courses en changeant de couleur selon les produits. Donnez-lui un titre centré en gras.

 <table>
   <tr>
     <td>1</td>
     <td>2</td>
   </tr>
   <tr>
     <td>3</td>
     <td>4</td>
   </tr> 
 </table>

 <table style="text-align:center;width:50%; background-color:yellow;">
   <tr>
     <th>Titre 1</th>
     <th>Titre 2</th>
   </tr>
   <tr>
     <td>1</td>
     <td>2</td>
   </tr>
   <tr>
     <td style="color:red">3</td>
     <td>4</td>
   </tr> 
 </table>

 <table class="wimsborder wimscenter">
   <tr>
     <th>Titre 1</th>
     <th>Titre 2</th>
   </tr>
   <tr>
     <td>1</td>
     <td>2</td>
   </tr>
   <tr>
     <td>3</td>
     <td>4</td>
   </tr> 
 </table>
 

 <table class="wimsnoborder wimscenter" style="background-color:yellow;">
   <tr>
     <th>Titre 1</th>
     <th>Titre 2</th>
   </tr>
   <tr>
     <td>1</td>
     <td>2</td>
   </tr>
   <tr>
     <td style="color:red">3</td>
     <td>4</td>
   </tr> 
 </table>

Pour faire plus

• Des documents en ligne :
  • Un cours d'html en ligne qui vous présente d'autres balises avec des exemples.
  • Un tutorial.
  
  
  • si vous avez un compte Modtool, la validation est désormais possible en ligne (dépend des serveurs) ; voir aussi dans les fiches de WIMS EDU les erreurs classiques. lien
• Quelques possibilités à noter :
  • Pour faire un titre de paragraphe : <h2>Les bases</h2>
  • La définition de styles dans la fenêtre entête du document (dans la page propriétés) donne une fière allure à votre document et permet surtout de pouvoir facilement changer de style sans devoir aller sur toutes les pages.
  • Pour faire un magnifique fond vert à vos théorèmes, ajouter dans l'entête du document (entre <style type="text/css"> et </style>) les lignes suivantes :
    

    .prop
    	{
    	margin: 0% 8% 0% 8%;
    	width: 50%;
    	padding: 2%;
    	background-color: #E8E4D8;
    	}
    

    
    ensuite vous utilisez la balise <p class="prop">Enoncé de la proposition</p>.
• Un peu plus sur les styles css
  • Quels styles définir ?
  • Où mettre les styles ?

Quels styles définir ?

Pour le document, les paragraphes, les titres

On peut définir l'indentation de tous les paragraphes par : p {text-ident: 1.3em;}

En html, les titres ont des styles définis par défaut. Dans les documents WIMS, le titre du document est en h1, les titres des blocs en h3, le h2 est disponible pour vos titres de paragraphe. Chaque style de titre peut être redéfini dans l'entête du document :

h3 {
   font-size: 130%;
   text-align: center;
   color: green;
 }

Définition d'une classe

On définit une classe par un nom commençant par un point, puis entre accolades ses caractéristiques, séparées par des point-virgules. Une classe qui définit les caractéristiques des caractères peut être appelée pour un mot ou un paragraphe.

.c   { 
   color: #c52d2d;
   font-size:100%;
   font-weight: bold;
}

Pour quelques mots, on peut écrire :

Le style <span class="c">c</span> indique un mot important.

le style c indique un mot important.

Pour un paragraphe, on écrit :

<p class="c">Ce paragraphe est important.</p>

Ce paragraphe est important.

Pour un paragraphe ou une partie

Le style suivant est celui des encadrés verts de code :

	.ccc {
	     margin: 0% 3% 0% 3%;
	     width: 90%;
	     padding: 2%;
	     background-color: #CCFFCC;
	     color: #c52d2d;
	     font-weight: bold; }
	 

Dans l'exemple suivant, on définit un style de division pour faire un fond au théorème :

.thm {
    margin: 0% 8% 0% 8%;
    width: 80%;
    padding: 2%;
    background-color: #E8E4D8;
    }

Il vaut mieux définir la largeur (width) de façon relative avec un pourcentage. Le margin donne la répartiion des marges entre la couleur et le reste. Le  padding indique la marge intérieure à la couleur de fond. Evidemment, le total 2m+w+2p doit faire 100 %.

Pour en savoir plus.

Où mettre les styles ?

Dans une balise

<div style="
 margin: 0% 2% 0% 2%;
 width: 94%;
 padding: 2%;
 background-color: #CCFFCC;
">

Dans un document wims.

Dans une classe

Dans style sheet css, vous pouvez ne rien choisir (----), choisir la feuille associer au thème (-thème-). Vous pouvez aussi définir votre style dans la dernière case, par exemple :

.aide {
 margin: 0% 2% 0% 2%;
 width: 94%;
 padding: 2%;
 background-color: #CCFFCC;
}

Vous devez alors choisir class dans style sheet css.

Alors pour définir un fond de couleur pour les introductions de feuilles, il suffira de rédiger le message ainsi :

<div class="aide"> Apprenez votre cours avant de faire les exercices !</div>

Quelques commandes Latex

Tester dans votre partie Composer des formules mathématiques ( Attention !

L'avertissement n'a plus lieu d'être mais comme le pli est donné en exemple, je le laisse.

  \(2*e_2\)
  \(4+-1*x+1*y\)
  \(3 4\)
  \([1,2;3,4]\)
  \(e_1 + 3 e_2\)
  \(\int_0^x  (x^4+x^2) dx\)
  \(\frac{1}{x^2+1}\)
  \(\vec{e_1}\)
  \(\sqrt{2}\)
  \(\sqrt[3]{2}\)

• pour un angle : \(\widehat{ABC}) donne
• pour un vecteur : \(\ vec u \) donne
• pour une flèche plus longue : \(\overrightarrow{AB}\) donne
• pour faire de crochets : \(\lbrack -5,+5 \rbrack\) donne et \(\rbrack A,B \rpar\) donne

Les commandes spécifiques à WIMS

Commandes de mise en forme

La commande \embed permet de mettre en plusieurs endroits le même contenu (par exemple l'énoncé d'un théorème) en éditant un seul bloc.

Différents plis

   \fold{}{Remarque }{Contenu de la partie une fois dépliée.}

   \fold{nom}{Attention}
   \fold{nom} 

Exercice : Créez un bloc pgcd à partir de la partie Composer des formules mathématiques dont le titre sera Exercice sur le pgcd. Son texte sera l'exercice sur le pgcd proposé un peu plus loin avec un pli pour présenter le code.

Pour commenter

  \comment{Ca marche !}

Insertion d'exercices, images, documents, dessins ...

Insertion d'une image (jpeg,gif,png), d'un fichier PDF, d'un document audio ...

• lien vers le fichier jentilez.jpg.

      <a href="\filedir/jentilez.jpg">jentilez.jpg</a>
  

  ou nouvelle commande :

       \href{jentilez.jpg}{lien}
  

• affichage de l'image dans la page :

       <img src="\filedir/myfile.jpg"/> 
  

  Le texte suivant permet d'encadrer l'image, de régler sa taille et de proposer un texte alternatif.

      <img style="border: 2px solid blue; width: 80%;"alt="image" src="\filedir/image.jpg"/> 
  

• Un peu de musique !
• Exercice de solfège :

  Quel intervalle est-ce ?

  Une fois que vous avez cliqué sur le lien précédent, cliquez ensuite sur Encore une fois puis sur Quel intervalle .. et recommencez. Vous reconnaitrez peut-être une seconde mineure.

Lien vers un site

<a  target="wims_external"  href="http://www.mathkang.org/">site du Kangourou des mathématiques</a>

Lien vers des exercices

  \exercise{cmd=new&module=U1/analysis/graphder.fr}{exercice}
  \tool{module=tool/number/calcnum.fr}{outil}
  \exercise{module=H3/stat/docstat.fr}{document}
  \adm{module=adm/createxo}{commentaire}

Lien vers un autre document

\doc{module=help/student/docetud.fr} pour aider les étudiants
\doc{module=help/teacher/docdocument} pour créer un document de cours (ce document !)
\doc{module=help/teacher/docexooef} pour créer des exercices)
\doc{module=help/developer/docmodtooloef} pour créer un module d'exercices OEF

   \link{bloc}{titre}{ancre}{parm1=1&parm2=2}

Insertion d'un dessin

  \draw{200,200}{
   xrange -2,2
   yrange -2,2
   lines blue, 1,1,-1,1,-1,-1,1,-1,1,1
   fill 0,0,green
  }

Exemples aléatoires, programmation ...

Un exemple simple

 <a id="pgcd"> </a>
  \def{integer n = randint(1000..200000)}
  \def{integer m = randint(1000..200000)}
  \def{integer p = gcd(\n , \m)}
  Le pgcd des entiers \n et \m est égal à \p.
  \reload{Recommencez}{pgcd}

Définition d'une variable.

  \def{integer a =  8}

Programmation

 
   \for{i = 1 to 10}{ \i , }

   \def{text n = randitem( exercice, exercices) }
   \if{\n issametext exercice}{Un}{Des}\n
 

   \reload{<img src = "gifs/doc/etoile.gif" alt = "rechargez" style="width:20px;height:20px;"/>}

Composition, statut d'un document ...

• Il est commode d'éditer son document dans son éditeur préféré puis de le copier dans la fenêtre d'édition WIMS pour tester l'effet. Le travail est plus confortable et vous en gardez une copie.
• Evitez les pages trop longues, quitte à les faire grossir à l'aide des plis (\fold). Les écrans ne sont pas tous très grands. Le lecteur peut déplier ou replier les remarques, les digressions, les solutions...
  Les grandes pages avec TeX mettent un certain temps à sortir.
• Pensez à l'option sup = parent en plus de précédent et suivant (par défaut, il est sur main). C'est en fait extrêmement commode pour gérer des "chapitres" et des tables des matières de chapitres.
• Pensez à la version imprimable, même si elle ne peut être parfaite (elle permet de détecter les erreurs de syntaxe css ou html : si le fond devient bleu à partir d'un certain temps ou se met à devenir de plus en plus étroit ...) Vérifiez par exemple qu'elle prend bien toutes les pages, qu'il n'y a pas d'orphelin et que l'ordre est à peu près correct.
• Lisez les parties 3, 4 et 9 de l'Aide.

Application aux figures GeoGebra : Si les figures interactives GeoGebra apparaissent dans la version imprimable, elles disparaissent à l'impression.
Pour pallier ce manque, on peut définir un bloc figimp par un lien sous la figure interactive (dans le bloc figurepar exemple), y insérer une version fixe imprimable de la figure et définir figure comme le parent de figimp. Le bloc figimp ne gênera pas la navigation mais apparaîtra à l'impression.