storytelling using javascript html5 css3
DESCRIPTION
Discover how you can tell stories using Javascript, html5, css3 and the Storify public API.TRANSCRIPT
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