我想网

在2010年，JavaScript框架继续日渐普及，这使得大量的插件被开发出来。满目琳琅，难以 选择心头之好。WDL的作者从大量的优秀jQuery插件精心筛选出一些对Web Designers有帮助的和具备非常不错的视觉效果的Best of the best。

2010年最佳jQuery插件（排名不分先后）：

Nivo Slider

(全文 …)

Tags: JQuery, Plugin
Posted in JQuery, Plugin 评论关闭

jQuery 1.5正式版于1月31日如期发布！ jQuery是一个JavaScript库，它简化了HTML文档遍历，事件处理，动画和为网络快速发展的Ajax交互。变化包括一个重写的Ajax模 块，划分 jQuery子类的能力，以及许多其他功能增强，修复各种内存泄漏，性能改进和加强跨浏览器的兼容。鼓励测试该版本的用户提供反馈和报告他们遇到的任何错 误。 Right on schedule jQuery 1.5 is ready for consumption!
This release has been a long time coming and has been a real team effort. Please take this opportunity to thank members of the jQuery Team and the jQuery bug triage team for their help in getting this release out the door.

下载地址：
jQuery Minified (29kb Gzipped)
jQuery Regular (207kb)

Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js
(全文 …)

Tags: download, JQuery
Posted in JQuery 评论关闭

由于搜索引擎的泛滥，网络爬虫如今已经成为全球互联网的一大公害。除了专门做搜索的Google，Yahoo，微软，百度以外，几乎每个大型门户网站都有 自己的搜索引擎，搜狐，腾讯，网易。再加上十分流氓的社区搜索奇虎等等，国内大大小小叫得出来名字得就几十家，还有各种不知名的几千几万家，另外还有国外 各种奇奇怪怪的搜索引擎。只要你做的网站是内容丰富的网站，就避免不了被几千几万个爬虫每天爬来爬去。

大的搜索引擎如Google的爬取网页十分智能，爬取频率和爬取压力都没有那么高，对网站资源消耗还比较少，最怕各种各样弱智的爬虫，对网页内容的分析能力很差，经常并发几十上百个请求循环重复抓取，对网站往往是毁灭性打击。

我随便举几个例子：网易有道搜索曾经在一个上午的时间就访问了JavaEye网站60多万次请求，把网站访问拖得很慢，被我们立刻封杀。还比方说 雅虎爬虫的爬行也十分弱智，经常循环爬取，爬行频率非常高，也被我们封杀掉了。然而最可怕的还是奇虎的爬虫，他托管在河北廊坊机房的服务器上面的爬虫，经 常并发上百个请求同时爬取，我有次解除了对该机房的封锁，几秒钟之内，JavaEye网站就彻底无法访问，观察web servr上面堵塞了几百个来自奇虎爬虫的请求。

除了这些叫得出来名字的爬虫之外，还有很多程序员自己写的山寨爬虫，特别是一些菜鸟程序员，完全没有编写爬虫的经验，写出来的爬虫破坏力极强。曾 经有一次我在JavaEye的日志里面发现一个User-Agent是Java的爬虫一天之内爬行了将近100万次动态请求。毫无疑问是个利用JDK类库 编写的简单爬网页程序，由于JavaEye网站内部链接构成了回环导致该程序陷入了爬行死循环，而程序没有相应的处理代码，导致网站资源被大量消耗。

对于一个原创内容丰富，URL结构合理易于爬取的网站来说，简直就是各种爬虫的盘中大餐，很多网站的访问流量构成当中，爬虫带来的流量要远远超过 真实用户访问流量，甚至爬虫流量要高出真实流量一个数量级。即使像JavaEye这样一向严厉封杀爬虫的网站，只要稍微松懈一段时间，爬虫流量就能轻易超 过真实访问流量的2倍以上。对于大型互联网网站来说，有足够的硬件资源来应付爬虫带来的庞大访问压力，也有足够的资源和能力去解决这个问题。但是对于中小 型互联网网站来说，爬虫带来的就是毁灭性打击了。

JavaEye网站也一直被网络爬虫问题所困扰，并且不断采用一些新的手段对付网络爬虫，网站和爬虫之间的战争就像此消彼长的拉锯战一样。

