Your SlideShare is downloading. ×
  • Like
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,207 views
Published

My talk for Heart & Sole, January 2011 …

My talk for Heart & Sole, January 2011

Video will be online soon.

Published in Technology , Business
  • 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
2,207
On SlideShare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
29
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
  • 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

  • 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. 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. WHATIS IT? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/pixelthing/2555047998/
  • 4. HTML5 SIT BACK / SIT BACK LISTENUP LISTEN UP
  • 5. JAVASCRIPTOBJECT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/hamsters/37012321/
  • 6. WHAT ISTHE PROBLEM? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/benjibot/4803751040/
  • 7. AJAX LOADSNEW CONTENT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/elstruthio/2761267024/
  • 8. BACKBUTTON SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/executionsinfo/4573848874/
  • 9. COPYPASTA SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/anwoodward/3341609205/
  • 10. SURELY, THISISN’T NEW SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/9422878@N08/4898524174/
  • 11. LOCATION.HASH SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/spodzone/1172282130/
  • 12. IF ITAIN’T BROKE SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/trojanguy/3251306440/
  • 13. ALWAYS FELTLIKE A HACK SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/stevedinn/180630463/
  • 14. REQUIRESJAVASCRIPTON RELOAD SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/23516192@N08/3418663794/
  • 15. EXAMPLEwww.example.com/old/#/new SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/grimages/3854628417/
  • 16. WHAT DOESIT DO? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/doggo/2618699311/
  • 17. ADDS TO THEHISTORY BOOKS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/namealus/3676208219/
  • 18. BACK TOTHE FUTURE SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/boltron/2670777828/
  • 19. WHEN WOULDTHIS BE USEFUL? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/jeffwerner/386367076/
  • 20. LIGHTBOXES SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/nielsprovos/252176710/
  • 21. POPUPLOGINS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/seasidebear/3409308888/sizes/l/
  • 22. COMMENTS SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/geishaboy500/541493823/
  • 23. PAGINATION SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/davidecassenti/4335607637/
  • 24. BROWSERSUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/annagaycoan/3750144703/
  • 25. FIREFOX SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/kevenlaw/2784262431/
  • 26. CHROME SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/professorbop/3872715381/
  • 27. SAFARI SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/vickispix/296076348/
  • 28. OPERA SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/sacharules/1441899883/
  • 29. INTERNETEXPLORERas of ie9b2 SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/celebdu/10200825/
  • 30. HOW? SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/cayusa/2194119780/
  • 31. CLICK EVENTON LINK SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/8829172@N02/2880158998/
  • 32. RENDER DIFFERENTLYON AJAX REQUEST SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/shannonmary/187131727/
  • 33. history.pushState (stateObj,title,url); SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/fras/3800547100/
  • 34. LISTENFOR EVENT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/bernhardbenke/2370811833/
  • 35. window.onpopstate = fn(evt) SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/pascalbovet/4657125857/
  • 36. SITES THATUSE IT SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/mattknoth/520009619/
  • 37. FLICKR SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/brandoncwarren/4209735621/
  • 38. GOOGLEhttp://www.20thingsilearned.com/ SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/katphotos/1030473901/
  • 39. GITHUB SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/entropy1138/173848032/
  • 40. SYDLAWRENCE.COM SIT BACK / SIT BACK LISTENUP LISTEN UPVictorian Times
  • 41. USERFRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/emdot/22081098/
  • 42. GOOGLEFRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/donsolo/2189108384/
  • 43. FRIENDLYFRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UPhttp://www.flickr.com/photos/scottkinmartin/478136767/
  • 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. ANYQUESTIONS? IS IT / SIT BACK LISTEN UP PINT TIME?http://www.flickr.com/photos/dexxus/4158928239/
  • 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