By Min Li Chan, Google Chrome Team
Late last year, we released an illustrated online guidebook for everyday users who are curious about how browsers and the web work. In building 20 Things I Learned about Browsers and the Web with HTML5, JavaScript and CSS with our friends at Fi, we heard from many of you that you’d like to get your hands on the source code. Today, we’re open sourcing all the code for this web book at http://code.google.com/p/20thingsilearned, so that you can use and tinker with the code for your own projects.
20 Things I Learned was celebrated this year as an Official Honoree at the 15th Annual Webby Awards in the categories of Education, Best Visual Design (Function), and Best Practices. For those of you who missed our initial release last year, here’s a quick recap of the APIs behind some of the web book’s popular features:
- The book uses the HTML5 canvas element to animate some of the illustrations in the book and enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas. You can read more about the page flips on this HTML5rocks tutorial.
- The book takes advantage of the Application Cache API so that is can be read offline after a user’s first visit.
- With the Local Storage API, readers can resume reading where they left off.
- The History API provides a clutter-free URL structure that can be indexed by search engines.
- CSS3 features such as web fonts, animations, gradients and shadows are used to enhance the visual appeal of the app.
With this open source release, we’ve also taken the opportunity to translate 20 Things I Learned into 15 languages: Bahasa Indonesia, Brazilian Portuguese, Chinese (Simplified and Traditional), Czech, Dutch, English, French, German, Italian, Japanese, Polish, Russian, Spanish, and Tagalog.
We hope that web books like 20 Things I Learned continue to inspire web developers to find compelling ways to bring the power of open web technologies to education. 20 Things I Learned is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. For those of you who’ve previously read this web book, don’t forget to hit refresh on your browser to see the new language options.
Min Li Chan is a Product Marketing Manager on the Google Chrome Team and the project curator/author for 20 Things I Learned about Browsers and the Web.
Posted by Scott Knaster, Editor
I don't see any text on the pages of the "book". Running Chrome 12.0.742.68 on Linux Ubuntu.
ReplyDeleteThanks a lot. I am currently working on a photo album project for clients, and they absolutely want the page flip effect to work on the iPad. I'll definitely have a look at the source code.
ReplyDeleteYou guys did an amazing job on this project. Problem though, I followed the link and can't find anything to download :(
ReplyDeleteWas really looking forward to testing this out.
I can't see the code in google-code... What's happen?
ReplyDelete@Nacho - see http://code.google.com/p/20thingsilearned/source/checkout
ReplyDeleteYou'll need to use SVN to get a copy.
Hi Gamesbook,
ReplyDeleteEven http://code.google.com/p/20thingsilearned/source/checkout in SVN is not working...
Getting an error > Server sent unexpected return value (405 Method Not Allowed) in response to
Is there an alternative way to download the source?
Hi,
ReplyDeleteI am able to download the code from http://20thingsilearned.googlecode.com/svn/trunk/ 20thingsilearned-read-only using SVN
Hi
ReplyDeleteI'm trying to run 20things inside my Eclipse Helios installation, with all necessary Google plugins and always I'm getting the following error message
$MY_WORKSPACE\20thingsilearned\war\php\includes\header.php:206: Fatal Error: Method call 'getLOCALE_META_DESCRIPTION' is not allowed for a null value.
Anybody has an answer please? Thx a lot in advance
To import the US English data, load the following URL in your browser:
Deletehttp://localhost:8080/populateds?locale=0 (replace the port with the one being
used by your local development server). When prompted for a username and
password, enter 'testUsername' and 'testPassword' (these can be changed in the
source code).
This is mentioned in the Read-me file.
Sorry but i just tried it for the first time. I think you must have solved this by now. if not it should be helpful.
How do you add a second language? Feels as if we've been trying almost everything by now.
ReplyDeleteHow can I download the source code?
ReplyDeleteAny chance (since you were one of the writers) how line 330 was fixed in the index.php? I'm not very savvy on PHP coding, and everything I've found on it makes me very aware of why it's a problem, but not the proper way to re-write it to no longer be a problem. :)
ReplyDeleteif( empty(nextPrevArticleName('prev')) && $currentArticlePage == '1' ){
Fatal Error: Can't use function return value in write context
Thanks for making the code open source. I have recently started with using Google Web Toolkit and would be interested in knowing how to run 20things source on GWT???
ReplyDeleteThe file structure is similiar to that of GWT Apps.
Thank you for making the code open source. @Ramta Jogi have started using Google Web Toolkit? How is it going and what do you think are the requirements to start learning the GWT.
ReplyDelete