10个将HTML5推向极限的应用程序

HTML5被注入新的活力到Web应用程序,在发生重大变化暗示在编程来

基本的Web应用程序范式在近20年中没有改变。即使是最新的、最流畅的HTML5网站,至少在核心上,也与早期的Web类似。开发人员在数据周围包装标签,并编写一些JavaScript使站点更具交互性。那么,HTML5成为网络应用的游戏规则改变者有什么值得大惊小怪的呢?

首先,而模型并没有变化,网站的部署最新的HTML5的感觉功能是显着更具交互性和活力。而昨天的Web提供的数据基本上静态展示,HTML5前身是服务了,通过它的数据移动和快速流动的动态演示。相对小的改进,如这些使所有在速度和复杂性的差异。

[ 找出如何破解你的浏览器中的7个简单步骤|也在InfoWorld上:“HTML5在浏览器:帆布,视频,音频和图形”|“HTML5在浏览器:本地数据存储|“HTML5在浏览器中:HTML5数据通信”|“HTML5在浏览器中:HTML5表单”|浏览器中的HTML:地理定位、JavaScript和HTML5 extras]

HTML5深潜水

新兴的HTML5 Web应用模型在四个主要方面有所不同。最明显的可能是相对标准化的画布对象,这使得它更容易提高编写类似Flash的使用JavaScript的动画。结果往往只是作为,以及,华而不实作为来自闪存的人谁是能够把时间的人。谁用于编写的Flash休闲游戏开发商正在生产,在JavaScript的单独运行华而不实的游戏。

开发人员不断报告说Flash代码的工具和库要比HTML5的好很多,但这种情况正在改变。鉴于浏览器制造商大力推动将Adobe排除在市场之外,这一差距可能会缩小,但考虑到Adobe工具的深度和质量,要想把Adobe赶出市场可能很难。

其它主要区别在于在表面之下。最新的浏览器提供Web开发人员的缓存材料几兆字节的本地数据库。大多数用户甚至不会注意到在浏览器上的数据缓存这种依赖;他们只会觉得有些数据为中心的应用程序是活泼。从等待互联网的滞后逐渐消失。

还有许多其他HTML5特性使Web开发人员更容易构建与本地应用程序同等响应能力的应用程序。改进的表单、更复杂的布局和更丰富的背景工作都提供了流畅的性能,这些性能可能不会像画布上舞动的精灵那样立即表现出来,但仍然是更有用的工具。

聪明的设计师把HTML5看作是一种方法,它可以用基本的标签和CSS指令创建一个单独的设计,在许多不同的机器和屏幕上都能很好地工作。当然,它并不完美,但它比为Android手机编写Java,为iOS编写Objective-C,为Mac桌面编写完全不同的Objective-C要简单。

HTML5能帮助Web取代本地代码吗?只有时间会告诉我们答案,但是现在这里有10个Web应用,它们突出了HTML5所能提供的最好的东西。

优化html5的应用程序1:TweetDeck

一开始,TweetDeck只是一个本地应用程序。后来,该公司意识到网络应用变得越来越普遍和强大,它希望TweetDeck继续保持领先地位。

帮助设计该产品网络版本的用户体验的架构师詹姆斯·惠特克(James Whittaker)说,尽管他知道将应用程序转移到网络上将是一项挑战,但这些额外的功能使设计复杂版本的应用程序成为可能。

“用HTML和JavaScript工作的美妙之处在于,你几乎可以完成任何事情,”他说。然后他之前对HTML5的跨域安全限制牢骚满腹,限制应用程序调用只国内服务器。他的团队通过使用代理和HTML5通知API绕开了这些限制,TweetDeck使用了这种API来避免无休止的服务器轮询。

本地存储是最有价值的补充HTML5远之列TweetDeck的担心。这一新功能使TweetDeck的,以用于自动填充表格和账户细节缓存数据。该数据一直被保存在服务器上,迫使用户等待最新的鸣叫秒一命呜呼

Whittaker还称赞了CSS和HTML的许多细微的增强,比如改善了外观和感觉的渐变。HTML5的音频标签也给了TweetDeck“当你得到更新时播放著名的TweetDeck唧唧声的能力。”

html5优化应用程序2:海盗爱雏菊

格兰特·斯金纳(Grant Skinner)是一家设计公司的首席执行官和首席架构师,这家公司一度专门从事Flash游戏。然后微软要求他的团队创造一些东西来展示HTML5和其他技术的承诺Internet Explorer 9的功能。结果就是一款叫做《海盗爱雏菊》的休闲游戏。“微软非常注重图形性能。我们最大的目标之一就是创造一款能够展示IE能力的游戏。”他解释道。

这款游戏有一个按钮,可以打开和关闭沙尘暴、阴影和“许多你在其他浏览器上无法获得的视觉额外功能”。IE9与图形卡的紧密集成允许它以更快的帧速率在画布对象上绘制更多细节。它仍然无法接近原生游戏,但在按下按钮后,视觉复杂性会大幅增加。

虽然他赞扬了性能和新的机遇,Skinner说,他的公司已经建立了大量的工具和库,他们创建Flash游戏时理所当然的。他还表示,有大量的毛刺和技术“仍在走向成熟。”

例如,音频标签在许多浏览器中表现不同,需要大量代码来消除不一致。在iOS上,通过Safari引擎,“你可以有一个活动音频标签。你只能在触摸事件上播放。”让页面伴随另一个事件(如新数据的到达)发出噪声是不可能的。

html5优化的应用程序3:NakshArt

如果您在夜空仰望眼冒金星,识别主要的星座是NakshArt简单。在HTML5精明的网站从浏览器收集你的位置和时间,然后利用这些数据来计算夜空应该是什么样子。NakshArt还存储在本地数据库中关于夜空的信息,使网站上的重复访问的响应速度。

虽然所有的这些特点使得它更容易显示在正确的位置的明星,Premkumar Seshadri,在HCL科技公司总裁表示,HTML5仍然感觉没有完成。“画布元素落后很多的视觉功能,如2D线的影响,”他说。“还有就是要创建虚线没有直接的方式。”

Seshadri说他在线条绘制原语的基础上建立了许多复杂的库。“一旦canvas像现在的Flash一样成熟,你就会看到很多复杂的应用,”他预测道。

html5优化的应用程序4:Aviary

如果不是数千美元的Photoshop是否仍然花费数百?但是也有一些上的基于Flash的工具高跟鞋很快以下,因为基于HTML5的图像编辑器的新兴世界的越来越少的原因购买。如果你想用像素骗取并建立从层图像,这些图像HTML5编辑难以从Photoshop区分。

一个真正的专业人士会发现,许多功能并不像Adobe的高端产品那样强大或复杂,但我们大多数人都不是专业人士,他们不会如此密切地关注像素。Aviary只是在HTML5画布对象中编辑图像的几个伟大工具之一。这就像没有价格和安装麻烦的Photoshop。它可能没有Photoshop那么多的功能,但它提供了许多最重要的功能来满足你的需求。

HTML5优化应用第5号:Scribd

文档存储网站,Scribd现在发出的不需要Flash文档HTML5版本。该公司开始了与Flash,因为它的字体支持比原始的HTML好得多。现在,HTML5支持多种字体,文件更可能看起来是正确的。它是完美的?它看起来不错,但字体是最难的要素之一来获得正确的。

外表并不是唯一的优势。Scribd用html5呈现的文档表现得更像普通的HTML——因为它们是HTML。即使这些字母以奇怪的角度在画布上怪异的部分出现,也可以剪切粘贴。它们不是图纸或PDF文件;它们只是对鼠标做出反应的字母。Scribd使用的标语是:“世界上所有的文件,作为网络结构的一部分生活在网上。”

HTML5优化应用第6号:的Basecamp移动

37Signals以构建优秀的Web应用程序而闻名,这些Web应用程序可以帮助人们组织工作。当智能手机市场出现时,该公司投资于本地应用程序,因为它知道人们会想用手机查看任务。在为iPhone雇佣了一名本土开发人员后,该公司目睹了Android的蓬勃发展。然后团队开始考虑黑莓和其他手机。

