当前位置: 永利皇宫463手机版 > Web前端 > 正文

挪动和触摸框架,改换游戏的21个HTML5网址

时间:2019-11-08 08:22来源:Web前端
2011年回顾:改变游戏的20个HTML5网站 2011/12/23 · HTML5 ·HTML5 英文原文:2011 in review: 20 HTML5 sites that changed thegame,编译:webapptrend 今年HTML5确实给我们带来了很大的冲击。HTML5Doctors,OliStu

2011年回顾:改变游戏的20个HTML5网站

2011/12/23 · HTML5 · HTML5

英文原文:2011 in review: 20 HTML5 sites that changed the game,编译:webapptrend

今年HTML5确实给我们带来了很大的冲击。HTML5 Doctors,Oli Studholme评选出了20个最佳网站,它们涵盖了语义、音频、客户端web apps、canvas以及SVG和WebGL,这些网站预示了未来web的发展方向。

对HTML5和web来说,今年是收获丰富的一年。HTML5在不断成熟,今年5月HTML5进入了Last Call阶段,并计划在2014年完成标准制定。WHATWG不仅大力提升了HTML5现有的功能,还加入了诸如WebVTT这样的一些新功能。在浏览器上的进展也在逐步推进,目前正与五大提供商积极推进相关工作。还有很多的工作需要去做!

在内容方面,你能深切感受到这一年似乎真的就是HTML5的一年,CSS3和JavaScript web stack的时代已经到来。HTML5现在已经成为许多开发者的首选,有关HTML5新功能的探索工作也在积极展开。下面列举了一些特别突出的HTML5网站。其中许多网站会让人惊呼“这根本不可能在native web上实现”。

图片 1

JavaScript 移动和触摸框架

jQuery Mobile: 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。Sources.

Zepto.jsZepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。Sources.

MicroJS: Microjs网站应用列出了很多轻量的Javascript类库和框架,它们都很小,大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。

PhoneGap:是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。Sources.

Sencha TouchSencha Touch 是一个支持多种智能手机平台(iPhone, Android, 和BlackBerry)的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。

JQtouch, 是一个jQuery 的插件,主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。Sources.

DHTMLX Touch针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5,创建移动web应用。它不只是一组UI 小工具,而是一个完整的框架,可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器,用DHTMLX Touch创建的应用,可以在iPad、iPhone、Android智能手机等上面运行流畅。

 

jQuery 插件

Waypoints是一个jQuery 用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览,或者固定某个元素不让滚动等等。支持主流浏览器版本。

Lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。

TweenJS: 一个简单和强大的 tweening / animation 的Javascript库。

Easings类Css3的jQuery 动画插件

Spritely这个插件可以创建出如flash一样的动画效果,比如:在页面上有一只飞动的小鸟,一个动态滚动的背景等。

File Upload,jQuery 文件上传插件4.4.1

Slideshow/Carousel插件.Sources.

Supersized– 全屏式的背景/幻灯片插件

Masonryi一款非常酷的自动排版插件,这款jQuery工具可以根据网格来自动排列水平和垂直元素,超越原来的css.Sources.

jQuery 简单Layout演示,管理各种边栏式,可改变大小式的布局。

Flexigrid– jQuery数据表插件

Isotope绝对是一个令人难以置信的jQuery插件,你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目,重新排序和整理甚至更多。

Super GesturesjQuery 插件可以实现鼠标手势的功能。

MouseWheel是由Brandon Aaron开发的jQuery插件,用于添加跨浏览器的鼠标滚轮支持。

AutoSuggestjQuery 插件可以让你添加一些自动完成的功能。

qTip一个漂亮的jQuery的工具提示插件,这个插件功能相当强大。

jQueryCharts and graphic用来制作图表。

jQuery Tools– Themissing UI library

 

 

HTML5 视频播放器

