1. Wolfram Kriesing, CTO
Dienstag, 20. März 12

2. Dienstag, 20. März 12

3. Bikeshed? What happened
Dienstag, 20. März 12

4. Beginning 2010 Gordon / Tobias Schneider
Dienstag, 20. März 12

5. Jan. - Aug. 2011 Full Flash 8 / AS2 support
Dienstag, 20. März 12

6. JsConf ...drinks...
Dienstag, 20. März 12

7. 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

8. What are we focusing on?
3D, Graphics, Effects Connectivity Device Access Multimedia
Offline & Storage Performance Semantics CSS3
Dienstag, 20. März 12

9. Canvas faster and faster
Dienstag, 20. März 12

10. Canvas: faster and faster
Dienstag, 20. März 12

11. http://raphaeljs.com
SVG vectors for the masses
Dienstag, 20. März 12

12. SVG: vectors for the masses
Dienstag, 20. März 12

13. http://ro.me
WebGL a whole new world
Dienstag, 20. März 12

14. WebGL: a whole new world
Dienstag, 20. März 12

15. Woa
lots of stuff :)
Dienstag, 20. März 12

16. Bikeshed
• JS developer friendly beautiful API
• Flash inspired (conversion possible :) )
• Future proof architecture
Dienstag, 20. März 12

17. http://www.stretta.com/~matthew/resources/studio/history.html
The API Beautiful
Dienstag, 20. März 12

18. Content creation
Bitmap Text
Audio radial
Shapes darker saturation
Gradient
Video
lighter Color hsla
linear
randomize hue rgba
Organization
play frames Sprite
Movie
units Timeline
Grouping
stop length
Manipulation mouseup mousedown Matrix
on
keyup
drag Events x
greyscale saturate emit keydown touch keyframes opacity y
invert Filter blur matrix Animation mask
dropShadow sepia rotation clip scale
Dienstag, 20. März 12

19. Content creation
addTo(stage) color/gradient positioning
Shape
Bitmap
Text
attr() line/fill font
Dienstag, 20. März 12

20. Content creation
Dienstag, 20. März 12

21. The API: shapes
Dienstag, 20. März 12

22. The API: filters
Dienstag, 20. März 12

23. The API: timeline - a bit like Flash
Frames
120
240
360
Dienstag, 20. März 12

24. The API: animations
• Animate shape properties
• Timeline bound / or not
• Easing
• Events
Dienstag, 20. März 12

25. 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

26. http://interactive.usc.edu/2008/11/11/technologies-of-perception-digital-photography-and-architecture/
Architecture Pssst “Client / Server”
Dienstag, 20. März 12

27. Architecture: Renderer / Movie execution
Movie Renderer
Dienstag, 20. März 12

28. Architecture: Renderer / Movie execution
Movie Renderer
Iframe
Dienstag, 20. März 12

29. Architecture: Renderer / Movie execution
Movie Renderer
Worker
Dienstag, 20. März 12

30. Architecture: Renderer / Movie execution
Movie Renderer
Node.js
Dienstag, 20. März 12

31. Architecture: Renderer / Movie execution
Movie Renderer
SVG
Dienstag, 20. März 12

32. Architecture: Renderer / Movie execution
Movie Renderer
Canvas
Dienstag, 20. März 12

33. Architecture: Renderer / Movie execution
Movie Renderer
WebGL ®
Dienstag, 20. März 12

34. Architecture: Renderer / Movie execution
Movie Renderer
Combination
Dienstag, 20. März 12

35. Bikeshed example facts
Dienstag, 20. März 12

36. Thank you
@bikeshedjs
Wolfram Kriesing, CTO
uxebu
Dienstag, 20. März 12