文章: HTML5之美

标签: 文章 html5 | 发表时间:2012-05-31 13:00 | 作者:
出处:http://pipes.yahoo.com/pipes/pipe.info?_id=10560380f804c7341f042a2b8a03e117

如今大热的HTML5到底美在哪里?HTML5到底能为实际的移动开发带来哪些改变?来自阿里云云手机服务运营部的前端开发工程师 正邪 (廖健)分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面做了细致讲解:

说到HTML5一般都会提到它新增了一些新的标签,这些标签能够减少文档的大小,也可以节省一些CSS定义,但是这个好处不足以说明HTML5在技术变革上带来的影响,我们还是先要明白HTML5的原理到底是怎样的,它带来的变革为什么会这么大?

常见的原理

HTML5的产生以及它的设计完全是遵循了一些常见的原理,这些原理在李松峰老师的博客上有详细地阐述。

首先第一条原理是:发送时保守、接受时开放。

作为工程师,发送给浏览器的文档应该尽量的严谨,但是浏览器作为接收方,应该持有一个开放的姿态,而不会因为某个文档有问题,到浏览器窗口里面就不显示了,只是留下一片空白给用户。既然HTML存在标签没有正常闭合的可能性,也存在属性丢失的情况,只要文档没有产生二义性,浏览器应该猜测到最终的行为并做出正确处理,在技术层面浏览器有理由这么做。

第二,避免不必要的复杂性。

我们在编写的HTML的时候,可能会定义一个很长行长的文档类型声明,这个文档类型声明是给浏览器看的,如果能够简化它,在说创作的时候能省下一些时间,而且也不用浪费力气去记那些难记的字符。实际上,省略大多数字符,浏览器也能按照我们期望的那样去运行。

还有script标签,我们可能会设置它的type为“text/javascript”,实际上也是不必要,如果type属性没有被声明,默认就按JavaScript处理。类似的东西有很多,在文档里面能省掉的我们就应该大胆地省掉,这样不仅是在创作这个文档的时候,能够给我们带来这些方便,而且在共同维护的时候也能带来一些益处。

第三,网络价值同达到网络用户数量的平方成正比。

现在HTML5这么火,很多人就拿它跟Flash去做对比,说Flash多么多么烂,说HTML5多么多么好。实际上我们创作的内容最后是给用户去看的,如果这个东西用户觉得好,不管用什么技术我觉得都是次要的。

最后我们要的是将服务推送到用户面前,而不是要说某种技术多么好,可以杀死另一个技术。实际上在这里,它们的协同工作才是符合HTML5的设计思想,在这个层面上我觉得Flash也是HTML5中的一员。

第四,大多数人的意见和可运行的代码。

没有HTML5规范的时候,浏览器厂商可以各自为阵,可以加入了自己的标准,虽然这些标准不是W3C制定的,但是大多人都有这些需求,它们能解决实际问题。所以也刺激W3C加入到这些标准的制定中去。

技术细节

CSS

有位测试工程师报了个bug给开发工程师。说页面上的单选框样式太难看了,建议改一下,换个颜色。开发工程师当时就晕倒了,说这个是浏览器默认的,改不了。改不了怎么办?只能把bug打回去。

基于CSS3的特性,现在完全可以改变浏览器控件的默认外观。

然后是布局。改变样式是CSS的强项,也是它的职责所在。我们可以使用百分比做弹性布局。现在设备比较多,有iPad、iPhone、还有其各种屏幕尺寸的安卓,假如我想用HTML5的技术做一个应用,适用于所有平台,这个时候百分百肯定是不够的,而精准的弹性布局又显得很重要。

CSS3有一个box-flex的属性,假设有个容器,里面有三个div,在设置了margin的同时将它们的box-flex设置成1,看到的效果就是三个元素均等分,我还可以改变它的比例,比如将第一个元素固定宽度,剩下的两个元素也可以均等分。除了从左往右布局,使用cloumn-count可以做到从上往下布局。

box-flex可以解决一部分屏幕适配的问题,如果想做到更精准的布局,比如说在小屏幕下的布局是一个样子,大屏幕下可能加入了更多的元素,或者更复杂了,甚至大小、颜色、位置都变了。这个时候可以使用Media Queries的技术。我们可以先定义某个样式,然后在某种屏幕上面覆盖默认样式,或者完全使用另一套样式。

除了CSS3这些奇妙的属性,用它来设计一些复杂背景也是非常适合的。这里有一个我同事开发的Chrome插件叫Coda Cola,他还为这个插件做了一个分享的网站。别人根据这个插件,做出了一些比较酷的CSS效果,可以再分享出来。

JavaScript

说了CSS3,再说说JavaScript。大家说JavaScript美吗?好像我们对它的印象也不是很好。不仅前端,后端对JavaScript的象也好不到哪去,甚至会更糟糕。

首先它的执行效率比较慢。

然后它的API接口比较烂,比如我要查找某个元素,可以用getElementById,getElementsByTagName, 这么一长串。除了很长,我还要把第三个参数指定为false。现在做应用的话,我们一般都会选择用框架来帮助自己进行开发,从那些复杂的语法中解脱出来。

