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

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
Ligne 8 : Ligne 8 :
=== Tâche ===
=== Tâche ===


* Faites votre "home page" à TECFA plus un rapport
(1) '''Faites votre "home page" à TECFA'''


La "home page" sera accessible par l’URL  
La "home page" sera accessible par l’URL  
  http://tecfa.unige.ch/perso/maltt/''votre login''/  
  http://tecfaetu.unige.ch/perso/maltt/''votre login''/  
Par exemple:  
Par exemple:  
  http://tecfa.unige.ch/perso/maltt/ott/
  http://tecfaetu.unige.ch/perso/maltt/ott/
Exemple de nom correct du fichier d'entrée: welcome.html welcome.htm index.html welcome.php ...
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):
Pour savoir où mettre votre home page, consultez notre serveur LDAP (votre home page y est indiquée):
* [http://tecfa.unige.ch/tecfa/ldap/dir/ldap-form.php?givenname=&sn=&namematch=first&personcategory=&title=&&studentstatus=active1&ou=all&name_p=on&uid_p=on&std_url_p=on&studentinfo_p=on&disp_style=table&form_input=Submit&h_title=Etudiants+1ere+annee Etudiants 1ère année]
* [http://tecfa.unige.ch/tecfa/ldap/dir/ldap-form.php?givenname=&sn=&namematch=first&personcategory=&title=&&studentstatus=active1&ou=all&name_p=on&uid_p=on&std_url_p=on&studentinfo_p=on&disp_style=table&form_input=Submit&h_title=Etudiants+1ere+annee Etudiants 1ère année]


Par FTP:
Par FTP:
  tecfa.unige.ch
  tecfaetu.unige.ch
  /web/perso/maltt/''votre login''/
  /web/perso/maltt/''votre login''/


Le rapport est à placer ici (vue FTP):
(2) '''Faites une autre home page sur un service qui permet de créer des sites'''
  tecfa.unige.ch
 
  /web/etu-maltt/nestor/''login''/stic/ex1/
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) '''Faites un rapport'''
Placez leici (vue SFTP):
  tecfaetu.unige.ch
  /web/etu-maltt/pixel/''login''/stic/ex1/
Exemple:
Exemple:
  /etu-maltt/nestor/dupond/stic/ex1/
  /etu-maltt/pixel/dupond/stic/ex1/
Exemple de nom correct du fichier d'entrée: 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.
Exemple de nom correct du fichier d'entrée: 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'''


Note: Prochainement on risque de déménager les pages web étudiants. Ils seront sur la machine tecfatrain.unige.ch
Ajoutez des informations de toute sorte à une des pages utiles pour réussir l'exercice


=== Contraintes ===
=== 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).
* 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 !)  
* La page à TECFA doit être faite en XHTML strict (ni HTML ni XHTML transitional!)  
* Liens vers le les valideurs HTML/CSS du W3C: 
* Liens vers le les valideurs HTML/CSS du W3C (sinon, utilisez des extensions Firefox pour valider)
  http://validator.w3.org/check/referer
  http://validator.w3.org/check/referer
  http://jigsaw.w3.org/css-validator/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 ===
=== Structure du rapport ===
Voici les éléments les plus importants qui doivent figurer dans la page d'accueil / rapport
Voici les éléments les plus importants qui doivent figurer dans la page d'accueil / rapport:


* Titre, auteur et date
* Titre, auteur et date
* Le résulat: Lien vers la homepage, lien vers le fichier CSS utilisé
* Le résulat:  
* Objectifs: A quoi/qui sert le dispositif, quel est le "message" ?
** Lien vers la homepage TECFA
** 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
* La production: '''bref''' résumé de la démarche
* Difficultés, auto-évaluation, remarques
* Difficultés, auto-évaluation, remarques
Ligne 54 : Ligne 70 :
; Facteurs les plus importants:
; Facteurs les plus importants:
# Résultat selon vos objectifs explicités dans le rapport (!!)
# Résultat selon vos objectifs explicités dans le rapport (!!)
# Ergonomie générale, a compris la navigation entre pages
# Ergonomie générale des sites, y compris la navigation entre pages si vous en utilisez plusieurs
# Qualité du rapport
# Qualité du rapport
; Malus:
; Malus:
Ligne 63 : Ligne 79 :
# 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 ...)
# 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 points bonus.
Il sera impossible d'avoir un 6 sans avoir acccompli les 4 tâches.


== Activités en salle de classe ==
== Activités en salle de classe ==


Initiation à CSS
=== Rappel (X)HTML ===


