开发者需关注的几项Web新技术

申请免费试用、咨询电话：400-8352-114

WebGL

WebGL 是一种基于 Web 的 Graphic 库，由非盈利组织 Khronos 运营，当前连系 HTML5元素普遍使用在 3D 图形开拓中。

进修 WebGL 比拟坚苦，由于它是底层开拓——它运转在 GPU 上面，并且它实践上是一个 OpenGL 的 JavaScript port，是一种游戏开拓者运用的曾经长时间树立的 API 集。WebGL 的首要受众是哪些曾经拥有丰厚 OpenGL 经历的游戏开拓者，他们可以经过 WebGL 为 web 平台编写游戏。

好在有良多资本可以协助您进修 WebGL，这些资本不只仅是关于游戏开拓的，还有良多奇幻的图形、视觉和音乐视频等方面。作者小我比拟引荐的是：

◆ Introduction to WebGL。http://dev.opera.com/articles/view/an-introduction-to-webgl/作者 Luz Caballero，简介可以取得的各类库。

◆ Raw WebGL 101。http://dev.opera.com/articles/view/raw-webgl-part1-getting-started/合适那些不运用库的用户。

◆ Learning WebGL。http://learningwebgl.com/一个十分好的指导网站。

◆ WebGL 101。http://www.youtube.com/watch?v=me3BviH3nZc 一个由 Erik Moller 制造的引见视频（2.5小时）。

◆ See Emberwind。http://operasoftware.github.com/Emberwind/一个由 Erik Moller 做的 WebGL 游戏 port，您可以深化 Github 或看代码。

WebGL 当前在一切桌面阅读器（发布版和开拓频道）中都支撑，除了 IE10（微软透露表现不支撑）。关于挪动产物来说，曾经在 Opera Mobile 12 中发布了，最终会呈现在 Android，BlackBerry Playbook 2.0，Nokia N900，SonyEricsson Xpertia Android Phones 等以及 Firefox 挪动阅读器中。

SVG

SVG（Scalable Vector Graphics）曾经在 Opera，Firefox，Chrome 中存在多年了，然则直到 IE9 开端支撑它之后才垂垂变得主流一些它在 HTML5的光环下显得有点昏暗，虽然 SVG 和 HTML5是面向不必使用的分歧东西。

Canvas2D 可以敏捷 paint 图形到屏幕上面，这一点很犀利。然则其悉数功用就是 paint 了，没有内存来做那些（地位，顶层或其他）其他功用。假如您需求那种 book-keeping 任务，就只能本人用 JavaScript 完成，由于 Canvas2D 不会把 DOM 保管到内存中，也正由于如斯 Canvas2D 速度快，非常合适第一人称射击类使用。

与 Canvas2D 分歧，SVG 在您需求保管 DOM 的时分就给力了。运用 JavaScript，一切的 Objects 都可以挪动而且与动画无关。您可以尝尝 Daniel Davis 做的复古类 SVG 游戏 Inbox Attack（http://people.opera.com/danield/svg/inbox-attack.svg）来体验一下，而且看看源代码来调查若何完成动画结果。

由于 shape 和 path 是用 Markup 来描绘的，所以他们可以用 CSS 来定型。与分歧，text 在 SVG 中坚持 text 花样而且愈加的灵敏，愈加可扩展，愈加易于拜访。在 Canvas 中，text 酿成了像素，就像 Photoshop 中的图形 text。

SVG 最强壮的特征是它基于矢量，如许您的插图，图形和 UI 图标等都是矢量图了，如许无论是在 50 英寸的电视屏照样手机屏幕桌面上，看上去觉得都是一样的明晰。在当今如许一个 web 使用无处不在的时代，SVG 图形甚至可以包罗媒体查询（http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes），可所以呼应式的，可以依据分歧的目的设备做尺寸的调整。

综上所述，在最新的桌面阅读器中 SVG 曾经能被普遍支撑了。在挪动产物方面的支撑总体上来说也很好，以及预期在 Android 3.0 版本之前原生阅读器也会支撑它了。

Daniel Davis 有一些 SVG 引见性的资本（http://my.opera.com/tagawa/blog/learning-svg），作者小我也引荐一本免费的电子书：Learn SVG（http://www.learnsvg.com/book-learnsvg/），您也可以看看《SVG or Canvas？Choosing Between the Two》（http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/）来调查二者的区别。

getUserMedia

不像那些被错误地称为 HTML5 的 API，getUserMeida（鄙人文中简写为 gUM）有个相对合理的来由：开初它是 HTML5元素，之后它更名了然后分开了 W3C WebRTC 标准调集。

gUM 答应拜访用户的摄像头和麦克风，原本是在 WebRTC 标准中在阅读器中进行 P2P 视频会议的，当 gUM 拥有了其他的用处，就分开了 WebRTC。

