主机点评网介绍

主机点评网 (Hostucan) 来自美国, 通过主机搜索和主机用户提供的点评信息, 帮助更多需要主机服务的站长找到最好最适合的主机空间产品.

中国有中国的特色, 除了直接的主机服务商还是很多 IDC 服务, 所以主机点评网创建了他们在中国的网站, 并且搜录各个主机和空间服务商, 收集用户点评.

主机搜索和点评

主机点评网覆盖了很多主机, 基本上你能想到和不能想到的主机信息都可以找到. 这不, 我的老友胡戈戈的戈戈主机已经被收录, 并出现在主机点评网首页了. 无论你是主机服务商还是主机用户, 也可以提交自己的主机.

对主机用户来说, 最有价值的莫过于主机的点评信息. 而上面的信息都是真实的评论, 有一定参考价值. 当然, 作为 3 年的 MT 用户, 我也评了一下 MT 主机; 而因为自己准备买 Linode, 也看了这个主机相关的评论.

点评主机换监控

因为从美国到中国, 服务对象不一样, 用户习惯有异, 点评信息也会主要采用中文站长的点评. 为了刺激用户留下评论, 现在用户点评主机即可换取半年的网站监控.

我也通过点评换取了监控服务, 试用两个星期, 效果还是不错的. Hostucan 会在各个布点收集数据以图形化方式向用户展示网站的访问成功率和打开速度. 而它的特点是在国内外多个地方有布点, 用户可以自主选择某一地区的服务器来监控你的主机. 上图是我的网站在电信和联通中的表现.

当然, 如果你愿意. 点评后不要监控服务, 可以领取 10 元人民币作为报酬.

总结

主机点评网还有很多主机相关的功能, 这就不一一列出. 但我觉得最有价值的还是网站收集的点评信息对用户都买主机时的指引作用. 还有监控服务, 虽然功能不多, 但是长期检测网站是很有必要的, 起码可以知道网址在各种线路中的表现和状态如何.

• 自助建站平台 - Tap.cn
• UML 工具: ArgoUML
• 用 me.alipay.com 制作我的支付宝捐款页面
• 为 WordPress 的评论链接加上 nofollow
• WordPress 评论 SEO

关于 Velocity China 2011

Velocity 会议是由 O'Reilly 和淘宝合办的技术大会, 主要面向 Web 开发人员, 涉及网站前后端方方面面, 提供优化 Web 页面的最佳实践. 今年是 Velocity China 的第二届, 同样请来了一些国内外的大牛为大家分享工作经验和研发成果.

话题

大会一共两天, 37 场演讲. 上午使用大会场, 全员参与, 是一些主题性质的演讲, 也有广告. 下午分成 A, B, C 三个会场, 多是一些公司的案例分享和技术探讨.

演讲内容都围绕网站性能优化方案及性能检测工具分享. 比如 Julia Lee 的《事半功倍的广告性能》和 汪志恒的《用户延迟测量的实践、完善和工具》. 话题也不限于网页上的技术实现, 还有体验, 设备和网络相关的内容, 比如 David Wei 的《移动互联网应用的性能优化》.

后话

这是我第一次参加 Velocity China, 大会内容跟预想有那么些不一样, 有些话题乏味无聊, 但多数都是很有价值的, 现在大家可以在 Velocity China 官方网站下载嘉宾的 PDF 文件, 但视频还没发布, 大家等吧...

会议之外, 比较高兴的是搞了个 Yahoo! 的超大杯子, 省得来回接水, 装上水不用来回跑. 另外也有比较倒霉的, 现场买了本书, 回来路上落在出租车上了.

• Google 撤出中国?
• 360 扣扣保镖对阵腾讯 QQ
• 在墙外
• IE6 必死
• Google DevFest 互联网技术交流会

智通人才网是一个 “线上 + 线下” 复合招聘的服务提供商. 不仅为雇主和求职者提供完善的线上招聘平台, 而且提供强大的现在招聘支持. 这次智通人才网推出 iPhone 和 Android 客户端更是让招聘信息无处不在.

我在 Android 上安装了客户端, 把玩了好一阵. 第一感官肯定是界面. 界面和交互体验做得不是太好, 不过刚刚上线, 我想后面会有所修改, 毕竟他们网站外观做得还是不错的. 但是手机客户端有一些特色功能, 除了一般的职位搜索功能和用户管理两大部分, 还分出了招聘会, 校园招聘和求职资讯等模块.

招聘会是传统的线下招聘方式, 一直是招聘的主要途径. 虽然因为网络招聘的兴起而不像以往那样闪亮, 但是一些大规模的招聘会还是那样的引人注目, 而有些行业通过招聘会找人效果或许更好, 比如销售和客服, 招聘人员在那得到的候选人不是那一张张冷冰冰的简历. 相信这也是很多用户需要的.

校园招聘是一种特殊的招聘会, 它可能是一种职业的专场, 目标是具备某一技能的应届毕业生. 一般来说校园招聘的对口度比较高, 同学们容易从中找到满意的工作. 有这么一个模块, 学生用户应该会喜欢, 也可能由此产生更多的 “面霸”.

而我最喜欢的是求职资讯这个功能, 我还没想换工作, 但是又想了解一下现在市场和行业的情况. 比较遗憾的是这个功能藏得比较深, 需要点击更多模块再选择进入.

对于客户端展示的信息, 智通人才网客户端做得很简洁, 不像网页那么花哨. 除了一些如工作地点, 薪资待遇等大家关注的属性, 就是招聘方的职位描述和要求. 而作为用户, 如果喜欢某个职位, 可以收藏, 分享, 当然还可以申请职位. 但需要注册成为用户后才能进行收藏, 分享和收藏操作, 可以在智通人才网官方网站或者手机客户端注册帐号.

