<?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; CODE 代码</title>
	<atom:link href="http://nan.im/blog/tags/code/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>【开源项目】GoQR 行动二维码生成工具支持 Chrome iPhone 等</title>
		<link>http://nan.im/blog/1136</link>
		<comments>http://nan.im/blog/1136#comments</comments>
		<pubDate>Thu, 06 Jan 2011 17:00:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[数码硬件]]></category>
		<category><![CDATA[资源分享]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[iOS iPhone iTouch iPad]]></category>
		<category><![CDATA[JavaScript JS]]></category>

		<guid isPermaLink="false">http://anyliv.com/blog/?p=1136</guid>
		<description><![CDATA[如何把一些信息片段方便快捷的“发送”到手机是很多朋友比较麻烦和头疼的事情例如：在电脑上看见精彩的句子想用短信发给朋友；想用手机浏览在路边看到的一长串网址或拨打广告上的电话；看着名片上密密麻麻的字又找不到一款好用的名片扫描工具；又比如不习惯手机输入法想用电脑打字然后想粘贴到手机上发短信甚至邮件等等…… 或许你已经知道“GoogleSendToPhone”这个小插件但那只支持 Chrome 搭配 Android 手机而且需要网络支持；或许各种手机助手之类的软件可以但那需要安装驱动程序和软件等等。我希望能够有轻量级方便易用高效的方法，横跨多个平台的手段来实现我的目的，于是我利用“二维码”做为信息媒介制作了这个小工具 GoQR 行动二维码生成器，把二维码做为媒介把信息片段从电脑通过手机摄像头扫描到手机，其实目前也有很多这样的网站提供这种行动二维码生成服务但或许我可以做的更好… &#8230; 二维码生成器 GoQR 下载安装地址： Demo in PopWindow：PopupWindow（JavaScript）Beta1 &#8230; GoQR for Chrome：http://url.cn/4f4mwx（ChromeWebStore）Beta1 &#8230; GoQR for Mobile：http://anyliv.com/apps/goqr/（WebAPP）50% &#8230; GoQR for iPhone：http://anyliv.com/apps/goqr/（WebAPP）Beta1 &#8230; GoQR for Drupal：http://anyLiv.com/blog/1302（anyShare）0% &#8230; GoQR for WordPress：http://anyLiv.com/blog/1302（anyShare）99% &#8230; 基于 HTML5 + CSS3 构建暂不能支持所有浏览器和平台 ^_^ 二维码 是用某种特定的几何图形按一定规律在平面（二维）利用图形来记录数据的符号信息；可通过图象输入设备或光电扫描设备（如手机摄像头等）自动解码还原为数据以实现信息自动处理；二维码能在很小的面积内表达大量的信息并且具有识别率高抗干扰方便易用等特点；世界上常见的二维码标准有几十种，其中以日本的 QR（QuickResponse）和美国的 DM（DataMatrix）编码最为流行，目前 GoQR 只支持 QR 编码。 日本已经有 6000 万用户使用二维码，对二维码的认知度高达 96% 韩国的二维码业务也有近 [...]]]></description>
			<content:encoded><![CDATA[<p>如何把一些信息片段方便快捷的“发送”到手机是很多朋友比较麻烦和头疼的事情例如：在电脑上看见精彩的句子想用短信发给朋友；想用手机浏览在路边看到的一长串网址或拨打广告上的电话；看着名片上密密麻麻的字又找不到一款好用的名片扫描工具；又比如不习惯手机输入法想用电脑打字然后想粘贴到手机上发短信甚至邮件等等……</p>
<p>或许你已经知道“GoogleSendToPhone”这个小插件但那只支持 Chrome 搭配 Android 手机而且需要网络支持；或许各种手机助手之类的软件可以但那需要安装驱动程序和软件等等。我希望能够有轻量级方便易用高效的方法，横跨多个平台的手段来实现我的目的，于是我利用“二维码”做为信息媒介制作了这个小工具 GoQR 行动二维码生成器，把二维码做为媒介把信息片段从电脑通过手机摄像头扫描到手机，其实目前也有很多这样的网站提供这种行动二维码生成服务但或许我可以做的更好… &#8230;<span id="more-1136"></span></p>
<blockquote><p><img src="http://anyLiv.com/blog/wp-content/uploads/GoQR-demo.png" style="float:right; wight:100px; height:100px;"></p>
<h3>二维码生成器 GoQR 下载安装地址：</h3>
<p>Demo in PopWindow：<a href="javascript:window.open('http://anyLiv.com/apps/goqr/', 'newwindow', 'height=465, width=360, top=100, left=300, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')">PopupWindow</a>（JavaScript）Beta1 &#8230;</p>
<p>GoQR for <strong>Chrome</strong>：<a href="https://chrome.google.com/extensions/detail/conkjhkpamdkoemakgbomkhjnnoiabmd">http://url.cn/4f4mwx</a>（ChromeWebStore）Beta1 &#8230;</p>
<p>GoQR for <strong>Mobile</strong>：<a href="http://anyliv.com/apps/goqr/">http://anyliv.com/apps/goqr/</a>（WebAPP）50% &#8230;</p>
<p>GoQR for <strong>iPhone</strong>：<a href="http://anyliv.com/apps/goqr/mobile/GoQR-iOS.mobileconfig">http://anyliv.com/apps/goqr/</a>（WebAPP）Beta1 &#8230;</p>
<p>GoQR for <strong>Drupal</strong>：<a href="http://anyliv.com/blog/1302">http://anyLiv.com/blog/1302</a>（anyShare）0% &#8230;</p>
<p>GoQR for <strong>WordPress</strong>：<a href="http://anyliv.com/blog/1302">http://anyLiv.com/blog/1302</a>（anyShare）99% &#8230;</p>
<p>基于 HTML5 + CSS3 构建暂不能支持所有浏览器和平台 ^_^</p></blockquote>
<p><b>二维码</b> 是用某种特定的几何图形按一定规律在平面（二维）利用图形来记录数据的符号信息；可通过图象输入设备或光电扫描设备（如手机摄像头等）自动解码还原为数据以实现信息自动处理；二维码能在很小的面积内表达大量的信息并且具有识别率高抗干扰方便易用等特点；世界上常见的二维码标准有几十种，其中以日本的 QR（QuickResponse）和美国的 DM（DataMatrix）编码最为流行，目前 GoQR 只支持 QR 编码。</p>
<p>日本已经有 6000 万用户使用二维码，对二维码的认知度高达 96% 韩国的二维码业务也有近 2000 万用户，二维码生活成为他们的常态，我们可以通过二维码隐藏的一千多个字节而将信息无限地放大，也可以将生活的方式无限地延展。但国内只是近年才逐渐热闹起来，你或许记得新版火车票上的一坨方块图案对那就是二维码，只是中铁对其进行了私有算法所以我们无法获取上面的信息，但利用 GoQR 生成的二维码遵循国际标准，任何支持国际标准的二维码扫描软件都可以正确的解码，可能有些朋友可能不了解什么是“二维码”这里有个视频“<a href="http://player.youku.com/player.php/sid/XMjM0NDgyNzAw/v.swf" rel="shadowbox[sbpost-1136];width=800;height=600;">奥迪如何动员百名员工制造世界最大二维码</a>”演示了二维码的网址编码应用，视频中也可以发现即使是看似杂乱不整齐的二维码依然可以被手机很好的识别，另外这里有一张图片是 <a href="http://www.ifanr.com/wp-content/uploads/2011/03/qr-codes-480x1312.jpg" rel="shadowbox[sbpost-1136];player=img;">关于 QR 的七件事</a> 很有意思推荐阅读。</p>
<p>行动二维码生成器 GoQR 可以将更多种的信息片段转换为手机可轻易识别的二维码图像信息如：名片通讯录、短信、邮件、电话、网址、普通文本等等；然后在手机上使用专门的扫描软件利用手机摄像头即可轻松获取并解码这些信息，由于二维码有很高的容错性和识别率，所以使用非常方便，有了 GoQR 你就不必像奥迪那样动员近百人来制作二维码了 ^_^</p>
<p><center><a href="http://anyLiv.com/blog/wp-content/uploads/GoQR-Chrome.png" rel="shadowbox[sbpost-1136];player=img;" title="GoQR-Chrome"><img src="http://anyLiv.com/blog/wp-content/uploads/GoQR-Chrome-600x449.png" alt="" title="GoQR-Chrome" width="600" height="449" class="alignnone size-thumbnail wp-image-1340" /></a><br />GoQR for Chrome （<a href="https://chrome.google.com/webstore/detail/conkjhkpamdkoemakgbomkhjnnoiabmd">下载</a>）</center></p>
<h3>这里推荐一些常见手机平台上好用的二维码扫描识别工具：</h3>
<p><a href="http://redlaser.com/">RedLaser</a>：免费，目前支持 Apple iOS 及 Android 设备，速度较快，打开应用后点击下面的闪电按钮进行扫描，不支持短信的文本部分，该应用目前已被 eBay 收购；</p>
<p><a href="http://itunes.apple.com/app/id387433941">ScanIt</a>：免费，目前仅支持带摄像头的 iOS 设备，识别速度飞快，操作最方便，打开应用后直接扫描即启动相应功能，但不能识别出 vCard 名片和短信的文本部分；</p>
<p><a href="http://itunes.apple.com/app/id416098700">QrAfter</a>：免费，仅支持 iOS 设备，可以从摄像头和相册解码，识别速度也很快，甚至支持名片和短信内容的扫描，唯一的瑕疵是有广告；</p>
<p><a href="http://itunes.apple.com/app/id361843945">TapReader</a>：收费但隔三差五的免费，识别率和速度都不尽人意，要保持手机平稳并离二维码稍微远点会更容易识别，但该应用可以识别由 GoQR 生成的所有类型信息包括短信内容；</p>
<p><a href="http://www.google.com/mobile/goggles/">Google Goggles</a>：没错，万能的 Goggles 不仅能解数独 OCR 还可以识别二维码；</p>
<p>由灵动快拍开发的 “<a href="http://www.quickpai.mobi/">Quick拍</a>” 目前已经支持 Android 和 iPhone 平台也即将支持 Symbian 平台，该应用甚至可以扫描火车票上的二维码来验证真伪；另外台湾的 <a href="http://www.quickmark.tw/">QuickMark</a> 也提供了他的二维码扫描工具支持包括 iOS Android WinMobile 及 Symbian 在内的几乎全平台手机型号，但部分功能需要付费。</p>
<p>这里还有一些由 <a href="http://iapps.im/">iApps</a> 推荐的二维码扫描工具：<a href="http://www.iapps.im/archives/19389">http://www.iapps.im/archives/19389</a> 大家可以多尝试几个找出适合自己使用的；</p>
<p>虽然有部分中国移动定制的“心机”里面也预装了二维码扫描工具，但由于中国移动采用的私有标准所以对于 GoQR 生成的二维码并不能解读，而其他平台如 Android 的二维码软件我个人没有条件测试，大家有测试环境的话欢迎提供建议以帮助我改进 GoQR 这个小工具。</p>
<p>二维码生成器 GoQR 刚刚制作完成，编码过程中采用了 HTML5 的一些特性制作成了 WebAPP 应用，加载了几个较大的库首次启动会比较慢也不能兼容一些旧型号的手机，其二维码图片生成部分是基于 GoogleChartAPI 所以生成过程需要网络支持，还存在很多其他问题以后我会逐渐扩展平台支持功能敬请期待……</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1136/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>YQL &#8211; Yahoo! Query Language 以不变应万变的数据与内容获取方式</title>
		<link>http://nan.im/blog/1313</link>
		<comments>http://nan.im/blog/1313#comments</comments>
		<pubDate>Wed, 06 Oct 2010 01:14:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[JavaScript JS]]></category>
		<category><![CDATA[Yahoo! 雅虎]]></category>
		<category><![CDATA[YQL]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1313</guid>
		<description><![CDATA[Yahoo! 的开发者们总能一次又一次的带给我们惊喜，这次是 Yahoo! Query Language 雅虎查询语言（YQL）是由雅虎提供的一种类 SQL 语法，借助雅虎强大的云计算能力 YQL 仅使用一行或者几行代码就能够轻松的进行跨域跨服务的查询和过滤以获取内容和数据，而且速度也绝对让开发者满意。 举个例子是我可以用诸如（select * from flickr.photos.search where text=”apple” limit 9）的语句得到 flickr 上关于 apple 的 9 条数据，返回结果为 XML 或 JSON 而引用方法只是将以上语句做为参数即 URL 的一部分直接向 YQL 请求即可，当然看似与 xQuery GQL SimpleDB 等查询类似却潜力无限，试想既然可以拓展到跨域及跨服务，那么无论你需要地图支持、搜索支持、图片支持、天气甚至股票等等将均可以从 YQL 获取而不需要自己去学习一套又一套的私有接口，雅虎 YQL 为我们获取数据和内容提供了一个“以不变应万变”的中间层…… 雅虎 YQL 模型 YQL：http://developer.yahoo.com/yql/ YQL Guide：http://developer.yahoo.com/yql/guide/ YQL Console：http://developer.yahoo.com/yql/console/ 以上是雅虎 YQL 的模型及项目网站及手册和调试地址，随着 Web 2.0 服务的越来越多，各个网站所提供的开放 API [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://yahoo.com/">Yahoo!</a> 的开发者们总能一次又一次的带给我们惊喜，这次是 <a href="http://developer.yahoo.com/yql/">Yahoo! Query Language</a> 雅虎查询语言（YQL）是由雅虎提供的一种类 SQL 语法，借助雅虎强大的云计算能力 YQL 仅使用一行或者几行代码就能够轻松的进行跨域跨服务的查询和过滤以获取内容和数据，而且速度也绝对让开发者满意。</p>
<p>举个例子是我可以用诸如（select * from flickr.photos.search where text=”apple” limit 9）的语句得到 flickr 上关于 apple 的 9 条数据，返回结果为 XML 或 JSON 而引用方法只是将以上语句做为参数即 URL 的一部分直接向 YQL 请求即可，当然看似与 xQuery GQL SimpleDB 等查询类似却潜力无限，试想既然可以拓展到跨域及跨服务，那么无论你需要地图支持、搜索支持、图片支持、天气甚至股票等等将均可以从 YQL 获取而不需要自己去学习一套又一套的私有接口，雅虎 YQL 为我们获取数据和内容提供了一个“以不变应万变”的中间层……<span id="more-1313"></span></p>
<p><center><img src="http://anyLiv.com/blog/wp-content/uploads/YQL-Model.jpg" alt="" title="YQL-Model" width="577" height="217" class="aligncenter size-full wp-image-1317" /><br />雅虎 YQL 模型</center></p>
<blockquote><p>YQL：<a href="http://developer.yahoo.com/yql/">http://developer.yahoo.com/yql/</a></p>
<p>YQL Guide：<a href="http://developer.yahoo.com/yql/guide/">http://developer.yahoo.com/yql/guide/</a></p>
<p>YQL Console：<a href="http://developer.yahoo.com/yql/console/">http://developer.yahoo.com/yql/console/</a></p></blockquote>
<p>以上是雅虎 YQL 的模型及项目网站及手册和调试地址，随着 Web 2.0 服务的越来越多，各个网站所提供的开放 API 也越来越多，开发者如果需要借助这些 API 进行开发就必须重新学习及掌握这些 API 需要地图服务就得看看地图的 API 文档需要搜索支持就又得去学习搜索的 API 等学会了 Google 的又发现需要 Twitter 的，而雅虎 YQL 就为我们提供了解决这样一个问题的中间层，这对于开发人员特别是前端开发人员将意义重大，下面是来自阿里 UED 博客上的一个简单示例：</p>
<pre lang="html4strict" line="1">
<script>
function loveData(r){
	var results = r.query.results;
	alert(results);
}
</script>
<script src="http://query.yahooapis.com/v1/public/yql?q=select * from flickr.photos.search&#038;format=json&#038;callback=loveData"></script>
</pre>
<p>由于篇幅我隐掉了查询语句中的 where 和 limit 部分以帮助大家简单理解 YQL 的一种用法，在新版的 YUI 3.2 中已经加入了 YQL 的组件可以通过 YUI().use(&#8216;yql&#8217;, function(){}); 来直接进行调用，可以看得出来使用还是非常方便的，另外你甚至可以向 YQL 提供你自己的数据产品以拓展 YQL 的能力，一旦被 YQL 接纳，那么你的数据将会为千万开发者所用。</p>
<p>再举一个简单的例子：比如我想抓取某个网页的主要内容部分，很多人会采用正则按照特定的规则来摘取页面的 html 代码，但我是个极其喜欢偷懒的人，我希望直接抓出其在自己的 feed 里面的主要内容，通常在 feed content 里的内容都是某个页面的主要内容如下：</p>
<pre lang="sql" line="1">
SELECT * FROM feed
WHERE url IN (
    SELECT href FROM html
    WHERE url="http://anyLiv.com/blog/1313"
    AND xpath="//link[@type='application/rss+xml']" LIMIT 1
)
AND link = "http://anyLiv.com/blog/1313"
</pre>
<p>（<a href="http://y.ahoo.it/If7ZJaYJ">查看运行结果</a>）</p>
<p>我用了一个子 SELECT 来获取这个页面的 feed 地址，有点绕性能也不好但无所谓交给 Yahoo! 处理就好，因为在 YQL FEED 表里 url 是唯一的必选参数，所以我得先知道当前页面的 feed 地址是什麽然后再用地址去筛选一下获得页面的 content 还是相当方便的！</p>
<p>雅虎 YQL 查询语言通过提供类 SQL 语法消除了开发人员学习大量 API 的麻烦，节约了开发时间和学习成本，依托雅虎 YQL 的稳定和高效，使更多的开发者拥有无比强大的数据获取及计算能力，这将帮助我们更方便快捷高效的创造更多更好的互联网产品……</p>
<p>拓展阅读：<a href="http://www.aliued.cn/?p=2728">阿里 UED 关于 YQL 介绍</a></p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1313/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>如何创建一个 Chrome Apps 应用或扩展插件</title>
		<link>http://nan.im/blog/1287</link>
		<comments>http://nan.im/blog/1287#comments</comments>
		<pubDate>Thu, 08 Jul 2010 06:25:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[资源分享]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Cloud Computing 云计算]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Google 谷歌]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1287</guid>
		<description><![CDATA[目前很多硬件软件厂商都在积极构建在线网络应用商店其中当然包括苹果 谷歌 微软 中国移动 甚至魅族 等等，谷歌曾在 Google I/O 开发者大会上宣布已经有程序员在为 ChromeOS 操作系统和 Chrome WebStore 浏览器应用商店开发应用，谷歌一直都在致力于减少网页云应用与桌面应用之间的差别，而最新的开发版 Chrome 浏览器也已经内置了 ChromeApps 的功能，这里提供一些代码让你能够快速的构建一个最简单的 Hello World 浏览器应用，及如何向线上的 ChromeWebStore 提交你的应用或插件…… 开启谷歌 Google Chrome Apps 应用功能 目前即使是开发版本的 Google Chrome 仍需要添加启动参数 &#8211;enable-apps &#8211;apps-panel 来开启浏览器应用功能和一个类似 Windows 开始菜单功能的 Chrome Panel 新标签页面板。更新：目前 7.0 的开发版已经不需要额外的参数即可启用 apps 模式…… 随开发版 Chrome Dev 提供的几个 Google Apps 应用 目前的开发版中 Google 已经提供了三个 Chrome [...]]]></description>
			<content:encoded><![CDATA[<p>目前很多硬件软件厂商都在积极构建在线网络应用商店其中当然包括苹果 谷歌 微软 中国移动 甚至魅族 等等，谷歌曾在 Google I/O 开发者大会上宣布已经有程序员在为 ChromeOS 操作系统和 Chrome WebStore 浏览器应用商店开发应用，谷歌一直都在致力于减少网页云应用与桌面应用之间的差别，而最新的开发版 Chrome 浏览器也已经内置了 ChromeApps 的功能，这里提供一些代码让你能够快速的构建一个最简单的 Hello World 浏览器应用，及如何向线上的 ChromeWebStore 提交你的应用或插件……<span id="more-1287"></span></p>
<h3>开启谷歌 Google Chrome Apps 应用功能</h3>
<p>目前即使是开发版本的 Google Chrome 仍需要添加启动参数  &#8211;enable-apps &#8211;apps-panel 来开启浏览器应用功能和一个类似 Windows 开始菜单功能的 Chrome Panel 新标签页面板。更新：目前 7.0 的开发版已经不需要额外的参数即可启用 apps 模式……</p>
<h3>随开发版 Chrome Dev 提供的几个 Google Apps 应用</h3>
<p>目前的开发版中 Google 已经提供了三个 Chrome Apps 的源文件位于浏览器的安装目录下 \Chrome\Application\6.?.???.?\Resources\ 里面有三个 Apps 的源文件包括 Gmail 邮箱 Calender 日历 Docs 文档 三个谷歌云服务开启 ChromeApps 功能之后再扩展页面打开“开发人员模式”就可以使用“载入正在开发的扩展程序”来分别载入这三个示例 Apps 应用非常简单其实就是提供一个地址入口而已，但未来的扩展性则非常让人期待；</p>
<h3>开发一个简单的 Google Chrome Apps 应用</h3>
<p>既然提供了三个示例源程序，我们可以依葫芦画瓢般的制作一个属于自己的 ChromeApp 例如我经常使用的 GoogleReader 阅读器需要做的是准备一个小图标用于在应用选项卡上显示，准备一个 manifest.json 做为应用的入口清单至于 manifest.json 的语法可参考 Chrome 插件的开发文档或者随 Chrome 提供的几个示例应用例如：</p>
<pre lang="json" line="1">
{
  "name": "Google Reader", "version": "1",
  "icons": {"128": "128.png", "24": "24.png"},
  "permissions": [ "notifications" ],
  "app": {"launch": {"web_url": "https://www.google.com/reader/"}}
}
</pre>
<p>这样我的第一个 Hello World 式的 Chrome Apps 就制作好了，当然里面的地址可以是本地地址的也包括 JavaScript 和 CSS 这样看来制作浏览器应用的核心技术当然是 HTML + CSS + JavaScript 了最好是 HTML5 和 CSS3 使用 webkit 和 v8 的 Chrome 对于这两项新标准非常在行，哈哈这明显要比制作 Firefox 的插件要简单的多也更适合互联网工程师的参与要知道写 HTML 还是比写 C++ 的要多的多吧 ^_^ 下面看看截图的效果：</p>
<p><center><a href="http://anyLiv.com/blog/wp-content/uploads/GoogleChromeApps.jpg" rel="shadowbox[sbpost-1287];player=img;" title="GoogleChromeApps"><img src="http://anyLiv.com/blog/wp-content/uploads/GoogleChromeApps-400x191.jpg" alt="" title="GoogleChromeApps" width="400" height="191" class="aligncenter size-thumbnail wp-image-1288" /></a></center></p>
<p>应用的页面看起来和网页没什么区别，我们本来就是要减少两者的区别，这种开发模式当然可以拓展到 WebQQ 甚至是植物大战僵尸等等，其实微软早在很久以前就提供了以 hta 格式文件来运行 html 的应用《<a href="http://anyliv.com/blog/1237.html">如何利用 HTA 构建应用</a>》只是当时的云服务还远远不够成熟而且 hta 将很多东西都限制的很死板，而现在借助 HTML5 新加入的大量功能我们可以自由的实现很多有意思的浏览器应用包括游戏（如 <a href="http://www.google.com/pacman/">Google.com/PacMan</a> 等）更多开发资源可以访问 http://code.google.com/intl/en/chrome/apps/ Google Installable Web Apps 即谷歌可安装网页应用的项目页面……</p>
<p>一个 Chrome Apps or Extensions 开发完成之后是不是想分享给其他朋友使用，当然最好是提交到 <a href="https://chrome.google.com/extensions">ChromeWebStore</a> 线上应用商店供所有的 Chrome 用户使用，这里有一个视频详细描述了如何提交自己的 Chrome 应用及扩展到 Chrome线上商店，包括设置免费及付费模式，而且 ChromeWebStore 提供多种付费模式而非 AppleAppStore 那种单一的付费模式：</p>
<p>如何上传你的应用到 Chrome 线上商店：<a href="http://player.youku.com/player.php/sid/XMjAxMjUzNDUy/v.swf" rel="shadowbox[sbpost-1287];width=800;height=600;">How to upload your app to the Chrome Web Store</a></p>
<p>从视频中可以看出上传是非常方便的，而且期间可以通过选择已经通过 Google 站长工具验证过的网站来为插件打上验证标识。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1287/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【WP】如何添加新版 WordPress 菜单系统代码</title>
		<link>http://nan.im/blog/1271</link>
		<comments>http://nan.im/blog/1271#comments</comments>
		<pubDate>Sat, 19 Jun 2010 09:27:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CMS 内容管理系统]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1271</guid>
		<description><![CDATA[WordPress.org 昨天释放了 3.0 的正式版的更新，在新版 WordPress 中引入了一个新的系统 “MENU” 菜单系统 WP 的新菜单系统和 Drupal 及其他 CMS 的菜单系统功能基本相同但使用上更为方便也使 WordPress 在主题开发者和用户使用者直接建立了又一座友好的桥梁，下面提供一些代码给主题（theme）开发者尽快将你的主题升级开启（menu）菜单系统的支持…… 函数语法： Menus SubPanel：http://codex.wordpress.org/Appearance_Menus_SubPanel wp_nav_menu：http://codex.wordpress.org/Function_Reference/wp_nav_menu register_nav_menus：http://codex.wordpress.org/Function_Reference/register_nav_menus 组件模式： 考虑到目前绝大多数主题模板均不支持新版的菜单系统所以 WordPress 3.0 添加了一个专门为菜单系统使用的 Widget 小组件叫 CustomMenu 定制菜单，对于不支持新菜单系统的主题使用者仍然可以在后台 外观 &#8211; 菜单 页面创建一个新的菜单，然后使用 CustomMenu Widget 加载到页面的小组件区域显示，正式版加入的这个小组件使得目前所有的主题无需任何修改即可平滑的支持新版菜单系统，之前在 RC 版则需要为主题添加 add_theme_support(&#8216;nav-menus&#8217;) 语句才能开启菜单系统，但使用组件的缺点是显而易见的，使用者只能将菜单放置到小工具的位置以固定的结构显示，这个时候其实和之前的链接 Links Widget 小组件并没有什麽区别甚至可定制性更差，所以我们需要对主题模板做一些修改使其支持最新版的 WordPress 菜单系统。 菜单简介： 之前 WordPress 的链接功能虽然可以实现部分菜单的功能，因为我也发现很多主题开发者使用链接功能来使用户可以方便的定制自己的导航和菜单，在新版 WordPress 中则提供了更为自由和先进的菜单系统，就像我之前所说的他为主题开发者和模板使用者直接架起了又一座友好的桥梁，使开发者不用为了一个菜单或导航的变动而修改源代码，用户可以根据自己的情况随时 添加 删除 排序 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://wordpress.org/">WordPress.org</a> 昨天释放了 3.0 的正式版的更新，在新版 WordPress 中引入了一个新的系统 “MENU” 菜单系统 WP 的新菜单系统和 Drupal 及其他 CMS 的菜单系统功能基本相同但使用上更为方便也使 WordPress 在主题开发者和用户使用者直接建立了又一座友好的桥梁，下面提供一些代码给主题（theme）开发者尽快将你的主题升级开启（menu）菜单系统的支持……<span id="more-1271"></span></p>
<h3>函数语法：</h3>
<blockquote>
<p>Menus SubPanel：<a href="http://goo.gl/f7Gk">http://codex.wordpress.org/Appearance_Menus_SubPanel</a></p>
<p>wp_nav_menu：<a href="http://goo.gl/rcrE">http://codex.wordpress.org/Function_Reference/wp_nav_menu</a></p>
<p>register_nav_menus：<a href="http://goo.gl/RUmG">http://codex.wordpress.org/Function_Reference/register_nav_menus</a></p>
</blockquote>
<h3>组件模式：</h3>
<p>考虑到目前绝大多数主题模板均不支持新版的菜单系统所以 WordPress 3.0 添加了一个专门为菜单系统使用的 Widget 小组件叫 CustomMenu 定制菜单，对于不支持新菜单系统的主题使用者仍然可以在后台 外观 &#8211; 菜单 页面创建一个新的菜单，然后使用 CustomMenu Widget 加载到页面的小组件区域显示，正式版加入的这个小组件使得目前所有的主题无需任何修改即可平滑的支持新版菜单系统，之前在 RC 版则需要为主题添加 add_theme_support(&#8216;nav-menus&#8217;) 语句才能开启菜单系统，但使用组件的缺点是显而易见的，使用者只能将菜单放置到小工具的位置以固定的结构显示，这个时候其实和之前的链接 Links Widget 小组件并没有什麽区别甚至可定制性更差，所以我们需要对主题模板做一些修改使其支持最新版的 WordPress 菜单系统。</p>
<h3>菜单简介：</h3>
<p>之前 WordPress 的链接功能虽然可以实现部分菜单的功能，因为我也发现很多主题开发者使用链接功能来使用户可以方便的定制自己的导航和菜单，在新版 WordPress 中则提供了更为自由和先进的菜单系统，就像我之前所说的他为主题开发者和模板使用者直接架起了又一座友好的桥梁，使开发者不用为了一个菜单或导航的变动而修改源代码，用户可以根据自己的情况随时 添加 删除 排序 层级 排列菜单系统，更可以直接在后台页面设置一些菜单属性如 打开方式 菜单描述 链接关系 等等，而这一切只需要添加很少的代码即可实现……</p>
<h3>基本运用：</h3>
<p>例如，我们在 WP 后台的 外观 &#8211; 菜单 页面添加了一个新的菜单其名称为 “菜单示例” 然后在主题模板中就可以使用 wp_nav_menu(&#8216;menu&#8217; => &#8216;菜单示例&#8217;) 来直接调用这个菜单不过具体操作中尽量不要使用中文，因为默认该函数会以菜单名称做为 class 或者 id 的一部分，虽然可以使用参数 container_class 来覆写最外层的 class 但下一级的 ul 仍会引用菜单名称为 id 的一部分。</p>
<h3>高级应用：</h3>
<p>但显然该方式并不灵活，因为我们的开发者需要告知用户创建菜单的名称是什麽，双方必须有一个约定期间如果有任何差别菜单都不会被正确的显示，这可不是我们所需要的于是更高级的应用则是使用 register_nav_menus 函数为主题注册一个菜单位置（Theme Locations）然后由用户来觉得将哪个菜单什么样的菜单放置到这个主题位置中去，这有点类似 drupal 中的区块（block）概念，这是一个平滑友好的接口：</p>
<p>首先，需要在主题中注册声明菜单位置：需要在你的主题模板 functions.php 中添加一个新的注册语句 register_nav_menus 该函数接收一个数组参数做为注册的菜单项，例要添加两个菜单一个用于导航一个用于页脚链接如 register_nav_menus(array(&#8216;topMenu&#8217; => &#8216;导航&#8217;, &#8216;subMenu&#8217; => &#8216;页脚&#8217;)) 其中参数数组的下标用于在内部程序调用数组内容则显示给后台用户，添加该语句之后就可以在后台 外观 &#8211; 菜单 界面看到 Theme Locations 选择区块了，里面也可以看到我们新添加的这两个菜单位置一个叫导航另一个页脚；</p>
<p>然后，需要在主题模板文件中调用菜单：开发者可根据自己的需求在需要显示菜单的位置使用 wp_nav_menu 函数调用输出由用户自行配置的菜单如要输出导航位置的菜单可使用 wp_nav_menu(array(&#8216;theme_location&#8217; => &#8216;topMenu&#8217;)) 使用参数 theme_location 来指定前面声明的菜单位置，这样就建立了一个很好的中间层帮助用户和开发者处理菜单链接的问题。</p>
<h3>补充说明：</h3>
<p>另外 wp_nav_menu 也支持很多参数可供调用如：参数 container_id 和 container_class 用来定义输出的菜单外层标签属性；参数 container 用来定义菜单外层的 HTML 标签类型如 div 等等；参数 menu_id 和 menu_class 可用来定义菜单 ul 的 class 属性；参数 echo 可控制返回 return 还是直接输出我觉得 WP 的多数函数都应该添加该参数或者都改为 return 返回方式就像 drupal 一样返回值而不是输出；另外还有很多参数可从本文开头提供的链接查询。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1271/feed</wfw:commentRss>
		<slash:comments>1</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>【Drupal】删除及隐藏 node form 表单中的一些栏目</title>
		<link>http://nan.im/blog/1253</link>
		<comments>http://nan.im/blog/1253#comments</comments>
		<pubDate>Thu, 03 Jun 2010 16:09:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Drupal]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1253</guid>
		<description><![CDATA[在 Drupal 默认的 node-form 内容录入表单除了已经有 标题 内容 以外还有一些不常使用的栏目如：日志 版本 菜单 等平常并不容易用到，但一大堆栏目出现在 node-form 表单中对用户来说会显得不大友好，这里提供一些代码可以去掉或隐藏掉一些平常不会用到的 node 表单栏目如 Revision information 栏目 Authoring information 栏目 Publishing options 栏目等等： 用于隐藏 node-form 表单的代码需要放置于主题的 template.php 文件中： // node-form for Drupal 5.x ... function phptemplate_node_form($form) { $form['log']['#access'] = FALSE; $form['menu']['#access'] = FALSE; return $form; } // node-form for Drupal 6.x ... function phptemplate_node_form($form) [...]]]></description>
			<content:encoded><![CDATA[<p>在 Drupal 默认的 node-form 内容录入表单除了已经有 标题 内容 以外还有一些不常使用的栏目如：日志 版本 菜单 等平常并不容易用到，但一大堆栏目出现在 node-form 表单中对用户来说会显得不大友好，这里提供一些代码可以去掉或隐藏掉一些平常不会用到的 node 表单栏目如 Revision information 栏目 Authoring information 栏目 Publishing options 栏目等等：<span id="more-1253"></span></p>
<p>用于隐藏 node-form 表单的代码需要放置于主题的 template.php 文件中：</p>
<pre lang="php" line="1">
// node-form for Drupal 5.x ...
function phptemplate_node_form($form) {
	$form['log']['#access'] = FALSE;
	$form['menu']['#access'] = FALSE;
	return $form;
}

// node-form for Drupal 6.x ...
function phptemplate_node_form($form) {
	$form['menu_settings']['#access'] = FALSE;
	$form['revision_information']['#access'] = FALSE;
	return $form;
}
</pre>
<p>上面代码分别被用于 Drupal5 和 Drupal6 其实只是表单的 name 做了一些变化，需要注意的是有些表单元素是不可以设置其 access 为 false 的例如 Publishing options 就不可以一旦 Publishing options 被设置 access false 的话会导致节点默认的 Published 或是 Promoted to front page 值为空从而使节点不能被正常显示，要隐藏 Publishing options 除使用访问控制（User Access）设置以外还可以使用 CSS 将涉及节点管理功能的几个栏目隐藏也可以达到效果，具体可以在你的主题 CSS 中添加 #node-form .admin { display:none; } 即可实现隐藏节点管理的几个表单栏目并且不影响表单提交功能。</p>
<p>其实利用主题函数覆写还可以实现将几个提交按钮（button）与表单内容相分离的效果，例如设计师需要将整个表单栏目部分添加修饰而为 提交 预览 等几个按钮做单独的修饰，这个时候就可以用上面的主题覆写函数使用 drupal_render($form['submit']) 单独获得按钮元素用来输出。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1253/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【Drupal】简化 WYSIWYG 编辑器的图片上传操作</title>
		<link>http://nan.im/blog/1252</link>
		<comments>http://nan.im/blog/1252#comments</comments>
		<pubDate>Tue, 01 Jun 2010 14:14:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Drupal]]></category>
		<category><![CDATA[JavaScript JS]]></category>
		<category><![CDATA[User Experience 用户体验]]></category>
		<category><![CDATA[W3C Behavior 行为层]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1252</guid>
		<description><![CDATA[虽然 Drupal WYSIWYG 所见即所得模块非常之强大，为超过 10 种流行的网页编辑器提供与 Drupal 结合的中间层，但其实很多时候我发现项目站点的需求并没有那么多，很多时候我们只需要一个简单的网页编辑器加上简单的图片或文件上传功能即可，但在 Drupal 中似乎并不容易实现这些需求，出于安全等因素的考虑多数编辑器如 FckEditor TinyMCE 等其图片上传工作除 WYSISYG 模块外还需要 IMCE 模块来提供中间层支持，而 IMCE 繁琐的上传步骤不单让我们自己头疼也使绝大多数用户在使用 IMCE 上传图片时觉得繁琐，我自己粗略回忆一下至少还需要约 8 次鼠标点击才能在编辑器里面看到上传的图片这是非常不利于用户体验的，下面提供一些方法和代码可以大大减少上传图片的点击步骤简化上传图片和文件的操作 下面提供的方法仅针对 Drupal 5.x 另外对于 Drupal 6.x 可使用新版的 ckEditor 做类似修改也很容易实现，另外下文提到的 fckEditor 模块是指从 drupal.org 下载的模块文件而 fckEditor 编辑器是指从 ckEditor.com 下载的编辑器文件，读者需要仔细阅读区分： 1、下载模块：如果项目中只需要一种编辑器就足够，而且也并不需要 IMCE 来管理每个用户的文件，我们就可以不使用 WYSIWYG IMCE 这两个功能过于强大的模块了，只需要下载并启用 fckEditor 一个模块即可，具体安装方法不再详述在 fckEditor module for drupal 这里有详细的描写，要点是要将下载的 fckEditor 编辑器放置到相应 [...]]]></description>
			<content:encoded><![CDATA[<p>虽然 Drupal <a href="http://drupal.org/project/wysiwyg">WYSIWYG</a> 所见即所得模块非常之强大，为超过 10 种流行的网页编辑器提供与 Drupal 结合的中间层，但其实很多时候我发现项目站点的需求并没有那么多，很多时候我们只需要一个简单的网页编辑器加上简单的图片或文件上传功能即可，但在 Drupal 中似乎并不容易实现这些需求，出于安全等因素的考虑多数编辑器如 FckEditor TinyMCE 等其图片上传工作除 WYSISYG 模块外还需要 IMCE 模块来提供中间层支持，而 IMCE 繁琐的上传步骤不单让我们自己头疼也使绝大多数用户在使用 IMCE 上传图片时觉得繁琐，我自己粗略回忆一下至少还需要约 8 次鼠标点击才能在编辑器里面看到上传的图片这是非常不利于用户体验的，下面提供一些方法和代码可以大大减少上传图片的点击步骤简化上传图片和文件的操作<span id="more-1252"></span></p>
<blockquote><p>下面提供的方法仅针对 Drupal 5.x 另外对于 Drupal 6.x 可使用新版的 <a href="http://drupal.org/project/ckeditor">ckEditor</a> 做类似修改也很容易实现，另外下文提到的 fckEditor 模块是指从 drupal.org 下载的模块文件而 fckEditor 编辑器是指从 ckEditor.com 下载的编辑器文件，读者需要仔细阅读区分：</p></blockquote>
<p>1、<strong>下载模块</strong>：如果项目中只需要一种编辑器就足够，而且也并不需要 IMCE 来管理每个用户的文件，我们就可以不使用 WYSIWYG IMCE 这两个功能过于强大的模块了，只需要下载并启用 <a href="http://drupal.org/project/fckeditor">fckEditor</a> 一个模块即可，具体安装方法不再详述在 <a href="http://drupal.org/project/fckeditor">fckEditor module for drupal</a> 这里有详细的描写，要点是要将下载的 fckEditor 编辑器放置到相应 fckEditor module 模块目录之下，然后就可以进行下面的修改操作了；</p>
<p>2、<strong>开启上传</strong>：默认的 fckEditor 模块需要搭配 IMCE 才可以实现图片的上传功能，这里需要做一些修改来开启 fckEditor 编辑器内置的 FileManager 来负责上传操作从而代替 IMCE 模块，具体修改方法在 fckEditor 模块下面的 README.txt 也有详细的说明我这里简单翻译一下要点步骤。在编辑器中的 /modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php 文件中添加一句代码 require_once “../../../../../filemanager.config.php”; 加到最前面即可然后设置该文件后面的 $Config['Enabled']=true; 还要设置 $Config['UserFilesAbsolutePath']=&#8217;files&#8217; 该值为你的文件上传目录对于 Drupal5 通常是 files 需要注意是该目录为相对于站点根路径的目录，修改之后即可在 Drupal 的 admin/settings/fckeditor 中配置 file browser settings 了非常方便；</p>
<p>3、<strong>优化交互</strong>：照上面修改之后就可以只使用 fckEditor 一个模块来负责编辑器和文件上传功能，但我的用户在使用之后仍然觉得有些繁琐体现在，多数情况下用户都在上传新的图片，而点击编辑器的图片按钮出现的却是“图像属性”和“浏览服务器”上传功能，这会无形中引导用户走向类似 IMCE 的操作方式（<a href="http://drupal.fckeditor.net/comment/reply/1#comment-form">看这里</a>）所以最简单的修改是将“上传”选项卡移至首选功能具体需要修改 fck_image.js 文件中将 dialog.AddTab(&#8216;Upload&#8217;,FCKLang.DlgLnkUpload) 连同前面的 if 语句拿到 dialog.AddTab(&#8216;Info&#8217;,FCKLang.DlgImgInfoTab) 语句之前然后在后面的 window.onload 函数中写入一句 OnDialogTabChange(&#8216;Upload&#8217;) 即可实现窗口启动时自动切换到“文件上传”功能以减少点击和误导，具体文件位置比较深自己搜索一下；</p>
<p>4、<strong>再次优化</strong>：如此修改之后上传文件已经变的相对容易了，但有用户仍反应是否可以在选择文件之后直接触发上传而不用再点“上传到服务器”呢我估计是受了 swfUpload 的影响，当然这也很容易解决需要修改上面同一位置的 fck_image.html 文件中文件选择框 input id=”txtUploadFile” onChange=”document.getElementById(&#8216;btnUpload&#8217;).click()” 添加一个事件即可具体是在 file 选取之后由程序触发上传按钮，当然事件改为 this.form.submit() 也是可以的，但那样就没有上传动画了。</p>
<p>5、<strong>进阶优化</strong>：经过上面这些修改已经基本可以满足目前我的用户需求了，但这里其实可以拓展一下例如还可以将 upload 表单和 image info 表单放到同一个弹出层里面类似腾讯在某些页面的编辑器，这样就可以一劳永逸的解决所有问题，我这里就不提供修改方法了读者可以自己摸索一下。</p>
<p>开源程序的优点就是他的任何内容你都可以看到并可以根据自己的需求修改，这也是我喜欢 HTML CSS JavaScript 喜欢 Drupal WordPress 的原因之一，我知道有人会觉得 Image Assist 模块也会比较容易上传但 Image Assist 每上传会占用一个新的 node 这与 WordPress 的上传机制类似，我个人并不太喜欢，如果你有其他更高明的方法欢迎分享一下！！</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1252/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>【Drupal】后台 PHP 与前端 JavaScript 之间的数据传递</title>
		<link>http://nan.im/blog/1251</link>
		<comments>http://nan.im/blog/1251#comments</comments>
		<pubDate>Mon, 24 May 2010 14:17:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Develop 开发]]></category>
		<category><![CDATA[Drupal]]></category>
		<category><![CDATA[JavaScript JS]]></category>
		<category><![CDATA[Module]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1251</guid>
		<description><![CDATA[在 Drupal 模块或主题开发中经常会有需要传递一些值给 JavaScript 的情况，大概有几种方法一是可以直接在模板里面写 JavaScript 然后嵌 PHP 进去，也可以用 Drupal 的接口直接输出 JavaScript 到页面的 head 信息中去，其实我自己之前一直是直接在模板里面写 JS 嵌套 PHP 的，后来发现 Drupal 现有的 drupal_add_js 提供了传递变量的接口具体如下…… 下面是简单的实现步骤，目的是传递 drupal 的 basePath 给 JavaScript 使用，当然这在 Drupal6 中是已经默认传递的，大家可以举一反三来使用： //首先是在模块文件或者是主题的 template 文件中加入如下代码： drupal_add_js(array('basePath' => $GLOBALS['base_path']), 'setting'); //然后你会发现在页面的 script 输出部分会有以下信息输出： Drupal.extend({ settings:{"basePath": "/drupal/"} }); //这样你就可以在页面引入的 JavaScript 文件中直接调用该对象了如： alert(Drupal.settings['basePath']); 非常方便主要起作用的是 drupal_add_js 的第二个参数 setting 他告诉 [...]]]></description>
			<content:encoded><![CDATA[<p>在 Drupal 模块或主题开发中经常会有需要传递一些值给 JavaScript 的情况，大概有几种方法一是可以直接在模板里面写 JavaScript 然后嵌 PHP 进去，也可以用 Drupal 的接口直接输出 JavaScript 到页面的 head 信息中去，其实我自己之前一直是直接在模板里面写 JS 嵌套 PHP 的，后来发现 Drupal 现有的 drupal_add_js 提供了传递变量的接口具体如下……<span id="more-1251"></span></p>
<p>下面是简单的实现步骤，目的是传递 drupal 的 basePath 给 JavaScript 使用，当然这在 Drupal6 中是已经默认传递的，大家可以举一反三来使用：</p>
<pre lang="php" line="1">
//首先是在模块文件或者是主题的 template 文件中加入如下代码：
drupal_add_js(array('basePath' => $GLOBALS['base_path']), 'setting');

//然后你会发现在页面的 script 输出部分会有以下信息输出：
Drupal.extend({ settings:{"basePath": "/drupal/"} });

//这样你就可以在页面引入的 JavaScript 文件中直接调用该对象了如：
alert(Drupal.settings['basePath']);
</pre>
<p>非常方便主要起作用的是 <a href="http://api.drupal.org/api/function/drupal_add_js/">drupal_add_js</a> 的第二个参数 setting 他告诉 drupal 系统这段 js 是设置类型的数组，其他使用方法请访问 drupal 的线上 api 函数手册。其实在只传递一个变量时这种方法带来的优势并不明显，但如果有若干个模块需要传递多个变量给 JavaScript 的时候 drupal_add_js 函数会自动将他们合并到一起在页面头部输出，只调用一个 Drupal.extend() 方法为 Drupal 对象增加额外的值，也希望大家在写模块或模板的时候尽量遵循 Drupal 提供给我们的现有的 api 这将让你的工作事半功倍同时也让你的项目更容易维护代码更具有可读性。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1251/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>【Drupal】中使用 check_plain 和 t 函数来安全处理字符</title>
		<link>http://nan.im/blog/1232</link>
		<comments>http://nan.im/blog/1232#comments</comments>
		<pubDate>Sun, 02 May 2010 14:04:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[网站前端]]></category>
		<category><![CDATA[CODE 代码]]></category>
		<category><![CDATA[Drupal]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Theme Template 主题模板]]></category>

		<guid isPermaLink="false">http://anyLiv.com/blog/?p=1232</guid>
		<description><![CDATA[从事 Drupal 模块开发特别是主题开发中会经常需要输出或者调用一些文本或字符，但如果是不信任来源的字串如开放给任意用户使用的一些输入等等，这类不信任的字串在输出或使用时请不要大意，未经过滤的不信任字符将给你的项目带来巨大的隐患，好在 Drupal 为我们提供了一个 check_plain 及用于翻译的 t 函数用来优雅的处理这类问题。 关于这两个函数的基本用法可以参考 api.drupal.org 的官方介绍： t()：http://api.drupal.org/api/function/t/6 check_plain()：http://api.drupal.org/api/function/check_plain/6 当开发者对于即将使用或输出字串不信任的时候可以使用 check_plain 来安全优雅的过滤掉不安全代码，下面是一些简单的示例及说明，其中 drupal_set_message 是用于向 Drupal 前端返回一段信息的函数，我这里假定 $tText 为来自不信任来源的一段字串，而使用 t 函数的原因是我们需要输出的这段字串可以被翻译： 1、首先是一些未采取任何措施的信息调用及输出： echo t(&#8216;Some Text For Testing&#8217;); //未包含不信任变量时该方法安全； echo t(“Some $testText For Testing”); //一旦包含不信任内容则不安全； 2、然后我们可以使用 check_plain 来处理不信任的字串如下： echo check_plain($testText); echo t(&#8216;Some&#8217;),check_plain($testText),t(&#8216;For Testing&#8217;); //当然你也可以再 t 一次但事情就变的复杂了； 3、但如此输出的直接结果便是来自用户的字串 testText 无法被翻译，好在 Drupal 的 t [...]]]></description>
			<content:encoded><![CDATA[<p>从事 Drupal 模块开发特别是主题开发中会经常需要输出或者调用一些文本或字符，但如果是不信任来源的字串如开放给任意用户使用的一些输入等等，这类不信任的字串在输出或使用时请不要大意，未经过滤的不信任字符将给你的项目带来巨大的隐患，好在 Drupal 为我们提供了一个 check_plain 及用于翻译的 t 函数用来优雅的处理这类问题。<span id="more-1232"></span></p>
<p>关于这两个函数的基本用法可以参考 api.drupal.org 的官方介绍：</p>
<p>t()：http://api.drupal.org/api/function/t/6</p>
<p>check_plain()：http://api.drupal.org/api/function/check_plain/6</p>
<p>当开发者对于即将使用或输出字串不信任的时候可以使用 check_plain 来安全优雅的过滤掉不安全代码，下面是一些简单的示例及说明，其中 drupal_set_message 是用于向 Drupal 前端返回一段信息的函数，我这里假定 $tText 为来自不信任来源的一段字串，而使用 t 函数的原因是我们需要输出的这段字串可以被翻译：</p>
<p>1、首先是一些未采取任何措施的信息调用及输出：</p>
<p>echo t(&#8216;Some Text For Testing&#8217;);      //未包含不信任变量时该方法安全；</p>
<p>echo t(“Some $testText For Testing”);      //一旦包含不信任内容则不安全；</p>
<p>2、然后我们可以使用 check_plain 来处理不信任的字串如下：</p>
<p>echo check_plain($testText);</p>
<p>echo t(&#8216;Some&#8217;),check_plain($testText),t(&#8216;For Testing&#8217;);      //当然你也可以再 t 一次但事情就变的复杂了；</p>
<p>3、但如此输出的直接结果便是来自用户的字串 testText 无法被翻译，好在 Drupal 的 t 函数使用 @ 占位符为我们提供了另外一种方式来确保安全：</p>
<p>echo t(&#8216;Some @testText For Testing&#8217;, array(&#8216;@testText&#8217; => $testText));      //使用这种格式将非常利于翻译人员操作；</p>
<p>当然这里还可以使用其他一些占位符例如 % 和 ! 等等以实现不同的需求如添加 html 代码或者跳过 check_plain 等等，具体可参考 api.drupal.org 上关于 t 函数的一些用法示例，由于 Drupal 里很多函数都已经内置了 check_plain 操作如常用的 l 函数等等所以 ! 占位符也会经常被用到，当然如果 l 函数的 html 属性为 true 时创建链接还是需要过滤的。最后需要补充的是前面所做的努力需要一个前提就是信任的翻译，否则即使代码上无懈可击如果在翻译上出了问题也是很让人头疼的。</p>
]]></content:encoded>
			<wfw:commentRss>http://nan.im/blog/1232/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

