Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MAKING AJAX USERFRIENDLY, GOOGLEFRIENDLY, FRIENDLYFRIENDLY USING THEHISTORY APIWinchester Studio. 60­61 High Street. Winch...
HI, I’MSYDLAWRENCEI’M AFRAID OF HEIGHTSsydlawrence.com@sydlawrencegithub.com/sydlawrencefb.com/sydlawrencetumblr.com/sydla...
WHATIS IT?                                                      SIT BACK /                                                ...
HTML5        SIT BACK /         SIT BACK        LISTENUP         LISTEN UP
JAVASCRIPTOBJECT                                                  SIT BACK /                                              ...
WHAT ISTHE PROBLEM?                                                    SIT BACK /                                         ...
AJAX LOADSNEW CONTENT                                                      SIT BACK /                                     ...
BACKBUTTON                                                          SIT BACK /                                            ...
COPYPASTA                                                      SIT BACK /                                                 ...
SURELY, THISISN’T NEW                                                       SIT BACK /                                    ...
LOCATION.HASH                                                    SIT BACK /                                               ...
IF ITAIN’T BROKE                                                     SIT BACK /                                           ...
ALWAYS FELTLIKE A HACK                                                    SIT BACK /                                      ...
REQUIRESJAVASCRIPTON RELOAD                                                        SIT BACK /                             ...
EXAMPLEwww.example.com/old/#/new                                                    SIT BACK /                            ...
WHAT DOESIT DO?                                                 SIT BACK /                                                ...
ADDS TO THEHISTORY BOOKS                                                    SIT BACK /                                    ...
BACK TOTHE FUTURE                                                   SIT BACK /                                            ...
WHEN WOULDTHIS BE USEFUL?                                                     SIT BACK /                                  ...
LIGHTBOXES                                                      SIT BACK /                                                ...
POPUPLOGINS                                                               SIT BACK /                                      ...
COMMENTS                                                       SIT BACK /                                                 ...
PAGINATION                                                          SIT BACK /                                            ...
BROWSERSUPPORT                                                       SIT BACK /                                           ...
FIREFOX                                                    SIT BACK /                                                     ...
CHROME                                                        SIT BACK /                                                  ...
SAFARI                                                    SIT BACK /                                                     S...
OPERA                                                      SIT BACK /                                                     ...
INTERNETEXPLORERas of ie9b2                                                 SIT BACK /                                    ...
HOW?                                                  SIT BACK /                                                   SIT BAC...
CLICK EVENTON LINK                                                       SIT BACK /                                       ...
RENDER DIFFERENTLYON AJAX REQUEST                                                      SIT BACK /                         ...
history.pushState           (stateObj,title,url);                                                SIT BACK /               ...
LISTENFOR EVENT                                                         SIT BACK /                                        ...
window.onpopstate    = fn(evt)                                                       SIT BACK /                           ...
SITES THATUSE IT                                                    SIT BACK /                                            ...
FLICKR                                                          SIT BACK /                                                ...
GOOGLEhttp://www.20thingsilearned.com/                                                     SIT BACK /                     ...
GITHUB                                                      SIT BACK /                                                    ...
SYDLAWRENCE.COM                  SIT BACK /                   SIT BACK                  LISTENUP                   LISTEN ...
USERFRIENDLY                                               SIT BACK /                                                SIT B...
GOOGLEFRIENDLY                                                   SIT BACK /                                               ...
FRIENDLYFRIENDLY                                                         SIT BACK /                                       ...
WANT TOKNOW MOREhttps://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - MDNhttp://dev.w3.org/html5/spec/Ov...
ANYQUESTIONS?                                                  IS IT /                                                   S...
THANKSI’VE BEENSYDLAWRENCEsydlawrence.com@sydlawrencegithub.com/sydlawrencefb.com/sydlawrencetumblr.com/sydlawrence       ...
Upcoming SlideShare
Loading in …5
×

Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API

2,748 views

Published on

My talk for Heart & Sole, January 2011

