Storytelling using Javascript HTML5 CSS3
Upcoming SlideShare
Loading in...5
×
 

Storytelling using Javascript HTML5 CSS3

on

  • 3,702 views

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.

Statistics

Views

Total Views
3,702
Views on SlideShare
3,647
Embed Views
55

Actions

Likes
2
Downloads
15
Comments
1

6 Embeds 55

http://storify.com 34
http://www.linkedin.com 7
http://localhost.storify.com:3000 4
https://www.linkedin.com 4
http://www.mundotalentyart.com 3
http://www.verious.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Storytelling using Javascript HTML5 CSS3 Storytelling using Javascript HTML5 CSS3 Presentation Transcript

  • Storytellingusing Javascript, HTML5, CSS3 with Storify @xdamman - March 2011
  • http://storify.com/nzherald/reaction-to-japanese-tsunami http://dl.dropbox.com/u/1702667/sites/kenburns/index.html
  • 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 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);
  • 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’
  • 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’
  • View: HTML5+CSS3
  • CSS3
  • 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, ...
  • 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
  • Sources available onhttp://github.com/storify/templates Storify Social media stories @xdamman - March 2011