MBDS Casablanca 2015-2016: HTMl5/JS

De $1

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é:

Outils

Nous n'allons pas utiliser d'outils particuliers pour cette formation, uniquement des outils "standards" tels que Eclipse, Sublime Text , Notepad++ ou les outils que vous appréciez pour éditer du code. Néanmoins, de nombreux exemples HTML5/JS/CSS seront proposés sur des environnements de développement en ligne tels que http://jsbin.com/http://jsfiddle.net/http://dabblet.com/ ou http://codepen.io/, particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique).

ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT DES OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale :

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

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

JavaScript :

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 :

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):

Exemples fait en 2015-2015:

 

Troisième partie : le canvas HTML5

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.