“最后,我们得出的结论,我们应该与我们所擅长的坚持:Web应用程序,说:”杰森·弗里德。“我们知道,技术好,我们有很大的发展环境和工作流程,我们可以控制的发布周期,每个人都在37signals公司可以做的工作。”

其结果是,该公司的移动版目标WebKit浏览器,并提供最光滑的HTML5的特点是桌面版本确实在真实调整到智能手机的小屏幕尺寸的包。

html5优化的应用程序7:PhobosLab

大多数HTML5应用程序通常都要通过浏览器,PhobosLab在创建像Biolab Disaster和Drop JS这样的游戏时采用了标准路径。但当PhobosLab使用UIWebView将基于web的游戏移植到iPhone上时,其性能并没有预期的那么好。UIWebView是在本地iPhone应用程序中显示完整的HTML、JavaScript和CSS的标准模块,但它并没有像PhobosLab希望的那样灵活。

问题是,PhobosLab并不想重写游戏,因为公司也想在浏览器上接触到所有人。通过将核心JavaScript引擎与OpenGL引擎链接起来,它挖掘得更深一些,并删除了等式中不必要的部分。所有的HTML渲染和CSS解码都被排除在循环之外。现在您可以通过两种方式来玩这家公司的游戏:作为一个解释JavaScript的本地应用程序,或者作为一个Web应用程序。两者运行相同的代码库。

Dominic Szablewski说:“我只使用了Canvas API的一个非常小的子集,其中最重要的是drawImage(),据我所知,它在任何地方都几乎是一样的。”“对于2D游戏来说,你不需要太多其他东西。”

在此过程中,PhobosLab还修复了一些关于音频性能和多点触摸事件处理方式的其他问题。例如,该公司发现,音频和节目的其他部分(如动画)之间的连接在不同平台上并不一致。Szablewski报告说,不同浏览器之间的音频标签的行为使得同步声音和事件变得困难——这是编写带有弹跳球的游戏时的一个重要因素。他能够在像iPhone这样的单一平台上工作,但是他仍然不能指望在广泛的浏览器上保持一致的性能。

“我希望重新实现帆布和音频的这个解决方案将不再需要在一年或两年,当iPhone的浏览器修复了所有这些问题,” Szablewski说。

HTML5优化的应用程序号8:行走的人

如果你认为CSS文件只是用来选择字体大小或背景颜色,看看Andrew Hoyer的行走的人。HTML只是躯干、手臂和腿的旧图片的集合。CSS文件改变div的位置,动态地使图片像人一样行走。如果这是用JavaScript完成的,这不会令人惊奇,但它是一个令人大开眼界的方式来看到WebKit动画的强大CSS,我们大多数人从未使用。

html5优化的应用程序第9和第10:谷歌和雅虎

如果这是一个真正公平的极端HTML5项目列表,那么谷歌和Yahoo可能会占据70%到90%的条目。

从Gmail这样的开创性产品到称为谷歌Web工具包的Java-to-JavaScript编译器,再到无与伦比的谷歌映射,谷歌继续推动着浏览器的功能。值得记住的是,当谷歌只是一家搜索公司时,雅虎正在推动类似html5的应用。雅虎的用户界面库仍然很棒,而且有很多人喜欢雅虎邮件远远超过谷歌提供的任何东西。

雅虎和谷歌的工程师主要贡献者HTML5委员会,以及两家公司继续发展的工具,可以帮助推动标准。一个开放的、有能力的Web浏览器对这两家公司都有帮助,他们也投入了资源来培育它。这从谷歌呈现光滑这只是其扩展浏览器功能以深入到文件系统并使用单个位的计划的一个例子。会有人看到它后在C编程的梦想吗?我不太确定。

这篇文章《10个应用程序将HTML5推向极限》最初由信息世界

加入对网络世界的社有个足球雷竞技app区Facebook的LinkedIn对最重要的话题发表评论。
有关:

版权©2011Raybet2

IT薪资调查:结果在