Popcorn.js是一个HTML5 Video框架,它提供了易于使用的API来同步交互式内容,让操作HTML5 Video元素的属性,方法和事件变得简单易用。 (来自Mozilla)

LeanBack PlayerHTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放,音量控制,在同一个页面中播放多个视频。 (来自Google)

Vid.ly为你上传的视频提供转换功能,并且为转换后的视频创建一个短网址。通过Vid.ly,让你的视频可以在14种不同的浏览器和设备上播放,不需要再去考虑将要浏览视频的人使用什么设备了,以避免各各软件巨头之间的利益之争带来了不兼容,给用户带来了巨大的困扰,短网址让你可以通过Twitter、Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB,免费帐户也没有播放或浏览限制。

 

JavaScript 音频处理与可视化效果

使用HTML5 和 Flash,SoundManager V2只用单一API的提供了可靠,简单和强大的跨平台的音频处理。

DSP, JavaScript的声音Digital Signal Processing

The RadiolabHyper Audio Playerv1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat

jPlayer, 一个 jQuery HTML5 音频/ 视频库,功能齐全的API

 

JavaScript 图形 和 3D

Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准,无需任何插件。

Javascript 3D 引擎:ThreeJS由 Mr Doob 开发,一个轻量级的 3D 引擎,不需要了解细节,傻瓜都能使用。这个引擎可以使用

,

和 WebGL.

Shader Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.

PhiloGL, Sencha的PhiloGL是首个WebGL开发工具之一,提供了高水准的功能,来构建WebGL应用。Sencha创建了几个演示,来描述框架交互式3D虚拟化的能力,比如3D view of global temperature changes。

WebGL Inspector你就Firebug等Web调试工具一样,这个是 WebGL的调试工具。

WebGL frameworks由 Khronos Group 收集的一个WebGL框架列表。

EaselJS, 一个使用html5的canvas的 JavaScript 库.Sources.

JavaScript Game Frameworks免费的JS游戏框架列表。另,可参看JS游戏框架列表。

Rapha?l是一个小型的JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib–Rapha?l

jQuery SVG插件让你可以了 SVG canvas 进行交互。

Google chart tools– 参看本站的使用Google API做统计图

Arbor.js,是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

 

JavaScript 浏览器接口 (HTML5)

Modernizr– 是一个专为HTML5 和CSS3 开发的功能检测类库,可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表cross-browser Polyfills

HTML5Shiv: 该项目的目的是为了让IE 能识别HTML5 的元素。

Polyfills: 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能,有些代码需要Flash。

YepNopeJS: 一个异步的条件式的加载器。Sources.

jQueryCSS3 Finalise: 是否厌倦了为每一个浏览器的CSS3属性加前缀?

Amplify.js:一套用于web应用数据管理和应用程序通讯的jQuery 组件库。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage 和 sessionStorage标准处理客户端的存储信息,对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request增加了一些额外的特性。Sources.

History.js优美地支持了HTML5 History/State APIs

Socket.IOWeb的socket编程。

 

JavaScript 工具

{{mustaches}} 小型的 JavaScript 模板引擎。

json:select(), CSS式的JSON选择器

HeadJS, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。

JsDoc Toolkit是一款辅助工具,你只需要根据约定在JavaScript 代码中添加相应的注释,它就可以根据这些注释来自动生成API文档。Responsive image, 一个试验性的项目,用来处理responsive layouts式的图片。

UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具,它支持任何CommonJS模块系统的Javascript平台。

Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。

Backbone是一个前端 JS 代码 MVC 框架,被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery,不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码,实现很多复杂的前端交互功能,首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

 

客户端和模拟器

BrowserShot, 检查浏览器的兼容性,跨浏览器平器的测试

Test everything… 输入一个你想要测试的URL……

Android browser模拟器

iPhone browser模拟器

Opera browser模拟器

Firebug与Firefox集成,可以查看和调试你的Web页面。

 

CSS3 和 字库

