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

Dernière version du 22 septembre 2015 à 20:44

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

Installation de 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) + discussion
en:Computer colors tutorial (utile pour d'autres formats aussi ....)
Analyser un CSS (y compris discussion de stratégies utiliées par des participants)

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

Tutoriel impress.js (voir l'exemple)
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)

Projet 1 / Tâches

L'exercice 1 comprend une série de tâches. N'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):

Etudiants 1ère anné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 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 créateur de sites ou de contenus

La page doit avoir un objectif ....

Voici une liste de services de création de sites que l'on suggère:

http://sites.google.com/ (web site generator)
https://www.blogger.com/ (blogger service)
http://www.mixxt.org (social network creator)
http://netvibes.com/ (start page/webtop)
http://wikispaces.com (wiki service)

Création de contenus (attention, il y a des règles à respecter ...)

Wikipédia, LinkedIn, etc.

Créez et éditez 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.

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/

Faites attention de sauver la cible sous/save as. Ne pas ouvrir le fichier dans le navigateur ! Vous pouvez perdre de l'information ou encore vous retrouver avec du simple HTML !
Renommez le fichier ENLEVERwelcome.xml en 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.
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.
- machine: tecfaetu.unige.ch
- répertoire: /web/etu-maltt/utopia/votre_login
- Exemple: http://tecfaetu.unige.ch/etu-maltt/utopia/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/utopia/votre_login/
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 disposent du temps libre peuvent échanger/adapter la feuille de style XSLT. Cette technologie sera introduite plus tard dans le cours ou 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/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 la homepage externe
- 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

Avant le début de la période suivante (lundi 8:59)

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

HTML/CSS: Résultat selon vos objectifs explicités dans le rapport (!!)
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)
Présentation avec impress.js: originalité, utilité et ergonomie.
Qualité du rapport

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" ....)
Présence d’erreurs XHTML et CSS (validité de XHTML/CSS)
XML pas valide et/ou mal formé

Bonus

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

Exercice 2

Projets alternatifs pour experts

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.
- HTML5 (présenter les nouvelles fonctionnalités)
- Modèle de couleur (présenter RGB, HSL et HSB)
- Tutoriel couleur CSS (y compris RGBa, HSL pour CSS3)
- Tutoriel positionnement CSS (à compléter, il manque la plupart des éléments)
- Tutoriel impress.js
- Tutoriel GreenSock GSAP
Faire un rapport très court (pour qu'on aie une trace de ce que vous avez fait ....)

Contraintes et conseils:

Le travail sera individuel (une personne = 1 tutoriel), mais vous pouvez vous assister mutuellement.
Pour CSS, regardez en:CSS tutorial et tutoriels associés

Ressources

Transparents

Transparents (plus mis à jour !!)

Design d'un petit dispositif: http://tecfa.unige.ch/guides/tie/html/www-design-intro/www-design-intro.html
HTML de base: http://tecfa.unige.ch/guides/tie/html/xhtml-intro/xhtml-intro.html
CSS de base: http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro.html

Tutoriels et pages ressources

HTML

en:HTML and XHTML elements and attributes contenus obligatoires
HTML links (edutechwiki anglais)
HTML (pour le moment sans bcp de liens !)
en:HTML
XHTML

CSS

Tutoriel CSS contenus obligatoires
en:CSS tutorial contenus obligatoires (similaire à la version française)
CSS links (beaucoup de liens, edutechwiki anglais)
en:CSS
Liens CSS (assez vide pour le moment)

Impress.js

Impress.js homepage

Couleurs

en:Computer colors tutorial contenus obligatoires: RGB et HSL
en:Color (liens)

Design

Web design links (liens dans edutechwiki anglais)

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:

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.

Download at Google

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

C.f. XML editor

Exemples et autres infos

Exemples CSS

http://www.csszengarden.com/

Outils en ligne:

en:List of web 2.0 applications

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.

@@ 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>
@@ Ligne 8 : / Ligne 8 : @@
 * 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
+* utiliser des bibliothèques [[JavaScript]]
 Cet exercice vise aussi à consolider les sujets abordés dans [http://tecfax.unige.ch/moodle/course/category.php?id=16 l'atelier d'initation] (''login required'')
@@ Ligne 100 : / Ligne 100 : @@
 * [[Tutoriel impress.js]] (voir l'exemple)
+* [[: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)
@@ Ligne 108 : / Ligne 109 : @@
 === 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 ...
+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'''
@@ Ligne 118 : / Ligne 119 : @@
 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.
+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):
@@ Ligne 129 : / Ligne 130 : @@
 '''Contraintes'''
-* Aucune, à part faire attention à ce que le résultat corresponde aux objectives
+* 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.
@@ Ligne 163 : / Ligne 164 : @@
 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/
-# 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 !
+# Faites attention de ''sauver la cible sous''/''save as''. Ne pas ouvrir le fichier dans le navigateur ! Vous pouvez perdre de l'information ou encore vous retrouver avec du simple HTML !
 # Renommez le fichier ENLEVERwelcome.xml en welcome.xml
 # Lancez un éditeur XML et ouvrez ce fichier "welcome.xml"
@@ Ligne 169 : / Ligne 170 : @@
 # 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.
 #* machine: ''tecfaetu.unige.ch''
-#* répertoire: ''/web/etu-maltt/R2D2/votre_login''
+#* répertoire: ''/web/etu-maltt/utopia/votre_login''
-#* Exemple: http://tecfaetu.unige.ch/etu-maltt/pixel/ardiri6/
+#* Exemple: http://tecfaetu.unige.ch/etu-maltt/utopia/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/utopia/votre_login/
 # 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)
@@ Ligne 194 : / Ligne 195 : @@
 Exemple:
-  /web/etu-maltt/tetris/dupond/stic-1/ex1/
+  /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.
@@ Ligne 206 : / Ligne 207 : @@
 ** Lien vers la homepage TECFA
 ** Lien vers le fichier CSS utilisé pour la home page TECFA
-** Lien vers la home page externe
+** Lien vers la homepage externe
-** Lien vers les pages wiki modifiés
+** Lien vers les pages wiki modifiées
 ** Lien vers la présentation impress.js et sa feuille de style.
 ** Lien vers la page travail
@@ Ligne 214 : / Ligne 215 : @@
 * Difficultés, auto-évaluation, remarques
 * Ressources utilisées, bibliographie.
+=== Délai ===
+Avant le début de la période suivante (lundi 8:59)
 == Evaluation et conseils ==
@@ Ligne 244 : / Ligne 249 : @@
 === Autres exercices de la même période ===
-*[[:STIC:STIC I - exercice 2 | Exercice 2]]
+*[[STIC:STIC I - exercice 2 (Utopia)|Exercice 2]]
 == Projets alternatifs pour experts ==
@@ Ligne 289 : / Ligne 294 : @@
 ; Impress.js
 * [http://bartaz.github.io/impress.js Impress.js homepage]
-; Greensock
-*
 ; Couleurs
@@ Ligne 299 : / Ligne 301 : @@
 ; Design
 * [[:en:Web_design_links|Web design links]] (liens dans edutechwiki anglais)
+; XML
+* (A ajouter: Tutoriel fait par Angela)
 === Configuration de Firefox ===

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

Dernière version du 22 septembre 2015 à 20:44

Sommaire

Projet 1

Activités en salle de classe

Rappel HTML

Design, style et couleurs

Rappel initiation à CSS

Code exemple HTML et CSS

Présentation/modification de fichiers impress.js

Projet 1 / Tâches

Faites votre "home page" à TECFA

Contribution wiki

Faites une autre home page sur un créateur de sites ou de contenus

Créez et éditez votre page travail

Créez une présentation avec impress.js

Faites un rapport en HTML

Délai

Evaluation et conseils

Contraintes

Evaluation

Autres exercices de la même période

Projets alternatifs pour experts

Ressources

Transparents

Tutoriels et pages ressources

Configuration de Firefox

Outils

Exemples et autres infos

Aide

Menu de navigation

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

Dernière version du 22 septembre 2015 à 20:44

Projet 1

Activités en salle de classe

Rappel HTML

Design, style et couleurs

Rappel initiation à CSS

Code exemple HTML et CSS

Présentation/modification de fichiers impress.js

Projet 1 / Tâches

Faites votre "home page" à TECFA

Contribution wiki

Faites une autre home page sur un créateur de sites ou de contenus

Créez et éditez votre page travail

Créez une présentation avec impress.js

Faites un rapport en HTML

Délai

Evaluation et conseils

Contraintes

Evaluation

Autres exercices de la même période

Projets alternatifs pour experts

Ressources

Transparents

Tutoriels et pages ressources

Configuration de Firefox

Outils

Exemples et autres infos

Aide

Menu de navigation

Rechercher

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