Video will be online soon.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API

  1. 1. MAKING AJAX USERFRIENDLY, GOOGLEFRIENDLY, FRIENDLYFRIENDLY USING THEHISTORY APIWinchester Studio. 60­61 High Street. Winchester. Hampshire. SO23 9BX. SIT BACK / SIT BACKLondon Studio. 1 The StableYard. 16a Balham Hill. London. SW12 9EB. LISTENUP LISTEN UPT. +44 (0) 20 3137 1469 F. +44 (0) 845 862 0706info@marmaladeontoast.co.ukwww.marmaladeontoast.co.uk
  2. 2. HI, I’MSYDLAWRENCEI’M AFRAID OF HEIGHTSsydlawrence.com@sydlawrencegithub.com/sydlawrencefb.com/sydlawrencetumblr.com/sydlawrence SIT BACK / SIT BACKskype:sydlawrence LISTENUP LISTEN UPyou get the picture
  3. 3. WHATIS IT? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/pixelthing/2555047998/
  4. 4. HTML5 SIT BACK / SIT BACK LISTENUP LISTEN UP
  5. 5. JAVASCRIPTOBJECT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/hamsters/37012321/
  6. 6. WHAT ISTHE PROBLEM? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/benjibot/4803751040/
  7. 7. AJAX LOADSNEW CONTENT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/elstruthio/2761267024/
  8. 8. BACKBUTTON SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/executionsinfo/4573848874/
  9. 9. COPYPASTA SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/anwoodward/3341609205/
  10. 10. SURELY, THISISN’T NEW SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/9422878@N08/4898524174/
  11. 11. LOCATION.HASH SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/spodzone/1172282130/
  12. 12. IF ITAIN’T BROKE SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/trojanguy/3251306440/
  13. 13. ALWAYS FELTLIKE A HACK SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/stevedinn/180630463/
  14. 14. REQUIRESJAVASCRIPTON RELOAD SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/23516192@N08/3418663794/
  15. 15. EXAMPLEwww.example.com/old/#/new SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/grimages/3854628417/
  16. 16. WHAT DOESIT DO? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/doggo/2618699311/
  17. 17. ADDS TO THEHISTORY BOOKS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/namealus/3676208219/
  18. 18. BACK TOTHE FUTURE SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/boltron/2670777828/
  19. 19. WHEN WOULDTHIS BE USEFUL? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/jeffwerner/386367076/
  20. 20. LIGHTBOXES SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/nielsprovos/252176710/
  21. 21. POPUPLOGINS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/seasidebear/3409308888/sizes/l/
  22. 22. COMMENTS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/geishaboy500/541493823/
  23. 23. PAGINATION SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/davidecassenti/4335607637/
  24. 24. BROWSERSUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/
  25. 25. FIREFOX SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/kevenlaw/2784262431/
  26. 26. CHROME SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/professorbop/3872715381/
  27. 27. SAFARI SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/vickispix/296076348/
  28. 28. OPERA SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/sacharules/1441899883/
  29. 29. INTERNETEXPLORERas of ie9b2 SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/celebdu/10200825/
  30. 30. HOW? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/cayusa/2194119780/
  31. 31. CLICK EVENTON LINK SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/8829172@N02/2880158998/
  32. 32. RENDER DIFFERENTLYON AJAX REQUEST SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/shannonmary/187131727/
  33. 33. history.pushState (stateObj,title,url); SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/fras/3800547100/
  34. 34. LISTENFOR EVENT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/bernhardbenke/2370811833/
  35. 35. window.onpopstate = fn(evt) SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/pascalbovet/4657125857/
  36. 36. SITES THATUSE IT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/mattknoth/520009619/
  37. 37. FLICKR SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/brandoncwarren/4209735621/
  38. 38. GOOGLEhttp://www.20thingsilearned.com/ SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/katphotos/1030473901/
  39. 39. GITHUB SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/entropy1138/173848032/
  40. 40. SYDLAWRENCE.COM SIT BACK / SIT BACK LISTENUP LISTEN UPVictorian Times
  41. 41. USERFRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/emdot/22081098/
  42. 42. GOOGLEFRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/donsolo/2189108384/
  43. 43. FRIENDLYFRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/scottkinmartin/478136767/
  44. 44. WANT TOKNOW MOREhttps://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - MDNhttp://dev.w3.org/html5/spec/Overview.html - HTML5 Spec IS IT / SIT BACK LISTEN UP PINT TIME?https://github.com/sydlawrence/fancy-box - My Fancy-box Fork
  45. 45. ANYQUESTIONS? IS IT / SIT BACK LISTEN UP PINT TIME?http://www.flickr.com/photos/dexxus/4158928239/
  46. 46. THANKSI’VE BEENSYDLAWRENCEsydlawrence.com@sydlawrencegithub.com/sydlawrencefb.com/sydlawrencetumblr.com/sydlawrence IS IT / SIT BACKskype:sydlawrence LISTEN UP PINT TIME?you get the picture

×