How can I make an online book like http://www.20thingsilearned.com/

Question

I recently found this site made by the Google team.

http://www.20thingsilearned.com/

So far, I understand that this is not based on Flash. How can I use this technology to create an online book using their technology?

Thanks.

Answer 1

I looked in ordinary places to see if there is a framework or something else, but I found only these two things (it looks like this will be the TONE of work):

news.ycombinator.com/item?id=1918551 →> gist.github.com/705761

Alternatively, you can watch slides at http://slides.html5rocks.com .

They have a Google Code project page at code.google.com/p/html5rocks/wiki/Slides, where you can download the source for this.

EDIT
check this! http://bartaz.github.com/impress.js

and this!
http://lab.hakim.se/reveal-js/

Answer 2

This is HTML5. You can check the explanation here: http://www.html5rocks.com/tutorials/casestudies/20things_pageflip.html :)

Or, if you want, you can do it using the jQuery Booklet, but not as smooth as HTML5, see here: http://tympanus.net/Tutorials/MoleskineNotebook/

Answer 3

They sent the source code for the entire application (running on the Google App Engine) under the GPL v2 at http://code.google.com/p/20thingsilearned/ so that you can reproduce the whole effect of the book too.

Answer 4

Yes, this is not a flash drive, but you can also use flash or flexx to develop it. It is designed using HMTL 5 and javascript. HTML 5 has a canvas object, and I believe that it uses the properties of the canvas to intimidate it. However, if you look for some jQuery plugins, you can also get similar results.