快过年了, 即将毕业的同学是时候行动起来了, 计划换工作的朋友该关注一下了, 智通人才网提供 iPhone 和 Android 客户端, 可以让你随时随地找工作, 无忧无虑好 “薪” 情.

下载手机客户端

• 手机版 WordPress 界面插件 - WPtouch
• App 每日推送 - 挖掘免费 iPhone/iPad 应用
• 要不要买魅族 M8 呢?
• 几个北京的前端职位
• 魅族 M8 的 iPhone 风格主题 Suave

怎么问我都是那一句, 我还是会说: 适合的最好. 国内用户多的可以考虑日本和香港的主机, 当然美国的也挺快, 如果海外用户多, 那不用考虑就买美国主机吧. 如果你流量大需要考虑 VPS, 流量小买个虚拟主机就够了, 还有人帮你维护. 不要考虑 3, 5 年后怎么办, 不够用再说...

IDC 和合租

前段时间我还跟 Showfom 和胡戈戈聊过, 他们也建议我买 VPS, 所以我决定买 Linode. 而一些流量还不是很大, 对主机要求不高的朋友可以考虑合租或者就国内 IDC 买个虚拟主机.

我现在用的 MT 就是跟朋友合租的. 几年前很流行合租, 但后来越来越少, 因为合租成员不稳定, 而且会有抢占资源的情况出现, 产生不愉快. 合租很好, 但我觉得略有风险, 最好找熟人一起.

CloudLinux 和优惠码

用过虚拟主机的人可能知道, 会有很多虚拟主机跑在一台实体机器上, 机器资源是一定的, 如果其中有一些大户, 因为大户耗费过多 CPU, 将直接影响小户的网站性能.

Showfom 说我 Out 了, 现在技术可牛逼, 现在 Linost 使用 CloudLinux. 用他的话说就是:

CloudLinux 能平均分配用户的资源, 独创的 kernel level 技术能确保每个用户使用的资源都是自己的, 比如CPU和内存，不用再和其他用户去 "抢占" 系统的资源, 保证资源公平使用.

因为需用虚拟主机的大部分用户对资源消耗都比较小, 而少数几个大户可能占用了一大块服务器资源. CloudLinux 就是限制大户的资源消耗, 保证其他人的网站正常可用. Showfom 帮我开通了一个 100 块钱的帐号让我试用, 我在上面挂了个测试用的 WordPress, 效果还不错的. 对资源要求不高的朋友可以考虑.

Linost 现在推广 CloudLinux, 愿意提供优惠码作为促销活动. 购买主机的时候使用优惠码 neoease 可以享受终身 8 折优惠. 购买请点击.

吐槽

最后我要吐槽一下 Linode, 今天购买 Linode VPS 的时候, 竟然给我报错, 说我的信用卡信息有误不可用.

We're sorry, but the transaction failed. Please make sure your credit card information is correct and resubmit the form, or contact your credit card company for the reason your transaction failed. If you continue to have problems, please email service@linode.com.

我给服务商写了邮件, 客服大姐让我找银行咨询...

• 选择博客主机
• 主机点评网
• 谁动了我的订阅器
• 迁移网站到新服务器
• 在墙外

这个星期我们团队做了一次内部的技术分享, 南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.

本文谈及多个影响节点显示层级的规则, 其中用到的所有例子全部罗列在《position 属性和 z-index 属性对页面节点层级影响的例子》中.

目录

• 顺序规则
• 定位规则
• 参与规则
• 默认值规则
• 从父规则
• 层级树规则
• 参与规则 2
• 总结

顺序规则

如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点.

<div id="a">A</div>
<div id="b">B</div>

定位规则

如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以 position:static 不会影响节点的遮盖关系.

<div id="a" style="position:static;">A</div>
<div id="b">B</div>

如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高.

<div id="a" style="position:relative;">A</div>
<div id="b">B</div>

在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.

<div id="a">
	<div id="a-1" style="position:relative;">A-1</div>
</div>
<div id="b">B</div>

上面互相覆盖在什么时候用到这样的实现? 看起来偏门, 其实很常用, 比如说, 电子商务网站侧栏的类目展示列表就可以用这个技巧来实现.

下图是某网站的类目展示区域, 二级类目的悬浮层覆盖一级类目列表外框, 而一级类目的节点覆盖二级类目的悬浮层. 如果使用 CSS 实现展示效果, 一级类目的外框相当于上面例子中的 A, 一级类目的节点相当于 A-1, 二级类目的悬浮层相当于 B.

参与规则

我们尝试不用 position 属性, 但为节点加上 z-index 属性. 发现 z-index 对节点没起作用.

<div id="a" style="z-index:2;">A</div>
<div id="b" style="z-index:1;">B</div>
<div id="c" style="z-index:0;">C</div>

W3C 对 z-index 属性的描述中提到 在 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

The z-index property specifies the stack order of an element. Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).

<div id="a" style="z-index:2;">A</div>
<div id="b" style="position:relative;z-index:1;">B</div>
<div id="c" style="position:relative;z-index:0;">C</div>

默认值规则

如果所有节点都定义了 position:relative. z-index 为 0 的节点与没有定义 z-index 在同一层级内没有高低之分; 但 z-index 大于等于 1 的节点会遮盖没有定义 z-index 的节点; z-index 的值为负数的节点将被没有定义 z-index 的节点覆盖.