一、野蛮型爬虫

在2006年的时候，JavaEye遭遇的网络爬虫基本上都是比较野蛮的爬虫，动不动上百个并发请求一起过来，网站立刻被拖慢或者干脆无法访问， 例如奇虎的爬虫就是这样（百度的爬虫早期也是如此，现在已经斯文多了）。这种爬虫是很容易识别出来的，通过netstat信息查看，或者web server提供的并发连接信息，比方说lighttpd的mod_status就可以非常直观的观察到当前每个并发连接的状态，请求的地址和IP，以及 连接时间。

对付这种野蛮的爬虫其实没有什么太好的办法，只有一种办法，就是直接封杀。然而爬虫往往并不分布在一台服务器上，而是很多台服务器上面，因此你封掉一个ip地址根本不解决问题，所以我们采取的办法就是直接封杀爬虫所在的C网段地址，例如：

iptables -A INPUT -i eth0 -j DROP -p tcp –dport 80 -s 84.80.46.0/24

除此之外还可以采取一些辅助的解决办法，比方说在web server上面限制每IP并发连接数量，如果超过一定的并发连接数量，就直接返回拒绝请求的页面。例如lighttpd可以这样配置：

$HTTP["url"] =~ “^/topics/download/” {
evasive.max-conns-per-ip = 2
}

限定每IP只能并发一个线程下载。

总的来说，这种蛮不讲理的爬虫相对比较稀少，碰到一个封杀一个C段地址基本可以解决此类爬虫。现在JavaEye已经很少遇到这种爬虫了。

这里要特别说明一点：有很多人提出一种极度脑残的观点，说我要惩罚这些爬虫。我专门在网页里面设计不消耗资源的静态循环链接页面，让爬虫掉进陷 阱，死循环爬不出来。能出这种弱智点子的人一看就知道纸上谈兵。根本用不着你设置陷阱，弱智爬虫对正常网页自己就爬不出来，你这样做多此一举不说，而且会 让真正的搜索引擎降低你的网页排名。

而且运行一个爬虫根本不消耗什么机器资源，我在自己的笔记本电脑上面跑个Java程序，发起上百个线程，就算死循环了，也消耗不了多少CPU，根 本不消耗我什么。相反，真正宝贵的是你的服务器CPU资源和服务器带宽，谁消耗谁阿？做程序员最可怕的不是弱智，而是自己不知道自己弱智，总以为自己很明 智。

二、爬虫的海量抓取和海量的各种小爬虫

有很多智能程度比较低的爬虫，比方说雅虎和网易有道的爬虫，它虽然并不会以很高的并发连接爬取你的网站，但是它会以较低的频率持续不间断爬取网 站，一天下来至少爬取几十万页面，极大消耗了服务器资源，拖慢服务器的响应速度。而且由于它爬取的并发不高，一般不容易暴露自己，特别是雅虎的爬虫，分布 很广，来自大约二十几个C段地址，狡兔n窟，你很难找全它所有的C段地址，因此通过简单的封杀IP地址段，对这种爬虫基本无效。

另外还有很多各种各样的小爬虫，特别是以国外的各式各样稀奇古怪的搜索引擎为主，它们都在尝试Google以外创新的搜索方式，每个爬虫每天爬取 你几万的网页，几十个爬虫加起来每天就能消耗掉你上百万动态请求的资源。由于每个小爬虫单独的爬取量都很低，所以你很难把它从每天海量的访问IP地址当中 把它准确的挖出来，因此也没有办法通过直接封杀IP的方式对付它们。

怎么解决这个问题呢？ 其实这些爬虫都有一个共同的特点，在爬取网页的时候，会声明自己的User-Agent信息。我们知道每个浏览器都有自己独一无二的User-Agent 信息，比较正规的爬虫，特别是来自国外的爬虫都比较规矩，会声明自己的User-Agent信息，因此我们就可以通过记录和分析User-Agent信息 来挖掘和封杀这些爬虫。

首先我们需要记录每个请求的User-Agent信息，对于用rails开发的JavaEye网站来说这很简单，我们在 app/controllers/application.rb里面添加一个全局的before_filter，来记录每个请求的User-Agent信 息：

