HTML5

1.5.5 HTML5

HTML5 在微信公众平台推出以后又火了一把。“微信的入口梦应由 HTML5 承载”,“微信创业猜想:社交游戏将引爆微信 HTML5 游戏”,在百度上用关键字“微信”和“HTML5”搜索,立即可以看到很多类似标题的文章。2010 年 2 月,乔布斯极力推崇用 HTML5 代替 flash,并且指出了 flash 的很多问题和 HTML5 的很多优点,这让 HTML5 瞬间到了风口浪尖。后来 Adobe 公司自己也放弃继续开发 flash 的移动版本,这更加让人坚信 HTML5 将会大面积普及。随后发生的一件事让大家对 HTML5 又重新冷静地思考了一把: Facebook 的 HTML5 的移动版本因为性能问题被原生版本代替。现在微信公众平台的诞生又让大家把目光聚集到了 HTML5 上。新技术出现的时候,IT 圈的新闻总是让人很纠结。到底 HTML5 前途怎么样,估计没有人能够看得清。在这种情况下,脚踏实地地做一些事情会是好的选择。如果大家想尝试在微信上开发 HTML5 的应用,可以看一下接下来对 HTML5 的介绍。

HTML5 是用于取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。简单地说,HTML5 其实是 HTML4 的一个更高级的版本,并不是一个完全的新技术。往往人们提到 HTML5 时还包括 CSS 的新版本 CSS3,以及相关的 JavaScript。通过这一整套的技术,在浏览器上可以实现复杂的富界面应用。HTML5 在页面上表现能力一点儿也不逊于 PC 原生的应用。而在 HTML4 上实现这些应用往往要一些其他的插件的支持,如 Adobe Flash、Microsoft Silverlight、Oracle JavaFX 等。

目前大部分的浏览器都支持 HTML5,包括国外的 Firefox(火狐浏览器)、IE9 及其更高版本、Chrome(谷歌浏览器)、Safari、Opera 等,及国内的傲游浏览器(Maxthon)、基于 IE 或 Chromium(Chrome 的工程版或称实验版)所推出的 360 浏览器、搜狗浏览器、QQ 浏览器、猎豹浏览器等。需要注意的是,这些浏览器稍早的版本都不支持 HTML5,特别是 IE,而国内的大部分用户都是使用 IE 的低版本来浏览网页的,在实际设计产品的时候需要特别注意这一点。

微信是一个手机上的应用,没有 PC 版本。因此我们更关心的是移动端是否支持 HTML5。好消息是无论是 IOS 还是 Android 都对 HTML5 有很好的支持。坏消息是 HTML5 目前还存在性能问题,由于手机处理能力和 PC 相比还有差距,所以大规模的 HTML5 应用在手机端运行还是会有问题的。不过可以肯定的是,手机的处理能力在不断地、快速地提升,如今四核的手机已经很常见了,所以也许在不久的将来,大规模的 HTML5 应用在手机端的运行将不再有问题。

相比HTML4,HTML5 有以下的一些新的特性:
❑ 语义特性,HTML5 赋予网页更好的意义和结构。随着 HTML5 对 RDFa 的微数据与微格式等方面的支持,其所支持的标签将更加丰富,其将可构建对程序、对用户都更有价值的数据驱动的 Web。HTML5 提供了更多的标签,表 1-6 是这些新增标签的简介。

表1-6 HTML5 新增标签

新增标签标签描述
<article>定义一篇文章
<aside>定义页面内容部分的侧边栏
<audio>定义音频内容
<canvas>定义图片
<command>定义一个命令按钮
<datalist>定义一个下拉列表
<details>定义一个元素的详细内容
<dialog>定义一个对话框(会话框)
<embed>定义外部的可交互的内容或插件
<figure>定义一组媒体内容以及它们的标题
<footer>定义一个页面或一个区域的底部
<header>定义一个页面或一个区域的头部
<hgroup>定义文件中一个区块的相关信息
<keygen>定义表单里一个生成的键值
<mark>定义带有记号的文本
<meter>定义 measurement within a predefined range
<nav>定义导航链接
<output>定义一些输出类型
<progress>定义任务的过程
<rp>用在 Ruby annotations,告诉那些不支持 Ruby 元素的浏览器如何去显示
<rt>定义对 ruby annotations 的解释
<ruby>定义 ruby annotations
<section>定义一个区域
<source>定义媒体资源
<time>定义一个日期/ 时间
<video>定义一个视频

❑ 本地存储特性。基于 HTML5 开发的网页 APP 拥有更短的启动时间、更快的联网速度,这些全得益于 HTML5 APP Cache,以及本地存储功能。
❑ 设备兼容特性。自从 Geolocation 功能的 API 文档公开以来,HTML5 为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5 提供了前所未有的数据与应用接入开放接口,使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与 microphones 及摄像头相连。
❑ 连接特性。更有效的连接工作效率,使得基于页面的实时聊天、更快速的网页游戏体验、更完美的在线交流得到了实现。HTML5 拥有更有效的服务器推送技术,Server-Sent Event 和 WebSockets 就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。服务端推送技术一直是 Web 端服务的难题。现有的技术有基于长连接的 COMET、内嵌 flash、基于 ajax 的长轮询,这些都有各自的缺点,不是 HTML 原生支持的。
❑ 网页多媒体特性。支持网页端的 Audio、Video 等多媒体功能,与网站自带的 APPS、摄像头、影音等功能相得益彰。
❑ 三维图形及特效特性。基于 SVG、Canvas、WebGL 及 CSS3 的 3D 功能,用户会惊叹于在浏览器中所呈现的视觉效果。
❑ 性能与集成特性。没有用户会永远等待你的 Loading—HTML5 会通过 XMLHttpRequest2 等技术,帮助您的 Web 应用和网站在多样化的环境中更快速地工作。
❑ CSS3 特性。在不牺牲性能和语义结构的前提下,CSS3 中提供了更多的风格和更强的效果。此外,较之以前的 Web 版本,HTML5 的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

在这些特性中,最受关注的是其中的三维图形的特性,也就是 HTML5 提供的 <canvas> 标签。HTML 的其他标签就像一个一个的图形,我们可以自定义图标的颜色、大小以及单击它之后的响应,然后把它“贴”到网页上。而这个 <canvas> 标签就像是给了我们一个画板,在网页上给了我们一块区域,可以让我们在上面直接画出任何我们需要的形状,并且可以响应我们的输入。下面给出一个非常简单的示例,这个示例实现的是使用 canvas 在网页上画一个红色的圆形。新建一个 PHP 文件,输入以下的代码:

<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

在 Chrome 中执行上述 PHP 文件,结果如图 1-38 所示。
使用 canvas 画一个红色圆
图1-38 使用 canvas 画一个红色圆

仔细观察上面 JavaScript 代码中对变量 cxt 的使用,会发现这些函数调用方式和 openGL 的一些基本函数很像。Canvas 给了浏览器画图的能力,提供了图形学的一些基本函数,基于这些基本函数,开发者可以开发出复杂的二维、三维的应用。

HTML5 的内容非常多,这里没有办法面面俱到,我们只能给出一个简单的介绍,有兴趣的读者可以找相关的资料深入学习。

下一节 1.6 小结
上一节 1.5.4 MySQL
返回微信公众平台应用开发实战

天香空城微信二维码
关注 天香空城 微信号 ulisse 或扫描二维码,可以了解微信营销书籍
微信营销书评
微信公众平台开发源码

返回微信营销