facebook and uxebu html5 bikeshed

Wolfram Kriesing, CTO

Dienstag, 20. März 12

Dienstag, 20. März 12

Bikeshed? What happened

Dienstag, 20. März 12

Beginning 2010 Gordon / Tobias Schneider

Dienstag, 20. März 12

Jan. - Aug. 2011 Full Flash 8 / AS2 support

Dienstag, 20. März 12

JsConf ...drinks...

Dienstag, 20. März 12

Bikeshed• JS API to create visual content (JS dev friendly ;) )

• Flash inspired (conversion possible)

• Cross device / platform (mobile, desktop, space-ships)

Dienstag, 20. März 12

What are we focusing on?

3D, Graphics, Effects Connectivity Device Access Multimedia

Offline & Storage Performance Semantics CSS3

Dienstag, 20. März 12

Canvas faster and faster

Dienstag, 20. März 12

Canvas: faster and faster

Dienstag, 20. März 12

SVG vectors for the masses

http://raphaeljs.com

Dienstag, 20. März 12

SVG: vectors for the masses

Dienstag, 20. März 12

WebGL a whole new world

http://ro.me

Dienstag, 20. März 12

WebGL: a whole new world

Dienstag, 20. März 12

Woalots of stuff :)

Dienstag, 20. März 12

Bikeshed• JS developer friendly beautiful API• Flash inspired (conversion possible :) )• Future proof architecture

Dienstag, 20. März 12

The API Beautiful

http://www.stretta.com/~matthew/resources/studio/history.html

Dienstag, 20. März 12

Shapes

Timeline

Video

Matrix

Color

TextBitmap

Grouping

SpriteMovie

darker

darker

lighter

randomize rgba

hsla

hue

saturation

Filter blur

dropShadow sepia

greyscale

invert

saturate

Audio

Gradient

Eventsemit

on

keydown

keyupmousedown

touch

mouseup

drag

Animationmatrix

rotation scaleclip

mask

xyopacitykeyframes

frames

units

play

stop length

radial

linear

Manipulation

Content creation

Organization

Dienstag, 20. März 12

Content creation

Shape

Bitmap

Text

attr()

addTo(stage) color/gradient

font

positioning

line/fillDienstag, 20. März 12

Content creation

Dienstag, 20. März 12

The API: shapes

Dienstag, 20. März 12

The API: filters

Dienstag, 20. März 12

The API: timeline - a bit like Flash

120

240

360

Frames

Dienstag, 20. März 12

The API: animations

• Animate shape properties• Timeline bound / or not• Easing• Events

Dienstag, 20. März 12

The API: summary

• Rich set of features

• Inspired by Flash® => Flash® ‘like’ content made easy

• Use the Flash IDE to create content

• Then export it to JS Bikeshed code

Dienstag, 20. März 12

Architecture Pssst “Client / Server”

http://interactive.usc.edu/2008/11/11/technologies-of-perception-digital-photography-and-architecture/

Dienstag, 20. März 12

Architecture: Renderer / Movie execution

Movie Renderer

Dienstag, 20. März 12

Iframe

Architecture: Renderer / Movie execution

Movie Renderer

Dienstag, 20. März 12

Worker

Architecture: Renderer / Movie execution

Movie Renderer

Dienstag, 20. März 12

Node.js

Architecture: Renderer / Movie execution

Movie Renderer

Dienstag, 20. März 12

Architecture: Renderer / Movie execution

Movie Renderer

SVG

Dienstag, 20. März 12

Canvas

Architecture: Renderer / Movie execution

Movie Renderer

Dienstag, 20. März 12

WebGL®

Architecture: Renderer / Movie execution

Movie Renderer

Dienstag, 20. März 12

Combination

Architecture: Renderer / Movie execution

Movie Renderer

Dienstag, 20. März 12

factsBikeshed example

Dienstag, 20. März 12

Thank you

@bikeshedjs

Wolfram Kriesing, CTOuxebu

Dienstag, 20. März 12