再者,JavaScript调试比较困难,JavaScript边解释变执行,代码一多,方法之间的调用层级变深,如果出错,就很难定位到错误所在。特别是在没有firebug等调试工具之前,找错误有时候就跟做噩梦一般。 JavaScript虽然有这么多弊病,但是它现在还在快速发展。到现在,我们有很多种的框架可以选择,这里面肯定有大家喜爱的框架。但在HTML5的到来的时刻,我们有一些更好的选择。比如说做元素查找,以前可能用到框架,现在不用框架,使用原生的API也可以很方便地做到。这是第一点,就是有些功能不再需要框架做支持了。

第二,JavaScript中加入一些新的特性,比如说LocalStorage。没有LocalStorage的时候,我们可以使用Cookie在客户端记录一些用户相关的数据,但是Cookie记录的容量有限,而且 HTTP请求会携带cookie数据。在需要保存大量数据或者设计离线应用的时候,LocalStorage就非常有用了,LocalStorage的容量比较大,在移动平台上,至少有2M的存储空间。

框架

虽然说有了一些原生的API,也有了一些新的功能,但是在开发的时候,我们还是要借助一些框架来提高工作效率。有一个叫Zepto的框架,是我们在项目中经常会用到的框架。它的API几乎跟jQuery一样,跟jQuery相比,Zepto去除了一些移动平台上不必要的代码。除此之外,它还支持了 tap、swipe等手势。 在移动平台上,我们也可以使用Canvas技术做一些游戏。

在移动互联网上,手机跟PC有一些特征上的差异。用到手机特有的功能,我们可以做一些很有意思的东西。比如说我想获得地理定位,还有传感器、查询通讯录、拍照,这些都是手持设备特有的功能,虽然W3C有制定这些API的规范,但是目前没有浏览器已经完整实现。如果使用PhoneGap的话,我们就能使用到这些API了。

我这里有一个视频,演示的是使用PhoneGap做的一个指南针应用。我在Chrome上装了一个叫Ripple的插件,它是一个PhoneGap模拟器插件。装好这个插件之后,就可以在浏览器上进行中开发了,这个插件模拟了设备的大小和外观,并且加入了device特性的调试环境。在界面上,左右都有很复杂的控件,操作它们可以模拟device特性。就这样一个应用,只需要大概20行代码。

然后打包也很简单,PhoneGap官方有个在线的打包工具,它架设在Amazon云计算平台上,我们只需要把源代码的zip包传上去,然后就能下载打包好的应用程序安装文件。

所以说,使用HTML5技术做一个安卓应用真的是非常简单,基于PhoneGap,可以连SDK也不用下,并且能做到直接开发、打包,不过一台安卓手机还是需要的,因为我们还是需要部署上去看看真实效果。


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

  • 本文所属的特别专题为 RIA

相关 [文章 html5] 推荐:

文章: HTML5之美

- - InfoQ cn
如今大热的HTML5到底美在哪里. HTML5到底能为实际的移动开发带来哪些改变. 来自阿里云云手机服务运营部的前端开发工程师 正邪 (廖健)分享了他眼中的HTML5之美,主要讲诉HTML5的常见原理并从CSS、JavaScript和框架三个方面做了细致讲解:. 白伟民:酷狗音乐的HTML5实践(百度开发者大会广州站 5月31日 免费报名).

文章: 基于HTML5和Javascript的移动应用架构

- - InfoQ cn
如果你认为你能够无视终端用户的移动化需求,那请记住:当个人电脑刚出现时,企业中的IT 部门也曾对它们有抵制情绪. 移动设备的激增正在促使IT部门做出改变,他们必须支持移动设备,并紧接着开发出友好的移动设备应用程序. 随着用户对移动设备越来越熟悉,他们对在移动设备浏览器中访问的应用程序的要求也越来越高.

文章: 应用的未来——面孔、豌豆荚、HTML5小组专家访谈

- - InfoQ cn
为了让大家能够了解到不同平台的产品特质以及现状和发展趋势,我们特别邀请到移动App平台的 @面孔网杨锴、PC平台的 @豌豆实验室张涛和姜楠以及 @HTML5研究小组的黄蔚瀚,他们将分别以各自独特的视角,来审视和解读未来时代的Apps. 百度开发者大会:Web App设计、移动互联网应用、个性化推荐、敏捷(3月23日 免费报名中.

预览文章: HTML5 视频播放事件属性与API控件

- - BlogJava_首页
在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了. 视频格式:avi、rmb、wmv、mpeg4、ogg、webm. 视频主要有三部分组成:视频、音频、编码格式.

文章: James Ward谈使用HTML5和Java开发客户端/服务器应用

- - InfoQ cn
谈到应用开发,不管是客户端/服务器类应用、传统的Web应用还是移动Web应用,最近的趋势是使用像流式网格布局(Fluid Grid Layout)和响应式网页设计(Responsive Web Design)这样的模式,以及像HTML5、CSS3和JavaScript(客户端和服务器都支持)这样的技术.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.