《20 Things I Learned About Browsers And The Web》(关于浏览器与网络的20项须知)是Google Chrome团队于2010年底所制作的网络图书,与流行的网络电子杂志不同的是,《关于浏览器与网络的20项须知》是基本HTML5打造的网络书籍,在低带宽的情况下,它比浏览Flah要来得顺畅。
翻页效果
目前,官方推出了包括简体中文、繁体中文、英文、法文、德文、荷兰文、意大利文、西班牙文、巴西葡萄牙文、捷克文、波兰文、俄文、日文、印度尼西亚文以及菲律宾文等在内的15种语言版本。《关于浏览器与网络的20项须知》内容浅显易懂,并邀请知名插画家Christoph Niemann绘制插图,大大增加了阅读趣味。如果想快速认识浏览器和网络的基本常识,它是个不错的选择。
内页截图
此外,《关于浏览器与网络的20项须知》还包揽了第十五届年度WEBBY中“教育”、“最佳视觉设计(功能)”以及“最佳实践”三大类别的奖项。更难能可贵的是,Google开放了这本电子书的源代码,这意味着你可以依葫芦画瓢,直接利用现成的HTML5+CSS3制作一本类似的电子书而不用研究很多方面技术问题。
据Google在Chrome官方博客称:“为了把这本书做的更加真实,从大量的实体图书中获得了灵感,甚至费了很大的劲儿去研究翻页时的平衡感和纸张重量(厚度)对翻页时体验的影响,同时还有书签、易于搜索、离线工作、关闭环境灯等大量只有在阅读实体图书时才能获得的体验。”相信普通的开发者是很难考虑到这么多的,这本书的开源绝对算得上最好的 HTML5 电子书模版。
《关于浏览器与网络的20项须知》所使用的HTML5技术:
— 使用HTML5 canvas element打造动态的换页特效;
— 利用Application Cache API,让用户首次进入后具备离线阅读功能;
— 以Local Storage API作为书签功能,用户回来后,可以进入上次离开时的页面;
— History API,当你在翻页时,只有书的区块出现变化,而不是重载整个页面,所以感觉很流畅。但是网址列里的URL会跟着变化,所以你可以单独将某一页加入书签,而搜索引擎也能收录单一页面;
— 使用多种CSS3的特性,如网页字体、动画和阴影等,提高视觉吸引力。