摄像头的拜访最终在 Opera12 安卓版，Opera 桌面实行室和 Google Chrome Canary 里面完成了，但是 Opera 和 Chrome 都还没有完成麦克风的接入。

W3C 标准仍然在用，所以 Opera 和 Webkit 有分歧的语律例范，如许的费事被一个叫做 The gUM Shield（https://gist.github.com/f2ac64ed7fc467ccdfe3）的小 JavaScript 片段搞定了。假如您想更深化地调查这方面请看作者的另一篇文章：It’s Curtains for Marital Strife Thanks to getUserMedia（http://html5doctor.com/getusermedia/）

当视频从设备开端传播输的时分，源数据可以被做成酿成了

假如想把 web app 的功用做得像 native app，gUM 需求做良多的任务。试了一下 Neaver 的 gum 和 WebGL 在 Opera Mobile 12 上面的 demo，觉得和平台独有的 app 一样富有呼应式而且很时兴。当在阅读器产物中其功用被普遍使用的时分，作者言语会有良多基于 web 的 QR 代码阅读者以及良多加强实际的使用。

File APIs

W3C File APIs 答应 JavaScript 拜访当地文件，个中最常用的 API 是 FileReader，可以从 Opera，FireFox，IE10平台等的预览版看到（不包罗 Safari）。

这一份 W3C 标准“为了在 web 使用中供应 API 来代表文件对象，以及编程选择和拜访数据”。例如：你可以上传文件到阅读器中，并当地查找相关信息（例如文件名，尺寸，类型）而不需求到效劳器端。您也可以翻开文件，操作内容，如许可以增强基于阅读器的使用的交互性，用起来更像是当地使用。

另一个常用的用处是使传统的图像上传兑换狂更具有 Web2.0 特征：经过答应在阅读器内部的 Drag and Drop，而不是当地文件系统中改动。

您可以经过运用一个通俗的开端，然后按部就班地进步。HTML5 Drag&Drop 支撑特征检测，假如存在的话就运用

还有良多写文件和操作文件系统的标准，但是这些对当前的跨阅读器使用来说还不太够：

W3C 文件 API：（http://dev.opera.com/articles/view/the-w3c-file-api/）十分根底的引见。

开拓文件系统 API：（http://www.html5rocks.com/en/tutorials/file/filesystem/）HTML5 Rocks 文章，（仅限 Chrome）。

Feature-detecting, progressive enhancement and upgrade messages（特征检测，渐进式加强和音讯告诉）

固然，在没有那些奇幻的 API 的时分，人人老是试图运用渐进式加强和 HTML 语义的办法让网站照常任务。但是有时分却不克不及如许，例如 Paul Neaver 的《HTML5酿成玩具》中，假如 gUM 和 WebGL 目前不存在的话，其网站不克不及有什么弥补办法了，整个网站的中心都没了。

在如许的状况下有两种典型的常规：要么是显示一条音讯说“你的阅读器太渣滓了，塞油哪啦”或许说“你必需用 Chrome6/Firefox 4/Opera10等[刺进能支撑你使用的阅读器]才干拜访”。第一种办法又没用又卤莽，没有建议和弥补办法；第二种办法是个暂时方法，由于六个月之内一切阅读器能够都能支撑你目前运用的技能了，让你在网站上留下的信息过时：例如您写的处理方案是建议运用 Firefox4 来拜访，可是半年后用户装置着 Firefox7 回来拜访你的页面了，这可就真的没救了。

假如您真的不克不及运用渐进式加强，那么就用新型的 HTML 5 Please API 吧（http://api.html5please.com/）。这是 Jon Neal，Divya Manian 和其他几位大虾创作的。经过运用它，可以先查询 caniuse.com 然后返回一个最新（能支撑你的新特征的）的阅读器版本列表。

假如您曾经做了一个需求 Canvas 或 WebSQL DB 技能的 DEMO 或许网站，生怕你曾经处在一个如许的为难境地了：您只是在通知拜访者们他们的阅读器不咋地。然则您不克不及只引荐他们运用一个能支撑这些特征的阅读器来弥补，例如“找个支撑 WebRTC 功能的阅读器再来吧”，如许关于人人都没啥结果。

HTML5 Please API 把开拓人员的言语（和特征）翻译成用户能了解的言语（阅读器）。经过挪用这个 API 你就可以获得一些 HTML 返回值来通知拜访者，或许返回一个带有相关数据的 JSON 对象（包罗阅读器 Logo 及下载引见等信息）。如许您可以依据分歧的客户来显示分歧的弥补信息了。

运用这种方法最令人欣喜的是：假如一切新特征在客户当时阅读器的晋级版都能支撑的状况下，Please API 值建议访客对阅读器晋级，而不是让访客纯真为了拜访你这个页面而改换阅读器。