<div id="a" style="position:relative;z-index:1;">A</div>
<div id="b" style="position:relative;z-index:0;">B</div>
<div id="c" style="position:relative;">C</div>
<div id="d" style="position:relative;z-index:0;">D</div>

通过检查我们还发现, 当 position 设为 relative, absolute 或者 fixed, 而没有设置 z-index 时, IE8 以上和 W3C 浏览器 (下文我们统称为 W3C 浏览器) 的 z-index 默认值是 auto, 但 IE6 和 IE7 是 0.

从父规则

如果 A, B 节点都定义了 position:relative, A 节点的 z-index 比 B 节点大, 那么 A 的子节点必定覆盖在 B 的子节点前面.

<div id="a" style="position:relative;z-index:1;">
	<div id="a-1">A-1</div>
</div>
 
<div id="b" style="position:relative;z-index:0;">
	<div id="b-1">B-1</div>
</div>

如果所有节点都定义了 position:relative, A 节点的 z-index 和 B 节点一样大, 但因为顺序规则, B 节点覆盖在 A 节点前面. 就算 A 的子节点 z-index 值比 B 的子节点大, B 的子节点还是会覆盖在 A 的子节点前面.

<div id="a" style="position:relative;z-index:0;">
	<div id="a-1" style="position:relative;z-index:2;">A-1</div>
</div>
 
<div id="b" style="position:relative;z-index:0;">
	<div id="b-1" style="position:relative;z-index:1;">B-1</div>
</div>

很多人将 z-index 设得很大, 9999 什么的都出来了, 如果不考虑父节点的影响, 设得再大也没用, 那是无法逾越的层级.

层级树规则

可能你会觉得在 DOM 结构中的兄弟节点会拎出来进行比较并确定层级, 其实不然.

<div id="a" style="position:relative;z-index:2;">
	<div id="a-1" style="position:relative;z-index:0;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1" style="position:relative;z-index:1;">B-1</div>
</div>

我们认为同时将 position 设为 relative, absolute 或者 fixed, 并且 z-index 经过整数赋值的节点, 会被放置到一个与 DOM 不一样的层级树里面, 并且在层级树中通过对比 z-index 决定显示的层级. 上面的例子如果用层级树来表示的话, 应该如下图所示.

图中虽然 A-1 (z-index:0) 的值比 B-1 (z-index:1) 小, 但因为在层级树里 A (z-index:2) 和 B-1 在一个层级, 而 A 的值比 B-1 大, 根据从父规则, A-1 显示在 B-1 前面.

参与规则 2

前面提到的参与规则认为只要节点的 position 属性为 relative, absolute 或者 fixed, 即可参与层级比较, 其实不准确. 如果所有节点都定义了 position:relative, 并且将 z-index 设为整数值, 根据从父规则, 父节点的层级决定了子节点所在层级.

<div id="a" style="position:relative;z-index:0;">
	<div id="a-1" style="position:relative;z-index:100;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1" style="position:relative;z-index:0;">
		<div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div id="c" style="position:relative;z-index:0;">
	<div id="c-1">
		<div id="c-1-1">
			<div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

例子中 A, B-1, C-1-1 作为父节点, z-index 的值相同, 根据顺序规则, C-1-1 在 B-1 之前, B-1 在 A 之前; 又根据从父规则, 无论子节点的 z-index 值是什么, C-1-1-1 在 B-1-1 之前, B-1-1 在 A-1 之前.

如果我们将所有父节点的 z-index 属性去除, 诡异的事情发生了. IE6 和 IE7 浏览器显示效果不变, 而 W3C 浏览器的子节点不再从父, 而是根据自身的 z-index 确定层级.

<div id="a" style="position:relative;">
	<div id="a-1" style="position:relative;z-index:100;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1" style="position:relative;">
		<div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div id="c" style="position:relative;">
	<div id="c-1">
		<div id="c-1-1">
			<div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

根据默认值规则, IE6 / IE7 和 W3C 浏览器上的元素存在 z-index 默认值的区别. 我们相信, 仅当 position 设为 relative, absolute 或者 fixed, 并且 z-index 赋整数值时, 节点被放置到层级树; 而 z-index 为默认值时, 只在 document 兄弟节点间比较层级. 在 W3C 浏览器中, A, B-1 和 C-1-1 的 z-index 均为 auto, 不参与层级比较.

而在 IE6 和 IE7 中, 因为 z-index 的默认值是 0, 所以也参与了层级比较.

设置了 position 而没有 z-index 的节点虽然不参与层级树的比较, 但还会在 DOM 中与兄弟节点进行层级比较.

<div id="a" style="position:relative;">
	<div id="a-1" style="position:relative;z-index:100;">A-1</div>
</div>
 
<div id="b">
	<div id="b-1">
		<div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div id="c" style="position:relative;">
	<div id="c-1">
		<div id="c-1-1">
			<div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

我们对上个例子改造一下, 将 B-1 的 position 属性删除后, W3C 浏览器显示如下图. 根据定位规则, A 和 C-1-1 会显示在 B-1 的前面; 而根据顺序规则, C-1-1 又显示在 A 前面.

在 IE6 和 IE7 中, 因为 A 和 C-1-1 设置了 position:relative, 而且 z-index 的默认值为 0, 所以也参与层级树比较, 所以有如下效果.

总结

浏览器节点显示层级是一个费力的活, 今天你觉得 A 区块会永远置顶, 但明天因为需求变动, 突然出现 B 元素需要置顶. 一层一层往上堆砌, 某天回头一看, 发现很多区块交错在一起, 而且他们的值一个比一个大, 根本搞不清头绪. 我觉得在操刀干活之前, 最好先将 position, z-index 和层级的关系搞搞清楚, 以免后患无穷.

