Mardi 29 Octobre 2024
Il t'est forcément arrivé lors de tes premiers pas dans WiMS de te dire que tu aimerais que la page d'accueil ne ressemble pas forcément à ça👇
Puis en cherchant un peu tu as découvert que tu pouvais proposer un affichage en séquences. Si tu ne sais pas encore comment faire, consulte le tuto
Et bien dans ce tuto tu vas découvrir que la seule limite c'est ton imagination. Par exemple voici la page d'accueil que voient actuellement mes 5es quand ils entrent dans WiMS
Donc la question , c'est "comment fait-on"? 🤡
Je vais commencer par la fin (façon Tarantino 😅). Si tu ne t'y connais pas du tout en HTML , et bien grâce au Llama tu peux obtenir du code HTML sans trop d'efforts, il te suffit juste de le guider en lui disant ce que tu veux. C'est ce que j'ai fait. Et c'est ainsi que j'ai obtenu le code ci dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page HTML sans CSS</title>
</head>
<body>
<div>
<h1>Bienvenue sur ma page HTML</h1>
<p>Ceci est un exemple de page HTML sans aucune feuille de style CSS.</p>
<p>Vous pouvez ajouter du contenu ici comme du texte, des images, des liens, etc.</p>
<a href="#">Ceci est un lien</a>
</div>
<div style="display: flex; flex-wrap: wrap; margin-top: 20px;">
<div style="border: 1px solid black; border-radius: 10px; padding: 10px; margin: 5px; width: calc(33.33% - 10px);">Encadré 1</div>
<div style="border: 1px solid black; border-radius: 10px; padding: 10px; margin: 5px; width: calc(33.33% - 10px);">Encadré 2</div>
<div style="border: 1px solid black; border-radius: 10px; padding: 10px; margin: 5px; width: calc(33.33% - 10px);">Encadré 3</div>
<div style="border: 1px solid black; border-radius: 10px; padding: 10px; margin: 5px; width: calc(33.33% - 10px);">Encadré 4</div>
<div style="border: 1px solid black; border-radius: 10px; padding: 10px; margin: 5px; width: calc(33.33% - 10px);">Encadré 5</div>
<div style="border: 1px solid black; border-radius: 10px; padding: 10px; margin: 5px; width: calc(33.33% - 10px);">Encadré 6</div>
</div>
</body>
</html>
Code que j'ai donc adapté pour obtenir la mise en page donnée plus haut, en y insérant au bon endroit les éléments que j'avais dans ma précédente version "faite main" de ma page d'accueil personnalisée.
Techniquement on pourrait même mettre du CSS, mais pour l'instant j'ai juste voulu voir ce qu'on peut faire avec du HTML sans CSS
Donc maintenant qu'on sait comment "produire" ou faire produire du code HTML, comment est-ce qu'on fait pour personnaliser sa page d'accueil.
La procédure est simple:
Créer un document : Ajout d'activités> Nouveau Document
2. Dans ce document que j'ai appelé page d'accueil c'est là qu'on insérera le code html qu'on veut mettre dans sa page.
3. insérer le code html de la page d'accueil qu'on souhaite, soit en le créant petit à petit, soit en faisant un copier collé du modèle que je t'ai mis à disposition sur le padlet OEF
Et si tu es patient prends le temps de lire la docWiMS sur la création de documents. Et ainsi tu comprends que chaque fois que tu voudras modifier ta page d'accueil tu auras juste besoin de modifier ton document page d'accueil.
Il y a là un potentiel de ouf! Imaginons que tu sois sur une séquence donnée, et que tu aies envie que tes élèves ne voient que les feuilles d'exercices et documents, dont tu as besoin pour cette séquence, voila donc une solution! Plus de temps perdu pour les élèves qui ne savent pas bien naviguer entre les feuilles (oui oui, les fameux g33ks dont on nous parlent tant... 🤯 Bref si tu as commencé à WiMSer avec des sixièmes je parie que le mois de septembre a été laborieux pour que TOUS les élèves arrivent à se mettre au travail dans la bonne feuille d'exos en moins de 5 minutes).
Donc je disais cela permet de sélectionner ce qu'on veut que les élèves voient. Et comme c'est de l'HTML tu peux iframer du apigeom, du @geogebra , des animations de @dment37 ,du @CoopMaths_fr , rajouter des classes génially de @MathsetJeux ou des vidéos youtube de @mtiques ou @jy_labouche , ou des modules d'entrainement au @ConcoursCastor . Bref la limite c'est ton imagination.
Mais déjà rien qu'avec la DocWiMS tu as de quoi faire rien qu'avec les feuilles d'exos de ta classe.
J'ai tellement digressé que je suis sûr que je t'ai perdu. 😅😅😅😅😅😅😅
Donc au stade où nous sommes , tu as créé ta page d'accueil dans un document WiMS. Retiens bien le numéro de ton document. Si tu n'as pas l'habitude de te servir des documents WiMS , ce numéro c'est sûrement le 1. Mais si tu utilises les classes du gang, tu as déjà au moins 64 documents par défaut dans ta classe 🫠🫣, donc ton numéro de document c'est le 65🤡
Et bien pour "activer" ta page d'accueil personnalisée , il va falloir aller dans Configuration et Maintenance> Apparence
Et enfin dans le champ de saisie en face de "page d'accueil" tu écris c65/main si ta page d'accueil a été écrite dans le document n°65. Et lorsque tu es en modification d'une page d'accueil existante comme c'est le cas pour moi, l'aperçu du code de ta page est visible dans l'encadré "Insérer des définitions de style CSS".
Erreur de débutant: il ne faut surtout pas copier ton code html dans l'encadré "Insérer des définitions de sylte et CSS" , mais y mettre uniquement du CSS. Le code html c'est uniquement dans ton document 65 que tu as créé.
Et après avoir sauvegardé , tu mets le CSS dans l'encadré "Insérer des définitions de sylte et CSS". Si tu n'as pas de CSS , laisse le champ vide.
Tu n'as plus qu'à cliquer sur enregistrer et ça y est désormais tes élèves voient ta page personnalisée.
Ce n'était pas plus compliqué que ça.
Donc désormais le challenge c'est d'apprendre à y faire fonctionner du CSS. C'est clairement faisable. Donc je prends les paris que dans 2 mois lorsque je te montrerai la page d'accueil d'une classe WiMS tu ne pourras pas deviner que c'en est une si on ne te le dis pas😅.
Lundi 21 Avril 2025 c'est chose faite: consulte le nouveau tuto, où cette fois-ci j'utilise Mistral plutôt que LLama https://sites.google.com/view/gangwims/ia-et-wims/mistral-et-wims . Grâce à Mistral j'ai obtenu du code CSS et du code HTML correspondant à l'affichage que je souhaite.
Car le CSS c'est un banger de ouf!! Ce sera tout pour ce tuto. Tout seul on va plus vite, à deux on va plus loin. Donc ce sera un plaisir si des pros du CSS me filent des "tips" pour rendre mes pages plus agréables....