« STIC:ECOTEC - Période 1 (Gaïa) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
← Modification précédenteModification suivante →
VisuelWikicode
Aucun résumé des modifications
Ligne 466 : Ligne 466 :
* [[:en:HTML5]]
* [[:en:HTML5]]
* [[:en:CSS]] (page avec plusieurs liens à des sujets plus spécifiques)
* [[:en:CSS]] (page avec plusieurs liens à des sujets plus spécifiques)
== Activités Edda ==
=== Tâche obligatoire ===
Tâche à effectuer :
* Créer une page HTML5 avec un message "Vive HTML5", le [https://www.w3.org/html/logo/ logo de HTML5], et un paragraphe de votre choix
* Styliser votre page avec '''2 déclarations CSS'''
* Publier dans votre espace travaux, dans un sous dossier spécifique
* Pointer votre navigateur sur la page qui vient d'être publiée et lever la main quand c'est terminé et on viendra contrôler
Contraintes :
* Votre fichier doit s'appeler <code>index.html</code>
* Le logo doit se trouver dans un sous dossier assets/images/
* Vous devez avoir au moins une déclaration de style dans un fichier .css externe
* Modifiez les dimensions de l'image dans le code (style css dans l'attribut ou dans le fichier externe, à choix) pour une hauteur de 450px
* Votre page doit se trouver dans un dossier '''minit/vive-html5/''' dans votre espace travaux sur tecfaetu.unige.ch, ça veut dire que le chemin doit ressembler à <code>/web/etu-maltt/edda/votre-login-court/</code> + '''les sous-dossiers que vous créez'''
* Ajouter à la fin de la page la date et votre nom
=== Tâche facultative ===
Si vous avez terminé la première tâche :
* Ajouter une deuxième page qui parle de CSS, placez-la où vous voulez
* Insérez du contenu de votre choix
* Ajouter un lien hypertextuel à la page sur HTML5 qui pointe vers la page sur CSS
* Ajoutez un lien hypertextuel à la page sur CSS qui pointe vers la page sur HTML
* Publiez le tout sur votre espace travaux pour que les changements soient mis à jour


[[Category: Ressources STIC]] [[Catégorie:Cours et travaux]]
[[Category: Ressources STIC]] [[Catégorie:Cours et travaux]]




Version du 2 septembre 2026 à 17:12

Introduction à HTML5

Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante :

Introduction à HTML5

Référez-vous à la section Workshop HTML5 pour les exercices de consolidation du contenu.

Objectifs

Après cette introduction à HTML5 vous devrez être familier avec :

  • Les grandes lignes du fonctionnement requête/réponse d’une ressource/page web
  • Qu’est-ce qu’un langage de marquage
  • L’existence de différentes versions de HTML
  • La structure d’un document HTML5
  • Les balises et attributs HTML les plus fréquents
  • Les liens hypertextuels : protocoles, domaines, chemins, noms de fichiers, extensions
  • Différents type de fichiers (pages web, images, etc.)
  • L’utilisation des outils de développement d’un navigateur web
  • L’utilisation et la configuration d’un éditeur de texte

Présentation

La présentation du cours est disponible en tant que page HTML5 accessible ici :

Présentation de HTML5

NB: elle a été réalisée en utilisant Reveal.js, une bibliothèques JavaScript que nous allons voir en troisième période.

Outils

Outils de développement du navigateur web

Nous allons utiliser les outils de développement d'un navigateur pour montrer dans la pratique comment une page HTML est affichée par un navigateur web.

Sur le navigateur que vous avez installé (nous préconisons Firefox), pointez vers la page de TECFA :

Pour ouvrir les outils procédez de cette manière (voir également l’image) :

  1. Cliquez sur l’icône du menu sur la droite de l’écran
  2. Sélectionnez l’item « Plus d’outils »
  3. Cliquez sur « Outils de développement »
Ouvrir les outils développeur sur Google Chrome

Vous devrez obtenir un résultat similaire à celui-ci :

Capture d'écran de la page TECFA avec outils développeur sur Firefox

Éditeur de texte

Un éditeur de texte est un logiciel qui permet d'écrire du code dans plusieurs langages (par exemple HTML, CSS, JavaScript, python, XML, etc.), avec des fonctionnalités d'aide comme par exemple la mise en évidence de la syntaxe, l'aide pour compléter des mots, la signalisation d'erreurs, etc.

Dans le cours ECOTEC nous proposons d'adopter Visual studio code, un logiciel open-source développé est maintenu par Microsoft. Le logiciel est disponible pour Windows, Mac et Linux. Pour plus de détails, voir la page de ce Wiki :

Code et balises fréquentes

Squelette HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Titre du document</title>
</head>
<body>
    
</body>
</html>

Titres

<h1>Titre de premier niveau (Grand)</h1>
<h2>Titre de deuxième niveau</h2>
<h3>Titre de troisième niveau</h3>

Paragraphes

