HTML5A NEW SWORD FOR

INTERACTIVE APPYohan Totting

http://thinkrooms.com@tyohan

tyohan@thinkrooms.com

1Sunday, October 7, 12

HaloYohan Totting

Application Developer Founder of ThinkRooms StudioFOWAB & HackerspaceBDG Initiator

2Sunday, October 7, 12

HTML5 COMPONENTS FOR INTERACTIVE APP/GAME

3Sunday, October 7, 12

CSS3

4Sunday, October 7, 12

CANVAS

5Sunday, October 7, 12

AUDIO & VIDEO

6Sunday, October 7, 12

WEBSOCKET & WEBRTC

7Sunday, October 7, 12

OFFLINE CAPABILITY

8Sunday, October 7, 12

WEBGL

9Sunday, October 7, 12

AUDIO & VIDEO CAPTURE WITH GETUSERMEDIA

10Sunday, October 7, 12

CANVAS VS

DOM MANIPULATION

11Sunday, October 7, 12

CANVASPro•Pixel manipulation•Easy to draw lines, curves, & shapes from code•Consistent view on browser

Cons•Only supported on modern browser•Need to track position and state for each

object•Developer need to create it’s own effect and

animation12Sunday, October 7, 12

DOM MANIPULATION

Pro•Supported on most browsers•Native CSS3 effect and animation•Faster development

Cons•Performance depend on HW acceleration•Cross browser issues•Bad for large DOMs

13Sunday, October 7, 12

HTML5 ON MOBILE

14Sunday, October 7, 12

DIRECT CANVAS

15Sunday, October 7, 12

NATIVE SDK SUPPORT FOR HTML5 APP

16Sunday, October 7, 12

WRITE ONCE DEPLOY ANYWHERE

17Sunday, October 7, 12

TOOLS

18Sunday, October 7, 12

IMPACTJShttp://impactjs.com

Game Engine

19Sunday, October 7, 12

LIMEJShttp://www.limejs.com

Game Engine

20Sunday, October 7, 12

CAATCanvas Advanced Animation Toolkit

http://labs.hyperandroid.com/static/caat/

Game Engine

21Sunday, October 7, 12

CREATE JShttp://www.createjs.com/

Game Engine & Framework

22Sunday, October 7, 12

CACOONJSDirect Canvas, Cloud API, & Monetization Tool

http://ludei.com/tech/cocoonjs

23Sunday, October 7, 12

APPMOBIhttp://www.appmobi.com/

SDK, Direct Canvas, Cloud API, & Monetization Tool

24Sunday, October 7, 12

THANKS

Yohan Tottinghttp://thinkrooms.com

@tyohantyohan@thinkrooms.com

25Sunday, October 7, 12