为什么 h4, h5, h6 标签很少用到?

标题标签包括 h1 到 h6, 我们常用 h1, h2, h3, 但极少用到 h4, h5 和 h6.

在一个合理语义化, 敢于裸奔 (不使用 CSS 进行布局) 的网站里面, 标题标签除了语义化, 还带有一些样式作用. 但在 CSS 普及的今天, 用 h1 和 h6 其实没有太大区别, 反正外观也能随便套.

作为标题标签, 有更牛逼的功能, 标题元素意味着页面上高权值的关键词, 所以 h1, h2 和 h3 被频繁利用来为关键词加权. 而 h4, h5 和 h6 的权值并不高, 甚至比不上 strong 和 em, 所以很少被用到. 估计他们权限层次如下:

h1 > h2 > h3 > strong > em > h4 > h5 > h6

什么时候使用 thead, tbody 或 tfoot?

我本来认为 thead 作为表头用来放表格标题单元, 如 th; 而 tbody 是放表格内容, tfoot 是表格说明. 其实我的理解不太正确, 这几个标签其实是可有可无的.

因为浏览器一般需要整个表格下载完才开始显示, 在以 table 为布局的时代影响用户阅读. 所以这几个标签是用来将表格划分成多个表格部分, 下载完成部分即可显示. 另外, 也为了打印长表格时的时候表头和表尾可以在每一页出现.

关于 table 标签, 这里有篇文章写得很详细: 《标准化 - 表格》(原文: 《Bring on the tables》)

为什么我们习惯用 a 标签做按钮?

不是 input type="button" 可以理解, 因为低版本的 IE 上看不到 hover 效果. 但为什么或者 span, 而是 a 标签? a 标签做成按钮, 不带 href, 这种做法是对的吗? 我还没想好, 以前这么做就像是条件反射一样.

b 标签和 i 标签

很多人以为 b 标签和 i 标签的命运和 u 标签一样, 被 W3C 归类为 "不推荐使用标签". 但 HTML5 规范中, 这两个标签还是推荐使用的. 这一点我一直清楚, 还跟朋友为这事争执过. 但我一直不明白 HTML5 中如何定义它们.

事实上, HTML5 对这两个标签进行了重新的定义. 比如 i 标签, 更多应该用在术语, 书籍和引用他人说过的话等场景上. 这里有个文章说到了这一点: 《Using <b> and <i> elements》

hr 标签

hr 是一根线, 分割内容的横线. 我一直认为 hr 是个蹩脚的东西, 画出来的线用 CSS 好不好处理, 毫无用处. 其实 hr 在语义上是文章的分割线, 将文章上下文完全划分开, 让它们毫无关系.

其作用就像很多日志类博客文章里面出现的下图的分割线, 只不过 hr 在语义上也是如此, 爬虫也能理解.

section 标签

div, section 和 article 有很多相关说明, 我能理解它们的含义, 但我还是不能理解什么场景下更应该使用 section, 还有就是 section 和 article 的嵌套关系应该怎样?

为此我在知乎上提问过, 回答都不难以, 求追加解答.
http://www.zhihu.com/question/20227599

后话

这次课程的内容好像很简单, 但整理资料的过程发现自己对一些问题其实没有那么自信, 平时用起来手到擒来的感觉究竟是条件反射还是无奈之举, 连我自己都迷糊了. 虽说是给别人培训, 自己也收获了不少, 感觉挺好的.

课程 PPT 下载:《HTML&XHTML介绍和常用标签》(备用地址)

Related Articles

• Google HTML/CSS 代码风格指南
• 使用 HTML 字符实体
• 多栏友情链接插件 WP-MulticolLinks
• 侧边栏订阅插件 WP-SidebarReader
• HTML5 画布 - 参考资料, 画布元素和上下文
• 发放图海 VIP 邀请码

我不知道为什么原材料叫不织布, 看似一种绒面的厚实的布料. 很多不一样的材料, 除了月历还有手机套, 钱包, 玩偶, 甚至闹钟... 买回来的材料跟我们玩的模型有点像, 有很多个画好轮廓的区域, 免裁剪, 用剪刀剪开就可以用. 但这东西做起来不比模型简单, 要一针一线缝起来, 有些地方还要塞点棉花什么的, 挺费心的.

