10 apps pushing HTML5 to the limit

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

The basic Web application paradigm hasn't changed in almost two decades. Even the latest, slickest HTML5 websites resemble those of the early days of the Web, at least at their core. A developer wraps tags around data and writes a bit of JavaScript to make the sites somewhat more interactive. So what's all the big fuss over HTML5 being a game changer for apps on the Web?

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

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

HTML5 Deep Dive

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

Developers continue to report that the tools and libraries for Flash code are substantially better than those for HTML5, but this is changing. The gap will probably narrow, given the major push by the browser makers to cut Adobe out of the loop, but it may be difficult to unseat Adobe, considering the depth and quality of its tools.

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

有很多都er HTML5 features that make it easier for Web developers to build applications that offer responsiveness on a par with that of native applications. Improved forms, more sophisticated layouts, and richer background work all offer smooth performance that may not be as immediately apparent as dancing sprites on a canvas object but still add up to more usable tools.

聪明的设计师看到HTML5作为一种方法来创建一个单一的设计出基本的标签和CSS指令,在许多不同的机器,并在许多不同的屏幕房地产行之有效的。它从来就不是完美的,当然,但它比Android手机,Objective-C的编写Java为iOS更容易,一个完全不同的Objective-C为Mac台式机。

Can HTML5 help the Web supplant native code? Only time will tell, but for now here are 10 Web apps that highlight the best that HTML5 can deliver.

HTML5-optimized app No. 1: TweetDeck

在开始的时候,TweetDeck的只是一个本地应用程序。然后,该公司认识到Web应用程序正变得越来越普遍,强大,它希望TweetDeck的仍然是一个领导者。

James Whittaker, an architect who helped craft the user experience of the Web version of the product, said that while he knew that moving the application to the Web would be a challenge, the extra features made it possible to design a sophisticated version of the application.

“美在HTML和JavaScript我工作s that you can accomplish almost anything," he said. Then he preceded to grouse about the cross-domain security limitations of HTML5 that restrict an application to calling only its home server. His group worked around these limitations with proxies and by embracing the HTML5 notification API, which TweetDeck used to avoid endless server polling.

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

惠特克还称赞了许多粒状增强CSS和HTML,如改善外观和感觉的梯度。HTML5的音频标签也给了TweetDeck的“当你更新播放著名的TweetDeck的啁啾的能力。”

HTML5优化的应用程序第2号:海盗爱雏菊

Grant Skinner is CEO and chief architect of a design firm that once specialized in Flash games. Then Microsoft asked his outfit to create something to show off the promise of HTML5 and thepower of Internet Explorer 9。休闲游戏称为海盗爱雏菊是结果。“微软是真正专注于显卡的性能。我们的一个大目标是建立一个游戏,展示了IE什么可以做的,”他解释说。

The game comes with a button that can turn on and off dust storms, shadows, and "a lot of visual extras that you don't get on other browsers." IE9's tight integration with the graphics card allows it to draw more details on the canvas object at a faster frame rate. It still can't approach a native game, but there's a big increase in visual complexity after pushing the button.

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

音频标签,例如,不同的行为在很多浏览器中,需要大量的代码来抚平的不一致。在iOS上,用Safari浏览器引擎,“你可以有一个活动音频标记。而且你只能发挥它在触摸事件。”获取页面进行噪声陪另一个事件,如新的数据的到来,是不可能的。

HTML5-optimized app No. 3: NakshArt

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

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

Seshadri说,他是建立在线路图元的顶部一批精良库。“一旦帆布成熟像今天的闪光,你会得到看到很多很多复杂的应用,”他预测。

HTML5-optimized app No. 4: Aviary

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

真正的专业人士会发现,很多的功能并不强大或复杂Adobe提供的高端产品,但我们大多数人都没有谁看的像素如此紧密的专业人士。百鸟只是在一个HTML5画布对象编辑图像几个伟大的工具之一。这就像Photoshop,而不价格或安装的麻烦。它可能没有那么多的功能,如Photoshop,但它与许多最重要的问题,以满足您的需求。