Si vous n'avez pas encore de home page. Voici le code d'un [http://tecfa.unige.ch/guides/css/ex/xhml-template.html page XHTML]
* [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)
 
=== Initiation à CSS ===
 
* [http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf css-intro (PDF)] (transparents)
* Visite de http://www.csszengarden.com/
* Demo [http://tecfa.unige.ch/guides/css/ex/boxing0.html CSS positioning]
 
Si vous n'avez pas encore de home page. Voici le code d'une [http://tecfa.unige.ch/guides/css/ex/xhml-template.html page XHTML]
<pre>
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!DOCTYPE html  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
   <head>
Ligne 84 : Ligne 115 :


     <h1>Titre principal</h1>
     <h1>Titre principal</h1>
     <p>Votre texte. Votre texte. Votre texte.</p>
     <p>Votre texte. Votre texte. Votre texte.</p>
     <blockquote>Une citation</blockquote>
     <blockquote>Une citation</blockquote>
  <hr/>
  <hr/>


Ligne 143 : Ligne 171 :
=== Pages ressources ===
=== Pages ressources ===


Les pages suivantes contiennet des liens que vous pouvez explorer.
; HTML
* [[en:HTML and XHTML elements and attributes]] '''contenus obligatoires'''
* [[:en:HTML_links|HTML links]]  (edutechwiki anglais)
* [[HTML]] (pour le moment sans bcp de liens !)
* [[:en:HTML]]
* [[:en:XHTML|XHTML]]
 
; CSS
* [[CSS]] '''contenus obligatoires'''
* [[:en:CSS tutorial]] '''contenus obligatoires''' (similaire)
* [[:en:CSS_links|CSS links]] (edutechwiki anglais)
* [[:en:CSS]]
* [[Liens CSS]] (assez vide pour le moment)


# [[:en:HTML_links|HTML links]]  (edutechwiki anglais)
; Design
# [[HTML]] (pour le moment sans bcp de liens !)
* [[:en:Web_design_links|Web design links]] (edutechwiki anglais)
# [[:en:CSS_links|CSS links]] (edutechwiki anglais)
# [[Liens CSS]] (assez vide pour le moment)
# [[:en:Web_design_links|Web design links]] (edutechwiki anglais)


=== Configuration de Firefox ===
=== Configuration de Firefox ===


Configuration de Firefox. Il faut absolument installer ces extensions (ou des équivalents)
Voir:
* Webdeveloper:  
* [[Extension Firefox]]
** http://chrispederick.com/work/web-developer/ (page du développeur)
* [[en:Browser extension]]
** https://addons.mozilla.org/en-US/firefox/addon/60
* Googlebar:
** https://addons.mozilla.org/en-US/firefox/addon/33
* CSS Validator:
** 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, outils et autres infos ===
=== Exemples, outils et autres infos ===


Exemples:
Exemples CSS
* http://www.csszengarden.com/
* http://www.csszengarden.com/


Ligne 177 : Ligne 206 :


Outils en ligne:
Outils en ligne:
* [[en:List of web 2.0 applications]]
* [http://www.web2rain.com/ Web2Rain] Une liste d'outils en ligne pour le développement de pages qui font "web 2.0" (si vous avez envie ...)
* [http://www.web2rain.com/ Web2Rain] Une liste d'outils en ligne pour le développement de pages qui font "web 2.0" (si vous avez envie ...)


Articles edutechwiki anglais sur Internet et HTML:
Autres articles edutechwiki anglais sur Internet et HTML:
* [[:en:Internet|Internet]]
* [[:en:Internet|Internet]]
* [[:en:Hypertext_Transfer_Protocol|Hypertext_Transfer_Protocol]]
* [[:en:Hypertext_Transfer_Protocol|Hypertext_Transfer_Protocol]]
* [[:en:World_Wide_Web|World_Wide_Web]]
* [[:en:World_Wide_Web|World_Wide_Web]]
* [[:en:XHTML|XHTML]]


[[Category: STIC]]
[[Category: STIC]]

Version du 24 septembre 2009 à 21:35

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/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):

Par FTP: 

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 Placez leici (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 d'entrée: 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

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

Activités en salle de classe

Rappel (X)HTML

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 et tutoriels

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
Pages wiki
  1. CSS
  2. XHTML (edutechwiki Anglais)

Pages ressources

HTML
CSS
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).

Outils en ligne:

  • Web2Rain Une liste d'outils en ligne pour le développement de pages qui font "web 2.0" (si vous avez envie ...)

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=11278 »