NeoEase

WordPress 插件更新: WP-EasyArchives 2.0

mg12 — Sun, 22 Aug 2010 23:03:03 +0800

今天狠下心将 WordPress 存档插件 Easy Archives 更新了. 这次修改是为了解决两个问题:
1. 插件会加载多余的 CSS 和 JS.
2. JavaScript 事件触发后移.

最近我在对博客进行优化, 包括去除多余 DOM 节点, 减少请求, JS 后移等等, 当我发现以前自己做的一些插件跟我的想法相违背, 就很想将它改掉. WP-EasyArchives 会在每个页面加载 CSS 和 JS, 其实只需要在 Archives 页面加载; 另外, JavaScript 事件都是以通过属性加在 HTML 代码里面的, 却应该用 JS 动态绑定. 是时候下刀了...

这次修改主要有以下内容:

1. 添加 "使用 CSS" 选项
因为主题样式各异, 插件自带的样式表未必能满足所有需求. 添加这个选项可以选择不用自带的 CSS, 而将样式写在 style.css 中, 便于修改样式, 也可以减少一个 CSS 请求.

2. 对两个小图标做 CSS sprite
减少一个请求数.

3. 后移 JavaScript 初始化至 DOM ready
减少 JS 对加载页面的影响.

4. 去除对 Widget 的支持, 并将参数设置迁移到博客后台
对这个插件来说, Widget 尴尬令其定位混乱, 这种信息压根不应该出现在侧边栏, 故去之.

5. 修复一些 bugs
用户刷新页面后, 年份和作者下拉框应该定位到第一个选项.
选择使用 WordPress 自带的 jQuery 库时, 没有加载该 JS 库.

这次对代码改动非常大, 发现 bug 请务必通知我, 我会尽快修复.

Echofon 一键发推骂 IE

mg12 — Tue, 17 Aug 2010 00:26:13 +0800

今天我改造了一下 Echofon (Twitterfox) 这个 Firefox 插件/扩展, 加上了一键发推骂 IE 的功能.

因为某个项目, 我对 IE 恨得咬牙切齿, 当时破口而出 "去他妈的 IE". 4 个月来, 我天天上推骂 IE, 没有理由, 但每次都心情舒畅. 期间我用 Twitter API 做了一个一键发推的页面, 但因为资源等问题我不能开放; 这次我修改了 Echofon 扩展, 点击按钮即发送 "去她妈的IE (cc @microsoft)", 没敢独自偷欢, 邀你同乐.

该扩展改自可能吧 @jason5ng32 的 Echofon 1.9.4 代理版. 为避免频繁收到更新通知, 我已经将版本号改成了 9.9.9. 扩展版权归插件原作者所有.

夜深恋睡, 不想多言, 使用方法请自行摸索, 下载地址如下.
http://www.boxcn.net/shared/g81vglbzq3

齐来 CC 微软, 去她妈的 IE, 也欢迎加入豆瓣小组和参与 Let's Kill IE 活动.

UCD 书友会 - 2010年8月杭州

mg12 — Mon, 16 Aug 2010 02:48:04 +0800

今天参加了 UCD China 在杭州的聚会. 第一次参加, 我甚至不知道 UCD 是以用户为中心的设计的意思. 耐不住周末独宅在家, 也忍受不了夏日炎炎, 本想过来凑凑热闹, 却是受益匪浅.

UCD 书友会聚会挪了地点, 赶到新址时话题已经展开一段时间. 话题是: 互联网产品设计软件及工具, 听得我那个一头雾水. 这里说的工具应该是产品原型设计和交互设计采用的方法和工具. 如何通过设计提前暴露项目存在的问题? 如何在高保真原型和紧急产品发布间取得平衡? 运营会以什么身份介入项目, 此时产品经理在扮演什么角色? 话题由产品设计工具聊到产品设计流程...

大家对设计流程都有很多想法, 后面的话题都是围绕这个来分享的. 其中有几个议题我印象比较深.

允许提出意见, 可以选择采纳或拒绝. 但需要明确回复是否采纳, 如果拒绝需说明原因.

一个人很难将问题想得特别透彻, 所以每个议案都会获得很多建议和质疑. 可以采纳, 也可以拒绝, 但关键是给出明确答复. 我也吃过这方面的亏, 某人向我提出意见, 我婉言拒绝, 但他认为我认同了, 并因为后来没有被采用而感到不爽. 其实无所谓采纳和拒绝, 关键是达成共识. 会议室内可以斗个你死我活, 但室外应该是口径一致的.

