Fonctionnalités de Capytale⚓︎

Dans le Focus du numéro de juin 2025, nous avons présenté l'activité Web que Brice Amiel a partagée dans la bibliothèque.
Nous allons voir comment créer une telle activité.

Rappels⚓︎

Internet est la structure matérielle qui crée le réseau mondial interconnecté.
Le web est l'ensemble de ce qui circule via internet.
Les sigles qui vont émailler ce numéro :

HTML est l'acronyme de l'anglais Hyper Text Markup Language, soit en français « Langage de balisage hypertexte ».
Ce langage permet de structurer des documents et d'organiser des liens entre eux.
CSS provient de l'anglais de Cascading Style Sheets, soit « feuilles de style en cascade ». Cascade évoque ici le fait qu'un style « enfant » hérite des caractéristiques du style parent dont il dérive.
Ce langage permet de créer un style (couleur, taille...) applicable uniformément à un ensemble de pages HTML.
JS tire son origine de l'anglais Java Script, soit « Scénario Java ». Le mot « java », soit café en argot américain aurait été choisi parce que ce serait la boisson favorite des programmeurs.
Ce langage de programmation est exécutable par les navigateurs au sein d'une page HTML.
SQL est l'acronyme de l'anglais Structured Query Language, soit « langage de requêtes structurées ».
Ce langage permet de créer et d'interroger des bases de données relationnelles.

Les trois premiers langages et le PHP sont les piliers du web.

Création⚓︎

Depuis votre espace enseignant, dans la partie Créer une nouvelle activité, cliquez sur l'icône de l'application icône Web .

La fenêtre qui apparaît sert à donner un nom à votre activité et à gérer quelques paramètres que vous pouvez laisser par défaut pour le moment.

Enregistrez.

L'activité et son code de partage existent désormais dans votre espace.

Visite de l'interface⚓︎

Parmi les activités proposées par Capytale, Web présente l'espace de travail le plus complet.
Voyons donc la fonction des différentes zones.

De la gauche vers la droite sur l'image ci-dessus, on trouve :

Consignes et Notes partagées⚓︎

Ces deux zones vont progressivement être intégrées à toutes les activités, au fur et à mesure du déployement de l'interface commune de Capytale appelée métaplayer :

La zone Consignes est commune à tous les élèves et n'est éditable que par l'enseignant. L'élève y lit les consignes rédigées par l'enseignant.
La zone Notes partagées est propre à chaque élève. Elle est éditable par l'élève et par son enseignant.
C'est l'endroit où vous pouvez demander à chaque élève de rédiger ou de compléter une réponse que vous avez commencée.
Vous pouvez également donner des indications à un élève à partir de sa copie.
Un clic sur les icônes permet de basculer entre utilisation et désactivation de ces zones.

Éditeur de code⚓︎

Cette zone permet d'écrire ou de modifier les différents codes html, css et js.
Chaque onglet correspond à un fichier physique.

Paramétrage⚓︎

La partie grise Permissions élève / Fichiers dans l'éditeur de code n'est accessible qu'aux enseignants lors de la préparation de l'activité.
Ce paramétrage est essentiel puisqu'il décide des droits que vous accordez aux élèves lorsqu'ils réaliseront le travail demandé.

L'enseignant peut créer ou déposer des fichiers.
Il peut choisir les fichiers que l'élève verra, ceux qu'il pourra éditer , ceux qu'il pourra renommer ou supprimer et s'il lui sera possible d'en ajouter (Créer des fichiers) et quels types seront autorisés.
L'enseignant peut également masquer l'en-tête du code HTML (Ne voir que le corps HTML) pour les élèves, ce qui est très pratique lors des premières initiations.
Pour découvrir le rôle des balises, inutile de perturber l'élève avec les déclarations de l'entête, même si nous savons qu'elles seront essentielles plus tard.
L'icône permet de replier cette zone, comme en mode élève lorsque l'accès aux fichiers est autorisé.
Lorsque le téléchargement est autorisé, chaque élève peut Télécharger l'intégralité des fichiers qu'il a construit sous la forme d'une unique archive compressée.

Web est avant tout un outil de découverte

L'existence des paramètres précédents indique bien que l'activité Web a été conçu

pour que les élèves découvrent la programmation du web, l'apprennent et y progressent
et pas pour être un logiciel de production de site web.

Prévisualisation⚓︎

Cette zone affiche en temps réel, le résultat de l'interprétation des différents codes présents dans la zone Éditeur de code.

