MBDS Casablanca 2015-2016: HTMl5/JS

Introduction

Dans ce cours nous allons vous présenter les grandes parties de HTML5, puis nous ferons des rappels sur JavaScript. Enfin, nous développerons des exemples utilisant les APIs de HTML5 en JavaScript.

Michel Buffa est l'auteur de deux MOOCs gratuits (en anglais) sur HTML5, couvrant toute la spécifications, mais aussi avec des sections dédiées à l'écriture de jeux HTML5 et au multimédia avancé:

• HTML5 part 1: coding essentials and best practices⁷ 
• HTML5 Part 2: Advanced Techniques for Designing HTML5 Apps⁸ 

Première partie : introduction des technologies web, panorama général

• Transparents : rappel des principales technologies du web¹⁵ (serveur down, mais présentation orale, le lien remarchera à mon retour en France).

Ressources à garder dans un coin et à regarder si on est curieux :

JavaScript :

• Mes supports de cours JavaScript¹⁶ 
• http://www.codecademy.com/de/tracks/javascript-combine¹⁷: parfait pour les débutants,
• Le livre complet que j'ai utilisé pour apprendre JavaScript il y a quelques années : http://www.wuala.com/lpuums/JavaScript/Object-Oriented%20JavaScript%20-%20Stoyan%20Stefanov.pdf?lang=fr¹⁸
• Mozilla Developper Network a un bon guide aussi : https://developer.mozilla.org/en-US/docs/JavaScript/Guide¹⁹
• POUR CEUX QUI VEULENT VRAIMENT MAITRISER LES ASPECTS AVANCES, un super cours en vidéo interactif: https://www.udacity.com/course/objec...ascript--ud015²⁰

CSS :

• http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS
• Les tutoriaux de codeacademy.com sont très bien et gratuits, parfaits pour les débutants

• Un must (en anglais) : le livre de Lea Verou "Css secrets".
• Aller voir les très nombreux exemples sur http://codepen.io²¹

HTML5 :

• Mon cours complet :http://mainline.i3s.unice.fr/HTML5slides/#1²²

Deuxième partie : rappel des bases de JavaScript

On va procèder cette fois-ci à une séance de live coding via l'outil jsbin.com, puis ce sera à vous de jouer... On mettra ici les exemples développés en cours.

Cours JavaScript : http://mainline.i3s.unice.fr/JavaScr...des/index.html²³ 

Exemple fait en classe: comment inclure du JavaScript dans du HTML, bonnes pratiques (méthode init appelée quand la page est chargée, etc), et exemples d'objets et de tableaux dans fichier2.js (ouvrir index.html et regarder la console):

• MBDSJS.zip²⁴

Exemples fait en 2015-2015:

• Exemple de code objet, tableau etc. : http://jsbin.com/genaro/edit²⁵
• Exemple bouton + géolocalisation : http://jsbin.com/purevu/3/edit²⁶

Troisième partie : le canvas HTML5

• Support de cours : http://mainline.essi.fr/HTML5slides/canvasFR.html²⁷
• HTML5 Canvas (avancé)²⁸ les exos sont dans les transparents.

Dernière version du jeu fait en classe: http://jsbin.com/torete/edit?js,output²⁹

Projet MBDS à rendre pour la semaine après le projet de Nicolas Pastorelly

Sujet du projet: le jeu HTML5 + sauvegarde et affichage des hi-scores avec nodeJS/Express/MongoDB en Ajax.

Modalités de rendu:

• En binôme, rendre une archive portant vos noms et MBDS_CASA_2016.
• Dans l'archive: un readme.txt avec les explications, photos d'écran, etc. Donnez toutes les instructions pour que je puisse tester votre application.
• Mettre en ligne sur jsbin, une version du jeu SANS la partie BD, que je puisse tester. 
• C'est Nawfal Osman qui partagera avec moi une archive dropbox de tous vos projets.