另外, 非情非得已, 切勿用 JavaScript 计算 z-index, 并将某个节点的 z-index 设置成所有节点中层级最高.

因为篇幅太长, 本文仅从节点属性角度进行讨论, 没有涉及 select 和 iframe 等特殊页面节点考虑, 如果有机会下次再为大家分享.

• CSS 菜单列表设计
• CSS: 突破框框的设计
• CSS 中背景图片定位
• CSS 属性 background-position 的 W3C 定义
• 为什么将多个图标放在一个图片里?

首先, 什么是图床? 就是使用第三方的服务托管图片 (如: Flickr), 在自己网站上引用这些图片. 那么将图片上传到 WordPress 是什么意思? 即使用 WordPress 的 Media 功能, 在后台上传图片, 并在博客中使用.

使用图床

很多朋友喜欢使用图床, 尤其是写博客的各位. 为什么使用图床? 原因不外乎以下两种:

1. 流量不足. 很多人购买虚拟主机写博客, 每个月只有 20G 到 50G 空间, 不得不使用图床.
2. 图片便于管理. 一般图床有评论, 分类, 分享等完善的管理和分享功能.

使用图床的人会想方设法去寻觅一个适合自己的图片, 一般都是以上原因. 对我来说, 主要是流量问题, 我使用图床, 每个月还需要 90 多 GB 的流量, 如果直接使用 WordPress 的 Media 功能, 那就等着交附加流量的费用吧.

如果我不用为流量操心, 还会不会继续使用图床? 不会. 为什么? 请继续往下看.

图片上传到 WordPress

WordPress 2.5 开始支持画廊 (Gallery) 功能, 可以通过主题的 image.php 内建图库. 由那时开始图片不仅仅是图片了. 如果使用 WordPress 上传一张图片, 数据库将会生成一条类型为 attachment 的 post 数据. WordPress 对图片的定位不是附件, 而是另一种文章类型.

即使不是图片展示类型的网站, 内建的 WordPress 也可能为网站带来巨大的流量, 尤其是产品相关的网站. 如果某人想知道现在的花瓶有哪些外观, 他很可能使用 Google 或者百度的图片搜索功能. 如果你的网站内建图库, 并且相关性和文字描述做得足够好, 很可能被搜索到, 而且图片搜索的转化率很高.

使用 WordPress 内建图库作为文章的大图页面, 也应该是 WordPress SEO 中重要的一环, 使用的时候需要考虑一下几点.

1. 填写清晰, 带关键字的图片 alt 和 title.
2. 将图片放在文章中相关性高的段落前后.
3. 如果使用多语言, 在不同的语言版本使用不一样的图片描述. (否则搜索引擎无法定位主页面)
4. 避免使用超大的图片, 以影响页面加载, 图片备份和网站流量.

总结

本文认为, 在忽略流量, 管理等因素情况下. 本文认为将图片上传到 WordPress 比使用图床有更多好处. 但你需要做好图片页面和图片描述的优化.

最近我在为换主机做准备, 迁 VPS 后, 流量不再那么紧张, 所以重新考虑内置图片, 以到达更好的 SEO 效果.

• WordPress SEO 技巧
• WordPress 主题 Blocks2 (YO2 版本)
• 为 WordPress 的评论链接加上 nofollow
• WordPress 主题 Elegant Box (YO2 版本)
• 在主题上添加风格切换功能 (1)

介绍

App 每日推送是 iPhone/iPad 用户必备的一款 App 应用, 每日推送给适合国人的限时免费应用, 同时也会推荐免费应用中的精品给大家, 玩正版无需越狱, 也不需要花钱.

App每日推送更新比较及时, 最新的免费和限时免费 App 都能找到, 所以只需要关注, 就可以获取最新的 App. 并且文字+图片+视频, 360度全方位介绍各种游戏应用, 让您不再盲目下载.

特点

1. 支持多重筛选

App 每日推送最大的特点是支持多重筛选, 可以通过设备 (通用/iPad/iPhone), 分类 (游戏/教育/...), 类型 (免费/限时免费) 等多重检索, 快速找到你所需要的 App.

2. 微博同步

App每日推送除了网站之外, 还通过微博进行同步, 如果你是微博的深度用户, 只需要关注 App 每日推送的微博, 也可以获取每日最新的 App.

3. App 应用

当然最直接的方式是安装 App 每日推送自己的 App, 名字也叫做 App 每日推送. 这个 App 是个通用的应用, 同时支持 iPad 和 iPhone, 安装之后, 就可以不用通过浏览器直接获取每日最新的免费和限时免费 App. 并且还支持推送, 让你不错过每一次给力限免应用. 并且支持一键分享到新浪微博和腾讯微博, 或通过短信, 邮件与朋友分享.

下载

网址：http://appdp.com/
微博：http://weibo.com/apptoday
App：http://itunes.apple.com/us/app/id425692044?mt=8

后话

App 每日推送算是 Denis 这一年来的成果之一, 年中我们在北京聊到 iPhone 应用和这个网站, 当时网站开始在微博开始聚集粉丝, 已经有一定用户群体. 当时他说正在招人开始做 App 了, 果然, 半年 App 出来了. 把玩了一会, 功能不多, 但操作简单易用, 值得一装.

• 为 iPhone 和 iPad 自定义网站的主屏幕图标
• iPad 绘图工具 Adobe Ideas
• 魅族 M8 的 iPhone 风格主题 Suave
• 手机版 WordPress 界面插件 - WPtouch
• 智通人才网手机客户端

三年前, 我选择了传说中最贵最稳定的 MT (Media Temple). 作为老用户, 今天我会给 MT 主机这样的评价.

