<?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>Xu Design &#187; Web</title>
	<atom:link href="http://xuui.net/tag/web/feed" rel="self" type="application/rss+xml" />
	<link>http://xuui.net</link>
	<description>专注和分享界面设计的点点滴滴.</description>
	<lastBuildDate>Mon, 21 May 2012 02:32:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>iOS 设备的网页兼容</title>
		<link>http://xuui.net/ui-design/web-compatible-mobile-devices-ios.html</link>
		<comments>http://xuui.net/ui-design/web-compatible-mobile-devices-ios.html#comments</comments>
		<pubDate>Mon, 25 Jul 2011 08:54:09 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[UI Design]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[WebKit]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=2098</guid>
		<description><![CDATA[这个结合了自己这两个多月的工作所以遇到的问题，以及HTML5 的一些新特性来做一些应用上的介绍。 给 iOS 设备定制页面 其实只要网页已经使用了 HTML5 的标准来构建的网页，只需为 iOS 准备CSS 样式表文件就可以解决这个问题了。就像这篇文章里面的效果一样。没有使用任何相关的插件来实现。 iOS 设备都有一个特性那就是支持重力感应，屏幕的内容会随着设备在手里面的方向状态进行屏幕分辨率的宽度自适应。SO，浏览器在 CSS 的解析上就有了横竖两种分辨率的判断。不过 iPad 和 iPhone 的支持上又是有点区别的。Android 的也支持这个，不过 &#8230; <a href="http://xuui.net/ui-design/web-compatible-mobile-devices-ios.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p><img src="/wp-content/uploads/html.jpg" alt="" /></p>
<p>这个结合了自己这两个多月的工作所以遇到的问题，以及HTML5 的一些新特性来做一些应用上的介绍。</p>
<h3>给 iOS 设备定制页面</h3>
<p>其实只要网页已经使用了 HTML5 的标准来构建的网页，只需为 iOS 准备CSS 样式表文件就可以解决这个问题了。就像<a href="http://xuui.net/themes/ios-style.html">这篇文章</a>里面的效果一样。没有使用任何相关的插件来实现。</p>
<p>iOS 设备都有一个特性那就是支持重力感应，屏幕的内容会随着设备在手里面的方向状态进行屏幕分辨率的宽度自适应。SO，浏览器在 CSS 的解析上就有了横竖两种分辨率的判断。不过 iPad 和 iPhone 的支持上又是有点区别的。Android 的也支持这个，不过 Android 详细的情况，由于本人没有测试的机器就无法做说明了。</p>
<p><span id="more-2098"></span>CSS 在用在移动设备上网页的 link 链接的代码上面要做一些修改，需要修改一下 media 属性。</p>
<p>由于 iPhone 的横竖屏的判断是通过最大宽度来判断的代码，那么 CSS 链接的媒体检测代码要做如下修改了，代码如下：</p>
<blockquote><p>&lt;link rel=”stylesheet” type=”text/css” media=”screen and (max-width:320px)” href=”iphone.css” /&gt;</p>
<p>&lt;link rel=”stylesheet” type=”text/css” media=”screen and (min-width:321px)” href=”iphone_landscape.css” /&gt;</p></blockquote>
<p>max-width:320px 限制了屏幕的最大宽度为 320，也就是 iPhone 竖屏状态下的屏幕宽度。</p>
<p>min-width:321px 限制了屏幕的最小宽度为 321， 由于竖屏的时候屏幕宽度为 320 了。不可能变成 321，那么一旦屏幕检测的时候发现宽度大于 320 了，那就会自动判断为横屏状态。</p>
<p>不过，在实际的应用中发现 iPhone 4 在处理网页的时候竖屏分别率宽度是 320&#215;480，而不是 640&#215;960 的分别率。也就是说网页上iPhone 和 iPhone 1～3 代的分别率是一致的。所以在设计 iPhone 4 专用网页的使用只需按照竖屏 320&#215;480 和横屏 480&#215;320 的分别率设计就行了。</p>
<p>iPad 下做判断就方便很多了，iPad 没有使用屏幕分辨率来做检测，而是直接使用了媒体检测中的 orientation 属性，代码如下：</p>
<blockquote><p>&lt;link rel=”stylesheet” type=”text/css” media=”screen and (orientation:portrait)” href=”ipad.css” /&gt;</p>
<p>&lt;link rel=”stylesheet” type=”text/css” media=”screen and (orientation:landscape)” href=”ipad_landscape.css” /&gt;</p></blockquote>
<p>orientation 是用于屏幕方向检测的属性。直接使用就行了。orientation:portrait 表示竖屏，orientation:landscape 横屏。这样就没有什么好说的了。</p>
<p>不过貌似这两种方法 Android 都支持，无论固件是 2.3 的还是 3.0 的。</p>
<p>另外 media 属性里面的 screen 是指屏幕设备，也可以用 all 代替，all 指所以设备。不过不推荐这样用。</p>
<p>横竖屏的状态判断搞定了，那么接下来就是 CSS 样式的编写了。 由于 iOS 和 Android 使用的都是 WebKit 的内核，那么就可以放肆的使用 CSS 3.0 的属性来渲染页面了。</p>
<p>既然都是 WebKit 内核了，应该就没有什么差异存在了。但是还是要注意一个问题，那就是 position 属性了，代码如下：</p>
<blockquote><p>position:fixed;</p></blockquote>
<p>这个代码没什么问题啊。是的，看起来问题的。这是个会让定义了这个属性的元素以一种绝对的位置固定在屏幕上，不会被页面滚动影响的。但是这个在 iOS 下面失效了。</p>
<p>Why？ 我也不知道为什么。反正就是失效了。背景图片的 fixed 定位在 iOS 下也会失效，貌似只要是和 fixed 有关的都会失效。估计这个和 Safari Mobile 版有关系了。</p>
<p>要是横竖屏都各用两个 CSS 文件那么在切换的时候会出现一个闪屏的问题，其实这是浏览器在切换 css 是产生的渲染替换问题。解决这个问题的方法就是在编写横屏的 CSS 文件的时候，先引用竖屏的 CSS 文件然后在竖屏的 CSS 基础上做 CSS 样式覆盖的调制。比如宽度的调整。类似这样：</p>
<p>竖屏样式 (portrait.css) 内容：</p>
<blockquote><p>div{width:768px;}</p></blockquote>
<p>横屏样式 (landscape.css) 内容:</p>
<blockquote><p>@import url(“portrait.css”);</p>
<p>div{width:1024px;}</p></blockquote>
<p>这样横竖切换的时候感觉就流畅很多了。</p>
<h3>网页 iOS 桌面图标</h3>
<p>Safari Mobile 版有个挺有意思的功能就是可以把当前网页添加到 iOS 的桌面作为一个程序图标显示。界面如下：</p>
<p><img class="alignnone size-full wp-image-2180" title="IMG_0358" src="http://xuui.net/wp-content/uploads/2011/07/IMG_0358.jpg" alt="" width="320" height="260" /></p>
<p>也就是这个 “添加至主屏幕” 的功能，这个应该是叫 Web 剪辑吧。</p>
<p>添加至主屏幕过后就会在主屏幕上生成一个用网页微缩图作为图标的 APP 图标。点击后会打开添加的网页。其实可以利用这个功能做个网站的快捷方式了。也可以把网站模仿成一个 Web App 来使用了。</p>
<p>要模仿就要添加几个东西，一个是添加桌面图标、启动画面和隐藏 Safari 的工具条和地址栏。</p>
<p>添加桌面图标的方法就用 iOS 特有的代码了。代码如下：</p>
<blockquote><p>&lt;link rel=”apple-touch-icon” href=”apple-touch-icon.png” /&gt;</p></blockquote>
<p>图标的尺寸推荐 114px X 114px 的矩形 PNG 图片，圆角和高光效果是 iOS 自动添加上去的。</p>
<p>如果你不想要自动添加的圆角和高光效果，那么可以用下面的代码：</p>
<blockquote><p>&lt;link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon.png” /&gt;</p></blockquote>
<p>这样点击过后还是会出现一个和屏幕尺寸一样的网页的截图，那么就需要添加一个启动画面来替换了，代码是：</p>
<blockquote><p>&lt;link rel=”apple-touch-startup-image” href=”screen.png” /&gt;</p></blockquote>
<p>这部分代码是从 iOS 的开发网站上找到的。不过貌似只支持竖屏的启动图片。 启动画面的图片规格要和 屏幕的尺寸一样，只是高度要减去 状态栏的高度也就是 显示电池信号那栏的高度。比如 iPhone 的启动画面的图标尺寸为 320&#215;460， iPhone 1～3代和 iPad 的 状态栏高度为 20px。，而 iPhone 4 为 40px，那么启动画面 iPhone 4 的尺寸应该为 640&#215;920。iPad 为 768&#215;1004。这个也是 iOS App 启动画面的尺寸规格。</p>
<p>加上这两个图片和你就发现这个和一个原生的 APP 程序基本一样了。只是为什么打开的时候还是有地址栏和底部的工具栏呢？那就还需要添加这行代码，把快捷方式打开的页面全屏化。代码如下：</p>
<blockquote><p>&lt;meta name=”apple-mobile-web-app-capable” content=”yes” /&gt;</p></blockquote>
<p>这个就是把网页作为 Web App 的 meta 属性了，同样还可以添加一个状态条的样式 meta 属性，让自己定义状态条样式。这个的代码如下：</p>
<blockquote><p>&lt;meta name=”apple-mobile-web-app-status-bar-style” content=”black” /&gt;</p></blockquote>
<p>apple-mobile-web-app-status-bar-style 的 content 值为 3个，分别为 default (默认)、black (黑色)、black-translucent (黑色透明)。和原生 iOS App 上面的定义一致。</p>
<p>有时候页面里面的一串数字会被浏览器自动判定为电话号码，点击后就可以直接呼叫出去。为了避免这个还需要加上下面的屏蔽代码：</p>
<blockquote><p>&lt;meta name=”format-detection” content=”telephone=no”&gt;</p></blockquote>
<p>这下这个网页通过添加至主屏幕后就像一个真正的 App 出现在 iOS 的主屏幕上面了。但是细心的还是会发现，为什么字体会被缩小很多呢。这个是 Safair Moblie 版的自动缩放适应特性了。没有了这个你就不能使用那个很酷的缩放手势来放大页面了。既然是要做一个移动设备上的网页那么就要干掉这个特性了。那就要禁用自动缩放了，还是要使用 meta 便签来搞定，代码在这里：</p>
<blockquote><p>&lt;meta name=”viewport” content=”minimum-scale=1.0,maximum-scale=1,width=device-width,user-scalable=no” /&gt;</p></blockquote>
<p>viewport 里目前有四个可以设置的属性，它们各自的作用如下：</p>
<ul>
<li>width：设置 viewport 的宽度，即 iOS 模拟 PC 浏览器的宽度，之后 iOS 会这个宽度展现的页面同比缩放到屏幕上。设置  width=device-width 后就不会再进行缩放了，因为宽度是指定使用设备的屏幕宽度。</li>
<li>minimum-scale 和 maximum-scale：是控制允许用户缩放操作的最大和最小缩放比例。</li>
<li>user-scalable：标识是否允许用户对页面进行缩放操作，取值有两个 yes 和 no。设置为 no 就不允许进行页面缩放操作。</li>
</ul>
<p>这样就像一个 Web App 的网页了。不过要注意的是这里提道的 link 和 meta 标签都需要放在 &lt;head&gt;&lt;/head&gt; 里面。</p>
<p>如果你不喜欢这种上面提到的全屏模式，而是只想隐藏掉地址栏那么用这个JS代码就行了：</p>
<blockquote><p>&lt;script type=”application/x-javascript”&gt;</p>
<p>addEventListener(&#8216;load&#8217;,function(){setTimeout(scrollTo,0,0,1);},false);</p>
<p>&lt;/script&gt;</p></blockquote>
<p>注意 type 是 application/x-javascript 而不是 text/javascript。不过这段 JS 代码只在 iPhone 里面有效。</p>
<p>使用 HTML5 构建的页面还可以在浏览器启用 HTML5 的本地缓存列表来缓存一些资源文件在浏览器的本地缓存里面，这样可以达到加速浏览的目的。</p>
<p>Web App 用上了这个本地缓存列表，那么就可以在离线的状态下使用了。</p>
<p>PS:本站已经启用这个缓存列表来加速网站访问了。使用过程中发现本地缓存这东西还是有些问题，下次再说了。</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/ui-design/web-compatible-mobile-devices-ios.html/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>20个你必须知道的SEO概念</title>
		<link>http://xuui.net/librarys/20-seo-concepts-you-need-to-know.html</link>
		<comments>http://xuui.net/librarys/20-seo-concepts-you-need-to-know.html#comments</comments>
		<pubDate>Sun, 09 Jan 2011 13:43:31 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Librarys]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=1992</guid>
		<description><![CDATA[如果你拥有一个网站或独立博客，或者你的工作多少和互联网有关，那你一定耳濡目染多多少少对SEO（搜索引擎优化）有一定了解。本文将列举其中20个SEO领域最常用的名词和概念，如果你打算熟悉和了解他们请继续阅读。当然，如果你已经无所不晓，那你可以权当补习功课，或可以直接忽略本文。 1. 搜索引擎营销 （SEM） 搜索引擎营销（SEM）英文全称为Search Engine Marketing，意指通过搜索引擎进行服务和产品的营销。搜索引擎营销又主要分为两种：搜索引擎优化（SEO）和付费点击（PPC，Pay-Per- Click）。搜索引擎优化（SEO）指通过优化网站和页面并让它们在搜索结果的页面中展示，而付费点击（PPC）指通过购买搜索引擎的点击将用户带到自 己的网站。（通常）这些点击来自搜索结果页面中的“赞助商链接”（译注：显然不适用于百度）。 2. 反向链接（Backlink） 反向链接（Backlink）又称为“回指链接”“入链”和“简易链接”，指从其他网站指向你的网站的一个超级链接。反向链接之所以对SEO异常重要，是因为它们直接影响一个网页的页面等级（PageRank），以及这个页面在搜索结果中的排名。 3. 页面等级（PageRank） 页面等级（ PageRank） 是Goolgle用来评估一个页面相对于其他页面的重要性的一个算法规则。这个算法规则最基本的意思就是说，如果A页面有一个链接指向B页面，那就可以看 作是A页面对B页面的一种信任或推荐。所以，如果一个页面的反向链接越多，再根据这些链接的价值加权越高，那搜索引擎就会判断这样的页面更为重要，页面等 级（PageRank）也就越高。 4. &#8230; <a href="http://xuui.net/librarys/20-seo-concepts-you-need-to-know.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>如果你拥有一个网站或独立博客，或者你的工作多少和互联网有关，那你一定耳濡目染多多少少对<a href="http://www.williamlong.info/?tags=Seo" target="_blank">SEO</a>（搜索引擎优化）有一定了解。本文将列举其中20个SEO领域最常用的名词和概念，如果你打算熟悉和了解他们请继续阅读。当然，如果你已经无所不晓，那你可以权当补习功课，或可以直接忽略本文。</p>
<p><strong>1. 搜索引擎营销 （SEM）</strong></p>
<p>搜索引擎营销（SEM）英文全称为Search  Engine  Marketing，意指通过搜索引擎进行服务和产品的营销。搜索引擎营销又主要分为两种：搜索引擎优化（SEO）和付费点击（PPC，Pay-Per- Click）。搜索引擎优化（SEO）指通过优化网站和页面并让它们在搜索结果的页面中展示，而付费点击（PPC）指通过购买搜索引擎的点击将用户带到自 己的网站。（通常）这些点击来自搜索结果页面中的“赞助商链接”（译注：显然不适用于百度）。</p>
<p><span id="more-1992"></span><strong>2. 反向链接（Backlink）</strong></p>
<p>反向链接（Backlink）又称为“回指链接”“入链”和“简易链接”，指从其他网站指向你的网站的一个超级链接。反向链接之所以对SEO异常重要，是因为它们直接影响一个网页的页面等级（PageRank），以及这个页面在搜索结果中的排名。</p>
<p><strong>3. 页面等级（PageRank）</strong></p>
<p>页面等级（ PageRank）  是Goolgle用来评估一个页面相对于其他页面的重要性的一个算法规则。这个算法规则最基本的意思就是说，如果A页面有一个链接指向B页面，那就可以看 作是A页面对B页面的一种信任或推荐。所以，如果一个页面的反向链接越多，再根据这些链接的价值加权越高，那搜索引擎就会判断这样的页面更为重要，页面等 级（PageRank）也就越高。</p>
<p><strong>4. 链接诱饵（饵链）（Linkbait）</strong></p>
<p>链接诱饵（Linkbait），顾名思义这是一个网站或一个博客上为了尽可能多地吸引反向链接（目的是提高网站的PR值）而存在的一段内容。通常，这些做 为诱饵的内容为文字内容，但也可以是一段视频、一张图片、一个测验或其他的热门的内容。最经典的诱饵内容的例子是“十大（Top  10）”，因为这样的内容在一些社交网站很容易流行起来成为热门话题（译注：这个话题貌似已经臭街了）。</p>
<p><strong>5. 互链车间或互链作坊（Link farm）</strong></p>
<p>互链工厂或互链作坊（Link farm）是指很多网站（通常数量很大）为了提高组成一个类似车间或作坊式的团体，通过彼此的互相链接来提高团体每一个的网站的页面评级的手段。早期，这种方法很有用，但现在已经成为一种不耻的作弊手段（并可能会收到惩罚）。</p>
<p><strong>6. 锚文本（Anchor text）</strong></p>
<p>锚文本（Anchor text）在反向链接中是指一个页面中可点击的文本，而其中的关键词对搜索引擎优化（SEO）有很大的帮助，因为Google会将这些关键词和你的内容关联起来。</p>
<p><strong>7. 链接属性-NoFollow</strong></p>
<p>Nofollow是网站管理员使用的一个链接属性，其目的是告诉搜索引擎他们并不是为该链接所指向的网站投票。这种链接也可能是网站用户自己创造的内容 （比如博客评论中的链接），或者是一个付费交易的链接（比如广告或赞助商的链接）。当Google识别到这些反向链接的NoFollow属性后，基本就不 会在页面评级和搜索结果排名的算法中将这些链接的贡献计算在内了。</p>
<p><strong>8. 链接修饰（Link Sculpting）</strong></p>
<p>链接修饰（Link  Sculpting）是指网站管理员对网站上其他网站的反向链接进行属性设置。比如，管理员给链接添加Nofollow属性，这可以让管理员决定利用自己 的网站为具体某个网站提高页面评级，或者不帮助具体某个网站提高网页评级。不过，现在这种做法的作用已经微乎其微，因为Google已经决定要用自己的算 法来决定怎么处理链接的Nofollow属性。</p>
<p><strong>9. 页面标题（Title Tag）</strong></p>
<p>页面标题（Title Tag），顾名思义是指一个页面的标题中，这也是Google搜索算法中最重要的一个参考。理论上，你的页面标题要独一无二并尽可能多地包括页面内容中的关键词。你在浏览网页时可以从浏览器最上方看到一个网页的标题。</p>
<p><strong>10. 元标签（Meta Tags）</strong></p>
<p>元标签（Meta Tags）和页面标题一般，主要用于为搜索引擎提供更多关于你页面内容的信息。元标签位于HTML代码的头部，还有就是对长眼睛的访客是不可见的。</p>
<p><strong>11. 搜索算法（Search Algorithm）</strong></p>
<p>Google的搜索算法是为了给每一次搜索请求找到最为相关的网站和页面而设定。这个算法考量的因素超过200种（谷歌自称），其中包括页面等级、标题、元标签、网站内容，以及域名的年龄等。</p>
<p><strong>12. 搜索结果页面（SERP）</strong></p>
<p>搜索结果页面（SERP）的英文全称为Search Engine Results Page.基本上，这就是你平时在Google键入关键词回车后的页面了。你的网站从这个页面得到的流量取决于你的网站在搜索结果中的排名等级。</p>
<p><strong>13. 沙盒（Sandbox）</strong></p>
<p>Google除了所有网站的索引之外，还有一个单独的索引沙盒，那里面是新近发现和收录的网站。当你的网站存在这个沙盒之中时，它就不会在一般的搜索结果中出现，而只有当Google确认了你的网站是合法的，这才会将其从沙盒中移出进入所有网站的索引。</p>
<p><strong>14. 关键词密度（Keyword Density）</strong></p>
<p>如何判断一个特定页面的关键词密度？你只要将一个关键词使用的次数除以页面的总词数就可以了。关键词密度过去是搜索引擎优化中非常重要的一个因素，因为早期的搜索算法对此十分看重，但现在已经时过境迁了。</p>
<p><strong>15.关键词堆积（Keyword Stuffing）</strong></p>
<p>因为早期搜索算法对关键词密度非常看重，站长们便通过使用人工堆积关键词的手法来作弊和蒙骗搜索引擎。这种手法就叫做关键词堆积，当然现在已经没用了，而且你还可能会因此受到惩罚。</p>
<p><strong>16. 障眼法（Cloaking）</strong></p>
<p>障眼法（Cloaking）是指利用代码在同一个页面上让机器人和真人看到不一样的内容。其目的是为了让页面通过关键词而提升页面评级，而真正的目的是推销和出售各种不相关的产品或服务。当然，这也是一种作弊的手段，有很大可能会受到搜索引擎惩罚，甚至剔除。</p>
<p><strong>17. 网络爬虫或网络蜘蛛（Web Crawler）</strong></p>
<p>网络爬虫或网络蜘蛛（Web Crawler）也简称为爬虫或蜘蛛，代表搜索引擎在网路上进行浏览，目的是发现新的链接和页面，这是进行索引的第一个环节。</p>
<p><strong>18. 复制内容（Duplicate Content）</strong></p>
<p>复制内容（Duplicate Content）也叫“重复内容”，通常是指一个页面在引用了站内或站外的大段实质内容，或者是存在完全相同和极其相似的情况，而这也是一个网站应该尽量避免发生的情况，否则很容易让你的网站受到惩罚。</p>
<p><strong>19. 标准链接（Canonical URL）</strong></p>
<p>标准链接（Canonical URL）是指一个网页的链接要符合规范和标准。</p>
<p><strong>20. 机器人协议（Robots.txt）</strong></p>
<p>机器人协议（Robots.txt）不过是一个TXT文本文件，存在于你域名根目录之下，作用是将网站的目录结构信息告诉爬虫和蜘蛛，并限制其对特定文件夹和内容的访问，或者是完全将它们关在门外。</p>
<p>英文链接：<a href="http://www.blogingbloging.com/20-seo-terms" target="_blank">20 SEO Terms You Should Know</a></p>
<p>中文译者：<a href="http://www.amolee.com/20-seo-terms-you-must-know.html" target="_blank">阿莫「一日一博，天天向上」</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/librarys/20-seo-concepts-you-need-to-know.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>我眼中的苹果</title>
		<link>http://xuui.net/librarys/apple-in-my-eyes.html</link>
		<comments>http://xuui.net/librarys/apple-in-my-eyes.html#comments</comments>
		<pubDate>Sat, 04 Dec 2010 15:31:08 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Librarys]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=1960</guid>
		<description><![CDATA[苹果已经成为了最受追捧的公司，苹果大热的成因都包含了哪些要素？我作为苹果的一个不算忠实、不算狂热用户，作为一个热衷于研究品牌和营销的人，试着从用户和运营两方面综合来看看这只苹果的魔力。 超越期望的苹果 许多人包括Jobs自己都说，苹果是超越和引导用户期望和需求的。但这不等于苹果真的不做用户调研和需求分析，苹果的超前和引导也是有限度，而不是 不分时机的只为超越而超越的。我们都应该记得销量欠佳的Macintosh Portable，还有在Jobs离开苹果后推出的过于超前的NEXT。这两个失败的案例其实都说明苹果的产品或Jobs的理念不是战无不胜的，也曾犯过 盲目超前的错误。所以不要轻信那些不做用户研究的话，如果不做用户研究，又怎么可能知道自己的产品是超越用户需求的呢？ 后来成功的苹果产品其实都是已经提前被市场验证过成功的品类，苹果所谓的超越用户需求也都似乎有据可循的，比如MP3之于iPod、智能手机之于iPhone、电子书和上网本之于iPad，苹果要做的其实就是超越同品类产品，站在前人的肩膀上超越前人。 有限度延伸的苹果 超越用户需求的产品注定在初期只是属于GEEK的。印象中，早期的苹果品牌也确实是高高在上的，超越传统PC或笔记本很多的价格令众多用户望而却 步。即便90年代初PowerBook受到了欢迎，但那时的苹果电脑的销量相对于基于WINDOWS的那些PC巨头们来说，都是微不足道的。一个只属于 GEEK的的苹果如何实现了用户的下沉和扩展呢？这其中1998年推出的iMac、1999年推出的iBook和2001年推出的iPod是功不可没的。 iPod之于苹果的作用恰如香水之于Chanel那些奢侈品牌的作用，利用一款低价的产品捕获了那些因价格昂贵而对苹果电脑望而却步的消费者。潜在的顾客 们由原来对Apple远远的欣赏艳羡转变成为Apple产品的拥有者，这使得Apple迅速获得了海量的用户群。 iBook、iMac的定位和作用也和iPod类似，因其价格和配置上苹果知名的Powerbook的差异，形成了苹果电脑的低端系列，也起到了扩大用户基数的巨大作用。 iBook、iMac、iPod的成功，使得苹果拥有了真正意义上获得广泛认可的独立产品品牌。基于此，Apple开始了其产品品牌延伸的策略。我 们会发现后续的每一款苹果热销产品都拥有“i”这个给予我们很多品牌联想的字母，也继承了iPod所积累的品牌资产。一方面，苹果在iPod品类内部形成 了产品线延伸，譬如iPod Touch、iPod nano、shuffle等；一方面，苹果在其多个产品品类也借助i形成了新品牌的快速认可，譬如iPad、iPhone。当然，iMac是一个复合型的 产品品牌，它是苹果在电脑领域所积累的Macintosh品牌和i系列品牌的混搭。Mac和i之间形成了相辅相成的作用取得了巨大的成功，以至于 &#8230; <a href="http://xuui.net/librarys/apple-in-my-eyes.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>苹果已经成为了最受追捧的公司，苹果大热的成因都包含了哪些要素？我作为苹果的一个不算忠实、不算狂热用户，作为一个热衷于研究品牌和营销的人，试着从用户和运营两方面综合来看看这只苹果的魔力。</p>
<p><strong>超越期望的苹果</strong></p>
<p>许多人包括Jobs自己都说，苹果是超越和引导用户期望和需求的。但这不等于苹果真的不做用户调研和需求分析，苹果的超前和引导也是有限度，而不是 不分时机的只为超越而超越的。我们都应该记得销量欠佳的Macintosh  Portable，还有在Jobs离开苹果后推出的过于超前的NEXT。这两个失败的案例其实都说明苹果的产品或Jobs的理念不是战无不胜的，也曾犯过 盲目超前的错误。所以不要轻信那些不做用户研究的话，如果不做用户研究，又怎么可能知道自己的产品是超越用户需求的呢？</p>
<p><span id="more-1960"></span>后来成功的苹果产品其实都是已经提前被市场验证过成功的品类，苹果所谓的超越用户需求也都似乎有据可循的，比如MP3之于iPod、智能手机之于iPhone、电子书和上网本之于iPad，苹果要做的其实就是超越同品类产品，站在前人的肩膀上超越前人。</p>
<p><strong>有限度延伸的苹果</strong></p>
<p>超越用户需求的产品注定在初期只是属于GEEK的。印象中，早期的苹果品牌也确实是高高在上的，超越传统PC或笔记本很多的价格令众多用户望而却 步。即便90年代初PowerBook受到了欢迎，但那时的苹果电脑的销量相对于基于WINDOWS的那些PC巨头们来说，都是微不足道的。一个只属于 GEEK的的苹果如何实现了用户的下沉和扩展呢？这其中1998年推出的iMac、1999年推出的iBook和2001年推出的iPod是功不可没的。 iPod之于苹果的作用恰如香水之于Chanel那些奢侈品牌的作用，利用一款低价的产品捕获了那些因价格昂贵而对苹果电脑望而却步的消费者。潜在的顾客 们由原来对Apple远远的欣赏艳羡转变成为Apple产品的拥有者，这使得Apple迅速获得了海量的用户群。</p>
<p>iBook、iMac的定位和作用也和iPod类似，因其价格和配置上苹果知名的Powerbook的差异，形成了苹果电脑的低端系列，也起到了扩大用户基数的巨大作用。</p>
<p>iBook、iMac、iPod的成功，使得苹果拥有了真正意义上获得广泛认可的独立产品品牌。基于此，Apple开始了其产品品牌延伸的策略。我 们会发现后续的每一款苹果热销产品都拥有“i”这个给予我们很多品牌联想的字母，也继承了iPod所积累的品牌资产。一方面，苹果在iPod品类内部形成 了产品线延伸，譬如iPod Touch、iPod  nano、shuffle等；一方面，苹果在其多个产品品类也借助i形成了新品牌的快速认可，譬如iPad、iPhone。当然，iMac是一个复合型的 产品品牌，它是苹果在电脑领域所积累的Macintosh品牌和i系列品牌的混搭。Mac和i之间形成了相辅相成的作用取得了巨大的成功，以至于 Power品牌逐渐从用户眼中消失掉。iMac应该是i系列品牌的始祖，也曾是个人电脑的销量冠军，它借助iMac的复合品牌获得了成功，也为后来的 iPod的大肆流行制造了铺垫。iMac流行后的2000年，后继产品乏力的苹果又出现了亏损，真正挽救了苹果的我认为还是iPod。</p>
<p>iPod和Mac系列都形成了品类内部的产品延伸，覆盖了中高低端的用户，相信Apple下一步也会继续将这种延伸方式引用到iPad和 iPhone系列以进一步拓展用户群。当然，这其中相信还是会有一些差异的。以iPhone为例，从价格上看它在美国并不能算是面向高端用户的产品，它未 来的延伸恐怕也不仅仅是简单覆盖高低端的方式。或者说，iPhone和iPad未来可能的延伸如果是以覆盖中高低端为目的的话，那它的目标用户则不是欧美 用户，而可能是主要面向中国这类发展中国家的举措。因为iPhone和iPad在中国形成的品牌认知还是带着那么一点点奢侈感觉的。这可能是因为 Apple在不同地区塑造差异化品牌形象的原因，很多国际品牌通常会如此运作自己的品牌。</p>
<p>苹果的产品延伸还是非常谨慎的，基本上不会搞出过多的产品线来，同一小产品类别中几乎采用的都是单品系列。以iPhone为例，它和Nokia和 Moto等手机厂商的产品运作方式截然不同。一方面，这种精品策略维系了苹果的品牌星星，一方面这也给了iTunes  store大发展提供了便利——开发者们无需考虑适配问题，而作为单品用户数量最高的iPhone又给了他们获利的空间。</p>
<p><strong>基因传承的苹果</strong></p>
<p>苹果是很善于利用饥饿营销引爆流行的企业，iPhone是应用这个营销策略的典型案例。苹果运用饥饿营销的并不是孤立的行为，它善于调动GEEK的 力量，让GEEK们先行拥有，制造出疯狂的体验。摩尔的高科技产品演化理论分为接纳期、鸿沟期、保龄球道期、旋风期、主道期、衰退期。苹果利用GEEK的 传播和饥饿营销结合的方式，表面上看是人为制造出了销售空挡，但实际上却大大缩短了前两个时期，使得苹果的产品迅速跨入保龄球道进而引爆流行。同时，苹果 的产品衔接也是非常紧密。通常消费者会发现自己还在疯狂购买或刚刚体验新一代产品的时候，就已经传出了难辨庐山真面目的下一代新品。还没到或将将到衰退期 的时候，新一代产品又已经开始进入到了GEEK们的手中。</p>
<p>如此周而复始，苹果始终在吊足了消费者的胃口，给消费者以惊喜。惊喜始终源自于苹果，但是细细品味，我总会觉得苹果的各类产品之间总有着一种联系， 可能是更多源自于其工业设计的理念所形成的遗传基因。这种继承让苹果给予我们的惊喜始终没有脱离主干道，让我们一望而知就是苹果的产品。</p>
<p>品牌和文化其实就是这个企业做的每一件事或每一个产品所积累而成的，苹果产品间的基因传承就形成了苹果的品牌。我没研究过苹果自身到底想塑造成一个什么样的品牌。品牌认知是客户化的，我也不太了解苹果呈现给每个人的形象是什么样的，只说说自己作为苹果用户的感知。</p>
<p>有品味、有魅力、有追求、有个性、够简洁、总在改变和颠覆——这基本是苹果给我呈现出的品牌形象。不知道其他苹果粉或非苹果粉们是否也有相似的感 知？这些品牌元素或许就构成了苹果品牌宗教一般的信仰。这种宗教信仰的力量是无比强大的，以至于一般的苹果产品质量问题都不足以撼动它的品牌和产品销售， 比如最近发生的iPhone4信号问题根本对其销售几乎毫无抑制作用。换做其他品牌，我很难想象一部移动电话的通话质量不好还会被消费者趋之若鹜的。</p>
<p>当然，苹果品牌并不是没有隐忧的。我觉得隐忧之一是来自于未来持续创新颠覆的能力，如果未来的产品不能持续的给用户制造惊喜，那可能比一般的产品质 量缺陷带给苹果品牌更大的创伤；隐忧之二则是Jobs本人的健康，不可否认苹果的品牌基因和Jobs个人的品牌基因是血脉相连的，如果Jobs有朝一日不 在任了，苹果有谁能继承这种基因呢？Jobs应该逐步淡化自己和苹果品牌的关联，但这符合Jobs的性格吗？</p>
<p>如今的苹果已经领导了电脑屏幕和移动屏幕的潮流，我相信未来的苹果将致力于追求领导电视屏幕的潮流。如今的Apple  TV就是电视屏幕的开路先锋。如果我们稍加留意，就会发现Apple  TV是目前苹果公司唯一一个直接和企业品牌复合的产品品牌，由此可见苹果对Apple TV的重视程度和未来期望。</p>
<p>(<a href="http://ucdchina.com/snap/8171">via</a>)</p>
<p>PS: 今天我的小白已经跟随我3年之久了 <img src='http://xuui.net/wp-content/themes/xuilost/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/librarys/apple-in-my-eyes.html/feed</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>不在抄袭中创意，就在创意中死去</title>
		<link>http://xuui.net/librarys/not-copy-the-ideas-to-die-in-the-creative.html</link>
		<comments>http://xuui.net/librarys/not-copy-the-ideas-to-die-in-the-creative.html#comments</comments>
		<pubDate>Thu, 25 Nov 2010 05:15:08 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Librarys]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=1940</guid>
		<description><![CDATA[不在抄袭中创意，就在创意中死去 看一下豆瓣校内开心网的分享，除了星座测试笑话这些消遣类，恐怕就是和创意相关的相册被阅览得最多了。以往我还逛逛设计类网站，现在只要看分享总能得到耳目一新的东西，常常可以在照片下面看到“好想要这个”“这个在哪里卖”的留言，可见国人对创意产品的渴求越来越旺盛。 花钱买什么 很多年前，中国是没有创意价值这样东西的。大家觉得这种想想出来的东西，相对于实用物品而言是不需要尊重和不能定价的。这就好像很多设计师都遇到过的烦 恼，他的朋友们常常会说：有空帮我设计个XX吧（图案，商标甚至装修）。当然提出这样的要求的朋友，多半是默认他不能收费。但是如果他不是设计师而是产品 生产商，大家的态度会截然转变，无论如何也要付一点儿，因为那是有成本的东西，不给钱就像自己强占便宜了一样。 创意价值被忽视，对版权的不尊重等等问题如今仍然存在，但是随着中国火箭般的发展速度和国际接轨，这几年有所改善。起码做设计从一种看起来像兼职的工作变成了拥有巨大从业人数和规范化的职业。前进的过程中，问题百出属于磕碰着前行。 物质水平提高了，谁还不搞个Prada, LV啊？所谓消费创意，花钱买的是概念，是个性，是我喜欢你不一定喜欢，是好看但不一定好用，爱谁谁。但是创意是个啥？什么才算有创意呢？这就好像界定一样东西是不是艺术品一样是有难度的，不是谁把小便池放倒都是艺术品。 抄的就是你 今年6月回中国美术学院看了今年第一次举行的全校毕业联展，据说这样的展览形式是为了拉近社会和学校的距离，让艺术品买家可以一次性看到学生们的作品。于是信息量之大展品之多加上天气炎热，看得人身心俱疲。 美院新开了很多系，有很多我实在不知道该不该被划入艺术的范畴，竟然连影视系都开得红红火火，把传媒大学和电影学院置之何处？恐怕过几年我们就能看到美院 有了文学系，人类学系乃至天文物理系之类。东西虽多，但好的真是要百里挑一，看来看去好多都觉得眼熟。Micheal Wolf 拍了香港的高密度住宅窗口，你把地点换成了上海，构图内容都一样，这算借鉴还是剽窃呢？ 不得不承认，中国对个性创意的培养起步较晚（起码我们这一代是没赶上，我们的下一代估计能好些）。孩子们也从小被禁锢了头脑，你怎么能要求一个背诵四项基本原则长大的孩子和一个常去艺术观看展览的孩子比创意呢？这是不公平的嘛。所以玩不过老外，只好抄之。 如果做生意是做一个信息不对称，那么目前很多中国艺术家们，做的也是个信息不对称吧。凡是过人没看过的都可以拿来主义，高度借鉴已经算好的了，直接照搬的都比比皆是。且不说好不好，说不定呢个山寨着山寨着，就出了自己的风格。 平凡年代 有人说“没有伟大的作品，只有平凡的年代”。缺乏亮点，是这几年艺术界的瓶颈，也是全人类资讯爆炸审美疲劳的后遗症。是不是因为一切太过平缓，我们就失去了创作的激情？ 其实本来一个行业里面，精英就只有那几个，最后留名千古能被记下来的也就那几个。而像创意这类，理应是和平时期，大家对生活的要求越来越高，出来的东西越 &#8230; <a href="http://xuui.net/librarys/not-copy-the-ideas-to-die-in-the-creative.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>不在抄袭中创意，就在创意中死去</p>
<p>看一下豆瓣校内开心网的分享，除了星座测试笑话这些消遣类，恐怕就是和创意相关的相册被阅览得最多了。以往我还逛逛设计类网站，现在只要看分享总能得到耳目一新的东西，常常可以在照片下面看到“好想要这个”“这个在哪里卖”的留言，可见国人对创意产品的渴求越来越旺盛。</p>
<p><span id="more-1940"></span><strong>花钱买什么</strong><br />
很多年前，中国是没有创意价值这样东西的。大家觉得这种想想出来的东西，相对于实用物品而言是不需要尊重和不能定价的。这就好像很多设计师都遇到过的烦 恼，他的朋友们常常会说：有空帮我设计个XX吧（图案，商标甚至装修）。当然提出这样的要求的朋友，多半是默认他不能收费。但是如果他不是设计师而是产品 生产商，大家的态度会截然转变，无论如何也要付一点儿，因为那是有成本的东西，不给钱就像自己强占便宜了一样。</p>
<p>创意价值被忽视，对版权的不尊重等等问题如今仍然存在，但是随着中国火箭般的发展速度和国际接轨，这几年有所改善。起码做设计从一种看起来像兼职的工作变成了拥有巨大从业人数和规范化的职业。前进的过程中，问题百出属于磕碰着前行。</p>
<p>物质水平提高了，谁还不搞个Prada, LV啊？所谓消费创意，花钱买的是概念，是个性，是我喜欢你不一定喜欢，是好看但不一定好用，爱谁谁。但是创意是个啥？什么才算有创意呢？这就好像界定一样东西是不是艺术品一样是有难度的，不是谁把小便池放倒都是艺术品。</p>
<p><strong>抄的就是你</strong><br />
今年6月回中国美术学院看了今年第一次举行的全校毕业联展，据说这样的展览形式是为了拉近社会和学校的距离，让艺术品买家可以一次性看到学生们的作品。于是信息量之大展品之多加上天气炎热，看得人身心俱疲。</p>
<p>美院新开了很多系，有很多我实在不知道该不该被划入艺术的范畴，竟然连影视系都开得红红火火，把传媒大学和电影学院置之何处？恐怕过几年我们就能看到美院 有了文学系，人类学系乃至天文物理系之类。东西虽多，但好的真是要百里挑一，看来看去好多都觉得眼熟。Micheal Wolf  拍了香港的高密度住宅窗口，你把地点换成了上海，构图内容都一样，这算借鉴还是剽窃呢？</p>
<p>不得不承认，中国对个性创意的培养起步较晚（起码我们这一代是没赶上，我们的下一代估计能好些）。孩子们也从小被禁锢了头脑，你怎么能要求一个背诵四项基本原则长大的孩子和一个常去艺术观看展览的孩子比创意呢？这是不公平的嘛。所以玩不过老外，只好抄之。</p>
<p>如果做生意是做一个信息不对称，那么目前很多中国艺术家们，做的也是个信息不对称吧。凡是过人没看过的都可以拿来主义，高度借鉴已经算好的了，直接照搬的都比比皆是。且不说好不好，说不定呢个山寨着山寨着，就出了自己的风格。</p>
<p><strong>平凡年代</strong><br />
有人说“没有伟大的作品，只有平凡的年代”。缺乏亮点，是这几年艺术界的瓶颈，也是全人类资讯爆炸审美疲劳的后遗症。是不是因为一切太过平缓，我们就失去了创作的激情？</p>
<p>其实本来一个行业里面，精英就只有那几个，最后留名千古能被记下来的也就那几个。而像创意这类，理应是和平时期，大家对生活的要求越来越高，出来的东西越 来越好才是。所以问题还是对潜力股的保护和鼓励。注意，不是培养。这几年频繁出现的培养创造力等等词汇，叫人发笑。创造力与生俱来的，如果是培养出来的， 那还叫创造力么？</p>
<p>保护和鼓励，就是说对有天赋的有潜力的人群进行扶植，为他们提供良好的环境和资源，因才适用。而不是文化课成绩不够才学画画考美院，也不是明明喜欢画漫画偏偏要他学数学之类。</p>
<p><strong>金钱万岁</strong><br />
和朋友去看了上海前段时间搞的中国当代艺术30年展，他不是艺术行业的，只是兴趣，看完之后说道：2004年以后的东西，真是没法看了。这句我极为赞同，那些充斥着浓重的急功近利心态的作品，卖弄着红色中国的标记，着实叫人生厌。</p>
<p>创意产业的蓬勃发展，我是在三四年前才有感受的，以前在香港常常看到创意市集和寄卖设计使产品的店铺，近几年中国的这个产业迅速崛起，像疯果盒子这样的经 营模式就是一个很好的照搬外国经营方式的例子。有关创意的网站也纷纷躁动起来，一时间欣欣向荣。但中国的创意产业崛起，和金钱物质至上的现时国民心态有很 大关系。在中国能赚钱的就可以做，恐怕2009年大家已经深有体会。</p>
<p>今年4月去了一趟北京，看到现在798的商业模样，很不喜欢。想着几年前那里还是只有一间破餐馆的半厂区半工作室，现在已然成为了长城之外的必到景点，在 旅游小册子上占据巨大篇幅，入住的也不再是新艺术家，而是商业画廊，酒吧咖啡厅商店。但是没办法，这是市场经济，原先是我们学外国把旧厂区改成艺术区，现 在是外国反过来学习我们的成功运行了，我想说我们的优势在于人口基数庞大且容易煽动爱跟风。从而带动了各种产业，尤其是房地产商乐开怀。</p>
<p>这次去上海，又听说上海搞了100个旧区改造点，其中做得最成功的就是田子坊，这样下去全国都是旅游城市了，真是促进旅游业发展。创意这样搞下去，可以搞 多久？在中国盛世中一哄而上，一个上海一百个，全国该有多少个？这么大的规模，谁来进驻，谁来消费？让人想起来当年兴盖大学城的样子，最后留下一座座空城 和居高不下的犯罪率。只怕创意产业未活先死。</p>
<p>一点好的期待是，不管如何，中国总能发展出具有中国特色的发展方案，于是我们的创意产业也一定是如此，不需要杞人忧天，跟随洪流漂泊即可。</p>
<p>(<a href="http://ucdchina.com/snap/8552">via:ucdchina</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/librarys/not-copy-the-ideas-to-die-in-the-creative.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>W3C标准与SEO的关系</title>
		<link>http://xuui.net/librarys/w3c-and-seo.html</link>
		<comments>http://xuui.net/librarys/w3c-and-seo.html#comments</comments>
		<pubDate>Thu, 15 Apr 2010 05:04:58 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Librarys]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[W3C]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=1701</guid>
		<description><![CDATA[最近有个客户的 web 2.0 网站要改版，其中有个条件有些可爱，就是网页都必须通过 W3C 标准。Charles 曾为其网站分析及做 SEO 培训的时候，确实提到过符合 W3C 标准的网页设计是有利于搜索引擎友好的，但并不是说 W3C 标准与 SEO 有直接关系的啊。有人甚至放言符合 W3C 标准的网页 = 50% 的 &#8230; <a href="http://xuui.net/librarys/w3c-and-seo.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>最近有个客户的 web 2.0 网站要改版，其中有个条件有些可爱，就是网页都必须通过 W3C 标准。Charles 曾为其网站分析及做 SEO 培训的时候，确实提到过符合 W3C 标准的网页设计是有利于搜索引擎友好的，但并不是说 W3C 标准与 SEO 有直接关系的啊。有人甚至放言<a href="http://www.google.com/search?hl=en&amp;newwindow=1&amp;client=firefox-a&amp;rls=com.google%3Azh-CN%3Aofficial&amp;hs=iSN&amp;q=%E7%AC%A6%E5%90%88W3C%E6%A0%87%E5%87%86%E7%9A%84%E7%BD%91%E9%A1%B5%3D50%25%E7%9A%84SEO%E5%B7%A5%E4%BD%9C&amp;btnG=Search">符合 W3C 标准的网页 = 50% 的 SEO 工作</a>，我觉得有些可笑。</p>
<p>W3C 标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的 行为等等，特别是制定了包括 XML 和 CSS 等的众多影响深远的标准规范。但是，W3C 制定的 Web  标准似乎并非强制而只是推荐标准。也就是说 W3C 组织只是引导网页设计者进行标准化设计。</p>
<p><span id="more-1701"></span>一般对 SEO（<a href="http://www.kseo.cn/">http://www.kseo.cn</a>）了解的人都会明白，搜索引擎是通过蜘蛛爬虫读取网页源码的内容进行分析的，所以 SEO 的任务之一是对网页内容进行优化，而不是对网页代码优化。另外，从我一些 SEO 案例来看，或者通过某些热门关键词搜索的结果看，排名好的而又通过 W3C 标准的网页少之又少。而前面所谓符合 W3C 标准的网页等同于 SEO 工作的一半，<a href="http://www.kseo.cn/">SEO 优化实践</a>认为其相当没有理论和实践基础了。</p>
<p>当然，我不否认符合 W3C 标准网页的优势，有利于解决<a href="http://www.kseo.cn/post/123.html">浏览器兼容性问题</a>， 而且其代码简洁及清晰度让人舒畅的，但与 SEO 的关系真的没有那么大。</p>
<p>回到开头，如果客户老是拿 W3C 标准来要求 SEO 也未免太牵强了。 CSS+DIV 网页设计，也能达到内容与表现分离的效果，有时候觉得 W3C 标准太苛刻，毕竟设计符合 W3C 标准的网页需要优秀的 CSS+DIV 能力，一般的人可能需要花很长的时间才能调试成功。</p>
<p>&#8212;&#8212;</p>
<p>原文地址：<a href="http://firecacada.blog.163.com/blog/static/7074376201031304654976/">http://firecacada.blog.163.com/blog/static/7074376201031304654976/</a></p>
<p>PS：这又是一篇好文章。初学者还有一个误区就是：“ DIV+CSS 就是 W3C 标准”。前者是技术实现的手段，后者是代码结构的规范条文。不要把这两个混为一谈。这可是两回事。</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/librarys/w3c-and-seo.html/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Ethermetic 这个网站可不是阴谋</title>
		<link>http://xuui.net/bloglife/ethermetic-this-site-is-not-a-conspiracy.html</link>
		<comments>http://xuui.net/bloglife/ethermetic-this-site-is-not-a-conspiracy.html#comments</comments>
		<pubDate>Tue, 06 Apr 2010 09:01:11 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Blog Life]]></category>
		<category><![CDATA[Designs]]></category>
		<category><![CDATA[Ethermetic]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=1628</guid>
		<description><![CDATA[科幻迷们应该还记得《2012》里Woody Harrelson扮演的那个有点疯癫的Charlie吧？在大多数人眼里也许他只不过是个充当comic relief的元素，可是对心中有爱的人来说这是个多么令人怀念的形象啊：隐居在野地里，留着嬉皮士般的发型和胡须，通过私人电台散布不和谐言论，在他从 A到Z归档的书架上你能轻松地找到罗斯威尔的资料。没错，这正是典型的、俗套的、但又让我们百看不厌的阴谋论爱好者！有趣的是这位老兄不仅是个互联网 geek，熟练掌握了网络2.0技术，还做得一手好flash!（按照咱们90年代的说法，哥们儿还是个“闪客”）。不过说道他最令人动容的地方，还是那 勇敢地接受命运的豁达价值观，真是个可歌可泣的混蛋！ 我不禁开始联想，电影中还出现过哪些阴谋论者？短暂的翻来覆去之后列出了以下几位，他们可能不是最具代表性的，但都有自己鲜明的特色，且类型各异。 往下看吧！ 孤独的枪手 ( 《X档案》/1993;  《孤独的枪手》/2001) 不用看形象，单单提他们的团队名号你就知道这三位是骨灰级的阴谋论狂热分子——“孤独的枪手”（Lone Gunman）乃是关于美国总统约翰-肯尼迪暗杀的经典理论。接着再瞅瞅他们仨：一个猥琐，一个邋遢，一个书呆子气，这不正是宅男的核心要素嘛！还能找到 比他们更典型的阴谋论者吗？这哼哈三将不仅独立发行阴谋论刊物，还喜欢秀黑客技术，如其中一位说的，”Goverment hack is a snack!” （入侵政府系统如小菜一碟） &#8230; <a href="http://xuui.net/bloglife/ethermetic-this-site-is-not-a-conspiracy.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p><img title="2012" src="http://ethermetic.com/wp-content/uploads/2009/11/2012.jpg" alt="2012" width="500" height="333" /></p>
<p>科幻迷们应该还记得《2012》里Woody  Harrelson扮演的那个有点疯癫的Charlie吧？在大多数人眼里也许他只不过是个充当comic  relief的元素，可是对心中有爱的人来说这是个多么令人怀念的形象啊：隐居在野地里，留着嬉皮士般的发型和胡须，通过私人电台散布不和谐言论，在他从 A到Z归档的书架上你能轻松地找到罗斯威尔的资料。没错，这正是典型的、俗套的、但又让我们百看不厌的阴谋论爱好者！有趣的是这位老兄不仅是个互联网 geek，熟练掌握了网络2.0技术，还做得一手好flash!（按照咱们90年代的说法，哥们儿还是个“闪客”）。不过说道他最令人动容的地方，还是那 勇敢地接受命运的豁达价值观，真是个可歌可泣的混蛋！   我不禁开始联想，电影中还出现过哪些阴谋论者？短暂的翻来覆去之后列出了以下几位，他们可能不是最具代表性的，但都有自己鲜明的特色，且类型各异。</p>
<p><span id="more-1628"></span>往下看吧！</p>
<p><img title="lonegunmen" src="http://ethermetic.com/wp-content/uploads/2009/11/lonegunmen.jpg" alt="lonegunmen" width="500" height="316" /></p>
<p><strong>孤独的枪手</strong> ( 《X档案》/1993;  《孤独的枪手》/2001)<br />
不用看形象，单单提他们的团队名号你就知道这三位是骨灰级的阴谋论狂热分子——“孤独的枪手”（Lone  Gunman）乃是关于美国总统约翰-肯尼迪暗杀的经典理论。接着再瞅瞅他们仨：一个猥琐，一个邋遢，一个书呆子气，这不正是宅男的核心要素嘛！还能找到 比他们更典型的阴谋论者吗？这哼哈三将不仅独立发行阴谋论刊物，还喜欢秀黑客技术，如其中一位说的，”Goverment hack is a  snack!” （入侵政府系统如小菜一碟） 哦别忘了，他们还和另一个痴迷阴谋论的家伙是死党——苦大仇深的摩特探员！</p>
<p><img title="conspiracytheory" src="http://ethermetic.com/wp-content/uploads/2009/11/conspiracytheory.jpg" alt="conspiracytheory" width="450" height="304" /></p>
<p><strong>Jerry Fletcher</strong> (《阴谋论》/1997)<br />
还有片名比它更露骨的电影吗？梅尔-吉普森同学在片中扮演的Jerry不仅仅是个有记忆问题的出租车司机，他简直就是一时事评论员，社会问题的各个细节到 他这里都通通“是个阴毛”！可善于“倾听女人心”的吉普森哪里适合这种geek戏路，所以他的Jerry说白了就是一疯子。偏偏这疯子到最后还是硬泡上了 大嘴美女，咱们只能祈祷夜里打车别碰上他了！</p>
<p><img title="1984" src="http://ethermetic.com/wp-content/uploads/2009/11/1984.jpg" alt="1984" width="400" height="225" /> <strong></strong></p>
<p><strong>Emmanuel Goldstein</strong> (《一九八四》/1984)<br />
你不得不承认，《一九八四》里的Goldstein是意识形态阴谋论家的究极形态！作为曾经的党内功勋和当前的头号敌人，这位人物是“老大哥”同志的直接 对立面，够狠角色了吧！而同“老大哥”一样，Goldstein从来不露面，只靠其思想的散布存在于人的心中。按照我们的话来说，他的思想可谓是反党反人 民，罪大恶极的。其著作《寡头政治集体主义的理论与实践》直接揭露了1984年世界的真实面貌、各党派体制的本质、世界大战的本源、以及阶级矛盾的核心， 在男主角Winston的心中种下了不和谐的种子，最终将其指向了巨大的命运变革。而到最后你才明白，其实Goldstein的存在本身就是一个更大的阴 谋！阿弥陀佛～～</p>
<p><img title="davincicode" src="http://ethermetic.com/wp-content/uploads/2009/11/davincicode.jpg" alt="davincicode" width="450" height="293" /></p>
<p><strong>Leigh Teabing </strong>(《达芬奇密码》/2006)<br />
皇家史学家搞起阴谋论来不得了，直接就把西方世界的千年信仰闹了个天翻地覆。宗教领域的阴谋论在很多人看来没什么大不了，只不过是换个了个方式瞎掰嘛。可 是同志，永远不要忘记发言需谨慎这条真理，因为宗教狂热分子是不会跟你讲什么科学发展观的。要不为什么《2012》把啥都毁了就是没敢毁麦加圣地呢？</p>
<p><img title="watchmen" src="http://ethermetic.com/wp-content/uploads/2009/11/watchmen.jpg" alt="watchmen" width="522" height="294" /></p>
<p><strong>Rorschach</strong> (《守望者》/2009）<br />
这个家伙冷酷残暴，有厌女倾向，崇尚杜鲁门主义，忠实阅读由两个和他一样狂热的右翼分子私印的报纸The New  Frontiersman。他大概酷爱侦探小说和黑色电影，因此经常在《守望者》中独自一人上演刑侦剧。正因为这个家伙对阴谋有着灵敏的嗅觉，曾经的“守 望者”们的命运又再度开始交织。而他在故事结尾留下的日记，大概会成为新和谐世界里的阴谋论圣经吧！</p>
<p><img title="transformers2" src="http://ethermetic.com/wp-content/uploads/2009/11/transformers2.jpg" alt="transformers2" width="500" height="208" /></p>
<p><strong>Seymour Simmons</strong> (《变形金刚2》/2009)<br />
悲哀，曾经潇洒的Ghost  Buster如今变成了《变形金刚》系列的头号笑柄，在第一集出尽洋相还不够，到了第二集变成了一个一边开饭馆养家糊口一边建阴谋论网站的下岗职工。尽管 在金字塔上挽回了一点面子，John  Turturro大叔的演艺事业还是不可避免的彻底陷入杯具了。导演圈儿头号douchebag麦克儿-贝大爷真的是毁人不倦！</p>
<p>就写到这里了，别问我为什么没提那谁谁谁，两个字：累了！</p>
<p>最后多嘴一句，习惯在优酷土豆上看枪版电影的中国影迷们最近一窝蜂地挤进影院，把《2012》电影票抢购一空。不知是群众对感官冲击的渴望作祟，还 某些有“爱国主义”倾向的片面宣传所致。不过当你看到排在前面的大叔只能提前预订第二天的《2012》，而你自己也只有《第九区》第一排的最后几个空位可 选择时，有一点可以肯定：那就是中国影院的生意恐怕很久都没有这么繁荣过了。</p>
<p>另外我还要告诉你，<a href="http://ethermetic.com">Ethermetic</a>这个网站会<strong>很牛逼！！！</strong> 这可不是阴谋！</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/bloglife/ethermetic-this-site-is-not-a-conspiracy.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>最短的 IE 判定</title>
		<link>http://xuui.net/librarys/ie_detection_in_5_bytes.html</link>
		<comments>http://xuui.net/librarys/ie_detection_in_5_bytes.html#comments</comments>
		<pubDate>Mon, 01 Feb 2010 02:42:24 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Librarys]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=1385</guid>
		<description><![CDATA[这是一个利用IE与标准浏览器在处理数组的toString方法的差异做成的判断，可是IE 的一个 Bug 吧。 现在这个 JavaScript 代码仅仅只需要6 bytes! var ie = !-[1,] var ie = !-[1,]; alert(ie); 如果从非IE的角度判定，可以省一个比特，因为我们做兼容时，绝大多数情况都是IE与非IE地开工。 var notIE &#8230; <a href="http://xuui.net/librarys/ie_detection_in_5_bytes.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone" src="http://xuui.net/wp-content/uploads/code.png" alt="" /></p>
<p>这是一个利用IE与标准浏览器在处理数组的toString方法的差异做成的判断，可是IE 的一个 Bug 吧。</p>
<p><span id="more-1385"></span>现在这个 JavaScript 代码仅仅只需要6 bytes!</p>
<blockquote><p>var ie = !-[1,]</p></blockquote>
<p><code>var ie = !-[1,];<br />
alert(ie);</code></p>
<p>如果从非IE的角度判定，可以省一个比特，因为我们做兼容时，绝大多数情况都是IE与非IE地开工。</p>
<blockquote><p>var notIE = -[1,]</p></blockquote>
<p><code>if(-[1,]){<br />
 alert("这不是IE浏览器！");<br />
}else{<br />
 alert("这是IE浏览器！");<br />
}</code></p>
<p>(<a href="http://leeiio.me/ie_detection_in_5_bytes/">Via</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/librarys/ie_detection_in_5_bytes.html/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>百度29条军规</title>
		<link>http://xuui.net/librarys/baidu-29-army-regulation.html</link>
		<comments>http://xuui.net/librarys/baidu-29-army-regulation.html#comments</comments>
		<pubDate>Tue, 12 Jan 2010 14:31:54 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Librarys]]></category>
		<category><![CDATA[baidu]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=1242</guid>
		<description><![CDATA[百度29条军规 一、人一定要做自己喜欢并擅长的事情； 二、认准了，就去做；不跟风，不动摇 三、 注如一 四、把事情做到极致 五、少许诺 多兑现 六、  让数据说话 七、问题驱动 八、不唯上 九、对事不对人 十、创新求变 十一、允许试错 十二、迅速迭代，越变越美 十三、保持学习心态 十四、遇到新事物，先看看别人是怎么干的 十五、高效率执行 十六、用流程解决共性问题 十七、你不是孤军 &#8230; <a href="http://xuui.net/librarys/baidu-29-army-regulation.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>百度29条军规</p>
<p>一、人一定要做自己喜欢并擅长的事情；</p>
<p>二、认准了，就去做；不跟风，不动摇</p>
<p>三、 注如一</p>
<p>四、把事情做到极致</p>
<p>五、少许诺 多兑现</p>
<p>六、  让数据说话</p>
<p><span id="more-1242"></span>七、问题驱动</p>
<p>八、不唯上</p>
<p>九、对事不对人</p>
<p>十、创新求变</p>
<p>十一、允许试错</p>
<p>十二、迅速迭代，越变越美</p>
<p>十三、保持学习心态</p>
<p>十四、遇到新事物，先看看别人是怎么干的</p>
<p>十五、高效率执行</p>
<p>十六、用流程解决共性问题</p>
<p>十七、你不是孤军</p>
<p>十八、打破部门藩篱</p>
<p>十九、主动分享</p>
<p>二十、一定要找最优秀的人才</p>
<p>二十一、给最自由的空间</p>
<p>二十二、证明自己，用结果说话</p>
<p>二十三、一个人最重要的能力是判断力</p>
<p>二十四、每个人都要捡起地上的垃圾</p>
<p>二十五、百度不仅仅是李彦宏的，更是每一个百度人的</p>
<p>二十六、用户需求决定一切</p>
<p>二十七、听多数人的意见，和少数人商量，自己做决定</p>
<p>二十八、帮助别人，成就自己</p>
<p>二十九、公司离破产只有30天</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/librarys/baidu-29-army-regulation.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>李献计历险记</title>
		<link>http://xuui.net/bloglife/ce59ede1dfa803-8550.html</link>
		<comments>http://xuui.net/bloglife/ce59ede1dfa803-8550.html#comments</comments>
		<pubDate>Tue, 05 Jan 2010 13:06:14 +0000</pubDate>
		<dc:creator>Azaria</dc:creator>
				<category><![CDATA[Blog Life]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Video]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=870</guid>
		<description><![CDATA[李献计历险记,对就这个国产动画短片。貌似09年上半年在哪里看到过。但是当时有点反感这个名字。不知道为什么会反感这个。。。 这个东东算是近几年最好的国产动画了。有创意，有趣味，有独特的叙事手法，文本写得也很出色。更重要的是，整部动画全是一个人做的，而且作者“年轻优秀的飞行员” 这种态度我很喜欢：“……用业余时间花了两年半做完，我就粗粗拉拉一做，你们也就嘻嘻哈哈一看，咱都为图乐子来的不是么。” 只是一部20分钟的短片，却有许多好玩的细节值得玩味。还是建议去电驴下载清晰版好了。 (via) PS：想起来了。。。貌似当时看到的只是一个预告。。。]]></description>
			<content:encoded><![CDATA[<embed src="http://xuui.net/wp-content/plugins/istudio_shortcode/flvideo.swf?auto=0&flv=http://125.64.131.4/wwwFlv/flv/042/127/394/42127394.1fa2fcfd129f6e4dec710d547b6e9d8edf0134b0_238_6.flv?81000&amp;key=73c2824af4538e7e789a164b43dd5fafbea81a&amp;id=tudou&amp;itemid=42925553&amp;posky=WcNKZwPwGlv9zCFAw1UnnCvTt5Mvse" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="560" height="315" name="flvideo" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_cn" />
<p>李献计历险记,对就这个国产动画短片。貌似09年上半年在哪里看到过。但是当时有点反感这个名字。不知道为什么会反感这个。。。</p>
<p><span id="more-870"></span>这个东东算是近几年最好的国产动画了。有创意，有趣味，有独特的叙事手法，文本写得也很出色。更重要的是，整部动画全是一个人做的，而且作者“年轻优秀的飞行员” 这种态度我很喜欢：“……用业余时间花了两年半做完，我就粗粗拉拉一做，你们也就嘻嘻哈哈一看，咱都为图乐子来的不是么。”</p>
<p>只是一部20分钟的短片，却有许多好玩的细节值得<a href="http://www.douban.com/review/2910110/" target="_blank">玩味</a>。还是建议去电驴下载<a href="http://www.verycd.com/topics/2785835/" target="_blank">清晰版</a>好了。</p>
<p>(<a href="http://shazhude.net/20100105/558/">via</a>)</p>
<p>PS：想起来了。。。貌似当时看到的只是一个预告。。。</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/bloglife/ce59ede1dfa803-8550.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>更换空间和域名需要注意的问题</title>
		<link>http://xuui.net/librarys/replacement-of-space-and-domain-name-issues-that-required-attention.html</link>
		<comments>http://xuui.net/librarys/replacement-of-space-and-domain-name-issues-that-required-attention.html#comments</comments>
		<pubDate>Tue, 29 Dec 2009 02:32:58 +0000</pubDate>
		<dc:creator>Xu.hel</dc:creator>
				<category><![CDATA[Librarys]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://xuui.net/?p=867</guid>
		<description><![CDATA[最近我的一些朋友准备更换空间和域名，我就把 Nicky 的这篇文章转过来做个存档了。很实用的。 这个文章的目的就是，别人在访问老博客的时候自动跳转到新地址，而不会出现 404 错误页面。其实这是一个很简单的问题，一个 .htaccess 文件就可以搞定，我也顺便把具体步骤写出来，供有需要的朋友参考。如果大家还有其他更好的方法，也可以提出来交流交流。 更换空间和域名需要注意的问题： 1、保持新旧地址的 Permalink 一致性 例如使用 WordPress，可以在 Options –&#62; Permalinks 中填入同样的 Permalink 结构。 &#8230; <a href="http://xuui.net/librarys/replacement-of-space-and-domain-name-issues-that-required-attention.html" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>最近我的一些朋友准备更换空间和域名，我就把 <a href="http://www.osxcn.com/wordpress/ghym-zhuyishixiang.html">Nicky 的这篇文章</a>转过来做个存档了。很实用的。</p>
<p>这个文章的目的就是，别人在访问老博客的时候自动跳转到新地址，而不会出现 404 错误页面。其实这是一个很简单的问题，一个 .htaccess 文件就可以搞定，我也顺便把具体步骤写出来，供有需要的朋友参考。如果大家还有其他更好的方法，也可以提出来交流交流。</p>
<p>更换空间和域名需要注意的问题：</p>
<p><strong><span id="more-867"></span>1、保持新旧地址的 Permalink 一致性</strong></p>
<p>例如使用 WordPress，可以在 Options –&gt; Permalinks 中填入同样的 Permalink 结构。</p>
<p><strong>2、旧空间和域名暂时不要停用</strong></p>
<p>这个时间最好为三个月以上，等待一些主流搜索引擎转换到新地址。</p>
<p><strong>3、把旧地址进行 301 重定向</strong></p>
<p>这是最为重要的一点，做起来也很简单。</p>
<p>可以删除旧空间下所有文件，然后放上一个 .htaccess 文件，内容如下：</p>
<p><code>&lt;ifmodule mod_rewrite.c&gt;<br />
RewriteEngine On<br />
RewriteCond %{HTTP_HOST} olddomainname.com$ [NC]<br />
RewriteRule ^(.*)$ http://www.newdomainname.com/$1 [R=301,L]<br />
&lt;/ifmodule&gt;</code></p>
<p>这样做的话，只要来自旧地址的链接都会自动 301 重定向到新地址。</p>
<p>(<a href="http://www.osxcn.com/wordpress/ghym-zhuyishixiang.html">via</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://xuui.net/librarys/replacement-of-space-and-domain-name-issues-that-required-attention.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