产品性质决定开发流程, 可以由不同特性的人来完成.

白鸦用百度知道和百度 Hi 来说明短交互和长交互对产品经理的不同要求, 产品属性的差异对开发流程有不同的要求. 我在想另一个问题: 前端能做些什么? 一般来说, 产品经理可以获取的业务数据和商业 sense 都在前端之上, 我们很难与之竞争资源. 但我们可以做一些他们无法触及的需求和项目, 比如通过优化代码提升页面效率, 减少开发量, 提高安全性, 甚至一些新技术的尝试.

用头脑风暴的方式罗列所有能想到的产品特性, 再分几段实施, 并明确各阶段要做哪些点.

我曾参加过的一个 PM 培训也有提及这个话题, 有一个原则: 不对任何建议给予评论, 只需 listing them. 对于新产品尤其有效, 将需求细化, 明确现在要做些什么, 以后会做成什么样.

将产品设计放在产品线上, 而不是在设计部门 YY.

可能工作环境和工作内容不同, 这条对于我们不适用. 前端被划分在某条产品线上可以为项目开发提供资源保证, 也就是减少项目风险. 但是前端之间透明度不够, 不能清楚知道其他前端同学都在做些什么, 容易迷失在网站的某个区块上; 更有甚者, 小黑屋里的前端死跟一两个项目, 与 "页面仔" 无异. 我们需要的不是简单地拼砌页面, 而是全面了解网站, 站在全站的角度提供有效的技术支持.

如何跨区域, 甚至跨国部门交流.

有位女生描述了他们公司与海外团队的交流方式, 你来我往地多次交流, 最后未达成共识产品就做好了. 海外规范严谨, 国内追求快速解决, 最后结果是做出来的产品与设计有很大差异. 我在外包公司呆过, 对这种跨洋交流深有体会, 主要抓住两点:
1. 信息平衡, 你需要了解对方需要什么? 也就是他真正想要的是什么.
2. 提供有效的, 但尽量少的选择 (个人建议不要超过 3 个), 列出来让对方选择或者回答 Yes/No. 而不是反复的讨论.

还有很多观点我也不能一一列举... 以上是我零碎的一些想法, 今天很多问题没想好, 聚会上没插上话, 所以睡前花点时间记录一下.

今天 UCD 都围绕产品交互和设计展开的讨论, 我一前端遇到很多未曾听闻的术语, 表示压力很大. 但是嘛... 什么都了如指掌就没必要来了, 我会继续参加的, 这次你说我听, 下次你听我说.

WordPress 评论 SEO

mg12 — Sat, 14 Aug 2010 20:13:23 +0800

虽然我不是专业 SEO, 但此前写过的一个关于 WordPress SEO 技巧的文章, 响应不错. 最近用 WordPress 做了一个留言板页面, 对评论的使用有过一些思考, 觉得也可以拿出来分享一下.

为什么需要评论?

网站内容保持更新是网站被爬虫持续关注的基本要素, spider 不会浪费资源长期守住那些 "死页面". 提供评论可以让页面存在活动迹象, 或者说这样做可以提升页面的活跃度.

对一个网站来说, 可以通过新文章或者其他活动来提高整站的活跃度. 但一个单页面的网站 (如: 留言板) 来说, 不更新网站内容, 利用评论来取得爬虫关注也算是一种省力的做法.

已经在前文说过如何利用 WordPress 制作留言板, 欢迎不知情的同学围观.

如何让爬虫对评论更新敏感?

可以利用 Google 提供的评论微格式方法来定义 DOM 节点, 以便搜索引擎处理.

对评论来说, 评论内容和发表评论的日期是最重要的. 评论内容最好与主题相关, 但这只能靠文章引导, 我们无法左右读者. 而评论时间建议采用 ISO 日期格式显示.

评论分页可能影响优化效果

很多人不愿意对评论分页, 因为评论是对文章的有利支撑, 无论是对读者还是对爬虫. 但是过多的评论会严重影响页面的加载时间. 搜索引擎和人都不会喜欢那些长时间无法加载完成的页面.

如何解决分页带来的负面影响?

我已经在《对评论分页的 SEO》一文中写过对评论分页的 SEO 处理.

其实我们可以再用点力, 把当前页面意外的其他评论页面入口全部 nofollow 掉. 很粗暴, 也很简单, 用如下代码输出评论分页导航.