这个 DIY 的不织布月历部件比较多, 其中一个橘黄色的蟹我很喜欢, 河蟹河蟹, 很亲切有没有? (河蟹娱乐可以考虑用这个做吉祥物) 刚做好这个部件的时候我建议不要缝在一起, 可以送给我挂在工牌带上什么的. 不幸被拒绝了, 不过这么一看, 如果没这个河蟹应该会显得缺点什么.

在这之前, 女友还做过很多不织布作品, 一般用来做节日礼物什么的送给朋友. 成本很低, 但作为礼物很用心的感觉, 家里 MM 如果想不到送什么我强烈推荐不织布. 去年圣诞节就送了个纸巾盒给我, 放在公司实用还抢眼, 偶尔会有人来表达一下羡慕.

很久没写生活类日志了, 写这篇就为了显摆一下, 就这样吧.

Related Articles

• 归来
• 圣火广州传
• 黑格比吹跨海陵大堤
• 2008 年度总结
• 我不忙, 只是有点烦
• 去大学城逛逛

网页摘要 (Rich Snippets) 指的是每条搜索结果下方显示的几行关于网页的描述信息. 网页摘要可以让用户预先了解到网页中的内容. 其中包括面包屑, 文本摘要, 加强显示的搜索关键字, 缩略图, 评价及其数量等内容.

如果页面结构合理, 或者进行按照规则进行过微数据和微格式处理, 网页摘要中可能展示的很多内容都是非常吸引用户眼球的内容. 比如: 展示评价的那 5 个黄色的星星, 还有文章中的缩略图. 网页摘要测试工具就是帮你准确分析网页中的结构化数据, 提供搜索结果预览和提示的工具. 可以点击这里看看我测试结果.

你可以输入网址或者页面源代码提交工具进行分析, 但分析结构只是预测的结构, Google 搜索引擎不一样会按照这个规则来显示搜索结果. 所以这只能算是一个预测的工具, 做网页优化, 搞 SEO 都可以多参考一下, 但不要迷信.

Related Articles

• 在 Notepad++ 使用 Google Closure Linter 校验 JavaScript 代码
• Google Reader Gadget
• Google 帮你的博客搬家
• Google HTML/CSS 代码风格指南
• Google Gadgets for Linux
• Google 10 周年时间轴

百度分享按钮与 jiathis 社会化工具等社会化分享类工具实质上没有太大区别, 但因为百度搜索的特殊角色, 大家认为安装百度分享或多或少会影响搜索排名. 当时很多人对 Google +1 按钮也做过这样的猜测. 究竟会不会影响搜索排名没有人知道, 反正我是信了, 所以也加到博客中来.

我安装百度喜欢和分享按钮, 出于几方面考虑.

1. 也算是 SEO 技巧, 担心影响搜索排名, 加上为妙.
2. 因为某些众所周知的原因, Google +1 按钮在国内网络环境中时常显示不了.
3. 我自己写的分享功能要时常花时间维护, 本来就想找个分享工具.

分享按钮

百度分享按钮发布后, 已经有很多网站使用, 其中也包括网易, 去哪儿, 蘑菇街等一些大型网站. 或许是屈服于百度的淫威, 或许因为这工具真的好用, 谁知道呢?

通过百度分享工具分享过的网页在百度搜索中会显示其分享数, 也就是百度搜索上的大拇指图标. 个人认为就算不影响排名, 有个拇指在搜索结果中也醒目很多.

网上有很多刷分享数的教程, 我倒觉得用处不大. 百度放得出来这个按钮就应该想到大家会刷, 所以很多文章中分享数很高, 但百度搜索结果中显示的比较少, 我猜测百度会做一些过滤, 搜索结果中只显示有效的数量.

喜欢按钮

百度的喜欢按钮与 Google +1 还有点不一样, 后者需要登录才能顶. 个人感觉 Google +1 按钮类似 Digg 功能, 在 Google Reader 和 Google+ 中可以看到 Digg 数. 但百度的喜欢按钮应该更多是偏分享一类工具, 工具也提供顶后再分享的功能, 也就是 "喜欢后分享" 按钮.

使用了几天, 本博客最新的几篇文章均有被顶的痕迹, 但不知是百度还没加入对喜欢数的统计还是我的博客太挫, 现在被顶过的文章在百度搜索结果里面并没有显示大拇指图标.

另外, 我发现喜欢按钮现在还存在一些问题.

1. 百度按钮的外观定义是全局的, 用户无法在同一个页面使用两套不一样的喜欢按钮. 比如: 我想在文章标题使用一个小号的喜欢按钮, 在文章底部使用大号的喜欢按钮, 但百度喜欢按钮无法做到, 要么全用小的, 要么全用大的.

