跳到主要内容

开发人员指导新的令人兴奋的Web技术

最近,我的HTML5医生Rich Clark带你去参观HTML5 API并且,在签字之前,指向一个令人困惑的页面Web平台:浏览器技术包含两列长文本的小文字,上面写着“window.crypto.getRandomValues”和“DOM变异观察者”之类的可怕内容。

别担心,我们不会考虑所有这些:有些人甚至没有最终确定我们在浏览器中看到它们还需要一段时间。但有些已经在您附近的浏览器中,或即将推出。人们会称他们为“HTML5”。他们不是。但他们是NEWT(新的令人兴奋的Web技术)你应该留意一半。

WebGL的

WebGL代表基于Web的图形库,由非营利性Khronos Group管理。它与HTML5一起使用元素生成3D图形。

WebGL很难学习,因为它非常低级 - 它运行在图形处理单元上 - 因为它实际上是OpenGL的JavaScript端口,这是游戏开发人员使用的一套历史悠久的API。它的主要目标受众是现有的游戏开发人员,他们多年来一直在使用OpenGL,因此他们可以为网络平台编写游戏。

不过,有资源可以帮助你学习WebGL - 它不仅仅适用于游戏;我们已经看过用它制作的精美图形,可视化和音乐视频。我个人推荐的是:

  • WebGL简介看看Luz Caballero提供的图书馆。
  • Raw WebGL 101- 对于那些认为使用图书馆的人来说是承认失败。
  • 学习WebGL- 一个非常好的教程网站。
  • WebGL 101- 教学视频Erik Mller(2.5小时)。
  • 看到Emberwind,一个由Erik Mller移植到webGL的游戏。你可以在Github上分叉,或者只看代码。

WebGL存在于除IE10之外的所有桌面浏览器(已发布或开发者频道)中(微软已表示不支持它)。在移动设备上,它在Android,Blackberry Playbook 2.0,诺基亚N900,索尼爱立信Xperia Android手机以及Firefox Mobile的开发版本中的Opera Mobile 12决赛中发布。

Emberwind ported to WebGL by Erik Mller

Ember Mller将Emberwind移植到WebGL

SVG

可扩展的矢量图形已经在Opera,Firefox,Safari和Chrome中出现了很长时间,但是直到Internet Explorer开始在IE9中支持它才能为黄金时段的使用做好准备,到那时它已经被HTML5所掩盖了。 虽然它们是不同工作的不同工具。

Canvas 2D非常适合快速将图形绘制到屏幕上。但你所能做的只是画画;没有什么记忆,或者什么是“最重要”的东西;如果你需要那种簿记,你必须自己用JavaScript完成。因为它不会将DOM保留在内存中,所以速度很快,因此对于第一人称射击游戏等内容来说非常棒。

相反,当您需要保留DOM时,SVG非常棒。可以使用JavaScript独立移动对象并进行动画处理。试试Daniel Davis的复古SVG游戏收件箱攻击并查看源以查看动画是如何完成的。

由于形状和路径是用标记描述的,因此可以使用CSS设置它们的样式。不像 ,SVG中的文本仍然是文本,因此是可索引的,可混搭的,可访问的;在画布中,文本只是变成像素,就像Photoshop的文本图像一样。

但SVG的真正杀手功能是它基于矢量 - 所以你的插图,图形,UI图标等在50英寸宽屏幕网络电视上将会像在手机屏幕或桌面上一样清晰锐利。在这些网络随时随地,这很重要。SVG图像甚至可以包括媒体查询例如,当您达到小尺寸时,可以做出响应,减少阴影或细节的细微差别。

如上所述,在最新的桌面浏览器上广泛支持SVG。移动支持通常也很好,但3.0版之前的Android股票浏览器除外。

丹尼尔戴维斯有一份清单SVG教程资源。我也推荐一个免费电子书:学习SVG。看到SVG还是画布?选择两者之间更多关于差异。

Inbox Attack - a retro SVG game by Daniel Davis

收件箱攻击 - 丹尼尔戴维斯的复古SVG游戏

GetUserMedia

与许多错误称为“HTML5”的API不同,getUserMedia有一个借口 - 它起源于HTML5 元素在重命名之前然后被放到W3C中的WebRTC规格套件。

