The Design of Motion - Creating Movement without Flash - Jesse Hodges, AspDotNetStorefront


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The Design of Motion - Creating Movement without Flash - Jesse Hodges, AspDotNetStorefront

  1. 1. Design of Motion<br />Jesse Hodges - AspDotNetStorefront<br />
  2. 2. Inherent Challenges for Users<br /><ul><li>Postbacks
  3. 3. Alerts and Messages
  4. 4. Differences in Technology</li></li></ul><li>Tools to Solve Problems<br />AJAX<br /><ul><li>Simple
  5. 5. Direct
  6. 6. Easy to get wrong
  7. 7. Easy to get right</li></ul>HTML 5<br /><ul><li>Non-standard
  8. 8. In Process
  9. 9. Stuck on IE6
  10. 10. “I’ve never seen a company work so aggressively at getting people to stop using their product.”-John Gruber</li></li></ul><li>AJAX and AspDotNetStorefront<br /><ul><li>.Net AJAX Libraries
  11. 11. A really nice way to code it "right"
  12. 12. Very powerful when writing controls
  13. 13. Hand Crafted
  14. 14. Less obtrusive
  15. 15. More control</li></li></ul><li>Basics of AJAX<br /><ul><li>XMLHttpRequest
  16. 16. InsertAjax loads an external page and replaces the the innerHtml of an element with the result
  17. 17. jQuery</li></li></ul><li>x-{packagename}.aspx<br />Minicart Demo<br />
  18. 18. The above xml package demonstrates how to use the allow engine attribute (which defaults to false). After setting the attribute to true your package will be available to the xml package engine methods, e-packagename.aspx and x-packagename.aspx. To include the skin use e-packagename.aspx. To run the package without the skin use x-packagename.aspx.<br />
  19. 19. Simple steps to using xmlpackages for AJAX requests:<br /><ul><li>Create a driver xml package. This package should contain everything that will not be posted back by AJAX requests. At a minimum this driver should include the javascript and a target element for the AJAX postback.</li></ul>The second part of the solution is to create a content xml package. This package includes all of the information that you want to reload on the AJAX post. The green arrow above shows where the driver package loads the initial contents of this xml package. Note that the first load is not AJAX. The content xml package must have the allowengine attribute set to true.<br />
  20. 20. The above function, updateMiniCart, will insert the AJAX response into the target div, vMiniCart. This method should be called when the item is added to the cart. The random number appended to the request URL keeps IE6 from caching the AJAX response. <br />
  21. 21. Engage and Inform with Movement<br /><ul><li>Users are used to posting back. 
  22. 22. The more direct you can be with your users, the better.
  23. 23. Let us show the item moving to the cart.</li></ul>Movement Demo<br />
  24. 24. MoveElementToElement<br />This function should be called when initiating the AJAX call. It clones the element being passed in (the product image), positions the clone absolutely, animates the clone moving to the cart, and then removes the clone.<br />
  25. 25. Fewer Clicks<br /><ul><li>Industry Buzz
  26. 26. Find a balance
  27. 27. Let the user choose</li></ul>Lightbox Demo<br />
  28. 28. For this example we will use a jQuery plugin called ColorBox. The above html will be created for each product on the category page. It is a link to the product page using x-dash so that it does not include the skin. We also pass “isquickview” on the query string so that we can toggle elements on the product page if the product is being viewed from quickview.<br />We then tell ColorBox to open all links with the class “productquickview” in a lightbox.<br />In order to use the product xml package in this way we must set it’s “allowengine” attribute to true. This will allow us to call x-product.ajaxproduct.aspx?productid=42&isquickview=true.<br />
  29. 29. HTML5<br /><ul><li>Adoption
  30. 30. Browser Implementations
  31. 31. CSS Attributes
  32. 32. -webkit
  33. 33. -moz
  34. 34. The technology is ready, most development stratagies are not.</li></ul>HTML5 Demo<br />
  35. 35. The 8 lines of css above use CSS 3 to animate the cart dropping down when the user hovers over the minicart. –webkit-transition takes 3 parameters: attribute to animate (height), duration (1s), and transition type (ease-in-out). Note that mozilla based browsers have a similar attribute named –moz-transition.<br />The example above has a hard coded height per row. Unfortunately transitions do not yet support percent correctly.<br />
  36. 36. HTML5 Focus<br />-<br /><ul><li>Client Side Storage
  37. 37. Descriptive Markup
  38. 38. Drawing
  39. 39. Drag and Drop
  40. 40.  ...</li></ul>+<br /><ul><li>CSS Animations</li>