Your SlideShare is downloading. ×
0
The State of the Web@keithpitt
Who Am I?
Who Am I?
Who Am I?Keith
Who Am I?KeithKeith Pitt
Who Am I?KeithKeith PittMagic Keith
Who Am I?KeithKeith PittMagic KeithSteve (long story)
First Technical Talk. Be Gentle...
First Technical Talk. Be Gentle...(Ok, if you want, rough me up a little)
State
Web State
Web State
Web StateWeb Pages/Applications are Stateful
Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestate
Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestateThe URL is a link to th...
Web StateWeb Pages/Applications are StatefulThe back & forward buttons in the browser traversestateThe URL is a link to th...
AJAX Breaks This
AJAX Breaks ThisSomebody please think of the children!
How AJAX breaks state
How AJAX breaks stateThe back & forward buttonsno longer behave asexpected
How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectly
How AJAX breaks stateThe back & forward buttonsno longer behave asexpectedLinks no longer workcorrectlySearch engines can ...
Solution?
Hack the # Anchor
Hack the # AnchorLots of ugly hacks, especially in IE where       we need to use an iFrame.
Better Solution?
HTML5 History API
HTML5 History APIOnly works in Webkit. Firefox 4is supposed to have it.
HTML5 History API
HTML5 History API2 new methods:
HTML5 History API2 new methods: pushState
HTML5 History API2 new methods: pushState replaceState
HTML5 History API2 new methods:  pushState  replaceState1 new event on the window object:
HTML5 History API2 new methods:  pushState  replaceState1 new event on the window object:  onpopstate
pushState// This object is passed to the onpopstate event when it is fired. You// can fill this object with what ever you ...
replaceStateSame API as pushState, but doesn’t add anything tothe history stack.
onpopstate$(window).bind(popstate, function(event) {   alert(ZOMG, State Changed!);})
JIZZ IN MY PANTS     Solution?
HTML5 History API       ANDThe # Anchor Hack
jQuery Address
jQuery AddressHTML5 History API where supported. Reverts back to the # Anchor hack.            Works in IE6http://www.asua...
Example$.address.state(/);$.address.change(function(event) {  alert(ZOMG, State Changed!);});$.address.value(/some/random/...
Demo
@keithpitty
@keithpitt
Thats It!See more at my blog at keithpitt.com
The State of the Web
The State of the Web
Upcoming SlideShare
Loading in...5
×

The State of the Web

334

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
334
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
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
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×