Cours HTML5/NodeJS/Angular etc. Master 2 NTDP 2015-2016

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 

Outils

Nous n'allons pas utiliser d'outils particuliers pour cette formation, uniquement des outils "standards" tels que Eclipse, Sublime Text 2, 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 envrionnements 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 :

• JS_Mar14- Writing JavaScript efficiently.pdf (issu du cours JavaScript du W3C)

Partie 1 : découverte des APIs de HTML5

Supports de cours :

• Intro à HTML5 
• HTML5 Canvas (avancé) les exos sont dans les transparents.

Autres ressources :

JavaScript :

• Mes supports de cours JavaScript 
• http://www.codecademy.com/de/tracks/javascript-combined : 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

Partie 2: écriture d'un moteur de jeu en HTML5/JavaScript

Seéance 3: initiation NodeJS / WebSockets

• TP sur les WebSockets 

NTDP Casablanca: programmes réalisés en classe et mini projet

Fait en classe, en live coding:

• Exemple pour faire un timer, et pour faire clignoter un objet avec setInterval: http://jsbin.com/voyowo/edit
• Exemple d'un monstre dirigé à la souris, qui suit la souris: http://jsbin.com/voyowo/edit
• Exemple de timer (afficher le temps qui diminue ou qui augmente): 

Jeu du lapin avec les boules de Noël:

• Lien (marche sur desktop, tablettes, téléphones, responsif, jouable à la souris ou aux doigts): mainline.i3s.unice.fr/mooc/SkywardBound
• Sources: skywardbound 2016-01-14 0040.zip 

Librairie pour charger des sons et les jouer dans un jeu: HowlerJS