L'élève voit immédiatement l'influence de son travail sur le rendu.
Pour des situations plus complexes, notamment lors de travaux de programmation en JavaScript ou lorsque les élèves de NSI deviennent des spécialistes, Web permet également de configurer une interprétation à la demande, avec l'entrée Mode de prévisualisation.

Bandeau⚓︎

En haut à droite du bandeau Capytale, on trouve :

une bascule vers l'aperçu de l'activité telle qu'elle se présentera à l'élève,
le paramétrage de la disposition des différentes zones et le téléchargement de l'ensemble de l'activité au format WebIDE pour les enseignants.
le passage en mode plein écran pour les enseignants et les élèves.

Contenu de l'activité⚓︎

En exemple, nous préparons un site imaginaire constitué d'un fichier image .svg, de deux fichiers .html, du fichier .css et du fichier .js suivants.

Image jointe : art-glass-with-brush-and-pencil.svgContenu de index.htmlContenu de partie_1.htmlContenu basique de style.cssLa fonction contenue dans programme.js

image jointe

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dessine moi un ...</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Dessine moi un ...</h1>
<img width="20%"src="art-glass-with-brush-and-pencil.svg">
<ul>
    <li> Première partie. </li>
    <li> à venir : Deuxième partie .</li>
    <li> à venir : Conclusion.</li>
</ul>
    <p>L'image provient du site <a href="https://openclipart.org/">Open Clipart</a> et est libre de droits.</p>

</body>
</html>

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifiez le titre de la page</title>
</head>
<body>
<h1> Dessine moi un ...</h1>
<h2> Préalable</h2>
    <p>Sortez votre matériel</p>
<h2>Suivez le guide</h2>
    <h3>Composition</h3>
    <p>Bla bla.</p>
    Esquisse
    <p>Bla bla.</p>
    Trait
    <p>Bla bla.</p>
    Couleur
    <p>Bla bla.</p>
<h2>Remettez l'ouvrage sur le métier</h2> 
    <p>A venir.</p>
Retour vers le menu.
</body>
</html>

CSS

body {           /* s'applique à toute la page */
    width:90%;   /* largeur à 90 % de l'espace disponible*/
    margin: auto; /* marge horizontale automatique centre la zone */
    background-color: lightgoldenrodyellow; /* couleur du fond */  
}

h1 {                     /* s'applique aux titres h1 */
    text-align: center;  /* centre horizontalement */
    color: chocolate;    /* formate le texte en marron */
    font-size: 40px;     /* donne la taille de la police */
}

p {                          /* s'applique aux paragraphes p */
    font-family: sans-serif; /* Utilise un police sans empattement (sans sérif) */
    margin-left: 20px;
    margin-right: 100px;
}

ul {                    /* s'applique aux listes à puce ul */

}

JavaScript

// Change la couleur d'arrière plan du corps de la page
function fond1() {
document.body.style.backgroundColor = "#f3f393"; 
}

Après avoir interdit l'édition du dessin et la suppression des fichiers par les élèves, cela donne :

Fichiers initiaux

Consignes pour les élèves⚓︎

Nous demandons :

de structurer le html, notamment en créant des liens entre les pages,
de modifier le css pour obtenir un style proche d'une image jointe,
puis de rendre actif un script java et de le compléter.

La zone de consignes permet de rédiger des textes structurés, avec une mise en forme claire, par exemple :

consignes claires

Distribution, correction⚓︎

Dans Capytale, comme pour toutes les autres, l'activité Web de votre espace dispose d'un code, d'un QR code et d'un lien de partage.

QR code, code et url

Ces trois moyens permettent aux élèves de créer une copie personnelle de l'activité dans leur espace, tout en vous en donnant un accès permanent à leurs travaux en consultation.

Le classique espace d'appréciation et d'évaluation peut être amendé avec des annotations dans la zone de Notes partagées si vous l'avez activée.

corrige corrige

Avec ces informations, vous devez être capable de créer une activité Web ou d'adapter une des 131 présentes dans la bibliothèque, puis de l'utiliser avec vos élèves.

Bloc Web ⚓︎

Impossible de terminer cette présentation sans dire un mot de l'activité Bloc Web proposée par Capytale.

Déplacer des blocs et l'application construit le code html correspondant.
Insérer du code valide dans le html fabrique les blocs correspondant.

Voila un moyen de retrouver une syntaxe html oubliée ou de débuter dès le collège.

exemple bloc web

Accès au focus sur une activité