11 月 19 - 20 日 Apache Pulsar 社区年度盛会来啦,立即报名! 了解详情
写点什么

Google 的 Web Fundamentals 和 Web Starter Kit 工具包

  • 2014-07-11
  • 本文字数:924 字

    阅读完需:约 3 分钟

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 )关注我们,并与我们的编辑和其他读者朋友交流。

2014-07-11 09:512139
用户头像

发布了 92 篇内容, 共 42.2 次阅读, 收获喜欢 4 次。

关注

评论

发布
暂无评论
发现更多内容

WorkPlus赋能数字政府迈入发展新阶段

WorkPlus Lite

CVE-2021-4034 Linux Polkit 权限提升漏洞挖掘思路解读

腾讯安全云鼎实验室

云原生 漏洞分析

架构训练营 week7 课程总结

红莲疾风

「架构实战营」

华为云FusionInsight连续三次获得第一,加速释放数据要素价值

华为云开发者联盟

大数据 数据湖 云原生 FusionInsight 华为云

获奖作品公布,快来看看有没有你!

InfoQ写作社区官方

新春征文 热门活动

对比下 datax 的 OceanBase/MYSQL 不同数据同步方案的效率差异 || 聊聊参数 rewriteBatchedStatements

明哥的IT随笔

数据库

【TcaplusDB知识库】TDR表GOSDK示例代码-查询数据

数据人er

git 使用总结

攻城狮MK

git 开发工具

TDSQL | DTS for PostgreSQL 逻辑复制详解

腾讯云数据库

tdsql 国产数据库

研发转岗产品经理,有什么需要注意的呢?

石云升

产品经理 产品思维 1月月更

18M 超轻量图像识别系统,商品、车辆、人脸识别一网打尽!

百度大脑

ChaosCraft:和女朋友一起来 Hackathon 表演绝活丨滑滑蛋团队访谈

PingCAP

TDSQL | 《checkpoint原理浅析》

腾讯云数据库

tdsql 国产数据库

【TcaplusDB知识库】TDR表GOSDK示例代码-插入数据

数据人er

ReactNative进阶(三十六):ES8 中 async 与 await 使用方法详解

No Silver Bullet

Async React Native await 1月月更

创梦天地发行公益性数字艺术藏品,打造不一样的年味

科技热闻

Linux之ps命令

入门小站

Linux

TDSQL | TXSQL数据库内核与特性

腾讯云数据库

tdsql 国产数据库

「架构实战营」模块一作业

hxb

「架构实战营」

Android Studio开发flutter快捷键及文本显示技巧。

坚果

flutter 1月月更

复古冰雪传奇H5游戏详细图文架设教程

echeverra

游戏开发 游戏

【TcaplusDB知识库】TDR表GOSDK示例代码-删除数据

数据人er

【TcaplusDB知识库】TDR表GOSDK示例代码-更新数据

数据人er

写了这么多年后端,你知道事务脚本模式吗?

蜜糖的代码注释

Java 互联网 后端

华山论“件”:Kafka、RabbitMQ、RocketMQ技能大比拼

华为云开发者联盟

kafka RocketMQ RabbitMQ 华为云 消息中间件

模块六

Only

架构师实战营 「架构实战营」

IM单聊和群聊中的在线状态同步应该用“推”还是“拉”?

WorkPlus Lite

手把手教你在优麒麟上搭建 RISC-V 交叉编译环境

优麒麟

Linux 开源 开发者 risc-v 优麒麟

设计模式之设计原则

Catch

设计模式

一起玩转LiteOS组件:TinyFrame

华为云开发者联盟

LiteOS 串口 LiteOS组件 TinyFrame

高效管理邮件的方式

NinetyH

工具软件 办公效率 邮件管理

Google的 Web Fundamentals和Web Starter Kit工具包_Google_Abel Avram_InfoQ精选文章