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://mainline.i3s.unice.fr/JavaScr...des/index.html 
• Excellent tutoriel interactif (si vous êtes gros débutant en JavaScript) : http://www.codecademy.com/de/tracks/javascript-combined
• 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

CSS :

• http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS
• Les tutoriaux de codeacademy.com sont très bien et gratuits
• 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 de code objet, tableau etc. : http://jsbin.com/genaro/edit
• Exemple bouton + géolocalisation : http://jsbin.com/purevu/3/edit