STIC:STIC I - exercice 1 (Wall-e)

De EduTech Wiki
Aller à la navigation Aller à la recherche

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 :

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

  • Consolider les connaissances en HTML5 et CSS
  • 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 des bibliothèques JavaScript

Cet exercice vise aussi à consolider les sujets abordés dans l'atelier d'initiation MINIT.

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
  • 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
  • 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 Impress.js

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 :

  • Un éditeur de texte (e.g Brackets)
  • Un éditeur XML (e.g. Exchanger XML Editor)
  • Un logiciel de transfert SFTP configuré pour se connecter au serveur tecfaetu.unige.ch

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>
  <head>
    <meta charset="UTF-8" />
    <title>Votre titre</title> 
    <link href="css-template.css" rel="stylesheet" type="text/css" /> 
  </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
     }

Présentation/modification de fichiers impress.js

Introduction à XML

  • Introduction ultra-rapide à XML
  • Les DTD (chapitres 1-6, à relire SVP)

Utilisation d'un éditeur (à installer)

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 (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.
  • La technologie utilisée peut rester simple, mais vous pouvez également inclure des éléments sophistiqués, comme une animation GSAP.

Contribution wiki

Contrairement aux autres projets STIC, on demande une contribution wiki minimaliste.

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 un légende.

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

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 5 fichiers "travaux.dtd", "travaux.xsl", "ENLEVERwelcome.xml", "travauxdoc.txt" 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 / STAF 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/wall-e/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".

  • 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 une présentation avec impress.js

  • Exceptionnellement, le choix du sujet est libre (donc pas forcément relié à un "sujet MALTT", mais soyez raisonnable au niveau du volume ....
  • Utilisez à la fois le placement et le zoom comme élément stylistique.
  • 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.
  • Adaptez le CSS à vos besoins (bonus). Résumez vos modifications dans le rapport.

Rappel

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
    • Présentation Impress.js
  • Discutez dans le rapport les deux homepage et la présentation Impress.js
  • 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 :

  • 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!)

Activité complémentaire (facultative)

Cette activité complémentaire est facultative, mais elle est conseillée surtout pour les novices en programmation car elle introduit de manière non-technique certains éléments que nous allons aborder lors de la période 2 avec la programmation avec JavaScript.

Nous vous conseillons d'abord de lire le texte Introduction à la programmation (environ 15-20 minutes) et ensuite d'essayer d'utiliser Scratch (la page sur ce wiki fait référence à la version 1.4 mais vous utilisez plutôt la version 2.0 sur le web). Scratch est un environnement qui permet de créer des éléments interactifs en utilisant des "blocks" de programmation à travers une interface drag&drop. Ces blocks de code sont également présents dans la plupart des languages de programmation, notamment en JavaScript.

Pour cette activité vous n'avez pas de contraintes. Vous êtes libres d'explorer le logiciel qui est également utilisé pour introduire la programmation chez les enfants.

Si vous voulez, vous pouvez ajouter un lien à votre production dans votre rapport.

Ressources pour l'activité complémentaire

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).

Évaluation et conseils

Contraintes

  • Vous devez vous fixer des objectifs en ce qui concerne la fonction, le design etc. et les réaliser (en parler dans le rapport).
  • La page à TECFA doit être faite HTML5 valide
  • Liens vers le les validateurs HTML/CSS du W3C (vous pouvez également utiliser l'extension Brackets montrée lors de l'atelier MINIT)

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. Présentation avec impress.js: originalité, utilité et ergonomie
  5. Qualité du rapport
Malus
  1. Emplacement incorrect des fichiers (donc le bon répertoire est "ex1", et un bon nom de fichier est un fichier "index" comme "welcome.html" ....)
  2. Présence d’erreurs HTML et CSS (validité de HTML/CSS)
  3. XML pas valide et/ou mal formé
Bonus
  1. Utilisation créative de CSS
  2. Richesse et/ou utilité de contenus
  3. Bonne utilisation de HTML5

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

Projets alternatifs pour experts

  1. Vous devez compléter une home page légère sur TECFA et sur edutechwiki (elles ne seront pas évaluées) et vous devez remplir la page travail. Vous êtes dispensé(e)s du reste (impress.ch, GreenSock GSAP,...)
  2. Créez ou améliorez un tutoriel sur edutechwiki français.
  3. Faire un rapport très court (pour qu'on aie une trace de ce que vous avez fait ....)

Contraintes et conseils:

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
Impress.js
Couleurs
Design
XML
  • (A ajouter: Tutoriel fait par Angela)

Outils

Editeurs HTML - votre choix:

  • On vous conseille d'utiliser un éditeur qui fournit un support pour HTML5, par exemple BlueGriffon
  • Pour CSS, prenez un simple éditeur de texte (même Exchanger peut faire l'affaire). Sinon, Kompozer possède aussi un éditeur CSS.

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

Exemples et autres infos

Exemples CSS:

Outils en ligne:

Autres articles edutechwiki anglais sur Internet et HTML:

Aide

Utilisez la page discussion

Important: En cliquant sur "l'étoile" (à côté de "afficher l'histoire"), vous pouvez suivre une page ("Ajouter cette page à votre liste de suivi"). Dans ce cas, le wiki vous enverra un mail après chaque modification de la page en question. Je vous conseille de faire cela pour les pages discussion.

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