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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 390 : Ligne 390 :
=== Outils ===
=== Outils ===


* [[Visual studio code]]
* [[Inkscape]]
* [[Codepen]] : environnement pour examples de code en HTML5/CSS/JavaScript
* [[Codepen]] : environnement pour examples de code en HTML5/CSS/JavaScript


Version du 21 septembre 2020 à 14:20

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.

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 reglèment 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 page travaux
    • Le cours sur Moodle pour la publication des notes et des feedback

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

  • Consolider les connaissances en HTML5, CSS et SVG
  • 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

Cet exercice vise aussi à consolider les sujets abordés dans l'atelier d'initiation, voir :

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
  • Utilisation de base du langage XML et savoir décrire les similarités/différences avec HTML5
  • Comprendre les bases d'une grammaire DTD et savoir l'associer à un document XML
  • Comprendre les bases du langage XSLT et savoir l'associer à un document XML pour créer du HTML5/CSS

Prérequis

Les outils et compétences nécessaires pour suivre le cours ont été illustrés lors de l'atelier MINIT. Pour ceux qui n'étaient pas présents, il faudra disposer pour ce cours des éléments suivants :

Activités en salle de classe

Ces activités ont été faites dans l'atelier d'initiation. On rappellera juste les principes...

Rappel HTML

Design, style et couleurs

Clic-droit sur un élément, puis sélectionner Inspect (Firefox/Chrome)

Rappel initiation à CSS

Code exemple HTML et CSS

Si vous n'avez pas encore de home page, voici le code d'une page HTML5 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Votre titre</title> 
    <link href="css-template.css" rel="stylesheet"> 
  </head>

  <body>

    <h1>Titre principal</h1>
    <p>Votre texte. Votre texte. Votre texte.</p>
    <blockquote>Une citation</blockquote>
    <hr>

    <a href="http://validator.w3.org/check/referer">Valid HTML</a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a>

  </body>
</html>

Code du fichier CSS utilisé avec la page ci-dessus 

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color:#CCCCCC;
    margin-left: 1em;
    margin-top: 3px;
    margin-bottom: 3px;
       }

h1, h2, h3 {color: green}

p  {
     margin-left: 2em;
     text-align:justify;
     font-family: Arial, serif ; 
     font-size: 12pt
     }

blockquote  {
     margin-left: 4em;
     text-align:justify;
     font-style:italic;
     font-family: Arial, serif ; 
     font-size: 11pt
     }

Introduction à SVG

Outils et ressources:

Introduction à XML

  • Introduction ultra-rapide à XML
    à lire rapidement
  • Les
    DTD (chapitres 1-6)
    à
    à lire


Préparation page travail (c.f. aussi tâches ci-dessous)

Utilisation d'un éditeur (à installer)

Discussion sur l'identité digitale

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. Une page travaux / portfolio à publier sur le serveur tecfaetu.unige.ch
  4. 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 exercices.

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 principale incorrect ;
  • Gros erreurs dans le code HTML5 / CSS (qui entravent la visualisation de la page)
  • 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 utilisateurs consultent le profil des auteurs 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 legende 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)
  • Ajoutez au moins un lien à un profil de réseau social (voir sous-tâche correspondante plus bas dans cette page)

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éversés non saillant et/ou sans perspective multi-utilisateur (e.g. évitez "Ma photo" ou "Mon logo")

Page travaux

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.

Création / Edition

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/

  1. 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 !
  2. Renommez le fichier ENLEVERwelcome.xml en welcome.xml
  3. Lancez un éditeur XML et ouvrez ce fichier "welcome.xml"
  4. 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.
  5. Si vous travaillez en local (par exemple, chez vous), une fois terminé, il faut transférer tous les fichiers avec SFTP (grâce à Cyberduck par exemple) dans votre espace Travaux.
  6. 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/aegir/votre_login/
  7. 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 le petit schéma.
  • En aucun cas il faut changer la DTD

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.

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.

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
    • Twitter : 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)
  • 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 (seulement wiki français est suffisant)

Critères d'évaluation

Dans ce premier exercice du cours, nous allons évaluer en prévalence 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
    • Page travaux
    • Profil(s) réseaux sociaux
  • Discutez dans le rapport les deux homepage et le choix ainsi que configuration de votre profil (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 :

Dimanche 11 octobre 2019, 21:00

Ressources

Slides / support de présentation

Pages / Tutoriels sur ce Wiki

Pages / Tutoriels externes

Outils

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é 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_(Aegir)&oldid=136832 »