基于 HTML5 的 Dojo Widget 开发
前言
若干年前,很少有人会想到一家生产电脑的公司会凭借一款功能设计上存在着不少缺陷的手机在市场上取得巨大的成功。也很少有人会想到一家曾经 占据着智能手机大部分市场份额的厂商会落入今天这样举步维艰的局面。人们不禁惊讶的发现,精美的界面、方便的操作对于消费者的吸引力要大于完善的功能及稳 定的系统。用户体验的优劣在一定的程度上决定了一个面向终端用户的产品能否在市场上生存。移动设备的设计如此,互联网应用的设计亦如此。现在,互联网上充 斥着各种精美的 CSS 式样、JavaScript 特效、Flash 动画等等,来吸引大众的眼球以获得更多的用户关注和经济收益。这其中存在着两种流行的设计趋势。一种是以高级的 JavaScript 技术和 CSS 技术为基础的 DHTML,以此来实现美观和交互性强的用户界面。这种技术的优势是浏览器能够提供天然的支持而不依赖于任何插件而且能够很灵活的访问页面上的内容,但是 这种技术的不足是浏览器自身的局限使得一些功能实现起来很困难。比如若要实现网页上的矢量绘图,虽然有 VML、SVG 等技术,但是它们不是广泛支持的标准,需要在不同的浏览器上做不同的处理。另一种是在浏览器上面安装某种包含运行环境的插件来运行某些 RIA 的应用,如 Flash、Silverlight、JavaFX 等,这些技术都是基于矢量绘图,能够呈现绚丽的用户界面和灵活多变的用户交互。但它们的缺点就是需要在浏览器上再安装插件,而且运行效率往往也会存在着一 定的问题。新一代的 Web 页面标准 HTML5 则可以帮助我们很好的解决这一问题,它不但提供了很多诸如 Web 套接字、Web 存储等技术,而且提供了 Canvas 以便在 Web 页面上直接进行矢量绘图。作为 HTML5 标准的一部分,Canvas 将天然地被各种浏览器支持,而且便于与 JavaScript 进行交互。从某种意义上说可以作为当前流行的 Flash 技术的替代品。所以,HTML5 与 Flash 技术孰优孰劣的争论这两年就一直不断。
现在 Web 前端开发领域流行着不少 JavaScript 类库,如 YUI Library、Ext JS、Dojo Toolkit 等,其中一些封装了各种前端控件。这些控件的实现是基于 HTML4 的标准和复杂的 JavaScript 及 CSS 技术。但随着 HTML5 技术的发展,它的各种强大特性为这些控件的结构和功能提供新的设计和实现方式。因此,如何将 HTML5 的特性灵活的运用到前端控件开发就是本文的关注点。由于 HTML5 的特性很多,而流行性的 JavaScript 库中的前端控件也五花八门,本文只能举例说明。读者可以根据自身的需求结合 HTML5 中的特性开发出各种强大的前端页面控件。
新一代 Web 标准—— HTML5
HTML5 是新一代的 HTML 标准,它里面包含了很多 HTML4 中没有的新标签和应用程序接口,如 audio 标签、video 标签、矢量绘图、Web 套接字、离线数据存储等。这些新特性可以使 Web 页面具有更丰富的功能和更好的用户体验,其中的很多都可以用在网页控件设计上,从而使得网页上的内容更加丰富。在 HTML5 众多的功能中,有一个功能非常重要,它不仅是一项被众多网页设计人员期待已久的功能,而且为网页的功能和外观设计留下了巨大的空间,它就是 HTML5 中的矢量绘图。现在,不仅不少的业内人士将 HTML5 的矢量绘图视作 Flash 的挑战者,甚至连 Flash 的支持厂商 Adobe 都推出了基于 HTML5 矢量绘图的动画制作工具。本文后面将会介绍借助 HTML5 的矢量绘图技术实现 Dojo Widget。在此之前,为了帮助读者能够更好的理解本文的内容,这里先对 HTML 中的矢量绘图做一些简要的说明。HTML5 的矢量绘图的功能由 Canvas 标签和各种绘图 API 构成。在 JavaScript 的脚本中,通过 Canvas 节点可以获得绘图上下文,通过它调用 API 就可以绘制各种矢量图,如下所示。
清单 1. 利用 HTML5 Canvas 绘制的矩形和三角形
<html> <head> <script> window.onload = function() { var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(205,125); ctx.lineTo(125,205); ctx.fill(); } </script> </head> <body> <canvas id="canvas1" height="600" width="600"> </canvas> </body> </html> 【基于 HTML5 的 Dojo Widget 开发】相关文章 2. Adobe 发布HTML5 动画制作工具Adobe Edge 3. Adobe发布HTML5网页动画工具{Adobe Edge} 4. 基于Edge Animate可视化工具开发CSS3动画 5. Adobe新推制作HTML5动画的可视化工具Edge Animate 6. 未来将基于HTML5 Jolicloud Me Beta推出 7. George Fox谈Adobe开发者社区与HTML5内容建设 8. Project Blaze Zero:HTML5 3D射击游戏 本文来源:https://www.51html5.com/a592.html
上一篇:设计师视角看HTML5
下一篇:HTML5 Canvas图像处理技巧
﹝基于 HTML5 的 Dojo Widget 开发﹞相关内容
「基于 HTML5 的 Dojo Widget 开发」相关专题其它栏目也许您还喜欢 |