2. 如果网页路径中有锚点, 喜欢按钮会认为那是另一个网页. 看下图, 我的文章被顶了 10 次, 但如果访问地址改成带锚点的 URL, 喜欢按钮显示为 0.

后话

虽然很久之前就做了网站分享按钮, 但在我的博客上效果不是特别好. 后来加上了 Google +1 按钮, 又因为网络环境时好时坏, 可能很多朋友见都没有见过. 百度喜欢是一个很好的补充, 有看到喜欢的文章帮忙顶一下, 我也很想知道博客的读者更喜欢哪些文章.

Related Articles

• 评论投票插件 Comments Vote
• 缩放图插件和色板生成器
• 百度统计及热力图
• Google Reader Gadget
• Google 帮你的博客搬家
• Google 搜索结果的网页摘要测试工具

与我在《使用 Google Closure Linter 校验 JavaScript 代码》中提到的 Google JavaScript Style Guide 一样, 这份只能内容很少, 我用了不到一个小时就看完了, 从这份短小的代码风格指南找到一些有意思的内容. 下文我会列举两项.

省略资源文件的协议

建议省略掉图片, 媒体文件, 样式和脚本 URL 中的协议部分 (http:, https:), 省略掉协议部分后, 资源文件将继承页面 URL 的协议. 不但可以防止内容混用的问题, 还可以减小页面的尺寸. 比如: 引用一个 JavaScript 文件可以用下面建议的方式来写.

省略掉可选的标签

用过 Dreamwave 的同学应该有印象, 当你创建一个 HTML 文件, 默认有代码如下.

<html>
	<head>
	</head>
 
	<body>
	</body>
</html>

我们会将 title, 外部 CSS 和 JavaScript 引用放在 head 区域, 在页面上展示的内容放在 body 里面, 但其实 html, head 和 body 都是可省略的标签.

将这些可选标签删除之后, 看起来很怪, 但页面显示正常, W3C 检测也能通过. 我已经在博客上这样处理了. 但有一点需要注意的, 如果你希望用 XHTML 编写页面, 那么请保留 html 标签, 因为你仍需要下面这句代码作为声明.

<html xmlns="http://www.w3.org/1999/xhtml">

后话

Google 的 HTML/CSS 代码风格指南是一个短小精悍的建议性代码编写手册, 很有用, 但请不要迷信. 像里面有一项, 建议使用两个空格作为缩进, 在很多团队可能不具有可行性, 我们团队现在用的还是 tab.

该手册中很多 HTML 建议都是针对 HTML5 的, 但这里是用 HTML 风格而非 XHTML 风格, 很多地方为了省略代码实际上削弱了代码的可读性, 大家应该对其取舍有所判断.

Related Articles

• 几个 HTML 标签的用法
• 使用 HTML 字符实体
• 在 Notepad++ 使用 Google Closure Linter 校验 JavaScript 代码
• Google 撤出中国?
• 整合 Google 自定义搜索 CSE
• 在 Sublime Text 2 使用 Google Closure Linter 校验 JavaScript 代码

Resource interpreted as Script but transferred with MIME type text/plain

经过排查, 发现是 SVN 的 MIME 设置问题. Firefox, Chrome, IE9 等现代浏览器会通过判断获取文件的 MIME 类型, 调用不同的客户端程序或使用不同的方式来执行. 如果文件的 MIME 缺失或者有误, 那浏览器会按默认方式处理. 而老版本的 IE 浏览器会识别文件类型并更具识别到的类型来处理, 所以一般不存在执行问题.

为了 SVN 服务器上的文件也被正确执行, 需要修改 svn:mime-type.

手动设置

TortoiseSVN 和 Eclipse 等一类客户端可以对文件的属性进行设定. 以下是 TortoiseSVN 中的修改方式.

1. 右击展开文件菜单, 选择 TortoiseSVN > Propertise.
2. 添加或者修改 Mime-Type.
3. 保存并提交 SVN.

在 Eclipse 中修改方法差不多, 文件的 SVN 属性的目录位置在 Team > Set Property.

自动匹配

SVN 有配置文件, 可以在里面进行配置.

1. 打开 SVN 配置文件.
   • Linux: /etc/subversion/config
   • Windows: %APPDATA%\Subversion\config
2. 设置 enable-auto-props = yes.
3. 找到 auto-props 区域, 并添加文件的 mime-type.

   *.js = svn:mime-type=text/javascript
   *.css = svn:mime-type=text/css
   *.html = svn:mime-type=text/html

