STIC:STIC I (Yoshi)

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

STIC

Archives STIC

Chantier STIC

Initiation à la pensée computationnelle avec JavaScript

Productions STIC

Ressources STIC

STIC:Contribution Wiki

STIC:Rapport STIC I et II

STIC:STIC I (Edda)

STIC:STIC I - Atelier technique 2

STIC:STIC I - exercice 1 (Drakkar)

STIC:STIC I - exercice 1 (Edda)

STIC:STIC I - exercice 2 (Edda)

STIC:STIC I - exercice 3 (Edda)

STIC:STIC I - exercice 4 (Edda)

STIC:STIC I - exercice 5 (Edda)

STIC:STIC I - exercice 6 (Edda)

STIC:STIC III

STIC:STIC III (2022)

STIC:STIC III (2022)/Exploration des Problématiques Liées aux Ponts et Détails

STIC:STIC IV

Sciences et Technologies de l'information et de la communication

Enseignants: Daniel K. Schneider et Mattia A. Fritz avec Stéphane Morand

Plan de cours, promotion Yoshi 2018-2019, Master of Science in Learning and Teaching Technologies (MALTT).

Ce cours fait partie du domaine STIC (Sciences et Technologies de l'information et de la communication). Il comprend deux cours obligatoires: STIC-I et STIC-II plus deux UF libres (STIC-III / STIC-IV).

Objectifs d'apprentissage:

• Créer des sites Web
• Créer des animations et visualisations
• Créer des applications interactives
• Acquérir des notions de base de la programmation (avec JavaScript)
• Participer à un environnement collectif (ce wiki)
• Télécharger, installer et configurer des applications sur PC et sur un serveur Web
• Lire de la documentation technique, chercher et trouver des ressources

Ces deux cours STIC I/II sont complétés par des séances Atelier WebMaster obligatoires, les lundis matin des semaines 2, 3, 5 et 6. On couvrira les sujets suivants:

• Installation et configuration de Apache/PHP/MySQL
• Installation et configuration de portails (e-learning, wikis, etc.)
• Un Projet Webmaster sera évalué dans le cadre du cours STIC II

Pages discussion:

• Liste des derniers messages

Programme

Periode 1

• Exercice 2 Introduction à la pensée computationnelle et à la programmation
• Travaux et grille d'évaluation
• Exercice 1 Webdesign (HTML5/XML, CSS) et identité digitale (page utilisateur Wiki, profiles sur les réseaux sociaux, ...)

Periode 2

• Dispositif et organisation du cours Bases psychopédagogiques des technologies éducatives. Installer IHMC CmapTools si ce n'est pas déjà fait. Voir aussi comment faire des vidéographies et la production de fichiers vidéo pour le web‎‎
• Atelier technique 1 (avec Stéphane Morand)
• Exercice 3 Programmation DOM avec JavaScript
• Exercice 4 Production d'une vidéo annotée et interactive avec HTML5. Standards vidéo pour Internet, Production de vidéographies, Vidéo dans HTML5, Ajout de sous-titres

Periode 3

• STIC:STIC I - Atelier technique 2
• Exercice 5 Drag and drop avec jQuery et jQuery UI
• Exercice 6 Bibliothèques JavaScript

Format et règlement du cours

Ci-dessous on définit le format général des travaux, l'évaluation, règles concernant le plagiat et l'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 pour chaque exercice qui décrit votre démarche, voir le lien suivant pour plus de détails :
   • Rapport STIC I et II
3. Une participation à ce wiki pour chaque période du semestre, voir le lien suivant pour plus de détails :
   • Contribution Wiki obligatoire pour STIC

Que faire si vous maîtrisez déjà un sujet ou toute la matière ?

Ceux/celles qui ont des bonnes compétences techniques et qui maîtrisent déjà le sujet d'un exercice 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/yoshi/login/stic-1/exXX/

Par exemple:

/etu-maltt/yoshi/dupont/stic-1/ex1/welcome.html

ou

/etu-maltt/yoshi/duran/stic-1/ex4/index.html

Il est donc obligatoire d'utiliser un fichier que le serveur Web reconnaît comme “index” (welcome.html, index.html). Veuillez utiliser des minuscules !!

Machine: tecfaetu.unige.ch

Répertoire web: /web/etu-maltt/yoshi/login/stic-1/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.

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.

Evaluation et règles de participation

Règles générales pour la promotion "Yoshi"

1. Vous serez principalement évalués sur travaux individuels. Vous devez rendre tous les exercices, c.a.d. 6 exercices pour STIC I et 7 (à confirmer) pour STIC II. Il faut les rendre dans les délais indiqués, par défaut avant le début de la période suivante. 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 (sauf le 1) vous pouvez gagner ou perdre des points pour la (non) participation dans le wiki (en dehors des pages énonçant les exercices et les pages discussion !!!).
4. Chaque exercice doit être accompagné par un petit rapport.
5. Tout travail ou toute composante non-indexé(e) ne sera pas évalué. Vous devez donc faire des liens corrects depuis votre page travail (XML) vers la page rapport, et depuis chaque rapport vers chaque dispositif et vers vos contributions wiki.
6. 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.
7. Chaque page déposée sur notre serveur doit être datée et signée et elle doit se trouver à l'endroit exact indiqué (1/2 point de pénalité si ce n'est pas le cas) !

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é. Pour avoir un 6 il faut ajouter une 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. Un crédit ECTS vaut 25 à 30h de travail apprenant. Autrement dit, 3 jours de travail devraient suffire pour obtenir un 5).
• 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

En général, nous n'accordons pas de délai supplémentaire de manière individuel, sauf s'il s'agit de cas particulier (maladie, ....)

Les exercices rendus en retard, mais encore pendant le semestre, seront pénalisés de 0.3 (petit retard) ou 0.6 (grand retard). Vous pouvez rendre les exercices en retard à n'importe quel moment pendant le semestre, il suffit de nous communiquer quand l'exercice est disponible sur vos espaces travaux. En général, nous corrigeons tous les exercices en retard à la fin du semestre.

Si, à la fin du semestre, vous n'avez pas rendu un ou plusieurs exercices, ces exercices seront automatiquement noté avec un 0 et pondérés dans la note finale, à moins que vous nous communiquer par email votre volonté de vous inscrire aux rattrapages. À ce moment, les règles des rattrapages s'appliquent (voir plus bas).

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 librairies JavaScript ou du code que vous avez trouvé sur un forum ou un site, mais à condition de l'indiquer clairement !

Fraudes

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

Vous pouvez vous faire aider, mais il faut l'indiquer dans le rapport. En plus, vous devez maîtriser le produit rendu, être capable d'expliquer l'architecture du dispositif et de reproduire une version similaire. Je me réserve le droit de vous interroger sur la provenance du code et d'autres matériaux utilisés et de tester vos connaissances par d'autres moyens en cas de soupçon de fraude.

A priori je vous fais confiance, mais un étudiant qui démontre une très faible connaissance technique en classe et qui en même temps rend des travaux de haute qualité technique risque une interrogation sur la provenance du travail et doit démontrer ses compétences par un autre type d'évaluation de type interrogation orale, quiz, etc.

Conseils pour avoir une bonne note

Faites attention à bien lire l'énoncé et n'oubliez ni le rapport ni la contribution wiki! C'est le produit (dispositif + page d'accueil/rapport + contribution wiki) qui sera évalué. On n'évalue ni vos efforts ni vos connaissances en informatique. Placer des fichiers à des mauvais endroits entraînera également 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 et/ou n'ont pas complété les exercices 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 les mêmes exercices, mais avec une pénalité de retard de 1 point pour chaque exercice en retard. Si vous désirez par contre éviter cette pénalité je peux vous donner un travail supplémentaire de rattrapage. Ce travail supplémentaire supprime les pénalités de retard à condition que la note dépasse un 4 et il sera également évalué.

Les étudiants qui refont le cours l'année suivante ont le droit de présenter ou de reprendre/compléter des exercices faits l'année précédente, mais uniquement avec mon autorisation et s'ils sont similaires !

Calcul de la note finale

Pondérations pour le calcul de la note finale Note finale = moyenne de tout les 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 que vous jugez injustifiée. Et pour rappel, je me réserve le droit de vous administrer d'autres évaluations en cas de soupçon de fraude.

Aide, feedback et corrections

Les enseignants ne répondent pas aux e-mail. Utilisez les pages discussion du wiki (une différente pour chaque exercice). Abonnez-vous aux fils RSS des pages discussion ou faites vous envoyer un mail par le wiki (cliquer sur l'étoile ou le bouton "suivre" en haut à droite). Vous pouvez automatiser ce processus dans les Préférences

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

Répartition "type" du temps de travail

Voici une représentation graphique de la répartition conseillée du temps de travail pour chaque période. La taille des éléments est proportionnelle au temps conseillé pour chaque activité/étape :

Répartition "type" du temps de travail pour les périodes STIC I.

En résumé :

1. Commencer par lire le matériel pédagogique associé aux exercices. En général, les deux exercices pour chaque période présentent plusieurs aspects en commun. En même temps, testez et adaptez à vos besoins les exemples qui ont été abordés en salle de classe ou que vous trouvez dans le matériel pédagogique.
2. Dès que vous êtes à l'aise avec les contenus, planifiez vos exercices. Rappelez-vous que le rôle des exercices est principalement de consolider les aspects théoriques. Il est important de se poser des objectifs atteignables ! C'est mieux de rendre des simples applications bien structurées que des projets trop ambitieux que vous n'avez pas eu le temps de terminer !
3. Gardez assez de temps pour l'écriture de vos rapports (il s'agit de rendus universitaire !) et pour la contribution Wiki. Idéalement, la contribution devrait porter sur les arguments traités dans la période (pour consolider ultérieurement les acquis), mais ceci n'est pas obligatoire. Vous pouvez contribuer à tout article dans le wiki selon les consignes explicités dans la page STIC:Contribution Wiki.

Bonnes pratiques

• 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 l'étoile ou le bouton "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)
• Évitez de faire trop de "tourisme google" ! La plupart de l'information nécessaire se trouve dans les pages wikis et les liens sur les pages wiki.
• 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, outils auteurs etc.) et minimisez la complexité de vos projets si vous avez l'impression d'être débordé(e).

- Daniel K. Schneider sept. 2011 / 2013

Matériel d'enseignement

Logiciels (obligatoires, mais choix libre)

Pour le cours il faut avoir :

• Un éditeur de texte. Le cours propose le choix entre deux logiciels qui marchent pour Windows/Mac/Linux :
  1. Brackets, pour commencer
  2. Visual studio code, si vous sentez le besoin d'un éditeur plus puissant
• Un navigateur web avec des outils développeurs. Le cours propose Google Chrome ou Chromium, mais vous avez encore une fois le choix.
• Un éditeur XML. On conseille Exchanger XML Editor.
• Un logiciel de dessin SVG. On conseille Inkscape.
• Des logiciels d'éditing d'image et vidéo peuvent également être demandé pour des exercices.

Matériel pédagogique pensé pour le cours

Depuis l'année académique 2018/2019, nous utilisons des ressources pédagogiques qui ont été conçues spécifiquement pour le cours STIC. Il s'agit d'une sélection des ressources qui composent l'Initiation à la pensée computationnelle avec JavaScript :

• STIC I - Support de cours

Le matériel existe sous forme de pages EduTechWiki, mais peut également :

• être exporté en tant que PDF ou epub
• être imprimé à la demande via PediaPress

Autres ressources générales

Note: Chaque page exercice contiendra les liens les plus importants.

Pages les plus importantes

• Catégorie:Ressources STIC
• Catégorie:HTML5
• Catégorie:CSS
• Catégorie:JavaScript

Web

• Catégorie:Technologies web
• en:Web technology and web design tutorials