标签存档: HTML5

演示文档模板 Made by Html5

作者: 日期: 2010年05月1日 2 条评论

Marcin Wichary ， Ernest Delgado和Direct Guo 开发了一个HTML5 Slider。HTML5 Slider的目的，是为了展示即将到来的桌面和移动浏览器的最新功能。

这个Slider十分精美，于是我就把它精化成了一个Slide模板。

感觉用网页做Slide有一些优势：

  • 便于传播，包括搜索引擎友好，浏览器友好，跨平台等，易于放置于网站
  • 简单，html是一门大众语言，至少比Latex beamer简单多了
  • 精彩，借用JavaScript的丰富特性，可以达到的非常丰富的效果
  • 置于浏览器，便于链接其他资源
  • 互动，Slide可以做到和使用者互动和反馈

W3c已经有了专门写Slide的工具Slidey,不过我还是觉的这个模板更实用一点。

Demo

下载

HTML5中的微数据

作者: 日期: 2010年04月25日 没有评论

缘起

HTML4,Html5,XHtml1,XHtml1.1,XHtml2....都是W3C的产品，乱乱的一团糟。有一篇漫画《标记语言之乱 ”xhtml2″vs“xhtml1”vs“html5”》，澄清了之间的关系。基本上是将XHtml2已死，天下是Html5和XHtml1的。

微数据

微格式是让网页通过语意相关让内容人机可读的一种方式。Wordpress里内置的XFN就可以算作一种微格式。那么什么是微数据呢？

HTML5提供了一种简易的方式将语义标签融入其中，这项功能就是微数据(Microdata)。根据W3c三月份的会议，微数据的存在就是为了填补微格式在应对类似Rdfa这种比较复杂的系统时的不足。

示例(Html5未完成，不保证和最终版本一致)：

<section itemscope itemtype="http://example.org/animals#cat">
 <h1 itemprop="name http://example.com/fn">Hedral</h1>
 <p itemprop="desc">Hedral is a male american domestic
 shorthair, with a fluffy <span
 itemprop="http://example.com/color">black</span> fur with <span
 itemprop="http://example.com/color">white</span> paws and belly.</p>
 <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>

从上面这一段HTML可以得到如下信息：有一只猫，他：

Property Value
name Hedral
http://example.com/fn Hedral
desc Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
http://example.com/color black
http://example.com/color white
img .../hedral.jpeg

你可以使用微格式的Dom模型来访问它：

var cats = document.getItems("http://example.com/feline");
  1. var colors = cat.properties['http://example.com/color'].values;
  2. var result;
  3. if (colors.length == 0) {
  4.   result = 'Color unknown.';
  5. } else if (colors.length == 1) {
  6.   result = 'Color: ' + colors[0];
  7. } else {
  8.   result = 'Colors:';
  9.   for (var i = 0; i &lt; colors.length; i += 1)
  10.     result += ' ' + colors[i];
  11. }

是不是很神奇？

你可以将使用itemtype="http://microformats.org/profile/hcard"来描述名片信息，也可以用http://microformats.org /profile/hcalenda来描述日历。这样就不用另立标准，使用微格式的标准就可以了。

再谈谈RDFa。RDFa是一个W3C 推荐标准。它扩充了XHTML的几个属性， 网页制作者可以利用这些属性在网页中添加机械可读的元 数据。与RDF数据模型的对应关系使得 RDFa可以将RDF三体嵌入在XHTML文件中，它也使得符合标准的使用端可以从RDFa文件中萃取出这些RDF三体来。推荐一篇学习RDFa的文章， 《RDFa 入门》

事实上RDFa是为Xhtml2开发的，后来迁移到Xhtml1.0上,要想使用RDFa，则文档必须有XML的性质，这就麻烦了。将来非常流行的Html5不是XML，在非XML的 HTML里无法使用XML 命名空间。而Html5已经有比较完善的语义方法了，那么RDFa何去何从？

参见

http://edward.oconnor.cx/2009/05/microdata-microformats-and-rdf

http://www.w3.org/TR/rdfa-in-html/

http://www.w3.org/TR/2010/WD-rdfa-in-html-20100304/

http://www.w3.org/TR/2010/WD-rdfa-core-20100422/

http://www.w3.org/TR/2010/WD-html-markup-20100304/

http://www.w3.org/TR/2010/WD-xhtml-rdfa-20100422/

http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html

Property Value
name Hedral
http://example.com/fn Hedral
desc Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.
http://example.com/color black
http://example.com/color white
img .../hedral.jpeg