HTML5 History api to Ajaxify your Magnolia Website

1. Wednesday, September 5, 12

2. Know Your History(API) Using HTML5 History API to Ajaxify your Magnolia WebSite Wednesday, September 5, 12

3. Agenda • The story of when I realized I needed to learn more about the history API • A stupidly simple example of the code in action • A walkthrough of our product tour redesign • How it works with magnolia Wednesday, September 5, 12

4. About Me • William Paoli • Front End Web Developer • From San Francisco, California, USA • wpaoli@atlassian.com Wednesday, September 5, 12

5. How we work together Interactive Marketing Team Designers and Web Developers Wednesday, September 5, 12

6. How we work together Interactive Marketing Team Product Marketing Managers Designers and Web Developers Wednesday, September 5, 12

7. How we work together Interactive Marketing Team Product Marketing Managers Demand Generation Designers and Web Developers Wednesday, September 5, 12

8. The Website is our Salesperson Wednesday, September 5, 12

9. The Atlassian Redesign We wanted to go from “This” to “This" August 2012 Wednesday, September 5, 12

10. The Atlassian Redesign We wanted to go from “This” to “This" 1,800,000 Visits Wednesday, September 5, 12

11. The Atlassian Redesign We wanted to go from “This” to “This" 4,006,000 Pageviews Wednesday, September 5, 12

12. The Atlassian Redesign We wanted to go from “This” to “This" Wednesday, September 5, 12

13. The Big Redesign Wednesday, September 5, 12

14. The Concerns • SEO • Clean URLS • Clean UI • Great Performance Wednesday, September 5, 12

15. The Concerns • SEO • Clean URLS • Clean UI • Great Performance Wednesday, September 5, 12

16. The Conversation Wednesday, September 5, 12

26. Requirements of New Product Tour Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back Button Wednesday, September 5, 12

27. “DUDE, you are using the HISTORY API Right?” Wednesday, September 5, 12

28. Of course I am, duh... Wednesday, September 5, 12

29. Of course I am, duh... So uh...what’s the History API? Wednesday, September 5, 12

31. window.history.length - returns the number of items window.history.go(n)- go forward/backward any number window.history.back()- go back window.history.forward()- go forward window.history.pushState(data, title, url) window.history.replaceState(data, title, url) Wednesday, September 5, 12

34. history.pushState(data,title,url) Wednesday, September 5, 12

35. history.pushState(data,title,url) {tabName:‘foo’} Adds to history.state Wednesday, September 5, 12

36. history.pushState(data,title,url) {tabName:‘foo’} Currently Not Implemented Wednesday, September 5, 12

37. history.pushState(data,title,url) {tabName:‘foo’} Used to modify window.location Wednesday, September 5, 12

38. history.pushState(data,title,url) {tabName:‘foo’} AKA “Fake” URLS Wednesday, September 5, 12

39. history.pushState(data,title,url); history.replaceState(data,title,url); Wednesday, September 5, 12

40. history.pushState(data,title,url); history.replaceState(data,title,url); window.onpopstate = function(){} Wednesday, September 5, 12

41. A useless example that hopefully illustrates how this works Wednesday, September 5, 12

42. Level 1 Old Skool Style Wednesday, September 5, 12

43. Demo of static tabs (reload each time) Wednesday, September 5, 12

44. Static Site Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back Button Wednesday, September 5, 12

51. Level 2 Get Some jQuery up in there! Wednesday, September 5, 12

52. JS tab solution Wednesday, September 5, 12

53. JS Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back Button Wednesday, September 5, 12

60. Level 3 Let’s add that History thing William keeps talking about Wednesday, September 5, 12

61. History API to the Rescue history.pushState(data,title, url) Wednesday, September 5, 12

62. History API’d tab solution Wednesday, September 5, 12

63. History API’d Tab Report Card Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back Button Wednesday, September 5, 12

70. Level 4 Put it all together! Wednesday, September 5, 12

71. History API’d tab + Static Pages behind the fake urls solution Wednesday, September 5, 12

72. History API Tab with Static Behnd Great User Experience Easy to Read and Real URLs Search Engine Friendly/Discoverability Unique page titles for each tab Unique Description and Keywords available Don’t Break Back Button Wednesday, September 5, 12

79. Dude, um did you forget IE again?! Wednesday, September 5, 12

80. There’s a plugin for that Wednesday, September 5, 12

81. Main Points to this • HTML5 History api is very valuable • We can now create ajax pages that have clean urls and is able to be search engine optimised • We made people happy! Wednesday, September 5, 12

82. Whose Happy? Wednesday, September 5, 12

83. Whose Happy? Jeﬀ the Designer is Happy! Wednesday, September 5, 12

84. Whose Happy? Jeﬀ the Designer is Happy! Mr “SEO” Joe is happy! Wednesday, September 5, 12

85. Whose Happy? Jeﬀ the Designer is Happy! Mr “SEO” Joe is happy! The Users of atlassian.com are Happy! Wednesday, September 5, 12

86. Thanks for listening! Wednesday, September 5, 12

87. Questions? Wednesday, September 5, 12

88. Be sure to check out: Continuous Media Playback and RequireJS Modules David Pronk David Pronk Wednesday, September 5, 12

HTML5 History api to Ajaxify your Magnolia Website

Recommended

Recommended

More Related Content

More from bkraft

More from bkraft (20)

Recently uploaded

Recently uploaded (20)

HTML5 History api to Ajaxify your Magnolia Website