如今大热的 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 也不用下,并且能做到直接开发、打包,不过一台安卓手机还是需要的,因为我们还是需要部署上去看看真实效果。
从 HTML4 诞生以来,整个互联网环境、硬件环境都发生了翻天覆地的变化,开发者期望标准统一、用户渴望更好体验的呼声越来越高。20 年磨一剑,HTML5 作为下一代 web 标准,它的新特性正在每个新式浏览器的版本中快速的得到支持和体现。随着 HTML5 和 CSS3 的发展和完善,Web 应用程序正在逐渐的表现出桌面应用的性能和功能,和桌面应用之间的区别将越来越模糊。未来不能用 HTML5 来实现的功能将越来越少,未来绘图、视频编辑、3D 建模等也将从单机软件转到浏览器上通过 Web 应用程序来实现。
下文,我将结合实例,谈谈激动人心的 HTML5 之美。
1、语义之美
语义化很美,在合适的地方使用合适的标签,把人和机器一视同仁。书写语义化的页面就像建造符合工业标准的建筑,阅读语义化的页面像阅读一本你熟识的优美著作。
和采用 css+div 进行页面布局的方式相比,这些新标签明确的表现了页面元素的结构和含义。下面的代码展示了这样的一个示例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf8">
- <title>
- HTML5
- </title>
- <link rel="stylesheet" href="html5.css">
- </head>
- <header>
- <h1>
- Title
- </h1>
- <h2>
- Subtitle
- </h2>
- </header>
- <aside>
- <nav>
- <h2>
- Nav1
- </h2>
- <ul>
- <li>
- Link1
- </li>
- <li>
- Link2
- </li>
- </ul>
- </nav>
- <nav>
- <h2>
- Nav2
- </h2>
- <ul>
- <li>
- Link3
- </li>
- <li>
- Link4
- </li>
- </ul>
- </nav>
- </aside>
- <article>
- <header>
- <hgroup>
- <h1>
- HTML5 is beautiful
- </h1>
- <h2>
- Semantic, Natural, Simple and Useful
- </h2>
- </hgroup>
- </header>
- <section>
- <h2>
- Semantic
- </h2>
- <p>
- HTML5 is Semantic.
- </p>
- </section>
- <section>
- <h2>
- Natural
- </h2>
- <p>
- HTML5 is Natural.
- </p>
- </section>
- </atricle>
- <footer>
- <a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">
- W3C
- </a>
- </footer>
- </html>
相当简单和清晰,我可以不添加任何注释,人和机器都明白它所要构建的结构和内容。
目前主要浏览器的新版本都支持 HTML5 语义化标签(下图从左到右依次为 IE、Chrome、Firefox、Opera、Safari、QQ 浏览器 5)。
2、人性之美
HTML5 设计理念中的通用访问体现了人性化之美。通用访问包括可访问性、媒体中立和国际化支持三个概念。可访问性考虑了对残障用户的支持,媒体中立为所有的平台和终端上(例如 Android 和 iPhone 的平台上)建立统一标准;而国际化的支持体现在不同的语言和书写习惯上。
就像 CSS3 中对国际化的支持体现在 padding-start, padding-end(在 Chrome 新版本的设置中心中可以看到它的应用)等新属性一样,HTML5 引入了 Ruby 标签。Ruby 标签允许为一个或者多个文本添加附加注释(其命名来源于 Ruby 字符),例如下面的代码:
- <p>
- Hello,
- <ruby>
- <rb>
- HTML5
- </rb>
- <rp>
- (
- </rp>
- <rt>
- Hyper Text Mark-up Language 5
- </rt>
- <rp>
- )
- </rp>
- </ruby>
- </p>
显示的文本如下:
Ruby 标签在中文、韩文和日文教科书和古文中非常有用,读者们可以方便了解文本的详细读音和含义。下面的诗句很美,而 HTML5 更美。
有趣的是在 IE、Firefox 或 Opera 中复制粘贴上面的文本到编辑器中,会显示下面的文本,这是因为 <rp> 标签的特殊作用:允许在不支持 Ruby 标签的浏览器中优雅的降级,同时支持非格式化的复制和粘贴。
死生 契 (读音: qì) 阔 (读音: kuò) ,与子成说。执子之手,与子偕老。
目前主要浏览器的新版本对于 Ruby 标签的支持程度如下:除 Fifrefox 和 Opera 外均提供支持。
3、简单之美
大道至简,化繁为简是许多标准、规范、框架的终极目标。HTML5 很好的诠释了这一点,例如以浏览器原生能力支持和代替复杂的 Javascript 代码、提供简单而强大的新 API。
HTML5 自身即跨浏览器的 JS 库,使得开发者的工作更容易:例如新的表单标签和属性、内置拖拽事件使得完全不需要 Javascript 的支持就能实现许多常用的功能。
我们再来看 HTML5 表单,它实现了许多简单易用的原生属性和控件,可以轻松的构建强大的表单,帮我们节约大量的 Javascript 代码。下面是一个 HTML5 表单的示例:
- <form>
- <p>
- <label for="email">
- 电子邮箱:
- </label>
- <input type="email" required autofocus name="email" id="email" placeholder="您的电子邮箱">
- </p>
- <p>
- <label for="username">
- 用户名:
- </label>
- <input type="text" pattern="^/w{6,12}$" required name="username" placeholder="6到12位的英文字符">
- <input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5"
- name="username-search" id="username-search">
- </p>
- <p>
- <label for="username-search">
- 生日:
- </label>
- <input type="date" min="1980-01-01" max="2011-3-16" name="birthday" id="birthday"
- value="1982-10-10">
- </p>
- <p>
- <label for="blog">
- 博客地址:
- </label>
- <input type="url" name="blog" placeholder="您的博客地址" id="blog">
- </p>
- <p>
- <label for="mobile">
- 手机:
- </label>
- <input type="number" name="mobile" pattern="^1[0-9]{10}$" id="mobile"
- placeholder="您的手机号">
- </p>
- <p>
- <label id="label-working-year" for="working-year">
- 工作年限:
- </label>
- <input type="range" min="1" step="1" max="20" name="slider" name="working-year"
- id="working-year" placeholder="您的工作年限" value="3">
- </p>
- <p>
- <label for="age">
- 年龄:
- </label>
- <input type="number" name="age" id="age" value="20" autocomplete="off"
- placeholder="您的年龄">
- </p>
- <p>
- <label for="avatar">
- 头像:
- </label>
- <input type="image" src="user.png" mce_src="user.png" name="avatar" id="avatar"
- placeholder="点击选择头像">
- </p>
- </form>
示例中包含了 email、search、date、url、range、number、image 类型的输入框和 required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete 等新属性,它们简单到根据名字就可以揣测出用途。下面是效果图。
HTML5 表单在各浏览器里的支持程度和表现并不一致,例如 Search 输入框目前只被 Webkit 内核浏览器支持,而日期弹出框和拖动条刻度仅被 Opera 支持。以上的标签类型和属性目前没有一个浏览器完美支持。
4、实用之美
HTML5 的 Web Worker、Web Socket、Web Storage 等新 API 让很多后台的工作可以放到前端来处理,Web Worker 解决 Javascript 单线程和阻塞的问题,相当于提供了分布式处理的框架;Web Socket 提供了全双工的长连接通信, 利用它,我们可以实现微博消息推送、新邮件推送、实时游戏和聊天,减少了不必要的数据传输,提高了信息的实时性;Web Storage 相当于前端的 Memcached 和数据库。
而 HTML5 的 Canvas 是最强大的 API 之一,可以动态生成图形、图像和动画,在 HTML5 游戏中使用的非常普遍。在下面的例子中,我将展示 HTML5 Canvas 之美:实现图像颜色渐变效果。
以前,我们在网站上显示灰度图像到彩色图像的渐变动画有两种实现方式:1、基于 IE 滤镜的方案,缺点是无法实现浏览器兼容;2、手动创建彩色图像的灰度版本。现在,利用 HTML5 的 Canvas 画布,我们可以高效简单的实现此动画效果。
将鼠标放在左边的图片上,图片颜色将从灰度渐变到彩色,一切就在眼前鲜活起来。
核心的 Javascript 代码如下:
- // 加载时就进行处理
- $(window).load(function() {
- var img = $('#color - img');
- // 复制图像
- img.clone().addClass('gray - img').css({
- "position": "absolute",
- "z-index": "2",
- "opacity": "0"
- }).insertBefore(img);
- img.attr('src', grayscale(img.attr('src')));
- // 图像的淡入
- $('#color - img').mouseover(function() {
- $(this).stop().animate({
- opacity: 1
- },
- 1000);
- })
- // 图像的淡出
- $('.gray - img').mouseout(function() {
- $(this).stop().animate({
- opacity: 0
- },
- 1000);
- });
- });
- // 创建灰度版的图像
- function grayscale(src) {
- // 取得canvas元素及其绘图上下文
- var canvas = document.createElement('canvas');
- var ctx = canvas.getContext('2d');
- var imgObj = new Image();
- imgObj.src = src;
- canvas.width = imgObj.width;
- canvas.height = imgObj.height;
- ctx.drawImage(imgObj, 0, 0); // 绘制一副图像
- var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取之前的数据
- for (var x = 0; x < imgPixels.height; x++) {
- for (var y = 0; y < imgPixels.width; y++) {
- var i = (x * 4) * imgPixels.width + y * 4;
- var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 计算灰度值
- imgPixels.data[i] = avg; // rgb中的r
- imgPixels.data[i + 1] = avg; // rgb中的g
- imgPixels.data[i + 2] = avg; // rgb中的b
- // i + 3是alpha通道,我们现在不需要
- }
- }
- ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
- return canvas.toDataURL();
- }
针对不支持的旧浏览器,我们可以使用 Modernizr Javascript 库或者原生 Javascript 检测当前浏览器是否支持,并提供替代性的解决方案:
- if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext
- $(document).ready(backupFunc);
- }
目前主要浏览器的新版本都提供 Canvas 标签的支持:
5、HTML5 的不足
目前 HTML5 还有哪些不足之处?
1、安全:像之前 Firefox 4 的 Web Socket 和透明代理的实现存在严重安全问题,同时 Web Storage、Web Socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料,另外 HTTP 的机制导致了 Web 应用安全性有所欠缺,这将在很长的时间内成为问题。
2、性能:某些平台上的引擎问题导致 HTML5 性能低下。同时在不加入 GPU 加速的情况下,HTML5 处理复杂音视频、动画的性能不尽如人意。
3、完善性:HTML5 还在成熟和发展中,像之前曾经支持的 Web SQL Database,W3C 已经决定不再维护。许多特性各浏览器的支持程度也不一样,而地理定位 API 在国内的前途还不清晰。
4、技术门槛:HTML5 简化开发者工作的同时代表了有许多新的属性和 API 需要开发者学习,像 Web Worker、Web Socket、Web Storage 等新特性要求对于后台的技术需要有一定的了解,甚至需要深入了解其后面原理和逻辑,而 Canvas 要求视觉和图像算法的一些知识。传统的前端开发者需要掌握更多算法、视觉、后台甚至浏览器原理的知识,机遇的同时也是巨大挑战。
6、总结
上面的大多数不足是 HTML5 发展过程的中间状态导致的,从长期来看,浏览器厂商的支持、移动互联网的蓬勃发展使得 HTML5 的前景一片光明,开发者对此必须要要有清楚的认识和长远的目光,提前做好技术储备。
对于 HTML5,我认为不仅要了解技术细节,还要从根本上理解 HTML5 的架构,从更高的层面上理解它的深层次含义,它的设计理念,你会发现它的架构之美,对于个人架构设计能力和境界提升有很大帮助。
Web 应用程序和移动互联网是大势所趋,IE6 终将消亡,Web 和浏览器标准终将统一,HTML5 就是道之所藏、美之所在,让我们一起迎接和拥抱 HTML5 的到来!
来源: http://www.bubuko.com/infodetail-2010171.html