logger.info “HTTP_USER_AGENT #{request.env["HTTP_USER_AGENT"]}”

这样就会把每个请求的User-Agent信息记录到production.log里面去。

然后我们统计每天的production.log，抽取User-Agent信息，找出访问量最大的那些User-Agent。但是这里要注意的 是我们只关注那些爬虫的User-Agent信息，而不是真正浏览器User-Agent，所以我们还要排除掉浏览器User-Agent，最后我们就可 以得到一个访问量最多的爬虫列表。要做到这一点仅仅需要一行shell：

grep HTTP_USER_AGENT production.log | grep -v -E ‘MSIE|Firefox|Chrome|Opera|Safari|Gecko’ | sort | uniq -c | sort -r -n | head -n 100 > bot.log

这行shell命令从production.log里面抽取包含User-Agent的日志，然后排除真实浏览器的User-Agent，再统计 访问量，然后按照访问量从大到小排序，最后挑选排名前100的记录到日志文件里面去。或者你也可以直接把输出内容发送到你的邮箱里面去。

最终的爬虫统计结果类似下面这样：

57335 HTTP_USER_AGENT Baiduspider+(+http://www.baidu.com/search/spider.htm)
56639 HTTP_USER_AGENT Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
42610 HTTP_USER_AGENT Mediapartners-Google
19131 HTTP_USER_AGENT msnbot/2.0b (+http://search.msn.com/msnbot.htm)
8980 HTTP_USER_AGENT Mozilla/5.0 (compatible;YoudaoFeedFetcher/1.0;http://www.youdao.com/help/reader/faq/topic006/;1 subscriber;)
8034 HTTP_USER_AGENT Sosoblogspider+(+http://help.soso.com/soso-blog-spider.htm)
7847 HTTP_USER_AGENT msnbot/1.1 (+http://search.msn.com/msnbot.htm)
4342 HTTP_USER_AGENT Mozilla/5.0 (compatible; Google Desktop)
3183 HTTP_USER_AGENT
3115 HTTP_USER_AGENT Mozilla/4.0
2900 HTTP_USER_AGENT WordPress/2.7
2096 HTTP_USER_AGENT Apple-PubSub/65.11
1891 HTTP_USER_AGENT Zhuaxia.com 1 Subscribers
1201 HTTP_USER_AGENT Apple-PubSub/65
1154 HTTP_USER_AGENT Mozilla/5.0 (compatible;YoudaoFeedFetcher/1.0;http://www.youdao.com/help/reader/faq/topic006/;2 subscribers;)
1059 HTTP_USER_AGENT FeedBurner/1.0 (http://www.FeedBurner.com)

从日志就可以直观的看出主要是Google，baidu，微软msn,网易有道和腾讯搜搜的爬虫，以及每个爬虫爬取的请求次数。通过这个简单的办法，你就可以有效的窥视每个爬虫的动向，如果哪个爬虫不老实，胆敢疯狂爬取的话，你就可以一眼把它挑出来。

要根据User-Agent信息来封杀爬虫是件很容易的事情，主流的Web Server都支持针对User-Agent信息的设置，JavaEye使用的是lighttpd，因此用以下的lighttpd配置来封杀爬虫：

$HTTP["useragent"] =~ “qihoobot|^Java|Commons-HttpClient|Wget|^PHP|Ruby|Python” {
url.rewrite = ( “^/(.*)” => “/crawler.html” )

Tags: Internet, Web
Posted in WEB 评论关闭

每种语言都有它特别的地方，对于JavaScript来说，使用var就可以 声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个 细节，与大家分享。

（1）简化代码

JavaScript定 义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：

var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

下面的写法可以达到同样的效果：

var car = {
	colour:'red',
	wheels:4,
　　hubcaps:'spinning',
　　age:4
}

后面的写法要短得多，而且你不需要重复写对象名称。
(全文 …)

Tags: JavaScript
Posted in JavaScript 评论关闭

Speed Tracer由google开发的一款测试网页性能分析插件<而且开源> (IE下推荐dynaTrace)，包含：

* Javascript parsing and execution
* Layout
* CSS style recalculation and selector matching
* DOM Event handling
* Network resource loading
* Timer fires
* XMLHttpRequest callbacks
* Painting
* and more ..

安装要求：

1、只适用于 Google Chrome Developer版本

2、在Chrome启动命令里需要设置  --enable-extension-timeline-api

(全文 …)

Tags: Tool, Web
Posted in Tool, WEB, 站长工具 评论关闭

PNG这种文件格式值得科普下,对比GIF来说

PNG和GIF都支持动画
PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴
所以动画图片来说,还是GIF支持最好

第一种PNG叫PNG8(索引色透明),简单说可以理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明
但是PNG由于算法的优势,体积比较少
所以,静态GIF完全可用PNG8取代
(全文 …)

Tags: Design, Web
Posted in Design, WEB, 素材分享 评论关闭

这是最近看到的一篇很不错很实用的文章，主要侧重于设计前的思考、思路，看完有很大 的启发，所以推荐给大家，因为是翻译的，翻译不准确的地方还请见谅~

在生活中，拥有目标是非常重要的。

特别对于网站设计而言，因为没有目标就没有动力，更无法衡量你的成功与否。 目标有助于设计师专注于重要的事情，把握设计 方案的走向。目标能帮助设计者设计出令人眼前一亮的网站。

设计任何一个网站，过程都是大同小异的：我完成了一份设计稿，然后把它交给客户。虽然在一开始，我有我的创意，客户有客户 的需求，但是我知道我会在最后交出一份令人满意的答卷。 之后的步骤大径相同，但每个网站都会因面向的群体不同、定位不同、风格不同而各自产生某些不同的 步骤。有时我需要手绘，有时我又必须利用PS、AI等软件的强大功能。 尽管不同项目的过程可以有所差异，但至关重要的是做一个网站一定会确立一个目标，无论你把它写下来也好记在心里也罢，你的设计必须把这一目标体现出来。

我在以下列出的5个目标，是在每一次开始网页设计时都必须思考的。
(全文 …)

Tags: Design, Website
Posted in Design, Website 评论关闭

随着Css3和html5的风靡，越来越多的前端人员开始学习Css3，今天的文章就是来说说前端应该掌握10个Css3属性。 上篇博文提到了《前端必须掌握30个CSS3选择器》，但是对于Css3的新属性，你又了解多少呢？虽然大多数的css3属性在 很多流行的浏览器中不支持，但是我们鼓励在前端开发中要学会并且运行这些css3属性，因为这是未来的趋势。 关键是首先确定你是否对各个浏览器之间的细微的差别有所了解，你能肯定的说IE显示的90度的角就不圆滑嘛？这取决于你的决定。但是要永远记住，网站设计 不必看到所有浏览器的不同。在文章的最后，我们将显示一个有趣的最终的案例。

1、border-radius

border-radius
(全文 …)

Tags: CSS3
Posted in CSS, 前端开发 评论关闭

CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。虽然对于小的WEB开发项目来 说，CSS框架并不一定适用，但是对于规模较大的团队开发项目而言，CSS框架不仅能加快设计开发速度，而且还能有效解决网站改版中带来的诸多麻烦和问 题。这里推荐的15款CSS框架是现在国外最流行的CSS框架，希望能对你的开发有所帮助！

例如：

• typography.css 基本排版规则
• grid.css 基于网格的布局
• layout.css 通常的布局
• form.css for 表单样式
• general.css 更多通用规则

1 . Elements CSS Frameworks

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。
(全文 …)

Tags: CSS
Posted in CSS 评论关闭

百度js库tangram宣布开源,Tangram是一套简单可依赖的Javascript库，它的特点：
* 体积小巧，性能优良，使用简单。
* 模块化架构，方便定制与扩展。
* 适合团队开发，丰富的中文文档和本地技术优化，适合中国用户。 *多浏览器支持：
IE6、7、8+
Frfox3.x+
傲游2.x+
Opera 10.x
Chrome 4.x+
Safari 4.x+

* 经过专业QA团队的测试以及百度各大产品线的应用，质量有保障。
(全文 …)

Tags: JavaScript
Posted in JavaScript 评论关闭