第十一章 HTML5未来展望 - HTML5 程序设计

返回介绍

第十一章 HTML5未来展望

发布于 2017-06-10 字数 15509 浏览 1031 评论 0

本书前面的章节中已经介绍了HTML5所有的强大编程功能。此外,我们还讨论了HTML5的发展历程和新的无需插件的开发模式。本章,我们将讨论一些还不够成熟但却既具潜力的HTML5特性。

11.1 HTML5的浏览器支持情况

随着版本的不断升级,浏览器对HTML5功能的支持度越来越高。在写作本书期间,前面章节中讨论过的许多功能都已经得到了浏览器正式支持,HTML5在浏览器中的发展无疑在得了巨大的推动力。

微软意外地发布了下一代浏览器的一系列开发者预览版本。IE9将支持以些关键的HTML5功能并大幅提升运行速度。一旦lE9正式版发布,诸如多媒体、存储和通信等HTML5的大部分高级功能就将成为主流浏览器的必备功能。

如今,许多开发人员还在拼命开发所谓”健壮’的Web应用。耗费大量精力以兼容旧浏览器。截止2010年,在因特网中仍然存在着大量过时的浏览器,IE6就是这种残酷现状的代表。即便如此,IE6的寿命也是有限的,因为支持IE6的操作系统越来越难找了。总有一天,IE6的用户数会接近零。越来越多的IE用户已经升级到了新版本。而IE9将是Web发展的一个分水岭。无论何时,总会存在一个相对最旧的浏览器,而随着时间的推移,最旧的浏览器终会被淘汰。在编写本书的时候,IE6的市场占有率已降至20%以下,而且还在持续下滑。很多用户直接升级到了最先进的浏览器。未来的主流浏览器最起码应该支持HTML5的Video、Canvas和WebSocket,以及所有原来需要back才能实现跨浏览器兼容的功能。

本书前面讨论的HTML5功能都已经基本稳定且被多数浏览器支持。除此之外,还有一些其他的HTML扩展功能及API尚处在开发初期。本章,我们就来看一些尚未发布的功能。着其中有些处于前期试验阶段,而有些只需要进行细微修改即可形成最终规范并广泛推广。

11.2 HTML未来的发展

我们在本节讨论的几项激动人心的功能很可能在不久的将来就会出现的浏览器中。这些功能的实现可能也无需等到2022年。将来很可能没有HTML6规范,因为WHATWG曾暗示未来的规范将被统一简称为“HTML”.HTML将以增量的形式发展而非一蹴而就,其中特定的功能及其对应规范会单独发展。大家就这些功能达成共识之后,浏览器才会采纳并加以实现。在HTML5稳定之前。一些即将发布的功能很可能已经在浏览器中大规模使用了。负责推动Web发展的组织为了满足用户和开发人员的需求,一直致力于Web平台的开发升级。

11.2.1 WebGL

WebGL是针对Web上3D图像的API, 历史上,Mozilla、 Opera、Google 等浏览器厂商曾分别提供了试验性的JavaScript 3D API。今天, WebGL正向规范化方向迈进, 而越来越多的HTML5浏览器加入了支持它的阵营。WebGL的规范化进程由浏览器厂商和The Khronos Group (负责OpenGL的组织,OpenGL是1992年创建的跨平台3D绘图标准)共同推进。OpenGL 规范的当前版本为第4 版,它已被广泛应用于游戏和计算机辅助设计中,并成为了微软Direct3D的有力竞争对手。

我们在第2章看到了在canvas元素中调用getContext(“2d”) ,可以获得2D绘图的上下文。毫无疑问,这为其他类型的绘图上下文提供了方便之门。WebGL使用的同样是canvas元素, 只不过获取的是3D上下文。由于还在试验期,所以调用getContext( )时,传入的参数需要使用浏览器厂商指定的名称作为前缀(moz – webg, webki t-3d等)。例如,在支持OpenGL的Firefox 版本中,可以在canvas元素中调用getContext( “moz-webg]”) 来获取3D上下文。这里调用getContext( )返回API对象与2D canvas的有所不同,因为它提供的是OpenGL绑定,而非绘图操作。WebGL版本的canvas上下文管理的是纹理和顶点缓冲区,而不是调用函数来绘制线条和填充形状。

11.2.2 DHTML

与其他HTML5元素一样,WebGL将会成为Web平台不可或缺的一部分。因为WebGL 通过canvas元素来渲染,所以它属于document对象。你可以像操作图像或2D canvas那样,在页面3D canvas元素中应用定位和变换。实际上,任何在2D canvas上能做的事情,在3D canvas上都能做。比如叠放文本和视频、执行动画等. 与纯粹的3D显示技术相比, 结合其他文档元素,3D canvas不仅可以用于创建HUD (Heads-Up Display,平视显示器),而且使得2D与3D的混合界面变得更易于开发了,想象一下,在3D场景中利用HTML标签构造一个Web用户界面会是怎样的效果,许多OpenGL应用程序使用了非原生的菜单和控件,而WebGL则可以使用原生的样式美观的HTML5表单元素。