CSS3 MakerCCS3的生成器容易地创建

CSS3 animations。Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。

CSSwarp– CSS 文本扭曲生成器

Gradient Editor, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla

Google Web Fonts通过Google Web Fonts API 可以浏览所有的字体@font-face Kit Generator, 为Web转换字体

Typetester, 比较字体。

Media Queries. 一组 responsive web 设计。

Pattern TAP, UI组件。

 

Website (FULL) 模板

HTML5 Boilerplate是一个HTML5/ CSS / js模板,是实现跨浏览器正常化、性能优化,稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合,目的是满足您开发一个跨浏览器,并且面向未来的网站的需求。Sources.

HTML5 starter pack是一个干净的和有组织的目录结构,其可适合很多项目,还有一些很常用的文件,以及简单的Photoshop设计模板。

Initializr是一个HTML5 模板生成器,其可以帮你在15秒内创建一个HTML5的项目。

Animated Portfolio Gallery(教程)Slick MobileApp Website如果通过 jQuery 和 CSS 制作一个手机应用的网站。

RSS Reader如果通过 jQuery Mobile 创建一个RSS Reader

Single Page Applications使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。

移动和触摸框架 jQuery Mobile: 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布...

语义

1. HTML5的Web开发人员版本

将HTML5的Web开发人员版本列举在这可能有点奇怪,因为它只是一个HTML5标准的版本。一直以来W3C的标准有点让人费解,因为它是为web浏览器开发人员编写的,而不是网站。但是HTML5标准出人意外的具有非常好的可读性,并且里面列举了大量的实例。如果你以前有过阅读W3C标准的痛苦经历,或许HTML5的标准会让你喜出望外。

HTML5的Web开发人员版本是由Ben Schwarz 和同行一起制定的,诣在“为web开发人员提供基础的标准指南”。它是对浏览器提供商版本标准的修改,更适合web开发人员阅读。除了印刷风格具有更好地可读性外,还提供了许多HTML5的附件。它使用了Offline Cache,能够支持浏览器使用<progress> 和AppCache API。search-as-you-type功能也支持离线访问,搜索框使用type="search"

它告诉人们怎么做一些了不起的工作。Ben将这个作为一个志愿项目,并且可以在GitHub上找到所有的资源。web开发人员能够借助这些资源开发各种HTML5应用。

图片 22. Move the Web Forward

Move the Web Forward是由Mat Marquis, Aaron Forsander, Connor Montgomery, Paul Irish,Divya Manian, Nicolas Gallagher, Addy Osmani和一些朋友一起编写的,它告诉人们“如何按照自己的理想打造一个了不起的web”。 里面列举了各种你能够用来优化web的方法。

网站陈列了HTML5代码,使用data-* 属性能够实现Twitter中的hashtag搜索功能。里面还有一些方便阅读但是没有实际意义的申明:

图片 3<!DOCTYPE html``是一个重要的位,可以触发标准模式。)总之,所有的这些资源都诣在帮助开发者打造更加优秀的HTML5网站,Move the Web Forward中的信息是非常有用的。Beyond the Blue Beanie?, Stephanie (Sullivan) Rewis评论说:“俗话说得好,众人拾柴火焰高。有这么多人参与,必然能够推动web快速发展。现在大家应该团结起来,让web的风潮来得更猛烈些!”在Addy Osmani的The Smashing Guide To Moving The Web Forward中有更多相关讯息。

图片 43. Boston Globe

Boston Globe是一个典型的完美商业“响应web设计”网站。遵循移动优先的原则,即使是在不支持媒体库查询或是JavaScript的老版本浏览器上,它也依然能够正常运行。Filament Group的Scott Jeh表示“网站的所有功能都特意被设计为不依赖JavaScript,但是在支持JavaScript的浏览器上,它可以利用各种丰富的JavaScript驱动接口提升应用的功能”。

