« STIC:STIC I - exercice 1 (Edda) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(26 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{En construction}}
{{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 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 page travaux
** 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 :


* Consolider les connaissances en [[HTML5]], [[CSS]] et [[SVG]]
* 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"
* Utiliser un schéma [[XML]] et  créer un contenu XML
* 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
Cet exercice vise aussi à consolider les sujets abordés dans l'atelier d'initiation, voir :
* {{Goblock | [[MINIT]] }}
* {{Goblock | [[Introduction à HTML5]] }}
* {{Goblock | [[Introduction à CSS]] }}


===Connaissances/compétences envisagées===
===Connaissances/compétences envisagées===
Ligne 37 : Ligne 29 :
* 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
* Utilisation de base du langage [[XML]] et savoir décrire les similarités/différences avec HTML5
* Comprendre les bases d'une grammaire [[Tutoriel DTD|DTD]] et savoir l'associer à un document XML
* Comprendre les bases du langage [[Tutoriel XSLT débutant | XSLT]] et savoir l'associer à un document XML pour créer du HTML5/CSS
* 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 et compétences 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 :
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 {{goblock|content=à vérifier|bgcolor=pink}}
* 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 (certains déjà vus pendant [[MINIT]])
* Un aperçu de quelques langages de marquage
* L'identité digitale
* L'identité digitale


Ligne 65 : Ligne 54 :
=== 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 construites 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 :
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 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 fond et modifiez avec cette nouvelle couleur <code>#bf0000</code> (i.e. rouge). Cliquez sur '''Apply changes''' pour voir le résultat
# 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 137 : Ligne 126 :
# 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'''}}
=== Marquage Markdown et système de publication Quarto ===
Markdown est un langage léger, similaire au langage MediaWiki. [[Quarto]] est un système de publication avancé qui part du langage léger Markdown et permet d'avoir différents formats de output, comme par exemple des pages/sites/blogs/livres en HTML5, des PDF, des slides, etc.
==== Activité ====
Vous pouvez créer vos [[STIC:Rapport STIC I et II|rapports STIC I]] avec Quarto en utilisant un template :
# Installez [https://quarto.org/docs/get-started/ Quarto CLI] depuis le site officiel
# Installez l'extension [https://marketplace.visualstudio.com/items?itemName=quarto.quarto Quarto pour Visual Studio Code]
# Téléchargez les fichiers du dépôt {{ goblock | [https://github.com/MALTT-STIC/stic-1-rapport-quarto stic-1-rapport-quarto] }}
# Ouvrez le dossier dézippé avec [[Visual studio code]]
# Ouvrez le fichier <code>index.qmd</code> et passez dans la modalité '''Visual editor''' (boutons 1 et 2 à l'image)
#: [[Fichier:Quarto-vsc-visual-editor.png|600px|vignette|néant|Éditeur visuel en Visual studio code]]
# Apportez une simple modification au contenu
# Cliquez sur Preview (bouton 3 à l'image)
# Un fichier index.html va se créer dans le gestionnaire de fichier, vous pouvez le voir directement à l'intérieur de VSC ou l'ouvrir avec Go Live
Pour plus d'informations sur les différentes possibilités de personnalisation, voir la documentation officielle sur le [https://quarto.org site de Quarto]
=== Marquage HTML5/CSS ===
Nous avons déjà vu [[HTML5]] et [[CSS]] en [[MINIT]], pour rappel voir [[Introduction à HTML5]] et [[Introduction à CSS]]. Ces notations peuvent être validées à travers des outils externes, comme par exemple [https://www.w3.org/developers/tools/ les validateurs du W3C]. Voici trois validateurs qui peuvent vous servir dans le cadre de vos rendus :
* {{Goblock | [https://validator.w3.org/nu/ Nu HTML Checker] }}
* {{Goblock | [https://jigsaw.w3.org/css-validator/ CSS Validator] }}
* {{Goblock | [https://validator.w3.org/checklink Link Checker] }}
À utiliser notamment pour valider le HTML5/CSS de votre page personnelle (voir tâches/projets pour la période).
==== Activité ====
Utilisez les validateurs pour tester la page que vous avez créée et téléversée sur le serveur tecfaetu.unige.ch pendant [[MINIT]]. Si vous n'avez pas cette page, essayez de valider [http://tecfaetu.unige.ch/minit/edda/ la page que nous avons créée avec les objectifs d'apprentissage de la volée].
=== (Méta-)Marquage XML ===
[[XML]] est un ''méta-langage'' qui permet de créer des langages de marquage. Par exemple, SVG est un langage basé sur les règles de XML. [[HTML]] a été un langage basé sur XML jusqu'à la version [[XHTML]], tandis que [[HTML5]] est une sorte de format ''hybride''.
La page travaux qui vous permet d'afficher vos rendus pour STIC I et II (et éventuellement d'autres cours si vous le souhaitez) est faite en XML, en suivant une grammaire donnée avec une DTD, et transformé en HTML5 avec un langage appelé [[Tutoriel XSLT débutant|XSLT]].
{{Bloc important | La maîtrise de ces technologies dépasse le cadre de cet exercice, pour lequel il est suffisant de publier votre page travaux de manière qu'elle soit valide ! }}
==== Installation d'un éditeur XML ====
Dans les années passées, nous avons toujours installé un logiciel qui s'appelle [[Exchanger XML Editor]], mais qui est assez daté et ne reçoit plus de mises à jour depuis plusieurs années. Ce logiciel donnait aussi quelques difficultés aux utilisateurs Mac. Cette année nous proposons deux choix :
* Maintenir le logiciel [[Exchanger XML Editor]]
* Installer l'extension [https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml XML de Red Hat] pour [[Visual studio code]]
En général, dans le cours nous déconseillons d'utiliser des dispositifs/extensions qui ne sont pas stables. L'extension est en effet en '''preview'''. Mais l'avantage de rester à l'intérieur de [[Visual studio code]], un éditeur que vous connaissez déjà et qui est plus performant de [[Exchanger XML Editor]], peut justifier ce choix.
==== XML ====
XML est l'acronyme de '''eXtended Mark-up Language'''. Un language de marquage est un langage qui permet de structurer de l'information à travers des balises. Les balises servent deux objectifs principaux :
# Donner une connotation plus précise au contenu, surtout dans la perspective du transfert de l'information à un autre agent (personne ou ordinateur)
# Appliquer une structure qui facilite le ''parsing'' de l'information, c'est-à-dire :
#* Faciliter la décomposition de l'information en unités ;
#* Définir la relation entre unités (e.g. hiérarchique, séquentielle, ...)
{{bloc important | XML est un '''méta-langage''' car, contrairement par exemple à HTML ou SVG pour lesquels les balises sont pré-déterminées, on peut créer sa propre liste de balises et déterminer les relations entre elles. }}
En d'autres termes, XML n'existe pas en tant que langage, mais existe exclusivement en tant que '''formalisme''' pour créer un language.
Un document XML simple se compose de deux parties principales :
# '''L'entête'''
#: elle détermine qu'il s'agit d'un document XML et fourni généralement des informations supplémentaires, par exemple la version et l'encodage
# '''L'arborescence des balises'''
#: à partir d'un élément racine individuel, les balises peuvent s’emboîter sur plusieurs niveaux
; Exemple abstrait :
<source lang="XML" line="">
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <level-1>
    <level-2>Content</level-2>
    <level-2>Content</level-2>
  </level-1>
  <level-1>
    <level-2>Content</level-2>
    <level-2>Content</level-2>
  </level-1>
</root>
</source>
;Exemple sémantique
<source lang="XML" line="">
<?xml version="1.0" encoding="UTF-8"?>
<countries>
  <country>
    <name>Switzerland</name>
    <abbr>CH</abbr>
  </country>
  <country>
    <name>Italy</name>
    <abbr>I</abbr>
  </country>
</countries>
</source>
==== DTD ====
Vu qu'on peut créer un nombre infini de langages XML, si on veut partager un langage particulier avec d'autres ou garantir une cohérence si on applique le même langage à plusieurs fichiers, il est nécessaire de formaliser des règles de structuration d'un document XML. On utilise à ce propos une grammaire (ou patron). On peut penser à une grammaire de deux manières :
* '''Restrictive''' : une suite de règles qu'il faut respecter
*: Cette conception d'une grammaire est particulièrement utile dans l'utilisation de XML pour l'échange/stockage de données.
* '''Générative''' : des patterns de coopération entre balises qui optimisent la structuration de l'information
*: Cette conception d'une grammaire est plus difficile à concevoir, car elle présuppose une fonction du langage qui va au-delà d'un ordre pré-établi des données. La fonction d'une grammaire générative s'applique à la structuration de la pensée, à la puissance combinatoire pour créer des patterns différents, etc.
Il existe différentes manières pour déterminer une grammaire XML. Nous utiliserons le format '''Document Type Definition''' (DTD). Une DTD définit la structure et les éléments admis dans un document XML qui applique cette grammaire.
{{bloc important | En principe, la DTD définit deux choses :
# '''Quels sont les balises et les attributs admis''' (fonction restrictive)
# '''Comment ces balises peuvent s'organiser/s’emboîter pour produire un document XML intéressant à une finalité donnée''' (fonction générative) 
}}
Un fichier DTD est une liste de définition des éléments et attributs qu'on peut trouver dans le document XML qui applique la grammaire donnée.
; Exemple abstrait
<source lang="DTD">
<!ELEMENT root (level-1+)>
<!ELEMENT level-1 (level-2+)>
<!ELEMENT level-2 (#PCDATA)>
</source>
; Exemple sémantique
<source lang="DTD">
<!ELEMENT countries (country+)>
<!ELEMENT country (name, abbr)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT abbr (#PCDATA)>
</source>
Pour faciliter la compréhension, vous pouvez lire un document DTD en remplaçant les parenthèses avec "contient" et en spécifiant les différentes notations (on en verra plus), par exemple :
* <code><!ELEMENT countries (country+)></code> se traduit par '''L'élément <code>countries</code> contient un élément ou plusieurs éléments <code>country</code>''' ;
* <code><!ELEMENT country (name, abbr)></code> se traduit par '''L'élément <code>country</code> contient un élément <code>name</code> suivi par un élément <code>abbr</code> ;'''
* <code><!ELEMENT name (#PCDATA)></code> se traduit par '''L'élément <code>name</code> contient du contenu''' ;
* <code><!ELEMENT abbr (#PCDATA)></code> se traduit par '''L'élément <code>abbr</code> contient du contenu''' ;
==== XSLT ====
XML n'a pas une grammaire spécifique et par conséquent il est impossible de déterminer à l'avance une apparence standard des éléments XML comme c'est le cas pour HTML. En HTML le browser sait comment traduire la balise <code><img ...></code> parce que tous les développeurs sont forcés d'utiliser celle-ci s'ils veulent inclure une image. En XML, au contraire, rien n'empêche au créateur du langage d'utiliser d'autres balises à cette finalité, par exemple :
* <code><image>...</image></code>
* <code><picture>...</picture></code>
* <code><photo>...</photo></code>
* ...
Pour donner "une forme" à un document XML on utilise le '''eXtensible Stylesheet Language''' (XSL). Il s'agit d'un véritable [[Introduction à la programmation|langage de programmation]], avec des structures de contrôle, boucles, etc. Mais pour cet exercice nous nous limiterons à des transformations plus simples, générée à partir d'un mécanisme de ''match'' entre un élément et un modèle de transformation.
On peut imaginer ce mécanisme comme une version plus avancée du ''chercher et remplacer'' des éditeurs de texte : chaque fois qu'il y a l'occurrence <code>X</code> remplace là par <code>Y</code>.
Dans notre cas :
* <code>X</code> est un pattern XML, notamment le nom d'une balise
* <code>Y</code> sera une transformation en code HTML pour que notre document XML puisse s'afficher graphiquement dans un navigateur
En termes formels selon le principe de la programmation <code>''F''(X) = Y</code> on aura donc :
''XSLT''(XML) = HTML5
Il est important de bien comprendre que ceci n'est que l'une des transformations possibles qu'on peut faire avec XSLT. On pourrait très bien avoir des transformations en d'autres formats, par exemple :
* <code>''XSLT''(XML) = SVG</code>
* <code>''XSLT''(XML) = PDF</code>
* ...
Un fichier XSL se compose d'une liste de règles de transformation qui déterminent :
* Quel élément XML est visée par la transformation (i.e. le ''match'')
* Quel sera le output après la transformation
{{bloc important | La transformation XSL se fait automatiquement de manière récursive, c'est-à-dire que le document XML est ''traversé'' à partir de la racine jusqu'aux niveaux les plus profonds (ceux qui contient du contenu et pas d'autres balises) }}
; Exemple abstrait
<source lang="XML" line="">
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"
              doctype-system="about:legacy-compat"
              encoding="UTF-8"
              indent="yes" />
  <xsl:template match="root">
<html>
<head>
<title>This is the title of the page</title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
  </xsl:template>
  <xsl:template match="level-1">
                <p>This is the transformation of level 1</p>
                <ul>
                        <xsl:apply-templates/>
                </ul>
  </xsl:template>
  <xsl:template match="level-2">
                <li><xsl:apply-templates/></li>
  </xsl:template>
</xsl:stylesheet>
</source>
; Exemple sémantique
<source lang="XML" line="">
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"
              doctype-system="about:legacy-compat"
              encoding="UTF-8"
              indent="yes" />
  <xsl:template match="countries">
<html>
<head>
<title>A list of countries and their abbreviations</title>
</head>
<body>
<h1>A list of countries and their abbreviations<h1>
                                <p>List:</p>
                                <ul>
    <xsl:apply-templates/>
</ul>
</body>
</html>
  </xsl:template>
  <xsl:template match="country">
                <li>
                        <xsl:apply-templates/>
                <li>
  </xsl:template>
  <xsl:template match="name">
                <strong><xsl:apply-templates/></strong> abbreviated as
  </xsl:template>
  <xsl:template match="abbr">
                <em><xsl:apply-templates/></em>
  </xsl:template>
</xsl:stylesheet>
</source>
==== Combiner les trois composantes ====
[[Fichier:DTD-XML-XSLT concept.png|800px|vignette|néant|Articulation des trois composantes]]
Les trois composantes de l'exercice se combinent au niveau du fichier '''.xml''' qui contient :
# Une référence au fichier '''.dtd'''
# Une référence au fichier '''.xsl'''
# L'arborescence des données
<source lang="XML" line="" highlight="3-4">
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE root SYSTEM "document-type-definition.dtd">
<?xml-stylesheet type="text/xsl" href="xslt-transformation.xsl"?>
<root>
  <level-1>
    <level-2>Content</level-2>
    <level-2>Content</level-2>
  </level-1>
</root>
</source>
==== Activité ====
; Si vous utilisez '''[[Visual studio code]]'''
# Téléchargez les fichiers depuis le ''repository'' GitHub : {{Goblock | [https://github.com/MALTT-STIC/stic-2-xml-dtd-xslt MALTT-STIC/stic-2-xml-dtd-xslt]}}
#* Bouton '''Clone or Download''' > '''Download ZIP'''
# Dézippez le contenu sur votre ordinateur
# Ouvrez le dossier avec [[Visual studio code]]
# Ouvrez les fichiers <code>warm-up/adressBook.dtd</code> et <code>warm-up/welcome.xml</code> l'un à côté de l'autre avec la séparation en colonne disponible dans le menu principale View > Editor Layout
# Placez le curseur à l'intérieur de la balise <code><adressBook></adressBook></code> et commencez à saisir les balises démandées par la grammaire DTD. Par exemple :
#* Mettre le <name> avant <email> à l'interieur de <person>
#* Mettre le <family> avant <given> à l'intérieur de <name>
#* {{bloc important | '''Attention''' : l'éditeur vous propose les bons choix, mais pas forcément dans le bon ordre ! }}
#* [[Fichier:Visual studio code XML editor warm-up.png|800px|vignette|néant|Éditeur XML dans Visual studio code]]
# Faites attention à des erreurs potentielles qui sont signalées dans l'éditeur (underline en rouge dans le code, et description en bas dans le tab '''Problems''')
# Une fois que vous avez ajouté les balises nécessaires, vous pouvez cliquer sur la preview web. '''Attention''' : les fichiers XML ne sont pas reconnus par l'extension Live Preview comme des fichiers de base du web, donc il faudra cliquer sur le dossier et ensuite sur le nom du fichier pour l'afficher dans le navigateur.
; Si vous utilisez '''[[Exchanger XML Editor]]'''
# Téléchargez les fichiers depuis le ''repository'' GitHub : {{Goblock | [https://github.com/MALTT-STIC/stic-2-xml-dtd-xslt MALTT-STIC/stic-2-xml-dtd-xslt]}}
#* Bouton '''Clone or Download''' > '''Download ZIP'''
# Dézippez le contenu sur votre ordinateur
# Ouvrez Exchanger XML Editor
# Cliquez sur <code>File > Open</code> et pointez vers le fichier '''warm-up/addressBook.dtd'''
# Cliquez encore une fois sur <code>File > Open</code> et pointez vers le fichier '''warm-up/welcome.xml'''
# Cliquez sur <code>View > Split vertically</code>
# Placez votre curseur à l'intérieur des balises <code><nowiki><addressBook>  </addressBook></nowiki></code>
# Sélectionnez le tab "Helper" (voir capture d'écran)
#: [[Fichier:Exchanger-warm-up-screen.png|800px|vignette|néant|Tab "Helper" de Exchanger XML Editor, avec un fichier DTD et un fichier XML ouverts]]
# Vérifiez que vous avez plus au moins la même chose sur votre écran et demandez de l'aide si ce n'est pas le cas
# Commencez à remplir le document XML en suivant les guidelines de la DTD, par exemple :
#* Mettre le <name> avant <email> à l'interieur de <person>
#* Mettre le <family> avant <given> à l'intérieur de <name>
# Aidez-vous des outils suivants :
#* Bouton '''Validate''' (V en vert) pour valider par rapport aux guidelines de la DTD
#* Bouton '''Check for well-formedeness''' (V en rouge) pour valider par rapport aux balises XML
#* Commande <code>Edit > XML > Format</code> pour bien formater/indenter les balises XML
# Quand vous avez inséré au moins un contact (i.e. une balise <person> avec les sous-balises), cherchez le fichier '''welcome.xml''' dans le gestionnaire des fichiers de votre ordinateur et ouvrez-le avec '''Firefox''' ou '''Microsoft Edge''' (pas Chrome)
#* En alternative vous pouvez ouvrir directement Firefox et puis utilisez le menu <code>Open > File</code> et pointez vers le fichier '''welcome.xml'''


=== Discussion sur l'identité digitale ===
=== Discussion sur l'identité digitale ===
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 :-)
==== Questions à discuter ====
En petits groupes, discutez l'une des questions suivantes. Vos brèves conclusions (2-3 minutes) seront ensuite discutés ensemble.
* Est-ce qu'un employeur a le droit moral de chercher vos réseaux sociaux (qui ne sont pas dans votre dossier) pour décider si vous embaucher ou pas ?
** Oui, car:
*** c’est du domaine du public, donc accessible par définition. En tant qu’utilisateur-ices des réseaux sociaux, nous sommes censé-e-s être conscient-e-s ce que l’on expose au monde avec l’utilisation de ces réseaux (probablement stipulé dans les termes de confidentialité que personne ne lit?);
*** peut donner des informations sur le caractère moral de la personne et de son éthique de travail;
*** transparence de l’orientation politique peut aller à l’encontre des valeurs de l’employeur;
*** permet d’évaluer à quel point l’employé est présentable et s’il ment lors d’un entretien;
*** pour des recherches d’informations sur des réseaux sociaux professionnels (LinkedIn, etc.) La visée du site est clairement explicite. La personne exposant ces compétences et parcours professionnels est au courant des finalités de ces derniers (les réseaux sociaux professionnels) et l’accepte dès lors qu’elle publie quelque chose;
*** pour se faire une idée de son train/rythme de vie, pour prédire si l’employé-e sera assidû-e et ponctuel-le dans son travail (vie de nuit, fêtes, par exemple).
** Contraire :
*** ...
* À quel point seriez-vous à l'aise avec l'idée que votre prochaine candidature soit acceptée/refusée par un algorithme ?
** En faveur :
*** ...
** Contraire :
*** La personne qui fait le travail ne fait plus le travail et ne connait pas les personnes qu'elles recrutent + aucune personne de référence
*** Pas d'aspect humain, feeling, négociation
*** Triche
*** Toute les candidatures sont perso, sur quoi elle se base?
*** La personne qui fait l'algo part sur préjudice alors que si elle avait pris en compte la globalité du dossier ça pourrait compenser => ne prends pas en compte le contexte
*** Trop rigide
*** Plus il y a un certain type de profils embauché, plus ces profils sera embauché => moins de diversité
* À quel point est-il  acceptable de faire créer les contenus relatifs à son identité virtuelle (profils, blogs, tweets) depuis un prompt AI (ChatGPT, ...) ?
** En faveur :
*** La personne reste l'auteur principal du contenu car l'IA a besoin d'instructions pour le générer
*** L'IA donne une forme au contenu et la personne peut demander de nouvelles instructions pour le modifier selon ses envies
*** Évolution de la base de données de l'IA
** Contraire :
*** Il faut être authentique, même nos défauts sont des qualités
*** Peut-être un jour on peut détecter si c'est fait par AI et alors on a l'air con
*** On peut croire à ce que l'AI nous dit et devenir ce que nous ne sommes pas, crise d'identité !
*** Il y a le risque que l'AI crée des profils standards et donc notre identitié va se perdre
*** Au moins cette partie de notre vie devrait être épargnée par l'AI
*** À l'ère actuelle on ne peut pas vraiement être sûr que ces contenus respectent les droits d'auteurs
*** On peut renforcer des stéreotype, par exemple au niveau de la retouche des images


== 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
# Une page travaux / portfolio à publier sur le serveur tecfaetu.unige.ch
# 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 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 620 : Ligne 256 :
* 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")
* 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")


==== Page travaux ====
==== Portfolio ====


Votre page travaux regroupe vos livrables pendant le Master MALTT. Elle 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.  
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'''


{{button
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.
|style=arrow
 
|size=medium
Nous vous conseillons le modèle suivant :
|color=blue
 
|link=[https://unigech-my.sharepoint.com/:v:/g/personal/mattia_fritz_unige_ch/EVdgk4BlSo9BoubYh_hVHucBrGL_Yo5-pCODeIB-Tldt0w?e=JMKM9I&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZyIsInJlZmVycmFsQXBwUGxhdGZvcm0iOiJXZWIiLCJyZWZlcnJhbE1vZGUiOiJ2aWV3In19 Tutoriel vidéo]
* 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.


Copiez les 6 fichiers "travaux.dtd", "travaux.xsl", "ENLEVERwelcome.xml", "travauxdoc.txt", "travaux.css" et "example.xml" depuis http://tecfa.unige.ch/tecfa/teaching/staf14/files/workpage/
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.  
# Faites attention de ''sauver la cible sous''/''save as'' sans ouvrir le fichier dans le navigateur ! Vous pourriez perdre de l'information ou encore vous retrouver avec du simple HTML !
# Renommez le fichier ENLEVERwelcome.xml en welcome.xml
# Lancez un éditeur XML et ouvrez ce fichier "welcome.xml"
# Remplissez les balises xml d'une façon logique qui puissent décrire votre page Travaux MALTT / STIC et n'oubliez pas de sauver de temps en temps! Vous allez trouver quelques explications dans le fichier travauxdoc.txt.
# Si vous travaillez en local (par exemple, chez vous), une fois terminé, il faut transférer tous les fichiers 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/drakkar/votre-login-court''
#* 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/
#** http://tecfaetu.unige.ch/etu-maltt/pixel/ardiri6/  
#** https://tecfaetu.unige.ch/etu-maltt/drakkar/streich8/
# Vérifiez les changements que vous avez faits de temps en temps avec votre browser préféré soit en local soit à l'URL suivant: http://tecfaetu.unige.ch/etu-maltt/drakkar/votre_login/
# 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/
# Félicitations!!! Vous avez votre première page en XML! Et si vous ne la trouvez pas très jolie, c'est à vous  de changer sa mise en forme en apprenant XSLT (fichier travaux.xsl)
 
Notez bien:
* La page XML doit être '''valide'''. Le fait qu'un contenu s'affiche ne veut rien dire...
* Il faut respecter la sémantique des balises. Ne pas mettre n'importe quel contenu dans n'importe quel élément. Relisez  [http://tecfa.unige.ch/tecfa/teaching/staf14/files/workpage/travauxdoc.txt le petit schéma].
* En aucun cas il faut changer la DTD
 
Si vous avez des erreurs, ils vont s'afficher dans la validation de [[Exchanger XML Editor]] ou ils sont signalés dans l'éditeur [[Visual studio code]] si vous avez bien installé l'extension XML, comme dans l'image suivante :
 
[[Fichier:Visual studio code XML editor page travaux.png|800px|vignette|néant|Interface de [[Visual studio code]] avec l'extension XML de Red Hat qui signale une erreur dans l'XML par rapport à la DTD.]]
 
Pour avoir accès aux erreurs, il faut disposer du tab avec les problèmes. Vous pouvez l'afficher à travers le menu <code>View > Problems</code>.
 
'''Modification du style'''
 
* Personnalisez votre page (selon vos capacités techniques): ajoutez éventuellement un menu, changez les marges, les fontes, etc.
* Pour changer superficiellement la présentation, il faut transformer le CSS qui va styler le HTML généré par XSLT. Il faut donc styliser les balises HTML (e.g. body, h2, ...) et non pas les balises XML (e.g., student, course, ...).
Pour ajouter des liens, il suffit d'intervenir dans le template "student" qui se trouve dans le fichier "travaux.xsl".
* Pour comprendre comment le HTML est produit, regardez soit le code source de la page dans IE explorer, soit en utilisant un outil de transformation XSLT dans votre éditeur, etc. Un outil rudimentaire est ici: http://tecfa.unige.ch/guides/tools/
* Vous pouvez aussi essayer de comprendre la logique de XSLT, mais ce sera le sujet d'un travail STIC II (à confirmer).


==== 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 est suffisant)
** 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
* Etc.


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
** Page travaux
** Portfolio
** Profil(s) réseaux sociaux
** Profil(s) réseaux sociaux
* Discutez dans le rapport des deux homepage (homepage TECFA ET Edutech wiki), la page Travaux et le choix du réseau social (si vous en avez plusieurs, vous pouvez en discuter juste un)
* 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 | Dimanche 15 octobre 2023, 21:00 }}
{{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''] (même que [[MINIT]])
* [https://mafritz.ch/slides/fr/intro-html5/ Slides ''Introduction à HTML5'']
* [https://mafritz.ch/slides/fr/intro-css/ Slides ''Introduction à CSS''] (même que [[MINIT]])
* [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 examples de code en HTML5/CSS/JavaScript
* [[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") situé en haut de la page à droite, le wiki vous enverra un mail après chaque modification de la page.
'''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

Cette page fait partie des cours STIC I et STIC II

STIC

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
  • Le format du cours : tous les exercices suivent le même format :
  • 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.ch pour 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 :

  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

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
  • 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 :

  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. Au moins un profil social à créer ou mettre à jour
  5. 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 !) ;
  • 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.

  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/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) :

Quelques suggestions en rapport avec l'exercice :

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

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.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_1_(Edda)&oldid=180120 »