Facebook and Uxebu HTML5 Bikeshed
-
Upload
mobilemonday -
Category
Technology
-
view
704 -
download
0
description
Transcript of Facebook and Uxebu HTML5 Bikeshed
![Page 1: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/1.jpg)
Wolfram Kriesing, CTO
Dienstag, 20. März 12
![Page 2: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/2.jpg)
Dienstag, 20. März 12
![Page 3: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/3.jpg)
Bikeshed? What happened
Dienstag, 20. März 12
![Page 4: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/4.jpg)
Beginning 2010 Gordon / Tobias Schneider
Dienstag, 20. März 12
![Page 5: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/5.jpg)
Jan. - Aug. 2011 Full Flash 8 / AS2 support
Dienstag, 20. März 12
![Page 6: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/6.jpg)
JsConf ...drinks...
Dienstag, 20. März 12
![Page 7: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/7.jpg)
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
![Page 8: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/8.jpg)
What are we focusing on?
3D, Graphics, Effects Connectivity Device Access Multimedia
Offline & Storage Performance Semantics CSS3
Dienstag, 20. März 12
![Page 9: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/9.jpg)
Canvas faster and faster
Dienstag, 20. März 12
![Page 10: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/10.jpg)
Canvas: faster and faster
Dienstag, 20. März 12
![Page 11: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/11.jpg)
SVG vectors for the masses
http://raphaeljs.com
Dienstag, 20. März 12
![Page 12: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/12.jpg)
SVG: vectors for the masses
Dienstag, 20. März 12
![Page 13: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/13.jpg)
WebGL a whole new world
http://ro.me
Dienstag, 20. März 12
![Page 14: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/14.jpg)
WebGL: a whole new world
Dienstag, 20. März 12
![Page 15: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/15.jpg)
Woalots of stuff :)
Dienstag, 20. März 12
![Page 16: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/16.jpg)
Bikeshed• JS developer friendly beautiful API• Flash inspired (conversion possible :) )• Future proof architecture
Dienstag, 20. März 12
![Page 17: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/17.jpg)
The API Beautiful
http://www.stretta.com/~matthew/resources/studio/history.html
Dienstag, 20. März 12
![Page 18: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/18.jpg)
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
![Page 19: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/19.jpg)
Content creation
Shape
Bitmap
Text
attr()
addTo(stage) color/gradient
font
positioning
line/fillDienstag, 20. März 12
![Page 20: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/20.jpg)
Content creation
Dienstag, 20. März 12
![Page 21: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/21.jpg)
The API: shapes
Dienstag, 20. März 12
![Page 22: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/22.jpg)
The API: filters
Dienstag, 20. März 12
![Page 23: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/23.jpg)
The API: timeline - a bit like Flash
120
240
360
Frames
Dienstag, 20. März 12
![Page 24: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/24.jpg)
The API: animations
• Animate shape properties• Timeline bound / or not• Easing• Events
Dienstag, 20. März 12
![Page 25: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/25.jpg)
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
![Page 26: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/26.jpg)
Architecture Pssst “Client / Server”
http://interactive.usc.edu/2008/11/11/technologies-of-perception-digital-photography-and-architecture/
Dienstag, 20. März 12
![Page 27: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/27.jpg)
Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12
![Page 28: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/28.jpg)
Iframe
Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12
![Page 29: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/29.jpg)
Worker
Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12
![Page 30: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/30.jpg)
Node.js
Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12
![Page 31: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/31.jpg)
Architecture: Renderer / Movie execution
Movie Renderer
SVG
Dienstag, 20. März 12
![Page 32: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/32.jpg)
Canvas
Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12
![Page 33: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/33.jpg)
WebGL®
Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12
![Page 34: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/34.jpg)
Combination
Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12
![Page 35: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/35.jpg)
factsBikeshed example
Dienstag, 20. März 12
![Page 36: Facebook and Uxebu HTML5 Bikeshed](https://reader035.fdocuments.in/reader035/viewer/2022081400/5552a1f2b4c9051f108b55ab/html5/thumbnails/36.jpg)
Thank you
@bikeshedjs
Wolfram Kriesing, CTOuxebu
Dienstag, 20. März 12