现有的Web网络架构也为WebGL的开发提供了便利。WebGL应用程序可以通过URL 加载纹理、模型等资源。多人游戏可以基于WebSocket进行通信。例如,Google最近使用HTML5 WebSocket、Audio 、WebGL等技术将经典的3D游戏。Quake Ⅱ移植到了Web上,并加入了多人竞争机制,如图11-1所示,游戏逻辑和图形使用JavaScript实现。页面呈现通过调用WebGL canvas完成。游戏使用持久化的WebSocket连接来保持与服务器间的通信,从而实现对不同玩家位置的调整。

图11-1 Quake Ⅱ

11.2.3 3D着色器

WebGL是OpenGL ES2与JavaScript的结合,因此,它可以使用OpenGL中标准化的编程图形管道。包括着色器(shader)。着色器可将高度灵活的渲染效果应用于3D场景,让显示效果更真实。WebGL着色器是用GLSL (GL Shadjng Language, GL着色语言)编写的,这是Web中又一种新的专用语言。HTML5的WebGL应用程序使用HTML搭建框架,用CSS控制样式,用JavaScript处理逻辑,用GLSL进行着色,开发人员可以借鉴在OpeoGL 着色器方面的开发经验,按照类似的方式使用WebGL API。

WebGL可以当做是Web 3D图形的基础层。与对DOM进行抽象并提供若干强大功能的JavaScript库类似,有一些库以WebGL为基础,提供了若干额外功能。正在开发的库涵盖了多个方面。有场景圈,有3D文件格式(如COLLADA),还有游戏开发的完整引擎。圈11-2显示的是shader Toy,它是由Inigo Quilez搭建的WebGL着色工作台,其上提供的场景渲染效果是他与其他9名场景渲染艺术家一起设计的。这张截图显示的是Rgba的Leizex。我们希望在不久的将来,随着高级渲染库的篷勃发展,即便是Web编程新手也能轻松地创建出3D场景来。

提示:WebGL不仅将 OpenGL引入到JavaScript中,它还在尝试粉拆出一个通用的二进制数据API。对于快速的3D API来说,二进制缓冲室必要的,对此,有一个新的API提案,提案中引入了名typedarray的API专门用来操作二进制数据。若该提案生效的话,typedarray将在HTML5中发挥很大的作用。

图11-2 shader Toy是一个WebGL着色工作台

11.2.4 设备

Web 应用很可能需访问多种硬件,如网络摄像头、麦克风或是已连接的存铺设备。为此,HTML5设计了device元素,以便让应用程序访问所连接硬件的数据流。当然,对于隐私的保护是非常严格的,所以不是每段脚本都可以随意使用用户的撮像头。如同Geolocation和Storage API一样,当应用程序请求提升权限肘,浏览器就会弹出提示,并请求用户确认。与网络撞像头相关的应用主要是视频会议,不过还有许多其他令人惊奇的Web应用功能,比如增强现实(augmented-reality)和头部跟踪。

11.2.3 音频数据API

可编程的音频API 与<audio>的关系类似于<canvas>与<img〉之间的关系。在canvas标签出现之前,Web图像对脚本而言基本是不透明的。图像的创建和操作只能发生在服务器端。.如今,已经有工具可以基于canvas元素来创建和操作可视化媒体了。同样地,在HTML5应用中可以使用音频数据API创建音乐。这将有助于丰富Web应用程序的内容创建能力。推进媒体创作工具与消费平台一体(self-hosting)。时代的到来。可以想象,将来会有一天,用户仅仅通过浏览器就能完成音顿的创建和编辑。

简单的音频播放功能可使用<audio>元素来实现。但是,应用程序对音频的操作、分析或联机创建都需要底层API。若无法访问音频数据,那么诸如文门到语音的转换、语音到语音的转换、合成器、音乐可视化等功能都是空谈。

将来,标准音频API不仅有望操作数据元素的麦克风输入,而且还有可能操作<audio>标签内引入的文件。通过<device>和音频数据API,可以构建一个允许用户在页面内录制和编辑声音的HTML5应用程序。音频片段可存储在本地浏览器缓存中以便重用,还可与基于canvas的编辑工具相结合。

对此,目前Mozilla的每夜构建版本中有一种试验性的实现方式。 Mozilla音频数据API可被当做实现标准跨浏览器音频编程功能的基础。