Scott还指出“我们选择HTLM5主要是出于几点考虑。其中最重要的一点就是,它是面向未来友好型的协议,它提供了丰富的功能能够满足我们的各种需要。例如,我们大量使用了data-``属性,用来配置行为选项或是融入内容的增强功能,当然,HTML5能够使用新的语义元素代替以往的div/p/span,这些元素非常有用,对我们很有帮助”。

图片 5Audio

4. Anatomy of a mashup

Anatomy of a mashup中融入了他对音乐的热爱,DJing,datavis以及很酷的web技术。

混搭的Definitive Daft Punk音频利用了<audio> API和<canvas>,以及CSS3的变形和效果转换功能,将音乐变得可见。Cameron表示“所有的波形和光谱都是根据音乐实时变化的,这样你就能够在你的浏览器上看到音乐的变化了!”未来证明Flash还有市场,Cameron使用了一个自定义的Flash app采集音频数据。关于HTML5,Cameron表示“我热衷于HTML5开发最重要的原因就是开发的直接性;我能够编辑一个JavaScript文件,刷新一下,我立即就能看到修改的效果。不需要编译,也无需额外的插件。一切就是这么简单直接。”

图片 65. SoundCloud

SoundCloud 提供了声音录制和共享服务,大受艺术家和DJ们的欢迎,他们能够使用SoundCloud分享自己的合成音乐并且吸引更多的粉丝。它也是一个很好的HTML5教学实例。在桌面web app上通常用Flash播放音频,而现在还可以选择使用HTML5 Audio。这样SoundCloud还能在iPad上运行,最近发布了一个基于HTML5的工具。

除了使用<audio> 和 Audio API外,他们还在许多地方使用了data-*属性,以及Canvas,SVG和LocalStorage。Matas Petrikas表示“我认为我们使用Canvas渲染波形部件是一个非常明智的选择,相比于Flash,它极大的减轻了CPU的占用率”。不幸的是,还是有一些用户对此嗤之以鼻(虽然确实存在一些客观原因),不愿意使用HTML5的新元素和属性(虽然这一现象正在逐渐改变)。

然而,HTML5音频并不是唯一的选择,正如Matas所说的“HTML5 Media API在web浏览器中的实现状况不佳”。为了解决这个问题,Tomás Senart和Yves Van Goethem做了一套“Are We Playing Yet?”的音频测试工具。Matas表示“大家的反应非常棒,几乎所有的浏览器提供商都参与了进来,我们对2012年充满信心!”

移动设备上还存在一些其他的问题,如:声音录制问题,缺乏广泛的position:fixed 的UI支持,移动浏览器的更新不够及时——Android WebKit正逐渐变为现代的IE6。因此,SoundCloud大力提升了它在iOS和Android上的native apps。Matas说“我们希望能够尽可能为用户提供最好的体验,但现在移动浏览器还没能跟上”。但是他未来仍然充满信心:“我们非常看好即将推出的设备API(getUserMedia),我们希望将来能够不依赖Flash直接在浏览器上处理声音”。

虽然目前的规范和浏览器还存在这样或是那样的问题,但是毫无疑问,这些问题肯定会很快得到处理。比如Mobile Safari现在已经能够支持背景声音GeoLocation以及速度感应器了。虽然目前还存在这些问题,但Matas认为,与Flash相比,“HTML5版本的开发是一个相当快的过程。调试和优化都简单得多。这使得我们能够更轻松地开发或者重建应用,而最终的用户也会从中获益!”

图片 7

6.The Wheels Of Steel

Scott Schiller开发的The Wheels Of Steel由两个唱片和一个混音器构成,可以在浏览器中运行。在浏览器支持的情况下它优先选用HTML5 Audio,在不支持的环境中它会通过Scott的JavaScript库SoundManager 2使用Flash替代。它还使用了一些其他的有趣元素,包括使用<input type="range"> 实现唱片的平滑转换和本地存储,使用CSS3提升应用的视觉效果。Scott的The Wheels Of Steel: An Ode To Turntables (HTML)介绍了更多细节问题。里面说到“网页能够实现优雅的降级,即使在不支持JavaScript的环境中,应用的核心UI和内容也能够很好地显示。如果浏览器不支持JS网页就无法正常显示或变得模糊不清,这就是网站开发者的失职”。

图片 8客户端web apps

7. Dabblet

Dabblet 席卷了Lea Verou的最新工具——一个完全在客户端运行的CSS sandbox。

它大量采用了HTML5和相关工具,包括CORS (cross-origin resource sharin),localStorage,History API,Selectors API,data-*,contenteditable和内联的SVG。Lea正考虑未来还要使用Drag & Drop API嵌入资源,并利用Offline API,但据说“offline API相当麻烦”。她曾尝试使用Web Workers凸显异步语法,但是这使得应用变得更慢了。她还想使用UndoManager实现“dabblet的代码的Undo/Redo功能”

它还使用了Lea的具有争议的-prefix-free库自动处理CSS vendor prefixes的问题。Lea正考虑提供一个no-prefix-free选择,或是增加一些类似LESS的元素。虽然Eric Meyer曾极力为vendor prefixes辩护,但Divya Manian,Henri Sivonen,和Lea都表示目前vendor prefixes使用(赋值,粘贴)存在着问题。这不仅仅是HTML5的问题,它还关系到了我们应该如何工作这类原则性的问题,CSS Working Group更青睐于使用www-风格的输入。

因为目标人群是web开发者,所以Lea并不担心向后兼容性的问题,“对技术不太熟悉的用户可能会继续使用IE访问网站,但是在IE上也能使用HTML5,只是需要一些辅助工具并采取降级措施。”关于HTML5,Lea表示“对于开发者来说,HTML5意味着三件事:速度,通用性,以及开放性。开发工作正变得越来越容易了”。

图片 98. Font Dragr

Ryan Seddon开发的font dragr帮助开发者在浏览器中预览自定义字体,用户只用将字体文件拖入font dragr或是在列表中选择一个字体就能直接看到字体的样式了。更棒的是,使用一个CSS选择器选中相应的字体,你就可以用font dragr书签改变任何一个网站的字体了。用户可以快速使用 @font-face 预览和比较各种字体,甚至无需修改代码。

它使用了HTML5的最新元素:Drag和Drop API,the History API,contenteditable属性,以及localStorage。它还准备支持Google Web Fonts。Ryan表示localStorage用于“在交互式请求中获取视图html,在DOM中替换它,并在localStorage中缓存视图HTML”。关于HTML5,Ryan只是简单地表示“它还在计划中”。

 

图片 10SVG

虽然这不是HTML5标准的一部分,但是许多很棒的网站都大量使用了这个矢量绘图标准。

9. Slavery Footprint

Slavery Footprint是一个互动的问卷调查,用于测试“你拥有多少个奴隶?”,帮助人们提升现代的奴隶意识。

它在JavaScript中使用了HTML5元素、GeoLocation和SVG延迟下载以及制作动画内容。尽管在现代的浏览器中这个网站效率很高并且页面相当精致,但是它并没能提供最好的用户体验。因为在不支持JavaScript的浏览器中,这个调查几乎无法展开,并且关于奴隶的信息(“What? Slaves work for me?”)是一些服务访问的文本图片。或许它一开始就没有考虑“内容优先”的原则,Slavery Footprint与生俱来就有一些缺陷,比如在对旧版本浏览器的支持上就存在问题——他的客户端是USA State Department,他们还在使用IE7。尽管存在这些问题,但是它的确在提升大家对现代奴隶的认识方面取得了巨大的成功。

图片 1110. Kern Type

Kern Type是Mark MacKay开发的一个调整字体距离的小游戏,它很奇怪地容易让人上瘾。你可以调整一个单词中各个字母的距离,程序会根据你的表现给出平分。每个单词的字体也有所不同。

