Page Enseignement - Paris Nanterre - Isis TRUCK

Pour M2 PCPAT - Ergonomie de conception

Cours magistraux et travaux pratiques

Quelques éléments d'aide pour le TP 1

• Cours sur XHTML / CSS et le TP associé
• Le template XHTML
• L'index des attributs existants et les balises auxquels ils se rapportent sur le site du W3C
  Noter que id et class peuvent s'employer avec presque toutes les balises
• L'image de Lisa Simpson à utiliser et le fichier fichierNOK.xhtml.
• Un très bon mémo CSS et un autre sur HTML et CSS
• Les corrections de l'exercice 8 : 8.2.html, 8.2.css 8.3.html, 8.3.css 8.4.html, 8.4.css 8.5.html, 8.5.css

Quelques éléments d'aide pour le TP 2

• Cours sur JavaScript et le TP associé
• Les images d'oeil et de robe à utiliser
• Le template HTML et JavaScript
• Les corrections de certains exercices sont disponibles et portent le nom "exoN.html", dans le répertoire "../ens/fichiers/TP2/" où N est le numéro de l'exercice. Exemples :
  • exo3.html,
  • exo5.html,
  • exo5.2.html, etc.
• Une explication par l'exemple de l'intérêt des boucles. Dans cet exemple, on voit une boucle pour (écrite en JavaScript) qui permet de générer automatiquement le code HTML des input text d'une form. Bien regarder le fichier JavaScript associé.

Quelques éléments d'aide pour le TP 3

• TP associé
• Le fichier zip à décompresser et à utiliser

Quelques éléments d'aide pour le TP 4

• TP associé
• La correction

Quelques éléments d'aide pour le projet

• Avant de programmer le site Web, il faut impérativement faire une maquette de ses pages. On peut utiliser des outils comme Balsamiq (lire le tutoriel avant de l'utiliser) pour concevoir et agencer les pages entre elles (liens inter-pages, interactions prévues, etc.).
• Exemples de travaux antérieurs (promotions passées) :
  • un petit site très amusant avec les camarades de la promotion sous forme de super héros (©Camilla Boulmedaïs, 2022-2023)
  • un petit site très amusant - avec son trombinoscope - et instructif sur la LSF (©Pauline Estrade, 2021-2022)
  • un petit site montrant la faisabilité d'un jeu d'aventures textuel rappelant les jeux PC des années 1980-90 (©Satya David, 2021-2022)
  • un petit site instructif sur la pollution numérique (©Roxane Bureau, 2021-2022)
  • un petit site instructif sur la peinture et les pigments (©Léonor Tournebœuf, 2021-2022)
  • un petit site en PHP sur un jeu vidéo de stratégie (©Florian André, 2021-2022)
  • un petit site instructif sur les planètes et les étoiles (©Victoria Legendre, 2017-2018)
  • un petit site très instructif et amusant sur le blob (©Anna-Maria Sanchez, 2017-2018). Attention, il y a une erreur de lien dans le fichier PDF, que je ne peux modifier
  • un petit site amusant sur les cactus (©Laurine Peter, 2016-2017)
  • un didacticiel sur la mémoire (©Alexandre Delaporte, 2016-2017)
• Drag and Drop en JS : exemples 1, 2, 3
• Les images 1, 2 et 3 utilisées dans les exemples
• Une page d'aide très intéressante sur les différentes interactions possibles dans un questionnaire (une autre page)
• Pour ajouter du son, rappelons pour mémoire qu'il existe la balise audio en HTML5 (voir explications ici). Pour davantage de souplesse, on peut regarder également l'API SoundManager 2 écrite en JavaScript. De très bonnes explications sont disponibles ici.
• Pour ouvrir des fichiers PDF avec construction à la volée du nom, en fonction d'une date : fichier html, fichier js. Les 2 pdf disponibles s'appellent 2014-11-01_resume.pdf et 2015-12-01_resume.pdf