• 价格: 偏高
• 速度: 一般
• 稳定: 优秀

最近我在想, MT 是不是我的最佳选择? 根据某著名理论, 质量, 效率和价格三者, 只能牺牲其一而确保另外两点更优. 以 Media Temple DV 套餐的价格, 还有很多很多选择, 甚至可以买 VPS 了. 从这些维度来看, MT 显然不是我的最佳选择. 我对比了一轮, 有以下几种方案.

方案一: 向国内 IDC 购买美国虚拟主机

因为某些原因, 国内的主机国内 IDC 如雨后春笋般. 其中 GegeHost, Linost, 老薛等多款都在我的博客做过广告. 胡戈戈已经在我这做了三年的广告, 也给过我好几个帐号. 以前 WordPress 主题的 Demo 站用的就是他的主机, 为了容易管理, 我现在将挪走了; 现在这些主机我用来向一些客户展示产品. 相信这是大多数博客选择的方案, 这确实有很多好处的.

国内 IDC 都用 cPanel, 方便好用, 服务器也不用自己管. 价格便宜, 多人共用当然也分担了费用. 速度方面, 高阶的主机服务在国内的速度应该比 MT 好, 因为这些做主机买卖的同学都是针对中国市场购的机器. 另外, 因为特殊的网络环境, 经常会有赠品. 比如戈戈主机吧, 现在有送域名和某些便于打通国际网络的附属产品.

而主要存在问题在稳定性. 不是说机器容易宕机, 而是可能因为某些用户的文章导致主机 IP 被屏蔽. 不过现在的 IDC 比多年前已经专业很多了 (两年前戈戈主机还不能付费自动开通呢...), 一旦出事他们立即会更换 IP, 其实自己买个 IP 也是可以的.

低价格, 一般性能, 少流量, 免管理, 有屏蔽风险.

方案二: 转用 VPS

近两年, 越来越多人选择 VPS (虚拟专用服务器). VPS 可以确保所有资源为用户独享, 性能和安全性都较虚拟主机好. VPS 的运行和管理与独立服务器相同, 在性能和质量方面都给予用户更多, 价格在 $20 到 $200 每月不等.

对我来说, 价格比较搞, 而且要自己维护. 如果我不用 MT, 要加点钱才能买到个适合的 VPS. 这个博客没有到达需要用 VPS 的流量.

高价格, 高性能, 足够流量, 需要管理.

方案三: 继续用 MT 主机

这个 MT 主机是我跟朋友合租的, 这位朋友当年是技术控, 管个 Linux 服务器对他来说轻车熟路, 我也懒得去搞. 因为是合租的, 平摊下来价格并不是特别高, 可以接受. 使用这台主机的人互有相识, 不太可能出现被连累 (因为敏感文章被封 IP) 的情况, 所以相对稳定. 另外, 因为自己买的虚拟化主机, 开个 SSH 管理文件十分方便.

好处来自合租, 坏处也是. 如果服务器真有什么问题, 就重启一下 Apache 的功夫. 但是因为这位朋友忙于自己的事情, 比如出差, 不能及时处理. 也就是说没有专人给你监控, 自己买 VPS 应该也有类似的问题.

高价格, 一般性能, 足够流量, 无需管理, 没有处理问题不及时的风险.

总结

比较了一轮, 我自己还没确定. 看情况吧, 如果满足性能要求, 或许搞个独立域名搞个虚拟主机; 如果流量能再上去点, 就用 VPS; 如果忘记了, 那就续费 MT 吧.

不知道这个文章对那些询问主机的同学会不会有那么一点帮助呢? 如果确定不了或者新手入门, 不用劳神苦思了, 就随大众吧. 一个主机而已, 关键在于你的笔下.

• 选择博客主机 - CloudLinux
• 迁移网站到新服务器
• 在墙外
• Blog 两岁了!
• iNove 1.3 发布

坐在我斜对面的视觉同学 (@骆驼_高) 被新浪误认证为 4399 的 COO. 这位同学一直也没多管, 直到三天前一夜之间粉丝从 5K 涨到了 18K, 被吓了一跳. 于是他发了一条澄清身份的微博.

崩溃了，粉丝一夜之间从五千多涨到18688，我真的不是4399的COO

新浪微博工作人员响应速度很快的, 知道事情并求证后立即联系上 @骆驼_高. 看对话内容.

怕是那群买僵尸粉的同学正在羡慕嫉妒恨呢. 如果遇到这样事情的正在看文章的你, 怎样处理? 人家 @骆驼_高 同学设计水平很高, 不见得信心不足怕压力, 说是怕别人说粉丝来路不正所以赶紧取消了认证为妙. 这两三天我观察粉丝数也没啥变化.

哦, 对. @骆驼_高 这家伙还趁那天关注度高发了几条招聘信息. 我们团队正在招聘网站营销 (SEO), 交互设计, 视觉设计, 前端开发, 有兴趣的同学请联系我, zhao.wuz@alibaba-inc.com.

• 关注新浪微博

上图是最近我在顶部放置的广告 banner. 上方红色的是某网站圣诞节促销活动的 Affiliate 广告, 中国大陆之外地区的访客可以看到; 下方蓝色的是最新发布的与我同行 Apply App 应用广告, 只有中国大陆地区的访客可以看到.

区分访客国家有什么用?

这里是几个我利用该功能的例子.

区分网站功能
这个博客有翻译文章的功能, 这是为了方便海外访客阅读文章, 但对中国人显得十分多余. 所以我通过 IP 判断国家, 对中国大陆地区屏蔽翻译功能.

