微信号:infoqchina

介绍:有内容的技术社区媒体

【工具】Google的 Web Fundamentals和Web Starter Kit工具包

2014-07-14 19:38 InfoQ

Google已经发布了大量的跨平台、响应式web站点设计的指导说明和实例代码。

当意识到大量设备的存在给开发者带来了巨大挑战,尤其是移动设备,于是,Google就发布了Web Fundamentals,它是一套针对目前web开发的最佳实践和指导原则。Web Fundamentals除了指导建议外,还包括以下方面的HTMLCSS JavaScript 的样例代码:

  1. 工具:选择一个编辑器,建立开发工具,建立一个构建流程,使用Chrome DevTools调试,在设备上、模拟器上或者云端进行调试。

  2. 内容布局:Google建议响应式的Web站点设计使用CSS3 Media Queries,不同的屏幕尺寸具有不同的CSS规则,响应式的Web设计模式--Fluid Layout Column DropLayout Shifte Off Canvas,再加上一些导航和行为模式,如AppTab页、底部工具条、Navigation Drawer

  3. 表单和用户输入:选择适用于移动设备的表单、实时表单验证、处理触控和实现自定义的手势。

  4. 图片/音频/视频:关于使用< img>标签、CSS背景、 SVG来处理图标、图像的性能问题、视频处理、老平台兼容问题、可访问性问题等等的建议。

  5. 性能优化:优化了关键的渲染路径,使用了PageSpeed规则,通过消除不必要的下载内容优化了内容性能,优化了文本资源编码和图像,使用HTTP缓存等等。

  6. 设备传感器和功能:关于访问用户位置、朝向和移动、打电话的建议。

除了以上手册内容外,Google还提供了Web Starter Kit (WSK) ,它是一套样例代码和工具,用于创建自适应多种设备的网站。在Mobile Boilerplate启发下,Web Starter Kit包括创建移动HTML页、响应式布局的代码,一个可视化组件风格指南和可选的gulp.js构建工具。

WSK的目标是支持Chrome两个最新版本、FirefoxSafariOperaIE 1011,同时也支持AndroidIOSWindowsPhone和黑莓的内置移动浏览器。

Web Fundamentals相关代码和WebStarted Kit代码在GitHub上已经开放源码,可供下载和学习。


 
InfoQ 更多文章 Facebook如何实现PB级别数据库自动化备份 学术派Google软件工程师Matt Welsh谈移动开发趋势 Spotify为什么要使用一些“无聊”的技术? 妹纸们放假了,汉纸们做啥? 大多数重构可以避免
猜您喜欢 调度系统,Crontab的格式 软件测试中的回归测试的风险 React-Native痛点解析之开发环境搭建及扩展 What is DevOps PHP7与Swoole,看完觉得PHP将会是最好的编程语言