DS4H 2023-2024 Minor Web Technologies

Info : link for all Zoom tutorat sessions

• https://univ-cotedazur.zoom.us/j/89196387131?pwd=TkpXakJhZUVnQ0NTRUhNYlRDckFVdz09 

Session 1 : online course presentation, first JS project

Use Visual Studio code.

Install the following extensions :

• Live Server, Github Copilot

GitHub repository that will contain all live coding examples:

• https://github.com/micbuffa/DS4HWebTechnologiesMinor

VIDEO OF THIS SESSION : https://youtu.be/3qtI-1a-OCQ 

Session 2 : examples of event handling, DOM API etc.

VIDEO OF THIS SESSION : https://youtu.be/O_O29BBqgEc

Sessions 3 and 4 : preparation of 1st assignment

• VIDEO : https://youtu.be/7opariuDACo 
• First Assignment (due November 15) here! 
• GitHub repo updated with :

1. an example for CS Master Students (charQuiTire), that shows how to use JS modules, hot to follow the mouse etc. I recommended to give a look at "steering behaviors" algotithms for animating ennemies in the witch game (see "the nature of code" on YT, or on Google)
2. An example of Quizz (for non CS students)

Session 5 : explications pour les assignments

VIDEO: https://youtu.be/TEqCjQtvzZY 

For the CS Master students, here are the constraints :

Jump example using gravity: https://jsbin.com/badumamazu/edit?html,js,output

• Use JS classes and JS modules
   
• Follow the good practices for graphics and animation (see MOOCs HTML5 Coding Essential and best practices, HTML5 Apps and Games), i.e ctx.save() and ctx.restore() in functions/methods that draw in canvas, use requestAnimationFrame for the animation loop. YOU CAN USE setInterval or setTimeout for other repetitive tasks (i.e spawn ennemies, make ennemy blink etc.)
• Multiplayer support (locally, on same keyboard or using two gamepads)
• Sound effects (see JS Intro MOOC)
• Few levels, but boids animations (spermatozoid like ennemies) is something i'd like to see.

Session 6 : steering behaviors (for CS Masters Game), etc.

• VIDEO : https://youtu.be/_pX76pMtTB4
• Example of steering behavior (VS code project) https://github.com/micbuffa/MiageIA2SteeringBehaviors.git 

Mon cours sur Steering behaviors : 

• https://docs.google.com/presentation/d/1KACjUkg9xarx656LXUrwJLLHulNr8NWvjlmMHctGVtQ/edit?usp=sharing 

Session 7 : introduction au 2nd assignment

• Sujet du 2nd assignment : variation autours du dernier exemple (carnet d'adresse, formulaires, JSON, LocalStorage)
• Exemple pour faire des cellules de tableau éditables : https://jsbin.com/xotufel/edit?html,...console,output