HTML5优化应用第5号:Scribd

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

The look isn't the only advantage. Scribd's HTML5-rendered documents behave more like regular HTML -- because they are HTML. It's possible to cut and paste the letters even if they're plopped at strange angles in weird parts of the canvas object. They're not a drawing or a PDF; they're just letters that react to the mouse. Scribd uses the tagline, "All the world's documents, living online as part of the fabric of the Web."

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

37Signals公司是著名的建立良好的Web应用程序,帮助人们安排自己的工作。当智能手机市场来了,该公司投资于本机应用程序,因为它知道人们想用自己的手机来核对任务。雇用天生的iPhone开发者后,该公司的Android看着绽放。随后球队开始琢磨一下黑莓和其他手机。

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

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

HTML5优化应用第7号:PhobosLab

对于大多数HTML5应用的道路通常会通过浏览器,并创建游戏,如生物实验室灾难和Drop JS时PhobosLab了标准路径。但是,当使用PhobosLab移植UIWebView的基于Web的游戏到iPhone,表现并不好,因为它的预期。UIWebView的,在原生iPhone应用程序中显示完整的HTML,JavaScript和CSS标准的模块,不如灵活的PhobosLab想为它的游戏。

The trouble was PhobosLab didn't want to rewrite the game because the company wanted to reach people in browsers everywhere too. It dug a bit deeper and excised the unnecessary parts of the equation by linking the Core JavaScript engine with the OpenGL engine. All of the HTML rendering and CSS decoding is cut out of the loop. Now you can play the company's games in two ways: as a native app that interprets JavaScript or as a Web application. Both run the same code base.

"I only used a very small subset of the Canvas API, most important drawImage(), which works almost the same everywhere as far as I can tell," said Dominic Szablewski. "For 2D games there's not much else you need."

Along the way, PhobosLab also fixed a few other issues with the performance of the audio and the way that multitouch events are handled. The company found, for example, that the linkage between the audio and other parts of the program, such as the animation, wasn't consistent across platforms. Szablewski reports that the behavior of audio tags across the various browsers makes it difficult to synchronize sound with events -- an important element when writing games with bouncing balls. He's able to work with single platforms like the iPhone, but he's still not able to count on consistent performance in the wide range of browsers.

"I hope that this solution of reimplementing canvas and audio won't be needed anymore in a year or two, when the iPhone's browser has fixed all these issues," said Szablewski.

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

如果你认为CSS文件只是用于选择字体大小或背景的颜色,看看安德鲁·霍耶的行走的人。该HTML仅仅是一个的DIV的集合,它的躯干,手臂和腿的老照片。CSS文件改变的DIV的位置,使动态画面走像一个人。这不会是惊人的,如果它是用JavaScript实现,但它是一个大开眼界的方式来了解WebKit的动画的力量在CSS中,我们大多数人从来不使用。

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

If this were a truly fair list of extreme HTML5 projects, it's possible that Google and Yahoo would take up 70 to 90 percent of the entries.

From pathbreaking products like Gmail to the Java-to-JavaScript compiler known as Google Web Toolkit to the incomparable Google Maps, Google continues to push the edge of what the browser can do. And it's worth remembering that Yahoo was driving HTML5-like applications while Google was just a search company. Yahoo's User Interface libraries are still great, and there are many people who like Yahoo Mail much more than anything Google delivers.

雅虎和谷歌的工程师是主要贡献者HTML5委员会,两家公司继续开发工具,帮助驾驶标准。一个开放的,有能力的Web浏览器可以帮助两家公司,他们投入资源培育它。这个从谷歌呈现光滑是其计划用于扩展浏览器的力量深入到文件系统和工作与各个位只是一个例子。将看到它之后编程用C中的任何一个梦吗?我不确定。

这个story, "10 apps pushing HTML5 to the limit" was originally published byInfoWorld

加入对网络世界的社足球竞猜app软件区Facebook的LinkedIn对那些顶级心态的话题发表评论。
有关:

版权© 2011足球竞彩网下载

IT薪资调查:结果是在