<p>Texte du premier paragraphe.</p>
<p>Texte du deuxième paragraphe.</p>

Liens hypertextuels

<a href="http://tecfa.unige.ch">TECFA</a>
<a href="../lien-relatif/page.html">Lien relatif</a>

Listes à puces

Non-ordonnée
<ul>
    <li>Premier item non ordonné</li>
    <li>Deuxième item non ordonné</li>
    <li>Troisième item non ordonné</li>
</ul>
Ordonnée
<ol>
    <li>Premier item ordonné</li>
    <li>Deuxième item ordonné</li>
    <li>Troisième item ordonné</li>
</ol>

Images

Le fichier avec l'image doit posséder une URL. Évitez de pointer à des images qui : 

<img src="chemin/au/fichier/image.jpg" alt="Texte alternatif pour screenreaders" title="Description de l'image" />

La balise img est une balise vide qui n'accepte pas de contenu. Pour cette raison, il est de bonne pratique de placer le / de clôture à la fin de la balise.

Workshop HTML5

Fichiers pour le workshop

Lors de l’activité workshop, vous allez travailler sur des fichiers que nous avons préparés pour cette partie de l’atelier. Les fichiers sont disponible dans un dépôt GitHub. Pour l'instant, il est utilisé seulement pour télécharger les fichiers nécessaires :

  1. Aller à l’adresse https://github.com/MALTT-STIC/minit-html5-essentials
  2. Cliquer sur le bouton vert en haut à droite « Code »
  3. Cliquer sur « Download ZIP »
Capture d'écran du répositoire avec les fichiers pour le Workshop

Il faudra ensuite extraire le contenu du fichier et le mettre sur votre ordinateur. Puis l’ouvrir avec Visual Studio Code. Cliquez d'abord sur : 

File > Open folder…

Chercher le dossier que vous avez extrait dans votre gestionnaire des fichiers et sélectionnez-le. Vous devrez obtenir un résultat similaire à l'image suivante :

Capture d'écran du dépôt avec les fichiers pour le Workshop ouverts en Visual studio code

La partie du gestionnaire des fichiers a été agrandie pour l'utilité de la capture d'écran. Pour contrôler l'affichage, vous pouvez utiliser le menu View > Appearance > Zoom in/out

Fonctionnement du Workshop

Lorsque vous ouvrez le fichier du workshop avec Visual Studio Code, vous avez trois dossiers :

  • examples
  • hands-on
  • tasks

Les dossiers Examples et Tasks contiennent des sous-dossiers qui sont en relation. Pour chaque dossier exemple, qui contient des fichiers HTML5 avec du code, il existe un dossier dans les tâches où vous trouverez un « challenge » et la solution au problème. Le dossier « Hands-on », par contre, est vide.

Les trois dossiers sont conçus pour créer un flux de travail de la manière suivante :

  1. Vous regardez le code et le rendu de la page d’exemple
  2. Lorsque vous avez compris l’exemple, vous créez un sous-dossier dans le dossier hands-on et vous essayez vous-même de coder quelque chose de très simple similaire à l’exemple.
    • Il faudra créer les dossiers et les fichiers à partir de zéro pour émuler une situation de départ.
    • Adoptez déjà la bonne pratique de nommer vos dossiers/fichiers en n'utilisant que des lettres minuscules (sans accents) et les symboles - ou _
    • Évitez de faire du copier/coller !
    • Ne pas utiliser l'IA !
  3. Quand vous pensez maîtriser le sujet, vous pouvez essayer de résoudre la tâche associée.
    1. Ouvrez le fichier qui se termine par xxxx-challenge.html et lisez les instructions dans le commentaire en haut de la page
    2. Essayez de résoudre la tâche
    3. Regardez la solution dans le fichier xxxx-solution.html
  4. Passez à l’exemple suivant

N’hésitez pas à demander de l’aide si vous en avez besoin.

Astuces d'édition pour vous faciliter la vie

La prise en main d'un éditeur de texte comporte plusieurs difficultés qui font partie du processus d'apprentissage. Voici quelques astuces qui peuvent vous rendre la vie plus facile (ou moins compliquée au moins !) :

  1. Si vous n'avez pas mis la sauvegarde automatique, enregistrez/sauvegardez régulièrement votre travail en utilisant le raccourci clavier CTRL + S. Un fichier dont les modifications ne sont pas encore enregistrées se repère dans l'éditeur par un cercle noir à côté de son nom.
    Un circle à côté du nom du fichier signale que les modifications n'ont pas été enregistrées.
  2. Faites très attention au nom des fichiers et à leur extension, notamment le fait que l'extension est séparée du nom par un point (nom-du-fichier.extension). N'utilisez que des lettres minuscules, sans espaces ni caractères spéciaux (sauf - ou _) ! Si vous avez besoin de modifier le nom d'un fichier, vous avez deux alternatives :
    • Faire clic droit sur le nom du fichier et choisir Rename depuis le menu contextuel
    • Cliquer normalement sur le nom du fichier et utiliser le raccourci clavier F2
  3. Il est utile d'avoir les fichiers d'exemple et le fichier de travail (hands-on ou tâche) en même temps à l'écran. Vous pouvez diviser l'éditeur en colonne avec le menu View > Editor Layout > Two columns. Pour afficher un fichier dans une colonne spécifique, vous pouvez le glisser dans le Group correspondant dans l'éditeur de fichiers, ou sinon glisser le nom du fichier dans l'éditeur pour le déplacer dans l'autre colonne.

