STIC:STIC I - exercice 1 (Nestor-Pixel)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

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

(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:

(3) Faites un rapport en HTML Placez le ici (vue SFTP): 

tecfaetu.unige.ch
/web/etu-maltt/pixel/login/stic/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 ex et non pas EX1 ou exercice1 etc.

(4) Participez à edutechwiki

Ajoutez des informations de toute sorte à une des pages utiles pour réussir l'exercice. Bien sûr, vous pouvez aussi créer une nouvelle page.

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 strict (ni HTML ni XHTML transitional!)
  • 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
  1. Résultat selon vos objectifs explicités dans le rapport (!!)
  2. Ergonomie générale des sites, y compris la navigation entre pages si vous en utilisez plusieurs
  3. 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)
Bonus
  1. Utilisation créative de CSS
  2. Comme pour chaque exercice: participation dans les 2 edutech wikis (améliorations, modifications et ajouts de pages en dehors des "pages exercices et forums". Indiquez très brièvement ce que vous avez fait dans votre home page wiki et dans le rapport, sinon on risque de ne pas le voir ...)

Il sera impossible d'avoir un 6 sans avoir acccompli les 4 tâches.

Exercice alternatif pour experts

  1. Vous devez compléter une home page légère sur TECFA
  2. Choisissez parmi les thèmes suivants
  3. Faire un rapport très court (pour qu'on aie une trace)

Autres exercices de la même période

Activités en salle de classe

Rappel (X)HTML

Design, style et couleurs

Initiation à 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
  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
Couleurs
  • contenus obligatoires: RGB et HSL
  • (liens)
Design

Configuration de Firefox

Voir:

Exemples, outils et autres infos

Exemples CSS

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). Sinon, Kompozer a un éditeur CSS.

Outils en ligne:

Autres articles edutechwiki anglais sur Internet et HTML:

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_1_(Nestor-Pixel)&oldid=13740 »