除了使用JavaScript library Raphaël 的SVG设计字体外,它还使用了data-* 属性设置字体数据(初始位置信息以及水平向量),使用了Raphaël的 drag-n-drop增加交互性。

Mark表示“最初我并没有打算支持平板电脑。当Kern Type几近完成的时候,我惊奇地发现我能在iPad上打开它,并且运行得相当不错:功能上几乎没有任何损失,动画也相当流畅,拖拉动作都执行得很好。”他放弃了Raphaël drag-and-drop,因为如果继续使用它,那必须在Raphaël和自定义的javascript之间定义一个接口。在访问对象的时候使用HTML5的drag-and-drop,这些都是相当麻烦的。

当你完成了这个游戏以后,你可以继续尝试挑战它的姊妹篇Shape Type,继续学习for Method of Action的第一篇“Design for programmers”,你会发现这两个游戏都做很好地到了这一点。

图片 1211. SVG Girl

SVG Girl是一个为IE9版本开发的演示网站。它展示了IE9强大的SVG功能,里面使用日式风格的动画形式,每秒运行10个SVG帧,并且通过<audio> 元素和<video>为网站的增添声音。

它是由jsdo.it的核心成员开发的,jsdo.it是一个开发、分享、分支JavaScript的社交编码社区网站。Kayac是网站的负责人,他形容这个团体为“全日本最好玩的社区”(正如他们的‘data-*’和SVG-powered团队的网页所看到的)。

目前还没有发现日本的在校女生在使用Windows Phone 7.5体验这种转变,但这只是时间的问题。还有一个有趣的日本案例——The Shodo,它是一个基于<canvas>的传统书法web app,里面也使用了SVG。

图片 13Canvas

12. Peoplemovin

Peoplemovin是Carlo Zapponi开发的一个个人项目,网站中使用了大量的图表(受到Sankey图表的启发)来展示世界各地的移民情况。全世界有超过3%的人口,也就是多于2.15亿人不在自己出生的国家生活。在Peoplemovin上可以方便地查到各个国家的移民状况,可以非常直观地看到各种统计数据。

Carlo说到“这个网站的基础元素就是canvas,所有的交互和可视化都是用canvas实现的,并且能够方便地勾画出各个国家之间的连接路线。在网站中还采用了CSS3实现一些圆角、阴影、光效和字体的风格设置。”它不仅能在最新的浏览器上运行,还能在智能手机和平板电脑上运行。Carlo最后使用了一个自定义的开源工具包实现了这些效果,他将这个工具命名为DataMovin,并打算后期发布这个工具(在此期间会对代码做进一步的检查)。

Carlo对HTML5的描述是“HTML5最棒的地方就是它是一个滋生创造性的平台。你有了一个非常疯狂的新想法?那太好了!你能以前所未有的速度将这个想法在浏览器中实现,而不用另起炉灶。”

图片 14

13. Rally Interactive

Rally Interactive网站使用canvas开发了一些非常有创意的东西,它使用canvas完成网站的交互功能。选中网页中的三角形后图形会做出反应,当点击它以后,也会出现动画,以前实现这些动画可能需要加入类似Flash这类的插件。

正如Wes Pearce所说的“如果没有HTML5 canvas,我们的网站根本就不可能达到我们想要的效果。最新的浏览器几乎都支持canvas。我们还充分利用了最新的History API,它的实现出人意料的高效。”

图片 1514. Up and Down the Ladder of Abstraction

Bret Victor开发的Up and Down the Ladder of Abstraction为如何使用交互提供了一个很好的示范。

在示例中加入了<canvas>实例,让你能够通过交互的方式了解各个点。作者认为这种方式能够应用到未来的教科书中,使用ePUB 3和HTML替代原来的PDF,ePUB 2和 Kindle Format 8。

