跳到主要内容

优雅的HTML5设计:6个鼓舞人心的网站

看看我们的前6名获得最终灵感,创建一个更独特和用户友好的网站。

特工008球

一个最经典意义上的应用程序,特工008球是一个间谍主题的游泳池游戏;这是在没有插件(如Flash或Silverlight)的情况下,您不希望在浏览器中找到的游戏类型。

由...制作Pixel Lab,游戏使用HTML5的canvas元素进行池表渲染,而声音效果API使用HTML5的音频元素。

“借助HTML5中的新元素,再加上我们在过去几年中在JavaScript引擎中看到的改进,你就拥有了与其他UI框架相同的一流渲染引擎,”开发人员Robby Ingebretsen说道。

该项目并非没有困难,但主要是由于浏览器兼容性障碍和HTML5是一个新兴标准 - 良好的文档和样本很难找到。

奇怪的是,从每秒40-50帧渲染到预期的性能影响从未实现过。 Ingebretsen认为,通过HTML5设计,“我们正处于一个大事物的尖端 - 基于浏览器的应用程序的新时代。

“接下来的两年几乎肯定会带来一系列工具和框架,使HTML5的构建更快更好。”

听起来不错

听起来不错是一个网络应用程序,可以毫不费力地为视频添加声音。登录后,上传视频并添加声音。所有的魔力都直接在浏览器中使用HTML5视频/音频元素和API。

来自开发人员的Leo Soto连续告诉我们,在选择技术时,“你只有两个选择:Flash或HTML5。当网络需要浏览器无法提供的功能时,我们认为Flash是必要的恶魔。但现在所有的新浏览器都是推出HTML5支持,这个决定是明智的。“

该团队还意识到“如果整个体验都在同一平台上编码,那么将视频播放器和声音编辑器与页面的其余部分集成将更容易”。目前在alpha中计划添加更多功能,Sounds Good值得关注。

正宗的工作

正宗的工作来自Cameron Moll自2005年以来一直是网络工作的热门网站。除了最近在英国推出,它还经历了HTML5改版。

开发人员Ben Bodien解释了切换到HTML5设计的原因:“最初(也许是令人惊讶的),它是块级锚点,导致我们进入HTML5。主页上的工作列表曾经用表格标记,但没有办法将整个表格行与一个锚点联系起来。“

该团队已经实现了许多新元素,并形成了输入类型和属性,以及密切相关的Geolocation API。

也许最有趣的是,Bodien解释了他们如何使用历史API来“跟踪主页上搜索和过滤控件的更改,以便人们可以书签和共享特定的过滤器,以及能够使用他们的浏览器返回并转发控件以浏览其更改“。

随着HTML5等标准的发展,Bodien期待看到“更广泛地使用音频和视频代替Flash,以及更多类似app的行为,包括本地存储,更丰富的形式,拖放等等。这对于开发人员可以使用标准化解决方案来应对常见挑战,而无需使用JavaScript功能插件。“

Metropolband.com

这是一个可爱的小网站开发的能力实验室在瓦伦西亚为西班牙独立摇滚乐队大都会。使用画布,拖放API和视频的组合,该网站变得真正互动,并允许您选择要在视频点唱机上播放的曲目。

使用优雅降级,开发人员Miguel Santolaya解释说,“使用IE8或以下用户将看到YouTube再现列表而不是HTML5视频,并建议他们使用现代浏览器来体验完整体验”。

Aptitude的团队对HTML5设计的未来感到兴奋。 Santolaya说:“对我们来说,HTML5是未来。在这项技术出现之前,我们70-80%的网站都是用Flash完成的。在几年内,我们网站的100%可能都是用HTML5完成的。

“我们对这些新功能开启的所有可能性感到非常兴奋。而这只是一个开始!一个新时代即将到来。音频,视频,所有帆布的东西......真是太棒了。”

每日野兽

策划,以避免信息过载,有时有争议,每日野兽致力于突发新闻和尖锐的评论。该网站正在不断发展,一些闪亮的新HTML5标记也在不断涌入。深入研究来源表明,新的切片元素已被广泛使用,还有data- *属性和WAI-ARIA角色,以提高可访问性。

该网站还使用了RDFa,这是一项W3C建议,用于在HTML中嵌入丰富的元数据,与HTML5的Microformats和Microdata竞争。遗憾的是该网站使用Flash播放器而不是HTML5视频或音频播放多媒体内容,但它完全采用HTML5设计这一事实令人鼓舞。

Font Dragr

Font Dragr提供了一种在浏览器中测试自定义字体的革命性方法。无需编码或上传 - 只需拖放即可。

该网站已经更新,以获取概念证明,并创建一个功能齐全,有用的网络应用程序。 Font Dragr充满了HTML5和朋友,包括新元素;拖放API;历史API; localStorage的;可满足的属性等等。

创建者Ryan Seddon解释说,在初始加载后,如果你导航到另一个页面,localStorage用于“执行Ajax请求,它将获取视图HTML,在DOM中替换它,然后在localStorage中缓存该视图HTML。所以它只是第一次需要做网络请求。“

与一些人不同,Seddon发现拖放API“非常强大”,尽管“有些怪癖和跨浏览器的差异”。

计划整合Application Cache和Cross Document Messaging,它是Font Dragr的HTML5形路径。鉴于Seddon,HTML5“是未来”,这并不奇怪。 “它配置得很好,简洁地定义了功能和行为,最终将在大多数浏览器中运行,因为最新的渲染引擎支持它或将来会做。”

想要看到更多高品质的HTML5设计?然后查看2011年最佳HTML5网站

话题



翻译字数超限