<?
	if (get_option('page_comments')) {
		$comment_pages = paginate_comments_links('echo=0');
		if ($comment_pages) {
?>
	<div id="commentnavi" class="clearfix">
		<?php
			$comment_pages = str_replace('<a', '<a rel="nofollow"', $comment_pages);
			echo $comment_pages;
		?>
	</div>
<?php
		}
	}
?>

关于评论分页的使用方法及改进技巧, 我已经在 WP2.7 新增这个功能的时候写过一文: 《WordPress 的评论分页》

如果你不想修改分页导航, 或者不放心, 还可以选择另一种处理方法, 那就是使用 meta 标签. 可以在 header.php 文件中添加以下代码, 阻止爬虫爬取这些页面. (当然, 如果加上 canonical 指向文章页面, 效果会更好.)

<?php
	if( function_exists('get_query_var') ) {
		$cpage = intval(get_query_var('cpage'));
		if(!empty($cpage)) {
			echo '<meta name="robots" content="noindex, nofollow" />';
		}
	}
?>

最后, 我不建议为了 SEO 而 SEO. 为文章提供评论功能可以提升读者的积极性, 也是民主的体现, 爬虫不喜欢一成不变, 活人更不喜欢死气沉沉.

WordPress 留言板

mg12 — Wed, 11 Aug 2010 20:50:22 +0800

前段时间, 用 WordPress 为 UED 团队做了个招聘网页, 这说白了就是一留言板.

留言板包括两个部分, 即话题和评论. 话题部分可以是静态内容, 而评论需要借用 WordPress 的. 我们可以创建一个 page, 以 page 内容作为留言板话题, 并将该页面设为网站首页, 其他不可用链接全部转跳首页.

制作这个 WordPress 主题, 我们只需要 3 个文件: style.css, index.php, comments.php. 当 page.php 文件不存在时, page 会调用 index.php 作为它的模板. 以下是我的 index.php 文件内容.

<?php get_header(); ?>
 
留言板的话题和相关内容写在这里...
 
<?php 
	if(have_posts()) {
		the_post();
		comments_template('', true);
	}
 
	get_footer();
?>

可以看出, 还是要判断一下文章是否存在的, 倒不是为了显示文章内容, 这是为了给评论提供 $post 变量, 以便显示对应的评论. 留言板主题的其余部分与一般主题无异, 按需修改即可.

最后我们还需要为 WordPress 设置一下首页的映射, 进入后台 Setting -> Reading, Front page displays 选择 A static page, 并将 Front page 设为之前创建的 page. 如下图:

Okay, 大功告成! 是不是很简单? 下次再说说如何对这种页面做 SEO 吧.

保俶山之游

mg12 — Mon, 09 Aug 2010 22:11:06 +0800

上周六与 @Lucars, @tucanajoy 等一行五人到西湖的北边的保俶山一游. 有山有水有攀岩表演, 此行绝对超过期望...

阳光猛烈的时候我们在别致的山间小店 "纯真年代" 整装待发. (该店轻松雅致, 但是的奶茶却有欠水准)

在小店出来, 走两转阶梯就是人民币一元纸币背后的宝石山. (一元纸币后面还有三潭印月和断桥)

继续前行, 群石耸立, 或高或低. 我们登石望远, 白堤断桥尽收眼底.

傍晚时分下山觅食, 路过西湖边, 夕阳下的荷花很美.

@Lucars 抓起相机拍下我孤独的背影.

原计划上周末到临安农家乐, 奈何夏日天热, 唯恐有蛇来袭, 行程被取消, 去她妈的有蛇. 不过有保俶山一行已很满足. 最后感谢 @super_tina 推荐此山此行.

阿里巴巴国际站 UED 招聘

mg12 — Thu, 05 Aug 2010 21:06:01 +0800

加入阿里 UED 快一年了, 尽管团队不断扩大 (前端的人数已是一年前的 3 倍), 但我们从未停下来. 还有很多项目要完成, 还有很多想法要实现, 我们渴望优秀的交互, 前端, 视觉, 用研同学的加盟, 欢迎大家推荐或自荐.

招聘概要:
地点: 杭州阿里巴巴总部
学历: 不限, 作品和实力是你最好的证明
资历: 不限, 我们提供平台, 无论你是应届生还是设计专家
英文: 擅长是优势, 不擅长是提升空间, 不是障碍

招人特征:
大同 - 组织的内核要大同, 无论团队大小, 希望大家本性相近, 有共同的核
大异 - 基因库越大越好, 所以, 欢迎你带来挑战, 带来创新, 带来变异
Bottom-up - 网站人需要使命和方向, 不需要过多管理, 我的事我做主
Transparency - 透明就是力量, 举例: 2010 开始个人晋升报名评选全程公开

招聘岗位:
交互设计师, 视觉设计师, 前端工程师, 用户研究员

简历请至:
ke.suk@alibaba-inc.com (附件需小于 10MB)

招聘详情请访问以下页面:
阿里巴巴国际站 UED 招聘网站

随机排序广告

mg12 — Thu, 05 Aug 2010 16:15:03 +0800

博客流行在侧边栏放置 4 到 6 个 125x125 的广告, 但一般的摆放顺序存在问题. 如果广告位置被固定, 各个位置的天然关注度肯定是不一样的.

投放广告的人都很关注他的广告会放在哪个位置, 因为这可能影响点击次数, 甚至是否在第一屏显示. 就这个问题, 其实很容易解决, 只要随机显示广告即可.

代码如何实现? 在这我推荐两种随机显示广告的处理办法.

在后端处理

在后端排序好再输出页面. 将广告节点用数组存放, 对数组进行随机排序, 再输出经过排序的数组. 参考代码 (PHP) 如下:

// 用数组存放广告列表
$ads = array('<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>'
);
 
// 对数组进行随机排序
shuffle($ads);
 
// 输出经过排序的数组
$html = '';
foreach ($ads as $ad) {
	$html .= $ad;
}
echo $html;

我们来扩展一下, 如果我是站长, 预留了 4 个广告位, 但现在只有 3 个在投放; 我想在空置的广告位放置一个 "虚位以待" 的广告招租链接, 并显示在最后, 该如何处理呢? 在排序完成之后再插放广告招租链接就可以了.

// 用数组存放广告列表
$ads = array('<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>'
);
 
// 对数组进行随机排序
shuffle($ads);
 
// 输出经过排序的数组
$html = '';
foreach ($ads as $ad) {
	$html .= $ad;
}
 
// 添加广告招租链接
$html .= '<a href="#"><img src="sell-ad-125x125.png" alt="虚位以待" width="125" height="125" /></a>';
echo $html;

我就是用这个方法来输出 125x125 广告的, 因为它直观可靠, 处理方便. 但是如果你希望对页面做静态化, 建议选用 JS 随机排序的方法.

在前端处理

在后端按原有循序输出, 在页面通过 JavaScript 重新排序. 假设页面输出广告区域的 HTML 片段如下.

<div id="ads">
	<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>
</div>

我们可以通过 JS 来对广告进行重新排序. 参考代码如下:

<div id="ads" style="display:none;">
	<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>
</div>
<div id="random-ads" style="display:none;">
</div>
 
<script type="text/javascript">
//<![CDATA[
 
var source = document.getElementById('ads');
var target = document.getElementById('random-ads');
var ads = source.getElementsByTagName('a');
 
// 下标数组
var arr = new Array();
for(var i=0; i<ads.length; i++) {
	arr[i] = i;
}
 
// 随机排序
function randomSort(a, b){
	var tmp = parseInt((Math.random() + 0.5), 10);
	return tmp ? a-b : b-a;
}
 
// 将老的广告区的节点随机插放到新的广告区
arr.sort(randomSort);
for(var i=0; i<arr.length; i++) {
	target.appendChild(ads[arr[i]].cloneNode(true));
}
 
// 显示新的广告区和移除老的广告区
source.parentNode.removeChild(source);
target.style.display = 'block';
 
//]]>
</script>

如果有如同方法 1 那样的扩展需求, 将空广告位显示在最后, 且显示广告招租链接, 该如何处理? 这个当作课后习题吧...

六月西湖的荷花

mg12 — Mon, 19 Jul 2010 02:02:41 +0800

有一首关于荷花的诗, 我记得烂熟, 却总是想不住诗的名字.
毕竟西湖六月中, 风光不与四时同.
接天莲叶无穷碧, 映日荷花别样红.

周六我从钱塘江南来到苏堤, 再步行至曲院风荷 (因为堵车), 就为了一睹六月中的西湖荷花.

蜻蜓很给面子停在荷花蕾上, 我立刻抓拍了几张, 照片过曝了.

每朵开得正盛的荷花都有一两片枯掉的花瓣.

有些荷花孤开在万叶丛中, 在荷叶的点缀下娇柔清丽.

有些荷花开成一片, 争相斗艳.

接天莲叶无穷碧, 绿叶间有挺立的荷花.

