Storytellingusing Javascript, HTML5, CSS3              with        Storify       @xdamman - March 2011
http://storify.com/nzherald/reaction-to-japanese-tsunami                                                           http://...
JSON/CSS3/JavaScript   is the new Model/View/Controller
Model: JSONStory url + ‘.json’ - e.g. http://storify.com/nzherald/reaction-to-japanese-tsunami.json            ...
http://storify.com/nzherald/reaction-to-japanese-tsunami.json                   position index           of the story elem...
http://storify.com/nzherald/reaction-to-japanese-tsunami                Story header           title, author,published_at,...
http://storify.com/nzherald/reaction-to-japanese-tsunami               Story element             source: ‘twitter’        ...
View: HTML5+CSS3
CSS3
Controller: JavaScript1. Fetch the model  jQuery> $.getJSON(storyurl+’.json?  callback=?’,function(storyurl) { });2. Fill ...
We fetch the model                       $.getJSON            We render the story            $(domElement).html();    We w...
Sources available onhttp://github.com/storify/templates             Storify             Social media stories            @x...
Upcoming SlideShare
Loading in...5
×

Storytelling using Javascript HTML5 CSS3

4,093

Published on

Discover how you can tell stories using Javascript, html5, css3 and the Storify public API.

Published in: Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,093
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Storytelling using Javascript HTML5 CSS3"

  1. 1. Storytellingusing Javascript, HTML5, CSS3 with Storify @xdamman - March 2011
  2. 2. http://storify.com/nzherald/reaction-to-japanese-tsunami http://dl.dropbox.com/u/1702667/sites/kenburns/index.html
  3. 3. JSON/CSS3/JavaScript is the new Model/View/Controller
  4. 4. Model: JSONStory url + ‘.json’ - e.g. http://storify.com/nzherald/reaction-to-japanese-tsunami.json ...
  5. 5. http://storify.com/nzherald/reaction-to-japanese-tsunami.json position index of the story element (string) Details of the editor who added thiselement to the storyimage attachedto the element (if any) Normalized details of thestory element (title, thumbnail, description, author) Timestamps Number of seconds since January 1st 1970(epoch time in To convert to Javascript date: seconds) new Date(parseInt(story.elements[“3”].created_at,10)*1000);
  6. 6. http://storify.com/nzherald/reaction-to-japanese-tsunami Story header title, author,published_at, description Story element source: ‘twitter’ elementClass: ‘tweet’ Story element source: ‘facebook’ elementClass: ‘fbpost’ Story element source: ‘twitter’ elementClass: ‘tweet’image: src: ‘http://(...).jpg’
  7. 7. http://storify.com/nzherald/reaction-to-japanese-tsunami Story element source: ‘twitter’ elementClass: ‘tweet’image: src: ‘http://(...).jpg’ Story element source: ‘storify’ elementClass: ‘text’ Story element source: ‘twitter’ elementClass: ‘tweet’
  8. 8. View: HTML5+CSS3
  9. 9. CSS3
  10. 10. Controller: JavaScript1. Fetch the model jQuery> $.getJSON(storyurl+’.json? callback=?’,function(storyurl) { });2. Fill the HTML template with the story jQuery> $(‘#story h1’).html(story.title);3. Add extra behaviors, animations, ...
  11. 11. 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 effect jQuery library fromhttp://willmcgugan.com/2011/2/26/ken-burns-effect-with-javascript- and-canvas
  12. 12. Sources available onhttp://github.com/storify/templates Storify Social media stories @xdamman - March 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×