Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
Report
Syd LawrenceFollow
Jan. 29, 2011•0 likes•1,183 views
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
Jan. 29, 2011•0 likes•1,183 views
Download to read offline
Report
Technology
Business
My talk for Heart & Sole, January 2011 Video will be online soon.
Syd LawrenceFollow
Recommended
Mobile web app developmentSyd Lawrence
Mobile Web App Development (Becoming native)Syd Lawrence
The Creativity (R)Evolution - CREATE Festival 2015Denise Jacobs
The Creativity (R)Evolution - UX Week 2014Denise Jacobs
Presentationcreativityrevolutionuxweek 140912120824-phpapp02Paula Marques
White Space CreativityDenise Jacobs
More Related Content
What's hot
Infinite Possibilities - Devoxx Belgium, 2014Denise Jacobs
Immediate Inspiration Denise Jacobs
BPL: Libraries, Learning & Playhblowers
FeynmanParkhurst Graphic Design
Banish Your Inner Critic to Unleash Creativity – edUi Conference 2015Denise Jacobs
Creditsr0xee
Similar to Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
Introduction to javascriptSyd Lawrence
Frilansverktøykasse (praktiske tips for budsjettering og prosjektstyring)Andreas Beining
Javascript DevelopmentSyd Lawrence
Mobile Web App Development (Building your API)Syd Lawrence
Varrati Zack slideshare_presentationZack James
Wilkins, akeem visual resume Awilkins1920
Recently uploaded
Data Integrity TrendsPrecisely
Jino Clone: Develop a Car Wash Mobile App with Limited Resources eSiteWorld TechnoLabs Pvt. Ltd.
Microsoft Azure New - Sep 2023Daniel Toomey
ContainerDays Hamburg 2023 — Cilium Workshop.pdfRaphaël PINSON
Improving Employee Experiences on Cisco RoomOS Devices, Webex, and Microsoft ...ThousandEyes
Swiss Re Reinsurance Solutions - Automated Claims Experience – Insurer Innova...The Digital Insurer
Making AJAX User Friendly, Google Friendly, Friendly Friendly using the History API
- 1. MAKING AJAX USER FRIENDLY, GOOGLE FRIENDLY, FRIENDLY FRIENDLY USING THE HISTORY API Winchester Studio. 6061 High Street. Winchester. Hampshire. SO23 9BX. SIT BACK / SIT BACK London Studio. 1 The StableYard. 16a Balham Hill. London. SW12 9EB. LISTENUP LISTEN UP T. +44 (0) 20 3137 1469 F. +44 (0) 845 862 0706 info@marmaladeontoast.co.uk www.marmaladeontoast.co.uk
- 2. HI, I’M SYDLAWRENCE I’M AFRAID OF HEIGHTS sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence SIT BACK / SIT BACK skype:sydlawrence LISTENUP LISTEN UP you get the picture
- 3. WHAT IS IT? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/pixelthing/2555047998/
- 4. HTML5 SIT BACK / SIT BACK LISTENUP LISTEN UP
- 5. JAVASCRIPT OBJECT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/hamsters/37012321/
- 6. WHAT IS THE PROBLEM? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/benjibot/4803751040/
- 7. AJAX LOADS NEW CONTENT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/elstruthio/2761267024/
- 8. BACK BUTTON SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/executionsinfo/4573848874/
- 9. COPY PASTA SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/anwoodward/3341609205/
- 10. SURELY, THIS ISN’T NEW SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/9422878@N08/4898524174/
- 11. LOCATION.HASH SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/spodzone/1172282130/
- 12. IF IT AIN’T BROKE SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/trojanguy/3251306440/
- 13. ALWAYS FELT LIKE A HACK SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/stevedinn/180630463/
- 14. REQUIRES JAVASCRIPT ON RELOAD SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/23516192@N08/3418663794/
- 15. EXAMPLE www.example.com/old/#/new SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/grimages/3854628417/
- 16. WHAT DOES IT DO? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/doggo/2618699311/
- 17. ADDS TO THE HISTORY BOOKS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/namealus/3676208219/
- 18. BACK TO THE FUTURE SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/boltron/2670777828/
- 19. WHEN WOULD THIS BE USEFUL? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/jeffwerner/386367076/
- 20. LIGHTBOXES SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/nielsprovos/252176710/
- 21. POPUP LOGINS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/seasidebear/3409308888/sizes/l/
- 22. COMMENTS SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/geishaboy500/541493823/
- 23. PAGINATION SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/davidecassenti/4335607637/
- 24. BROWSER SUPPORT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/annagaycoan/3750144703/
- 25. FIREFOX SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/kevenlaw/2784262431/
- 26. CHROME SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/professorbop/3872715381/
- 27. SAFARI SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/vickispix/296076348/
- 28. OPERA SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/sacharules/1441899883/
- 29. INTERNET EXPLORER as of ie9b2 SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/celebdu/10200825/
- 30. HOW? SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/cayusa/2194119780/
- 31. CLICK EVENT ON LINK SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/8829172@N02/2880158998/
- 32. RENDER DIFFERENTLY ON AJAX REQUEST SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/shannonmary/187131727/
- 33. history.pushState (stateObj,title,url); SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/fras/3800547100/
- 34. LISTEN FOR EVENT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/bernhardbenke/2370811833/
- 35. window.onpopstate = fn(evt) SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/pascalbovet/4657125857/
- 36. SITES THAT USE IT SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/mattknoth/520009619/
- 37. FLICKR SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/brandoncwarren/4209735621/
- 38. GOOGLE http://www.20thingsilearned.com/ SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/katphotos/1030473901/
- 39. GITHUB SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/entropy1138/173848032/
- 40. SYDLAWRENCE.COM SIT BACK / SIT BACK LISTENUP LISTEN UP Victorian Times
- 41. USER FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/emdot/22081098/
- 42. GOOGLE FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/donsolo/2189108384/
- 43. FRIENDLY FRIENDLY SIT BACK / SIT BACK LISTENUP LISTEN UP http://www.flickr.com/photos/scottkinmartin/478136767/
- 44. WANT TO KNOW MORE https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - MDN http://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. ANY QUESTIONS? IS IT / SIT BACK LISTEN UP PINT TIME? http://www.flickr.com/photos/dexxus/4158928239/
- 46. THANKS I’VE BEEN SYDLAWRENCE sydlawrence.com @sydlawrence github.com/sydlawrence fb.com/sydlawrence tumblr.com/sydlawrence IS IT / SIT BACK skype:sydlawrence LISTEN UP PINT TIME? you get the picture
Editor's Notes
- \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