« 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
 
(9 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic_archive}}
== Exercice 1 ==


Cet exercice vous permet:
== Sciences et Technologies de l'information et de la communication ==
* d'apprendre un peu de [[XHTML]] (si vous ne connaissez pas déjà)
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
* d'apprendre un peu de [[CSS]] et de "web design"
Plan de cours, promotion "Pixel 2009-2010", [http://tecfaetu.unige.ch/maltt/ Master of Science in Learning and Teaching Technologies] (MALTT). '''Ce programme "Pixel 2009-2010"''' est encore sous préparation, mais ressemblera au programme "Oda". Une différence visible concernera le matériel d'enseignement (plutôt des tutoriels de EduTechWiki Anglais que des transparents ....)
* de réfléchir comment organiser un petit site


Cet exercice est "hors sujet" par rapport à la thématique de ce cours, mais vous permet de consolider les sujets abordés dans [http://tecfax.unige.ch/moodle/course/category.php?id=16 l'atelier d'initation] (''login required'')
[[Utilisateur:Daniel K. Schneider|Daniel K. Schneider]] avec [http://tecfa.unige.ch/perso/morands/ Stéphane Morand]


=== Tâche ===
Le domaine STIC (Sciences et Technologies de l'information et de la communication) comprend deux cours obligatoires: STIC-1 et [[STIC:STIC_II|STIC-II]] plus une UF libre (STIC-III). Les deux cours obligatoires traitent des bases techniques des systèmes d'information et de communication médiatisés par ordinateur. Elles permettent d'abord de concevoir des documents pour réaliser un système d'information partagé (XHTML, XML, XSLT, SVG), de s'initier aux applications interactives sur Internet (PhP, JavaScript) et de se familiariser avec les logiciels et les environnements qui supportent une interaction personne-personne à travers un réseau de communication (portails, groupewares et mondes virtuels).


(1) '''Faites votre "home page" à TECFA'''
En d'autres termes, il s'agit surtout d'une introduction aux [[:en:web application|"web applications"]], et particulièrement dans le domaine de l'éducation. Cet enseignement est donc très technique: les participants vont apprendre les outils informatiques de base (y compris une petite initiation à la programmation). Mais ce cours comporte également des aspects théoriques et conceptuels qui seront surtout abordés au travers d'une lecture individuelle.


La "home page" sera accessible par l’URL
=== Stic I: Formats Internet et sensibilisation applications Web ===
http://tecfaetu.unige.ch/perso/maltt/''votre login''/  
* HTML avancé (pages interactives, CSS, modèles de couleurs, etc.);
Par exemple:  
* XML de base (DTD, XSLT de base, XPATH);
http://tecfaetu.unige.ch/perso/maltt/ardiri6/
* langages du XML Framework (XSLT, XSL/FO, RDF, SVG, etc.)
* graphismes vectoriels interactifs et animés avec SVG / X3D
* Formats pédagogiques et formats de documentation (DocBook, e-books) etc.
* Introduction au “scripting server-side”, langage: PHP;
 
=== Stic II: Applications Web et suite de formats internet ===
* concepts de base de la programmation, langages: PHP et Javascript;
* introduction aux bases de données SQL sur Internet, système MySQL;
* suite au “scripting server-side”, langage: PHP;
* introduction à la programmation “GUI” (user interfaces), langage: Javascript;
* Le DOM
Voir [[STIC:STIC_II|STIC-II]]
 
== Plan période 1 ==
 
Regardez chaque page exercice pour plus de détails (y compris tous les matériaux d'enseignement)
 
=== Web Design, HTML et CSS ===
* Design de simples sites et panorama de "home pages" à TECFA
* Rappel: Principes de HTML et de XHTML
* Rappel: Utilisation de services Internet pour la création d'un site
* CSS pour (X)HTML
* Couleurs
* Traitement (minimal) d'images
 
=== Introduction à XML ===
* Introduction technique à XML
* Sensibilisation à XSLT (XML -> HTML)
* CSS pour XML
 
=== Liste d'exercices ===
 
(à rendre avant la période 2, c.a.d lundi 9h de la semaine présentielle)
 
* [[:STIC:STIC I - exercice 1 (Nestor-Pixel) | Exercice 1]] (Webdesign, HTML + CSS, images, couleurs)
* [[:STIC:STIC I - exercice 2 (Nestor-Pixel) | Exercice 2]] (XML, Edition + création de DTD + XSLT)
* [[:STIC:STIC I - exercice 3 (Nestor-Pixel) | Exercice 3]] (Page travaux, utiliser XML + modifier XSLT)
 
== Plan période 2 ==
 
=== Introduction à XML (suite) ===
 
On abordera ce thème d'abord par une petite discussion des exercices 2 et 3.
 
* DTD (suite)
* Autres grammaires: XML Schema et Relax NG
* XSLT (suite)
 
=== Applications XML ===
 
* Formats pédagogiques: IMS CP, SCORM 1.2, IMS LD, SCORM 2004.
* Introduction à SVG
* Autres formats vectoriels: Flash, SMIL, X3D
 
=== Activités et exercices ===
 
* [[STIC:STIC I - exercice 4 (Nestor-Pixel) | Exercice 4]] (IMS CP/SCORM 1.2)
* [[STIC:STIC I - exercice 5 (Nestor-Pixel) | Exercice 5]] (SVG)
* [[STIC:STIC I - exercice 6 (Nestor-Pixel) | Exercice 6]] (exercice 2 - version 2)
 
== Plan période 3 ==
 
=== Introduction server-side scripting ===
 
* Les formulaires HTML
* Introduction à PHP
 
=== Introduction à Learning design ===
* Principe (on verra plus de détails dans STIC II)
* Utilisation d'un outil de conception
* Implémentation d'une séquence LAMS
 
=== Activités et exercices ===
(Programme Pixel !)
 
Le dernier délai pour la remise des notes est le vendredi 12 février 2010. Il me faudrait avoir les travaux au moins une semaine en avant (mercredi 10 février minuit).
 
* [[STIC:STIC I - exercice 7 (Nestor-Pixel) | Exercice 7]] (Formulaires HTML/PHP)
* [[STIC:STIC I - exercice 8 (Nestor-Pixel) | Exercice 8]] (Design avec CompendiumLD / Implémentation avec LAMS)
* [[STIC:STIC I - exercice 9 (Nestor-Pixel) | Exercice 9]] (Installation et configuration d'une application PHP)
 
== Formats des travaux, evaluation et assistance ==


Exemple de nom correct du fichier d'entrée: '''welcome.html''', '''welcome.htm''', '''index.html''', ou '''index.htm'''.
Les travaux vous amèneront à acquérir les bases techniques et conceptuelles pour la réalisation de dispositifs en ligne.
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.  
L'évaluation des étudiants se fera essentiellement par ce biais.


Pour savoir où mettre votre home page, consultez notre serveur LDAP (votre home page y est indiquée):
En règle générale, un exercice comprend '''trois composants''':
* [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]
# Un ou plusieurs dispositifs informatiques. Un dispositif doit répondre à certains objectifs et viser un public cible (que vous définissez). Il doit fonctionner sur les plans techniques et ergonomiques. Il doit répondre à un petit cahier des charges en rapport avec une thématique «MALTT».
# Un rapport qui décrit votre démarche
# Une participation à ce wiki
Pour obtenir une note maximale il est indispensable de fournir un bon travail conceptuel et de ne pas négliger les 2 composants d'écriture.


Par SFTP:
=== Que faire si vous maîtrisez déjà un sujet ? ===
tecfaetu.unige.ch
/web/perso/maltt/''votre login''/


(2) '''Faites une autre home page sur un service qui permet de créer des sites'''
* Ceux/celles qui ont des bonnes compétences techniques et qui maîtrisent déjà le sujet peuvent faire un exercice de substitution qui consiste à rédiger un tutoriel dans EduTechWiki français ou anglais. Me contacter !


Voici une liste de services que l'on suggère:
=== Espace travaux ===
* 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'''
En règle générale, je vous demande de placer vos travaux dans des répertoires précis. Dans tous les cas, un travail doit toujours être accompagné d'une page d'accueil et qui comprend le rapport.


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/
Voici le schéma à utiliser pour la page d'accueil / rapport
# 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 !
/etu-maltt/oda/''login''/stic/exXX/
# Renommez le fichier ENLEVERwelcome.xml en welcome.xml
Par exemple:
# Lancez un éditeur XML et ouvrez ce fichier "welcome.xml"
/etu-maltt/oda/dupont/stic/ex1/welcome.html
# 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.
ou
# Si vous travaillez en local (par ex chez vous), une fois terminé, il faut transférer tous les fichiers avec FTP dans votre espace Travaux.
/etu-maltt/oda/duran/stic/ex4/welcome.php
# 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/pixel/votre login/
Il est donc obligatoire d'utiliser un fichier que le serveur Web reconnaît comme “index”
# 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:
:Machine: '''tecfaetu.unige.ch'''
* La page XML doit être valide.
:Répertoire web: '''/web/etu-maltt/pixel/''login''/stic/ex''..'''''
* 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'''
Important: '''Chaque page''' déposée sur notre serveur doit être datée et signée avec votre page travail ou encore votre home page !
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.


=== Contraintes ===
Consultez aussi les instructions en ce qui concerne votre “espace travaux” sur le WWW.
http://tecfa.unige.ch/tecfa/teaching/staf10/survival.html


* Vous devez vous fixer des objectifs en ce qui concerne sa fonction, son design etc. et les réaliser (en parler dans le rapport).
=== Assistance ===
* 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 ===
Pour chaque exercice, utilisez '''la page discussion associée à chaque page'''
Voici les éléments les plus importants qui doivent figurer dans la page d'accueil / rapport:


* Titre, auteur et date
Procédure:
* Le résulat:  
* Cliquez sur le "tab" discussion en haut de la page
** Lien vers la homepage TECFA
* Pour ajouter un nouveau sujet, cliquez sur le "+"
** Lien vers la page externe
* Pour répondre à un sujet, éditez la section en question.
** 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 ===
=== Evaluation ===


; Facteurs les plus importants:
'''Règles générales pour la promotion "Pixel":'''
# Résultat selon vos objectifs explicités dans le rapport (!!)
# Ergonomie générale des sites, y compris la navigation entre pages si vous en utilisez plusieurs
# 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)
; Bonus:
# Utilisation créative de CSS
# 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.
# Vous seriez principalement évalués sur travaux. Vous devez rendre tous les exercices, c.a.d. 9 exercices pour STIC I et 9 pour STIC II. Il faut les rendre dans les délais indiqués (normalement avant le début de la période suivante) et tout retard non justifié sera pénalisé (demandez un délai si vous avez des arguments).
# La plupart des exercices consiste à faire un dispositif. Il sera évalué selon les critères indiqués dans chaque exercice.
# Pour chaque exercice vous pouvez  en règle générale gagner (ou perdre) 0.5 points pour la participation active dans le wiki (en dehors des pages cours). Pour nous permettre de trouver vos contributions,  indiquez dans votre home page wiki et dans le rapport de chaque exercice vos additions dans les deux wikis (en et fr).
# Finalement vous pouvez gagner un petit bonus pour une participation active dans les forums (assistance à vos collègues). Ce bonus sera attribué à la fin de chaque cours.
# Chaque page déposée sur notre serveur doit être datée et signée et elle doit se trouver à l'endroit indiqué (1/2 point de pénalité) !


=== Exercice alternatif pour experts ===
'''Barèmes'''


# Vous devez compléter une home page légère sur TECFA (elle ne sera pas évaulée) et remplir la page travail
(voir aussi les critères d'évaluation annoncés pour chaque exercice)
# 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 ===
* Une note de 5.5 correspond à un travail "parfait" (sur un plan technique et conceptuel) mais sans originalité particulière. Pour avoir un 6 il faut ajouter une haute dose d'originalité plus un rapport qui correspond aux normes académiques.
*[[:STIC:STIC I - exercice 2 | Exercice 2]]
* Une note de 5 correspond à un travail qui satisfait globalement aux attentes et a donc atteint les objectifs fixés (1 crédit = 30h de travail apprenant).
*[[:STIC:STIC I - exercice 3 | Exercice 3]]
* Une note de 4 correspond à un travail minimaliste (copier/coller, peu de contenu, code cassé, etc.).
* Une note de 3 (ou moins) correspond à un travail insuffisant
* Une note de 2 est donné pour un travail très inachevé
* Une note de 0 sera donné pour un travail non rendu


== Activités en salle de classe ==
'''Retards et travaux non rendus'''


Ces activités ont été faites dans l'atelier d'initiation. On rappellera juste les principes ....
Tout travail inachevé ou en retard peut être rendu hors délais mais sa note n'excédera pas 5 (1 point de pénalité) afin de ne pas pénaliser les étudiant(e)s ayant fait l'effort de respecter l'échéancier.  


=== Rappel (X)HTML ===
A la fin du cours, '''une semaine avant la fin de la période officielle d'examens''', tout travail non-rendu (c.a.d. absent du répertoire de travaux) obtiendra '''la note de zéro'''.


* [http://tecfa.unige.ch/guides/tie/pdf/files/xhtml-intro.pdf xhtml-intro (PDF)] (transparents)
'''Sources et utilisation d'autres matériaux'''
* [[: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)
Pour vos exercices, vous avez le droit de reprendre des idées et des bouts de code, mais '''vous devez indiquer la source''' (nom de l'auteur + URL) à la fois dans votre code et dans votre rapport et indiquer ce que vous avez modifié. Il n'est pas autorisé de rendre un travail fait par quelqu'un d'autre "tel quel". Vous devez apporter une contribution propre.
* Installation de [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] (si c'est pas encore fait)


=== Design, style et couleurs ===
Dans certains exercices, vous avez le droit d'utiliser des fragments de code que vous ne comprenez pas, par exemple des classes PHP ou des librairies JavaScript, mais à condition de l'indiquer clairement !


* Design d'un petit dispositif: http://tecfa.unige.ch/guides/tie/html/www-design-intro/www-design-intro.html
'''Le plagiat (utilisation de matériaux non cités) sera puni'''. Rendre un travail fait par quelqu'un d'autre sera puni sévèrement, c.a.d. une note de zéro pour l'exercice en question. En outre, pour les cas sévères de plagiat, on se réserve d'autres actions disciplinaires.
* http://www.csszengarden.com/ (discussion de qqs. exemples)
* [[:en:Computer colors tutorial]]
* Utilisation de [https://addons.mozilla.org/en-US/firefox/addon/60 webdeveloper] pour Firefox pour analyser un CSS


=== Initiation à CSS ===
Finalement, je me réserve le droit de vous interroger sur la provenance de code et d'autres matériaux utilisés et de tester vos connaissances par d'autres moyens en cas de soupçon. A priori je vous fais confiance, mais un étudiant qui démontre une très faible connaissance technique en classe et en même temps rend des travaux de haute qualité technique risque une interrogation sur la provenance du travail.


* [http://tecfa.unige.ch/guides/tie/pdf/files/css-intro.pdf css-intro (PDF)] (transparents)
'''Conseils pour avoir une bonne note'''
* [[tutoriel CSS]] (pour relire)
* Visite de http://www.csszengarden.com/
* Demo [http://tecfa.unige.ch/guides/css/ex/boxing0.html CSS positioning]


=== Code exemple ===
Faites attention à bien lire l'énoncé et n'oubliez pas le rapport ! C'est le produit (dispositif + page d'accueil/rapport + contribution wiki) qui sera évalué (ni vos efforts ni vos connaissances en informatique). Placer des fichiers à des mauvais endroits entraînera une pénalité !


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]
On vous demande également de fournir un effort conceptuel qui dépasse l'exercice technique. Vous avez même la possibilité de «revendre» un dispositif fait pour STIC dans un des autres cours et inversement. Il faut simplement respecter les contraintes énoncées des 2 côtés.


<source lang="xml">
'''Rattrapage pour la séance de septembre'''
<?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>
Ceux qui ont eu une note insuffisante peuvent selon le règlement se présenter à la séance de rattrapage à la fin du semestre d'été. Vous avez le droit de rendre mêmes exercices, mais avec la une pénalité de retard de 1pt pour chaque exercices en retard.


    <h1>Titre principal</h1>
Les étudiants qui refont le cours l'année prochaine ont le droit de présenter ou de reprendre/compléter des exercices faites l'année précédente, mais uniquement avec mon autorisation !
    <p>Votre texte. Votre texte. Votre texte.</p>
    <blockquote>Une citation</blockquote>
<hr/>


<a href="http://validator.w3.org/check/referer">Valid HTML</a>
; Calcul de la note finale
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a>


</body>
Pondérations pour le calcul de la note finale
</html>
Note finale = '''moyenne des 9 exercices''' + '''petit bonus participation en ligne'''
</source>


Il n'y a donc pas d'examen. Toutefois il existe la possibilité de discuter le bilan de votre travail à tout moment ou à la fin des cours. Il s'agira aussi de la dernière occasion pour mettre en cause une note injustifiée (par rapport aux autres).


Code [http://tecfa.unige.ch/guides/css/ex/css-template.css du fichier CSS] utilisé avec la page ci-dessus
== Feedback / Corrections ==


<source lang="CSS">
Le feedback sera disponible dans Moodle (cours STIC I/STICII). Le module Moodle est uniquement ouvert aux participants et ne contient que les évaluations (feedback et notes).
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}
== Conseils ==


p  {
* Tenez-vous au courant. Regardez la page "discussion" pour chaque exercice avant de vous lancer ... et participez ! Abonnez-vous aux fils RSS des pages discussion ou faites vous envoyer un mail par le wiki (cliquer sur "suivre" en haut à droite).
    margin-left: 2em;
* Lisez soigneusement les instructions sur cette page et celles qui sont données pour chaque exercice. Notamment, soyez sûr(e)s:
    text-align:justify;
** de comprendre la tâche
    font-family: Arial, serif ;
** de poser les fichiers au bon endroit (commencez tôt!)
    font-size: 12pt
** de faire l'inventaire des outils que vous pouvez utiliser
    }
** d'explorer les ressources mises à disposition
* Planning
** Faites toujours un petit exercice avant de vous lancer dans vos mini-projets (par ex. finir ce qu'on a commencé en salle de classe !)
** Ensuite, étudiez plusieurs exemples !
** Ensuite, faites un schéma qui résume vos objectifs et qui comprend une idée de votre design (différent selon la tâche)
* Evitez de faire trop de "tourisme google" ! La plupart de l'information nécessaire se trouve dans les transparents, les textes indiqués comme lecture obligatoire et dans les exemples.
* Soyez organisés. Pas de b****l sur vos disques durs ni sur nos serveurs. Faites un planning pour tous les cours (par ex. avec un petit gestionnaire de tâches) !
* Apprenez les outils (Wiki, éditeurs etc.) et minimisez la complexité de vos projets si vous avez l'impression d'être débordé(e).


blockquote  {
== Ressources ==
    margin-left: 4em;
    text-align:justify;
    font-style:italic;
    font-family: Arial, serif ;
    font-size: 11pt
    }
</source>


== Ressources ==
; Edutechwiki français (peu d'entrées, donc ce wiki)
: [[Fichier de commande]]
: [[:Catégorie:Technologies | Catégorie Technologies]]
: [[:Catégorie:Technologies éducatives | Catégorie Technologies éducatives]]
 
; Edutechwiki anglais, par exemple
: [http://edutechwiki.unige.ch/en/Category:Technologies La catégorie technologies]
: [http://edutechwiki.unige.ch/en/Category:Educational_technologies La catégorie educational technologies]
 
; Très anciens travaux (Staf 14)
: http://tecfa.unige.ch/tecfa/teaching/staf14/


=== Transparents ===
== Liste de logiciels ==
(à titre indicatif, veuillez consulter chaque exercice).


; Transparents
Vous pouvez installer ces logiciels au fur et à mesure quand vous en avez besoin. Au début du cours il faut un éditeur XML et un éditeur de programmation.
# 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 ===
; Système et réseau
* [http://java.sun.com/ Java 6 SDK] (attention, il faut "SDK" pas juste le "JRE", sinon n'importe quelle version fait l'affaire, on conseille "JDK 6 Update 16 with Java EE" ou plus récent)
* [http://www.winscp.com/ winscp] ou un autre FTP sécurisé
* Un progromme de zip/unzip. On conseille [http://www.7-zip.org/ 7zip]


; HTML
; Navigateurs
* [[:en:HTML and XHTML elements and attributes]] '''contenus obligatoires'''
* [http://www.mozilla.com/ Firefox]
* [[:en:HTML_links|HTML links]]  (edutechwiki anglais)
* [http://www.opera.com/ Opera]
* [[HTML]] (pour le moment sans bcp de liens !)
* [[:en:HTML]]
* [[:en:XHTML|XHTML]]


; CSS
; Plugins navigateurs
* [[Tutoriel CSS]] '''contenus obligatoires'''
* Voir [[en:Browser extensions]] ou [[Extension Firefox]]. Vous pouvez les installer au fur et à mesure ...
* [[:en:CSS tutorial]] '''contenus obligatoires''' (similaire à la version française)
* [[:en:CSS_links|CSS links]] (beaucoup de liens, edutechwiki anglais)
* [[:en:CSS]]
* [[Liens CSS]] (assez vide pour le moment)


; Couleurs
; Editeurs HTML (pour écrire des rapports)
* [[:en:Computer colors tutorial]] '''contenus obligatoires''': RGB et HSL
* [http://www.kompozer.net/ Kompozer]
* [[:en:Color]] (liens)


; Design
; Editeur XML
* [[:en:Web_design_links|Web design links]] (liens dans edutechwiki anglais)
* [http://www.freexmleditor.com/ Exchanger XML Lite V3.2]
* Sinon, consultez [[:en:XML editor]] pour d'autres alternatives.


=== Configuration de Firefox ===
; Editeurs de programmation
* [http://www.pspad.com PSPad]
* [http://notepad-plus.sourceforge.net/ Notepad++] (alternative à PSPad)
* Emacs et Xemacs (à option)
** [ftp://sunsite.cnlab-switch.ch/mirror/gnu/emacs/windows/ Emacs download]
** [[:en:Emacs|Emacs]] (Edutechwiki en)


Voir:
; Editeurs learning objects
* [[Extension Firefox]]
* [http://exelearning.org/ eXe] eLearning XHTML editor
* [[:en:Browser extension]]
** [[eXe]] (description dans Edutechwiki)
* [http://www.reload.ac.uk/editor.html Reload]
** [[Reload Editor]] (edutech wiki)
* [http://www.tencompetence.org/ldauthor/ TENCompetence Learning Design Editor (ReCourse)]


=== Exemples, outils et autres infos ===
; Manipulation d'images
* [http://www.gimp.org/ Gimp]
** [http://www.gimp.org/windows/ Gimp for windows] (download for Win)


Exemples CSS
; Graphisme vectoriel
* http://www.csszengarden.com/
* [http://www.inkscape.org/ Inkscape] (programme de dessin utilisant SVG come format)
* [http://developer.vivaty.com/ Vivaty Studio] (programme de dessin X3D)


Editeurs - A votre choix:
; Server web
* On vous conseille d'utiliser XML Exchanger Lite pour éditer XHTML car vous allez le réutiliser pour les exercices XML.
* [http://www.wampserver.com/ WampServer] Serveur Apache/PHP/MySQL
** http://www.freexmleditor.com/ C.f. l'exerice 2 pour l'install sur VISTA
* [http://www.chsoftware.net/ MoWes Portable] (ancien WOS). Pour ceux qui veulent faire tourner le serveur sur une clef USB uniquement]
** http://java.com/ (télécharger Java si c'est pas installé sur votre machine)
** Lire [[:en:WAMP|WAMP]] pour une petite introduction (edutechwiki en)
* Pour CSS, prenez un simple éditeur (même Exchanger peut faire l'affaire). Sinon, Kompozer a un éditeur CSS.


Outils en ligne:
; Exemples
* [[:en:List of web 2.0 applications]]
* Voir les [http://tecfa.unige.ch/tecfa-people/tecfa-people.html pages travaux] des anciennes promotions
* [http://tecfa.unige.ch/tecfa/teaching/staf14/bestof.html Exemples de dispositifs Internet] (XHTML, XML, Javascript, PHP, VRML, etc.) développés par les étudiants dans le cadre des cours STAF-14


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


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

Dernière version du 21 novembre 2011 à 19:12

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

Sciences et Technologies de l'information et de la communication

Plan de cours, promotion "Pixel 2009-2010", Master of Science in Learning and Teaching Technologies (MALTT). Ce programme "Pixel 2009-2010" est encore sous préparation, mais ressemblera au programme "Oda". Une différence visible concernera le matériel d'enseignement (plutôt des tutoriels de EduTechWiki Anglais que des transparents ....)

Daniel K. Schneider avec Stéphane Morand

Le domaine STIC (Sciences et Technologies de l'information et de la communication) comprend deux cours obligatoires: STIC-1 et STIC-II plus une UF libre (STIC-III). Les deux cours obligatoires traitent des bases techniques des systèmes d'information et de communication médiatisés par ordinateur. Elles permettent d'abord de concevoir des documents pour réaliser un système d'information partagé (XHTML, XML, XSLT, SVG), de s'initier aux applications interactives sur Internet (PhP, JavaScript) et de se familiariser avec les logiciels et les environnements qui supportent une interaction personne-personne à travers un réseau de communication (portails, groupewares et mondes virtuels).

En d'autres termes, il s'agit surtout d'une introduction aux "web applications", et particulièrement dans le domaine de l'éducation. Cet enseignement est donc très technique: les participants vont apprendre les outils informatiques de base (y compris une petite initiation à la programmation). Mais ce cours comporte également des aspects théoriques et conceptuels qui seront surtout abordés au travers d'une lecture individuelle.

Stic I: Formats Internet et sensibilisation applications Web

  • HTML avancé (pages interactives, CSS, modèles de couleurs, etc.);
  • XML de base (DTD, XSLT de base, XPATH);
  • langages du XML Framework (XSLT, XSL/FO, RDF, SVG, etc.)
  • graphismes vectoriels interactifs et animés avec SVG / X3D
  • Formats pédagogiques et formats de documentation (DocBook, e-books) etc.
  • Introduction au “scripting server-side”, langage: PHP;

Stic II: Applications Web et suite de formats internet

  • concepts de base de la programmation, langages: PHP et Javascript;
  • introduction aux bases de données SQL sur Internet, système MySQL;
  • suite au “scripting server-side”, langage: PHP;
  • introduction à la programmation “GUI” (user interfaces), langage: Javascript;
  • Le DOM

Voir STIC-II

Plan période 1

Regardez chaque page exercice pour plus de détails (y compris tous les matériaux d'enseignement)

Web Design, HTML et CSS

  • Design de simples sites et panorama de "home pages" à TECFA
  • Rappel: Principes de HTML et de XHTML
  • Rappel: Utilisation de services Internet pour la création d'un site
  • CSS pour (X)HTML
  • Couleurs
  • Traitement (minimal) d'images

Introduction à XML

  • Introduction technique à XML
  • Sensibilisation à XSLT (XML -> HTML)
  • CSS pour XML

Liste d'exercices

(à rendre avant la période 2, c.a.d lundi 9h de la semaine présentielle)

Plan période 2

Introduction à XML (suite)

On abordera ce thème d'abord par une petite discussion des exercices 2 et 3.

  • DTD (suite)
  • Autres grammaires: XML Schema et Relax NG
  • XSLT (suite)

Applications XML

  • Formats pédagogiques: IMS CP, SCORM 1.2, IMS LD, SCORM 2004.
  • Introduction à SVG
  • Autres formats vectoriels: Flash, SMIL, X3D

Activités et exercices

Plan période 3

Introduction server-side scripting

  • Les formulaires HTML
  • Introduction à PHP

Introduction à Learning design

  • Principe (on verra plus de détails dans STIC II)
  • Utilisation d'un outil de conception
  • Implémentation d'une séquence LAMS

Activités et exercices

(Programme Pixel !)

Le dernier délai pour la remise des notes est le vendredi 12 février 2010. Il me faudrait avoir les travaux au moins une semaine en avant (mercredi 10 février minuit).

  • Exercice 7 (Formulaires HTML/PHP)
  • Exercice 8 (Design avec CompendiumLD / Implémentation avec LAMS)
  • Exercice 9 (Installation et configuration d'une application PHP)

Formats des travaux, evaluation et assistance

Les travaux vous amèneront à acquérir les bases techniques et conceptuelles pour la réalisation de dispositifs en ligne. L'évaluation des étudiants se fera essentiellement par ce biais.

En règle générale, un exercice comprend trois composants:

  1. Un ou plusieurs dispositifs informatiques. Un dispositif doit répondre à certains objectifs et viser un public cible (que vous définissez). Il doit fonctionner sur les plans techniques et ergonomiques. Il doit répondre à un petit cahier des charges en rapport avec une thématique «MALTT».
  2. Un rapport qui décrit votre démarche
  3. Une participation à ce wiki

Pour obtenir une note maximale il est indispensable de fournir un bon travail conceptuel et de ne pas négliger les 2 composants d'écriture.

Que faire si vous maîtrisez déjà un sujet ?

  • Ceux/celles qui ont des bonnes compétences techniques et qui maîtrisent déjà le sujet peuvent faire un exercice de substitution qui consiste à rédiger un tutoriel dans EduTechWiki français ou anglais. Me contacter !

Espace travaux

En règle générale, je vous demande de placer vos travaux dans des répertoires précis. Dans tous les cas, un travail doit toujours être accompagné d'une page d'accueil et qui comprend le rapport.

Voici le schéma à utiliser pour la page d'accueil / rapport

/etu-maltt/oda/login/stic/exXX/

Par exemple:

/etu-maltt/oda/dupont/stic/ex1/welcome.html

ou

/etu-maltt/oda/duran/stic/ex4/welcome.php

Il est donc obligatoire d'utiliser un fichier que le serveur Web reconnaît comme “index”

Machine: tecfaetu.unige.ch
Répertoire web: /web/etu-maltt/pixel/login/stic/ex..

Important: Chaque page déposée sur notre serveur doit être datée et signée avec votre page travail ou encore votre home page !

Consultez aussi les instructions en ce qui concerne votre “espace travaux” sur le WWW. http://tecfa.unige.ch/tecfa/teaching/staf10/survival.html

Assistance

Pour chaque exercice, utilisez la page discussion associée à chaque page

Procédure:

  • Cliquez sur le "tab" discussion en haut de la page
  • Pour ajouter un nouveau sujet, cliquez sur le "+"
  • Pour répondre à un sujet, éditez la section en question.

Evaluation

Règles générales pour la promotion "Pixel":

  1. Vous seriez principalement évalués sur travaux. Vous devez rendre tous les exercices, c.a.d. 9 exercices pour STIC I et 9 pour STIC II. Il faut les rendre dans les délais indiqués (normalement avant le début de la période suivante) et tout retard non justifié sera pénalisé (demandez un délai si vous avez des arguments).
  2. La plupart des exercices consiste à faire un dispositif. Il sera évalué selon les critères indiqués dans chaque exercice.
  3. Pour chaque exercice vous pouvez en règle générale gagner (ou perdre) 0.5 points pour la participation active dans le wiki (en dehors des pages cours). Pour nous permettre de trouver vos contributions, indiquez dans votre home page wiki et dans le rapport de chaque exercice vos additions dans les deux wikis (en et fr).
  4. Finalement vous pouvez gagner un petit bonus pour une participation active dans les forums (assistance à vos collègues). Ce bonus sera attribué à la fin de chaque cours.
  5. Chaque page déposée sur notre serveur doit être datée et signée et elle doit se trouver à l'endroit indiqué (1/2 point de pénalité) !

Barèmes

(voir aussi les critères d'évaluation annoncés pour chaque exercice)

  • Une note de 5.5 correspond à un travail "parfait" (sur un plan technique et conceptuel) mais sans originalité particulière. Pour avoir un 6 il faut ajouter une haute dose d'originalité plus un rapport qui correspond aux normes académiques.
  • Une note de 5 correspond à un travail qui satisfait globalement aux attentes et a donc atteint les objectifs fixés (1 crédit = 30h de travail apprenant).
  • Une note de 4 correspond à un travail minimaliste (copier/coller, peu de contenu, code cassé, etc.).
  • Une note de 3 (ou moins) correspond à un travail insuffisant
  • Une note de 2 est donné pour un travail très inachevé
  • Une note de 0 sera donné pour un travail non rendu

Retards et travaux non rendus

Tout travail inachevé ou en retard peut être rendu hors délais mais sa note n'excédera pas 5 (1 point de pénalité) afin de ne pas pénaliser les étudiant(e)s ayant fait l'effort de respecter l'échéancier.

A la fin du cours, une semaine avant la fin de la période officielle d'examens, tout travail non-rendu (c.a.d. absent du répertoire de travaux) obtiendra la note de zéro.

Sources et utilisation d'autres matériaux

Pour vos exercices, vous avez le droit de reprendre des idées et des bouts de code, mais vous devez indiquer la source (nom de l'auteur + URL) à la fois dans votre code et dans votre rapport et indiquer ce que vous avez modifié. Il n'est pas autorisé de rendre un travail fait par quelqu'un d'autre "tel quel". Vous devez apporter une contribution propre.

Dans certains exercices, vous avez le droit d'utiliser des fragments de code que vous ne comprenez pas, par exemple des classes PHP ou des librairies JavaScript, mais à condition de l'indiquer clairement !

Le plagiat (utilisation de matériaux non cités) sera puni. Rendre un travail fait par quelqu'un d'autre sera puni sévèrement, c.a.d. une note de zéro pour l'exercice en question. En outre, pour les cas sévères de plagiat, on se réserve d'autres actions disciplinaires.

Finalement, je me réserve le droit de vous interroger sur la provenance de code et d'autres matériaux utilisés et de tester vos connaissances par d'autres moyens en cas de soupçon. A priori je vous fais confiance, mais un étudiant qui démontre une très faible connaissance technique en classe et en même temps rend des travaux de haute qualité technique risque une interrogation sur la provenance du travail.

Conseils pour avoir une bonne note

Faites attention à bien lire l'énoncé et n'oubliez pas le rapport ! C'est le produit (dispositif + page d'accueil/rapport + contribution wiki) qui sera évalué (ni vos efforts ni vos connaissances en informatique). Placer des fichiers à des mauvais endroits entraînera une pénalité !

On vous demande également de fournir un effort conceptuel qui dépasse l'exercice technique. Vous avez même la possibilité de «revendre» un dispositif fait pour STIC dans un des autres cours et inversement. Il faut simplement respecter les contraintes énoncées des 2 côtés.

Rattrapage pour la séance de septembre

Ceux qui ont eu une note insuffisante peuvent selon le règlement se présenter à la séance de rattrapage à la fin du semestre d'été. Vous avez le droit de rendre mêmes exercices, mais avec la une pénalité de retard de 1pt pour chaque exercices en retard.

Les étudiants qui refont le cours l'année prochaine ont le droit de présenter ou de reprendre/compléter des exercices faites l'année précédente, mais uniquement avec mon autorisation !

Calcul de la note finale

Pondérations pour le calcul de la note finale Note finale = moyenne des 9 exercices + petit bonus participation en ligne

Il n'y a donc pas d'examen. Toutefois il existe la possibilité de discuter le bilan de votre travail à tout moment ou à la fin des cours. Il s'agira aussi de la dernière occasion pour mettre en cause une note injustifiée (par rapport aux autres).

Feedback / Corrections

Le feedback sera disponible dans Moodle (cours STIC I/STICII). Le module Moodle est uniquement ouvert aux participants et ne contient que les évaluations (feedback et notes).

Conseils

  • Tenez-vous au courant. Regardez la page "discussion" pour chaque exercice avant de vous lancer ... et participez ! Abonnez-vous aux fils RSS des pages discussion ou faites vous envoyer un mail par le wiki (cliquer sur "suivre" en haut à droite).
  • Lisez soigneusement les instructions sur cette page et celles qui sont données pour chaque exercice. Notamment, soyez sûr(e)s:
    • de comprendre la tâche
    • de poser les fichiers au bon endroit (commencez tôt!)
    • de faire l'inventaire des outils que vous pouvez utiliser
    • d'explorer les ressources mises à disposition
  • Planning
    • Faites toujours un petit exercice avant de vous lancer dans vos mini-projets (par ex. finir ce qu'on a commencé en salle de classe !)
    • Ensuite, étudiez plusieurs exemples !
    • Ensuite, faites un schéma qui résume vos objectifs et qui comprend une idée de votre design (différent selon la tâche)
  • Evitez de faire trop de "tourisme google" ! La plupart de l'information nécessaire se trouve dans les transparents, les textes indiqués comme lecture obligatoire et dans les exemples.
  • Soyez organisés. Pas de b****l sur vos disques durs ni sur nos serveurs. Faites un planning pour tous les cours (par ex. avec un petit gestionnaire de tâches) !
  • Apprenez les outils (Wiki, éditeurs etc.) et minimisez la complexité de vos projets si vous avez l'impression d'être débordé(e).

Ressources

Edutechwiki français (peu d'entrées, donc ce wiki)
Fichier de commande
Catégorie Technologies
Catégorie Technologies éducatives
Edutechwiki anglais, par exemple
La catégorie technologies
La catégorie educational technologies
Très anciens travaux (Staf 14)
http://tecfa.unige.ch/tecfa/teaching/staf14/

Liste de logiciels

(à titre indicatif, veuillez consulter chaque exercice).

Vous pouvez installer ces logiciels au fur et à mesure quand vous en avez besoin. Au début du cours il faut un éditeur XML et un éditeur de programmation.

Système et réseau
  • Java 6 SDK (attention, il faut "SDK" pas juste le "JRE", sinon n'importe quelle version fait l'affaire, on conseille "JDK 6 Update 16 with Java EE" ou plus récent)
  • winscp ou un autre FTP sécurisé
  • Un progromme de zip/unzip. On conseille 7zip
Navigateurs
Plugins navigateurs
Editeurs HTML (pour écrire des rapports)
Editeur XML
Editeurs de programmation
Editeurs learning objects
Manipulation d'images
Graphisme vectoriel
Server web
  • WampServer Serveur Apache/PHP/MySQL
  • MoWes Portable (ancien WOS). Pour ceux qui veulent faire tourner le serveur sur une clef USB uniquement]
    • Lire WAMP pour une petite introduction (edutechwiki en)
Exemples