« STIC:STIC I - exercice 1 (Stella) » : différence entre les versions
m (→Tâche) |
|||
| Ligne 45 : | Ligne 45 : | ||
# 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 ex chez vous), une fois terminé, il faut transférer tous les fichiers avec | # 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'' | #* machine: ''tecfaetu.unige.ch'' | ||
#* répertoire: ''/web/etu-maltt/ | #* répertoire: ''/web/etu-maltt/R2D2/votre_login'' | ||
#* 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/ | # 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 maintenant de changer sa mise en forme en apprennant XSLT smile (fichier travaux.xsl) | ||
Version du 1 octobre 2011 à 15:34
Exercice 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 un peu de 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
Cet exercice est "hors sujet" par rapport à la thématique de ce cours, mais vous permet de consolider les sujets abordés dans l'atelier d'initation (login required)
Tâche
(1) Faites votre "home page" à TECFA
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/
(2) 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:
- http://sites.google.com/ (web site generator)
- https://www.blogger.com/ (blogger service)
- http://www.ning.com/ (social network creator)
- http://netvibes.com/ (start page/webtop)
- http://wikispaces.com (wiki service)
(3) 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/
- 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 !
- 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/R2D2/votre_login
- 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/
- 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)
Notez bien:
- La page XML doit être valide.
- 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
(4) Faites un rapport en HTML Placez le ici (vue SFTP):
tecfaetu.unige.ch /web/etu-maltt/qwerty/____/ex1/
Exemple:
/etu-maltt/pixel/dupond/stic/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.
Contraintes
- Vous devez vous fixer des objectifs en ce qui concerne sa fonction, son design etc. et les réaliser (en parler dans le rapport).
- La page à TECFA doit être faite en XHTML ou HTML 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 de choisir la technologie pour le site externe.
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ésulat:
- Lien vers la homepage TECFA
- Lien vers la page externe
- Lien vers le fichier CSS utilisé pour la home page TECFA
- Lien vers la home page externe
- Objectifs: A quoi/qui sert les dispositifs, quel est le "message" ?
- La production: bref résumé de la démarche
- Difficultés, auto-évaluation, remarques
- Ressources utilisées, bibliographie.
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)
- 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 acccompli les 4 tâches décrite ci-dessus
Exercice alternatif pour experts
- Vous devez compléter une home page légère sur TECFA (elle ne sera pas évaulée) et remplir la page travail
- Vous ne devez pas créer de page avec un service Web.
- Choisissez parmi les thèmes suivants et faites au moins une ébauche ou améliorez une autre page en rapport avec l'exercice
- Tutoriel positionnement CSS
- HTML5 (présenter les nouvelles fonctionalités)
- Modèle de couleur (présenter RGB, HSL et HSB)
- Tutoriel couleur CSS (y compris RGBa, HSL pour CSS3)
- Faire un rapport très court (pour qu'on aie une trace de ce que vous avez fait ....)
Autres exercices de la même période
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
- Installation de Codeburner for Firefox (si c'est pas encore fait)
- 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)
- en:Computer colors tutorial
- Utilisation de webdeveloper pour Firefox pour analyser un CSS
Initiation à CSS
- css-intro (PDF) (transparents)
- tutoriel CSS (pour relire)
- Visite de http://www.csszengarden.com/
- Demo CSS positioning
Code exemple HTML et CSS
Si vous n'avez pas encore de home page, voici le code d'une page XHTML
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; 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
}
Ressources
Transparents
- Transparents
- 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)
- Couleurs
- en:Computer colors tutorial contenus obligatoires: RGB et HSL
- en:Color (liens)
- Design
- Web design links (liens dans edutechwiki anglais)
Configuration de Firefox
Voir:
Outils
Editeurs HTML - A votre choix:
- On vous conseille d'utiliser XML Exchanger Lite pour éditer XHTML car vous allez le réutiliser pour les exercices XML.
- http://www.freexmleditor.com/ C.f. l'exerice 2 pour l'install sur VISTA
- 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)
- 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:
- Editeurs XML - Choix 1
Installer sous XP (facile). Il suffit de télécharger la version Windows
Installation de Exchanger sous VISTA (plus difficile !)
(1) Télécharger 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)
(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:
cd c:\exchanger start javaw -jar lib\xngr-loader.jar
(4) cliquer sur exchanger.cmd
- 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
Outils en ligne:
Autres articles edutechwiki anglais sur Internet et HTML:
Aide
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.