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

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
 
(43 versions intermédiaires par 6 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{En construction }}
{{stic archive}}
{{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 13 : Ligne 12 :
** Redaction d'un rapport, voir [[STIC:Rapport STIC I et II]]
** Redaction d'un rapport, voir [[STIC:Rapport STIC I et II]]
** Contribution Wiki obligatoire (pour la période), voir [[STIC:Contribution Wiki]]
** Contribution Wiki obligatoire (pour la période), voir [[STIC:Contribution Wiki]]
* Les différents environnements pédagogiques et de travail
* Les différents environnements pédagogiques et de travail:
** Ce wiki pour la partie transmissive, l'é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 publier 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 page travaux
** Le cours sur Moodle pour la publication des notes et des feedback --> Inscription http://tecfalms.unige.ch/moodle/course/view.php?id=308 '''Attention : à modifier avant le cours de vendredi 28 sept. 2018 !!!'''
** Le cours sur Moodle pour la publication des notes et des feedback --> Inscription http://tecfalms.unige.ch/moodle/course/view.php?id=330


Sur le plan pédagogique, ce premier exercice permet de :
Sur le plan pédagogique, ce premier exercice permet de :
Ligne 23 : Ligne 22 :
* 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
* Utiliser un schéma [[XML]] et  créer un contenu XML
* Utiliser des bibliothèques [[JavaScript]]
* 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 :
Cet exercice vise aussi à consolider les sujets abordés dans l'atelier d'initiation, voir :
Ligne 37 : Ligne 36 :
* Comprendre les bases d'une grammaire [[Tutoriel DTD|DTD]] et savoir l'associer à un document XML
* 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
* Comprendre les bases du langage [[Tutoriel XSLT débutant | XSLT]] et savoir l'associer à un document XML pour créer du HTML5/CSS
* Inclure un fichier [[JavaScript]] externe dans une page HTML5 et créer du contenu qui respecte une structure précise
* Comprendre les principes d'une page dynamique avec l'utilisation de [[Tutoriel impress.js | Impress.js]]


===Prérequis===
===Prérequis===
Ligne 45 : Ligne 42 :


* Un éditeur de texte (e.g [[Brackets]], [[Visual studio code]])
* Un éditeur de texte (e.g [[Brackets]], [[Visual studio code]])
* Un éditeur XML (e.g. [[Exchanger XML Editor]])
* Un éditeur XML (e.g. [[Exchanger XML Editor]]) {{goblock|content=à installer|bgcolor=pink}}
* 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 {{goblock|content=à vérifier|bgcolor=pink}}


== Activités en salle de classe ==
== Activités en salle de classe ==
Ligne 68 : Ligne 65 :
=== Rappel initiation à CSS ===
=== Rappel initiation à CSS ===


* [http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf css-intro (PDF)] (transparents)
* [[tutoriel CSS]]
* [[tutoriel CSS]]  
* [[:en:CSS_tutorial]]
* [[:en:CSS_tutorial]]
* Demo [http://tecfa.unige.ch/guides/css/ex/boxing0.html CSS positioning]


=== Code exemple HTML et CSS ===
=== Code exemple HTML et CSS ===
Ligne 131 : Ligne 126 :
</source>
</source>


=== Présentation/modification de fichiers impress.js ===
=== Introduction à SVG ===


* [[Tutoriel impress.js]] (voir l'exemple)
* {{goblock|[[Tutoriel SVG statique]]}} {{goblock|content=à lire|bgcolor=pink}}
* [[:en:Impress.js]]
* Téléchargez tous les fichiers dans le répertoire http://tecfa.unige.ch/guides/impress.js/impress-demo-1/ (sauf HEADER.html)
 
=== Introduction à SVG ===


* [[Tutoriel SVG statique]]
* {{goblock|[[Tutoriel SVG avec HTML5]]}} {{goblock|content=à lire|bgcolor=pink}}
* [[Tutoriel SVG avec HTML5]]


Outils et ressources:
Outils et ressources:
* [https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html Try SVG-edit here]
* {{goblock|[https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html Try SVG-edit here]}} {{goblock|content=démo et exploration|bgcolor=pink}}
* [https://openclipart.org/ OpenClipArt] Site avec 132455 objets réutilisables (oct. 2017)
* [https://openclipart.org/ OpenClipArt] Site avec 132455 objets réutilisables (oct. 2017)
* Petite demo de [[Inkscape]]
* [https://thenounproject.com/ Nounproject] (Icones sous licence BY-NC-SA, vous devez citer)
* [[Inkscape]] {{goblock|content=petite démo, faire des tutoriels|bgcolor=pink}}


=== Introduction à XML ===
=== Introduction à XML ===


* Introduction ultra-rapide à [[XML]]
* Introduction ultra-rapide à [[XML]] {{goblock|content=à lire rapidement|bgcolor=pink}}
* Les [[Tutoriel DTD|DTD]] (chapitres 1-6, à relire SVP)
* Les {{goblock|[[Tutoriel DTD|DTD]] (chapitres 1-6)}} à {{goblock|content=à lire|bgcolor=pink}}
* '''Installation du logiciel Exchanger XML Editor'''
 
** Peut donner des soucis pour Mac !


'''Préparation page travail''' (c.f. aussi tâches ci-dessous)
'''Préparation page travail''' (c.f. aussi tâches ci-dessous)
Ligne 160 : Ligne 150 :
* [[Exchanger XML Editor]]
* [[Exchanger XML Editor]]
** Télécharger ici: https://code.google.com/p/exchangerxml/
** Télécharger ici: https://code.google.com/p/exchangerxml/
* Alternative à XML editor: http://sourceforge.net/projects/xml-copy-editor/
** Peut donner des soucis pour Mac !
* Alternatives à XML editor: http://sourceforge.net/projects/xml-copy-editor/ et [https://www.editix.com/academic/academic.html EditiX] (commercial).
 
=== Discussion sur l'identité digitale ===
 
* Illustration de quelques comptes des réseaux sociaux
** [https://www.linkedin.com/ Linkedin]
** [https://twitter.com/ Twitter]
** [https://www.researchgate.net/ 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 public ou professionnelle
** Guidelines (e.g. adapter des images pour le profil, l'image de fond, lire [https://www.researchgate.net/ Image Size] et suivre les liens en bas de page.
* Utilisation de login commun et privacy
** Exemple de Google: https://myactivity.google.com/myactivity et https://myaccount.google.com/


== Projet 1 / Tâches ==
== Projet 1 / Tâches ==
Ligne 191 : Ligne 195 :
* Aucune, à part faire attention à ce que le résultat corresponde aux objectifs
* Aucune, à part faire attention à ce que le résultat corresponde aux objectifs
* Vous pouvez créer autant de sous-pages que vous voulez... ou aucune.
* Vous pouvez créer autant de sous-pages que vous voulez... ou aucune.
* Vous pouvez relier d'autres pages (présentation impress.js, home page wiki, home page externe, etc.). Il est obligatoire de faire tous les liens dans le '''rapport''', mais pas dans votre home page.  
* Vous pouvez relier d'autres pages (home page wiki, home page externe, etc.). Il est obligatoire de faire tous les liens dans le '''rapport''', mais pas dans votre home page.
* La technologie utilisée peut rester simple, mais vous pouvez également inclure des éléments sophistiqués, comme une animation GSAP.
* 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)
* La technologie utilisée peut rester simple, mais vous pouvez également inclure des éléments sophistiqués, comme des animations faites avec JavaScript.


=== Contribution wiki ===
=== Page utilisateur EduTechWiki ===


Contrairement aux autres projets STIC, on demande une contribution wiki minimaliste.
# Perfectionnez votre home page sur edutechwiki français. Réfléchissez au contenu que vous voulez y mettre et parlez-en dans votre rapport.
# Insérez une image SVG dans la home page. Elle doit être positionnée, avoir une "bonne" taille, et une légende
# Ajoutez au moins un lien à un profil de réseau social (voir sous-tâche correspondante plus bas dans cette page)


1) Perfectionnez votre home page sur edutechwiki français. Réfléchissez au contenu que vous voulez y mettre et parlez-en dans votre rapport.
'''Exceptionnellement pour la première période, votre page personnelle va compter également dans la contribution wiki obligatoire'''


2) Insérez une image SVG dans la home page. Elle doit être positionnée, avoir une "bonne" taille, et une légende.
* voir {{Goblock | [[STIC:Contribution Wiki]] }}
 
3) Corrigez quelques erreurs (syntaxe, liens, mauvaises explications) dans d'autres page wikis.
* Faites attention à utiliser du code wiki. Copier/coller depuis Word donne de très mauvais résultats. Utilisez l'aide du wiki si nécessaire.


=== Créez, éditez et adaptez légèrement la présentation de votre page travail ===
=== Créez, éditez et adaptez légèrement la présentation de votre page travail ===
Ligne 215 : Ligne 219 :
# Renommez le fichier ENLEVERwelcome.xml en welcome.xml
# Renommez le fichier ENLEVERwelcome.xml en welcome.xml
# Lancez un éditeur XML et ouvrez ce fichier "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 / STAF et n'oubliez pas de sauver de temps en temps! Vous allez trouver quelques explications dans le fichier travauxdoc.txt.
# 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.  
# 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/wall-e/votre-login-court''
#* répertoire: ''/web/etu-maltt/wall-e/votre-login-court''
#* Exemple autre volée: http://tecfaetu.unige.ch/etu-maltt/utopia/ardiri6/
#* Exemple autre volée: http://tecfaetu.unige.ch/etu-maltt/pixel/ardiri6/  
# 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/wall-e/votre_login/
# 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/yoshi/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)  
# 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)  


Ligne 232 : Ligne 236 :
* Personnalisez votre page (selon vos capacités techniques): ajoutez éventuellement un menu, changez les marges, les fontes, etc.
* 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 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".
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/
* 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.
* Vous pouvez aussi essayer de comprendre la logique de XSLT, mais ce sera le sujet d'un travail STIC II.


=== Créez une présentation avec impress.js ===
=== Créez/mettez à jour un profil sur un réseau social ===


* Exceptionnellement, le choix du sujet est libre (donc pas forcément relié à un "sujet MALTT", mais soyez raisonnable au niveau du volume ....
* 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
* Utilisez à la fois le placement et le zoom comme élément stylistique.
** [https://fr.linkedin.com/ LinkedIn] : réseau professionnel/travail
* Créez au moins un dessin SVG (par exemple un schéma). Pour cela utilisez un éditeur en ligne simple, un logiciels de dessin comme Inkscape ou Illustrator, ou encore Libre Office Draw.
** [https://twitter.com/?lang=fr Twitter] : flow d'informations/intérêt ; bonne choix si vous voulez garder un certain anonymat (profil plutôt minimaliste)
* Adaptez le CSS à vos besoins (bonus). Résumez vos modifications dans le rapport.
** [https://www.researchgate.net/ Researchgate] : intéressant surtout si vous envisagez une carrière académique/recherche
 
** [https://github.com/ GitHub] : collaboration sur des projets, souvent open-source ; bon choix si vous voulez garder un certain anonymat (profli plutôt minimaliste)
'''Rappel'''
* Remplissez/adapter le(s) profil(s) avec des informations pertinentes selon le type de réseau choisi
* [[Tutoriel impress.js]] (voir l'exemple)
* Ajoutez le(s) lien(s) :
* [[:en:Impress.js]]
** Dans votre page personnelle HTML5
* Voir [[Tutoriel_JavaScript_côté_client#Fichier_externe | comment incorporer un fichier JavaScript externe]] (et comment tester qu'il marche!)
** Dans votre page utilisateur sur le wiki (seulement wiki français est suffisant)
* Téléchargez tous les fichiers dans le répertoire http://tecfa.unige.ch/guides/impress.js/impress-demo-1/ (sauf HEADER.html)


=== Faites un rapport en HTML ===
=== Faites un rapport en HTML ===
Ligne 257 : Ligne 260 :
** Homepage Wiki
** Homepage Wiki
** Page travaux
** Page travaux
** Présentation Impress.js
** Profil(s) réseaux sociaux
* Discutez dans le rapport les deux homepage et la présentation Impress.js
* 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)
* Votre contribution Wiki peut se limiter à votre homepage


'''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 272 : Ligne 274 :
=== Délai ===
=== Délai ===


'''Une semaine''' avant le début de la période suivante (lundi 8:59). A ce moment il est possible de demander un feedback rapide (utilisez la page discussion).
Vous devez rendre '''tous''' les éléments de l'exercice à cette date :
 
{{Bloc important | Dimanche 14 octobre, 23:00 }}


== Évaluation et conseils ==
== Évaluation et conseils ==
Ligne 291 : Ligne 295 :
# HTML/CSS: Ergonomie générale des sites, y compris la navigation entre pages si vous en utilisez plusieurs
# HTML/CSS: Ergonomie générale des sites, y compris la navigation entre pages si vous en utilisez plusieurs
# XML: Validité de la page et contenu (vos coordonnés plus les 2 exercices STIC I au moins)
# XML: Validité de la page et contenu (vos coordonnés plus les 2 exercices STIC I au moins)
# Présentation avec impress.js: utilisation d'un SVG, originalité, utilité et ergonomie
# Qualité du rapport (surtout structure, emplacement, lisibilité, etc.)
# Qualité du rapport (surtout structure, emplacement, lisibilité, etc.)


; Malus:
; Malus:
# Emplacement incorrect des fichiers (donc le bon répertoire est "ex1", et un bon nom de fichier est un fichier "index" comme "welcome.html" ....)
# Emplacement incorrect des fichiers (donc le bon répertoire est "ex1", et un bon nom de fichier est un fichier "index.html" ou "welcome.html")
# Présence d’erreurs HTML et CSS (validité de HTML/CSS)
# Présence d’erreurs HTML et CSS (validité de HTML/CSS)
# XML pas valide et/ou mal formé
# XML pas valide et/ou mal formé
# Absence du SVG dans la présentation
# Absence du SVG dans votre page utilisateur wiki


; Bonus:
; Bonus:
Ligne 307 : Ligne 310 :


Il sera impossible d'avoir un 6 sans avoir accompli '''toutes les tâches''' décrites ci-dessus
Il sera impossible d'avoir un 6 sans avoir accompli '''toutes les tâches''' décrites ci-dessus
=== Autres exercices de la même période ===
*[[STIC:STIC I - exercice 2 (Wall-e)|Exercice 2 - Wall-e]]
*[[STIC:STIC_I_-_exercice_2_(Xerneas) |Exercice 2 - Xerneas]]
== Projets alternatifs pour experts ==
Pour ceux qui maîtrisent déjà les sujets traités dans cet exercice, il y a la possibilité de négocier un travail alternatif, par exemple :
* Créer une page/tutoriel EduTechWiki sur un sujet technique que vous maîtrisez et qui pourrait être intéressant pour le domaine STIC (en général, pas forcément STIC I)
* Réorganiser de manière importante des contenus proposés pour cet exercices mais qui ne sont plus à jour ou mal structurées
* Créer et documenter un outil qui peut être utilisé par vos collègues (e.g. ''boilerplate'' HTML et CSS, script qui test la structure attendue d'un rapport STIC, etc.)
Si vous décidez pour le projet alternatif il faudra en tout cas :
# Modifier votre homepage EduTechWiki
# Créer votre homepage et la publier sur le server tecfaetu.unige.ch
# Remplir votre page travaux
# Créer un bref rapport sur ce que vous avez fait
Choix du sujet à négocier au plus vite avec nous, déjà pendant la journée en présence ou par email dans les jours suivants.


== Ressources ==
== Ressources ==
Ligne 361 : Ligne 343 :
* [[Tutoriel SVG statique]]
* [[Tutoriel SVG statique]]
* [[Tutoriel SVG avec HTML5]]
* [[Tutoriel SVG avec HTML5]]
; Impress.js
* [[Tutoriel impress.js]]
* [http://bartaz.github.io/impress.js Impress.js homepage]


; Couleurs
; Couleurs
Ligne 441 : Ligne 419 :
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"), 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é en haut de la page à droite, le wiki vous enverra un mail après chaque modification de la page.


=== Séminaire de codage ===
=== Journée de Support Libre ===


Le lundi après la semaine des cours en présence (i.e. le lundi suivant le cours STIC du vendredi), un séminaire de codage est organisé par TECFA.  
Le jeudi de la semaine après la semaine des cours en présence M1 (i.e. celle où vous avez STIC le vendredi), une Journée de Support Libre et organisée pour vous aider, entre autre, à progresser avec vos exercice STIC. '''La présence d'au moins un assistant/moniteur spécifiquement pour STIC est garantie de 10h à 12h s'il y a assez d'étudiants qui ont manifesté leur présence.'''


* voir [http://tecfalms.unige.ch/moodle/course/view.php?id=291 Séminaire de codage sur Moodle TECFA]
* voir [http://tecfalms.unige.ch/moodle/course/view.php?id=291 Journée de Support Libre] pour plus d'informations et pour annoncer votre présence à la journée

Dernière version du 12 septembre 2019 à 17:00

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

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 --> Inscription http://tecfalms.unige.ch/moodle/course/view.php?id=330

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

L'exercice 1 comprend une série de tâches. N'en oubliez aucune SVP !

Faites votre "home page" à TECFA

Cette home page faite en HTML5 doit représenter l'image que vous voulez donner au "monde extérieur". A vous de décider...

Emplacement et nom du fichier d'entrée

La "home page" sera accessible par l’URL 

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

Par exemple: 

http://tecfaetu.unige.ch/perso/maltt/ardiri6/

Exemple de nom correct du fichier d'entrée: welcome.html, welcome.htm, index.html, ou index.htm. Il est important de respecter ces conventions, car le serveur est configuré pour qu'il affiche un de ces fichiers lorsqu'on lui demande d'afficher juste le répertoire.

Pour savoir où mettre votre home page, consultez notre serveur LDAP (votre home page y est indiquée):

Par SFTP: 

tecfaetu.unige.ch
/web/perso/maltt/votre-login-court/

Contraintes

  • Aucune, à part faire attention à ce que le résultat corresponde aux objectifs
  • Vous pouvez créer autant de sous-pages que vous voulez... ou aucune.
  • Vous pouvez relier d'autres pages (home page wiki, home page externe, etc.). Il est obligatoire de faire tous les liens dans le rapport, mais pas dans votre home 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)
  • La technologie utilisée peut rester simple, mais vous pouvez également inclure des éléments sophistiqués, comme des animations faites avec JavaScript.

Page utilisateur EduTechWiki

  1. Perfectionnez votre home page sur edutechwiki français. Réfléchissez au contenu que vous voulez y mettre et parlez-en dans votre rapport.
  2. Insérez une image SVG dans la home page. Elle doit être positionnée, avoir une "bonne" taille, et une légende
  3. Ajoutez au moins un lien à un profil de réseau social (voir sous-tâche correspondante plus bas dans cette page)

Exceptionnellement pour la première période, votre page personnelle va compter également dans la contribution wiki obligatoire

Créez, éditez et adaptez légèrement la présentation de votre page travail

La page travail sert d'instrument portefeuille pour tous les travaux "STIC". Les étudiant(e)s se souciant de la gestion des savoirs incluent également leurs autres travaux.

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/yoshi/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.

Créez/mettez à jour un profil sur un réseau social

  • 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 HTML5
    • Dans votre page utilisateur sur le wiki (seulement wiki français est suffisant)

Faites un rapport en HTML

Lire STIC:Rapport STIC I et II pour les contraintes générales du rapport. 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!)

Délai

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

Dimanche 14 octobre, 23:00

Évaluation et conseils

Contraintes

Evaluation

Facteurs les plus importants
  1. HTML/CSS: Résultat selon vos objectifs explicités dans le rapport (!). Toutefois, on souhaite que vous utilisiez des éléments de structuration de HTML5
  2. HTML/CSS: Ergonomie générale des sites, y compris la navigation entre pages si vous en utilisez plusieurs
  3. XML: Validité de la page et contenu (vos coordonnés plus les 2 exercices STIC I au moins)
  4. Qualité du rapport (surtout structure, emplacement, lisibilité, etc.)
Malus
  1. Emplacement incorrect des fichiers (donc le bon répertoire est "ex1", et un bon nom de fichier est un fichier "index.html" ou "welcome.html")
  2. Présence d’erreurs HTML et CSS (validité de HTML/CSS)
  3. XML pas valide et/ou mal formé
  4. Absence du SVG dans votre page utilisateur wiki
Bonus
  1. Utilisation créative de CSS
  2. Richesse et/ou utilité de contenus
  3. Bonne utilisation de HTML5 (i.e. tags sémantiques)
  4. Élément SVG intéressant

Il sera impossible d'avoir un 6 sans avoir accompli toutes les tâches décrites ci-dessus

Ressources

Transparents

Transparents (plus mis à jour !!)
  1. Design d'un petit dispositif: http://tecfa.unige.ch/guides/tie/html/www-design-intro/www-design-intro.html
  2. HTML de base: http://tecfa.unige.ch/guides/tie/html/xhtml-intro/xhtml-intro.html
  3. CSS de base: http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro.html

Tutoriels et pages ressources

HTML
CSS
SVG
Couleurs
Design
XML

Outils

Editeurs HTML - votre choix:

  • On vous conseille d'utiliser un éditeur qui fournit un support pour HTML5 et CSS, par exemple Brackets

Ensuite, installer / utiliser un éditeur XML si c'est pas déjà fait. Voici quelques choix:

Éditeurs XML - Choix 1
  • Java 6 SDK. Il faut installer cet environnement, car plusieurs programmes que nous allons utiliser en ont besoin.

Installer sous Win7 (en principe facile). Il suffit de télécharger la version Windows *.exe.

Installation de Exchanger sous Mac(plus difficile !)

(1) Télécharger le fichier zip

(2) Dézipper dans un répertoire (par exemple c:\exchanger)

(3) cliquer sur le fichier xngr-editor.jar.

Si le programme ne démarre pas (Win/Mac). Votre installation Java est défaillante. (3) Créer un fichier de commande exchanger.cmd (sous Windows) avec le contenu suivant: 

cd c:\exchanger 
start javaw -jar xngr-editor.jar

... équivalent sur Mac.

Éditeur XML - Choix 2
  • epcEdit
  • Le plus convivial à utiliser (mais pas à installer)
XML Copy editor - Choix 3
  • XML Copy editor
  • Le plus facile à installer ! Assez facile à utiliser.
  • Peut valider toutes sortes de schémas.
Éditeur XML - autres choix
SVG

Exemples et autres infos

Exemples CSS:

Outils en ligne:

Autres articles edutechwiki anglais sur Internet et HTML:

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.

Journée de Support Libre

Le jeudi de la semaine après la semaine des cours en présence M1 (i.e. celle où vous avez STIC le vendredi), une Journée de Support Libre et organisée pour vous aider, entre autre, à progresser avec vos exercice STIC. La présence d'au moins un assistant/moniteur spécifiquement pour STIC est garantie de 10h à 12h s'il y a assez d'étudiants qui ont manifesté leur présence.

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