Introduction
Dans ce cours on va étudier les technologies Web front end (HTML5/CSS3/JS) en vue du Hackaton santé. On se focalisera donc sur les aspects WebApps et multimédia (animation, dessin, audio et video).
Obligatoire : vous inscrire aux MOOCS suivants sur la plateforme edX :
Ces cours sont fait par le W3C (organisme qui fait les standards du Web), Michel Buffa est l'auteur de trois d'entre eux. Ils sont 100% gratuits à moins que vous ne vouliez afficher un certificat sur votre profil LinkedIn.
Séance 1 : quelques rappels HTML/CSS/JS, présentation d'outils de développement
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:
A FAIRE POUR LA PROCHAINE SEANCE:
- Vous inscrire aux quatre MOOCs (voir début de page)
- Vous inscrire sur github
- Contrôle continu (noté): suivre la semaines 3 du MOOC HTML5 coding essentials and best practices et répondre aux quizzes à la fin de la semaines 3 , vous serez noté sur les résultats. RETARD = 0 au CC !!!
- Vous me donnerez lors de la prochaine séance le mail que vous avez utilisé pour vous inscrire sur edx. Je pourrai voir vos résultats et ça fera une note de contrôle continu.
- A RENDRE (noté): reprendre cet exemple : https://jsbin.com/guqovob/edit?js,output et faites ce que vous voulez mais impressionnez moi.
-
- Exemples d'idées : utiliser d'autres formes que des rectangles (voir MOOC semaine 3), dessinez un bonhomme, un alien, un vaisseau spatial, plusieurs, etc... utilisez des trucs du MOOC : des dégradés, textures, images, etc.
- Vous poserez le HTML/CSS/JS sur jsbin.com et me rendrez l'URL jsbin.com par mail.
Séance 2: debriefing sur les TPs rendus, gestion des événements en JavaScript, utilisation d'élements <input> HTML pour contrôler vos animations
Exemples JsBin faits en cours:
- Utilisation d'un slider pour choisir le nombre de rectangles qui rebondissent à l'écran (dans cette version aussi : gestion des collisions entre rectangles et bords d'écran correcte -on remet les rectangles à la position de contact lors d'une collision): https://jsbin.com/guqovob/edit?html,js,output
- Exemple d'utilisation d'autres types de champs <input> : choix de la couleur, valeurs numériques etc... : https://jsbin.com/nejezil/edit?html,js,output
A faire pour la prochaine séance !
- Former des groupes de 2 personnes (3 autorisés exceptionnellement)
- S'assurer que vous avez bien tous des comptes GitHub
- Sur un des comptes vous allez créer un repository pour votre projet
- Tous les membres seront contributeurs
- Moi aussi ! (mon nom GiutHub : micbuffa@gmail.col / micbuffa)
- Vous ferez au moins un README lisible dans GitHub et vous rédigerez une première idée du projet que vous voulez réaliser. A priori un jeu... Pas besoin de détailler trop, mais vous devrez commencer par décrire les modules qui devront être développés. Ex: je fais un jeu de plateformes, il faudra un module "jeu principal", un module pour gérer les évenements clavier/souris/gamepad, un module qui permettra de gérer les niveaux, un module de sauvegarde des scores, etc....
- Remplir ce Google Spreadsheet : https://docs.google.com/spreadsheets...it?usp=sharing
Séance 3 : point sur les projets, initiation à git
On va faire le point sur les projets, sur les besoins, je donne des conseils sur les points à étudier, les choses à faire dans la partie "projet"...
Exemples utiles soit faits en cours, soit montrés en cours :
Vous n'êtes pas connecté. Connexion 