<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Lefter &#187; semantic</title>
	<atom:link href="http://lefter.net/blog/tag/semantic/feed/" rel="self" type="application/rss+xml" />
	<link>http://lefter.net/blog</link>
	<description>blog of lefter</description>
	<lastBuildDate>Fri, 20 Jan 2012 00:14:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>让IE支持HTML5的两种方案</title>
		<link>http://lefter.net/blog/ie_html5/</link>
		<comments>http://lefter.net/blog/ie_html5/#comments</comments>
		<pubDate>Mon, 28 Sep 2009 06:41:03 +0000</pubDate>
		<dc:creator>lefter</dc:creator>
				<category><![CDATA[前端开发&架构]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[semantic]]></category>

		<guid isPermaLink="false">http://lefter.net/blog/?p=1069</guid>
		<description><![CDATA[HTML5 最主要的特性就是加入了更加具有语义的标签比如：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档，和页面元素，比如 header, section, footer, figure等。更详细的介绍可以看... ]]></description>
			<content:encoded><![CDATA[<img src="/blog/wp-content/uploads/2009/09/structure-html5.gif" alt="structure-html5" title="html5"/>
<p>
<a href="http://www.w3.org/TR/html5/">HTML5</a> 最主要的特性就是加入了更加具有语义的标签比如：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档，和页面元素，比如 header, section, footer, figure等。更详细的介绍可以看下面几篇文章的介绍:
<a href="http://www.alistapart.com/articles/previewofhtml5/">A Preview of HTML 5</a>
<a href="http://articles.sitepoint.com/article/html-5-snapshot-2009/">Yes, You Can Use HTML 5 Today!</a>
<a href="http://www.w3.org/TR/html5/">W3C HTML5</a>
</p>
<p>但IE不支持HTML5这些有用的标签，<a href="http://www.w3.org/TR/html5/">HTML5</a>,有两种方法让IE支持HTML5.</p>
<h3>1.用 Google Chrome Frame插件</h3>
<p>这中方法没什么好说的，参见<a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a>的说明。</p>
<h3>2.用JS将HTML5增加的标签创建出来</h3>
<pre><code>&lt;script>
var html5Tags=['header' ,'footer','article','nav' ,'section','aside']
for(var i=0;i&lt;html5Tags.length;i++){
    document.createElement(html5Tags[i]);
}
&lt;/script>
</code></pre>
<p><strong><a href="/demo/ie_html5.htm">查看演示</a></strong></p>
<ins datetime="2009-09-28T06:31:32+00:00">今天才发现这个方法早就有人这样实施了:</ins><a href="http://www.fofronline.com/2009-06/moving-markup-towards-html5/">Moving markup towards HTML5</a>]]></content:encoded>
			<wfw:commentRss>http://lefter.net/blog/ie_html5/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Marking up content with RDFa</title>
		<link>http://lefter.net/blog/about_rdfa/</link>
		<comments>http://lefter.net/blog/about_rdfa/#comments</comments>
		<pubDate>Sat, 19 Sep 2009 03:05:53 +0000</pubDate>
		<dc:creator>lujo</dc:creator>
				<category><![CDATA[前端开发&架构]]></category>
		<category><![CDATA[semantic]]></category>

		<guid isPermaLink="false">http://lefter.net/blog/?p=1024</guid>
		<description><![CDATA[上图左边是代理对页面的理解，右边是人的理解，代理可读的和人类可读的数据之间的关联是相当少的，结果就是现在的浏览器在解析和处理web数据上的能力很差，因为浏览器更多的功能是负... ]]></description>
			<content:encoded><![CDATA[<a href="http://www.w3.org/TR/rdfa-syntax/"><img src="/blog/wp-content/uploads/2009/09/presentation-vs-semantics.png" alt="presentation-vs-semantics" title="presentation-vs-semantics" /></a>
<p>上图左边是代理对页面的理解，右边是人的理解，代理可读的和人类可读的数据之间的关联是相当少的，结果就是现在的浏览器在解析和处理web数据上的能力很差，因为浏览器更多的功能是负责展示这些信息。因此为了耦合人类和机器的理解可以通过为一些可视化的数据提供一系列的XHML属性而使得这些数据可以被机器所理解，让页面更有语意<a href="http://www.w3.org/TR/rdfa-syntax/">RDFa</a>就是一种解决办法,（还有<a href="/blog/microformats_web/">微格式-Microformats</a>）</p>
<p><a href="http://www.w3.org/TR/rdfa-syntax/">RDFa</a> “Resource Description Framework in attributes” 即资源描述框架，其应用格式可以参见<a href="http://www.w3.org/TR/rdfa-syntax/">W3C</a>。例如为了表明h2代表页面的标题而h3代表作者可以用RDFa这样描述：</p>
<pre><code>&lt;div xmlns:dc="http://purl.org/dc/elements/1.1/">
   &lt;h2 property="dc:title">Marking up content with RDFa&lt;/h2>
   &lt;h3 property="dc:creator">Lefter&lt;/h3>
&lt;/div>
</code></pre>
<p>为什么要用dc:creator和dc:title而不简单地用creator和title呢？这是因为XHTML并没有为这两个概念保留关键词；而xmlns:dc="http://purl.org/dc/elements/1.1/ 个人理解有点类似XML的命名空间,RDFa还提供了@property 来自定义属性因此也可以简写为：</p>
<pre><code>&lt;h2 property="title">RDFa: Now everyone can have an API&lt;/h2>
&lt;h3 property="creator">Lefter&lt;/h3>
</code></pre>
<strong>可以看出其优势为</strong>
<ul>
<li>增强的搜索功能</li>
<li>用户自定义，可扩展性</li>
<li>数据再利用性</li>
<li>自我控制</li>
<li>模块化架构</li>
<li>更具可访问性</li>
</ul>
<strong>推荐阅读</strong>
<ul>
<li><a href="http://www.w3.org/TR/rdfa-syntax/">W3C RDFa in XHTML</a></li>
<li><a href="http://www.w3.org/TR/xhtml-rdfa-primer/">W3C xhtml rdfa primer</a></li>
<li><a href="http://www.w3.org/MarkUp/2009/rdfa-for-html-authors">RDFa for HTML Authors</a></li>
<li><a href="http://www.alistapart.com/articles/introduction-to-rdfa/">alistapart introduction tordfa</a></li>
<li><a href="http://www.xml.com/pub/a/2007/02/14/introducing-rdfa.html">XML introduction tordfa</a></li>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&#038;answer=146898">Google About RDFa</a></li>
<li><a href="http://en.wikipedia.org/wiki/RDFa/">wikipedia</a></li>
</ul>]]></content:encoded>
			<wfw:commentRss>http://lefter.net/blog/about_rdfa/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

