Bolo的博客 » Internet

面向Geek的优惠信息订阅网站 – AppSumo

bolo — Thu, 14 Jul 2011 15:09:42 +0000

AppSumo是一个面向 Geek 的优惠信息订阅网站，如果你是 Geek 或者技术折腾人士的话，只要在首页输入你的邮箱，你就可以定期收到各种你感兴趣的优惠信息，例如最近有一个原价总值$585的17个 WordPress 收费主题打包购买只需$75的优惠活动就非常给力。另外还会有一些程序开发和网站分析的培训课件优惠，对个人技能的提升也很有好处。

Random Posts

浅谈博客 SEO(搜索引擎优化) 技巧

bolo — Sun, 25 Apr 2010 07:35:01 +0000

提高网站流量最好的方法是针对搜索引擎进行优化(SEO)。SEO 是一门需要长期研究的学问，随意而为的话网站不可能获得尽可能高的排名，但肆意堆砌关键词又会受到搜索引擎的惩罚。本篇文章仅针对博客浅谈一下搜索引擎优化技巧，SEO 高手可以忽略。

如何定义关键词(Keywords)和页面描述(Description)

页面关键词和描述的作用是为搜索引擎提供相关度的依据，对搜索排名影响非常大。搜索引擎的基本工作原理可以看下图。

我们再分析一下搜索结果的结构，我搜索的关键词为“bolo 博客”，其中一条结果如下图：

我们可以发现搜索结果包含了网页的标题、描述和 URL ，并且 Google 为我高亮和加粗了关键词。因此我们进行优化的时候可以针对页面标题、Keywords、Description 和 URL 下手。

对于网页的标题，我们应该尽量让标题详细些，这样能包含更多的关键词，并且用户也更易于识别页面所说的话题。如这篇文章，在“SEO”的后面我还加了一个中文注释，这样一来已经包含了两个关键词。而且不知道 SEO 是什么的人也可以知道这个词就是“搜索引擎优化”的意思。但我们也必须把标题控制在60个字符以内。

对于页面描述，我惯用的方法是使用文章的总结和小标题，这样做的目的是说明话题的中心和所包含的内容。

对于 Keywords 的采用，我不建议优先从正文里提取，而应该优先从标题和页面描述里提取出现次数最多的内容相关词。这样做的目的是使搜索引擎计算的关键词密度更大，使搜索引擎认为这个页面是一个关键词相关度非常高的页面。其次我们可以把文章涉及的方面都设为关键词。例如某篇文章涉及了 PHP 、 CSS 和 JavaScript，那么我们可以把 PHP 、 CSS 和 JavaScript 都设置为关键词。另外我们需要注意两点：1.不要过度堆砌关键词，关键词密度太高会被认为作弊；2.不要使用和正文内容无关的关键词。

在文章的 URL 里，我们也应该包含部分已经被采用为 Keywords 的关键词。在 URL 优化方面做得最好的名站是维基百科，他们每个词条的 URL 都是该词条的名字。

内容的优化

在做好了对搜索引擎的优化以后我们还应该对文章的内容进行优化，这里我分为三个部分：权重标签、图片优化和版权信息。

权重标签

权重标签是指用来突出内容的重点的 HTML 标签，包括 H1 、H2 、 Strong 、 em 等等。H1 通常每个页面只能出现一次，我们通常用 H1 标签来放置网站名，而 H2 标签则用来放置文章的标题。因此在正文里我们还可以使用的标签还有 H3~6 、 Strong 和 em。他们的权重顺序是 H3 > H4 > H5 >H6 > Strong 和 em。

有些人喜欢通过设置不同的字号和颜色来表示文章的小标题。这并不是最好的做法，我的建议是使用 H3~6 标签来表示小标题，按照标签的等级来划分小标题的等级，样式可以通过 CSS 来处理。对于文章中的重点词句，我们应该用 Strong 标签进行加粗处理，这样无论是对于读者还是搜索引擎都有好处。

图片优化

在长期的观察中，我发现有些人不爱为文章中的插图加上 alt 属性描述，这是对搜索引擎十分不友好的一种做法。因为搜索引擎本身不不能识别图片的内容，我们为其加上 alt 描述后，搜索引擎不但能像抓取文本一样获取图片的内容，还能让图片出现在图片搜索结果中。

版权信息

很多人在转载文章的时候不喜欢在文章的结尾加上原文的链接，其实这不是一个好习惯。因为原文发表时间先于你，在这段时间里搜索引擎已经对这个链接的内容非常了解，因此在你转载的文章结尾加上原文链接可以让搜索引擎更快地知道你的文章所说的内容是什么，间接地也能更快地提高权重。这点在进行翻译转载时效果明显。另外当你从维基百科上转载了内容时，不妨加上词条的链接，因为 Google 熟读维基百科。为了进一步的让搜索引擎知道你所链向的页面是一个什么页面，我们还可以为这个链接加上 title 属性。

后记

对于搜索引擎的优化暂且浅析到这里，纯属个人经验。想自己的网站更快被搜索引擎认可，还是那句：内容为王，原创更佳。

GoDaddy Grid 主机

bolo — Thu, 11 Mar 2010 13:30:27 +0000

GoDaddy除了是全球最大的域名注册商以外，最近正在虚拟主机业务发力，其虚拟主机在用户中口碑也是不错的。Grid主机是GoDaddy正在测试中的一个项目。和其他plans相比，Grid主机的特点是便宜，目前只需要4.99USD/mo（至少买三个月）的价格就可以买到100G空间，1TB流量的主机（Linux和Windows同样价格）。Grid主机目前支持PHP、.net、Perl和Python语言，未来还将支持Ruby和Java等，GoDaddy此款主机目的应该是吸引程序员。

主机性能

既然这款主机如此强大，那么性能如何呢？从我上传的探针来看，Grid所用的服务器有两个Intel Xeon L5506 CPU，48G内存，并且内存占用率低于20%（Bluehost大约在70%~80%左右），用户最多能使用64M内存（是Bluehost的两倍了）。经我测试，Grid主机的性能比大名鼎鼎的Bluehost要好。

丰富的程序库

GoDaddy号称其主机拥有超过150万个免费程序的程序库，可以实现自动安装，这也是广大折腾人士的福音。虽然这只是宣传口号，但主流的程序还是有的，而且都是最新版！

缺点

更改主机配置后不是即时生效，需要等待一段时间
如果使用非GoDaddy注册的域名，需要修改NS服务器，并且管理域名困难

在使用GoDaddy Grid主机的过程中，他的缺点很影响情绪，但它的确是一款性能十分优秀的虚拟主机，这是无可否认的。

短网址程序评测

bolo — Sun, 07 Mar 2010 06:30:45 +0000

随着微博客的兴起，博客们也出现了搭建个人短网址的热潮。自建短网址程序利于在微博客上传播自己的链接，对自己博客PR的提高也有一定帮助。今天对部分知名的开源短网址程序进行一次简单的评测，方便大家选择。

Phurl

Phurl是Google Code上的一个开源项目，作者专注于网址跳转功能，最大的亮点是服务器不支持Apache mod_rewrite 也可以正常工作，而且支持http、https、ftp、ftps、mailto、news、mms、rtmp、rtmpt和e2dk等协议的缩短，十分强大。有验证码功能，可以防止恶意刷服务器。Phurl的不足之处是后台功能非常简单。

kissabe

kissabe号称是克隆tinyurl的短网址程序，除了缩短网址以外还可以缩短E-mail地址和长TXT文本，甚至可以提供图床功能。这个程序对用户体验十分执着，提供了浏览器书签和Firefox插件，用户不需要访问程序主页就可以缩短当前浏览网址。但美中不足是源代码里的JavaScript脚本有点问题，有技术的人请先修改JavaScript脚本再使用。kissabe3.0版基于joy框架搭建对服务器有一定要求，个人建议使用2.1版本。

URLi

URLi是一个十分简洁的短网址程序，前台只提供个性缩短功能和浏览器书签，是一个超轻量级的短网址程序。在进行网址跳转时可以设置跳转页面。

urlShort

urlShort是一个基于GNU GPL协议的短网址程序，提供了比较强大的浏览器书签功能和一个简单快捷的API功能，但程序的实行效率不够高。

YOURLS

YOURLS是最受WordPress blogger们欢迎的短网址程序，程序作者做了一个WordPress插件，可以为博客文章生成一个短网址，而且能自动发布到Twitter上。YOURLS还提供了强大的API功能，你完全可以用它来建立一个公开的短网址服务。

Shorty

Shorty是一个用户定制功能非常强大的短网址程序，官方的也是页面也十分漂亮，可以根据自己链接的内容自定义多个关键词，但我觉得定制多个关键词以后生成的短网址已经跟网址缩短的目的相反了。

后记

TinyURL作为短网址服务的鼻祖，很多开源短网址程序都是以它作为模仿对象的，虽然功能和性能上还有差距，但已经能完全满足作为一个短网址服务的需求。

Random Posts

BlueHost Gzip优化JS和CSS传输

bolo — Wed, 03 Mar 2010 03:17:51 +0000

Bluehost是美国一个著名的主机商，以稳定性著称，全球有超过100万个网站托管在那里详细的介绍可以看鱼叔的介绍。我使用Bluehost已经有差不多两个月了，从刚开始购入这款主机起我一直断断续续地对我的博客进行优化，使页面的打开速度能得到提升。Bluehost对页面传输的优化比较怪，html文件默认是进行Gzip进行压缩的，但对CSS和JS文件不进行压缩，自己也不可以通过.htaccess文件让mod_deflate对CSS和JS文件进行压缩。今天我们只需要使用mod_rewrite提供的功能就可以实现全站CSS和JS压缩。

1.使用Minify库进行压缩

Minify是Google Code上的一个开源项目（具体介绍可以看这个页面），作者整合了国外多个专家的研究成果，形成了一个功能强大的库，有很多大型站点也在使用这个库进行压缩。

使用方法

首先下载Minify的最新版本，把压缩包里的min目录上传到站点根目录，然后打开.htaccess编写rewrite rule：

<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^(.*\.(css|js))$ min/index.php?f=$1&debug=0 [L,NC]
ifmodule>

2.使用Combine.php进行压缩

Combine.php是一个不知名的国外开发者写的一个小程序，同样可以压缩站点的CSS和JS文件，但与Minify相比Combine.php是超轻量级的，整个文件只有不到5K大小，大家可以点击这里下载。下载后把文件上传到网站根目录，然后编写rewrite rule：

<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1
ifmodule>

后记

这两个方法大家选其一使用，两个方法都是在服务器对所有CSS和JS先进行整合再传输，效率是比较高的，而且这两个方法也适合其他不能直接通过mod_deflate进行压缩的主机。下面是我优化前后的对比。

使用Gzip压缩前文章页面的JS文件总体积达到100+K之巨。

使用Gzip压缩以后同一个页面的JS总体积已经被压缩到不足40K。虽然效果不及采用mod_deflate好，但我为了减少服务器负载只进行了轻度压缩，两个方法对于没有mod_deflate的主机来说是个折中的方法。

关于Bluehost降低服务器负担的方法可以看胡老板的《BlueHost/HostMonster修改文件上传大小限制和内存不足》或Google其它优化技巧，我要说的是：Bluehost是一款非常耐玩的主机。

不要说话，闭眼静听

bolo — Sat, 02 Jan 2010 08:18:01 +0000

NoSay.in 是我昨天刚上线的音乐博客，采用WordPress博客平台搭建。本博客注重用户体验，致力摆脱网络上已有的音乐博客的缺陷，为广大音乐爱好者提供一个舒适的休憩地。
在最近一段时间里，我觉得ImBolo这个博客写的东西还是比较闷的，但在网上又找不到一个自己喜欢的音乐类博客。一天一歌是我比较喜欢的一个音乐博客，可是博主由于工作原因，现在这个博客的周期比女人还长了（1t1g看了勿怪，纯属玩笑）。上网如此无聊，那我就自己做一个音乐博客，分享一下我听的歌吧。
前段时间迷上了虾米这个音乐社交网络，觉得非常过瘾，这使我下了做一个音乐博客的决定，并且自己做了一个插件，用来改善听歌时的体验。
差点忘了，介绍一下这个Logo。

Logo:

这个Logo出自中国非著名伪平面设计师Bolo之手，本来Bolo的构思是做一个手指立在嘴唇面前，安静的图案。可是Bolo的绘画功底确实并不怎么样，而且是第一次装牛B在同学面前用AI鼠绘，结果勾出了嘴唇不会上色。手指画了一个，剩下那四个觉得画起来太麻烦，于是就用一个圆代替了。在拼合图形的时候才发觉自己无意中做出了一个出乎自己意料的Logo。
那只立起一只手指的手，怎么看起来像一个音乐的符号呢？那个简陋的嘴唇放在圆圈里，怎么像一个笑脸呢？OK，导出，这Logo太令我满意了。

NoSay.in的发展方向

由于一个很重要的原因，Bolo很懒，懒得每天上网搜刮新歌（那些三天五日出一首新歌，十天半月出一个专辑的歌手的歌肯定不好听）。因此我发上去的歌曲九成以上已经是大家耳熟能详的了。更多的歌曲希望能由广大网友推荐给我，这几天里我会做一个点唱栏目的，把你的感受，要送这首歌给谁等资料附上，我看到以后会马上发表，然后那把网址发给你的女朋友、姐妹兄弟……大家又多了一个哄人开心的方法了。
NoSay.in的原则是尽量发原唱的歌曲，拒绝低俗歌曲，那些喜欢听恶搞歌曲的人可以无视。

收集好的建议

同时我还会采用一些比较新鲜的点子来发展NoSay的读者，音乐博客的更新频率比较快，一天可能更新几次，大家可能会怕自己的阅读器被炸而不敢订阅，大家有什么好的建议呢？

送一篇自己的小日记

元旦已经过了两天，这两天，广州下起了雨。本来想趁元旦假期到处溜达的，看来只能安排到明天或者后天了。到购书中心找一本关于JavaScript的书，然后到处走走。我还没有找到伴，不知到时候有没有人愿意陪我。

Random Posts

10个节约开发时间的CSS技巧

bolo — Sat, 26 Dec 2009 12:26:00 +0000

CSS已经成为网页前段设计一个非常重要的部分，由于写CSS时需要考虑的问题非常多，老手们创建新页面是通常会沿用以前的CSS框架。但是新手没有自己的框架，这篇文章可以给新手们一些启示。

1.简单的纯CSS Tooltip

通过这些代码，你可以做出简单的Tooltip。这是CSS代码：

a:hover {
	background:#ffffff; /*要兼容IE6的话必须添加背景色*/
	text-decoration:none;
}
a.tooltip span {
	display:none;
	padding:2px 3px;
	margin-left:8px;
	width:130px;
}
a.tooltip:hover span{
	display:inline;
	position:absolute;
	background:#ffffff;
	border:1px solid #cccccc;
	color:#6c6c6c;
}

HTML代码如下：

1	Easy <a class="tooltip" href="#">Tooltip<span>This is a Example by imbolo.com.</span></a>.

效果如图。

2.重设基本样式

为了统一不同浏览器对各种HTML标签的默认样式的渲染，我们必须从新定义各种标签的样式，这样能对以后的开发带来方便。重新定义各种HTML标签只需要在CSS的开头加入以下代码。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: none;
}
 
/* 元素获得焦点时的样式! */
:focus {
	outline: 0;
}
 
/* 特殊文本的样式! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* 细线表格样式 */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3.方便的CSS调试器

这段代码可以把页面上的各种标签嵌套用不同的线条划分出来，方便你找出BUG。

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

4.使一个未设定宽度的DIV居中

对于一个有固定宽度的DIV容器，你可以轻松地通过margin:auto属性令他居中。如果要居中的DIV容器并没有设置宽度的话，你可以使用下面的CSS代码：

.content {
	margin: 0 auto 8px;
	display: table;
	}
 
.content div {
	display: table-cell;
	}