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,285

Published on

My talk for Heart & Sole, January 2011

Video will be online soon.

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

  • Be the first to like this

No Downloads
Views
Total Views
2,285
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • I’m sydlawrence\n afraid of heights\n lead developer at Marmalade\n part time lecturer at Winchester Uni on the Digital Media Development Course\n love the future\n Going to talk about the new History API available in all decent browsers\n will also cover mistakes made by developers with ajax\n\n
  • What is it?\n You, you guessed it, it is part of the ‘html5’ spec\n\n
  • HTML5\n but of course it is javascript... That discussion is certainly for another time...\n One of the many new javascript toys available in the HTML5 spec\n DeviceOrientation\n GeoLocation\n LocalStorage\n\n
  • Javascript Object\n basically window.history is a javascript object\n It has been available for a long time\n window.history.back\n a couple of NEW tools\n\n
  • What is the problem?\n Why do we need window.history\n\n
  • Ajax loads new content\n out with the old, in with the new... \n that content is dynamically generated.. \n google doesnt see that content... \n unless you use a link for google to spider.\n\n
  • Back button\n People press the back button all the time... \n Much more than I ever thought... \n The amount of times I have seen people get confused by pressing back, and then leaving a site..\n One of the horrendous issues with Flash...\n USER FRIENDLY\n\n
  • Copy & Paste\n Same, same\n People like to share urls...\n GOOGLE FRIENDLY\n They will share the wrong url!\n think ow.ly\n Dont make people confused the first time they click on a link to get to your site...\n First time visitors...\n Treat them with honour, with diginity, intice them back for more...\n\n
  • Surely this isn’t new\n This isn’t a new problem.. this wasn’t a problem first discovered in the last six months\n Nope\n People like to find solutions\n\n
  • location.hash\n There has been an interesting solution, using location.hash\n javascript can modify the hash location of the url...\n i.e. adding a # on the end followed by a string..\n\n
  • if it ain’t broke\n don’t fix it\n BUT there are issues\n\n
  • always felt like a hack\n always was a hack... location.hash was not meant for that kind of thing (with regards to ajax, hidden content maybe, but not modified content)\n\n
  • requires javascript on reload\n If you send a link to someone with the hash location... the new user needs javascript for that to take affect...\n OK, ignore lack of javascript...\n What about Google... Your javascript on reload is to populate with the new ajaxed content\n\n
  • run through example\n www.example.com/old/#/new\n visit old\n www.example.com/old/\n click something\n www.example.com/old/#/new\n share link\n www.example.com/old/#/new\n old static content, then javascript needs to get the new\n\n
  • What does it do?\n History stack, that behaves in the same way a simple array would\n\n
  • Adds to the history books\n push on to the stack\n\n
  • Back to the Future\n popstate event when they press forwards\n\n
  • When Would This be useful\n When the content changes...\n When someone might want to share the content\n back button\n copy paste\n\n
  • Lightboxes\n Images..\n videos\n\n
  • Popup logins\n more and more sites use this\n what if they fail to login and want to try again\n\n
  • Comments\n pages\n\n
  • Pagination\n pages\n\n
  • Browser Support\n Remember, this is still bleeding edge\n\n
  • Firefox\n introduced in gecko 2\n firefox 4 \n\n
  • Chrome\n WebKit 528\n Live version \n\n
  • Safari\n Also uses webkit\n Live version \n\n
  • Opera\n Not as yet\n\n
  • Internet Explorer\n Not as yet\n\n
  • How do you use this wonderful thing?\n run through workflow\n same ajax mistaked\n\n
  • Click event on link\n Always do this for ajax content... to the same url that you would without javascript\n ALWAYS\n\n
  • render differently on ajax requests\n Don’t have different urls..\n\n
  • history.pushState\n this is used to add to the history\n history.pushState(StateObj,title,url)\n local domain url\n StateObj is anthing you might want to retreive later\n \n There is also replaceState that operates in the same way, but it replaces the current state\n
  • listen for event\n when someone presses back or forward..\n\n
  • window.onpopstate\npopstate event\nwindow.onpopstate = function(event)\npasses data\ndata.state = StateObj\n\n
  • sites that use it\n\n
  • flickr\nfor their lightboxes\n
  • google\n20 things i learned about the web ebook\n
  • github\nfile browsing\n
  • sydlawrence.com\n\nME!\n
  • USER Friendly\n\nBack / forward button\nSharing Links\n
  • Google Friendly\n\n\nindexable content\n
  • Friendly friendly\n\nIts not even hard to do!\n
  • Want to know more\n\nMozilla Developer Network\nHTML5 Spec\nMy Fancy-box fork on github\n
  • Any Questions?\n\n\n\nHow to check in browsers\ncheck to see if the pushstate function exists\n\nwindow.onpopstate = function (evt) {}\nhistory.pushState(StateObj,title,url);\n
  • Thanks, I’v been sydlawrence\n
  • Transcript of "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
    1. A particular slide catching your eye?

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

    ×