Great experiences with standard technologies HTML5, CSS3, JavaScript, ...
Storytelling using Javascript HTML5 CSS3
-
Upload
xavier-damman -
Category
Design
-
view
4.026 -
download
1
description
Transcript of Storytelling using Javascript HTML5 CSS3
![Page 1: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/1.jpg)
Storytellingusing Javascript, HTML5, CSS3
Storifywith
@xdamman - March 2011
![Page 2: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/2.jpg)
http://storify.com/nzherald/reaction-to-japanese-tsunami
http://dl.dropbox.com/u/1702667/sites/kenburns/index.html
![Page 3: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/3.jpg)
JSON/CSS3/JavaScriptis the new Model/View/Controller
![Page 4: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/4.jpg)
Model: JSONStory url + ‘.json’ - e.g. http://storify.com/nzherald/reaction-to-japanese-tsunami.json
...
![Page 5: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/5.jpg)
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)
![Page 6: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/6.jpg)
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’
![Page 7: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/7.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’
![Page 8: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/8.jpg)
View: HTML5+CSS3
![Page 9: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/9.jpg)
CSS3
![Page 10: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/10.jpg)
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, ...
![Page 11: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/11.jpg)
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
![Page 12: Storytelling using Javascript HTML5 CSS3](https://reader031.fdocuments.us/reader031/viewer/2022013121/554bbfddb4c90530298b4fd1/html5/thumbnails/12.jpg)
Sources available onhttp://github.com/storify/templates
Storify
@xdamman - March 2011
Social media stories