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

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
 
(20 versions intermédiaires par 4 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;">Tutoriels Flash</categorytree>
== Projet 1 ==
== Projet 1 ==


Ligne 11 : Ligne 13 :
Cet exercice vous permet de consolider les sujets abordés dans [http://tecfax.unige.ch/moodle/course/category.php?id=16 l'atelier d'initation] (''login required'')
Cet exercice vous permet de consolider les sujets abordés dans [http://tecfax.unige.ch/moodle/course/category.php?id=16 l'atelier d'initation] (''login required'')


== Tâches ==
== Activités en salle de classe ==
 
Ces activités ont été faites dans l'atelier d'initiation. On rappellera juste les principes ....
 
=== Rappel HTML ===
 
* [http://tecfa.unige.ch/guides/tie/pdf/files/xhtml-intro.pdf xhtml-intro (PDF)] (transparents)
* [[HTML5]]- [[:en:HTML5]]
* [[:en:HTML and XHTML elements and attributes]]
 
* Installation de [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] (si c'est pas encore fait)
* Installation de [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] (si c'est pas encore fait)
 
=== Design, style et couleurs ===
 
* Design d'un petit dispositif: http://tecfa.unige.ch/guides/tie/html/www-design-intro/www-design-intro.html
* http://www.csszengarden.com/ (discussion de qqs. exemples)
* [[:en:Computer colors tutorial]]
* Utilisation de [https://addons.mozilla.org/en-US/firefox/addon/60 webdeveloper] pour Firefox pour analyser un CSS
 
=== Rappel initiation à CSS ===
 
* [http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf css-intro (PDF)] (transparents)
* [[tutoriel CSS]] (pour relire)
* Visite de http://www.csszengarden.com/
* Demo [http://tecfa.unige.ch/guides/css/ex/boxing0.html CSS positioning]
 
=== Code exemple HTML et CSS ===
 
Si vous n'avez pas encore de home page, voici le code d'une page HTML5
 
<source lang="xml">
 
<!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>
</source>
 
Code [http://tecfa.unige.ch/guides/css/ex/css-template.css du fichier CSS] utilisé avec la page ci-dessus
 
<source lang="CSS">
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
    }
</source>
 
=== Présentation/modification de fichiers impress.js ===
 
* [[Tutoriel impress.js]] (voir l'exemple)
* Téléchargez tous les fichiers dans le répertoire http://tecfa.unige.ch/guides/impress.js/impress-demo-1/ (sauf HEADER.html)
 
=== Présentation de GreenSock GSAP ===
 
* [[Tutoriel GreenSock GSAP]]
 
== Projet 1 / Tâches ==
 
L'exercice 1 comprend une série de tâches. N'oubliez aucune SVP !


=== Faites votre "home page" à TECFA ===
=== Faites votre "home page" à TECFA ===
Cet home 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'''
''' Emplacement et nom du fichier d'entrée'''
Ligne 34 : Ligne 135 :
'''Contraintes'''
'''Contraintes'''


* Aucune, à part faire attention à ce que le resultat corresponde aux objectives
* Aucune, à part faire attention à ce que le résultat corresponde aux objectives
* 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 (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 ===
=== Contribution wiki ===
Ligne 44 : Ligne 146 :
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.
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és à ce projet)
2) Corrigez quelques erreurs (syntaxe, liens, mauvaises explications) dans les pages wikis associées à ce projet.


* Utilisez l'aide du wiki si nécessaire.
* 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.


=== Faites une autre home page sur un service qui permet de créer des sites ===
=== Faites une autre home page sur un service qui permet de créer des sites ===
Ligne 53 : Ligne 155 :
* http://sites.google.com/ (web site generator)
* http://sites.google.com/ (web site generator)
* https://www.blogger.com/ (blogger service)
* https://www.blogger.com/ (blogger service)
* http://www.ning.com/ (social network creator)
* http://www.mixxt.org (social network creator)
* http://netvibes.com/ (start page/webtop)  
* http://netvibes.com/ (start page/webtop)  
* http://wikispaces.com (wiki service)
* http://wikispaces.com (wiki service)
Ligne 69 : Ligne 171 :
#* Exemple: http://tecfaetu.unige.ch/etu-maltt/pixel/ardiri6/
#* Exemple: http://tecfaetu.unige.ch/etu-maltt/pixel/ardiri6/
# 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/R2D2/votre_login/
# 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/R2D2/votre_login/
# Félicitations!!! Vous avez votre première page en XML! Et si vous la trouvez pas très jolie c'est à vous maintenant de changer sa mise en forme en apprennant XSLT smile (fichier travaux.xsl)  
# Félicitations!!! Vous avez votre première page en XML! Et si vous la trouvez pas très jolie, c'est à vous de changer sa mise en forme en apprenant XSLT (fichier travaux.xsl)  


Notez bien:
Notez bien:
* La page XML doit être valide.
* La page XML doit être '''valide'''. Le fait qu'un contenu s'affiche ne veut rien dire ...
* En aucun cas il faut changer la DTD
* En aucun cas il faut changer la DTD
* Ceux qui n'aiment pas la présentation et qui osent prendre le temps pour améliorer peuvent échanger la feuille de style XSLT
* Ceux qui n'aiment pas la présentation et qui osent prendre le temps pour l'améliorer peuvent échanger/adapter la feuille de style XSLT. Cette technologie sera introduite dans STIC II.


=== Créez une présentation avec impress.js ===
=== Créez une présentation avec impress.js ===


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


=== Faites un rapport en HTML ===
=== Faites un rapport en HTML ===
Placez le ici (vue SFTP):
Placez le ici (vue SFTP):
  tecfaetu.unige.ch
  tecfaetu.unige.ch
  /web/etu-maltt/tetris/____/ex1/
  /web/etu-maltt/tetris/____/stic-1/ex1/
Exemple:
Exemple:
  /etu-maltt/tetris/dupond/stic/ex1/
  /web/etu-maltt/tetris/dupond/stic-1/ex1/
* Exemple de nom correct du fichier-rapport: '''welcome.html''', '''welcome.htm''', '''index.html''', '''welcome.php'''
* 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.
* N'oubliez pas que le répertoire s'appelle '''ex1''' et non pas '''EX1''' ou '''exercice1''' etc.
Ligne 100 : Ligne 202 :
** Lien vers le fichier CSS utilisé pour la home page TECFA
** Lien vers le fichier CSS utilisé pour la home page TECFA
** Lien vers la home page externe
** Lien vers la home page externe
** Lien vers les pages wiki
** Lien vers les pages wiki modifiés
** Lien vers la présentation
** Lien vers la présentation impress.js et sa feuille de style.
* Objectifs: A quoi/qui sert les dispositifs, quel est le "message" ? '''Ne présentez pas des 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
Ligne 142 : Ligne 244 :
# 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 (site web externe, impress.ch, GreenSock GSAP,...)
# 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 (site web externe, impress.ch, GreenSock GSAP,...)
# Créez ou améliorez un tutoriel sur edutechwiki français.
# Créez ou améliorez un tutoriel sur edutechwiki français.
#* [[Tutoriel positionnement CSS]]
#* [[HTML5]] (présenter les nouvelles fonctionnalités)
#* [[HTML5]] (présenter les nouvelles fonctionnalités)
#* [[Modèle de couleur]] (présenter RGB, HSL et HSB)
#* [[Modèle de couleur]] (présenter RGB, HSL et HSB)
Ligne 154 : Ligne 255 :
* Le travail sera individuel (une personne = 1 tutoriel), mais vous pouvez vous assister mutuellement.
* Le travail sera individuel (une personne = 1 tutoriel), mais vous pouvez vous assister mutuellement.
* Pour CSS, regardez [[:en:CSS tutorial]] et [[:en:Web_technology_tutorials#CSS|tutoriels associés]]
* Pour CSS, regardez [[:en:CSS tutorial]] et [[:en:Web_technology_tutorials#CSS|tutoriels associés]]
== Activités en salle de classe ==
Ces activités ont été faites dans l'atelier d'initiation. On rappellera juste les principes ....
=== Rappel (X)HTML ===
* [http://tecfa.unige.ch/guides/tie/pdf/files/xhtml-intro.pdf xhtml-intro (PDF)] (transparents)
* [[:en:HTML]]
* [[:en:XHTML]]
* [[:en:HTML and XHTML elements and attributes]]
* Installation de [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] (si c'est pas encore fait)
* Installation de [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] (si c'est pas encore fait)
=== Design, style et couleurs ===
* Design d'un petit dispositif: http://tecfa.unige.ch/guides/tie/html/www-design-intro/www-design-intro.html
* http://www.csszengarden.com/ (discussion de qqs. exemples)
* [[:en:Computer colors tutorial]]
* Utilisation de [https://addons.mozilla.org/en-US/firefox/addon/60 webdeveloper] pour Firefox pour analyser un CSS
=== Rappel initiation à CSS ===
* [http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf css-intro (PDF)] (transparents)
* [[tutoriel CSS]] (pour relire)
* Visite de http://www.csszengarden.com/
* Demo [http://tecfa.unige.ch/guides/css/ex/boxing0.html CSS positioning]
=== Code exemple HTML et CSS ===
Si vous n'avez pas encore de home page, voici le code d'une page HTML5
<source lang="xml">
<!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>
</source>
Code [http://tecfa.unige.ch/guides/css/ex/css-template.css du fichier CSS] utilisé avec la page ci-dessus
<source lang="CSS">
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
    }
</source>


== Ressources ==
== Ressources ==
Ligne 266 : Ligne 280 :
* [[:en:CSS]]
* [[:en:CSS]]
* [[Liens CSS]] (assez vide pour le moment)
* [[Liens CSS]] (assez vide pour le moment)
; Impress.js
* [http://bartaz.github.io/impress.js Impress.js homepage]
; Greensock
*


; Couleurs
; Couleurs
Ligne 282 : Ligne 302 :
=== Outils ===
=== Outils ===


'''Editeurs HTML - A votre choix:'''
'''Editeurs HTML - votre choix:'''


* On vous conseille d'utiliser XML Exchanger Lite pour éditer XHTML car vous allez le réutiliser pour les exercices XML.
* On vous conseille d'utiliser un éditeur qui fournit un support pour HTML5, par exemple [http://www.bluegriffon.org/ BlueGriffon]
** http://www.exchangerxml.com/editor/ C.f. l'exerice 2 pour l'install sur VISTA
* Pour CSS, prenez un simple éditeur de texte (même Exchanger peut faire l'affaire). Sinon, Kompozer possède aussi un éditeur CSS.
** http://java.com/ (télécharger Java si c'est pas installé sur votre machine)
* Pour CSS, prenez un simple éditeur (même Exchanger peut faire l'affaire). Sinon, Kompozer possède aussi un éditeur CSS.
 
; Java (si c'est pas déjà fait)
 
* [http://java.sun.com/ Java 6 SDK]. Il faut installer cet environnement, car plusieurs programmes que nous allons utiliser en ont besoin.


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:
Ligne 297 : Ligne 311 :
; Editeurs XML - Choix 1
; Editeurs XML - Choix 1


Installer sous XP (facile). Il suffit de télécharger la version Windows
* [http://java.sun.com/ Java 6 SDK]. Il faut installer cet environnement, car plusieurs programmes que nous allons utiliser en ont besoin.
* [http://www.exchangerxml.com/editor/downloads.html Exchanger XML Editor lite]


Installation de Exchanger sous VISTA (plus difficile !)
Installer sous Win7 (en principe facile). Il suffit de télécharger la version Windows *.exe.
* [http://code.google.com/p/exchangerxml/ Download at Google]


(1) Télécharger [http://www.exchangerxml.com/editor/downloads/xngrliteV32.zip http://www.exchangerxml.com/editor/downloads/xngrliteV32.zip]. Puisque vous avez déjà installé Java, il faut prendre une version '''sans''' Java (Without Java VM)
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)
(2) Dézipper dans un répertoire (par exemple c:\exchanger)


(3) Dans ce répertoire, créer un fichier ''exchanger.cmd'' avec le contenu suivant:
(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  
  cd c:\exchanger  
  start javaw -jar lib\xngr-loader.jar
  start javaw -jar xngr-editor.jar


(4) cliquer sur ''exchanger.cmd''
... équivalent sur Mac.


; Editeur XML - Choix 2
; Editeur XML - Choix 2
Ligne 341 : Ligne 360 :
Utilisez la page discussion
Utilisez la page discussion


'''Important''': Dans le menu déroulant en haut (à côté de auteurs), 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.
'''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.

Dernière version du 23 septembre 2014 à 16:30

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

STIC
Tutoriels Flash

Projet 1

Cet exercice vous permet:

  • d'apprendre un peu de XHTML/HTML, c.a.d. créer des pages web (si vous ne connaissez pas déjà)
  • d'apprendre du CSS et de "web design", c.a.d. "styler" des pages web
  • de réfléchir comment organiser un petit site
  • d'apprendre à utiliser un schéma XML et de créer un contenu XML
  • d'apprendre à utiliser des bibliothèques JavaScript

Cet exercice vous permet de 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

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

Présentation de GreenSock GSAP

Projet 1 / Tâches

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

Faites votre "home page" à TECFA

Cet home 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 just 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 objectives
  • 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 de 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.

Faites une autre home page sur un service qui permet de créer des sites

Voici une liste de services que l'on suggère:

Créez et éditez votre page travail

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. Net pas ouvrir le fichier dans le navigateur ! Vous pouvez 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 ex chez vous), une fois terminé, il faut transférer tous les fichiers avec SFTP 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/R2D2/votre_login/
  7. Félicitations!!! Vous avez votre première page en XML! Et si vous 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 ...
  • En aucun cas il faut changer la DTD
  • Ceux qui n'aiment pas la présentation et qui osent prendre le temps pour l'améliorer peuvent échanger/adapter la feuille de style XSLT. Cette technologie sera introduite dans 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.

Faites un rapport en HTML

Placez le ici (vue SFTP): 

tecfaetu.unige.ch
/web/etu-maltt/tetris/____/stic-1/ex1/

Exemple: 

/web/etu-maltt/tetris/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 la home page externe
    • Lien vers les pages wiki modifiés
    • Lien vers la présentation impress.js et sa feuille de style.
  • 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.

Evaluation 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 valideurs 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
  • Vous êtes libres de choisir la technologie pour le site externe.

Evaluation

Facteurs les plus importants
  1. HTML/CSS: Résultat selon vos objectifs explicités dans le rapport (!!)
  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épetoire est "ex1", et un bon nom de fichier est un fichier "index" comme "welcome.html" ....)
  2. Présence d’erreurs XHTML et CSS (validité de XHTML/CSS)
  3. XML pas valide et/ou mal formé
Bonus
  1. Utilisation créative de CSS

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 (site web externe, 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
Greensock
Couleurs
Design

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:

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

Editeur 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.
Editeur 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_(Tetris)&oldid=37986 »