首页风格
门户
博客

HTML5和未来的网络

作者:Tim Wright
翻译:Terry li - GBin1.com
英文: HTML5 and The Future of the Web

有些人欢迎,有些人放弃因为太遥远,不管你处于讨论的那方,你在博客聊天中可能听到的最火的就是HTML5。它无处不在,它正朝我们走来,你肯定在它成为旧新闻的时候希望了解所有细节。

类似jQuery插件,格式化技术和设计趋势一直都在互联网社区中发展变化的很快。我们都知道今天学到的技术有可能在明天就被放弃,当然这个情况是自然的工业社会结果。

对于稳定性来说,我们可以保持代码不变很长时间。但是当情况改变,需要修改我们的代码的时候,这常常是个大问题。 而且伴随着的是痛苦。当然,很幸运,谣言已经开始了。我没有机会去担心这种情况了。

本文我将介绍些HTML5小技巧和信息,这些信息可以帮助你更容易的处理HTML的语法问题。

欢迎来到HTML5

最基本的是什么?

The DOCTYPE

当我几个月前第一次研究HTML5时,最大的发现时doctype。最简单的东西,可能你觉得会在任何地放,结果发现完全被掩埋在W3.org里。如下:

<! DOCTYPE html>

我很好奇为设么他们选HTML而不是HTML5,看起来只是逻辑上告诉浏览器目前的内容是HTML5格式书写的,但同时我发现<! DOCTYPE html5>出发了IE6的Quirk模式,如果对于向后兼容问题来说,<! DOCTYPE html>是个不错选择。

整体来说,我的确喜欢新的DOCTYPE;简单,有意义,并且更容易被记忆。这样我们不用从一个站点拷贝到另外一个站点。

你应该知道的新元素

第一眼扫过去,HTML5的新元素自然的印入眼帘。W3C的新元素的设计的确听从了社区的建议。我们有基本的结构化元素例如: <header> <footer>, 及其<canvas>和<audio>, 这个来看这是个强大API允许我们创建更多界面友好的程序而不使用Flash来保存数据及其现实动画。

新的结构化元素

<header>
header元素包括了section或者页面的介绍信息。这能包括正常文档中的信息甚至是整个目录
<nav>
nav元素主要用来包括其它页面的链接或者本页面链接。不是所有的链接都需要包括在<nav>元素里。
</section>
section元素代表一般性的文档或者程序部分。它比较像以前我们用的<div>元素用来分隔页面内容
<article>
article元素用来展示页面的一部分,比如一个博客发布,或者论坛的一个条目,或者是发布的评论或者任何独立的内容条目。
<aside>
aside代表和主要内容有关的文档区域,一般使用在侧栏用来包含相关的发布或者标签等。也可以用做引用
<footer>
footer元素主要用来限定不仅仅本页面,也可以是每个section区域,这意味这你可以在一个页面里不止一次使用

当你看到这些新元素,感觉只是要取代我们平常使用的DIV IDs;的确,就是这么设计的。但是下面的图例可以看到header和<footer>可以在一个页面多次使用。更像classes或者正常的html。

使用这个元素的好处主要在于他们设计的比较完美并且提供了一个语义上的结构给你的文档。然而这些元素必须经过思考后再使用,因为你又可以过度使用。

Further Reading on structural HTML5

    * Steve Smith on Structural Tags in HTML5
    * Lachlan Hunt's Preview of HTML5
    * Elliot Harold on New Elements in HTML5
    * Bruce Lawson's HTML5 Form Demo

去掉了XHTML的transition

即使是HTML4.01, XHTML 1.0, 和HTML5都很类似,但是他们还是有很小的语法差别。很容易就能导致错误的代码。一定要记住这点,HTML5有些内建的宽松方式来处理transition

例如,当我们在html5中标记一个form,下面是正确的input语法:

<input type="text" id="name">

同样XHTML风格的编写者,如下的代码也可以接受:

<input type="text" id="name"/>

同样的原则适用于<Meta>和其他的自关闭的元素,以前的元素例如<B><i>也同样适用来帮助HTML4.0.1的开发人员习惯新语法。

有什么好处?

做为新技术来说使用HTML5究竟有什么好处呢,为什么你需要用它呢?如果你过去的老代码非常有效的话,没有理由的话谁也不会升级的。说实话没有什么理由,相信我,我已经调查过了。

扩展API

