<?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>nan.im &#187; CASE 案例</title>
	<atom:link href="http://nan.im/blog/tags/case/feed" rel="self" type="application/rss+xml" />
	<link>http://nan.im/blog</link>
	<description></description>
	<lastBuildDate>Sat, 28 Jan 2012 05:58:17 +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>【网页应用】anyLnk &#8211; 简单方便的创建 iPhone iOS 桌面联系人快捷方式图标</title>
		<link>http://nan.im/blog/1371</link>
		<comments>http://nan.im/blog/1371#comments</comments>
		<pubDate>Mon, 27 Jun 2011 20:07:31 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[数码硬件]]></category>
		<category><![CDATA[资源分享]]></category>
		<category><![CDATA[CASE 案例]]></category>
		<category><![CDATA[DIY MOD]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[iOS iPhone iTouch iPad]]></category>
		<category><![CDATA[WEB APP]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1371</guid>
		<description><![CDATA[anyLnk 可以很方便的在 iPhone iPad 及 iPod Touch 桌面上创建各种快捷方式图标，目前已经能够支持：拨打普通电话、发送电子邮件、视频通话（facetime）、短信（iMessage）、网络电话（skype）甚至可以不越狱为国行版的 iPhone 添加原生 YouTube 应用图标等等。使用 anyLnk 非常方便无需安装，简单的两三个步骤就可以生成一个可以用来直接拨打电话或发送短信的快捷图标。如果直接在 iPhone 上使用 anyLnk 会直接生成快捷图标，如果在电脑上使用 anyLnk 则会生成二维码供 iPhone 扫描继续操作，具体效果可以看下面的最终截图及使用说明…… anyLnk for iOS：http://nan.im/apps/anylnk/ 推荐在电脑上使用，除可更快录入节省流量外还有扫描二维码的乐趣 ^_^ anyLnk History：版本更新历史 0.0.7 简单的美化，为邮件反馈追加用户 UA 信息以帮助诊断； 0.0.6 增加创建 YouTube 和 skype 图标的功能，没有越狱的行货手机有福了； 0.0.5 测试版公开发布，支持为 iPhone 创建：电话、邮件、短信、视频通话等图标； 注意，这里创建的 YouTube 图标打开后为 iOS 原生的 YouTube 应用并不是网页版的；另外插件中所用到的图标资源来自 MaxThemes 的 GlasklartHD 主题包。 具体实现的效果截图及简单的操作步骤说明： [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://anyliv.com/blog/1371">anyLnk</a> 可以很方便的在 iPhone iPad 及 iPod Touch 桌面上创建各种快捷方式图标，目前已经能够支持：拨打普通电话、发送电子邮件、视频通话（facetime）、短信（iMessage）、网络电话（skype）甚至可以<b>不越狱为国行版的 iPhone 添加原生 YouTube 应用图标</b>等等。使用 anyLnk 非常方便无需安装，简单的两三个步骤就可以生成一个可以用来直接拨打电话或发送短信的快捷图标。如果直接在 iPhone 上使用 anyLnk 会直接生成快捷图标，如果在电脑上使用 anyLnk 则会生成二维码供 iPhone 扫描继续操作，具体效果可以看下面的最终截图及使用说明……<span id="more-1371"></span></p>
<blockquote><p><img src="http://anyLiv.com/blog/wp-content/uploads/anyLnk-QR.png" width="93" height="93" style="float:right;"></p>
<p><b>anyLnk for iOS</b>：<a target="_blank" href="http://nan.im/apps/anylnk/">http://nan.im/apps/anylnk/</a></p>
<p>推荐在电脑上使用，除可更快录入节省流量外还有扫描二维码的乐趣 ^_^</p>
<p><b>anyLnk History</b>：版本更新历史</p>
<p>0.0.7 简单的美化，为邮件反馈追加用户 UA 信息以帮助诊断；</p>
<p>0.0.6 增加创建 <b>YouTube</b> 和 <b>skype</b> 图标的功能，没有越狱的行货手机有福了；</p>
<p>0.0.5 测试版公开发布，支持为 iPhone 创建：电话、邮件、短信、视频通话等图标；</p>
<p>注意，这里创建的 YouTube 图标打开后为 iOS 原生的 YouTube 应用并不是网页版的；另外插件中所用到的图标资源来自 <a href="http://www.maxthemes.com/">MaxThemes</a> 的 GlasklartHD 主题包。</p></blockquote>
<h3>具体实现的效果截图及简单的操作步骤说明：</h3>
<p><center><a href="http://anyLiv.com/blog/wp-content/uploads/anyLnk-tech.jpg" rel="shadowbox[sbpost-1371];player=img;" title="anyLnk-tech"><img src="http://anyLiv.com/blog/wp-content/uploads/anyLnk-tech-600x900.jpg" alt="" title="anyLnk-tech" width="600" height="900" class="alignnone size-thumbnail wp-image-1374" /></a></center></p>
<p>如图演示，在电脑或手机上直接输入 <strong><a href="http://nan.im/apps/anylnk/">nan.im/apps/anylnk</a></strong> 即可打开 anyLnk 应用，先选择想要生成的快捷图标类型，输入图标的标题，号码或邮箱，点击创建，最后「<b>添加到主屏幕</b>」即可！</p>
<p>但由于是基于浏览器的「网页应用」即 Web App 所以也存在很多局限，比如不能直接调用系统通讯录，不能自己上传头像做为图标，使用中会消耗一些数据流量等等，另外应用刚刚开始开发必然存在很多问题，在本页和应用界面上都有提供反馈入口，遇到任何问题或有任何意见和建议都可以在下面提交或直接发送邮件给我，在腾讯微博和新浪微博上添加 <a href="http://t.qq.com/k/anyLnk">#anyLnk#</a> 话题的内容我也会注意到……</p>
<p><b>关于网络流量消耗的问题</b>：因为是网页版的应用 anyLnk 在使用中肯定会消耗数据流量，而生成的快捷方运用了一些 HTML5 技术，即使是在飞行模式无数据链接的情况下也是可以正常使用的，如果对几 KB 流量都非常在意的朋友最好还是不要用；</p>
<p><b>关于自定义头像图标问题</b>：原本我有考虑使用 <a href="http://gravatar.com/">GrAvatar</a> 的全球头像系统，好处是每个人只用管好自己的头像即可，但这需要为每个快捷方式图标都填写邮箱，而且你也不能保证你的联系人都开通了 GrAvatar 头像系统；</p>
<p><b>关于直接调用联系人信息</b>：由于是网页应用所以不可能从系统中调取联系人的资料，我有考虑过从 <a href="http://www.google.com/contacts/">Google Contacts API</a> 联系人 API 中读取通讯录资料，但这要求你是 Google Sync 用户且需要授权，而我不愿意涉及用户隐私，再者目前从电脑上录入联系人信息然后手机扫描二维码安装已经非常方便快捷了；</p>
<p>其实 anyLnk 的实现原理非常简单，核心就是 OpenURL + DataURL 来调用各个功能，但实现起来还是有点麻烦的，因为要实现离线和自动拨号功能；考虑种种，目前先这样吧，至于为什么没做 iOS 原生应用是因为我个人不是 iPhone 开发者，所以 anyLnk 目前只能以网页应用（WEB-APP）的形式存在了……</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1371/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>【案例分析】Kik Messenger 迅速 跨平台 简洁到极致的社交 IM 即时消息</title>
		<link>http://nan.im/blog/1327</link>
		<comments>http://nan.im/blog/1327#comments</comments>
		<pubDate>Mon, 08 Nov 2010 09:21:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[数码硬件]]></category>
		<category><![CDATA[资源分享]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[BlackBerry]]></category>
		<category><![CDATA[CASE 案例]]></category>
		<category><![CDATA[IM 即时消息]]></category>
		<category><![CDATA[Internet 互联网]]></category>
		<category><![CDATA[iOS iPhone iTouch iPad]]></category>
		<category><![CDATA[Social Networking Service SNS 社会性网络服务]]></category>
		<category><![CDATA[Software 软件]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1327</guid>
		<description><![CDATA[Kik Messenger 在苹果 AppStore 上榜已经有段时间了本周也引起了 Android Market 用户的注意，另外 Kik 还支持 Blackberry 黑莓平台，起初我并没有在意这么一款目前拥有众多竞争对手的 IM 即时通讯小玩意会有多少潜力，直到今天看到两张图表分别是 KikMessenger 的新用户数和总用户数曲线图（如下）我才开始注意到这款从 0 到 100 万用户只用了 15 天的迅速、跨平台、简洁到极致的 IM 即时消息或者可以叫 社交短信 的应用软件…… Kik Messenger 功能非常简单甚至单一，其实就是网络版的短信工具，界面类似 BlackBerry Messenger, BBM 通过网络而不是运营商来发送即时文本消息，目前还不支持富内容如图片或声音，不支持附件，功能甚至极其单调，但为什么这么多人喜欢，为什么大家不干脆直接用手机的短信难道 Just because we can, doesn&#8217;t mean we should. 肯定不是那样，也许在互联网应用大量爆发的时候恰恰是该做减法的时候，很多用户选择 Kik Messenger 不是因为现有的即时通讯（IM）不能满足需求，恰恰是因为现有的即时通讯（IM）都在过分的满足需求。 为什么说我们需要做减法呢，博客内容太长作者和读者都有压迫感于是有了 twitter 微博；腾讯 QQ 的功能越来越多于是部分人选择了相对简约的 TM WebQQ 或者是改用 MSN gTalk [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://kik.com/">Kik Messenger</a> 在苹果 AppStore 上榜已经有段时间了本周也引起了 Android Market 用户的注意，另外 Kik 还支持 Blackberry 黑莓平台，起初我并没有在意这么一款目前拥有众多竞争对手的 IM 即时通讯小玩意会有多少潜力，直到今天看到两张图表分别是 KikMessenger 的新用户数和总用户数曲线图（如下）我才开始注意到这款从 0 到 100 万用户只用了 15 天的迅速、跨平台、简洁到极致的 IM 即时消息或者可以叫 <b>社交短信</b> 的应用软件……<span id="more-1327"></span></p>
<p>Kik Messenger 功能非常简单甚至单一，其实就是网络版的短信工具，界面类似 BlackBerry Messenger, BBM 通过网络而不是运营商来发送即时文本消息，目前还不支持富内容如图片或声音，不支持附件，功能甚至极其单调，但为什么这么多人喜欢，为什么大家不干脆直接用手机的短信难道 Just because we can, doesn&#8217;t mean we should. 肯定不是那样，也许在互联网应用大量爆发的时候恰恰是该做减法的时候，很多用户选择 Kik Messenger <strong>不是因为现有的即时通讯（IM）不能满足需求，恰恰是因为现有的即时通讯（IM）都在过分的满足需求。</strong></p>
<p><center><img src="http://anyLiv.com/blog/wp-content/uploads/KikUser.png" alt="" title="KikUser" width="600" height="698" class="aligncenter size-full wp-image-1328" /></center></p>
<p>为什么说我们需要做减法呢，博客内容太长作者和读者都有压迫感于是有了 twitter 微博；腾讯 QQ 的功能越来越多于是部分人选择了相对简约的 TM WebQQ 或者是改用 MSN gTalk 等等；记得我用过的很多手机都有多种环境模式如 会议模式 静音模式 户外模式等等但最后还是觉得类似 iPhone 这种提供硬开关切换振动铃音更实用和高效……</p>
<p>简单到极致的 Kik Messenger 使得这个 IM 非常迅速和高效，你甚至可以看到对方是否在打字，另外 Kik Messenger 发送消息时不需要对方事先允许或加为好友，只要知道对方的 ID 即可像发短信一样直接发送，随着这样的应用越来越多渐渐的会像 SayNow 的 CEO 推测的那样：<a href="http://techcrunch.com/2010/08/28/phone-numbers-dead/">Phone Numbers Are Dead</a> 电话号码将逐渐消亡！</p>
<p>虽然 Kik 总体来说简洁到极致但某些方面却有一些区别于同类产品的特点，其中我个人最喜欢的就是 S D R 状态符分别代表：已发送 Send 已接收 Delivered 已阅读 Read 这一点是传统电信运营商的短信功能所不具备的，平时我们发送一条短信，短信报告只能告诉我们已经发送成功，在跨运营商发送时短信报告甚至不能告诉我们对方是否真正收到了我们的短信，更不用说像 Kik 那样即时显示对方是否正在输入的情况，这将拉近消息双方的沟通距离，同时仅仅通过 ID 即可方便的发送消息也无形中降低了陌生人之间的障碍，我看到网上很多人都公布了自己的 Kik ID 但如果是手机号码呢，会不会也可以毫无顾忌的公开呢……</p>
<blockquote><p>Kik Messenger Users <a href="http://www.kik.com/blog/wp-content/uploads/2010/11/P10003141-1024x768.jpg" rel="shadowbox[sbpost-1327];player=img;">Break One Million</a> 小小的工作间和一群很有意思的年轻人</p>
<p>Kik Messenger Download：<a href="http://kik.com/">www.Kik.com</a>（iPhone iTouch Android BlackBerry）</p></blockquote>
<p>目前类似的 IM 即时消息工具有很多如：QQ MSN gTalk YahooMessenger 甚至是 AIM fring PingChat WhatsApp 等等，但即使是如此 Kik 仍做到 <a href="http://www.kik.com/blog/2010/11/zero-to-a-million-in-15-days/">从 0 到 100 万用户只用 15 天</a> 的成绩，比起国内某些互联网公司成天只知道打嘴仗和互相诋毁互相攻击，毫无创意的互相抄袭然后借助防火墙来占领市场来说实在是 ^_^ ……</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1327/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>常见网页选项卡 tab 的制作代码及优化小建议</title>
		<link>http://nan.im/blog/6</link>
		<comments>http://nan.im/blog/6#comments</comments>
		<pubDate>Thu, 10 Jun 2010 13:00:32 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[Cascading Style Sheets (CSS)]]></category>
		<category><![CDATA[CASE 案例]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript JS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Search Engine Optimization（SEO）搜索引擎优化]]></category>
		<category><![CDATA[W3C Behavior 行为层]]></category>
		<category><![CDATA[W3C Presentation 表现层]]></category>
		<category><![CDATA[W3C Structure 结构层]]></category>
		<category><![CDATA[W3C Web Standard 网页标准]]></category>

		<guid isPermaLink="false">http://www.anyliv.com/blog/?p=6</guid>
		<description><![CDATA[选项卡（Tab）起初似乎是做为控件被封装到图形用户界面元素中的一个组件，在应用程序中选项卡式界面可以大大的节省界面空间进而使一组类似的功能选项变的井井有条，目前主流的各种网页浏览器均已采用选项卡式页面浏览另外还有被微软大量运用在新版办公软件（Office）及操作系统（Windows）中的 Ribbon 控件核心也是选项卡式的设计，当然在网页中使用选项卡的例子更为常见如淘宝（TaoBao）的搜索框及右边栏就大量使用了选项卡式结构从而节省了近三倍页面空间，所以对于选项卡式网页的制作也是我们最基本需要掌握的&#8230; 一、结构层（Structure）：虽然网页上到处都是各种各样的选项卡但从结构层即 HTML 上主要有两种写法：普遍采用的是第一种即将用于触发动作的所有选项卡的标题写到一组，再将该选项卡中所有页的内容写到一组并保持两者对应顺序一致，然后使用 JavaScript 判断触发点击或划过的是第几个标题然后显示与该标题相应的第几个内容即可，该结构因为代码比较简单 JS 也容易加所以被多数网站采用；而我个人则倾向于第二种结构即每一个选项卡页的内容均单独编码，然后额外添加一个容器用来展示被选中的选项卡内容，虽然该方法的代码量会较第一种更多及复杂但可以保证在客户端即使禁用掉 CSS JavaScript 也仍具有很好的可读性，而同样的对于搜索引擎优化（SEO）更是如此，该结构可以更为清晰的告知搜索引擎你的内容组织方式及相互关系其代码如下： //首先是多数站点采用的写法： 标题一标题二标题三 内容一 内容二 内容三 //如果用户禁用 CSS JS 内容将失去相关性及联系性 //然后我自己比较推荐的写法： 标题一 内容一 标题二 内容二 标题三 内容三 //对于搜索引擎和禁用 CSS JS 的客户端依然可以保持良好的结构性 二、表现层（Presentation）：然后就可以为上述 HTML 代码添加 CSS 样式了，其目的很简单就是将选项卡修饰一个使其更像一个选项卡吧，这里仅提供第二种结构写法的样式代码关键部分，其他如果需要更多的修饰可以自行添加，具体代码如下： .itab { } .itab dl { margin:0; padding:0; } .itab dt { float:left; padding:5px; cursor:pointer; } .itab [...]]]></description>
			<content:encoded><![CDATA[<p><strong>选项卡</strong>（Tab）起初似乎是做为控件被封装到图形用户界面元素中的一个组件，在应用程序中选项卡式界面可以大大的节省界面空间进而使一组类似的功能选项变的井井有条，目前主流的各种网页浏览器均已采用选项卡式页面浏览另外还有被微软大量运用在新版办公软件（Office）及操作系统（Windows）中的 Ribbon 控件核心也是选项卡式的设计，当然在网页中使用选项卡的例子更为常见如淘宝（TaoBao）的搜索框及右边栏就大量使用了选项卡式结构从而节省了近三倍页面空间，所以对于选项卡式网页的制作也是我们最基本需要掌握的&#8230;<span id="more-6"></span></p>
<p>一、<strong>结构层（Structure）</strong>：虽然网页上到处都是各种各样的选项卡但从结构层即 HTML 上主要有两种写法：普遍采用的是第一种即将用于触发动作的所有选项卡的标题写到一组，再将该选项卡中所有页的内容写到一组并保持两者对应顺序一致，然后使用 JavaScript 判断触发点击或划过的是第几个标题然后显示与该标题相应的第几个内容即可，该结构因为代码比较简单 JS 也容易加所以被多数网站采用；而我个人则倾向于第二种结构即每一个选项卡页的内容均单独编码，然后额外添加一个容器用来展示被选中的选项卡内容，虽然该方法的代码量会较第一种更多及复杂但可以保证在客户端即使禁用掉 CSS JavaScript 也仍具有很好的可读性，而同样的对于搜索引擎优化（SEO）更是如此，该结构可以更为清晰的告知搜索引擎你的内容组织方式及相互关系其代码如下：</p>
<pre lang="html4strict" line="1">
//首先是多数站点采用的写法：
<div class="itab">
<div class="tabHead"><b>标题一</b><b>标题二</b><b>标题三</b></div>
<div class="tabBody">

内容一

内容二

内容三
</div>
</div>

 //如果用户禁用 CSS JS 内容将失去相关性及联系性

//然后我自己比较推荐的写法：
<div class="itab">
<dl>
<dt>标题一</dt>
<dd>内容一</dd>
<dt>标题二</dt>
<dd>内容二</dd>
<dt>标题三</dt>
<dd>内容三</dd>
</dl>
</div>

 //对于搜索引擎和禁用 CSS JS 的客户端依然可以保持良好的结构性
</pre>
<p>二、<strong>表现层（Presentation）</strong>：然后就可以为上述 HTML 代码添加 CSS 样式了，其目的很简单就是将选项卡修饰一个使其更像一个选项卡吧，这里仅提供第二种结构写法的样式代码关键部分，其他如果需要更多的修饰可以自行添加，具体代码如下：</p>
<pre lang="css" line="1">
.itab { }
.itab dl { margin:0; padding:0; }
.itab dt { float:left; padding:5px; cursor:pointer; }
.itab dt.active { }
.itab dd {/* display:none; */} /* 这个隐藏也建议由 JS 来实现如果客户端仅禁用 JS 却支持 CSS 的情况下不影响 */
.itab .tabBody { clear:both; }
</pre>
<p>三、<strong>行为层（Behavior）</strong>：最后当然是起重要作用的行为层了，主要对用户的一些操作如点击划过等触发一些事件从而改变现有的结构层代码达到选项卡的目的，具体代码如下：</p>
<pre lang="javascript" line="1">
$('.itab dd').hide();  //这里可以交给 CSS 隐藏但那样支持 CSS 不支持 JS 的客户端就郁闷了；
$('.itab').append('
<div class="tabBody"></div>

');
$('.itab dt').click(function(){
	$('.itab .active').removeClass('active');
	$(this).addClass('active');  //用于辅助 css 修饰的 class 可区分哪个是当前点击的标题；
	$('.itab .tabBody').empty().append($(this).next().clone());
}).eq(0).click();
</pre>
<p>我这里偷懒用了 jQuery 首先是隐藏掉原来已经有的各个内容 dd 然后为整个选项卡 itab 最后添加了一个名为 tabBody 的容器用来存放要展示的内容，接着就可以为标题绑定事件了这里选了点击（click）当然你可以可以使用划过（hover）等等，当鼠标点击标题 dt 的时候先清空容器 tabBody 的内容，然后将当前被点击的标题 dt 下面的内容 dd 克隆一份放置到容器 tabBody 中，过程非常简单，另外用于操作 class 的两句是为了方便 CSS 修饰当前被激活的标题。</p>
<p>这样结构的选项卡其优点是很明显的，可以很清楚的告诉搜索引擎和关闭 CSS JS 的客户端你的内容结构层次，当然代码上特别是 JS 代码上会稍显复杂但这样的成本我个人认为是非常值得的，也有人会说现在哪还有不支持 CSS 和 JS 的客户端呢，其实我很多时候也有过这样的想法，但好在当我看到自己的项目在一些掌上浏览器的浏览效果的时候及时否定了自己的想法……</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/6/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://202.103.172.39/tiantian.mp3" length="6290062" type="audio/mpeg" />
		</item>
		<item>
		<title>【案例展示】资讯类站点 SinoOutbound 亚洲对外贸易资讯</title>
		<link>http://nan.im/blog/1363</link>
		<comments>http://nan.im/blog/1363#comments</comments>
		<pubDate>Sun, 23 May 2010 09:40:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[无聊日记]]></category>
		<category><![CDATA[CASE 案例]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1363</guid>
		<description><![CDATA[SinoOutbound 是一个聚合亚太区对外贸易新闻的资讯类网站，这个小站应该是我首次尝试个人独立完成 Drupal 建站的项目，除了该网站原始理念及流程由两位外籍同事负责完成以外，我自己包揽了从产品界面设计到最终前端和服务器端代码实现的全部过程，功能虽然简单但仍倾注了我很多的思考，当然也得到了很多收获…… 易用的目录过滤系统： 资讯类网站对于用户来说非常重要的一点是如何快速找到自己需要的内容，为此我设计并开发了上面三排两大类的按钮导航过滤系统，使用户仅一次点击就可以切换过滤器找出自己需要的内容，按钮的链接地址均由程序智能生成即使用户禁用页面脚本的情况下也能正常工作。 灵活的高级搜索功能： 目录和搜索一直都是非常重要的内容检索方式，有的用户喜欢用目录浏览，另有一些人一到某个网站就开始寻找搜索框。上图中的高级搜索功能列出了整站的所有内容类型可以一目了然的搜索，高级搜索默认为关闭状态可以避免对用户产生不必要的干扰。 另外具体实施中该项目整体尺寸和按钮设计上，还特别为 iPad 用户做了一些考虑例如：主要导航置于页面两边采用超大图标展示，用于过滤的按钮也相应的放大了尺寸，用于过滤的多选框也放大了热区并添加了 All 等快捷选取功能等等。因为网站界面只有 中 英 两种语言所以语言切换按钮同时只会出现另外一个。]]></description>
			<content:encoded><![CDATA[<p>SinoOutbound 是一个聚合亚太区对外贸易新闻的资讯类网站，这个小站应该是我首次尝试个人独立完成 Drupal 建站的项目，除了该网站原始理念及流程由两位外籍同事负责完成以外，我自己包揽了从产品界面设计到最终前端和服务器端代码实现的全部过程，功能虽然简单但仍倾注了我很多的思考，当然也得到了很多收获……<span id="more-1363"></span></p>
<h3>易用的目录过滤系统：</h3>
<p><center><a href="http://anyLiv.com/blog/wp-content/uploads/CASE-SiO-01.png" rel="shadowbox[sbpost-1363];player=img;" title="CASE-SiO-01"><img src="http://anyLiv.com/blog/wp-content/uploads/CASE-SiO-01-600x384.png" alt="" title="CASE-SiO-01" width="600" height="384" class="alignnone size-thumbnail wp-image-1364" /></a></center></p>
<p>资讯类网站对于用户来说非常重要的一点是如何快速找到自己需要的内容，为此我设计并开发了上面三排两大类的按钮导航过滤系统，使用户仅一次点击就可以切换过滤器找出自己需要的内容，按钮的链接地址均由程序智能生成即使用户禁用页面脚本的情况下也能正常工作。</p>
<h3>灵活的高级搜索功能：</h3>
<p><center><a href="http://anyLiv.com/blog/wp-content/uploads/CASE-SiO-02.png" rel="shadowbox[sbpost-1363];player=img;" title="CASE-SiO-02"><img src="http://anyLiv.com/blog/wp-content/uploads/CASE-SiO-02-600x385.png" alt="" title="CASE-SiO-02" width="600" height="385" class="alignnone size-thumbnail wp-image-1365" /></a></center></p>
<p>目录和搜索一直都是非常重要的内容检索方式，有的用户喜欢用目录浏览，另有一些人一到某个网站就开始寻找搜索框。上图中的高级搜索功能列出了整站的所有内容类型可以一目了然的搜索，高级搜索默认为关闭状态可以避免对用户产生不必要的干扰。</p>
<p>另外具体实施中该项目整体尺寸和按钮设计上，还特别为 iPad 用户做了一些考虑例如：主要导航置于页面两边采用超大图标展示，用于过滤的按钮也相应的放大了尺寸，用于过滤的多选框也放大了热区并添加了 All 等快捷选取功能等等。因为网站界面只有 中 英 两种语言所以语言切换按钮同时只会出现另外一个。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1363/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【案例分析】分享云存储 dropbox 的创业经验</title>
		<link>http://nan.im/blog/1245</link>
		<comments>http://nan.im/blog/1245#comments</comments>
		<pubDate>Tue, 11 May 2010 16:23:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[资源分享]]></category>
		<category><![CDATA[CASE 案例]]></category>
		<category><![CDATA[Cloud Computing 云计算]]></category>
		<category><![CDATA[dropbox]]></category>
		<category><![CDATA[Internet 互联网]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1245</guid>
		<description><![CDATA[我曾多次推荐优秀的云存储服务提供商 DropBox 在上月底美国旧金山的一场名为 “Startup Lessons Learned” 创业经验分享演讲会上 DropBox CEO DrewHouston 在会议上做了主题演讲分享了 dropbox 的创业历程及经验和收获，以下是当时 DrewHouston 在台上演示的 PPT 演示文稿，我大概翻译了一些重要的内容然后摘录下来，这些经验对于任何一个互联网创业公司来说无疑是不错的参考借鉴和教材，但不幸的是由于众所周知的原因从昨天开始国内的用户已经无缘这款非常优秀的互联网服务…… Dropbox Startup Lessons Learned 产品定位 方便的跨平台跨计算机同步、分享、备份文件（目前已支持的平台和操作系统有：Windows、MacOS、Linux、iPhone iTouch iPad、Android 等等） 盈利模式 免费用户拥有 2GB 空间并可通过完成入门向导和邀请朋友加入最多达到 10.25GB 空间；付费用户可通过按月或按年支付 9.99 到 199.00 美元获得 50GB 到 100GB 的空间。 以上是对于 dropbox 的一些基本介绍，下面的内容摘自 DropBox CEO DrewHouston PPT 演示文稿，我做了些简单的翻译仓促望大家见谅。 一些背景 运营 18 个月用户数量有零达到几百万；没有投入广告花费；有无数的竞争对手；用户必须下载安装客户端；公司由技术工程师组成所以缺乏销售和运营经验。 项目启动 在没有完全烂掉之前尽快的启动项目，因为已经有大量的云存储公司，后面是 Drew [...]]]></description>
			<content:encoded><![CDATA[<p>我曾多次推荐优秀的云存储服务提供商 <a href="http://www.dropbox.com/">DropBox</a> 在上月底美国旧金山的一场名为 “Startup Lessons Learned” 创业经验分享演讲会上 DropBox CEO DrewHouston 在会议上做了主题演讲分享了 dropbox 的创业历程及经验和收获，以下是当时 DrewHouston 在台上演示的 PPT 演示文稿，我大概翻译了一些重要的内容然后摘录下来，这些经验对于任何一个互联网创业公司来说无疑是不错的参考借鉴和教材，但不幸的是由于众所周知的原因从昨天开始国内的用户已经无缘这款非常优秀的互联网服务……<span id="more-1245"></span></p>
<p><center><object id="__sse3836587" width="600" height="500"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=dropbox-startuplessonslearned-100423230315-phpapp02&#038;stripped_title=dropbox-startup-lessons-learned-3836587&#038;userName=gueste94e4c" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed name="__sse3836587" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=dropbox-startuplessonslearned-100423230315-phpapp02&#038;stripped_title=dropbox-startup-lessons-learned-3836587&#038;userName=gueste94e4c" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="500"></embed></object><br />Dropbox Startup Lessons Learned</center></p>
<h3>产品定位</h3>
<p>方便的跨平台跨计算机同步、分享、备份文件（目前已支持的平台和操作系统有：Windows、MacOS、Linux、iPhone iTouch iPad、Android 等等）</p>
<h3>盈利模式</h3>
<p>免费用户拥有 2GB 空间并可通过完成入门向导和邀请朋友加入最多达到 10.25GB 空间；付费用户可通过按月或按年支付 9.99 到 199.00 美元获得 50GB 到 100GB 的空间。<br />
<hr/>
<p>以上是对于 dropbox 的一些基本介绍，下面的内容摘自 DropBox CEO DrewHouston PPT 演示文稿，我做了些简单的翻译仓促望大家见谅。</p>
<h3>一些背景</h3>
<p>运营 18 个月用户数量有零达到几百万；没有投入广告花费；有无数的竞争对手；用户必须下载安装客户端；公司由技术工程师组成所以缺乏销售和运营经验。</p>
<h3>项目启动</h3>
<p>在没有完全烂掉之前尽快的启动项目，因为已经有大量的云存储公司，后面是 Drew 和风险投资 VC 的一段对话 VC：“这里有上百万家云存储公司启动！” Drew：“那您都用哪些？” VC：“不用” &#8230; ^_^</p>
<p>创建一个万无一失的 可伸缩的 跨平台的云存储非常困难，这是来自竞争对手的支持论坛：“我所有的文档和表格被变成了零字节文件”</p>
<p>我们在 Hacker News 发布的一个三分钟演示获得了很多高质量的反馈信息，用一个简单明了的首页获得了用户的注意力和用户邮箱，我们在 digg 上的测试版演示视频得到了 12000 个赞，由此一天之内排队测试用户从五千增长到七万五。</p>
<p>最大的风险是做没有人用的东西，不能启动虽然痛苦但不学习将会致命，不必真正实现尽快给用户体验来获得真实反馈，直接和客户交流了解他们需要什么。</p>
<h3>真正考验</h3>
<p>于 2008 年 9 月正式面向公共开放开始真正的考验，我们的市场计划：在 TC50 大会启动，购买了一些关键字广告，还有雇佣一个公关公司或市场副总裁。</p>
<p>我们尝试付费搜索：聘请昂贵的搜索专家，找出关键词并优化首页，给付费搜索过来的用户隐藏免费用户入口替换为限时免费体验帐号，一直持续到 2009 年，结果是新增付费用户成本为 233-388 美元但我们定价为 99 美元失败！</p>
<h3>得到教训</h3>
<p>问题：多数关键词单价被抬的很高，长尾效果很差，隐藏免费选项也靠不住想法很烂，会员模式和展示赞助广告都不行，还有就是经济学不靠谱！ ^_^</p>
<p>但我们依然做的很好：推出七个月用户达到一百万，并被大众喜欢。</p>
<h3>学到什么</h3>
<p>压力使你得用传统的方法但原则依然要保持优先，幸运的是我们全力在做简单的产品并能让用户喜欢，我们日以继夜的工作并雇佣我们所知道的最聪明的人才，保持重要的事情始终是重要的事情，市场化的产品可以弥补管理的不足。</p>
<p>大多被忽视的事情：雇佣非工程师，运用公关手段，截至时间 开发进程 教条，拥有一个真正的网站，商业合作开发，更多的功能。</p>
<h3>十四个月</h3>
<p>付费关键词不是问题：没有人生来就知道优盘电子邮箱等等，同样人们不会主动寻找我们所做的产品，展示广告引导页面也没什么效果，搜索只能是寻找需求而不是创造需求。</p>
<p>典型用户：从朋友或各处听说了 dropbox 服务，但我并不需要这类服务，确实真的好用，然后非常高兴的告诉朋友。</p>
<p>市场理论：已经存在的市场，重新划分市场，新的市场，对某一种市场有效但对其他市场则会失效。</p>
<h3>新的战略</h3>
<p>为用户提供可以更好展示我们的工具，通过邀请的双方都可以获得利益受 PayPal 的注册五美元启发，病毒式营销，页面设计上的优化，在分析上拥有大量投入，仅 2010 年 4 月共有 280 万次邀请。</p>
<p>结果是：在 2008 年 9 月：注册用户十万，在 2010 年 1 月：注册用户四百万，更多来自病毒营销其中 35% 来自朋友邀请 20% 来自共享目录，项目启动至今至今用户月增值率在 15% &#8211; 20% 之间。</p>
<h3>结束演示</h3>
<p>早学习 勤学习，最佳实践不总是最佳，了解你的市场模式并知道如何满足你的用户。有任何问题可以 @drewhouston 来向 Drew 提问。<br />
<hr/>
<p>其实我个人还觉得 dropbox 有很多其他地方也可以为我们所参考：就如 Drew 所说搜索只能是寻找需求而不能创造需求，所以为用户提供 VoteBox 投票服务让用户来投票选择下一步该开发什么功能；还有就是专心的做自己的本职服务并提供更开放的 API 为其他应用如 QuickOffice 等提供云存储支持，如果是换做苹果公司我想没有这个魄力吧。 ^_^</p>
<p>至于为什麽要屏蔽 dropbox 让我很是不能理解，包括之前的 xMarks 还有 BlackRa1n 这些都让我们很不理解，如此优秀的云存储服务在国内不能使用，也难怪 <a href="http://www.williamlong.info/">月光博客</a> 如此淡定的人物都非常愤怒了！后面推荐几篇来自月光博客的评论文章：</p>
<blockquote><p>做为一个专业技术人员，有些事情我本不想提，我们惹不起，还躲不起吗？但事实证明我错了，它就像一个恶魔一样渗入到了你所有的工作和生活当中，它就在你周围，无所不在，干扰和妨碍你正常的工作、学习和生活，逃避是毫无意义的，因为我们实际上已经无路可逃，只能眼睁睁地看着工作和生活中最好用的工具都一个接一个无法使用，却无能为力，唯一的出路可能就是出国，用自己的脚来投票，离开这个国家，如果大家有条件的话，从现在开始就准备着离开这个令人窒息的铁笼子吧，像Google那样离开中国，只有这样，你才能自由的访问任何一个网站，把所有精力都放在自己的专业上，不必担心自己心爱的工具哪天是否会无法访问。</p></blockquote>
<p>dropbox 无法访问：<a href="http://www.williamlong.info/archives/2173.html">http://www.williamlong.info/archives/2173.html</a></p>
<p>纪念 dropbox 君：<a href="http://www.williamlong.info/archives/2174.html">http://www.williamlong.info/archives/2174.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1245/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【NEWS】美国白宫官方网站使用 Drupal 构建</title>
		<link>http://nan.im/blog/1142</link>
		<comments>http://nan.im/blog/1142#comments</comments>
		<pubDate>Tue, 27 Oct 2009 11:21:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[无聊日记]]></category>
		<category><![CDATA[CASE 案例]]></category>
		<category><![CDATA[Drupal]]></category>
		<category><![CDATA[NEWS 新闻资讯]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1142</guid>
		<description><![CDATA[上次给大家介绍了美国政府经济恢复网站 Recovery.Gov 使用了开源的 Drupal 构建，今天令广大 Drupaler 惊喜的是在准备了几个月之后，同样使用 Drupal 构建的美国白宫的官方网站 WhiteHouse 今天正式上线。 美国白宫官方网站 WhiteHouse.Gov 放弃了自布什政府以来一直在使用的非开源管理后台，改为使用凝聚数千开发人员心血的 Drupal 开源管理平台。在经济形势的压力下，政府也开始意识到启用开源系统相比非开源系统并不存在更大的风险而且具有一些显而易见的优势：免费、安全、丰富的技术支持等等。 开源的 Drupal 目前已经有约 410 人工年以上的开发时间，它在开发者方面已经有很深的根基，在全世界 Drupal 都拥有足够多的开发者社区进行开发与协作，下面简单的就 WhiteHouse 网站做一些表面的代码分析： 整体上看 WhiteHouse.ORG 应该是 Drupal 6.x 的版本，具体启用了哪些第三方模块还不容易看出； 从代码上容易看出主题放置在了 /sites/default/themes/whitehouse/ 目录这与之前的 Recovery.Gov 有所不同，相比之下 WhiteHouse.Gov 更符合我们的开发习惯； 样式表文件中开头使用了 margin:0; padding:0; 做初始化，这种方式虽然简单但在页面元素较多时将消耗大量浏览器资源，已经是不太推荐的做法了； 覆写了几乎全部的主题函数，甚至从 Contact 页面可以看出覆写了表单的一些函数； 暂时大概只看到了这些，没看到使用了哪些模块的迹象，有时间再仔细研究研究。有的时候真是看过这些 Drupal 站之后才知道原来 Drupal 是这么用的。]]></description>
			<content:encoded><![CDATA[<p>上次给大家介绍了美国政府经济恢复网站 <a href="http://anyliv.com/blog/944.html">Recovery.Gov</a> 使用了开源的 Drupal 构建，今天令广大 Drupaler 惊喜的是在准备了几个月之后，同样使用 Drupal 构建的美国白宫的官方网站 <a href="http://www.whitehouse.gov/">WhiteHouse</a> 今天正式上线。</p>
<p>美国白宫官方网站 WhiteHouse.Gov 放弃了自布什政府以来一直在使用的非开源管理后台，改为使用凝聚数千开发人员心血的 Drupal 开源管理平台。在经济形势的压力下，政府也开始意识到启用开源系统相比非开源系统并不存在更大的风险而且具有一些显而易见的优势：免费、安全、丰富的技术支持等等。<span id="more-1142"></span></p>
<p>开源的 Drupal 目前已经有约 410 人工年以上的开发时间，它在开发者方面已经有很深的根基，在全世界 Drupal 都拥有足够多的开发者社区进行开发与协作，下面简单的就 WhiteHouse 网站做一些表面的代码分析：</p>
<blockquote>
<p>整体上看 WhiteHouse.ORG 应该是 Drupal 6.x 的版本，具体启用了哪些第三方模块还不容易看出；</p>
<p>从代码上容易看出主题放置在了 /sites/default/themes/whitehouse/ 目录这与之前的 Recovery.Gov 有所不同，相比之下 WhiteHouse.Gov 更符合我们的开发习惯；</p>
<p>样式表文件中开头使用了 margin:0; padding:0; 做初始化，这种方式虽然简单但在页面元素较多时将消耗大量浏览器资源，已经是不太推荐的做法了；</p>
<p>覆写了几乎全部的主题函数，甚至从 Contact 页面可以看出覆写了表单的一些函数；</p>
</blockquote>
<p>暂时大概只看到了这些，没看到使用了哪些模块的迹象，有时间再仔细研究研究。有的时候真是看过这些 Drupal 站之后才知道原来 Drupal 是这么用的。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1142/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

