The State of the Web

  • 288 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
288
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. The State of the Web@keithpitt
  • 2. Who Am I?
  • 3. Who Am I?
  • 4. Who Am I?Keith
  • 5. Who Am I?KeithKeith Pitt
  • 6. Who Am I?KeithKeith PittMagic Keith
  • 7. Who Am I?KeithKeith PittMagic KeithSteve (long story)
  • 8. First Technical Talk. Be Gentle...
  • 9. First Technical Talk. Be Gentle...(Ok, if you want, rough me up a little)
  • 10. State
  • 11. Web State
  • 12. Web State
  • 13. Web StateWeb Pages/Applications are Stateful
  • 14. Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestate
  • 15. Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestateThe URL is a link to the state
  • 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. AJAX Breaks This
  • 18. AJAX Breaks ThisSomebody please think of the children!
  • 19. How AJAX breaks state
  • 20. How AJAX breaks stateThe back & forward buttonsno longer behave asexpected
  • 21. How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectly
  • 22. How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectlySearch engines can nolonger crawl
  • 23. Solution?
  • 24. Hack the # Anchor
  • 25. Hack the # AnchorLots of ugly hacks, especially in IE where we need to use an iFrame.
  • 26. Better Solution?
  • 27. HTML5 History API
  • 28. HTML5 History APIOnly works in Webkit. Firefox 4is supposed to have it.
  • 29. HTML5 History API
  • 30. HTML5 History API2 new methods:
  • 31. HTML5 History API2 new methods: pushState
  • 32. HTML5 History API2 new methods: pushState replaceState
  • 33. HTML5 History API2 new methods: pushState replaceState1 new event on the window object:
  • 34. HTML5 History API2 new methods: pushState replaceState1 new event on the window object: onpopstate
  • 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. replaceStateSame API as pushState, but doesn’t add anything tothe history stack.
  • 37. onpopstate$(window).bind(popstate, function(event) { alert(ZOMG, State Changed!);})
  • 38. JIZZ IN MY PANTS Solution?
  • 39. HTML5 History API ANDThe # Anchor Hack
  • 40. jQuery Address
  • 41. jQuery AddressHTML5 History API where supported. Reverts back to the # Anchor hack. Works in IE6http://www.asual.com/jquery/address/
  • 42. Example$.address.state(/);$.address.change(function(event) { alert(ZOMG, State Changed!);});$.address.value(/some/random/url);
  • 43. Demo
  • 44. @keithpitty
  • 45. @keithpitt
  • 46. Thats It!See more at my blog at keithpitt.com