« STIC:STIC I - exercice 1 (Nestor-Pixel) » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (→Tâche) |
m (→Ressources) |
||
Ligne 60 : | Ligne 60 : | ||
== Ressources == | == Ressources == | ||
Transparents | === Transparents et liens === | ||
# Design d'un petit dispositif: http://tecfa.unige.ch/guides/tie/html/www-design-intro/www-design-intro.html | # 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 | # HTML de base: http://tecfa.unige.ch/guides/tie/html/xhtml-intro/xhtml-intro.html | ||
Ligne 69 : | Ligne 69 : | ||
# CSS: http://tecfa.unige.ch/guides/css/pointers.html | # CSS: http://tecfa.unige.ch/guides/css/pointers.html | ||
# Design: http://tecfa.unige.ch/guides/design/pointers.html | # Design: http://tecfa.unige.ch/guides/design/pointers.html | ||
=== Configuration de Firefox === | |||
Configuration de Firefox. Il faut absolument installer ces extensions. | Configuration de Firefox. Il faut absolument installer ces extensions. | ||
* Webdeveloper: | * Webdeveloper: | ||
** http://chrispederick.com/work/web-developer/ | ** http://chrispederick.com/work/web-developer/ (page du développeur) | ||
** https://addons.mozilla.org/en-US/firefox/addon/60 | ** https://addons.mozilla.org/en-US/firefox/addon/60 | ||
* Googlebar: | * Googlebar: | ||
Ligne 78 : | Ligne 80 : | ||
* CSS Validator: | * CSS Validator: | ||
** https://addons.mozilla.org/en-US/firefox/addon/2289 | ** https://addons.mozilla.org/en-US/firefox/addon/2289 | ||
* HTML Validator: | |||
** https://addons.mozilla.org/en-US/firefox/addon/249 | |||
** http://users.skynet.be/mgueury/mozilla/ (page du développeur, infos en plus, traductions) | |||
Exemples: | Exemples: |
Version du 21 septembre 2007 à 18:24
Exercice 1
Cet exercice du course STIC I vous permet:
- d'apprendre un peu de XHTML (si vous ne connaissez pas déjà)
- d'apprendre un peu de CSS et de "web design"
- de réfléchir comment organiser un petit site
Tâche
- Faites votre "home page" à TECFA plus un rapport
La "home page" sera accessible par l’URL
http://tecfa.unige.ch/perso/maltt/votre login/
Par exemple:
http://tecfa.unige.ch/perso/maltt/ott/
Exemple de nom correct du fichier d'entrée: welcome.html welcome.htm index.html welcome.php ...
Pour savoir oũ mettre votre home page, consultez notre serveur LDAP (votre home page y est indiquée):
* Addresses Nestor
Par FTP:
tecfa.unige.ch /web/perso/maltt/votre login/
Le rapport est à placer ici (vue FTP):
tecfa.unige.ch /web/etu-maltt/nestor/login/stic/ex1/
Exemple:
/etu-maltt/nestor/dupond/stic/ex1/
Exemple de nom correct du fichier d'entrée: welcome.html welcome.htm index.html welcome.php ...
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 doit être faite en XHTML (Pas HTML !)
- Liens vers le les valideurs HTML/CSS du W3C:
http://validator.w3.org/check/referer http://jigsaw.w3.org/css-validator/check/referer
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, lien vers le fichier CSS utilisé
- Objectifs: A quoi/qui sert le dispositif, quel est le "message" ?
- La production: bref résumé de la démarche
- Difficultés, auto-évaluation, remarques
- Ressources utilisées, bibliographie.
Evaluation
- Qualité du rapport
- selon vos objectifs explicités dans le rapport (!!)
- absence d’erreurs XHTML et CSS (validité de XHTML/CSS)
- utilisation créative de CSS
- ergonomie générale
- navigation entre pages
- emplacement correct des fichiers
Ressources
Transparents et liens
- 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
Liens:
- HTML: http://tecfa.unige.ch/guides/html/pointers.html
- CSS: http://tecfa.unige.ch/guides/css/pointers.html
- Design: http://tecfa.unige.ch/guides/design/pointers.html
Configuration de Firefox
Configuration de Firefox. Il faut absolument installer ces extensions.
- Webdeveloper:
- Googlebar:
- CSS Validator:
- HTML Validator:
- https://addons.mozilla.org/en-US/firefox/addon/249
- http://users.skynet.be/mgueury/mozilla/ (page du développeur, infos en plus, traductions)
Exemples:
Editeurs - A votre choix:
- On vous conseille d'utiliser XML Exchanger Lite pour éditer XHTML car vous allez le réutiliser pour les exercices XML.
- Pour CSS, prenez un simple éditeur (même Exchanger peut faire l'affaire).
Articles edutechwiki anglais sur Internet et HTML: