Apprentissage et Environnements Informatiques

Séance d'information (Auditoire M R170) 

Présentation du cours sur deux demi-séances 

Cours (Auditoire M R170) 

Introduction au World Wide Web & le langage HTML

Vous pouvez revoir les principaux transparents du cours;

Les logiciels éducatifs 
Classification des environnements d'apprentissage 
Modèles de l'apprentissage et Modèles de l'enseignement 

Vous pouvez consultez les transparents du cours et la bibliographie 
- sur la classification des environnements (transparents N°3, 4 et 5) 
- sur les modèles de l'apprentissage

Introduction au World Wide Web & le langage HTML
Nous avons vu comment créer une homepage avec Claris home page 3.0, puis comment y accéder depuis le web en enregistrant un fichier index.html sur le lecteur H:, dans le sous-répertoire Public.WWW.
Consultez la page de ressources du cours pour en savoir plus...

Micromondes & Simulation

Vous pouvez consultez les transparents du cours et la bibliographie 
- sur les micromondes 

• Mémo: quelles questions se poser pour analyser un logiciel ? 
• Une fiche modèle sur le logiciel Alge-Blaster vu en cours est à votre disposition. Elle vous donne une idée sur la manière de travailler. 
• Une autre fiche modèle est à votre disposition: (Maps and Facts). Celle-ci a été rédigée par une étudiante du diplôme STAF. 
• Vous pouvez aussi consulter le regroupement des fiches "expertise" sous forme hypertexte réalisé par la volée 94-95. Attention les fiches sont réaliseés suivant un autre modèle que celui qui est demandé. 
• Pratique: Liste des logiciels disponibles à TECFA (Attention même remarque que ci-dessus: certaines fiches sont redigees suivant un modèle ancien). 

• Nous avons travaillé à partir de la page d'exemple suivante.
• A travers la présentation suivante (cliquez ici pour accéder au texte accompagnant les transparents),
  • nous avons vu la notion d'URL, ses différents types (http://, ftp://, etc.), et fait la distinction entre des URLs absolue et relative;
  • nous avons qu'il existe trois modes d'utilisation dans Claris Home Page. Nous avons pu ainsi comparer le mode d'édition « wysiwyg » et celui affichant le code source HTML.

Goupe A (8 décembre): Travaux Pratiques (M 4183): édition de pages HTML #1 et introduction au code HTML (pour les plus avancés)

• Comme travail pratique, vous avez appris à enregistrer une image trouvée sur Internet, à la placer dans votre répertoire public.www et à la réutiliser dans Claris Home Page.
• Vous avez préparé une page "CV" et une page "Bookmarks" et fait des liens dessus à partir de votre page "index.html".
  
  Nouvelle référence dans notre page "ressources" : le très bon cours de Christian Oihénart, du CPTIC, sur la création de page WEB à l'aide de Claris Homne Page 3.0.
  Vous y trouverez notamment, en lien avec le dernier cours, une page sur la manière d'insérer des images avec Home Page.
  
  

Exercice de manipulation d'images 

Groupe B: Travaux Pratiques: Salle M 4183.

Exercice de manipulation d'images 

Groupe A: Travaux Pratiques: Salle M 4183

Exercice de manipulation d'images 

• Présentation des caractéristique du web (et javascript) (suite)
• Quelques exercices introductifs (suite) et on en verra d'autres:
  • la gestion d'évènements (hello world)
  • Un simple test qui utilise un formulaire simple et calcule un résultat
  • Vérification de formulaire: vérifie que certains champs soient remplis avant d'envoyer le formulaire (difficile)
  • Un effet graphique simple: lorsque le curseur passe au dessus du lien (qui englobe l'image), cela déclenche un événement (OnMouseOver) qui exécute le code qui remplace l'image courrante par une autre
• La page de ressources sur javascript du cours est toujours disponibles, et recommandablement consultable

• Applications de l'Intelligence Artificielle à l'Education  (quelques transparents du cours ici)
  
• Les systèmes d'Aide  (quelques transparents du cours ici)
  
• Le futur des logiciels éducatifs  (quelques transparents du cours ici)
  

Pour que le groupe B puisse rattraper le séminaire sur les tutoriels du 22 décembre, nous faisons une séance spéciale qui ne respecte pas le rythme régulier.

Dans le groupe A, nous ferons une séance spéciale JavaScript

• N'hésitez pas à consulter la page de ressources du cours, (en particulier la partie javascript) ainsi que le répertoire HTML sur le serveur SoftEnseignement (chemin: M:/soft_enseig/pc/commun/mendel2/html/) pour les exemples spécifiques utilisés aux TP.
• Pour la programmation en JavaScript, vous pouvez consulter les exemples et exercices de ce premier module sur cette page.
  Attention : Petite modification par rapport à ce qui a été dit en cours.
  Pour sortir la variable "année", dans l'exemple n° 2, il faut utiliser la fonction getFullYear qui n'est pas boguée et qui renvoit l'année en 4 chiffres.
• exemples vus au cours:
  • la présentation
  • Une homepage dont le contenu dépend de la date (voir en particulier le commentaire associé à la date de naissance)
  • Une application interactive (un QCM simple)
  • La bamboula page de Dao (voir en particulier la partie Ajouter Bamboula qui vérifie que vous avez correctement rempli le formulaire)

Exceptionnellement, pour permettre à tous d'avoir le temps et les compétences nécessaires pour faire leurs pages webs, nous allons consacrer les 2 prochaines séances à la réalisation de ces pages. Le groupe A reste en M 5183 et le groupe B en M 4183. Pour comparer les différences entre les deux formats d'images et de leurs conséquences, consultez les pages suivantes: Graphic Design Class Samples , Example Image Formats @ LANL,
Consultez la page d'exemples sur les tableaux. Sur le site Killersites, il y a aussi (en english of course), un tutoriel plus détaillé sur les tableaux. Quelques bons exemples de ce qu'on peut faire avec des tableaux.

Pour mettre vos pages webs afin qu'elles soient directement accessible sur le web, comment faire?

• D'abord, où placez les fichiers? Vous les mettez sur votre espace de sauvegarde personnel, sur le disque H (pas le I), dans le répertoire "Public.WWW".
• Ensuite, comment accéder à vos pages webs? En inscrivant dans votre navigateur web, l'adresse http://etudiants.unige.ch/votrenomdutilisateur.htm, en remplacant votrenomdutilisateur par votre nom (par exemple bond007.htm).
  Ce lien pointe sur un fichier dans votre répertoire Public.WWW appelé index.htm. Votre page d'entrée s'appellera donc index.htm.
  
• Il faudra nous envoyer un mail (ou nous dire verbalement) dans lequel vous nous indiquez votre nom d'utilisateur, pour que l'on sache quelles pages regarder.

Pour plus d'infos, consulter les pages http://www.unige.ch/etudiant/, et en particulier celle-ci http://www.unige.ch/etudiant/doc.html.

Afin de vous permettre d'améliorer vos pages HTML et de nous présenter, à la fin de cette semaine, un site "d'enfer", nous vous proposons une séance supplémentaire de travaux pratiques!

Le groupe A se retrouve avec Zeitoun (aka Olivier Clavel) dans la salle M 5183, et le groupe B avec Did (aka Didier Strasser) dans la salle M 4183.

A ceux qui lisent cete page, a demain ;-)....