GUM(我们现在称之为)允许访问用户的摄像头和麦克风。我提到它是webRTC规范套件的一部分,它将支持点对点的浏览器内视频会议。由于gUM还有其他用途,它也是分开的。

摄像头访问在Android,Opera桌面实验室和Google Chrome Canary版本的Opera 12 final中实现。 Opera和Chrome都没有实现麦克风访问。

该规范仍在进行中,因此Opera和Webkit具有不同的语法,但是一个小的JavaScript片段被称为Gum盾可以规范化那些 - 我在为HTML5 Doctor撰写的文章中提供了更多信息:这是婚姻冲突的帷幕感谢getUserMedia

一旦视频从设备流式传输,它就可以成为一个源

gUM为Web应用程序提供与本机应用程序相同的功能。在Opera Mobile 12上尝试Neave的gUM和WebGL演示感觉与平台特定的应用程序一样响应和快速。随着功能在生产浏览器中的普及,我预测了许多基于Web的QR码阅读器和增强现实应用。

Paul Neave's HTML5 Webcam Toy made with getUserMedia

Paul Neave使用getUserMedia制作的HTML5网络摄像头玩具

文件API

W3C文件API允许JavaScript访问本地系统上的文件。最常用的API是FileReader,可在Opera,Firefox,Chrome和IE10平台预览版中使用(但不适用于Safari)。

此规范“提供了一个API,用于表示Web应用程序中的文件对象,以及以编程方式选择它们并访问它们的数据”。例如,您可以将文件上传到浏览器中,无需转到服务器即可查找名称,大小和类型等信息。您也可以打开文件并操纵其内容。这可以增强基于浏览器的应用程序的交互性,使其更像桌面应用程序。

一个常见的用途是通过允许拖放到浏览器而不是浏览文件系统来使传统的图像上载对话更具Web 2.0。

你从正常开始,然后逐步增强它。 HTML5拖放支持的功能检测,如果存在,则替换用一个

这将是您的图像的拖动目标。将图像拖入拖动目标时,使用文件读取器API显示图像的缩略图。看到雷米夏普的演示

还有用于编写文件和操作文件系统的规范,但这些目前还没有足够的跨浏览器才能使用。

功能检测,渐进增强和升级消息

当然,我们应该总是尝试逐步增强基本的语义HTML,这样,如果花哨的API等不可用,该网站仍然有效。但有时,这是不可能的。例如,使用Paul Neave的HTML5网络摄像头玩具,如果没有gUM和WebGL,网站就无法真正采取补救措施 - 网站的整个点都丢失了。

在这种情况下,通常有两种惯例:要么显示“您的浏览器是垃圾。再见”的消息,要么说“您需要使用Chrome 6 / Firefox 4 / Opera 10 [插入您最喜欢的支持技术的浏览器” '正在使用]“。

第一个是无益的,只是粗鲁;它劝告而不提出补救措施。第二个是瞬态快照;在六个月的时间内,每个其他浏览器都可能支持您正在使用的技术,但您的消息已经过时了。没有任何迹象表明一个被遗弃的网站,比如告诉用户在使用Firefox 7访问时使用Firefox 4。

如果你真的,真的不能使用渐进增强,然后使用新的HTML5请API。由Jon Neal,Divya Manian和其他人创建,它审讯Caniuse.com并返回支持所需功能的最新浏览器列表:

如果你已经创建了一个需要Canvas或WebSQL DB的演示或网站,你就会告诉你的一些访问者他们的浏览器不够好的尴尬局面。但你不能只是建议他们使用这些功能的浏览器;例如,“获取支持WebRTC的浏览器”对每个人来说都是无用的。

HTML5 Please API将开发人员语言(功能)转换为用户语言(浏览器)。调用API并返回一些HTML来显示用户或相关数据的JSON对象(带有浏览器徽标和所有),以便您可以自定义向用户显示的内容。

这种方法特别令人愉快的是,如果API确定查看者当前浏览器的较新版本支持所有功能,则建议升级而不是要求用户更改浏览器只是为了查看你的页面

总而言之,伙计们

正如您所见,有许多激动人心的技术即将到来。当你已经掌握了我们上面讨论过的那些时,就应该再担心整个负载了。玩得开心;记得在尽可能多的浏览器中进行测试。

Rob Winter的蝾螈图片,Mike Brennan撰写的newt / HTML5插图。



翻译字数超限