11.2.4 视频元素改进

本书前面章节详细介绍了<video>元素的现有功能。在HTML5仍然迟迟未能指定必选视频编解码器的时候,Google最近发布了一种面向Web的高质量、免费的网络视频编解码器一WebM。虽然并不是所有广商都支持WebM,但这种格式背后的支持力量还是很强大的。

此外,对当前HTML5视频控件进行改进的需求也与日俱增。为了全面取代基于插件的视频展现方式,HTML自身控件需要引人更好的用于流媒体的API,期待这种能力能在下一代媒体标签中有所发挥。不支持FIash的设备越来越多。如Apple iPad和iPhone。所以要让大众用户正常浏览网络视频,只能依靠HTML5,这是HTML5发展的重要契机。

11.2.5 触摸屏设备事件

Web 访问方式越来越多地从台式机和笔记本电脑转换到了手机和平板电脑上,因此HTML5的交互处理方式也在逐渐发生变化。Apple在推出iPhone的同时,也将一系列特殊事件引入到了其浏览器当中。这些事件用来处理多点触摸输入和设备旋转。 尽管还未被标准化。但这些事件已被其他移动设备厂商选用。学会此类事件,就可以针对当今最先进的设备开发出合适的Web应用程序。

  1. 方向事件

方向事件是移动设备中最简单的事件,它可以加入到页面body标签中:

<body onorientationchange=”rotatedisplay();”>

在方向事件处理程序中,可以引用window.orientation属性。该属性可以选的值如表11-1所示,他们以页面首次加载时设备的方向为基准。

表11-1 方向值及其含义

方向值 含义
0 页面当前方向与首次加载时的原始方向一样
-90 与原始方向相比,设备顺时针旋转90°(向右)
180 与原始方向相比,设备旋转180°(垂直翻转)
90 与原始方向相比,设备逆时针旋转90°(向左)

获得方向值后,就可以对设备的内容显示进行相应的调整了。

  1. 手势事件

移动设备支持的另一种事件相对高级一些,称为手势事件。手势事件可以理解为通过多点触摸引发的缩放或旋转。当用户有两个或多个手指同时在触摸屏上挤压(pinch) 或扭转(twist)时,就会触发手势事件。扭转表示旋转。挤压(pinch in)和伸展(pinch out)分别表示缩小和放大。为了接收到手势事件,代码需要注册表11-2中所示的事件处理程序。

表11-2 手势事件处理程序

事件处理程序 描述
ongesturestart 用户将多个手指放在触摸屏上并开始滑动
ongesturechange 用户正在使用手指动作进行缩放或旋转操作
ongestureend 用户移开手指,缩放或旋转操作已经完成

在用户做手势的过程中,事件处理程序会灵活检测事件的缩放或旋转属性,并对显示效果进行相应更新。代码清单11-1是手势处理函数的示例。

代码清单11-4 手势处理函数示例

function gestureChange(event) {
    // Retrieve the amount of change in scale caused by the user gesture
    // Consider a value of 1.0 to represent the original size, while smaller
    // numbers represent a zoom in and larger numbers represent a zoom
    // out, based on the ratio of the scale value
    var scale = event.scale;
    // Retrieve the amount of change in rotation caused by the user gesture
    // The rotation value is in degrees from 0 to 360, where positive values
    // indicate a rotation clockwise and negative values indicate a counter-
    // clockwise rotation
    var rotation = event.rotation;
    // Update the display based on the rotation.
}

在需要操作物件或者以显示为主的应用程序(如绘图工具和导航工具等)中,经常需要用到手势事件。

  • 触摸事件

如果需要在低层次上处理设备事件,可以通过触摸事件获取所需信息。表11-3所示为不同的触摸事件。

表11-3 触摸事件

事件处理程序 描述
ontouchstart 已经在触摸设备表面放置了一个手指。当多个手指放在设备上时,会发生多点触摸事件
ontouchmove 在拖动操作中,一个或多个手指发生了移动
ontouchend 一个或多个手指离开设备表面
ontouchcancel 意外中断停止了触摸操作

与其他移动设备事件不同,触摸事件需要考虑多点数据(多个手指可能会同时触键)同时出现的情况。因此,用于处理触摸事件的API会相对复杂一些,如代码清单11-2所示。

代码清单11-2 用于处理触摸事件的API

function touchMove(event) {
    // the touches list contains an entry for every finger currently touching the screen
    var touches = event.touches;
    // the changedTouches list contains only those finger touches modified at this
    // moment in time, either by being added, removed, or repositioned
    varchangedTouches = event.changedTouches;
    // targetTouches contains only those touches which are placed in the node
    // where this listener is registered
    vartargetTouches = event.targetTouches;
    // once you have the touches you'd like to track, you can reference
    // most attributes you would normally get from other event objects
    varfirstTouch = touches[0];
    varfirstTouchX = firstTouch.pageX;
    varfirstTouchY = firstTouch.pageY;
}
// register one of the touch listeners for our example
node.addEventListener("touchmove", touchMove, false);

