Cours Web 2.0 / HTML5 / JS 2014-2015

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 :

Ressources intéressantes

JavaScript / jQuery

Si vous ne connaissez rien à JS : http://www.codecademy.com/tracks/javascript et se taper la totalité du tutorial interactif. Il faut s'inscrire mais c'est gratuit.

Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
Cours JavaScript/jQuery CNRS (M.Contesin) : Cours JavaScript CNRS Dec 2013.zip
jQuery (complément quasi indispensable de JavaScript):
- Transparents powerpoint sur jQuery : jquery.ppt et aussi la présentation interactive de John Resig, auteur de jQuery : http://ejohn.org/blog/spring-2010-jquery-talks/ , la première "introduction to jQuery" est très bien pour un premier contact avec cette librairie.
- NOUVEAU : jQuery best practices !
- N'oubliez pas d'aller faire un tour sur la page : Ressources JQuery que j'ai préparée à votre attention et qui contient de nombreuses ressources intéressantes au sujet de cette librairie (tutorials, transparents, livres, etc). Je recommande à 200% d'imprimer ou d'avoir sous la main les "jQuery chart sheets", des images qui résument en un coup d'oeil toute la librairie.
- La page officielle avec la doc de jQuery (exemples interactifs) : http://api.jquery.com/

Autres ressources JS :

http://www.codecademy.com/de/tracks/javascript-combined
The book I used to learn JavaScript myself: http://www.wuala.com/lpuums/JavaScript/Object-Oriented%20JavaScript%20-%20Stoyan%20Stefanov.pdf?lang=fr
Mozilla Developper Network has a JS guide too: https://developer.mozilla.org/en-US/docs/JavaScript/Guide
You might have a look at w3schools.com but beware that this Web site is full of mistakes and untrue information, see http://w3fools.com/ if you don't believe me!

CSS

Exemples interactifs très utiles pour comprendre CSS / CSS2 : Exemples interactifs CSS

Exemples CSS de w3schools.com : http://www.w3schools.com/css/default.asp
Transparents de Estelle Weil : http://estelle.github.io/
Lea Verou : projets (http://lea.verou.me/projects/, en particulier l'outil prefix-free pour css), transparents : http://lanyrd.com/profile/leaverou/slides/

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

Ici l'exemple interactif : http://jsbin.com/ixowoc/5/edit#html,live
Ici un tableau avec lignes en couleurs, colonnes bloquées, scrolling horizontal, etc, en CSS3 : http://jsbin.com/ibesul/2/edit

Flex Layout exemples

Exemple simple, montre aussi les sélecteurs nth + les ombres CSS3 : http://jsbin.com/tadivale/9/edit
Exemple avec du layout imbriqué : http://jsbin.com/yekededu/2/edit

Transitions exemples