一个关于前端、产品、设计、绘画的情侣博客

Google Chrome推中文版《关于浏览器与网络的20项须知》

G

《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的特性,如网页字体、动画和阴影等,提高视觉吸引力。

官方简体中文首页:http://www.20thingsilearned.com/zh-CN

电子书源代码下载:http://code.google.com/p/20thingsilearned/

关于作者

Milly

擅长 Adobe 旗下软件,Ai、Fw、Fl、Br、Ae、Pr、Id 等的安装与卸载,精通 CSS、JavaScript、PHP 等单词的拼写。「从个性签名被模仿回忆我的十年互联网生涯」https://www.sawlove.com/ten-years-internet-life.html

添加评论

由 Milly
一个关于前端、产品、设计、绘画的情侣博客

分类

文章归档