你是否感受到我站在荷花池边, 被荷叶包围的感觉?

荷花就像天然艳丽的女子, 奈何与朋友有约, 不舍离去, 最后拍了一张含苞待放的荷花特写.

这次观花带上了 @tucanajoy 的 50/1.4 头, 表示感谢, 推荐 follow.

谷歌音乐搜索栏的提示功能

mg12 — Sun, 04 Jul 2010 22:35:51 +0800

我很喜欢在 google.cn/music 上找 mp3, 因为谷歌音乐在版权方面, 用户体验和搜索功能都做得很好. 但是它的搜索栏提示功能一直存在一个小问题, bug 存在半年以上了吧...

问题描述

在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:

导致原因

搜索栏的 JavaScript 初始化执行在 onload 的时候. 因为页面图片请求多, 完全加载需要 3 秒钟左右, 并且搜索栏的 tabindex 被设为 1, 搜索优先的用户很容易就能遇到.

以下是我根据自己的理解反编译出来的 JS 代码, 页面在 onload 的时候将会执行 m.hint.initHint 方法为搜索框添加提示功能.

/**
 * 为搜索框添加提示功能
 * @param searchTip		提示信息
 * @param searchBoxId	搜索输入框 ID
 * @param hideBoxId		关键字隐藏框 ID
 */
m.hint.initHint = function(searchTip, searchBoxId, hideBoxId){
	var searchBox = document.getElementById(searchBoxId);
	var hideBox = null;
	if(searchBox){
		if(hideBoxId) {
			hideBox = document.getElementById(hideBoxId);
		}
		l.events.listen(searchBox, "blur", l.bind(m.hint.onInputBlur, null, searchBox, hideBox), false);
		l.events.listen(searchBox, "focus", l.bind(m.hint.onInputFocus, null, searchBox, hideBox), false);
		if(hideBox){
			l.events.listen(searchBox, "change", bind(m.hint.onInputChange, null, searchBox, hideBox), false);
			hideBox.value = m.hint.getInputValue(searchBox);
		}
 
		// 在这里将搜索提示赋给临时变量
		m.hint.Gh[searchBox] = searchTip;
		// 如果搜索框存在, 则为搜索框加上临时变量和灰色字的 class
		m.hint.onInputBlur(searchBox);
	}
};
 
m.hint.onInputBlur = function(searchBox, hideBox) {
	m.hint.fi(searchBox);
	hideBox && m.hint.onInputChange(searchBox, hideBox);
};
 
m.hint.fi = function(searchBox) {
	if(searchBox) {
		var searchTip = m.hint.Gh[searchBox];
		if(searchTip && (searchBox.value.trim()=="" || searchBox.value==searchTip)) {
			searchBox.setAttribute(m.hint.IS_HINT, "1");
			searchBox.className += " hint";
			searchBox.value = searchTip;
		}
	}
};

解决办法

缩短搜索框 DOM 节点加载和 JavaScript 初始化之间的时间. 可以在搜索框加载完成后立刻执行 JS, 反正 Google 自己的产品也不需要 SEO. 当然, 最好在 DOM ready 的时候执行.

扩展知识

记得我写过一篇文章, 介绍如何在 WordPress 搜索框添加文字提示. 我的处理办法简单粗暴, 仅以框内关键字来判断是关键字还是提示信息. (所以我的提示信息很长)

在分析这个案例的过程中, 我发现 Google 的处理办法很好, 可以借鉴和使用. 它通过隐藏输入框来放置真正的搜索信息, 所以可以实现完全关键字和提示文案的区分.

后话

这个小问题已经困扰我很久了 (几乎每次遇到), 今天终于忍不住看了一下代码, 希望 Google 的工程师能够看到本文快速解决掉. (修改建议我都给出来了, 还不改也说不过去吧)

NeoEase

WordPress 插件更新: WP-EasyArchives 2.0

Related posts

Echofon 一键发推骂 IE

Related posts

UCD 书友会 - 2010年8月杭州

Related posts

WordPress 评论 SEO

为什么需要评论?

如何让爬虫对评论更新敏感?

评论分页可能影响优化效果

如何解决分页带来的负面影响?

Related posts

WordPress 留言板

Related posts

保俶山之游

Related posts

阿里巴巴国际站 UED 招聘

Related posts

随机排序广告

在后端处理

在前端处理

Related posts

六月西湖的荷花

Related posts

谷歌音乐搜索栏的提示功能

问题描述

导致原因

解决办法

扩展知识

后话

Related posts