最明显的好处在于大量的内建API,以及未来web开发的新机会比如,程序缓存和离线功能。Google Gears给我们了离线数据存储的特性,Flash给我们介绍了程序缓存的强大(Pandora使用这个技术来保存log信息)。使用HTML,这些功能都可以正确的使用在语言中,并且能够使用javascript来扩展。

HTML5依赖轻度的脚本编写来扩展它的web功能;这在初期非常可能,除了jQuery外,前端技术已经被认同。当然我们可以使用class和ID来联合使用它们。它们已经在渐进增强原则下被分离为不同的层次。但是当web发展我们需要统一的来使用它们。

离线数据存储(offline Data storage)

HTML5最酷的地方在于他定义了离线存储功能。类似Thunerbird和Outlook的程序在离线的情况下将能够使用旧的数据来运行。使用HTML5,你将可以在浏览器中构建类似的功能。这种方式是用来解决互联网应用和桌面应用的鸿沟。同时也为未来互联网应用开启了更多大门。

W3C已经从各种互联网技术中选取了最好的技术来构建HTML5,可以相信HTML5未来将成为最强大的标记性语言。

其它的HTML API

  • 拖拽
拖拽功能定义了基于事件的API系统,然而,它没有定义究竟什么事拖拽。这个API要求javascript来完成一般的拖拽功能
  • 视屏和音频
<video width="400" height="360" src="vid.mp4">
  • 地理信息
地理位置是HTML5中非常酷的一个API。使用这个对象可以使用程序通过用户的客户端装置来探测地理位置信息(比如,手机)

 

更多关于HTML5的API

我们在哪里使用HTML5

即使HTML5的支持非常少,互联网也不缺乏我们可以尝试的环境。目前,Safari是我们最好的测试环境,因为他支持了大多数的API和元素。当然,这随时也有可能变化所以大家也要关注Opera,Chrome,Firefox。

正常来说你可能认为Safari是个webkit的浏览器,缺省所有的webit内核的浏览器都应该支持相同的html元素,但是很可惜,事实并非如此。很多HTML5特性在webkit浏览器中支持,但有些比如video还没有被支持。

移动设备

为了更加有效的使用html5,我们需要能够控制它使用的环境。因为支持并不是全球性的,所以过多的使用并不是一个理性的选择。当然我们可以再特定的平台下使用。因为webkit领导了HTML5,所以我们可以安全的在webkit支持的设备上使用。

最火的移动设备目前包括:Palm,iPhone和新的Google Android手机,他们的浏览器都是基于webkit内核。

Safari是领导了移动设备的HTML5前端,iPhone是唯一可以正确解析<audio>标签的手机。因为所有这些设备都非常新,并且都是用相同的引擎,所以快速软件更新的可能性都比较大。

目前,你能自信的在iphone上使用很多HTML5元素进行开发并且很可能Pre和Andriod也会跟进。

更多关于哪里可以使用html5的文章

我们该如何前行

即使最近所有关于HTML5的介绍漫天飞,对于如何从HTML4.01&XHTML1.0平滑的过渡到HTML5还是一个很慢的过程。这需要开发人员加快开发及其测试速度,同时需要等待浏览器能赶上。

我们不能完全的转换到HTML5,现在讨论负面的因素也没有意义。我们都知道任何有责任心的开发人员都不会放弃目前大量使用的浏览器。所以与无用的咆哮,不如我们看看有没有正确的方式去前行:

语义学的DIV命名

语义上命名你的DIV名称并且让它们和HTML5类似将会帮助你习惯命名方式,新的功能及其嵌套在header和footer中的元素。

在正式使用HTML5之前,我推荐大家先部分修改div定义。 这没有任何负面影响,你可以使用新的DOCTYPE而不引起过多的不良后果

使用Javascript来替代

首先声明,不要在产品环境中使用这些。如果客户端出错,整个网站可能由于无法应用CSS到元素而瘫痪。简单说不是一个好方法,不过是一个选择之一。

使用jQuery很酷,但是结果这里有个内建的javascript方法来创建这些元素。

document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
document.createElement('figure');
document.createElement('time');

创建浏览器指定的应用

都和控制环境相关,如果我们能够控制环境,那么我们能添加更多的控制功能。Google目前尝试使用Google wave做这些

总结

基于以前版本的(X)HTML及其web社区,我们将从以前的知识和错误中学习到更多。HTML5将会成为强大的标记语言。

我推荐大家浏览完整的标准,并且熟悉相关技术,那么你将能在未来开发更多强大,界面更加复杂的web应用。

文章来源: HTML5和未来的网络

 



喜欢我们的文章请您与朋友分享:

?ü?à

评论

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