区分展示广告
我在网站侧边栏放有广告, 很多中文广告对海外流量来说毫无意义, 所以我进行区分展示. 中国大陆地区在侧边栏最下方看到的是拿福能的广告, 而其他地区看到的是 Google 的广告. hostucan 是我的一个广告主, 有英文网站, 也有中文网站, 所以我可以向他提供区分展示服务, 免得浪费流量.

屏蔽布点服务
海外有很多好的服务平台, 在网站上布点即可采集数据和分享文章. 但很不幸, 因为某些原因, 他们在国内展示效果并不好, 不但没有起到应有效果, 还让页面加载时间变长. 可以对大陆访客屏蔽这些布点.

在 PHP 通过 IP 区分国家

如何用 PHP 通过 IP 区分国家和地区呢? Maxmind.com 提供一套 GeoIP 的解决方案, 只需要简单几步即可在 PHP 中通过 IP 判断访客的国家.

1. 下载数据库和 PHP 库文件

• 下载 GeoID.dat.gz, 解压为 GeoIP.dat 文件.
• 下载 geoip.inc.

2. 通过 PHP 代码获取国家信息
以下是一段示范代码, 演示如何获取国家代号和国家名称.

<?php
 
// 引入 PHP 库文件
include("geoip.inc");
 
// 打开本地数据库, 数据保存在 GeoIP 文件中.
$geoData = geoip_open('GeoIP.dat', GEOIP_STANDARD);
 
// 获取国家 IP
$countryCode = geoip_country_code_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
 
// 获取国家名称
$countryName = geoip_country_name_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
 
// 关闭本地数据库
geoip_close($geoData);
 
?>

在 WordPress 中通过 IP 区分国家

既然 PHP 上使用没问题, WordPress 肯定也是 Okay 的. 看看我是怎么使用的.

1. 放置数据库文件
将 GeoIP.dat 解压到 WordPress 根目录中. (你可以在这个目录找到 wp-config.php 或者 wp-config-sample.php 文件)

2. 编写调用接口
在主题目录中新建文件夹 include, 将 geoip.inc 放置在新建文件夹中. 并在该文件夹新建文件 geoip.php 文件内容如下.

<?php
 
include('geoip.inc');
 
global $countryCode;
 
$geoData = geoip_open('GeoIP.dat', GEOIP_STANDARD);
$countryCode = geoip_country_code_by_addr($geoData, $_SERVER['REMOTE_ADDR']);
geoip_close($geoData);
 
?>

这里只取国家代号作为判别依据. 并且国家代号是全局变量, 以避免页面多处判断需要反复访问 GeoIP.dat 获取信息, 减少程序开销.

2. 调用接口, 获取国家代号
3. 打开 header.php 文件, 在文件顶部加入代码如下.

<?php include('include/geoip.php'); ?>

4. 使用国家代号
在主题中调用代码, 例子如下.

<?php
 
global $countryCode;
 
if($countryCode == 'CN') {
	// 中国大陆地区执行的代码
} else if($countryCode == 'US') {
	// 美国地区执行的代码
} else {
	// 中国大陆和美国以外地区执行的代码
}
 
?>

总结

通过 IP 判断访客来源十分精准的, 现在一些外贸网站都是通过这个方法向用户进行展示区分, 比如美国地区的用户默认看到美国能买到的商品和美国物流信息. 但不是百分之百的准确, 比如某人常年翻墙, 那他可能一直看不到本国的信息. 至于是否需要区分处理, 网站主要有所考虑.

可能有人会问, 加这么个东西, 性能如何? 会不会要求强大的服务器? 我测试过, 正常的服务器上几乎不影响页面加载性能, 可以看看这个博客的速度. 如果不放心, 自己测一下.

• 巧用 WordPress 缩略图
• 每日同步 Feedsky 订阅数
• 手机主题调度插件 WordPress Mobile Themes
• 将 Blogroll 分为两栏 (3)
• 文章存档插件 WP-EasyArchives

Breadcrumbs 与 Breadcrumb NavXT 的区别

1. 从界面上看, 两插件并没有太多区别, 可以在 WordPress 架构内的所有页面加上面包屑.
2. 从功能来看, Breadcrumb NavXT 更加强大. 可以针对特定类型页面进行设定, 并且提供两种结构的页面输出.
3. 从 SEO 来看, Breadcrumbs 更加合理. 由于插件作者 Yoast 的 SEO 功底很强大, 插件在这方面肯定会有更多关注. 可以选择在 Home 链接加上 nofollow, 在 Home 链接和后面的索引之间加上特定的页面 (如: 我加上了 All Categories 的页面链接).

Breadcrumbs 插件的缺陷

1. 如果文章被分配到多个类目中, 只有一个类目有效, 插件更具字母 A 到 Z 的循序选择头一个类目作为面包屑路径.
2. 文章详细页面的面包屑中包含文章标题, 这个多余了.

这里提及的两个问题 Breadcrumb NavXT 插件也有. 前一个问题我没有解决, 因为影响不到我的使用, 也没想过怎样去弄; 后一个问题我解决了, 除了除掉文章详细页面的文章标题, 还修改了面包屑中其他链接的标签结构, 比如: 为 SEO 将最后一个面包屑节点改成 h2.

Breadcrumbs 插件的使用

下载插件请移步 WordPress 插件中心的插件页面.

在 WordPress 主题中插入代码调用插件, 如下.

<?php
	if(function_exists('yoast_breadcrumb')) {
		yoast_breadcrumb('', '');
	}
?>

