移植《关于浏览器和网络的 20 项须知》代码

2013年10月12日浏览器网络html3css3

《关于浏览器和网络的20项须知》(20 Things I Learned About Browsers and the Web)是Google Chrome团队于2010年底推出的网络图书,上周新增了15种语言版本,包括简体中文、繁体中文、英文、法文、德文、荷兰文、意大利文、西班牙文、巴西葡萄牙文、捷克文、波兰文、俄文、日文、印度尼西亚文以及菲律宾文,让更多读者能快速认识浏览器和网络的基本常识。

《浏览器和网络世界20大须知》内容浅显易懂,并邀请知名插画家Christoph Niemann绘制插图,大大增加了阅读趣味。

前端开发程序师非常值得花时间深入阅读的代码,可以学到很多的html5的知识。

《关于浏览器和网络的20项须知》所使用HTML5技术:

  • 使用HTML5 canvas element打造动态的换页特效。
  • 利用Application Cache API,让用户首次进入后具备离线阅读功能。
  • 以Local Storage API作为书签功能,用户回来后,可以进入上次离开时的页面。
  • History API,当你在翻页时,只有书的区块出现变化,而不是重载整个页面,所以感觉很流畅。但是网址列里的URL会跟着变化,所以你可以单独将某一页加入书签,而搜索引擎也能收录单一页面。
  • 使用多种CSS3的特性,如网页字体、动画和阴影等,提高视觉吸引力。

为了更方便学习,我把《关于浏览器和网络的20项须知》的代码提取出来,删除了语言选择功能和导航功能,仅供参考。

预览

Google 20things

点击预览

源代码

点击下载



关于麦客园

集基督信仰,IT技术,生活的家园,分享生活中的点点滴滴。关注Web前端, iOS, Android, 网络技术, Linux, 开源硬件等。

友情链接




联系麦客园


您的批评和鼓励都是我最大的支持。