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

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
 
(7 versions intermédiaires par 5 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic archive}}
<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 28 : Ligne 28 :
* http://www.csszengarden.com/ (discussion de qqs. exemples) + '''discussion'''
* http://www.csszengarden.com/ (discussion de qqs. exemples) + '''discussion'''
* [[:en:Computer colors tutorial]] (utile pour d'autres formats aussi ....)
* [[:en:Computer colors tutorial]] (utile pour d'autres formats aussi ....)
* Analyser un CSS (y compris discussion de stratégies utiliées par des participants)
* Analyser un fichier CSS (y compris la discussion de stratégies utiliées par des participants)
: Clic-droit sur un élément, puis sélectionner ''Inspect'' (Firefox/Chrome)
: Clic-droit sur un élément, puis sélectionner ''Inspect'' (Firefox/Chrome)


Ligne 115 : Ligne 115 :
== Projet 1 / Tâches ==
== Projet 1 / Tâches ==


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


=== Faites votre "home page" à TECFA ===
=== Faites votre "home page" à TECFA ===
Ligne 166 : Ligne 166 :
# 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 / STAF 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/volt/votre_login''
#* répertoire: ''/web/etu-maltt/volt/votre_login''
Ligne 183 : Ligne 183 :
* 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".
* Pour comprendre comment le HTML est produit, regardez soit le code source de la page dans IE explorer, soit utilisez 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.


Ligne 222 : Ligne 222 :
** Lien vers la page travail
** Lien vers la page travail
* Objectifs: A quoi/qui sert les dispositifs, quel est le "message" ? '''Ne présentez pas vos objectifs "pédagogiques"''', mais discutez l''''utilité''' et la '''"user experience"''' par rapport à un public cible !!!
* Objectifs: A quoi/qui sert les dispositifs, quel est le "message" ? '''Ne présentez pas vos objectifs "pédagogiques"''', mais discutez l''''utilité''' et la '''"user experience"''' par rapport à un public cible !!!
* La production: '''bref''' résumé de la démarche
* La production: '''bref''' résumé de la démarche.
* Difficultés, auto-évaluation, remarques
* Difficultés, auto-évaluation, remarques.
* Ressources utilisées, bibliographie.
* Ressources utilisées, bibliographie.


Ligne 230 : Ligne 230 :
'''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).
'''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).


== Evaluation et conseils ==
== Évaluation et conseils ==


=== Contraintes ===
=== Contraintes ===
Ligne 236 : Ligne 236 :
* Vous devez vous fixer des objectifs en ce qui concerne la fonction, le design etc. et les réaliser (en parler dans le rapport).
* 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 en XHTML ou en HTML5 valide
* La page à TECFA doit être faite en XHTML ou en HTML5 valide
* Liens vers le les valideurs HTML/CSS du W3C (sinon, utilisez des extensions Firefox pour valider)
* Liens vers le les validateurs HTML/CSS du W3C (sinon, utilisez des extensions Firefox pour valider)
  http://validator.w3.org/check/referer
  http://validator.w3.org/check/referer
  http://jigsaw.w3.org/css-validator/check/referer
  http://jigsaw.w3.org/css-validator/check/referer
Ligne 246 : Ligne 246 :
# 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: Valdité de la page et contenu (coordonnés plus les 3 exercices STIC I au moins)
# XML: Valdité de la page et contenu (coordonnés plus les 3 exercices STIC I au moins)
# Présentation avec impress.js: originalité, utilité et ergonomie.
# Présentation avec impress.js: originalité, utilité et ergonomie
# Qualité du rapport
# Qualité du rapport


; Malus:
; Malus:
# Emplacement incorrect des fichiers (donc le bon répetoire 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" comme "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é
Ligne 262 : Ligne 262 :


=== Autres exercices de la même période ===
=== Autres exercices de la même période ===
*[[STIC:STIC I - exercice 2 (Utopia)|Exercice 2]]
*[[STIC:STIC I - exercice 2 (Volt)|Exercice 2]]


== Projets alternatifs pour experts ==
== Projets alternatifs pour experts ==
Ligne 333 : Ligne 333 :
Ensuite, installer / utiliser un éditeur XML si c'est pas déjà fait. Voici quelques choix:
Ensuite, installer / utiliser un éditeur XML si c'est pas déjà fait. Voici quelques choix:


; Editeurs XML - Choix 1
; Éditeurs XML - Choix 1


* [http://java.sun.com/ Java 6 SDK]. Il faut installer cet environnement, car plusieurs programmes que nous allons utiliser en ont besoin.
* [http://java.sun.com/ Java 6 SDK]. Il faut installer cet environnement, car plusieurs programmes que nous allons utiliser en ont besoin.
Ligne 355 : Ligne 355 :
... équivalent sur Mac.
... équivalent sur Mac.


; Editeur XML - Choix 2
; Éditeur XML - Choix 2
* [http://www.epcedit.com/ epcEdit]
* [http://www.epcedit.com/ epcEdit]
* Le plus convivial à utiliser (mais pas à installer)
* Le plus convivial à utiliser (mais pas à installer)
Ligne 364 : Ligne 364 :
* Peut valider toutes sortes de schémas.
* Peut valider toutes sortes de schémas.


; Editeur XML - autres choix
; Éditeur XML - autres choix
* C.f. [[:en:XML editor|XML editor]]
* C.f. [[:en:XML editor|XML editor]]


Dernière version du 26 septembre 2016 à 11:56

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

STIC

Projet 1

Objectifs pédagogiques:

  • consolider les connaissances en HTML5 et CSS
  • réfléchir 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'initation (login required)

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 comprends une série de tâches. N'en oubliez aucune SVP !

Faites votre "home page" à TECFA

Cette home page faite en HTML5 ou en XHTML 1.x page 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/

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/

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) Corrigez quelques erreurs (syntaxe, liens, mauvaises explications) dans les pages wikis associées à ce projet.

  • Faites attention à utiliser du code wiki. Copier/coller depuis Word donne des 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 fait de temps en temps avec votre browser préféré soit en local soit à l'URL suivant: http://tecfaetu.unige.ch/etu-maltt/utopia/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 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.
  • Adaptez le CSS à vos besoins (bonus). Résumez vos modifications dans le rapport.

Rappel

Faites un rapport en HTML

Placez le ici (vue SFTP): 

tecfaetu.unige.ch
/web/etu-maltt/promotion/votre_nom/stic-1/ex1/

La structure stic-1/ex1/ est obligatoire, donc ni de redirections ni d'autres noms SVP.

Exemple: 

/web/etu-maltt/utopia/dupond/stic-1/ex1/
  • Exemple de nom correct du fichier-rapport: welcome.html, welcome.htm, index.html, welcome.php
  • N'oubliez pas que le répertoire s'appelle ex1 et non pas EX1 ou exercice1 etc.

Structure du rapport

Voici les éléments les plus importants qui doivent figurer dans la page d'accueil / rapport:

  • Titre, auteur et date
  • Le résultat:
    • Lien vers la homepage TECFA
    • Lien vers le fichier CSS utilisé pour la home page TECFA
    • Lien vers les pages wiki modifiées
    • Lien vers la présentation impress.js et sa feuille de style.
    • Lien vers la page travail
  • Objectifs: A quoi/qui sert les dispositifs, quel est le "message" ? Ne présentez pas vos objectifs "pédagogiques", mais discutez l'utilité et la "user experience" par rapport à un public cible !!!
  • La production: bref résumé de la démarche.
  • Difficultés, auto-évaluation, remarques.
  • Ressources utilisées, bibliographie.

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 en XHTML ou en HTML5 valide
  • Liens vers le les validateurs HTML/CSS du W3C (sinon, utilisez des extensions Firefox pour valider)
http://validator.w3.org/check/referer
http://jigsaw.w3.org/css-validator/check/referer

Evaluation

Facteurs les plus importants
  1. HTML/CSS: Résultat selon vos objectifs explicités dans le rapport (!). Toutefois, on souhaite que vous utilisez 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: Valdité de la page et contenu (coordonnés plus les 3 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écrite 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)

Configuration de Firefox

Voir:

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_(Volt)&oldid=62513 »