调用插件的方法有三个参数. 前两个是输出在前后的 HTML 片段; 第三个参数指定返回字符串还是输出页面, 如果第三个参数是 true 代码直接输出页面, 如果是 false 返回字符串, 默认是 true.

Breadcrumbs 插件的改进

我使用的是 Breadcrumbs, 因为功能简单, 代码少, 容易改. 为了 SEO 效果, 突出页面关键字, 避免出现重复链接, 我对插件进行了一些修改.

1. 将文章详细页面的面包屑中出现的文章标题去掉, 因为这个与文章标题重复.
2. 在面包屑的 Home 链接和类目链接之间加上 All Categories 的链接, 便于区分文章详细页面和独立页面的路径. (独立页面是不存在分类的.)
3. 在 Home 链接和 All Categories 页面链接加上 nofollow. Home 这个词跟你在首页没有关系, 而且页面 Logo 也链向首页, 没必要重复一下让爬虫混淆; 我的顶部导航中已经有 All Categories 的入口, 没有必要重复一下.
4. 将存档页面的面包屑最后一个词改为 h1, 因为它是整个页面的核心关键字. 比如: 现有存档页面面包屑 Home > All Categories > WordPress, 我会将 WordPress 改成 h1. 因为这里展示的是 WordPress 类目下的文章列表, 与其关系最大, 我将这个当成页面的标题来处理.
5. 将文章详细页面的面包屑最后一个链接改为 h2. 在我的这个博客中, 文章详细页面没有指定分类链接, 其实我是将这个功能与面包屑的合并了, 面包屑的最后一个链接就是该文章的分类链接. 除非有十分重要的副标题存在, 由于标签和分类是文章之间联系的桥梁, 可以仅此于标题给 h2.
6. 将面包屑中的 » 改为 >, 纯粹觉得不好看.

总结

面包屑很总要, 强烈建议用上. Breadcrumb NavXT 和 Breadcrumbs 是目前最受欢迎的两个 WordPress 面包屑插件, 看似不一样, 实际区别不大, 都很好用.

• WordPress 面包屑插件 Breadcrumb NavXT
• WordPress 的文章导航
• WordPress SEO 技巧
• WordPress 不同页面显示不一样的侧边栏
• 为 WordPress 的评论链接加上 nofollow

极客公园

这是著名博客, 可能吧的 Jason 托我发的. 他们现在正在寻找一位靠谱的前端开发. 负责商业价值杂志网站, ITValue 网站, 极客公园等, 使其适配于 iPhone 与 Android 的网页.

价值取向: 做最有价值的媒体. 附件是公司的业务介绍, 请点击下载.

技能要求:

• 精通JavaScript, JQuery, CSS, HTML, 对各种浏览器不兼容问题有耐心, 有经验.
• 做事耐心, 细致, 对一个像素的偏差也不能容忍.
• 对后台技术了解, 并善于和设计师, 程序员进行有效沟通.
• 英文良好, 可以阅读英文技术文档.
• 学历不限. (招实习生)

工作地点: 北京慈云寺桥附近的嘉泰国际大厦
简历投递: jason5ng32@gmail.com

海航东方慧思

托我发这则招聘信息的是以前同事中出哥. 北京东方慧思是海航集团旗下的一个互联网产业公司. 虽然我不了解海航, 但我认识的中出哥曾经是个靠谱的 PD, 我们以前合作也很愉快. 看看他是怎么介绍的吧.

海航这边福利还是相当不错的, 员工和亲属全年机票 2.5 折优惠, 在北京有单位建房, 价格基本在市场的 1/2 左右. 团队现在处于初创期, 属于创业团队, 氛围非常好, 上升空间足够大.

这里有两个前端相关的职位.

高级前端开发工程师要求:

• 熟悉各种 Web 前端技术 HTML, XML, CSS 等, 熟练手写符合 W3C 规范的代码.
• 理解并掌握 JavaScript 语言核心技术 DOM, BOM, AJAX, JSON 等, 对流行的 JavaScript 框架 (如: YUI, jQuery 等) 有深刻的理解和实战经验.
• 深刻理解 HTTP 协议.
• 至少有过一种 Web 脚本语言的项目合作经验, 如: PHP, Ruby, ASP.NET 等.
• 熟知 W3C 标准, 对可用性, 可访问性等相关知识有实际的了解和实践经验.
• 对用户体验, 交互操作流程, 及用户需求有一定了解.
• 具备良好的服务意识, 责任心, 较强的学习能力, 优秀的团队沟通与协作能力.
• 计算机, 数学, 自动化等相关专业本科以上学历优先.
• 至少 4 年相关 Web 前端开发经验.

前端开发工程师要求:

• 熟悉 HTML, CSS, 熟练手写代码.
• 熟练使用流行 JavaScript 框架 (如: YUI, jQuery 等).
• 熟知 W3C 标准, 了解不同浏览器之间的差异, 制作出的页面能够有很好的兼容性.
• 个性乐观开朗, 逻辑性强, 善于和各种背景的人合作.
• 学历不限, 本科以上学历优先. (招实习生)

工作地点: 北京三元桥
简历投递: xiaol_zhong@hnair.com

后话

前面介绍的几个都是北京的前端职位, 如果有兴趣的不要多想了, 投递简历吧. 当然, 如果打算来杭州搞 IT, 可以找我.

• 拿福能招聘网页设计师和 PHP 程序员
• 北京招 ASP.NET MVC 软件工程师
• 加入 Alibaba.com UED
• 阿里巴巴国际站 UED 招聘
• 智通人才网手机客户端

术语

监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.
浏览器默认动作, 指特定页面元素上带有的功能. 如: 点击 a 链接节点的跳转动作, 表单提交动作.

