Your SlideShare is downloading. ×
The State of the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The State of the Web

309
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
309
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

    ×