Articles les plus récents

---

---

• Plugin QCM pour Spip

  Créer un formulaire Spip d’une question de QCM

  ... en s’inspirant de la chronique "Créer un formulaire de contact sous Spip"

  mardi 26 mai 2020

  Maintenant que le formulaire "contact" fonctionne (enfin !), l’étape suivante va être de créer un formulaire de toutes pièces. Transférer une compétence toute neuve est le meilleur moyen de l’intégrer quasi définitivement.

  Sommaire

  • Cahier des charges
  • Étape 1 : créer une simili-formulaire de test
  • Étape 1 bis : Créer un formulaire fonctionnel
  • Étape 2 : définir la fonction charger
  • Étape 3 : vérifier la saisie
  • Étape 4 : traiter la réponse
  • Étape 5 : afficher les données saisies
  • Étape 6 : mettre en forme
  • Test du formulaire

  Le formulaire s’appelera "qcm_question" et sera donc appelée par la balise <formulaire|qcm_question>.

  Cahier des charges

  • le formulaire affichera une question, six propositions de réponse associées à des boutons radio et un bouton de validation (type "ok")
  • quand l’utilisateur a fait son choix (un choix obligatoire évidemment) et qu’il a validé sa réponse, la question est de nouveau affichée avec la réponse donnée (en vert si c’est celle attendue, en rouge si ce n’est pas elle), la réponse attendue si celle donnée n’est pas celle attendue et un bouton pour passer à la question suivante.
  • comme ce formulaire sera utilisée dans le cadre d’un QCM QCM Questionnaire à Choix Multiple avec X questions, il sera tout de suite paramétrable.

  Il devrait donc ressembler à peu près à ça avant la réponse :

  

  et un peu à ça après la validation de la réponse.

  
  

  Étape 1 : créer une simili-formulaire de test

  • Créer le fichier "qcm_question.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " dans le répertoire "formulaires" du dossier "squelettes".
  • Ouvrir le fichier "qcm_question.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " dans l’éditeur de texte
  • Dans l’optique d’utiliser ce formulaire pour un QCM QCM Questionnaire à Choix Multiple , les données seront donc contenues dans des variables : "question" pour la question, "Px" pour chacune des 6 propositions. On commence donc par les définir provisoirement pour construire le formulaire :

  [(#REM) <-- DEB qcm_question -->]
  #SET{question,"Comment s'appelle ce site ?"}
  #SET{P1,"codep41-ffct.org"}
  #SET{P2,"ffct.org"}
  #SET{P3,"ffct-centre.org"}
  #SET{P4,"lorand.org"}
  #SET{P5,"nouan-rando.org"}
  #SET{P6,"spip.net"}

  • Ensuite, construction du formulaire proprement dit :

  <div class='ajax'>        
          <form action='#ENV{action}'>
                  #ACTION_FORMULAIRE{#ENV{action}}
                  <input type='radio' id='choix1' name='reponse' value='p1'><label for='choix1'>#ENV{p1}</label>
                  <input type='radio' id='choix2' name='reponse' value='p2'><label for='choix2'>#ENV{p2}</label>
                  <input type='radio' id='choix3' name='reponse' value='p3'><label for='choix3'>#ENV{p3}</label>
                  <input type='radio' id='choix4' name='reponse' value='p4'><label for='choix4'>#ENV{p4}</label>
                  <input type='radio' id='choix5' name='reponse' value='p5'><label for='choix5'>#ENV{p5}</label>
                  <input type='radio' id='choix6' name='reponse' value='p6'><label for='choix6'>#ENV{p6}</label>
                  <input type='submit' name='ok' value='Validation' />
          </form>
          <BOUCLE_choixok(CONDITION){si #ENV{reponse}|<>{'p0'}}>
                  Réponse choisie : #ENV{#ENV{reponse}}<br />
                  #SET{rep, #ENV{#ENV{reponse}}}
          </BOUCLE_choixok>
  
  </div>
  [(#REM) <-- FIN qcm_question -->]

  • Le formulaire affichera les six propositions et renverra la valeur correspondant à la case cochée.
  • ce serait encore mieux si les données (questions et propositions) étaient définies avant cet envoi, depuis le squelette "qcm QCM Questionnaire à Choix Multiple " par exemple. Donc un modèle "qcm QCM Questionnaire à Choix Multiple " inclus dans un article va transmettre les données au formulaire "qcm_question". Les transmissions de données entre squelettes, fichiers à inclure, modèles, formulaires... ne sont jamais simples. Il va probablement falloir s’accrocher sérieusement et sans doute ramer quelque peu.
    
    

  Étape 1 bis : Créer un formulaire fonctionnel

  [(#REM) <-- DEB qcm -->]
  #SET{question,"Comment s'appelle ce site ?"}
  #SET{p1,"codep41-ffct.org"}
  #SET{p2,"ffct.org"}
  #SET{p3,"ffct-centre.org"}
  #SET{p4,"lorand.org"}
  #SET{p5,"nouan-rando.org"}
  #SET{p6,"spip.net"}
  #SET{repattendue,"p4"}
  Sélectionner (cocher) la bonne réponse.<br />
  <strong>#GET{question}</strong><br />
  [(#FORMULAIRE_QCM_QUESTION{#GET{p1}, #GET{p2}, #GET{p3}, #GET{p4}, #GET{p5}, #GET{p6}, #GET{repattendue}})]
  [(#REM) <-- DEB qcm -->]

  • Quelques commentaires :
    • comme il est prévu d’utiliser cet outil pour un QCM QCM Questionnaire à Choix Multiple qui comprendra donc plusieurs questions, autant prévoir tout de suite les paramètres.
    • La variable "question" contiendra la question complètement formulée.
    • Les variables p1 à p6 contiendront les propositions sous forme de phrases complètes ou d’expressions.
    • La variable "repattendue" contient l’identification de la proposition attendue "p...". Son utilisation sera vue plus tard.
    • C’est le squelette qui affiche la consigne "Sélectionner (cocher) la bonne réponse." ainsi que la question.
    • Le formulaire est appelée avec les six propositions et la référence de la réponse attendue.
  • Évidemment, le formulaire "qcm_question" doit donc être modifié sérieusement en conséquence.

  [(#REM) <-- DEB qcm_question -->]
  <div class='ajax'>        
          <form action='#ENV{action}'>
                  #ACTION_FORMULAIRE{#ENV{action}}
                  <input type='radio' id='choix1' name='reponse' value='p1'><label for='choix1'>#ENV{p1}</label><br />
                  <input type='radio' id='choix2' name='reponse' value='p2'><label for='choix2'>#ENV{p2}</label><br />
                  <input type='radio' id='choix3' name='reponse' value='p3'><label for='choix3'>#ENV{p3}</label><br />
                  <input type='radio' id='choix4' name='reponse' value='p4'><label for='choix4'>#ENV{p4}</label><br />
                  <input type='radio' id='choix5' name='reponse' value='p5'><label for='choix5'>#ENV{p5}</label><br />
                  <input type='radio' id='choix6' name='reponse' value='p6'><label for='choix6'>#ENV{p6}</label><br />
                  <input type='submit' name='ok' value='Validation' />
          </form>
          <BOUCLE_choixok(CONDITION){si #ENV{reponse}|<>{'p0'}}>
                  Réponse choisie : #ENV{#ENV{reponse}}<br />
                  Réponse attendue : #ENV{#ENV{repattendue}}<br />
                  #SET{rep, #ENV{#ENV{reponse}}}
                  <BOUCLE_verifreponse(CONDITION){si #ENV{reponse}|==#ENV{#ENV{repattendue}}}
                          Bravo ! 
                  </BOUCLE_verifreponse>
                          Dommage.
                  <//B_verifreponse>
          </BOUCLE_choixok>
  </div>
  [(#REM) <-- DEB qcm_question -->]

  • le formulaire recevra les variables depuis la fonction "charger" de "qcm_question.php PHP Hypertext Preprocessor Voir Wikipedia PHP " : "p1" à "p6" ainsi que "repattendue" et renverra la variable "reponse" avec la proposition choisie par le candidat.
  • Pour que le formulaire commence à fonctionner, il est maintenant indispensable de définir la fonction "charger" avec la passation des variables : tout part de là !
    

  Étape 2 : définir la fonction charger

  <?php
          function formulaires_qcm_question_charger_dist($p1, $p2, $p3, $p4, $p5, $p6, $repattendue){
                  $valeurs = array('p1'=>$p1, 'p2'=>$p2, 'p3'=>$p3, 'p4'=>$p4, 'p5'=>$p5, 'p6'=>$p6, 'reponse'=>'p0', 'repattendue'=>$repattendue);
                   return $valeurs;
          }
  ?>

  • Plutôt classique et minimal : transmission des variables communiquées par l’appel du formulaire. Il y a les six propositions et la réponse attendue. La variable "reponse" contiendra... la réponse.

  
  

  Étape 3 : vérifier la saisie

  • une seule erreur est possible : ne pas cocher un bouton radio avant de valider la réponse. Donc, négligeable. Au cas où (?), on laisse traîner un message par là. Évidemment la fonction "verifier" est ajoutée dans le php PHP Hypertext Preprocessor Voir Wikipedia PHP de "qcm_question.php PHP Hypertext Preprocessor Voir Wikipedia PHP ".

  function formulaires_qcm_question_verifier_dist(){ 
          if (count($erreurs))
                  $erreurs['message_erreur'] = 'La saisie contient des erreurs !';
          return $erreurs;
  }

  
  

  Étape 4 : traiter la réponse

  • La réponse est prise en compte dans "qcm_question". Ici, on se contentera de vider le message, histoire de faire un travail propre. Le code de la fonction est ajoutée à "qcm_question.php PHP Hypertext Preprocessor Voir Wikipedia PHP " bien sûr.

          function formulaires_qcm_question_traiter_dist(){
                  return array('message_ok'=>'');
          }

  
  

  Étape 5 : afficher les données saisies

  • Comparaison de la réponse donnée et de celle attendue.
  • Une première boucle "condition" s’assure qu’une réponse a été donnée.
  • La deuxième boucle "condition" imbriquée dans la première donne le résultat.

          <BOUCLE_choixok(CONDITION){si #ENV{reponse}|<>{'p0'}}>
                  #SET{rep, #ENV{reponse}}
                  #SET{repcorrecte, #ENV{repattendue}}
                  Réponse choisie : #ENV{#GET{rep}}<br />
                  Réponse attendue : #ENV{#GET{repcorrecte}}<br />
                  <BOUCLE_verifreponse(CONDITION){si #ENV{reponse}|=={#ENV{repattendue}}}>
                          Bravo ! 
                  </BOUCLE_verifreponse>
                          Dommage.
                  <//B_verifreponse>
          </BOUCLE_choixok>

  • Petite remarque : il aurait été possible de ne pas utiliser de #SET. Les réponses (celle choisie et celle attendue) auraient alors été : #ENV{#ENV{reponse}} et #ENV{#ENV{repattendue}} avec un #ENV dans un #ENV [1].

  
  

  Étape 6 : mettre en forme

  Mise en forme minimale :

  • dans le modèle "qcm QCM Questionnaire à Choix Multiple .html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) "
    • Consigne en italique.
    • Question en gras.
  • dans le formulaire qcm_question.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte)  :
    • Réponse choisie soit en rouge si ce n’est pas celle attendue soit en vert dans l’autre cas. Si la réponse est bonne, ce n’est pas la peine d’afficher la réponse attendue.
    • Affichage du message "Bravo !" en gras. On laisse "Dommage..." en affichage normal.
  • Utiliser "editable" pour cacher les boutons-radio une fois la réponse validée.
    

  Test du formulaire

  Bonne utilisation

  ---

  <qcm1>

  ---

  ---

  MAJ : ...

---

---

• Vote final de la « loi haine »

  lundi 25 mai 2020

  L’urgence de LREM est de donner à la police de nouveaux pouvoirs pour lutter contre le « terrorisme » sur Internet. L’Assemblée nationale votera le 13 mai 2020 la proposition de loi de Laetitia Avia qui, initialement présentée comme une loi « contre la haine », s’est transformée en janvier dernier en une loi « antiterroriste », telle qu’on en connait depuis des années, de plus en plus éloignée du principe de séparation des pouvoirs.

  

  Voir en ligne : https://www.laquadrature.net/2020/0...

---

---

• La Petite Reine de A à Z

  lundi 25 mai 2020

  En accompagnement aux manifestations yvelinoises de la course cycliste du Paris-Nice, les Archives départementales proposent aux passionnés de vélos de nourrir leurs recherches par un choix documentaire sur "la petite reine" (selon le terme inventé par le journaliste Pierre Giffard, originaire de Maisons-Laffitte).

  

  Voir en ligne : https://archives.yvelines.fr/articl...

---

---

• Hygiène numérique - des outils Firefox fournis par Mozilla

  dimanche 24 mai 2020

  Firefox, c’est avant tout le nom du navigateur de la fondation Mozilla. C’est le nom de feu Firefox OS, le système d’exploitation pour smartphone. C’est aussi le nom pour différents outils en lignes d’hygiène numérique mis à disposition par Mozilla.

  

  Voir en ligne : https://blog.genma.fr/?Hygiene-nume...

---

---

• Reprise de l’activité sportive

  dimanche 24 mai 2020

  Dans la continuité des annonces du Premier ministre mardi 28 avril à l’Assemblée nationale, et au regard des recommandations du Haut Conseil de la santé publique, la ministre des Sports, Roxana MARACINEANU rappelle qu’il sera possible de pratiquer une activité sportive individuelle en plein air à partir du 11 mai, en respectant les règles de distanciation physique, dans les espaces ouverts autorisés et en fonction de la situation sanitaire de chaque territoire (zone rouge ou verte).

  

  Voir en ligne : http://www.sports.gouv.fr/presse/ar...

---

---

• Didacticiel

  Chronique : créer un formulaire de contact sous Spip

  ... en suivant pas à pas un exemple.

  dimanche 24 mai 2020

  Comme je n’arrive pas à faire fonctionner un formulaire sous Spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP , je reprends tout à zéro et je raconte toutes les étapes marche après marche ou pas à pas (au choix) pour réaliser un formulaire de contact. Je vais bien finir par trouver pourquoi ça ne marche jamais dès que je passe à la personnalisation... (et même quelquefois avant...).

  Sommaire

  • Étape 1 : Créer le squelette de son formulaire
  • Étape 2 : la fonction charger
  • Étape 3 : Vérifier que la saisie est correcte
  • Étape 4 : traiter !
  • Étape 5 (bonus) : récupérer les données du formulaire
  • Étape 6 (bonus) : un peu de "cosmétique"...
  • Test du formulaire
  • Références

  Les titres des paragraphes de cette page sont les titres des paragraphes de la page de spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP . net : "Formulaires CVT par l’exemple"

  Étape 1 : Créer le squelette de son formulaire

  (en local)

  On part du formulaire tel qu’il est décrit sur spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP .net : "Formulaires CVT par l’exemple"

  • création du fichier contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) dans le sous-répertoire "formulaires" de mon dossier squelettes". Il est vide : normal.
  • ouverture du fichier (vide) avec notepad++
  • ajout du code donné. Comme je n’aime pas qu’on s’adresse au lecteur (je n’aime pas que le rédacteur fasse comme s’il s’adressait à moi quand je lis sa prose parce que ça me semble un tout petit peu hypocrite) et que je préfère le mot courriel à email, je remplace "Votre email" par "le courriel" et "Votre message" par "Le message". pour obtenir :

  <form action='#ENV{action}' method='post'>
          #ACTION_FORMULAIRE{#ENV{action}}
          <label>Le courriel</label>
          <input type='text' name='email' value='#ENV{email}' />
          <br />
          <label>Le message</label>
          <textarea name='message'>#ENV{message}</textarea>
          <input type='submit' name='ok' value='ok' />
  </form>

  • Enregistrement du fichier
  • Test (comme indiqué) en insérant la balise <formulaire|contact> dans un article spécifique baptisé "Test formulaire [2]" et enregistrement dans l’espace privé.

    

  Toujours comme indiqué, mon formulaire ne fait rien. En fait pas tout à fait : après avoir effectué les entrées de données dans les deux champs, le clic sur le bouton OK ramène au formulaire vierge avec ré-affichage de la page. Cela paraît normal.

  
  

  Étape 2 : la fonction charger

  • Passage à la fonction "charger" : c’est peut-être là que commence mes problèmes !
  • création du formulaire "contact.php PHP Hypertext Preprocessor Voir Wikipedia PHP " dans le sous-répertoire "formulaires" du dossier "squelettes". Il est vide : normal.
  • ouverture du fichier avec notepad++
  • ajout du code donné dans le fichier "contact.php PHP Hypertext Preprocessor Voir Wikipedia PHP "

  <?php
   
  function formulaires_contact_charger_dist(){
          $valeurs = array('email'=>'','message'=>'');
   
          return $valeurs;
  }
   
  ?>

  • On enregistre le fichier
  • On reste sur le basique (donc on ne va pas voir "Surcharger une fonction _dist".
  • Test (comme indiqué) en recalculant l’article"Test formulaire" dans l’espace privé
  • On renseigne les champs courriel et message et on clique sur le bouton "OK"

  Il ne se passe toujours rien (comme c’est indiqué) si ce n’est un ré-affichage de la page. Mais... le formulaire a perdu les valeurs saisies alors qu’il est spécifié : "...le formulaire n’a pas perdu les valeurs que vous avez saisies (même s’il ne fait toujours rien)"

  • ... ! ... ?
  • Et si on testait en englobant le tout dans une div avec class "ajax" ? Comme j’utilise l’appel depuis un article et que je me méfie un peu, je mets la div dans contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) . J’obtiens donc :

  <div class='ajax'>
          <form action='#ENV{action}' method='post'>
                  #ACTION_FORMULAIRE{#ENV{action}}
                  <label>Le courriel</label>
                  <input type='text' name='email' value='#ENV{email}' />
                  <br />
                  <label>Le message</label>
                  <textarea name='message'>#ENV{message}</textarea>
                  <input type='submit' name='ok' value='ok' />
          </form>
  </div>

  • Enregistrement.
  • Nouveau test. => La classe "ajax" fonctionne puisque je n’ai plus le ré-affichage de la page mais, les données ne sont pas conservées.
  • ... ! ... ?
  • Peut-être est-ce parce que je travaille en local ? Drôle d’idée mais, sait-on jamais...? (Autre question à envisager : "Peut-être est-ce parce que l’article n’est pas publié ?" Question tout aussi "drôle"... !)
  • ...
  • Test sur mon site en distant :
    • transfert par ftp des fichiers "contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " et "contact.php PHP Hypertext Preprocessor Voir Wikipedia PHP "
    • création d’un article provisoire avec la balise <formulaire|contact> dans le champ texte.
    • résultat : ça marche ! Mais pourquoi ça ne marche pas en local ?
    • Sgrogneugneu...
    • Et si... (comme d’habitude, une histoire de cache mais cette fois-ci du navigateur puisque le test a lieu dans l’espace privé). Bingo ! Mais pas facile de réactiver le cache : deux clics (non consécutifs) sur le bouton "Actualiser la page courante" ou [Ctrl]=[R]
  • Retour à l’exemple après avoir compris le dysfonctionnement (même si je n’en ai pas encore compris la raison).
  • Renseigner un champ par défaut avec

  if (isset($GLOBALS['visiteur_session']['email']))
                  $valeurs['email'] = $GLOBALS['visiteur_session']['email'];

  • Si ce code est bon et fonctionne avec un test, on peut rajouter aussi sans faire de test :

            $valeurs['message'] = "Ceci est peut-être un test...";

  
  

  Étape 3 : Vérifier que la saisie est correcte

  • (ré)ouverture du fichier "contact.php PHP Hypertext Preprocessor Voir Wikipedia PHP " avec Notepad++
  • Ajout de la fonction "formulaires_contact_verifier_dist" pour obtenir :

  function formulaires_contact_verifier_dist(){
          $erreurs = array();
          // verifier que les champs obligatoires sont bien la :
          foreach(array('email','message') as $obligatoire)
                  if (!_request($obligatoire)) $erreurs[$obligatoire] = 'Ce champ est obligatoire';
   
          // verifier que si un email a été saisi, il est bien valide :
          include_spip('inc/filtres');
          if (_request('email') AND !email_valide(_request('email')))
                  $erreurs['email'] = 'Cet email n\'est pas valide';
   
          if (count($erreurs))
                  $erreurs['message_erreur'] = 'La saisie contient des erreurs !';
          return $erreurs;
  }

  • Oui, le message d’erreur est un peu adapté (toujours parce que je n’aime toujours pas l’hypocrisie...).
  • Tiens, il y a une petite note que je n’avais pas particulièrement remarqué : "l’utilisation de _request() est expliquée sur le site" avec le lien vers la fonction _request sur le site programmer.spip.net. Il est donc probable qu’il me faille aller un peu plus souvent sur ce site vraiment trop délaissé...
  • Donc, on ajoute l’affichage du message d’erreur par la fonction "verifier" et les messages d’erreur devant chaque champ. Donc maintenant, notre fichier formulaire ressemble à ça (copie) :

  <div class='ajax'>
          [<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
          <form action='#ENV{action}' method='post'>
                  #ACTION_FORMULAIRE{#ENV{action}}
                  <label>Le courriel</label>
                  [<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
  
                  <input type='text' name='email' value='#ENV{email}' />
                  <br />
                  <label>Le message</label>
                  [<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
  
                  <textarea name='message'>#ENV{message}</textarea>
                  <input type='submit' name='ok' value='ok' />
          </form>
  </div>

  • Petite note : utilisation de #ENV* et de #ENV** (Mais pourquoi donc ? => à voir plus tard.)
  • Dernier pas de cette étape : test. Évidemment (comme je m’y attendais un peu), ça ne marche pas en local mais ça fonctionne en distant. C’est l’essentiel mais... j’aimerais toujours bien connaître la raison de ce dysfonctionnement...
    
    

  Étape 4 : traiter !

  C’est probablement, l’étape qui m’intéresse le plus mais c’est aussi celle que je crains beaucoup parce que je crois que c’est là que je me plante...! Je vais donc prendre quelques notes (remarques) supplémentaires...

  • Ajoutons la fonction "formulaires_contact_traiter_dist" dans le fichier "contact.php PHP Hypertext Preprocessor Voir Wikipedia PHP "
  • Au passage (et toujours pour la même raison...), je modifie un tout petit peu le "message_ok" en le remplaçant par : "Le message a bien été pris en compte. Une réponse sera prochainement envoyée !"
  • Résultat du codage :

  function formulaires_contact_traiter_dist(){
          $envoyer_mail = charger_fonction('envoyer_mail','inc');
          $email_to = $GLOBALS['meta']['email_webmaster'];
          $email_from = _request('email');
          $sujet = 'Contact';
          $message = _request('message');        
          $envoyer_mail($email_to,$sujet,$message,$email_from);
          return array('message_ok'=>'Le message a bien été pris en compte. Une réponse sera prochainement envoyée !');
  }

  • Le contenu du "sujet" du message est simplifié par rapport à l’exemple de spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP .net par remplacelement de ’Formulaire de contact’ par ’Contact’.
  • Note : J’aime beaucoup

    Si la fonction 'traiter' est appelée c’est qu’il n’y a aucune erreur.

    Alors que j’en suis à me demander si elle est appelée...

  • note : Le message de succès est contenu dans un tableau (je ne suis pas du tout certain d’avoir repéré ça auparavant.
  • Suite : le formulaire contenu dans "contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " est à adapter/modifier en y ajoutant l’appel au message de succès et l’affichage conditionnel.

  <div class='ajax'>
          [<p class='formulaire_ok'>(#ENV*{message_ok})</p>]
          [<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
          [(#EDITABLE|oui)
                  <form action='#ENV{action}' method='post'>
                          #ACTION_FORMULAIRE{#ENV{action}}
                          <label>Le courriel</label>
                          [<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
                          <input type='text' name='email' value='#ENV{email}' />
                          <br />
                          <label>Le message</label>
                          [<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
                          <textarea name='message'>#ENV{message}</textarea>
                          <input type='submit' name='ok' value='ok' />
                  </form>
          ]
  </div>

  • Note : Encore une information (notée astuce) qui a probablement beaucoup d’importance dans mon projet :

    Il arrive parfois que l’on veuille placer une BOUCLE dans le formulaire (pour proposer les champs d’un select depuis la base par exemple). L’utilisation de #EDITABLE et de cette boucle provoque une erreur. La solution est d’y ajouter une boucle CONDITION

  • Le code est encore à adapter (dire qu’il y en a pour dire et écrire que le codage d’un formulaire dans Spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP est devenu beaucoup plus facile...).

  <div class='ajax'>
          [<p class='formulaire_ok'>(#ENV*{message_ok})</p>]
          [<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
          <BOUCLE_editable(CONDITION){si #ENV{editable}|oui}>
                  <form action='#ENV{action}' method='post'>
                          #ACTION_FORMULAIRE{#ENV{action}}
                          <label>Le courriel</label>
                          [<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
                          <input type='text' name='email' value='#ENV{email}' />
                          <br />
                          <label>Le message</label>
                          [<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
                          <textarea name='message'>#ENV{message}</textarea>
                          <input type='submit' name='ok' value='ok' />
                  </form>
          </BOUCLE_editable>
  </div>

  • C’est sûr, cette boucle _editable, je ne l’avais pas perçue !
  • Mais à quoi peut bien servir cette boucle "_article" au milieu du code ? Je ne vois pas pourquoi il serait nécessaire d’afficher le titre du premier article du site ! Sans doute une scorie qui traîne... Alors, je la supprime. Mais, doute... Je pose la question sur https://www.spip.net/ecrire/?exec=a...
  • Résultat final : cette fois-ci, ça marche. Dommage qu’il m’ait fallu tout relire comme si c’était un didacticiel.
  • Prochaine étape : transférer pour une situation bien particulière (à suivre donc...)
    

  Étape 5 (bonus) : récupérer les données du formulaire

  Cette étape n’est pas dans l’article qui a servi de guide pour cette page mais, je vais en avoir besoin.

  • Après lecture de plusieurs articles, la réponse semble être dans "La fonction charger() des formulaires CVT § Que doit faire la fonction ?"
  • Donc, il faut ajouter l’affichage dans le formulaire "contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " avec par exemple :

  courriel : #ENV{email}<br />
  message : #ENV{message}<br />

  • Plus qu’à tester...
  • Sans surprise, le dysfonctionnement existe toujours un local... Et en distant, s’affichent d’abord les données initiales, puis, après la validation les nouvelles données avec au-dessous les données initiales. Progrès très sérieux : on approche, on approche. Il reste à trouver où inscrire ça... Testons d’abord avant la fermeture de la div "ajax".
  • Et c’est OK (en distant bien sûr).
  • Pour régler le problème de l’affichage des données avant toute saisie, rajout d’une boucle condition basée sur la réponse par défaut du contenu du message (simplement un point d’interrogation. Ce qui donne :

          <BOUCLE_contactmessageok(CONDITION){si #ENV{message}|<>{"?"}}>
                  courriel : #ENV{email}<br />
                  message : #ENV{message}<br />
          </BOUCLE_contactmessageok>

  
  

  Étape 6 (bonus) : un peu de "cosmétique"...

  • projet : le formulaire doit être encadré. Le champ "message" doit occuper la largeur disponible (au moins 400 pixels). Les deux champs doivent être alignés tant à gauche qu’à droite et tant qu’à faire utiliser toute la largeur du formulaire.
  • Peut-être que quelquefois, le formulaire ne devrait pas être encadré [3] Donc, ce sera fait depuis l’article si besoin.
  • dans "contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " création de l’id "formcontact" pour le formulaire [4].
  • Mise des éléments du formulaire dans des div spécifiques avec les classes correspondantes "emailcontact" et "messagecontact".
  • Ajout d’une classe "boutoncontact".
  • Et voici le fichier final (attention, les css restent à définir).

  <div class='ajax' id="formcontact">
          [<p class='formulaire_ok'>(#ENV*{message_ok})</p>]
          [<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
          <BOUCLE_editable(CONDITION){si #ENV{editable}|oui}>
                  <form action='#ENV{action}' method='post'>
                          #ACTION_FORMULAIRE{#ENV{action}}
                          <div id="emailcontact">
                                  <label class="labelcontact">Le courriel</label>
                                  [<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
                                  <input type='text' name='email' value='#ENV{email}' class="inputcontact" />
                          </div>
                          <br />
                          <div id="messagecontact">
                                  <label class="labelcontact">Le message</label>
                                  [<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
                                  <textarea name='message' class="textareacontact">#ENV{message}</textarea>
                          </div>
                                  <input type='submit' name='ok' value='ok' class="boutoncontact"/>
                  </form>
          </BOUCLE_editable>
          <BOUCLE_contactmessageok(CONDITION){si #ENV{message}|<>{"?"}}>
                  courriel : #ENV{email}<br />
                  message : #ENV{message}<br />
          </BOUCLE_contactmessageok>
  </div>

  • il ne reste plus qu’à définir les id et classes dans le fichier css. Voici le résultat (à personnaliser).

  /* ============================================================== */
  /* Formatage formulaire contact                                    */
  /* -------------------------------------------------------------- */
  #formcontact {
          position: relative;
          width  : 600px;
          height : 400px;
          margin : 0 auto;
          background : #C7EFF3; /* bleu clair */
  }
  #emailcontact {
  }
  #messagecontact {
  }
  .labelcontact {
          font-weight: bold; 
          text-decoration : underline;
          
  }
  .inputcontact, .textareacontact {
          border  : none;
          padding : 0 10px;
          margin  : 0;
          width   : 100%;
          background : #CEF6E3; /* vert clair */
  }
  .inputcontact:focus, .textareacontact:focus {
    background   : rgba(0,0,0,.1); /* gris */
    border-radius: 5px;
    outline      : none; /* supprimer le focus par défaut de quelques navigateurs */
  }
  .boutoncontact {
          margin : 0 45%; /* centré horizontalement */
  }

  
  

  Test du formulaire

  Maintenant que le formulaire fonctionne, il sera utilisé judicieusement (et parcimonieusement). Pour le tester, à chacun de le mettre en œuvre dorénavant en incluant la balise <formulaire|contact>
  
  

  Références

  • Les formulaires Cet article concerne plutôt les formulaires existant de base dans Spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP . (version mise à jour le 04/02/2020)
  • Formidable, le générateur de formulaires "Un générateur de formulaires facilement configurable pour les non-informaticien·ne·s et facilement extensible pour les développeur⋅euses." Ben... je ne parviens pas à l’adapter à mon projet. Dommage... (version mise à jour le 05/04/2020)
  • Gestion agnostique de formulaires Qui ne connaît pas le proverbe "Trop d’infos tue l’info." Ça reste quand même une super source d’informations à consulter avant d’entreprendre. (version mise à jour le 13/05/2020)
  • Mon premier formulaire pas à pas : c’est Formidable ! C’est une vidéo et le problème avec les vidéos c’est que c’est la main (celle qui tient la souris) qui fait les pauses, les retours en arrière, les avances raides, les reprises... alors que je suis habitué à me servir de mes yeux. (version mise à jour le 09/02/2019)
  • Structure HTML des formulaires de SPIP (version mise à jour le 14/01/2020)
  • Les formulaires CVT de SPIP (version mise à jour le 14/11/2019)
  • Surcharger une fonction _dist (version mise à jour le 12/05/2017)
  • Formulaires CVT par l’exemple (version mise à jour le 20/04/2020)
  • La fonction charger() des formulaires CVT (version mise à jour le 26/03/2018)
  • La fonction verifier() des formulaires CVT (version mise à jour le 26/03/2018)
  • La fonction traiter() des formulaires CVT (version mise à jour le 12/11/2018)
    

  ---

  Maintenant que ça fonctionne, je vais conserver ce formulaire sur le site et l’ajouter à ma collection de petits outils pour les rédacteurs...

  Voir en ligne : Départ depuis : "Formulaires CVT par l’exemple" (spip.net)

---

---

• Libre à vous ! #65 => logiciels libres dans l’Éducation nationale

  samedi 23 mai 2020

  • sujet principal : logiciels libres dans l’Éducation nationale avec Luc Bourdot, responsable du Pôle national de compétences logiciels libres, pôle EOLE ; chargé du pilotage des développements et de l’intégration des composants libres au sein de l’équipe de la plateforme Apps éducation.
  • la chronique « Le libre fait sa comm’ » d’Isabella Vanni, coordinatrice vie associative et responsable projets à l’April, avec l’interview de Marc Hépiègne de l’association Oisux, groupe d’utilisateurs et utilisatrices de logiciels libres dans l’Oise.
  • échange avec Pierre-Yves Dillard pour prendre des nouvelles d’Easter-eggs, entreprise spécialiste en logiciels libres
  • diverses annonces

  (postcast de 1h24 => installez-vous confortablement)

  

  Voir en ligne : https://april.org/65-apps-education

---

---

• Des ONG demandent un fonds d’urgence pour le vélo de 500 millions d’euros

  samedi 23 mai 2020

  "Afin d’anticiper et de prévenir un usage massif de la voiture individuelle à l’heure du déconfinement", le réseau Action Climat a demandé au gouvernement de débloquer un fonds d’urgence pour le vélo de 500 millions d’euros.

  

  Voir en ligne : https://reporterre.net/Des-ONG-dema...

---

---

• Synchronisme et apprentissage en ligne

  samedi 23 mai 2020

  Synchronisme mais aussi son "pendant", l’asynchronisme. Un titre un peu mystérieux pour aborder les horaires ou les plutôt les temps d’une formation à distance.

  Dans les apprentissages en ligne, deux grandes tendances peuvent séparer les pratiques : les apprenants et le formateur sont en liaison instantanée ou leurs échanges sont différés.

  L’avantage de la liaison instantanée est la réponse du formateur quasi instantanément à une question d’un apprenant. Côté formateur, c’est la possibilité de modifier dans le même temps le contenu du cours en fonction des réactions des apprenants. Il s’agit donc quasiment d’une classe à distance (d’une classe virtuelle). L’inconvénient est le respect des horaires tant du coté des apprenants que du formateur puisqu’il est alors indispensable qu’apprenants et formateur soient connectés en même temps. On parle de formation à distance synchrone.

  L’avantage principal des échanges différés est la liberté de temps laissée à l’apprenant pour s’approprier la réponse. L’inconvénient est de devoir attendre la réponse avec un délai inconnu. Côté formateur, l’avantage est surtout le temps disponible pour formuler une réponse la plus adaptée possible avec la possibilité de proposer des cheminements divers. L’inconvénient majeur, toujours côté formateur, est le décalage qui va se produire entre les apprenants qui ne progressent pas au même rythme. On parle de formation asynchrone.

  Les professionnels de la formation à distance utilisent le terme de rétroaction (feedback) pour qualifier les réponses et l’auto-régulation pour aborder la liberté des temps d’appropriation côté apprenants.

  Difficile de concilier les avantages des deux formules. Il peut toutefois y avoir un cas un peu particulier : les échanges sont différés (asynchronie) entre les apprenants et le formateur mais instantanés (synchronie) entre les apprenants. Dans ce cas, cela nécessite un accord de tous les apprenants qui vont connaître tous leurs "partenaires" de cours. Tout le monde peut percevoir, la "discrétion" qu’il peut y avoir entre les apprenants dans le cas des échanges différés.

  Selon les cas, les outils proposés vont donc être différents.

  Mots clés : FOAD , enseignant

---

---

• Journal Comparatif des logiciels de montage vidéo libres, le retour !

  vendredi 22 mai 2020

  L’interface de Shotcut est un bon compromis entre simplicité et richesse des fonctionnalités, alors certes il n’en dispose pas autant que Kdenlive, mais suffisamment pour commencer à faire des montages assez évolués.

  

  Voir en ligne : https://linuxfr.org/users/funix/jou...

---

---

• page précédente
• page suivante