L3 Miage : technologies web et gestion de projet Open Source

Introduction

Dans ce cours on va étudier les technologies Web front end (HTML5/CSS3/JS) en vue du concours de jeux vidéo 3D (utilisant la librairie babylonJS). On se focalisera donc dans un premier temps sur une introduction assez poussée à JavaScript et aux techniques d'interaction/animation.

Séance 1 : quelques rappels HTML/CSS/JS, présentation d'outils de développement

• Outils de live coding: http://jsbin.com/, http://codepen.io/ ou encore http://liveweave.com/ (super cool pour CSS/SVG) utilisez-les pour vous exercer ou pour trouver des exemples intéressants.
• Editeurs de code: Sublime Text, Visual Studio Code, autres IDEs "lourds" (Eclipse, Netbeans, WebStorm...)
• Ligne de commande: si vous êtes sous windows, ne JAMAIS utiliser la fenêtre DOS de base pour travailler en ligne de commande, mais un shell un peu plus avancé: http://cmder.net/ ou git bash, ou encore le linux de windows 10...

On va faire des petits rappels HTML/CSS/JS aujourd'hui. Je ne sais pas encore à l'avance ce que l'on va faire exactement, mais l'objectif est de monter en compétence sur les technos Web de base (notamment JavaScript), sur l'utilisation de GIT, sur la manière dont on gère un projet open source quand on travaille à plusieurs. Nous allons commencer par des choses amusantes ayant trait aux graphique et à l'animation.

Live coding fait en classe:

• Exemple 1 avec carré qui rebondit  
• Rectangles qui rebondissent avec classe ES6 : https://jsbin.com/guqovob/edit?js,output