修改保存后, 新建对应后缀的文件, 提交时自动会带上设置的 mime-type.

后话

长久以来, SVN 对我来说只是一个代码管理工具, 会通过 Apache 或者 Nginx 等 Web 服务器来获取文件, 所以头一次遇到觉得诡异. 刚发现问题的时候没有去抓包, 还以为是 Google Code 的问题, 真是错怪它了. 事实上, Web 服务器提供一个 MIME 模块, 用来识别文件的 MIME, SVN 也一样. 只是 Apache 等默认打开了 MIME 自动匹配, 而 Subversion 没有.

Related Articles

• Tango mime
• 在主题中添加 LavaLamp 菜单效果
• WordPress 搜索框添加文字提示
• Google HTML/CSS 代码风格指南
• WordPress 的 JavaScript 本地化
• 用 JavaScript 输出页面代码

功能介绍

坚果云有很多特色功能, 比如: 恢复历史版本, 调用手机相机, 拥有 Windows, Linux, MacOS, Android 和 iPhone 等多平台客户端等. 但更加有下面的一些功能更是亮点.

1. 限流量, 不限容量

这是我对坚果云的第一印象, 与其他类似服务不一样. 所有用户没有流量限制, 但限制每月 1G 上传和 3G 下载流量. 按他们的说法是不希望自己成为数据的管道, 而是数据的重要数据的储存柜.

2. 多文件夹同步

我觉得这个功能相当牛逼, 云同步将不会影响用户存放文件的习惯, 就像共享 Windows 文件夹一样方便. 我不明白为什么 Dropbox 一直不支持多文件夹同步功能.

3. 邀请同步和分享

在多文件夹同步的前提下, 我们能够选择文件夹为个人同步还是邀请朋友同步. 可邀请坚果云其他用户同步, 并且可以设定其为只读, 只写还是可读写. 除此之外, 能生成分享链接, 将某些文件分享给任何人, 类似 box.net 的分享功能.

4. 动态身份验证

使用手机支付的支付宝用户应该有印象, 当你进行付款的时候, 支付宝会通过短信将验证码发送至手机, 输入验证码方可完成交易. 这个就是动态验证行为.

坚果云为了保证用户的数据安全, 通过 Google 身份验证器提供动态身份验证服务. 登录后在 "设置 > 动态身份验证" 里可以开启动态身份验证, 不过你必须要有一个 iPhone 或者 Android 手机.

存在问题

我的手机是 Nexus S 搭载 Android 4.0.4 的系统, 没有 root. 上传文件是的确认和取消按钮错位, 很艰难才能点到. 另外, 要上传音频和图片以外文件时, 需要另外安装文件管理器一类 app 作为浏览文件的支持.

虽然坚果云提供 Linux 客户端, 但不支持命令行. 这个蛋疼了, 我觉得 Linux 上不能用命令行跟废掉没两样. 不过坚果云的同学承诺将会有命令行功能.

注册帐号

这是我的注册邀请链接: https://jianguoyun.com/d/ref/SQzyYmaOO7Cw8aUNnUjXAg

分享本文免费升级帐号

几天前坚果云的工作人员联系上我, 希望我体验他们的产品, 也帮忙推广一下. 把玩后, 我觉得真的不错, 值得分享. 作为回报, 坚果云向我提供了几个升级帐号的机会. 包括:

• 2 个升级为上传/下载 2G/6G 的帐号
• 6 个升级为上传/下载 1.5G/4.5G 的帐号

目前为止, 坚果云上没有 2G/6G 的用户, 也只有作为奖励将内测用户升级到了 1.5G/4.5G. 只要满足以下条件就有机会免费升级帐号.

1. 在新浪微博或者腾讯微博分享本文.
2. 不管好坏, 请写上你对坚果云的看法或者说说你是如何使用的.
3. 需要加上 @吴钊 , @坚果云.

我会在 5 月 1 日对符合要求的朋友随机抽取一共 8 位读者, 通过私信联系获奖的人, 事后会公布获奖名单.

获得升级的朋友名单如下.

• 2G 上传: @羲吾, @jankerli, @徐迅爱上大 (原帐号已经是 1.5G)
• 1.5G 上传: @whisperer, @刘晓-Shaun, @吕以连, @flyingkwok

以示公平公正, 抽取 2G 帐号的方式如下图.

Related Articles

