Storytelling using Javascript HTML5 CSS3

Storytellingusing Javascript, HTML5, CSS3

Storifywith

@xdamman - March 2011

http://storify.com/nzherald/reaction-to-japanese-tsunami

http://dl.dropbox.com/u/1702667/sites/kenburns/index.html

JSON/CSS3/JavaScriptis the new Model/View/Controller

Model: JSONStory url + ‘.json’ - e.g. http://storify.com/nzherald/reaction-to-japanese-tsunami.json

...

Details of the editor who added this

element to the story

Normalized details of the

story element (title,

thumbnail, description,

author)

position indexof the story element (string)

Number of seconds since January 1st 1970To convert to Javascript date: new Date(parseInt(story.elements[“3”].created_at,10)*1000);

http://storify.com/nzherald/reaction-to-japanese-tsunami.json

Timestamps (epoch time in

seconds)

image attached to the element

(if any)

http://storify.com/nzherald/reaction-to-japanese-tsunami

Story headertitle, author,

published_at, description

Story elementsource: ‘facebook’

elementClass: ‘fbpost’

Story elementsource: ‘twitter’

elementClass: ‘tweet’

Story elementsource: ‘twitter’

elementClass: ‘tweet’image: src: ‘http://(...).jpg’

http://storify.com/nzherald/reaction-to-japanese-tsunami

Story elementsource: ‘twitter’

elementClass: ‘tweet’image: src: ‘http://(...).jpg’

Story elementsource: ‘storify’

elementClass: ‘text’

Story elementsource: ‘twitter’

elementClass: ‘tweet’

View: HTML5+CSS3

CSS3

Controller: JavaScript

1. Fetch the model jQuery> $.getJSON(storyurl+’.json?callback=?’,function(storyurl) { });

2. Fill the HTML template with the storyjQuery> $(‘#story h1’).html(story.title);

3. Add extra behaviors, animations, ...

We fetch the model$.getJSON

We render the story$(domElement).html();

We walkthrough each story element to gather all images

story.elements[i].image and all twitter users ‘ avatars

story.elements[i].author.avatar

We render the images in a slideshow with a Ken Burns

effectjQuery library from

http://willmcgugan.com/2011/2/26/ken-burns-effect-with-javascript-

and-canvas

Sources available onhttp://github.com/storify/templates

Storify

@xdamman - March 2011

Social media stories