stopPropagation()

因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation() 方法.

假设页面上存在一个浮动弹出层, 显示在最前面, 当点击弹出层以外页面区域时, 隐藏弹出层. 为了做到这样的效果, 我们会监听 documentElement 的 click 事件, 一旦事件被触发即隐藏弹出层. 但是...

这显然存在问题. 当用户点击弹出层时, 我们不希望它隐藏掉. 但因为事件的冒泡传递, documentElement 的 click 事件也会被触发. 这个时候, 我们可以监听弹出层的 click 事件, 并使用 stopPropagation() 方法阻止冒泡. 请参考下面的代码.

// 在弹出对话框上点击时, 不进行任何页面操作, 并阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
	ev.stopPropagation();
};
 
// 在 documentElement 节点上监听到点击事件时, 隐藏对话框
document.documentElement.onclick = function(ev) {
	document.getElementById('dialog').style.display = 'none';
};

stopPropagation() 相当好用, 可是 IE8 及以前版本都不支持. IE 的事件对象包含特有的属性 cancelBubble, 只要将它赋值为 false 即可阻止事件继续. 如:

// 在弹出对话框上点击时, 不进行任何页面操作, 并阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
	ev.cancelBubble = false;
};

preventDefault()

一个带事件监听的链接代码如下:

<a href="http://w3c.org" onclick="alert('JavaScript Click Event');">点击链接</a>

点击该链接, 显示对话框后跳转页面. 由此可知, 除了执行监听事件还会触发浏览器默认动作; 执行监听事件在前, 触发浏览器默认动作在后.

这里有个经典示例, 我们希望点击链接在新窗口打开页面, 但不希望当前页面跳转. 这个时候可以使用 preventDefault() 阻止后面将要执行的浏览器默认动作.

<a id="link" href="http://w3c.org">W3C 首页链接</a>
 
<script>
// 在新窗口, 打开页面
document.getElementById('link').onclick = function(ev) {
	// 阻止浏览器默认动作 (页面跳转)
	ev.preventDefault();
	// 在新窗口打开页面
	window.open(this.href);
};
</script>

return false

退出执行, return false 之后的所有触发事件和动作都不会被执行. 有时候 return false 可以用来替代 stopPropagation() 和 preventDefault(), 比如我们上面新窗口打开链接的例子, 如:

<a id="link" href="http://w3c.org">W3C 首页链接</a>
 
<script>
// 在新窗口, 打开页面
document.getElementById('link').onclick = function(ev) {
	// 在新窗口打开页面
	window.open(this.href);
	// 退出执行 (在监听事件之后执行的浏览器默认动作将不会被执行)
	return false;
};
</script>

有人认为 return false = stopPropagation() + preventDefault(), 其实是错的. return false 不但阻止事件, 还可以返回对象, 跳出循环等... 方便地一刀切而不够灵活, 滥用易出错.

后话

因为习惯用 return false 来阻止事件, 最近在搞手机 Web 的时候遇到一些问题, 很是难堪. 写下此文当作笔记, 提醒自己.

• 用 JavaScript 实现变速回到顶部
• 通过 JavaScript 获取页面上的鼠标位置
• WordPress 评论的 @ 回复
• JavaScript 初始化装载方法
• 谷歌音乐搜索栏的提示功能

创建支付宝个人收款页面

创建页面十分简单, 只要登录 me.alipay.com, 输入你的 ID 和个人描述既可开通. 这里有一点需要特别注意, 一旦开通, 个人 ID 则不能修改.

开通完成你会获得一个链接, 别人通过这个链接进入你的收款页面. 假设你做一个捐款按钮链向收款页面, 那它就是一个捐款页面了.

优势和弊端

好处不言而喻, 方便快捷, 便于推广. 对经常收款的用户和博客来说十分有用, 可以让支付宝更具社会化特性.

也有一些网友认为其弊端是隐私和安全. 网友觉得收款页面上显示个人姓名欠妥, 而且担心引起而频发网络诈骗.

支付宝的捐款功能

作为一个博主, 这个新功能很有价值, 终于可以创建类似 Paypal 的捐款功能了. (出乎意料地, 现在 Paypal 上已经找不到创建 Donate 按钮的入口了. 但 Paypal 捐款功能仍是可用的.)

若干年前, 支付宝曾经有过捐款功能的, 但后来只提供慈善机构使用, 而个人产品悄然消失了. 这么好几年, 如果需要接受捐款, 只能使用支付宝的商家服务.

结束语

支付宝团队正在对这个产品进行新版本的开发, 现在存在的一些问题会得到解决, 并将带给我们新的功能和体验. 如果你还有其他问题和建议, 可以在这里留言, 我可以帮忙联系支付宝的开发团队.

其他不多说了, 觉得有用的也别举手了, 赶紧去抢个喜欢 ID 吧.
http://me.alipay.com

• 手动为 Firefox 添加支付宝安全插件
• QQ 邮箱体验室
• 960 网格系统即将过时
• Rollip 图片处理
• UML 工具: ArgoUML

图标版权

作者对版权很重视, 提到两点:

1. 出售, 修改, 发布或者其他从中受益的行为都是不允许的.
2. 你可以在论坛, 博客或者个人网站中使用.

相关链接

Y o l k s
Y o l k s - 2

后话

三年前, 我介绍了一套图标. 不料今天在晚上看到竟然有新版本 Y o l k s - 2, 于是立即下载, 并且更新了这个文章...

• 30 个免费矢量图
• 简单布局上如何协调网页样式
• GNOME图标: Somatic
• 下水道口的涂鸦
• 为什么将多个图标放在一个图片里?