• Linux XP Desktop 2008
• Linux 是防毒专家?
• 智通人才网手机客户端
• 要不要买魅族 M8 呢?
• 手机版 WordPress 界面插件 - WPtouch
• 使用 Linux 的理由

为什么要重写?

三年过去了, IE6 的份额已经小了很多很多. 我现在服务于一个面向海外用户的网站, IE6 的占有率已经不足 1%, 我们也直接放弃了对 IE6 的支持. 但是在国内, 从我个人的博客统计来看, 还有 7% 的 IE6 用户, 而国内其他类型的网站上使用 IE6 的用户比这个多得多. 要干掉 IE6 的理由, 我在《IE6 必死》一文中已经说过了, Let's Kill IE6 脚本的历史任务还没完成, 上一个版本相对粗糙, 所以我将它重写了.

解决了什么问题?

1. 由于以前技术比较次, 脚本都是勉强写出来的, 甚至浮动区域的定位都是靠写死高度来控制的, 导致有些页面显示不正常. 现在好歹也是个前端, 效果肯定会比之前好一些, 还做上了淡入淡出显示的功能.

2. 因为之前脚本只针对 IE6 来编写, 所以其他浏览器的用户看不到预览效果, 很多想用的人没法看到效果和判断好坏. 这次多写了些兼容代码, 也可以在其他浏览器中看到效果.

3. 会有些人问我怎么实现的, 其实 Google Code 上有压缩前的源代码, 竟然还这么多人找不到. 这次干脆不压缩了, 让你们看个够.

使用方法

在 </html> 上方添加以下代码, 将简体中文的提示添加到你的网页上. (演示页面)

<!--[if IE 6]>
	<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->

该脚本现在已支持 27 种语言 (感谢各位翻译者), 其他语言版本请看查《Let's Kill IE6》.

后话

前段时间听说微音乐用了我这个脚本, 虽然我没有看到过, 不知是真是假. 如果是真的, 我觉得非常荣幸, 也感谢他们对推动 IE6 灭亡作出的努力.

最后可能有人会问, 为什么还推荐用户用 IE8 而不是 IE9 呢? 因为 Windows XP 不支持 IE9 和更高版本的 IE 浏览器...

Related Articles

• Kill IE6
• jQuery 的 slideUp 和 slideDown 动画
• IE6 必死
• WordPress 插件 Thread Twitter
• CSS 菜单列表设计
• Thread Twitter 0.5

下面是又拍的购买优惠码, 一共 20 个, 95 折优惠, 首次购买和续费都有效.

06C125DCDAD3449D, 9802542DE4A380FE, 98C488D249DB1D02, 9BB5440D7BFA52C4, A9AED625705AA5C7, AD33C87B27AD4E31, C1189192530B8D7A, C60E5D71AAB27DC8, DF31F99CB2628A23, 903E0F448CCC2C5E, 6A24AADFAC592DE7, 08A1E89B5BA35862, 0B6A753DC09CB55F, 183B5B28F46CF5A3, 1D17AC3A6AC2006A, 305359C63104B33D, 3FF2E094A380D901, 4E8ABFC2C15230C3, 5D9D2CD10D1C1245, F32A95FE79538633

请注意在购买页面的 "提交订单" 按钮下方, 有链接点开窗口输入优惠码.

关于又拍试用帐号申请

上面说的是付费时使用的优惠方式, 而又拍是可以申请免费试用的, 一般试用期是 3-7 天, 如有需要也可与他们的销售协商以延长试用期.

最近与又拍的朋友聊起注册用户成功注册和注册用户转付费用户的话题时, 对方无奈地说到, 其实很多注册用户最终没有通过试用审核时因为他们没有填写真实的电话和 QQ, 审核人员联系不上所致. 所以请各位注意, 又拍云存储的使用申请时需要人工审核的, 在注册帐号的时候请务必留下真实的电话号码和其他联系方式.

与又拍话题相关内容

又拍云存储可以用来做图片防盗链, 绑定多域名, 而最让站长们感动的应该是 CDN 高速分发. 老友 Denis 搞的 APP 每日推送 就使用了又拍的服务来加速静态文件加载, Denis 多次自豪地跟我说他们的网站几乎秒开, 并且不断怂恿我去试用.

最近博客迁移到 VPS, 做了些优化, 并且迁移了网站上几乎所有的图片, 最近写的一篇文章《弃用图床, 图片迁至 WordPress》以及之前写的《使用图床还是将图片上传到 WordPress?》都提及了我的一些考虑和观点. 这样是在为后面的网页前端的图片优化做好准备, 后面我会在这方面再做些优化尝试.

Related Articles

• WordPress 2.7 Trackbacks 的两种处理方法
• Thread Twitter 0.5
• 相关日志插件最新版试用
• TestFreaks 点评狂
• WordPress 插件 Thread Twitter
• 国庆假期在广东

将图片搬回 WordPress 对我来说是为了解决某些一直存在的问题.

保证图片的可用性

我使用过 Flickr 和图海两个图床, 都是免费可外链的.

事实上两年前我已经停用 Flickr 了, Flickr 上的图片在国内访问速度很不稳定, 去年改版后甚至连原图都找不到了, 而且每年总有那么一些日子被墙, 完全没法正常使用了.

图海在国内用算不错的, 而且系统不断完善, 越来越好用了. 但是图海上的图片在海外打开超级慢, 相当于不可用的程度了; 而且每年 VIP 到期的时候, 外链的图片会失效, 重新激活后才能正常显示, 十分蛋疼.

除了这些, 不过什么图床, 总会出现几张过期图片, 至今我都不知道为什么原本好好的就不能外链了, 只能默默地重新上传.

图片搬到 WordPress 后, 如果设置得当, 只要博客能跑, 图片显示肯定是没问题的.

利用 WordPress 的缩略图和画廊页面

一般我们会在文章后面紧跟一批相关文章的链接, 一方面希望用户继续阅读, 另一方面建立内链方便爬虫收录. 原来只有文字的一排排链接实在很难吸引用户按下鼠标, 但有图片点亮这个区域, 可以带来多一些的点击. 如下图, 我将存文本的内容改成现在比较流行的相关文章风格.

等图片质量起来, 还可以利用 WordPress 自带的画廊功能 (image.php) 来建立一批图片页面, 在页面上放上文章的摘要和相关文章. 必定可以带来一些流量.

后话

图片搬迁有很多方法, 也可以批量处理. 可以写脚本通过 SQL 获取文章中的图片, 处理后回写数据库; 还可以利用火车头等爬取网站的程序办你完成. 但如果文章比较多, 建议不要一次性搬迁, 分几次来搬, 以免爬虫反应过激.

搬完之后, 我又有了新的问题, 以前很多文章没有用图片, 所以在相关文章里面有很多缺失图片的. 不管了, 以后多用插图好了.

Related Articles

• 使用图床还是将图片上传到 WordPress?
• 巧用 WordPress 缩略图
• WordPress SEO 技巧
• 为 WordPress 的 Read more 加上 nofollow
• 为 WordPress 的评论链接加上 nofollow
• WordPress 图片水印插件 - Watermark Reloaded

ChurpChurp 是什么?

拿福能做的是传统的网站广告引流和推广, 而 ChurpChurp 侧重的是微博和社区网站的推广活动, 这里有一张图, 可以清晰地让我们了解 ChurpChurp 在做什么.

ChurpChurp 希望用户通过自己在社区的影响力来推广一些商品和网站, 而用户从粉丝的点击和关注行为获取金钱回报. 很多朋友应该见过, 很多出名的微博会在他的微博中夹杂很多不相关的产品推荐, ChurpChurp 就是这些广告商和终端用户的中介.

相比博客推广, ChurpChurp 有不同?

与博客广告不一样, 微博等社会化网站的用户结构很不一样, 所以 ChurpChurp 的转发工具也做得简单易用, 就算是 click-click 用户也能使用. 好像转发一下就能获得佣金, 肯定很多人会尝试, 但因为相关度和影响力等问题, 不一定能赚到钱. 对微博用户来说, 起码是多了一个展示价值的机会, 好事.

但事实上能赚到钱的人会很少, 会有很多人退出. 所以渐渐的, 可能 ChurpChurp 会变成某些微博达人的盈利工具. 我觉得人家花那么多时间为大家找有趣的话题, 通过推广赚点钱很合理的, 有这么个工具达人们或许能多一些发微博的动力.

[2012 年 3 月 30 日更新信息] 3 天过去, 我已经通过转发一条微博在 ChurpChurp 赚了 15 块钱.

ChurpChurp 可能怎样死去?

ChurpChurp 的出现是必然的, 因为我们需要这样的工具, 可爱的吉祥物也争得很多眼球的关注, 但是有些问题如果不解决, 很难活下来.

• 广告太少, 淡忘在人们的视线中. FeedSky 就是这样半死不活的, 现在拿福能的广告也太少了点.
• 单价太低, 相关性差, 导致用户收入少, 甚至无收入.
• 微博发布自己的广告平台, 排挤第三方工具. 在中国这是有可能的, 那样的话可能立即消失.

总结

现在 ChurpChurp 支持新浪微博和腾讯微博, 貌似以后也会支持豆瓣, 开心和人人. 工具简单易用, 点击一下就转发出去了, 现在转发有机会获得玩偶一只. 详细的介绍可以转到活动页面去看看, 也可以到注册推广页看看.

最后吐槽一句, 虽然同属拿福能, 但他们的帐号和广告佣金算在两个帐号里面.

Related Articles

• 2008 奥运火炬接力路线图
• WordPress 上的 Feedsky 统计插件
• 发放又拍优惠码
• Feedsky 真会开玩笑
• 每日同步 Feedsky 订阅数
• 支付宝 2009 年开始收费

因为实现原理比较简单, 本文就不扯技术方面的话题了, 只会讲讲使用方法, 要研究的同学请自己默默地看代码去吧.

功能描述

在页面中注入回到顶部 (Go Top) 按钮, 并为该按钮绑定跟随浏览器窗口和回到页面顶部的事件. 需要 jQuery 支持, 如果同时引入 jQuery 的 ScrollTo 插件将有滚动回到页面顶部的效果, 否则只是直接定位至顶部.

在 IE6 中, 因为不支持浏览器跟随功能, 所以通过跟随页面滚动来虚拟跟随效果, 在滚动页面的时候隐藏回到顶部按钮, 滚动停止时再显示按钮.

参数描述

• pageWidth: 页面宽度 (正整数), 如图中 A 所示.
• nodeId: 回到顶部按钮的 ID (字符串).
• nodeWidth: 回到顶部按钮的宽度 (正整数), 如图中 B 所示.
• distanceToBottom: 回到顶部按钮到页面底部的距离 (正整数), 如图中 C 所示.
• distanceToPage: 回到顶部按钮到页面右边的距离 (正整数), 默认 20.
• hideRegionHeight: 不显示回到顶部按钮的顶部区域高度 (正整数), 如图中 D 所示.
• text: 回到顶部按钮内显示的文本 (字符串).

使用步骤

1. 下载所需文件

jQuery, jQuery ScrollTo (可选) 和 Go Top 功能脚本 (备用下载地址), 放置到可以外链的网盘或者网站上.

2. 插入 JavaScript 和添加执行脚本

在页面底部 </body> 之前加入代码例子如下:

<script src="script.js"></script> <!-- 如果已在网站的其他地方引入 jQuery, 请不要在次引入 -->
<script src="jquery.scrollto.js"></script> <!-- 加入该插件将带有滚动回到页面顶部效果, 否则直接定位到顶部 -->
<script src="go-top.js"></script>
<script>
/* <![CDATA[ */
(new GoTop()).init({
	pageWidth		:980,
	nodeId			:'go-top',
	nodeWidth		:50,
	distanceToBottom	:125,
	hideRegionHeight	:130,
	text			:'Top'
});
/* ]]> */
</script>

3. 修改网站样式文件

加入回到顶部按钮对应的样式, 假设回到顶部按钮 ID 设置为 go-top, 那么可以添加代码如下:

a#go-top{background:#E6E6E6;width:50px;height:25px;text-align:center;text-decoration:none;line-height:25px;color:#999;}
a#go-top:hover{background:#CCC;color:#333;}

这里的样式请自由发挥, 但 width 请与脚本参数中的 nodeWidth 保持一致.

后话

月初我换了台电脑, 分辨率提高了很多, 博客两边多出来很多空间, 而当时为了省事做的 Go Top 按钮一直贴近浏览器窗体的右边界, 相当难看. 所以上周花了点时间来重写了一下相关代码, 当初公司用的相关组件也是我写的, 再整个 jQuery 的也不费时. 然而我非常喜欢 Alibaba.com 搜索页面 Go Top 按钮的设计, 图片盗了过来.

这个脚本支持所有网站使用, 为此, 我没有将它做成 WordPress 插件. 如果使用遇到问题, 请在此留言. 几年前我写过一个 JavaScript 实现变速滚动回到页面顶部的文章, 有兴趣的朋友也可以看看.

Related Articles

• Lazy Load, 延迟加载图片的 jQuery 插件
• jQuery 的 slideUp 和 slideDown 动画
• jQuery 导航菜单
• WordPress 搜索框添加文字提示
• 在主题中添加 LavaLamp 菜单效果
• 为网站添加分享按钮

Firefox 以外的浏览器

测试过 IE, Chrome, Safari, Opera, 浏览器访问 CSS 中的图片时, 会以页面 URL 作为 referer 发出请求.

Firefox

测试过 Firefox 10 和 Firefox 11, 访问 CSS 中的图片会以 CSS URL 作为 referer 发出请求.

当时我只对 www.neoease.com 开放了图片访问, 但存放 CSS 文件的 style.neoease.org 不能访问, 所以样式中的图片全部不能正常显示.

解决问题

现在我在 .htaccess 中对域名 style.neoease.com 加上例外, 问题就解决了.

另外, 有些朋友说在 Google Reader 上也看不到图片. 因为我之前只对 http 的 URL 加了例外, 没有对 https 的 URL 添加例外, 所以无法正常访问图片, 现在问题应该也解决了.

最后感谢众多同学给我足够信息将问题排查出来.

Related Articles

• 在 Firefox 标签页中打开书签管理器
• Firefox 多个版本共存
• 手动为 Firefox 添加支付宝安全插件
• Firefox 3 的默认主题
• Firefox 扩展, ScrapBook
• Google Reader Gadget

搭建网站服务

在 Linode 上光搭建个 LAMP 是相当简单的, 在后台点选一下就好了. 麻烦的是安装一些插件, 而对于一个已经用习惯集成系统的站长来说, 这些应该都是默认支持的, 比如: Apache 的 rewrite 模块. 类似的一些插件都是网站上线后, 我发现网站不可用, 或者功能缺失才紧急给装上去的.

这么麻烦的事情, 不应该让每个人都走一遍, 大量重复劳动. 所以有了类似 LNMP 一键安装包的工具, 只是我不折腾一下觉得对不住这台 VPS, 而且我也想知道整台机器的情况, 以方便以后排查问题.

服务器稳定性

当时我买的服务器放在美国达拉斯, 因为我有一些海外流量, 也因为传说达拉斯机房的线路好. 这个决定令我忙了一个星期, 那段时间我发现 IO Rate 高于一般值很多, 老给我发警报邮件, 而网友们都说那是正常的, 可以上调警报标准. 但其实那很不正常, 甚至多次因为这个问题宕机. 我试了很多方法, 包括关掉一些服务, 如: Linux 的自动更新功能. 但问题始终解决不了. 于是, 我怀疑是机房的问题, 打算更换机房.

换机房倒是相当容易, 我给客服写了个邮件, 几分钟就得到回应, 并在当天就将服务器进行了迁移, 如果要为服务打分, 绝对是非常满意那一档的. 最后机房迁到了日本东京. 选择日本机房是因为靠近中国, 国内访问速度应该会比较好. 而让我吃惊的是, 机房搬迁后, 一切问题都解决了, 我截了个图, 是机房搬迁前后的流量情况, 如下图.

难道真的是机房问题?

总结

弄了这么些天, 总算稳定点能用起来了, 搞个破网站不容易的. 真的不是流量问题, 或者功能不能满足, 还是想 IDC 买个虚拟主机好了. 别的不说, 省下的时间可以多写几个文章了. 我之前写过一篇关于选择博客主机的文章, 有需要的朋友也可以翻翻.

Related Articles

• 选择博客主机 - CloudLinux
• 选择博客主机
• 主机点评网
• 使用 Linux 的理由
• Linux XP Desktop 2008
• QQ for Linux 1.0 Preview

其实显示器不支持竖屏, 所以我 DIY 了一把, 拆开机托, 用大号透明胶粘了起来.

有多余屏幕的朋友真可以竖一个, Windows 7 搞双屏很方便, 步骤如下:

1. 修改之前请确认你的机器有对应显示器需要的驱动.
2. 在桌面右键打开菜单, 点击打开 "屏幕分辨率" 对话框.
3. 多重显示一栏选择 "扩展这些显示".
4. 保存设置.
5. 再次打开 "屏幕分辨率" 对话框.
6. 点击不同的屏幕修改方向和分辨率, 并保存修改.

我竖起来的屏幕最大能设置分辨率在 900x1440, 比现在一般的网页要窄一些, 有点郁闷嗨...

Related Articles

• WordPress 插件 Thread Twitter
• 广州推友聚会
• 关注新浪微博
• Thread Twitter 0.5
• 通过 Gtalk 更新 Plurk
• Twitter 客户端推荐