« STIC:STIC I - exercice 1 (Edda) » : différence entre les versions
Aller à la navigation
Aller à la recherche
(Page créée avec « {{En construction}} {{stic12}} <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> == Introduction == Ce premier exercice du cours STIC I représente une "entrée en matière souple" qui permet notamment de vous familiariser avec : * Les objectifs et le règlement du cours ** Voir {{Goblock | STIC:STIC I (Drakkar) }} * Le format du cours... ») |
|||
| (30 versions intermédiaires par 3 utilisateurs non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
{{stic12}} | {{stic12}} | ||
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | <categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree> | ||
| Ligne 9 : | Ligne 7 : | ||
* Les objectifs et le règlement du cours | * Les objectifs et le règlement du cours | ||
** Voir {{Goblock | [[STIC:STIC I ( | ** Voir {{Goblock | [[STIC:STIC I (Edda)]] }} | ||
* Le format du cours : tous les exercices suivent le même format | * Le format du cours : tous les exercices suivent le même format : | ||
** Création d'un dispositif | ** Création d'un dispositif | ||
** Rédaction d'un rapport, voir {{Goblock | [[STIC:Rapport STIC I et II]] }} | ** Rédaction d'un rapport, voir {{Goblock | [[STIC:Rapport STIC I et II]] }} | ||
| Ligne 16 : | Ligne 14 : | ||
* Les différents environnements pédagogiques et de travail: | * Les différents environnements pédagogiques et de travail: | ||
**<nowiki/>Ce wiki pour la '''partie transmissive''', l'<nowiki/>'''énoncé de l'exercice''' et l''''aide''' | **<nowiki/>Ce wiki pour la '''partie transmissive''', l'<nowiki/>'''énoncé de l'exercice''' et l''''aide''' | ||
** Le serveur <code>tecfaetu.unige.ch</code> pour publi<nowiki/>er vos exercices et mettre à jour votre | ** Le serveur <code>tecfaetu.unige.ch</code> pour publi<nowiki/>er vos exercices et mettre à jour votre portfolio | ||
** L'espace Moodle pour la publication des notes et des feedbacks des exercices | ** L'espace Moodle pour la publication des notes et des feedbacks des exercices | ||
Sur le plan pédagogique, ce premier exercice permet de : | 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" | * Réfléchir sur comment organiser un petit site et comment le "styler" | ||
* Réfléchir sur l'identité digitale et mettre en place un profil sur un réseau social | * Réfléchir sur l'identité digitale et mettre en place un profil sur un réseau social | ||
===Connaissances/compétences envisagées=== | ===Connaissances/compétences envisagées=== | ||
À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes : | À 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 | * 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 | * 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 | * Réfléchir sur l'identité digitale en général, et plus spécifiquement dans le domaine de la technologie éducative | ||
===Prérequis=== | ===Prérequis=== | ||
Les outils | Les outils nécessaires pour suivre le cours ont été illustrés lors de l'atelier [[MINIT]]. 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 éditeur de texte (conseillé [[Visual studio code]]) | ||
* Un logiciel de transfert SFTP configuré pour se connecter au serveur tecfaetu.unige.ch | * Un logiciel de transfert SFTP configuré pour se connecter au serveur tecfaetu.unige.ch ([[MINIT#Installation_de_Cyberduck|Cyberduck]] ou similaire) | ||
* Un logiciel pour l'édition d'images vectorielles (e.g. [[Inkscape]] ou similaire) | * Un logiciel pour l'édition d'images vectorielles (e.g. [[Inkscape]] ou similaire) | ||
| Ligne 54 : | Ligne 43 : | ||
Les activités en salle de classe prévoient de combiner deux aspects principaux : | Les activités en salle de classe prévoient de combiner deux aspects principaux : | ||
* Un aperçu de quelques langages de marquage | * Un aperçu de quelques langages de marquage | ||
* L'identité digitale | * L'identité digitale | ||
| Ligne 61 : | Ligne 50 : | ||
=== Programme === | === Programme === | ||
Le programme sera établi en fonction du déroulement des activités, mais les journées STIC I se terminent au plus tard à 17h | Le programme sera établi en fonction du déroulement des activités, mais les journées STIC I se terminent au plus tard à 17h. | ||
=== Marquage Wiki (Mediawiki) === | === 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 | 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 : | ||
* {{Goblock | [[Guidelines:Edition de base]] }} | * {{Goblock | [[Guidelines:Edition de base]] }} | ||
| Ligne 73 : | Ligne 62 : | ||
En s'appuyant sur les pages disponibles dans l'[[Aide:Aide|Aide]] : | En s'appuyant sur les pages disponibles dans l'[[Aide:Aide|Aide]] : | ||
# Si pas encore fait pendant | # 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) | ||
# 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 : | # 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 : | ||
#* [[Psycholinguistique]] | #* [[Psycholinguistique]] | ||
| Ligne 81 : | Ligne 70 : | ||
# 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]] | # 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 effacer une fois terminé et | 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 === | === 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 | [[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 : | ||
<source lang="XML" line="" highlight="10"> | <source lang="XML" line="" highlight="10"> | ||
| Ligne 118 : | Ligne 107 : | ||
# 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 | # 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 | ||
# Affichez le code source à travers le menu <code>View > Source...</code> | # Affichez le code source à travers le menu <code>View > Source...</code> | ||
# Essayez d'identifier l'attribut qui détermine la couleur de | # Essayez d'identifier l'attribut qui détermine la couleur de remplissage et modifiez avec cette nouvelle couleur <code>#bf0000</code> (i.e. rouge). Cliquez sur '''Apply changes''' pour voir le résultat | ||
# Répétez l'opération avec un autre attribut, par exemple pour modifier la taille ou la position | # Répétez l'opération avec un autre attribut, par exemple pour modifier la taille ou la position | ||
| Ligne 125 : | Ligne 114 : | ||
# Pointer vers le site [https://openclipart.org/ Openclipart.org] | # Pointer vers le site [https://openclipart.org/ Openclipart.org] | ||
# Chercher un dessin sur un sujet qui vous intéresse | # Chercher un dessin sur un sujet qui vous intéresse | ||
# Téléchargez le dessin en format SVG (Download SVG, puis | # Téléchargez le dessin en format SVG (Download SVG, puis clic droit sur l'image et "Enregistrer sous...") | ||
# Ouvrez le dessin avec [[Inkscape]] ou un logiciel vectoriel de votre choix (e.g. Illustrator) | # Ouvrez le dessin avec [[Inkscape]] ou un logiciel vectoriel de votre choix (e.g. Illustrator) | ||
# Appliquez des éléments superposés à l'image, par exemple des labels avec des flèches pour comprendre les parties du dessin | # Appliquez des éléments superposés à l'image, par exemple des labels avec des flèches pour comprendre les parties du dessin | ||
# | # 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. | 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) | ; (Facultatif) Vectorisation d'une image matricielle | ||
# Choisissez une [[image matricielle]] (.jpg ou .png) | # Choisissez une [[image matricielle]] (.jpg ou .png) | ||
# Utilisez le site [https://vectorizer.ai/ Vectorizer.ai] pour la passer en [[image vectorielle]] | # Utilisez le site [https://vectorizer.ai/ Vectorizer.ai] pour la passer en [[image vectorielle]] | ||
# {{ bloc important | '''Attention à contrôler les conditions des services quand vous utilisez des outils IA'''}} | # {{ bloc important | '''Attention à contrôler les conditions des services quand vous utilisez des outils IA'''}} | ||
=== Discussion sur l'identité digitale === | === Discussion sur l'identité digitale === | ||
| Ligne 473 : | Ligne 131 : | ||
* Aspects généraux | * Aspects généraux | ||
** Présence/identité digitale dépend du domaine professionel, par exemple en instructional design on s'attend à ce que vous ayez des choses à montrer | ** Présence/identité digitale dépend du domaine professionel, par exemple en instructional design on s'attend à ce que vous ayez des choses à montrer | ||
** On peut facilement ''gonfler'' sa propre présence au niveau quantitatif et | ** On peut facilement ''gonfler'' sa propre présence au niveau quantitatif et qualitatif, mais cea peut avoir un effet ''boomerang'' | ||
** De plus en plus, votre identité digitale dépend aussi de votre réseaux de connaissances (groupes, contacts, ...) | ** De plus en plus, votre identité digitale dépend aussi de votre réseaux de connaissances (groupes, contacts, ...) | ||
* Illustration de quelques comptes des réseaux sociaux | * Illustration de quelques comptes des réseaux sociaux | ||
** [https://www.linkedin.com/ Linkedin] | ** [https://www.linkedin.com/ Linkedin] | ||
** [https://twitter.com/ Twitter/X] même si fuite d' | ** [https://twitter.com/ Twitter/X] même si fuite d'utilisateur-ices académiques | ||
** [https://mastodon.social/ Mastodon] une sorte de Twitter décentralisé et open-source | ** [https://mastodon.social/ Mastodon] une sorte de Twitter décentralisé et open-source | ||
** [https://www.researchgate.net/ Researchgate] | ** [https://www.researchgate.net/ Researchgate] | ||
* Mettre en place un profil | * Mettre en place un profil | ||
** Avantages et désavantages des profils publics | ** Avantages et désavantages des profils publics | ||
** Stratégies pour masquer sa propre identité ou de séparer vie privée/vie | ** Stratégies pour masquer sa propre identité ou de séparer vie privée/vie publique ou professionnelle | ||
** Guidelines et conventions spécifiques à chaque réseau (e.g. adapter des images pour le profil, l'image de fond, ...) | ** Guidelines et conventions spécifiques à chaque réseau (e.g. adapter des images pour le profil, l'image de fond, ...) | ||
* Identité digitale en réseau : comment gérer/limiter la duplication de l'information ? | * Identité digitale en réseau : comment gérer/limiter la duplication de l'information ? | ||
| Ligne 488 : | Ligne 146 : | ||
** Utiliser des logiciels pour publier sur plusieurs réseaux à la fois | ** Utiliser des logiciels pour publier sur plusieurs réseaux à la fois | ||
** Créer des informations à ''moyenne/longue durée'', par exemple ''Je suis étudiant-e MALTT'' et non pas ''Je suis étudiant-e MALTT en première année'', cela vous fait au moins une information valable pour 2/3 ans :-) | ** Créer des informations à ''moyenne/longue durée'', par exemple ''Je suis étudiant-e MALTT'' et non pas ''Je suis étudiant-e MALTT en première année'', cela vous fait au moins une information valable pour 2/3 ans :-) | ||
== Projet 1 / Tâches == | == Projet 1 / Tâches == | ||
| Ligne 537 : | Ligne 153 : | ||
# Une page personnelle MALTT/TECFA en HTML5/CSS à publier sur le serveur tecfaetu.unige.ch | # Une page personnelle MALTT/TECFA en HTML5/CSS à publier sur le serveur tecfaetu.unige.ch | ||
# Une page personnelle sur ce Wiki | # Une page personnelle sur ce Wiki | ||
# | # Un portfolio (page travaux) à publier sur le serveur tecfaetu.unige.ch | ||
# Au moins un profil social à créer ou mettre à jour | # Au moins un profil social à créer ou mettre à jour | ||
# Un [[STIC:Rapport STIC I et II|rapport]] à publier sur le serveur tecfaetu.unige.ch complète les rendus pour ce premier exercice. | # Un [[STIC:Rapport STIC I et II|rapport]] à publier sur le serveur tecfaetu.unige.ch complète les rendus pour ce premier exercice. | ||
| Ligne 573 : | Ligne 189 : | ||
* Aucune au niveau des contenus, à part faire attention à ce que le résultat corresponde aux objectifs ; | * 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'' | * Vous pouvez créer une seule page ou un ''mini-site'' de quelques pages, comme vous préférez (mais soyez raisonnables !) ; | ||
* Vous devez inclure au moins un lien à un profil sur un réseau social externe (voir sous-tâche correspondante plus bas dans cette page) ; | * Vous devez inclure au moins un lien à un profil sur un réseau social externe (voir sous-tâche correspondante plus bas dans cette page) ; | ||
* Emplacement de la page comme indiqué | * Emplacement de la page comme indiqué | ||
| Ligne 598 : | Ligne 214 : | ||
==== Page utilisateur EduTechWiki ==== | ==== Page utilisateur EduTechWiki ==== | ||
La page personnelle EduTechWiki est liée à toutes vos contributions sur ce wiki. En général, les | 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''' | '''Contraintes''' | ||
| Ligne 606 : | Ligne 222 : | ||
* 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 | * 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 | ||
* Ajoutez au moins un lien à un profil de réseau social (voir sous-tâche correspondante plus bas dans cette page) | * Ajoutez au moins un lien à un profil de réseau social (voir sous-tâche correspondante plus bas dans cette page) | ||
* Inclure la structure suivante pour reporter vos contributions du semestre : | |||
'''Squelette à ajouter à votre page''' | |||
<pre> | |||
<nowiki> | |||
* Corrections orthographiques (0.25) : | |||
* Améliorations textuelle d'une partie existante d'une page (0.5) : | |||
* Utilisation d'un modèle (0.5) : | |||
* Ajout de liens internes et/ou catégories (0.75) : | |||
* Introduction d'une brève partie dans une page existante (0.75) : | |||
* Création d'une page pertinente, mais avec peu de contenu (1.00) : | |||
* Introduction d'une partie importante dans une page existante (1.25) : | |||
* Relecture complète d'un article avec indication dans la discussion (1.5) : | |||
* Re-organisation pertinente du wiki (catégories, ...) (1.50) : | |||
* Amélioration technique d'une partie d'un article (utilisation d'un modèle, ajout d'une image/schéma saillant) (1.50) : | |||
* Ouverture et/ou participation à la discussion sur le contenu d'un article (1.75) : | |||
* Réorganisation importante d'un article (2.00) : | |||
* Création d'une nouvelle page pertinente avec contenu conséquent (2.50) : | |||
* Création ou refonde d'une page existante de haute qualité au niveau technique et des contenus (5.00) : | |||
</nowiki> | |||
</pre> | |||
'''Conseils''' | '''Conseils''' | ||
| Ligne 618 : | Ligne 254 : | ||
'''Malus''' | '''Malus''' | ||
* Choix du nom du fichier / des fichiers que vous | * 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 | 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''' | '''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 à [http://cyberduck.en.softonic.com/mac Cyberduck] par exemple) dans votre espace Travaux. | |||
#* machine: ''tecfaetu.unige.ch'' | #* machine: ''tecfaetu.unige.ch'' | ||
#* répertoire: ''/web/etu-maltt/ | #* répertoire: ''/web/etu-maltt/edda/votre-login-court'' | ||
#* Exemples d'autres volées: | #* Exemples d'autres volées: | ||
#** https://tecfaetu.unige.ch/etu-maltt/concordia/schenea7/ | #** https://tecfaetu.unige.ch/etu-maltt/concordia/schenea7/ | ||
#** | #** https://tecfaetu.unige.ch/etu-maltt/drakkar/streich8/ | ||
# Vérifiez les changements que vous avez faits de temps en temps avec votre | # 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/edda/votre_login/ | ||
==== Profil sur un réseau social ==== | ==== Profil sur un réseau social ==== | ||
| Ligne 680 : | Ligne 296 : | ||
* Ajoutez le(s) lien(s) : | * Ajoutez le(s) lien(s) : | ||
** Dans votre page personnelle MALTT/TECFA | ** Dans votre page personnelle MALTT/TECFA | ||
** Dans votre page utilisateur sur le wiki (seulement wiki français | ** Dans votre page utilisateur sur le wiki (il est suffisant de le faire seulement pour le wiki français) | ||
=== Critères d'évaluation === | === Critères d'évaluation === | ||
| Ligne 689 : | Ligne 305 : | ||
* Utilisation correcte du langage de marquage correspondant | * Utilisation correcte du langage de marquage correspondant | ||
* Validation du code | * 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). | 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). | ||
| Ligne 704 : | Ligne 319 : | ||
** Homepage TECFA | ** Homepage TECFA | ||
** Homepage Wiki | ** Homepage Wiki | ||
** | ** Portfolio | ||
** Profil(s) réseaux sociaux | ** Profil(s) réseaux sociaux | ||
* Discutez dans le rapport des deux homepage (homepage TECFA ET Edutech wiki), | * Discutez dans le rapport des deux homepage (homepage TECFA ET Edutech wiki), le portfolio et le choix du réseau social (si vous en avez plusieurs, vous pouvez en discuter juste un) | ||
'''NB''': vu qu'il s'agit de votre premier rapport, nous évaluerons principalement des aspects "formels" tels que : | '''NB''': vu qu'il s'agit de votre premier rapport, nous évaluerons principalement des aspects "formels" tels que : | ||
| Ligne 734 : | Ligne 349 : | ||
Vous devez rendre '''tous''' les éléments de l'exercice à cette date : | Vous devez rendre '''tous''' les éléments de l'exercice à cette date : | ||
{{Bloc important | | {{Bloc important | Lundi 14 octobre 2024, midi }} | ||
== Ressources == | == Ressources == | ||
| Ligne 740 : | Ligne 355 : | ||
=== Slides / support de présentation === | === Slides / support de présentation === | ||
* [https://mafritz.ch/slides/fr/intro-html5/ Slides ''Introduction à HTML5''] | * [https://mafritz.ch/slides/fr/intro-html5/ Slides ''Introduction à HTML5''] | ||
* [https://mafritz.ch/slides/fr/intro-css/ Slides ''Introduction à CSS''] | * [https://mafritz.ch/slides/fr/intro-css/ Slides ''Introduction à CSS''] | ||
=== Pages / Tutoriels sur ce Wiki === | === Pages / Tutoriels sur ce Wiki === | ||
| Ligne 752 : | Ligne 367 : | ||
* [[SVG]] et les différents tutoriels cités dans l'introduction | * [[SVG]] et les différents tutoriels cités dans l'introduction | ||
* [[Wiki]] | * [[Wiki]] | ||
* [[Guidelines:Edition de base]] | ** [[Guidelines:Edition de base]] | ||
* [[Guidelines:Règles d'édition]] | ** [[Guidelines:Règles d'édition]] | ||
=== Pages / Tutoriels externes === | === Pages / Tutoriels externes === | ||
| Ligne 766 : | Ligne 381 : | ||
* [[Visual studio code]] | * [[Visual studio code]] | ||
* [[Inkscape]] | * [[Inkscape]] | ||
* [[Codepen]] : environnement pour | * [[Codepen]] : environnement pour exemples de code en HTML5/CSS/JavaScript | ||
=== Outils de validation de code === | |||
* [https://validator.w3.org/nu/ Nu HTML Checker] | |||
* [https://jigsaw.w3.org/css-validator/ CSS Validator] | |||
* [https://validator.w3.org/checklink Link Checker] | |||
=== Banques de média / Utilisation ressources externes === | === Banques de média / Utilisation ressources externes === | ||
| Ligne 778 : | Ligne 398 : | ||
Utilisez la page discussion de '''cette page''' pour poser des questions. Pour insérer un nouveau titre, utilisez simplement le "+". | 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") | '''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. | ||
Dernière version du 18 octobre 2024 à 12:52
Introduction
Ce premier exercice du cours STIC I représente une "entrée en matière souple" qui permet notamment de vous familiariser avec :
- Les objectifs et le règlement du cours
- Voir
- Le format du cours : tous les exercices suivent le même format :
- Création d'un dispositif
- Rédaction d'un rapport, voir
- Contribution Wiki obligatoire (pour la période), voir
- Les différents environnements pédagogiques et de travail:
- Ce wiki pour la partie transmissive, l'énoncé de l'exercice et l'aide
- Le serveur
tecfaetu.unige.chpour publier vos exercices et mettre à jour votre portfolio - L'espace Moodle pour la publication des notes et des feedbacks des exercices
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"
- Réfléchir sur l'identité digitale et mettre en place un profil sur un réseau social
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 MINIT. 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)
Activités en salle de classe
Les activités en salle de classe prévoient de combiner deux aspects principaux :
- Un aperçu de quelques langages de marquage
- L'identité digitale
On combinera les deux choses dans les rendus pour cet exercice avec la création de différents profils et pages personnelles avec différentes technologies.
Programme
Le programme sera établi en fonction du déroulement des activités, mais les journées STIC I se terminent au plus tard à 17h.
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 :
- 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)
- 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 :
- 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 :
- (avancé !)
Activités
- Découverte
- Ouvrez l'éditeur SVG en ligne Method Draw SVG Editor
- 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
- Affichez le code source à travers le menu
View > Source... - 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 - Répétez l'opération avec un autre attribut, par exemple pour modifier la taille ou la position
- Modification dessin existant
- Pointer vers le site Openclipart.org
- Chercher un dessin sur un sujet qui vous intéresse
- Téléchargez le dessin en format SVG (Download SVG, puis clic droit sur l'image et "Enregistrer sous...")
- Ouvrez le dessin avec Inkscape ou un logiciel vectoriel de votre choix (e.g. Illustrator)
- Appliquez des éléments superposés à l'image, par exemple des labels avec des flèches pour comprendre les parties du dessin
- 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
- Choisissez une image matricielle (.jpg ou .png)
- Utilisez le site Vectorizer.ai pour la passer en image vectorielle
- Attention à contrôler les conditions des services quand vous utilisez des outils IA
Discussion sur l'identité digitale
- Aspects généraux
- Présence/identité digitale dépend du domaine professionel, par exemple en instructional design on s'attend à ce que vous ayez des choses à montrer
- On peut facilement gonfler sa propre présence au niveau quantitatif et qualitatif, mais cea peut avoir un effet boomerang
- De plus en plus, votre identité digitale dépend aussi de votre réseaux de connaissances (groupes, contacts, ...)
- Illustration de quelques comptes des réseaux sociaux
- Twitter/X même si fuite d'utilisateur-ices académiques
- Mastodon une sorte de Twitter décentralisé et open-source
- Researchgate
- Mettre en place un profil
- Avantages et désavantages des profils publics
- Stratégies pour masquer sa propre identité ou de séparer vie privée/vie publique ou professionnelle
- Guidelines et conventions spécifiques à chaque réseau (e.g. adapter des images pour le profil, l'image de fond, ...)
- Identité digitale en réseau : comment gérer/limiter la duplication de l'information ?
- Utiliser des liens hypertextuels, par exemple avec un site perso qui sert comme hub pour pointer ailleurs (e.g. https//mafritz.ch)
- Utiliser des logiciels pour publier sur plusieurs réseaux à la fois
- Créer des informations à moyenne/longue durée, par exemple Je suis étudiant-e MALTT et non pas Je suis étudiant-e MALTT en première année, cela vous fait au moins une information valable pour 2/3 ans :-)
Projet 1 / Tâches
Le premier exercice de STIC prévoit différents rendus en relation avec l'identité digitale :
- Une page personnelle MALTT/TECFA en HTML5/CSS à publier sur le serveur tecfaetu.unige.ch
- Une page personnelle sur ce Wiki
- Un portfolio (page travaux) à publier sur le serveur tecfaetu.unige.ch
- Au moins un profil social à créer ou mettre à jour
- 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.
- et
- et de ce Wiki
- et éventuellement les pages dans Catégorie:Identité, vie privée et protection de données
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 !) ;
- Vous devez inclure au moins un lien à un profil sur un réseau social externe (voir sous-tâche correspondante plus bas dans cette page) ;
- 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
- Ajoutez au moins un lien à un profil de réseau social (voir sous-tâche correspondante plus bas dans cette page)
- Inclure la structure suivante pour reporter vos contributions du semestre :
Squelette à ajouter à votre page
* Corrections orthographiques (0.25) : * Améliorations textuelle d'une partie existante d'une page (0.5) : * Utilisation d'un modèle (0.5) : * Ajout de liens internes et/ou catégories (0.75) : * Introduction d'une brève partie dans une page existante (0.75) : * Création d'une page pertinente, mais avec peu de contenu (1.00) : * Introduction d'une partie importante dans une page existante (1.25) : * Relecture complète d'un article avec indication dans la discussion (1.5) : * Re-organisation pertinente du wiki (catégories, ...) (1.50) : * Amélioration technique d'une partie d'un article (utilisation d'un modèle, ajout d'une image/schéma saillant) (1.50) : * Ouverture et/ou participation à la discussion sur le contenu d'un article (1.75) : * Réorganisation importante d'un article (2.00) : * Création d'une nouvelle page pertinente avec contenu conséquent (2.50) : * Création ou refonde d'une page existante de haute qualité au niveau technique et des contenus (5.00) :
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.
- machine: tecfaetu.unige.ch
- répertoire: /web/etu-maltt/edda/votre-login-court
- Exemples d'autres volées:
- 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/edda/votre_login/
Profil sur un réseau social
Créez ou adaptez un profil existant sur un réseau social en fonction de vos objectifs de communication (à décrire dans le rapport).
Contraintes
- Identifier au moins un réseau social parmi cette liste dans lequel créer (ou mettre à jour si vous avez déjà un compte) votre profil personnel
- LinkedIn : réseau professionnel/travail. Si vous créez un nouveau profil, vous pouvez modifier l'URL pour éviter d'avoir des chiffres et des lettres aléatoires.
- Mastodon ou Twitter/X : flow d'informations/intérêt ; bonne choix si vous voulez garder un certain anonymat (profil plutôt minimaliste)
- Researchgate : intéressant surtout si vous envisagez une carrière académique/recherche
- GitHub : collaboration sur des projets, souvent open-source ; bon choix si vous voulez garder un certain anonymat (profli plutôt minimaliste), mais vous pouvez aussi ajouter un profil via un fichier README.
- Remplissez/adapter le(s) profil(s) avec des informations pertinentes selon le type de réseau choisi
- Ajoutez le(s) lien(s) :
- Dans votre page personnelle MALTT/TECFA
- Dans votre page utilisateur sur le wiki (il est suffisant de le faire seulement pour le wiki français)
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
- Profil(s) réseaux sociaux
- Discutez dans le rapport des deux homepage (homepage TECFA ET Edutech wiki), le portfolio et le choix du réseau social (si vous en avez plusieurs, vous pouvez en discuter juste un)
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!)
Contribution wiki
Contribution libre sur l'ensemble de ce wiki (ou wiki anglais) :
- voir
Quelques suggestions en rapport avec l'exercice :
- Corrections / amélioration des pages Introduction à HTML5 et Introduction à CSS
- Améliorer des pages dans les catégories Catégorie:HTML5 et Catégorie:CSS
- Améliorer des pages dans la catégorie Catégorie:Identité, vie privée et protection de données
- Améliorer la page Wiki ou les différents pages de support pour EduTechWiki (e.g. règles d'édition, etc.)
Délai
Vous devez rendre tous les éléments de l'exercice à cette date :
Lundi 14 octobre 2024, midi
Ressources
Slides / support de présentation
Pages / Tutoriels sur ce Wiki
- Introduction à HTML5 et HTML5
- Introduction à CSS et Tutoriel CSS
- Flexbox pour disposition des éléments (intermédiaire)
- Bootstrap (avancé)
- Les pages des catégories Catégorie:HTML5 et Catégorie:CSS
- SVG et les différents tutoriels cités dans l'introduction
- Wiki
Pages / Tutoriels externes
- HTML5 doctor : site avec une liste des balises HTML5 organisées par fonction/rôle
- Technologies web pour les développeurs sur le réseau Mozilla Network
- Guides du site CSS Tricks : guides sur des techniques CSS de niveau intermédiare/avancé
- La mise en page avec CSS : tutoriels sur les différentes possibilités de créer des layout avec CSS
Outils
- Visual studio code
- Inkscape
- Codepen : environnement pour exemples de code en HTML5/CSS/JavaScript
Outils de validation de code
Banques de média / Utilisation ressources externes
- Médias libres d'utilisation avec une banque de média assez fourni
- Licences Creative Commons et Copyleft pour l'explication de quelques licences
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.