Page de l’édition 2022 de l’unité d’enseignement Introduction au Web et Interface Homme/Machine au S2 TREC7 et TREC5 en licence informatique à l’Université de la Nouvelle-Calédonie.
Administratif
- Code UE : 27_0171
- Intitulé : Introduction au Web et Interface Homme/Machine
- Crédits ECTS : 4.5
- Soit eviron 45h de face-à-face et 45h à 90h de travai personnel
- Salon Discord Licence Informatique (UNC) :
#intro-web-et-ihm
- Heures maquettes :
- 20h CM/TD (10 séances de 2h)
- 24h TP (12 séances de 2h)
- Intervenants :
- Romuald THION (RTH) (responsable) : CM/TD, TP groupe 1 (jeudi 13:30) et groupe 2 (mercredi 13:30)
- Eric EDO (EDO) : TP groupe 3 (jeudi 09:00)
- Vincent LAVERGNE (VLA) : introduction à l’UX
Programme pédagogique
Objectifs Concevoir et générer des documents web. Concevoir des interfaces Homme/Machine.
Modalités de contrôles des connaissances
4 CCs, moyenne calculée sur les 3 meilleurs, tous avec le même poids. Les épreuves prévues sont les suivantes :
- CC1 : composée de 2 contrôles courts sur table QCM1 et QCM2 le 11/07 et 25/07
- CC2 : composée du TP4 (création d’une page HTML/CSS) (75%) et du TP5 (web scraping) (25%)
- CC3 : projet à rendre
- CC4 : contrôle long sur table le 04/10
Emploi du temps
L’application officielle, fait foi.
Programme
Il n’y aura pas de différence entre CM et TD : tous dans un même groupe, en mode cours intégré. On précise CM(TD) si l’orientation de la séance est plutôt CM ou (CM)TD si c’est plutôt TD. Les TP seront dans des groupes différents et sur machine. Il n’y aura pas d’enseignement de cette matière semaines 32 et 33 (08/08 au 21/08).
Type | Semaine | Lundi | Contenu | Supports/remarques |
---|---|---|---|---|
CM | 26 | 27/06 | Intro à l’EC, au WEB et HTML | CM1 (exemples) |
TD | 26 | 27/06 | Tour d’horizon HTML | TD1 (HTML, correction) |
CM | 27 | 04/07 | Intro à CSS | CM2 (exemples) |
TP | 27 | 04/07 | Introduction à HTTP et au WEB | TP1 (correction) |
CM | 28 | 11/07 | CSS : sélecteurs et conflits | CM3 (exemples) QCM1 (jeudi férié) |
CM | 29 | 18/07 | UX/UI : principes (VLA) | CM4, notes étude de cas |
TD | 29 | 18/07 | UX/UI : atelier (VLA) | productions de l’atelier |
TP | 29 | 18/07 | Bases HTML et CSS | TP2 (correction) |
TD | 30 | 25/07 | HTML & CSS | TD2, QCM2 |
CM | 30 | 25/07 | CSS : positionnement | CM5 (exemples) |
TP | 30 | 25/07 | Tutoriaux CSS | TP3 |
CM(TD) | 31 | 01/08 | Web en Python | CM6 (exemples) |
CM(TD) | 31 | 01/08 | Framework Python et CSS | CM7 (exemples) |
TP | 31 | 01/08 | TP HTML / CSS | TP4 (à rendre 12/08/2022 23:59 sur Moodle) |
TP | 34 | 22/08 | Web scraping et templating | TP5 (RTH remplace EDO en TP) |
TP | 35 | 29/08 | Web scraping et templating | TP5 (à rendre 06/09/2022 23:59 sur Moodle) (RTH remplace EDO en TP) |
TP | 36 | 05/09 | Projet appli web | TP6, vidéo YT (TP groupe 1 et 3x2h à cheval S37) |
TP | 37 | 12/09 | Projet appli web | TP6, vidéo YT (TP groupe 1 et 3x2h à cheval S36) |
CC | 40 | 04/10 | Contrôle final | CC4 |
Environnement de développement
TBD sur VScode / replit / horizon
Références
Documentation de référence
- Mozilla Developper Network https://developer.mozilla.org/ la référence
- Une feuille de pompe https://htmlcheatsheet.com/ et l’éditeur en ligne associé https://html-css-js.com/
- Bonnes pratiques HTML/CSS/JS de Google https://google.github.io/styleguide/htmlcssguide.html
- Bonnes pratiques CSS https://cssguidelin.es/
Trois guides de référence par les auteurs de https://bulma.io/
- La collection des éléments HTML https://htmlreference.io/
- Voir aussi http://html5doctor.com/
- Un guide visuel sur les propriétés CSS https://cssreference.io/
Exercices et cours en ligne
- Un tutoriel bien fait https://marksheet.io/
- de la veine de https://htmlreference.io/ https://cssreference.io/
- W3Schools https://www.w3schools.com/ : très populaire, avec exercices et références
- attention, certains pratiques sont dépréciées
- Cours de Pierre-Antoine CHAMPIN https://perso.liris.cnrs.fr/pierre-antoine.champin/enseignement/intro-web/ à l’IUT de Villeurbanne
- Cours de Laure PETRUCCI https://lipn.univ-paris13.fr/~petrucci/M1106/ à l’IUT de Villetaneuse
Outils
- calculateur de spécificité CSS https://specificity.keegan.st/
Autres
- Des ressources de bonnes qualité en français https://la-cascade.io/
- Des ressources de bonnes qualité en anglais https://css-tricks.com/
- Voir différentes CSS en action sur le même contenu HTML http://www.csszengarden.com/
- Sondage sur CSS https://2020.stateofcss.com/en-US/, dont est-ce que CSS un langage de programmation