The State of the Web

520 views
454 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
520
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The State of the Web

    1. 1. The State of the Web@keithpitt
    2. 2. Who Am I?
    3. 3. Who Am I?
    4. 4. Who Am I?Keith
    5. 5. Who Am I?KeithKeith Pitt
    6. 6. Who Am I?KeithKeith PittMagic Keith
    7. 7. Who Am I?KeithKeith PittMagic KeithSteve (long story)
    8. 8. First Technical Talk. Be Gentle...
    9. 9. First Technical Talk. Be Gentle...(Ok, if you want, rough me up a little)
    10. 10. State
    11. 11. Web State
    12. 12. Web State
    13. 13. Web StateWeb Pages/Applications are Stateful
    14. 14. Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestate
    15. 15. Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestateThe URL is a link to the state
    16. 16. Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestateThe URL is a link to the stateSearch engine crawlers take a snapshot of eachpossible state, and indexes them
    17. 17. AJAX Breaks This
    18. 18. AJAX Breaks ThisSomebody please think of the children!
    19. 19. How AJAX breaks state
    20. 20. How AJAX breaks stateThe back & forward buttonsno longer behave asexpected
    21. 21. How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectly
    22. 22. How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectlySearch engines can nolonger crawl
    23. 23. Solution?
    24. 24. Hack the # Anchor
    25. 25. Hack the # AnchorLots of ugly hacks, especially in IE where we need to use an iFrame.
    26. 26. Better Solution?
    27. 27. HTML5 History API
    28. 28. HTML5 History APIOnly works in Webkit. Firefox 4is supposed to have it.
    29. 29. HTML5 History API
    30. 30. HTML5 History API2 new methods:
    31. 31. HTML5 History API2 new methods: pushState
    32. 32. HTML5 History API2 new methods: pushState replaceState
    33. 33. HTML5 History API2 new methods: pushState replaceState1 new event on the window object:
    34. 34. HTML5 History API2 new methods: pushState replaceState1 new event on the window object: onpopstate
    35. 35. pushState// This object is passed to the onpopstate event when it is fired. You// can fill this object with what ever you like.var stateObject = { title: This Awesome Post, createdAt: 2010-10-10, author: keithpitt};// At the moment, most browsers are ignoring this property, so just fill it with// the title of the new page. According to Firefox, they _may_ use it in the// future.var title = This Awesome Post;// The full URL of the new page.var url = /posts/this-awesome-post;history.pushState(stateObject, title, url);
    36. 36. replaceStateSame API as pushState, but doesn’t add anything tothe history stack.
    37. 37. onpopstate$(window).bind(popstate, function(event) { alert(ZOMG, State Changed!);})
    38. 38. JIZZ IN MY PANTS Solution?
    39. 39. HTML5 History API ANDThe # Anchor Hack
    40. 40. jQuery Address
    41. 41. jQuery AddressHTML5 History API where supported. Reverts back to the # Anchor hack. Works in IE6http://www.asual.com/jquery/address/
    42. 42. Example$.address.state(/);$.address.change(function(event) { alert(ZOMG, State Changed!);});$.address.value(/some/random/url);
    43. 43. Demo
    44. 44. @keithpitty
    45. 45. @keithpitt
    46. 46. Thats It!See more at my blog at keithpitt.com

    ×