facebook and uxebu html5 bikeshed
DESCRIPTION
Presentation at http://www.mobile-monday.de/events/kick-ass-m2d2-developing-facebook-html5-mobile-games-appsTRANSCRIPT
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