Créer un squelette de document HTML

Les documents HTML présentent toujours une structure similaire, en commençant par le DOCTYPE et la vision entre head et body. Pour éviter d'écrire à la main ce code répétitif, VSC met à disposition un raccourci pour créer un squelette de code. Pour bénéficier de cette fonctionnalité, suivez les étapes suivantes :

  • Dans le gestionnaire de fichiers, créez un document avec extension .html
  • Ouvrez-le en édition
  • Dans le document vide, saisissez html:5 (sans <...>)
  • Déjà après quelques lettre l'éditeur vous propose les options relatives, donc vous pouvez cliquer sur html:5 même avant
Créer un squelette de document HTML5

L'éditeur va automatiquement insérez dans le code le squelette HTML5 suivant : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Souvenez-vous de changer l'attribut lang="en" en lang="fr" à ligne 2 si votre document est en français.

Le fichier doit déjà avoir l'extension .html, si non vous n'aurez pas le menu contextuel qui vous propose le choix du squelette !

Introduction aux CSS

Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante que vous pouvez consulter pour rappel ou si vous étiez absent-es :

Introduction à CSS

Référez-vous à la section Workshop CSS pour les exercices de consolidation du contenu.

Objectifs

Après la séance consacrée à l’introduction aux CSS vous devrez être familier avec :

  • Le fonctionnement « avancé » d’un navigateur web (parsing et rendering)
  • Le Document Object Model (DOM)
  • La séparation entre contenu (HTML5) et forme (CSS)
  • Les éléments HTML en tant que « boites » avec des coordonnées
  • Les différentes manières d’ajouter des styles à vos pages web (attribut, inline et fichier externe)
  • Les propriétés et valeurs de style les plus fréquentes
  • Les différentes manières de positionner les éléments HTML (propriété CSS position)

Présentation

Les slides de la présentation sont disponibles directement comme pages/application HTML5 en utilisant Reveal.js, une bibliothèques JavaScript que nous allons voir dans le cours STIC:STIC I :

Présentation de CSS

Outils

Nous allons continuer à utiliser/explorer l’éditeur de texte Visual studio code qui propose des fonctionnalités qui facilitent le codage CSS. De plus, nous allons utiliser l’environnement web codepen.io qui permet de montrer des exemples HTML + CSS de manière simple et intuitive. Cet environnement sera utilisé également dans le cours STIC I lors de l’introduction à JavaScript

Ajouter du CSS à vos pages HTML

Avec l'attribut style

<body style="background-color: black; color: white">

Avec la balise style

Dans le <head>...</head> de votre page : 

<head>
    <meta charset="UTF-8">
    <title>Style inline</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
    </style>
</head>

Avec un fichiers CSS externe (conseillé)

Lien dans le <head>...</head> de votre page : 

<head>
    <meta charset="UTF-8">
    <title>Style with external file</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

Le fichier doit exister et respecter le bon chemin. Dans ce cas, le fichier s'appelle style.css et doit se trouver au même niveau de la page HTML : 

/* This is an external CSS file */


/* There is no need for any header, and it must contain only CSS syntax */

body {
    background-color: black;
    color: white;
}

Balises pour le style

Les propriétés CSS peuvent s'appliquer à toutes les balises HTML5, cependant, par convention, il existe deux balises qui sont souvent utilisées lorsque les éléments ont exclusivement une fonction de style (i.e. pas de relation sémantique avec le contenu). Les deux balises sont :

  • <div>...</div> à utiliser pour des blocs de contenu, par exemple : 
    <div>
  <p>Paragraphe à l'intérieur du div</p>
  <p>Autre paragraphe à l'intérieur du div</p>
</div>
  • <span>...</span> à utiliser surtout pour des bouts de texte, par exemple : 
    <p>Mon texte avec un <span>mot</span> qui possède un style particulier</p>

Sélecteurs et propriétés fréquentes

Trois modalités de sélection

  1. Nom de la balise 
    body {
  ...
}

p {
  ...
}
  2. Nom de la classe, par exemple pour <p class="important">Text</p> 
    .important {
  ...
}
  3. ID de l'élément (une seule ID par page), par exemple <h1 id="unique">Titre</h1> 
    #unique {
  ...
}

Aligner du contenu (simple)

