Beyond the Standards
-
Upload
paul-bakaus -
Category
Technology
-
view
2.064 -
download
0
description
Transcript of Beyond the Standards
![Page 1: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/1.jpg)
Beyond the standards
Advanced Animation and Physics in JavaScript
![Page 2: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/2.jpg)
Beyond the standards
Advanced Animation and Physics in JavaScript
![Page 3: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/3.jpg)
Beyond the standards
Pushing the web beyond its limits
![Page 4: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/4.jpg)
Web Standards
+ Great theory
+ The way it should be
- Minor progress for 10 years- Very difficult to push across parties
![Page 5: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/5.jpg)
Okay then,let‘s wait until
something changes.
![Page 6: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/6.jpg)
No way!Let‘s push the
web!
![Page 7: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/7.jpg)
Walk.How to create a walking character
![Page 8: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/8.jpg)
1. The Basics
• Center or not?
• Click angles - How many possible directions?
• Preparing the images
![Page 9: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/9.jpg)
2. The animation(s)
• Animate the character by changing the image
• Move the character
![Page 10: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/10.jpg)
3. Tweak
• Walk in constant speed
• Easing
• Multiple clicks handling
![Page 11: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/11.jpg)
Scroll.How to create a scrollable, isometric
world
![Page 12: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/12.jpg)
But that‘s not possible!
• Isometry needs skewed, non-retangle elements
• HTML doesn‘ t have them
![Page 13: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/13.jpg)
Don‘t think about limits
• So you cannot use events that „bleed through“ elements?
• Sure you can!
• Build your own event structure in JavaScript
![Page 14: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/14.jpg)
Don‘t limit yourself to a given standard - you can always build your own with JavaScript.
![Page 15: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/15.jpg)
There‘s one fundamental thing you need to know..
![Page 16: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/16.jpg)
Knowledge is power
![Page 17: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/17.jpg)
New standardsCanvas, CSS Transforms
![Page 18: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/18.jpg)
Canvas
• Feels like a true HMTL element
• Easy JavaScript API
• Safari, Firefox, Opera
• ..IE support using ExCanvas
Get your hands dirty!
![Page 19: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/19.jpg)
CSS Transforms
• Webkit-only (Safari, iPhone, Android, Air)
• 2D transformations on HTML elements
• Yes, all kinds of 2d transformations: Rotating, Scaling, Skewing
![Page 20: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/20.jpg)
Example: Coverflow
![Page 21: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/21.jpg)
...wouldn‘t it be cool to have CSS transforms in
other browsers?
![Page 22: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/22.jpg)
..omg, IE already has!
![Page 23: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/23.jpg)
Transformie
• Parses stylesheets and inline styles, tracks them using IE only onpropertychange
• Creates a custom matrix for every function (rotate, scale, skew)
• Multiplies all matrices
• Creates the IE matrix filter on the element
![Page 24: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/24.jpg)
..but what about the rest?
![Page 25: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/25.jpg)
CSS Transforms in other browsers
• Firefox (< 3.1)/Opera has no CSS transforms
• What can we do? Push the web!
• Two possible methods
• Rerender elements to canvas and modify them
• Insert elements into SVG and use its transform features
![Page 26: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/26.jpg)
The Canvas approach
• Find all instances of -webkit-transform
• For every found element:
• Create a new <canvas> element at the exact same position as the original, with the same constrains
• Rotate/Modify/Translate the whole canvas by the values found in the transform functions
• Literally draw borders, background and text for the original item into the canvas and for all sub items
• Recompute the new constrains of the element
![Page 27: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/27.jpg)
Example: Canvas
![Page 28: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/28.jpg)
The SVG approach
• Find all instances of -webkit-transform
• For every found element:
• Serialize the whole node (outerHTML) into a string (without positioning data in the style attribute)
• Wrap it around a prepared SVG XML Header
• Also insert the transform value as <g transform=‘...‘>
• Encode the whole string to base64
• Create a new embed element with the base64 string as data source, and render it to the page
![Page 29: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/29.jpg)
Example: SVG
![Page 30: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/30.jpg)
Pushing the standardsHow library developers help
defining standards
![Page 31: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/31.jpg)
![Page 32: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/32.jpg)
How a library dev smoothens the path before web standards jump in
• The Copy approach
• Replicate an existing standard on other platforms with the help of different technologies
• Example: Excanvas
• The „Lowest common multiple“ approach
• Take a couple of different standards across browsers and create a subset that can be used across browsers
• Example: Dojox GFX
![Page 33: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/33.jpg)
Using the LCM approach, we can help define new standards.
..since we are the ones that try to find a suitable subset for the end-developer
![Page 34: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/34.jpg)
Now everyone!Let‘s push the
web!
![Page 35: Beyond the Standards](https://reader034.fdocuments.in/reader034/viewer/2022051610/5486cc3bb47959ce0c8b532a/html5/thumbnails/35.jpg)
Question?
Audience Response