不难发现,设备的原生事件处理机制可能会干扰手势事件和触摸事件的处理。在这种情况下,可调用:

Enent.preventdefault();

上述代码会覆盖浏览器界面的默认行为,让开发人员自行处理事件。在所有移动事件被标准化之前,建议开发人员先详细阅读相应设备的开发文档,再进行开发。

11.2.6 P2P网络

在Web 应用程序中,高级网络技术始终在向前发展。不论是HTTP还是WebSocket,都有客户端(浏览器或其他用户代理)和服务器端(URL 主机)。P2P网络允许客户端之间直接通信。通常情况下,这比从服务器发送数据更高效,而且有助于降低托管成本,提高应用的性能。要想开发更快的多人游戏和协作软件。P2P技术是不二之选。

在HTML5中. P2P结合device元素可以构建高效视频聊天应用。在P2P视频聊天应用中,对话双方能够直接互传数据,无需通过中心服务器。在HTML5之外,P2P视频聊天已广泛应用于法如Skype等应用程序中。由于流媒体视频对带宽要求比较高,如果没有P2P 通信技术的话,很可能那些流媒体应用程序一个都无法实现。

针对P2P网络,浏览器厂商也进行了一些试验,例如Opera的Unìte技术,该技术会直接在浏览器中部署一个简易的Web服务器,Opera Unite允许用户为别人创建和提供服务,从而实现聊天、文件共享和文挡协作等功能。

当然,面向Web的P2P网络不仅需要考虑如何为开发人员提供编程API,还需要引人一个兼顾安全和网络媒介的协议。

11.2.7 最终方向

到目前为止,我们一直着眼于如何让开发人员构建强大的HTML5应用程序。我们考虑到的另一种视角是基于HTML5的Web应用如何能让用户获得上佳的体验。许多HTML5 功能旨在消除或降低脚本的复杂性,提供之前辅要插件才能实现的功能。拿HTML5的video 元素来说,无需任何JavaScript即可指定控制界面、自动播放、缓冲行为和生成并显示缩略图。而通过CSS3可以直接在样式文件中实现以前用脚本才能实现的动画效果。这些声明式代码让应用程序更容易披用户理解,并最终让用户获得更多掌控。

前面的章节中,你已经见过Firefox和WebKit的开发工具是怎样揭示HTML5各种功能信息的,包括存储功能,以及至关重要的JavaScript调试、性能分析、命令行求值等功能,因此,简单的声明性代码、浏览器内置或Web应用程序自带的轻量级工具将是HTML5 未来的发展方向。

Google显然对HTML的未来发展充满信心一一它宣布即将发布Google Cbrome操作系统。这是一种围绕浏览器和媒体播放器开发的精简版操作系统。到2010年底,Google操作系统的目标是包含丰富的基于HTML API实现的功能,以提供完美的用户体验,同时使其上运行的应用程序完全符合标准的Web体系架构。

11.3 小结

本书主要讲解了如何使用强大的HTML5 API,希望各位读者能够发挥自己的智慧,创建出色的应用!

这是本书的最后一章,我们介绍了一些即将纳入HTML5规范的内容,如3D图形、device元素、触摸事件、P2P网络等。HTML5还在快速发展,非常值得我们密切关注。

各位读者可能接触Web或者从事Web开发超过十年的时间了,回想一下最近几年HTML技术带来了多大的变化。十年前,”专业HTML 编程”意味着学习HTMI4的新功能。当时顶尖的开发者刚刚发现动态页面更新和XMLHttpRequest。虽然Ajax技术得到了广泛关注,但那也是在发明”Ajax”这个术语几年以后的事了。当时,浏览器中的大多数专业编程还只是限于讨论框架和操作图像地图而已。

曾经需要数页脚本代码才能实现的功能,如今只需一个标签就能轻松搞定。只要愿意,你随时都可以下载一个支持HTML5的浏览器,打开自己喜欢的文本编辑器,运用我们讲到的那些通信与交互手段,亲自动手尝试一下令人心驰神往的HTML5编程吧!

本书针对Web开发进行了一系列的探讨,希望你能喜欢这些内容,同时期待我们的抛砖引玉能够激发你的创造性。十年后,我们盼望能够再写一本书,而书盟会介绍到你用HTML5创造的伟大应用。

上一篇:第十章 构建离线Web应用

没有了,已经是最新文章

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

目前还没有任何评论,快来抢沙发吧!