STIC:Atelier graphisme, animation, interactivité et HTML5

Atelier Graphisme, animation, interactivité et Html5

Cours SEM-10638, Session : SEM14-1

Date du cours : Jeudi 29 janvier 2015

Formateur-trice-s : Daniel Schneider (UNIGE)

Programme provisoire

Quoi de neuf dans HTML5 ?

• Distinguer entre le langage (balises) et les interfaces pour programmeurs

HTML5 related APIs. HTML5 & CSS3 Quick Reference by Sergey Mavrody updated by Wikipedians. Source and copyright: Wikipedia

• HTML5
• http://caniuse.com

Composants multimédia

Survol

Video et audio

• en:HTML5 audio and video (en Anglais)

SVG statique

• Tutoriel SVG statique
• Tutoriel SVG avec HTML5

Editeur SVG en ligne:

• http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html

Animation et interactivité avec SVG / SMIL

• Tutoriel SVG dynamique avec SMIL
• Tutoriel SVG/SMIL animations interactives

Animation et interactivité avec Greensock

• Tutoriel GreenSock GSAP

Animation CSS et interactivité avec JavaScript et JQuery

Programmation HTML DOM

• ...

JQuery de base

• Tutoriel: JQuery

Application glisser - poser avec JQuery UI

• Tutoriel: JQuery UI

Ressources à utiliser de http://code.jquery.com/ si vous utilisez un éditeur en ligne

• http://code.jquery.com/jquery-1.11.0.min.js
• http://code.jquery.com/ui/1.11.2/jquery-ui.min.js

Logiciels et bibliothèques

• Navigateur récent

• Editeur SVG en ligne:
  • http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html

• Editeur de programme ou alternativement un éditeur en ligne comme:
  • http://jsfiddle.net/
  • http://jsbin.com/
  • http://js.do

• Bibliothèques (librairies JavaScript) à télécharger
  • JQuery
  • JQuery UI
  • GreenSock

• Bibliothèques (librairies JavaScript) à inclure directement dans votre code (déconseillé pour un vrai projet)
  • JQuery
  • JQuery UI
  • GreenSock