A vous de jouer

Bac à sable

Premiers défis à réaliser

1) premier défi => écrire dans cette page

• cliquez sur "éditer la page" (en bas) ou double cliquez dans la page,
• l'aspect de la page va légèrement changer car vous êtes en mode édition
• écrivez ce que vous voulez ici =>
• puis cliquez sur le bouton "sauver" (en haut à gauche) et observez votre travail

2) deuxième défi => insérer un bouton

• cliquez sur "éditer la page" ou double cliquez dans la page,
• Positionnez votre curseur ici =>
• cliquez sur composants / boutons et laissez vous guider,
• cliquez sur "insérer dans la page",
• sauvez
  • vous pourrez ensuite explorer les autres composants

3) troisième défi => modifier votre bouton

• Passez la page en mode édition,
• cliquez sur la ligne correspondant au code du bouton (commençant par {{button}})=> un petit crayon apparaît dans la marge,
• cliquez sur le petit crayon et changez les paramètres,
• cliquez sur "mettre à jour le code",
• sauvez
  • Cette démarche de modification fonctionnera pour tous les codes des composants

4) quatrième défi => trouver le nom d'une page

• Regardez l'url de cette page
• le nom de cette page est le mot se situant après le ?

5) Et enfin => restaurer la version précédente d'une page (en cas de préférence ou d'erreur)

• cliquez, en bas de la page, sur Dernière édition : 17 jan 2022
• choisissez une des versions précédentes,
• cliquez sur "Restaurer cette version",
• le tour est joué.

Une aide simple est aisément accessible en cliquant sur "aide mémoire ?" lorsque vous êtes en mode édition.

Exercices mise en forme des contenus

Serez-vous capable d'insérer sur une page de votre espace de test les éléments suivant ?

• Un tableau avec 3 colonnes et 3 lignes - Indice la syntaxe est disponible en cliquant sur
• des icônes 🎃
• Une photo centrée qui quand on clique dessus envoie sur votre site préféré avec un effet de zoom et un joli texte qui apparait quand on passe dessus
• Une liste à puce avec des niveaux 1 et des niveaux 2
• Des liens externes et des liens internes
• Un cadre bleu avec un texte écrit en blanc
• Insérer une vidéo youtube, peertube ou dailymotion dans une page
• Insérer un espace de co-écriture de type Pad
• Et une mise en page avec 3 colonnes, une qui prend la moitié de la page et les deux autres chacune un quart
• Créer une page qui ressemble à cela
• Changer le favicon de votre wiki (petite icone se trouvant à gauche de votre onglet de navigation) admin
• Dans la page BacAsable,
  • mettez un bandeau et un bas de page spécifique
  • débrouillez vous pour que cette page (et uniquement elle soit dans les tonalités de jaune)
• Changez les couleurs du site dans les tonalités de votre logo / charte graphique admin

Voici 3 défis à réaliser sur votre espace de test

L'objectif de cette série d'exercices est de reproduire cette page d'accueil https://classe-dehors.org ;

Niveau 1 🥉 copier une page issue d'un autre wiki

• copiez l'intégralité de la page https://classe-dehors.org dans une nouvelle page de votre espace de test, vous pouvez nommer cette nouvelle page PageModele par exemple

Astuce : pour copier rapidement la page : ajouter /raw à la fin de l'url pour accéder au code source

• pour intégrer les images vous devrez les enregistrer sur votre PC puis les télécharger dans votre nouvelle page

Niveau 2 🥈 Modifier la palette de couleur

En passant par le menu "Roue crantée / Apparence"
Créez une nouvelle palette de couleur (Nouvelle configuration graphique) avec les couleurs suivantes :

• couleur primaire #421ef4;
• couleur secondaire 1: #489e83;
• couleur secondaire2: #f8c6b1;
• couleur texte : #4e5056;
• couleur neutre: #87898e;
• couleur claire : #f2f2f2;
• police des textes : 'Cabin', sans-serif;
• police des titres : 'Alegreya', sans-serif;

Modifiez son nom palette-modele et sauvegardez

Appliquez cette configuration à la PageModele seulement : pour cela éditez PageModele puis cliquer sur le bouton Theme en bas de page et choisir le preset palette-modele

Niveau 3 🥇 Personnalisez les couleurs

En éditant pageCSS, modifiez :
- la couleur des titres
- la couleur des liens
- la couleur de fond du pied de page
- augmentez l'arrondi des boutons

Niveau 1 🥉 Importer un formulaire existant

En moins de 3 minutes créez le même formulaire que le formulaire des tutos "Anim Comment faire pour" sur le wiki de https://reseau.s-mart.fr/ avec les listes associées admin

Niveau 2 🥈 Modifier le formulaire agenda et paramétrer l'affichage du calendrier

Ajouter une liste de choix pour décrire le type de réunion : réunion d'équipe, de bureau, de CA

Afficher sur la page d'accueil de votre site

• les 5 prochains évènements
• avec une icone particulière si cet évènement est en présence ou a distance
• et une couleur signifiant réunion d'équipe, de bureau, de CA

Niveau 3 🥇 Créer un nouveau formulaire

Vous permettez à des paysans de décrire leur exploitation, le nombre de vaches, volailles, moutons, le nombre d'hectares de l'exploitation...

• s'il possèdent des volailles, leur proposer la possibilité de préciser le nombre de poules, canards, lapins
• Affichez un tableau qui résume :
  • pour chaque exploitation afficher le nombre total d'animaux
  • le total de chaque catégorie d'animal ainsi que les surfaces totales de toutes ces exploitations

Exercices gestion des droits

Sur vos espaces perso

• Les formateurs ont hacké vos espaces de travail - restaurez vos contenus grâce à l'historique de page ou installez l'extension Maintenance et utilisez l'action despam
• Dans l'onglet Gestion des utilisateurs créer un groupe equipe et ajoutez un utilisateur dans l'éqiupe
• Créer une nouvelle page "Confidentiel" et modifier les droits de lecture d'une seule de vos pages pour qu'elle soit visible à l'équipe seulement - peut se faire via la page Gestion des droits
• Sur votre page d'accueil ajouter un bouton avec un lien vers la page "Confidentiel" et faire en sorte que seules les personnes connectées et membre du groupe équipe puisse voir ce bouton.

• Dans l'onlet Fichier de conf Ne permettez à vos utilisateurs de pouvoir modifier le site que si ils sont connectés
• Dans l'onglet Fichier de conf, transformez votre site en site web "classique" (mode "hibernate") c'est à dire empêcher toute possibilité de modifications être connecté en admin

• Dans l'onglet Mise à jour extension Vérifiez si votre site est à jour et repérez les possibilités offertes par les dernières mises à jour être connecté en admin Les mises à jour de version permettent de bénéficier des dernières avancées en terme de sécurité.