Yesterday I joined the Brooklyn Bird Club for our annual trip to Western New Jersey, specifically Hyper Humus, a relatively recently discovered hot spot. It started out as a nice winter morning when we arrived at the site at 7:30 A.M., progressed to Spring around 10:00 A.M., and reached early summer by 10:15.
Seems you can now go bird watching via the Internet. I haven't been able to test it out yet (20 user limit apparently) but this is certainly cool. Personally, I can't imagine it replacing actually being out in the field by any small amount. On the other hand, I've always found it quite sad to meet senior birders who are no longer able to hold binoculars steady or get to the park. I can imagine this might be of some interest to them. At least one elderly birder did a big year on TV, after he could no longer get out so much. This certainly tops that.
Yesterday I joined the Brooklyn Bird Club for our annual trip to Western New Jersey, specifically Hyper Humus, a relatively recently discovered hot spot. It started out as a nice winter morning when we arrived at the site at 7:30 A.M., progressed to Spring around 10:00 A.M., and reached early summer by 10:15.
Seems you can now go bird watching via the Internet. I haven't been able to test it out yet (20 user limit apparently) but this is certainly cool. Personally, I can't imagine it replacing actually being out in the field by any small amount. On the other hand, I've always found it quite sad to meet senior birders who are no longer able to hold binoculars steady or get to the park. I can imagine this might be of some interest to them. At least one elderly birder did a big year on TV, after he could no longer get out so much. This certainly tops that.
The .xf-value selector used here styles the inputfield value but not its label. This is actually inconsistentwith the current CSS3 draft. The example really should use the::value pseudo-class instead like so:
在 HTML 5 中,可以按照更有意义的方式编写这个边栏,见清单 4。清单 4. 用 HTML 5 编写的 developerWorks 边栏
.xf-value
The .xf-value selector used here styles the inputfield value but not its label. This is actually inconsistentwith the current CSS3 draft. The example really should use the::value pseudo-class instead like so:
浏览器可以决定把这个边栏放在哪里(可能需要用一点儿 CSS 代码)。figurefigure 元素代表一个块级图像,还可以包含说明。例如,在许多 developerWorks 文章中,可以看到清单 5 这样的标记;其结果见图 1。清单 5. 用 HTML 4 编写的 developerWorks 图 Figure 2. Install Mozilla XForms dialog 图 1. Install Mozilla XForms dialogA Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned在 HTML 5 中,可以按照更有语义性的方式编写这个图,见清单 6。清单 6. 用 HTML 5 编写的 developerWorks 图 Figure 2. Install Mozilla XForms dialog 最重要的是,浏览器(尤其是屏幕阅读器)可以明确地将图和说明联系在一起。figure 元素不只可以显示图片。还可以使用它给 audio、video、iframe、object 和 embed 元素加说明。dialogdialog 元素表示几个人之间的对话。HTML 5 dt 元素可以表示讲话者,HTML 5 dd 元素可以表示讲话内容。所以,在老式浏览器中也可以以合理的方式显示对话。清单 7 显示在 Galileo 的 “Dialogue Concerning the Two Chief World Systems” 上的一段著名对话。清单 7. 用 HTML 5 编写的 Galilean 对话
Simplicius
According to the straight line AF,and not according to the curve, such being already excludedfor such a use.
Sagredo
But I should take neither of them,seeing that the straight line AF runs obliquely. I shoulddraw a line perpendicular to CD, for this would seem to meto be the shortest, as well as being unique among theinfinite number of longer and unequal ones which may bedrawn from the point A to every other point of the oppositeline CD.
Salviati
Your choice and the reason youadduce for it seem to me most excellent. So now we have itthat the first dimension is determined by a straight line;the second (namely, breadth) by another straight line, andnot only straight, but at right angles to that whichdetermines the length. Thus we have defined the twodimensions of a surface; that is, length and breadth.
But suppose you had to determine a height—forexample, how high this platform is from the pavement downbelow there. Seeing that from any point in the platform wemay draw infinite lines, curved or straight, and all ofdifferent lengths, to the infinite points of the pavementbelow, which of all these lines would you make use of?
对于这个元素的准确语法还有争议。一些人希望在 dialog 元素中嵌入非对话文本(比如剧本中的舞台说明),还有人不喜欢扩展 dt 和 dd 元素的作用。尽管在具体语法方面有争议,但是大多数人都认为以这样的语义性方式表达对话是好事情。回页首语义性内联元素HTML 4 用 5 个不同的内联元素表示略有差异的计算机代码:var、code、kbd、tt 和 samp。但是,它无法表示时间、数字等基本数值。HTML 5 提供了几个新的内联元素来满足非技术作者的需求。mm 元素表示文本被 “加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索 “Egret”,那么缓存的 Google 页面可能像下面这样:The Great Egret (also known as theAmerican Egret) is a large white wading bird found worldwide.The Great Egret flies with slow wing beats. Thescientific name of the Great Egret is
Casmerodiusalbus.对于这个元素的名称当前还有争议。在规范发布之前,它可能从 m 改为 mark。timetime 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007。例如:
I am writing this example at5:35 P.M. on April 23rd.
time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。它不要求对元素内容应用任何特定的格式。但是,每个 time 元素都应该有一个 datetime 属性,其中包含更适合机器识别的时间值,比如:
I am writing this example at5:35 P.M. on April 23rd.
适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。metermeter 元素表示指定范围内的数字值。例如,可以用它表示薪水、投票给 Le Pen 的法国选民的百分比或考试分数。在这里,我使用 meter 标出 Software Development 2007 上一位 Google 程序员提供的数据:
An entry level programmer in Silicon Valley can expect to start around $90,000 per year.
meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要求对元素内容应用任何特定的格式。但是,每个 meter 元素可以有最多 6 个属性,它们按照更适合机器识别的形式表示这个数量: * value * min * low * high * max * optimum 这些属性都应该包含一个十进制数字。例如,期末考试的分数可以写成下面这样:
value 属性表示操作的当前状态。max 属性表示操作的总量。这个元素指出要下载的数据总量是 4,603,807 字节,已经下载了 1,534,602 字节。忽略 max 属性,就可以显示无限的进度。在操作进行时,应该使用 JavaScript 语言动态地更新进度条。在静态情况下,这个元素没什么意义。回页首内嵌的媒体视频已经在 Web 上广泛流行了,但是其格式几乎都是专有的。YouTube 使用 Flash,Microsoft 使用 Windows Media®,Apple 使用 QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此,WhatWG 提议引入一个新的 video 元素,用来嵌入任意视频格式。例如,可以用以下代码嵌入我的 QuickTime 电影 “a Sora in Prospect Park”: 对于以哪种格式和解码器作为首选,仍然有争议。可能会强力推荐或要求使用 Ogg Theora。还可以可选地支持 QuickTime 等专有格式和 MPEG-4 等受专利限制的格式。实际使用的格式很可能由市场决定,就像是 GIF、JPEG 和 PNG 格式那样(这些格式通过市场竞争压倒了 BMP、X-Bitmap 和 JPEG 2000 等竞争者,成为 img 元素的首选格式)。还提议引入 audio 元素。例如,可以使用以下代码给 Web 页面加上背景音乐: autoplay 属性指示浏览器在装载页面后立即开始播放,而不等待明确的用户请求。音频循环播放 20,000 次,然后停止(或者在用户关闭窗口或转到另一个页面时停止)。当然,浏览器可以(而且应该)允许用户关闭内嵌的媒体,不应该只按页面作者的要求去做。浏览器必须支持 WAV 格式,还可以支持 MP3 等其他格式。因为老式浏览器不支持这些元素,而且它们对于盲人和聋人用户来说没有意义,所以 audio 和 video 元素可以包含额外的标记,用来描述音频和视频的内容。这对搜索引擎也有帮助。在理想情况下,这些标记是音频和视频内容的完整文字版本。例如,清单 8 显示 John F. Kennedy 的就职演说。清单 8. 用 HTML 5 编写的 John F. Kennedy 的就职演说
Vice President Johnson, Mr. Speaker, Mr. Chief Justice, President Eisenhower, Vice President Nixon, President Truman, Reverend Clergy, fellow citizens:
We observe today not a victory of party, but a celebration of freedom -- symbolizing an end, as well as a beginning -- signifying renewal, as well as change. For I have sworn before you and Almighty God the same solemn oath our forebears prescribed nearly a century and three-quarters ago.
The world is very different now. For man holds in his mortal hands the power to abolish all forms of human poverty and all forms of human life. And yet the same revolutionary beliefs for which our forebears fought are still at issue around the globe -- the belief that the rights of man come not from the generosity of the state, but from the hand of God.
...
回页首交互HTML 5 也被称为 Web Applications 1.0。为了实现这个目标,增加了几个为 Web 页面提供交互体验的新元素: * details * datagrid * menu * command 这些元素都可以根据用户的操作和选择改变显示的内容,而不需要从服务器装载新页面。detailsdetails 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的摘要。details 元素的用途之一是提供脚注和尾注。例如:The bill of a Craveri's Murrelet is about 10% thinner than the bill of a Xantus's Murrelet. [Sibley, 2000]
Sibley, David Allen, The Sibley Guide to Birds, (New York: Chanticleer Press, 2000) p. 247
没有指定具体的显示方式。浏览器可以选用脚注、尾注和工具提示等方式。每个 details 元素可以有一个 open 属性。如果设置了这个属性,那么详细信息在最初就显示出来。如果没有设置这个属性,那么会隐藏它们,直到用户要求显示它们。无论是哪种情况,用户都可以通过单击一个图标或其他控件来显示或隐藏详细信息。datagriddatagrid 元素提供一个网格控件。可以用它显示树、列表和表格,用户和脚本可以更新这些界面元素。与之相反,传统的表格主要用来显示静态数据。datagrid 从它的内容(一个 table、select 或其他 HTML 元素)获得初始数据。例如,清单 9 中的 datagrid 包含一张成绩表。在这个示例中,datagrid 的数据来自一个 table。更简单的一维 datagrid 可以从 select 元素获得数据。如果使用其他 HTML 元素,那么每个子元素成为网格中的一行。清单 9. 成绩表 datagrid
Jones
Allison
A-
B+
A
Smith
Johnny
A
C+
A
Willis
Sydney
C-
D
F
Wilson
Frank
B-
B+
A
这个元素与常规表格的区别在于,用户可以选择行、列和单元格;把行、列和单元格折叠起来;编辑单元格;删除行、列和单元格;对网格排序;以及在客户机浏览器中直接进行其他数据操作。可以用 JavaScript 代码监视更新。Document Object Model(DOM)中增加了 HTMLDataGridElement 接口以支持这个元素(清单 10)。清单 10. HTMLDataGridElement interface HTMLDataGridElement : HTMLElement { attribute DataGridDataProvider data; readonly attribute DataGridSelection selection; attribute boolean multiple; attribute boolean disabled; void updateEverything(); void updateRowsChanged(in RowSpecification row, in unsigned long count); void updateRowsInserted(in RowSpecification row, in unsigned long count); void updateRowsRemoved(in RowSpecification row, in unsigned long count); void updateRowChanged(in RowSpecification row); void updateColumnChanged(in unsigned long column); void updateCellChanged(in RowSpecification row, in unsigned long column);};还可以使用 DOM 在网格中动态地装载数据。也就是说,datagrid 可以不包含那些提供初始数据的子元素。可以用一个 DataGridDataProvider 对象设置它(清单 11)。这样就可以从数据库、XmlHttpRequest 或者 JavaScript 代码能够访问的任何资源装载数据。清单 11. DataGridDataProvider interface DataGridDataProvider { void initialize(in HTMLDataGridElement datagrid); unsigned long getRowCount(in RowSpecification row); unsigned long getChildAtPosition(in RowSpecification parentRow, in unsigned long position); unsigned long getColumnCount(); DOMString getCaptionText(in unsigned long column); void getCaptionClasses(in unsigned long column, in DOMTokenList classes); DOMString getRowImage(in RowSpecification row); HTMLMenuElement getRowMenu(in RowSpecification row); void getRowClasses(in RowSpecification row, in DOMTokenList classes); DOMString getCellData(in RowSpecification row, in unsigned long column); void getCellClasses(in RowSpecification row, in unsigned long column, in DOMTokenList classes); void toggleColumnSortState(in unsigned long column); void setCellCheckedState(in RowSpecification row, in unsigned long column, in long state); void cycleCell(in RowSpecification row, in unsigned long column); void editCell(in RowSpecification row, in unsigned long column, in DOMString data);};menu 和 commandmenu 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它,但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中,menu 包含 command 元素,每个 command 元素引发一个操作。例如,清单 12 是一个弹出警告框的菜单。清单 12. HTML 5 菜单 还可以用 checked="checked" 属性将命令转换为复选框。通过指定 radiogroup 属性,可以将复选框转换为单选按钮,这个属性的值是互相排斥的按钮的组名。除了简单的命令列表之外,还可以使用 menu 元素创建工具栏或弹出式上下文菜单,这需要将 type 属性设置为 toolbar 或 popup。例如,清单 13 显示一个与 WordPress 等 blog 编辑器相似的工具栏。它使用 icon 属性链接到按钮的图片。清单 13. HTML 5 工具栏 label 属性提供菜单的标题。例如,清单 14 显示一个 Edit 菜单。清单 14. HTML 5 Edit 菜单 菜单可以嵌套在其他菜单中,形成层次化的菜单结构。回页首结束语HTML 5 是未来的 Web 的一部分。它的新元素会产生更干净更简单的代码,让页面更容易理解。Div 和 span 仍然有用处,但是不会像以前那样频繁地使用它们了。许多页面不再需要它们了。尽管目前并非所有浏览器都支持这些元素,但这是 HTML 引入大多数新元素之后的普遍情况,比如 img、table、object 等等。随着时间的推移,支持会逐渐完善。浏览器会忽略不认识的 HTML 元素,这意味着老式浏览器的用户仍然能够阅读 HTML 5 页面,他们的浏览方式与以前一样。现代浏览器的用户可以获得更好的用户体验,但是没有人会由于 HTML 5 新元素而妨碍浏览。用 8 年时间等待新特性的出现实在是够漫长的,尤其是在快速变化的 Web 世界中。在 Web 时代的早期,Netscape、Microsoft 和其他公司几乎每周都会引入新元素,HTML 5 终于也为我们提供了一些令人兴奋的东西。同时,它以一种谨慎得多的方式定义这些元素,让我们可以放心地使用它们。前景是光明的。