Pour aligner du contenu simple (e.g. texte ou image à l'intérieur d'un paragraphe ou d'un div), utiliser : 

.aligner-au-centre {
  text-align: center;
}

Dans ce cas, la classe doit s'appliquer à l'élément contenant les éléments qui doivent être alignés au centre. Par exemple : 

<div class="aligner-au-centre">
  <p>Mon texte va être aligné au centre</p>
  <p>Mon texte va être aligné au centre</p>
  <img src="logo.png" title="Image va être alignée au centre">
</div>

Colorer (simple)

On peut colorer presque tous les éléments, par exemple ici la couleur de l'arrière plan (background) et la couleur du premier plan (foreground), en principe du texte : 

body {
  background-color: black;
  color: white;
}

On peut utiliser également les valeurs hexadécimales pour les couleurs (plus avancé) : 

body {
  background-color: #000;
  color: #FFF;
}

Ou encore les valeurs RGB : 

body {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

Ce trois bouts de code produisent exactement le même résultat

Workshop CSS

Le workshop CSS aura la même structure du Workshop HTML5 du matin. Les fichiers comprimés dans un archive .zip se trouvent sous ce lien :

Si vous n’arrivez pas à télécharger directement le fichier .zip, vous pouvez :

  1. Aller à l’adresse https://github.com/MALTT-STIC/minit-css-essentials
  2. Cliquer sur le bouton vert en haut à droite « Clone or download »
  3. Cliquer sur « Download ZIP »

Suivez les mêmes indications que pour le Workshop HTML5 (voir plus haut dans la page)

Exemples CodePen.io

Quelques exemples pour consolider/découvrir d'autres possibilités :

  1. Exemple de base : comment appliquer des propriétés de style à un ou plusieurs éléments du DOM
  2. Sélecteurs CSS - bases : les trois manières les plus fréquentes pour sélectionner un élément à style (tag, class et id)
  3. Sélecteurs et héritage : comment les propriétés de style se propage dans l'arborescence du DOM
  4. Sélecteurs et priorité : que se passe-t-il si un élément a plusieurs sélecteurs/styles en même temps ?
  5. Composition de sélecteurs : les sélecteurs peuvent se combiner pour former des sélecteurs très précis
  6. Tailles de police : pixels, pourcentage, ...
  7. Largeur et hauteur : différence entre dimensions absolues et pourcentages
  8. Block vs. Inline element : la différence entre éléments block et inline, et les dangers de faire confusion...
  9. Margin and padding : combien d'espace prend une boîte?
  10. Positioning : déterminer le positionnement d'un élément avec des coordonnées
  11. Floating : différentes manières pour placer un élément à côté d'un autre, mais voir plutôt une méthode plus récente avec Flexbox
  12. Animation CSS : possibilité d'animer des "boîtes" (technique avancée)

Vous pouvez accèder à l’ensemble des exemples ici :

Ressources complémentaires

Ici de suite une liste de ressources qui peuvent être utiles pour compléter et/ou consolider les acquis.

Fonctionnement web

  • What is the internet ? – vidéo tirée de code.org
  • HTTP et HTML – vidéo tirée de code.org (essayez de trouver à quel moment la vidéo dit quelque chose de différent par rapport à ce que vous avez vu pendant l’atelier)

La série complète « How the internet works » est disponible sous ce lien https://code.org/educate/resources/videos

HTML5

CSS

Validation des pages

Guides de style de codage

Ressources internes à ce Wiki

Dans ce wiki vous pouvez également trouver des pages qui portent sur les sujets traités dans l'atelier. Veuillez néanmoins noter que ces pages sont souvent écrites par des étudiants comme vous, ce qui peut être à la fois un avantage (même niveau de connaissance) et un désavantage (informations incomplètes ou pas claires). Voici quelques références :

Ressources EduTechWiki en anglais

La version anglaise de ce wiki contient plus d'informations sur les mêmes sujets. Voici une liste :






Sur le plan pédagogique, ce premier exercice permet de :

  • Développer ou consolider les connaissances en HTML5, CSS et SVG
  • Réfléchir sur comment organiser un petit site et comment le "styler"

Connaissances/compétences envisagées

À l'issue de cet exercice, vous devez avoir acquis les connaissances/compétences suivantes :

  • Créer du contenu web et le publier à un endroit précis sur le serveur
  • Incorporer des éléments SVG dans HTML et dans EduTechWiki
  • Réfléchir sur l'identité digitale en général, et plus spécifiquement dans le domaine de la technologie éducative

Prérequis

Les outils nécessaires pour suivre le cours ont été illustrés lors de l'atelier d'initiation. Pour celles et ceux qui n'étaient pas présent-es, il faudra disposer pour ce cours des éléments suivants :

  • Un éditeur de texte (conseillé Visual studio code)
  • Un logiciel de transfert SFTP configuré pour se connecter au serveur tecfaetu.unige.ch (Cyberduck ou similaire)
  • Un logiciel pour l'édition d'images vectorielles (e.g. Inkscape ou similaire)

Marquage Wiki (Mediawiki)

Il existe différents moteurs qui permettent à un wiki de fonctionner. Le plus célèbre est Mediawiki, le logiciel sur lequel sont construits Wikipedia et ce wiki. Mediawiki utilise son propre langage de marquage, mais dans certains cas accepte également du HTML. En règle générale, il est mieux de se limiter à l'utilisation du langage de marquage du wiki. Voir :

Activité

En s'appuyant sur les pages disponibles dans l'Aide :

  1. Si pas encore fait pendant l'atelier d'initiation, ajoutez une section "Présentation" à votre page personnelle avec un bref texte sur vous (vous pouvez laisser la biographie écrite pendant l'inscription, mais il faudra structurer avec un titre ou des titres à différents niveaux pour créer des sous-sections)
  2. Ensuite, ajoutez une section "Intérêts" et créez une liste à puces avec 4-5 de vos intérêts. Au moins deux de ces intérêts doivent pointer, avec un lien interne, à des pages de ce wiki. Par exemple :
  3. Trouvez le squelette pour reporter vos contributions EduTechWiki dans le cadre des cours STIC I et II et ajoutez-le à votre page personnelle. Voir STIC:Contribution Wiki

L'agencement de votre page personnelle sur ce wiki représente une composante du rendu pour l'exercice 1. Vous pouvez donc réutiliser ce que vous faites dans cette activité, mais vous pouvez également l'effacer une fois terminé et proposer autre chose pour l'exercice (seul le squelette des contributions est obligatoire).

Marquage SVG

SVG, acronyme de Scalable Vector Graphics, est un langage de marquage de type XML utilisé pour créer une image vectorielle. Les éléments graphiques du dessin vectoriel sont établis à travers un marquage similaire à HTML5, c'est-à-dire que les balises déterminent quel élément graphique va s'afficher. Par exemple : 

<svg width="350" height="150" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect x="-1" y="-1" width="352" height="152" id="canvas_background" fill="#fff"/>
 </g>
 <g>
  <title>formes</title>
  <ellipse fill="#ffff00" stroke="#000000" stroke-width="null" cx="64.5" cy="75" id="svg_1" rx="44.5" ry="44.5"/>
  <rect fill="#bf0000" stroke="#000000" stroke-width="null" stroke-opacity="null" fill-opacity="null" x="131" y="31" width="88" height="88" id="svg_4"/>
  <path fill="#7f007f" stroke-width="null" stroke-opacity="null" fill-opacity="null" d="m241.2725,118l46.5,-86l46.5,86l-93,0z" id="svg_5" stroke="#000000"/>
 </g>
</svg>

SVG est un standard W3C spécifiquement conçu pour être utilisé sur le web et s’intègre bien aux autres formats W3C, comme par exemple HTML5, CSS ou JavaScript.

Pour en savoir plus :

Activités

Découverte
  1. Ouvrez l'éditeur SVG en ligne Method Draw SVG Editor
  2. Dessinez une simple forme de votre choix (e.g. cercle ou rectangle) en choisissant une couleur de fond à travers les outils sur la colonne à gauche de l'interface
  3. Affichez le code source à travers le menu View > Source...
  4. Essayez d'identifier l'attribut qui détermine la couleur de remplissage et modifiez avec cette nouvelle couleur #bf0000 (i.e. rouge). Cliquez sur Apply changes pour voir le résultat
  5. Répétez l'opération avec un autre attribut, par exemple pour modifier la taille ou la position
Modification dessin existant
  1. Pointer vers le site Openclipart.org
  2. Chercher un dessin sur un sujet qui vous intéresse
  3. Téléchargez le dessin en format SVG (Download SVG, puis clic droit sur l'image et "Enregistrer sous...")
  4. Ouvrez le dessin avec Inkscape ou un logiciel vectoriel de votre choix (e.g. Illustrator)
  5. Appliquez des éléments superposés à l'image, par exemple des labels avec des flèches pour comprendre les parties du dessin
  6. Enregistrez le nouveau dessin avec un nom différent du fichier original

La modification d'un dessin SVG est l'une des activités demandées dans les exercices de la première période. Pour modifier une image existante, il faut parfois séparer les éléments pour pouvoir les modifier individuellement. Voir la documentation de Inkscape pour plus d'information.

(Facultatif) Vectorisation d'une image matricielle
  1. Choisissez une image matricielle (.jpg ou .png)
  2. Utilisez le site Vectorizer.ai pour la passer en image vectorielle
  3. Attention à contrôler les conditions des services quand vous utilisez des outils IA

Projet 1 / Tâches

Le premier exercice de STIC prévoit différents rendus en relation avec l'identité digitale :

  1. Une page personnelle MALTT/TECFA en HTML5/CSS à publier sur le serveur tecfaetu.unige.ch
  2. Une page personnelle sur ce Wiki
  3. Un portfolio (page travaux) à publier sur le serveur tecfaetu.unige.ch
  4. Un rapport à publier sur le serveur tecfaetu.unige.ch complète les rendus pour ce premier exercice.

Les détails pour chaque rendu sont indiqués par la suite.

Lectures et matériel de support

Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires.

Dispositifs

Consignes pour les différents dispositifs à rendre pour l'exercice.

Page personnelle MALTT/TECFA

Cette page personnelle représente votre identité au sein du MALTT/TECFA et elle sera liée à vos productions pendant le Master. Pour cette raison, elle doit être publiée à un endroit précis sur le serveur tecfaetu.unige.ch : 

/web/perso/maltt/votre-login-court/

Le fichier (principal) de votre page personnelle doit s'appeler index.html ou welcome.html. De cette manière, la page sera accessible depuis le web à une adresse similaire à : 

https://tecfaetu.unige.ch/perso/maltt/votre-login-court/

Par exemple: 

https://tecfaetu.unige.ch/perso/maltt/baehlem0/


Contraintes

  • Aucune au niveau des contenus, à part faire attention à ce que le résultat corresponde aux objectifs ;
  • Vous pouvez créer une seule page ou un mini-site de quelques pages, comme vous préférez (mais soyez raisonnables !) ;
  • Emplacement de la page comme indiqué

Conseils

  • Vous pouvez relier d'autres pages (home page wiki, home page externe, etc.), même s'il est obligatoire de faire tous les liens seulement dans le rapport, mais pas dans votre home page ;
  • Concentrez-vous davantage sur le contenu que sur la forme ;
  • Vous pouvez utiliser des feuilles de style externe à condition que vous compreniez la technologie ;
  • Commencez par publier une page essentielle le plus tôt possible, puis adapter selon le temps à votre disposition ;

Bonus

  • Utilisation de balises sémantiques pour structurer la page (e.g. header, footer, ...)
  • Incorporation d'un fichier CSS externe
  • HTML5 et CSS validés

Malus

  • Mauvais emplacement de la page personnelle et/ou nom du fichier principal incorrect ;
  • Grosses erreurs dans le code HTML5 / CSS
  • Mauvais choix du contenu dans la balise title (e.g. "Ma page personnelle")

Page utilisateur EduTechWiki

La page personnelle EduTechWiki est liée à toutes vos contributions sur ce wiki. En général, les utilisateur-ices consultent le profil des auteur-ices pour évaluer la fiabilité des informations.

Contraintes

  • Respectez les règles d'édition du wiki
  • Utilisez des titres pour structurer le contenu
  • Ajoutez au moins un dessin/logo/image en SVG (pas forcément une image de vous) avec légende et positionnement cohérent avec le contenu. Soyez attentifs à respecter les droits d'utilisation / modification si vous utilisez une ressource externe (à citer dans le rapport) et utilisez un nom de fichier sémantique et collectif
  • Inclure la structure suivante pour reporter vos contributions du semestre :

Squelette à ajouter à votre page 


* Corrections orthographiques :
* Améliorations textuelle d'une partie existante d'une page :
* Ajout de liens internes et/ou catégories :
* Introduction d'une brève partie dans une page existante :
* Création d'une page pertinente, mais avec peu de contenu :
* Introduction d'une partie importante dans une page existante :
* Relecture complète d'un article avec indication dans la discussion :
* Re-organisation pertinente du wiki (catégories, ...) :
* Amélioration technique d'une partie d'un article (utilisation d'un modèle, ajout d'une image/schéma saillant):
* Ouverture et/ou participation à la discussion sur le contenu d'un article :
* Réorganisation importante d'un article :
* Création ou refonte d'une page existante de haute qualité au niveau technique et des contenus :

Conseils

  • Essayez d'utiliser le code plutôt que l'éditeur sémantique

Bonus

  • Utilisation de liens internes à d'autres pages (e.g. pages qui vous intéressent, etc.) dans l'esprit Wiki
  • Création de sections en utilisant des titres saillants

Malus

  • Choix du nom du fichier / des fichiers que vous téléversez non saillant et/ou sans perspective multi-utilisateur (e.g. évitez "Ma photo" ou "Mon logo")

Portfolio

Votre portfolio regroupe vos livrables pendant le Master MALTT. Il représente l'outil de rendu obligatoire pour les exercices STIC, mais nous vous encourageons à l'utiliser également pour publier les rendus dans les autres cours.

Création / Edition

Comme pour la page personnelle, il n'y a pas de contraintes particulières, hormis la créer en HTML5 et ajouter du style avec une feuille de style CSS. Pensez à rendre la structure facile à lire pour les personnes qui doivent retrouver vos travaux. Organisez la page en utilisant une structure récurrente d'un exercice à l'autre et d'un cours à l'autre.

Nous vous conseillons le modèle suivant :

  • Titre de la page
  • Nom, prénom, volée
  • Nom du cours
  • Numéro et titre de l'exercice
  • Sous chaque exercice, séparez bien le rendu du projet et le rapport

Une fois terminé, vous devez impérativement nommer votre page "index.html" ou "welcome.html" pour qu'elle s'affiche lors de l'accès.

Tous les fichiers doivent être transférés avec SFTP (grâce à Cyberduck par exemple) dans votre espace Travaux.

  2. Vérifiez les changements que vous avez faits de temps en temps avec votre navigateur habituel, soit en local, soit à l'URL suivant: http://tecfaetu.unige.ch/etu-maltt/freya/votre_login/

Critères d'évaluation

Dans ce premier exercice du cours, nous allons principalement évaluer les aspects formels/techniques des exercices, comme par exemple :

  • Emplacement correct et nommage sémantique des fichiers
  • Utilisation correcte du langage de marquage correspondant
  • Validation du code

Le simple respect des contraintes est suffisant pour obtenir une bonne note (5 ou plus). Pour plus de détails, se référer aux conseils, bonus et malus de chaque rendu (voir plus haut).

Rapport

Un rapport avec des contraintes spécifiques est demandé pour chaque exercice. Pour les contraintes générales, lire la page :

De plus, dans le cas particulier de cet exercice:

  • Mettez les liens à toutes les productions
    • Homepage TECFA
    • Homepage Wiki
    • Portfolio
  • Discutez dans le rapport des deux homepage (homepage TECFA ET Edutech wiki) et le portfolio

NB: vu qu'il s'agit de votre premier rapport, nous évaluerons principalement des aspects "formels" tels que :

  • Le bon chemin et nom du fichier
  • La présence des éléments requis (prénom, nom, n° de l'exercice, date, balise title, etc.)
  • La structure du document (utilisation des titres de bon niveau h1, h2, ... pour les sections demandées)
  • La lisibilité (taille de la police, mise en page, ...)

Il ne faut donc pas vous concentrer trop sur le contenu pour cet exercice (mais il faudra déjà le faire pour l'ex 2!)

Délai

Vous devez rendre tous les éléments de l'exercice à cette date :

Lundi 27 octobre 2025, midi

Ressources

Slides / support de présentation

Pages / Tutoriels sur ce Wiki

Pages / Tutoriels externes

Outils

Outils de validation de code

Banques de média / Utilisation ressources externes

Aide

Discussion de cette page

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi") située en haut de la page à droite, le wiki vous enverra un mail après chaque modification de la page.


ANCIEN EXERCICE 2

Ce deuxième exercice du cours ECOTEC introduit les premiers concepts de programmation une activité guidée pour vos premiers pas avec JavaScript (à distance).

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

  • Exposition "souple" aux grands principes de la programmation (variables, structures de contrôles, boucles, etc.) qui seront approfondis pendant le semestre
  • Comprendre les grands principes des applications interactives et savoir identifier des liens potentiels avec l'apprentissage
  • Introduction "souple" à JavaScript (en prévision des autres périodes) avec un tutoriel étape par étape (Premiers pas avec JavaScript)

Tâche

Lectures et matériel de support

Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires.

Dispositif

Suivez d'abord le tutoriel suivant :

Premiers pas avec JavaScript


Un tutoriel vidéo qui montre une version plus simple du projet est également disponible. L'accès UNIGE est nécessaire pour voir la vidéo :

➔ Tutoriel vidéo "Flash card principle"


Ensuite, à partir de l'exemple du tutoriel, réalisez une petite application interactive de type Flash card :

  • Créez une page HTML5 qui contient un mécanisme interactif permettant de switcher entre deux images à travers un bouton
  • Créez/adaptez deux versions d'une image dont le passage entre versions peut représenter un intérêt pédagogique
  • Réutilisez le code de l'exemple de base et adaptez l'interface aux finalités de votre dispositif (e.g. consignes, titre, etc.)
  • Vous n'êtes pas obligé d'inclure le mécanisme du compteur (e.g. si cela n'a aucun sens dans votre application)
  • Si vous êtes à l'aise avec le code, vous pouvez créer une troisième fiche qui s'alterne avec les deux autres (optionnel)

Contraintes

  • Contenu selon vos envies, mais en rapport avec une thématique MALTT
  • Vos deux versions de l'image doivent être en format SVG et vous devez inclure le SVG en tant qu'élément externe
  • Les deux images doivent utiliser des dimensions relatives de type viewport pour s'adapter à la taille de l'écran (voir Introduction à CSS)
  • Vous pouvez utiliser des images déjà créées (avec droit d'utilisation et en citant la source), mais vous devez apporter des modifications au moins à l'une des versions de l'image en SVG, par exemple :
    • Ajouter des labels
    • Changer la couleur
    • Ajouter/masquer un élément
    • ...
  • Si vous utilisez une image créé par quelqu'un d'autre, vous devez ajouter dans le rapport :
    • La citation de la source avec un lien direct à la page qui met à disposition l'image
    • Illustrer les modifications que vous avez apportées et pourquoi

Conseils

  • Vous pouvez adapter le code JavaScript, mais ce n'est pas une obligation. Au contraire, l'objectif de l'exercice est de comprendre ce que vous faites, donc c'est mieux de répliquer exactement le même code, mais le comprendre, plutôt que copier/coller du code trouvé ailleurs.
  • Il s'agit d'un exercice propédeutique au reste du semestre, n'ayez pas peur de faire des choses qui semblent évidentes et ne craignez pas que votre exercice ne soit pas assez complexe : respectez tout d'abord les consignes. Vous aurez la possibilité de vous exprimer davantage lors des prochains exercices.
  • Exploitez cet exercice pour vous familiariser avec l'environnement pédagogique :
    • Demandez de l'aide sur cette page si vous en avez besoin.
    • Vous pouvez même demander un feedback sur votre travail (dispositif et/ou rapport). Pensez à ce propos à bien mettre le lien pour qu'on puisse voir votre production.
    • Si vous avez des questions/commentaires sur le matériel pédagogique, vous pouvez en discuter directement sur la page concernée, ou dans la discussion de cette page, comme vous préférez.
  • Profitez de l'exercice guidé en JavaScript pour explorer les images vectorielles en SVG :
    • Au niveau pédagogique, l'annotation d'images est une technique importante. Voir à ce propos la partie de l'article Création rapide de contenus en ligne sur l'annotation d'images statiques
    • Le travail au niveau des images SVG est une technique dont vous pouvez avoir besoin par la suite (e.g. création de schémas, cours STIC III ou IV, etc.), donc ça vaut la peine de s'y investir
  • Soignez les détails, par exemple :
    • Faites attention que les deux images soient exactement de la même taille pour éviter que le contenu de la page se déplace lors du switch entre une image et l'autre
    • Contrôlez que les images soient de taille convenables : assez grandes pour qu'on puisse les voir, mais pas trop grandes et qui dépassent la largeur de la fenêtre

Critères d'évaluation

Selon la Grille d'évaluation : cliquer sur le devoir dans l'espace Moodle du cours pour voir les critères.

Malus
  • Application ne marche pas
  • Les images ne sont pas en format SVG ou ne sont pas incluses en tant que fichiers externes
  • Vous n'avez pas modifié vous-même au moins l'une des images
  • Vous avez utilisé des images que vous n'avez pas le droit d'utiliser et/ou dont vous ne citez pas la source
  • Code HTML5 mal structuré
Bonus
  • Vraie adaptation aux objectifs de votre dispositif
  • Images SVG de bonne qualité et utiles à montrer un phénomène ou sous-tendre un processus d'apprentissage
  • Adaptation du guidage et des consignes à votre public cible (e.g. âge, compétences techniques, ...)
  • Scénarisation pédagogique claire et cohérente (à qui comptez-vous faire utiliser le dispositif ? dans quel contexte ? etc.)

Rapport

Faites un rapport selon les guidelines des rapports STIC :

En particulier pour cet exercice, essayez de :

  • Dans la partie Objectifs de votre rapport :
    • Identifiez et illustrez la problématique à laquelle vous allez contribuer avec votre dispositif
    • Essayez de préciser au maximum le public cible de votre dispositif
    • Définissez dans quel cadre les utilisateurs peuvent être intéressés à utilisez le dispositif (tout seuls, avec l'aide d'une autre personne, dans le cadre d'un cours, en auto-apprentissage, ...)
    • Soyez raisonnables dans vos attentes : identifier un objectif simple et précis
    • Essayez de viser une compétence bien spécifique, plutôt que quelque chose de générique
  • Dans la partie Design de votre rapport :
    • Illustrez comment votre dispositif arrive à "résoudre" la problématique que vous avez définie dans les objectifs
    • Décrivez l'activité à faire avec le dispositif (i.e. cliquer pour masquer/afficher de l'information) et en quoi cette activité sous-tend aux objectifs d'apprentissage
    • Essayez d'illustrer avec des mots les grandes lignes du fonctionnement de votre dispositif (i.e. imaginez qu'on lise votre rapport avant de voir le dispositif)
  • Dans la section Production
    • Illustrez vos changements à l'image ou aux images SVG

Attention : vu que le dispositif est déjà disponible en grand partie, nous nous attendons à un effort dans la rédaction du rapport, surtout au niveau des objectifs et du design (i.e. scénarisation et guidage pédagogique)

Délai

Lundi 27 octobre 2025, midi

Relisez Rapport STIC I et II pour la soumission

Version alternative pour experts

Si vous connaissez déjà un peu de JavaScript, vous pouvez vous lancer dans un dispositif plus complexe en utilisant directement le SVG comme élément interactif :

Ressources

JavaScript

Pour aller plus loin

Bibliographie

JavaScript

Aide

Discussion de cette page

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement un "nouveau sujet".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page. On vous conseille aussi de régler vos préférences wiki pour tout ce qui est suivi.

Récupérée de "https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:ECOTEC_-_Période_1_(Gaïa)&oldid=187412"