图片 1615. Sumon

Sumon 是一个细节设计得相当不错的加法小游戏。Ludei最初开发这个游戏的目的是想用它展示他们的CAAT框架,里面可以演示Canvas,WebGL和DOM/CSS。

从2010年推出Agent 008 Ball和Pirates Love Daisies开始,将canvas和audio结合起来就成为了一种倍受推崇的开发方法——能够开发出在浏览器中运行的各种有趣的小游戏。它们能够在iTunes,Chrome和Android上访问,包括Facebook游戏在内的许多浏览器游戏都是基于同一个代码库。这有点像是native apps。

Iker Jamardo表示“JavaScript和HTML5非常适合开发游戏。我们发现它的唯一缺点就是在移动设备浏览器上性能不够理想。”但Ludei相信这一点一定能够得到解决,他们开发的Cocoon and CocoonJS frameworks在移动设备上的性能与native apps性能相当。Iker总结到“我们都相信JavaScript和HTML5是一个非常理想的游戏开发和跨平台开发工具”。

图片 17WebGL

HTML5标准又将WebGL单独分离出来了——它是一组单独的标准API,用来在<canvas>中加入3D图形。本节不会具体介绍其中的信息,而仅仅是给出一些示例:

16. HelloRacer

HelloEnjoy开发的HelloRacer,是一个可驾驶的F1赛车。

图片 1817. WebGL Shader — Travelling wave fronts tech demo

The travelling wave fronts tech demo是一个“有规则的8bit扩散系统,里面加入了波形动画和像素衰退效果”。看起来相当迷幻。

图片 1918. ROME “3 Dreams of Black”

ROME “3 Dreams of Black”是Chris Milk和朋友一起开发的一个音乐录音带交互网站,里面有Danger Mouse,Danielle Luppi和Norah Jones的音乐。

图片 20还有记录电影幕后技术的演示和视频也是不容错过的。

Dev.Opera的“An introduction to WebGL”(以及“Porting 3D graphics to the web”,都是由Luz Caballero编写的)中有更多关于WebGL的介绍,里面还有许多精彩的示例。Opera还预备发布一个更加全面的WebGL教程,并且即将面世。

将来/现在

Web中还加入了许多了不起的元素。WebRTC (实时通讯) 标准 (getUserMedia)就是其中之一。它能够实现“交换实时的交互多媒体信息,其中包括音频和视频”,常被用于浏览器上的视频聊天。Opera还尝试在桌面和移动设备的开发工具中加入对getUserMedia 的支持。

19. 浏览器上的视频聊天

Ericsson Labs已经在这个方面开发了一段时间了,并且提供了一个可下载的WebKit库(还有更多相关的信息和教材)。

 

图片 2120.人脸检测/胡须示例

Opera还试图提供对WebRTC以及DeviceOrientation Event标准的支持,自定义了一个Opera Labs Camera and Pages。Rich Tibbett使用这两个标准编写了一个Native网络摄像头驱动和取向事件,并且用WebRTC实现了一个在在线视频中检测人脸的演示示例。如果这还不够,你还可以在浏览器中视频添加一个胡须。

图片 22

总结

你可能已经发现了,虽然这里的网站是按照HTML5的技术进行分类的,但是他们不止使用了一种技术。尽管HTML5标准(和其他的web技术标准,比如SVG和WebGL)中还有一些内容不够完善,但是它里面确实有许多你现在就能用得上的好技术。要想了解HTML5的最新进展和更多讯息,可以查看HTML5 Doctor,W3C’s Planet HTML5和Twitter @HTML5。

希望你能够回到文章开篇介绍的那两个网站,继续推动HTML5的前景并使它更加完善!

在2011年,有哪些HTML5技术影响到了你?

 

赞 收藏 评论

图片 23

编辑:Web前端 本文来源:挪动和触摸框架,改换游戏的21个HTML5网址

关键词: