BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

Google的 Web Fundamentals和Web Starter Kit工具包

| 作者 Abel Avram 关注 10 他的粉丝 ,译者 李士窑 关注 0 他的粉丝 发布于 2014年7月12日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

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

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

  1. 工具:选择一个编辑器,建立开发工具,建立一个构建流程,使用Chrome DevTools调试,在设备上、模拟器上或者云端进行调试。
  2. 内容布局:Google建议响应式的Web站点设计使用CSS3 Media Queries,不同的屏幕尺寸具有不同的CSS规则,响应式的Web设计模式--Fluid Layout、 Column Drop、Layout Shifte、 Off Canvas,再加上一些导航和行为模式,如App、Tab页、底部工具条、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两个最新版本、Firefox、Safari、Opera、IE 10和11,同时也支持Android、IOS、Windows Phone和黑莓的内置移动浏览器。

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

查看英文原文:http://www.infoq.com/news/2014/06/google-web-design


感谢曹知渊对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT