HTML5 History api to Ajaxify your Magnolia Website

Wednesday, September 5, 12

Know Your History(API)

Using HTML5 History API to Ajaxify your Magnolia WebSite

• 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

Agenda

• William Paoli• Front End Web Developer• From San Francisco,

California, USA• wpaoli@atlassian.com

About Me

How we work together

Interactive Marketing TeamDesigners and Web Developers

Product Marketing Managers

Product Marketing Managers Demand Generation

The Website is our Salesperson

We wanted to go from “This” to “This"

The Atlassian Redesign

August 2012

1,800,000 Visits

4,006,000 Pageviews

The Big Redesign

• SEO • Clean URLS• Clean UI• Great Performance

The Concerns

• SEO • Clean URLS• Clean UI• Great Performance

The Concerns

The Conversation

Requirements of New Product Tour

Easy to Read and Real URLs

Search Engine Friendly/Discoverability

Don’t Break Back Button

Unique page titles for each tab

Unique Description and Keywords available

Great User Experience

“DUDE, you

are using

HISTORY

API Right?”Wednesday, September 5, 12

Of course I am, duh...

So uh...what’s the History API?

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)

history.pushState(data,title,url)

{tabName:‘foo’}Adds to history.state

{tabName:‘foo’}

Currently Not Implemented

{tabName:‘foo’}

Used to modify window.location

{tabName:‘foo’}

AKA “Fake” URLS

history.pushState(data,title,url);

history.replaceState(data,title,url);

history.pushState(data,title,url);

history.replaceState(data,title,url);

window.onpopstate = function(){}

A useless example that hopefully illustrates

how this works

Level 1

Old Skool Style

Demo of static tabs (reload each time)

Static Site Report Card

Level 2Get Some jQuery up in there!

JS tab solution

JS Tab Report Card

Level 3Let’s add that History thing William keeps talking about

History API to the Rescue

history.pushState(data,title, url)

History API’d tab solution

History API’d Tab Report Card

Level 4Put it all together!

History API’d tab + Static Pages behind the fake urls solution

History API Tab with Static Behnd

Dude, um did you forget IE again?!

There’s a plugin for that

• 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!

Main Points to this

Whose Happy?

Jeff the Designer is Happy!

Whose Happy?

Mr “SEO” Joe is happy!

Whose Happy?

Mr “SEO” Joe is happy!

The Users of atlassian.com are Happy!

Thanks for listening!

Questions?

Be sure to check out:Continuous Media Playback and

RequireJS ModulesDavid Pronk

David Pronk

HTML5 History api to Ajaxify your Magnolia Website

Technology

Transcript of HTML5 History api to Ajaxify your Magnolia Website

New varieties of Magnolia biondii and Magnolia cylindrica ......Magnolia Magnolia biondii Magnolia cylindrica Magnoliaceae tetraploid variety Abstract Magnolia biondii var. purpurascens

Academy PRO: HTML5 API Introduction

HTML5, part III – API, … Štěpán Bechynský, @stepanb Developer Evangelist Microsoft, Czech Republic.

ArcGIS JavaScript API (build a web layer-based map application with html5 and javascript)

Los API JavaScript de HTML5

Mobile Application Installation and Deployment Guide ... · • Oracle MapViewer HTML5 API - Javascript API for building highly-interactive map views .

HTML5 Features on Tizendownload.tizen.org/.../slides/TDC2013-HTML5_Features_on_Tizen.pdf · HTML5 Features on Tizen Wonsuk Lee, ... • Web Storage, File Reader API, File Writer API,

Microsoft’s Browser Roadmap€¦ · HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript

ColdFusion - Transformation over the years · 2020. 8. 28. · HTML5 + REST + Mobility + API Management +Microservices. HTML5 support. Apache Tomcat. Secure profile. REST services.

Introduction to HTML5APIs spun off HTML5 •Web Workers API •Web Messaging APIs (cross-doc/ postmg + channel messaging) •WebSocket API + Protocol; & Server-Sent Events.

Using the HTML5 WebSocket API - InfoQ.com · Using the HTML5 WebSocket API In this chapter, we’ll explore what you can do with the most powerful communication feature in the HTML5

HTML5 Knockout Web API SignalR - Brad Wilsonbradwilson.typepad.com/presentations/knockout-webapi-signalr.pdf · HTML5 Knockout Web API SignalR ... Web API excels at processing and

HTML5 API WebSQL Database: DML: Data Manipulation Language

Les API HTML5 - lis-lab.fr · API HTML5 API : Application Programming Interfaces des composants permettant aux developpeurs d’utiliser des´ fonctionnalites complexe d’une mani´

HTML5 & JavaScript HTML5 JavaScript & HTML5 HTML5 HTML5 ...ec.nikkeibp.co.jp/item/contents/mokuji/m_229980.pdf · (JavaScript + HTML API) 72 Part2 HTML5 80 HTML5 File APIJs r Server-Sent

JETER - Magnolia, Texas · Magnolia High School Magnolia West High DSchool Magnolia Jr High School Magnolia 6th WGrade Magnolia Elementary School Williams Elementary School Celeste

Html5 History-API

Guitar Effects with the HTML5 Audio API

HTML5/CSS3 Course Introduction to HTML5 · HTML5/CSS3 Course Introduction to HTML5 Presenter: Msc. Luong Tran Hy Hien, FIT of HCMUP. 2 HTML5 = HTML + CSS + JS API. Contents •HTML5

Chrome+HTML5 Developers Live Japan #8 - Web MIDI API