Thursday, November 18, 2010

HTML5, browsers, and books, twenty years later

Update: Thanks for all the interest and feedback on 20 Things I Learned about Browsers and the Web! We hope to open-source the code in the coming months and will post an update when we do. Stay tuned.

Twenty years ago this month, Tim Berners-Lee published his proposal for the World Wide Web. Since then, web browsers and web programming languages have come a long way. A few of us on the Chrome team decided to write an online guide for everyday users who are curious about the basics of how browsers and the web work, and how their evolution has changed the way we work and play online. Called "20 Things I Learned about Browsers and the Web," this online guidebook is illustrated by Christoph Niemann, and built in HTML5, JavaScript and CSS3, with our friends at Fi.

In building an online book app, HTML5, JavaScript and CSS3 gave us the ability to bring to life features that hearken back to what we love about books with the best aspects of the open web: the app works everywhere, and on any device with a modern browser. Here are a few features of the book experience that we’re particularly excited about:

  • After the app has been visited once, you can also take the experience with you offline, thanks to the Application Cache API.
  • You can resume reading where you had left off as the book remembers your progress using the Local Storage API. We also mark the chapters that have previously been read by folding the top right corner of the page in the navigation.
  • The app utilizes the History API to provide a clutter-free URL structure that can be indexed by search engines.
  • The HTML5 canvas element is used to 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.
  • The canvas element is also used to animate some of the illustrations in the book.
  • CSS3 features such as web fonts, animations, gradients and shadows are used to enhance the visual appeal of the app.

This illustrated guidebook is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. We hope you enjoy the read as much as we did creating it, at www.20thingsilearned.com or goo.gl/20things.







27 comments:

  1. Wow, you guys. That's awesome. But: no spiffy page flip on my iPhone?

    ReplyDelete
  2. Is this book tech available somewhere under a reusable license or for sale? I am very interested in this sort of presentation.

    ReplyDelete
  3. Great stuff! So goo.gl indeed supports custom urls! :)

    ReplyDelete
  4. Awesomesauce.

    ReplyDelete
  5. Awesome!

    What is the license behind the book html/js - OpenSource/Apache? Is there a code.google.com project?

    ReplyDelete
  6. Any chance to get my hands on the source code, especially the page flip? My boss got a bit excited about HTML5 :)

    ReplyDelete
  7. amazing, I love it. Though there are some issues http://qcfailed.tumblr.com/post/1617379916/http-www-20thingsilearned-com-page-curl-issue

    ReplyDelete
  8. Educators need the capability to do this. Fantastic!

    ReplyDelete
  9. i think its gonna come up next week year.. :D

    ReplyDelete
  10. Very nice, I went through the whole book.
    I like Page Flips, Drop Down Ribbon on the left side of the page and Graphics

    Good Work.


    cheers
    Basharat

    ReplyDelete
  11. Google has left the Javascript source unobfusticated – there's learning to be done.[1]

    The source contains a minified jQuery library – the Google code starts after the string "A.jQuery=A.$=c;})(window);". Shove that into a beautifier [2] to find out what powers the book. 3500 lines of code!

    [1] http://www.20thingsilearned.com/js/twentythings.min.js
    [2] http://jsbeautifier.org/

    ReplyDelete
  12. The use of the new HTML5 history API (window.history.pushState) is my favorite part. I hadn't seen that -- shows you how often I use Flickr. :)

    ReplyDelete
  13. This is pretty amazing...

    ReplyDelete
  14. @Nephron - They already provided the not minified version. just remove the ".min" inhttp://www.20thingsilearned.com/js/twentythings.min.js

    ReplyDelete
  15. Is there news for a open Source license (html / js) ?

    Regards,

    ReplyDelete
  16. Hello,

    Have you got some news about the license of your work ? Can we you it for a open source project ?

    Regards,

    ReplyDelete
  17. Any news regarding the code?

    ReplyDelete
  18. It's very cool. I like to test it.

    ReplyDelete
  19. Very nice. I would like to test it.

    ReplyDelete
  20. I've studied the engine, and have made some
    modification to support multiple books management.

    I'm concerned about the licence though, since
    I wanna use this engine to build my digital books
    public project.

    Any comments? suggestions?

    ReplyDelete
  21. Any updates on open sourcing it?

    ReplyDelete