Your SlideShare is downloading. ×
0
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Storytelling using Javascript HTML5 CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Storytelling using Javascript HTML5 CSS3

4,009

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Storytellingusing Javascript, HTML5, CSS3 with Storify @xdamman - March 2011
  • 2. http://storify.com/nzherald/reaction-to-japanese-tsunami http://dl.dropbox.com/u/1702667/sites/kenburns/index.html
  • 3. JSON/CSS3/JavaScript is the new Model/View/Controller
  • 4. Model: JSONStory url + ‘.json’ - e.g. http://storify.com/nzherald/reaction-to-japanese-tsunami.json ...
  • 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. 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. 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. View: HTML5+CSS3
  • 9. CSS3
  • 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. 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. Sources available onhttp://github.com/storify/templates Storify Social media stories @xdamman - March 2011

×