Storytelling using Javascript HTML5 CSS3

4,361
-1

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,361
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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

×