周鸿祎:互联网公司是怎么衰落的

文章观点不错,多看看多了解,不能总关注技术而忽略了市场价值。小推荐一下。

互联网在中国发展了不到二十年,公司出现了 不少,留下来的不多。其实,互联网公司衰落的原因很多,要是遇到恶劣的商业环境,那属于天灾,谁也避免不了。但是,俗话说得好,最好的年景里也有人赔钱, 最差的年景里也有人赚钱。所以,把互联网公司衰落归结于外部原因,我认为那是不负责任的。

我这个人,喜欢没事想事,有时候就琢磨,这些衰落的互联网公司到底有哪些共性呢?

我总结了一下,大家看一看说得对不对。

第一类,拷贝国外的商业模式。

早些年,大家都在拷贝美国模式。要是眼快、手快,在美国看到出现了新的商业模式,就打个时间差,立马把它带回中国,抢得先发优势。但是,现在不一样了。在美国那边发布一个新网站,我们这边的人很快就能读到对它的相关报道,而且是中文的。还有,包括VC也 会把一些好的模式介绍到中国来。国内像腾讯、百度、新浪、搜狐这样的巨头公司,解决了生存问题之后,都密切关注全世界新模式以图谋发展。在模仿的过程中, 它们也更有能力去解决遇到的一些问题,比如政府公关。而小公司一旦遇到这样的问题,可能就做不下去了。所以,把抄袭美国模式作为一种核心竞争力的机会已经 不存在了,而且我认为这是种非常危险的模式。

再者,美国互联网发展程度跟中国不一样。虽 然中国网民基数庞大,但大多是低收入人群,美国的几亿网民却是中产阶级。两个国家的文化、背景、业务习惯都不一样。所以,假如把美国模式搬到中国来,也要 有所变化。说实话,现在互联网里很多人都存在浓厚的投机心理,盲目地拷贝,不愿意探索,结果拷贝过来发现不符合中国国情,最后变成了水土不服。这种简单的 模仿,成功率一定很低。一个最有力的证明就是,那些互联网巨头得意洋洋地来到中国,带着他们已经在美国被证明成功的商业模式,但到最后都是水土不服。所 以,创业公司更不要梦想着单凭拷贝国外模式就能做大,你第一没钱,第二没用户,凭什么做大?

第二类,模式本身没有问题,但是对用户没有价值。

比如,五年前SP大行其道。这种增值服务通过手机收费,实际上是一种微支付。每个用户每个月花五块钱到十块钱。这是非常好的模式,但是很多SP急功近利,不是考虑着怎么把服务做好,而是把用户当羔羊,设计出各种各样的欺诈陷井,很多用户被“订”了很多服务,一点都不知道。有的SP甚至直接勾结运营商从用户账户上强行扣钱。最后的结果就是把这个行业全给毁掉了。

再举个例子。比如说,像E-mail营销,本来是一个很好的东西,有商业价值,但是后来很多人发垃圾邮件肆无忌惮。结果,发展到最后,用户对做营销的Email看都不看。今天,靠邮件和数据库营销的公司基本上已经没有了。

我一直强调,如果要把一件事做成功,你一定 要重视用户价值,一定要把用户价值放在公司的收入之上。这在互联网里面已经成为一个规律——得民心者得天下。相反,如果不重视用户价值,为了公司一时的商 业利益,对用户不是过渡开采,就是做出伤害用户利益的事情,最后用户忍无可忍,还是会用脚投票抛弃了你的。

第三类,没有从用户出发,缺乏核心产品。

比如说,纯粹以互联网广告、营销为主的公 司。我一直认为,互联网行业中一个完整的商业模式,一定要有产品,而且产品一定是为用户服务的,这样才能创造商业价值。因为你创造了价值才有用户,在用户 的基础上,你才能够建立你的营销模式。但是,我见过有些公司缺乏市场模式,不知道怎样细分市场,没有一个用户模式,也不知道瞄准什么样的用户人群。

第四类,没创造什么产品,企图依靠资源获得成功。

一开始他就说,我能搞到什么资源,我就可以 怎么样。后来事实证明,这样的公司肯定不会成功。比如,有的人动辄就讲,我的某个亲戚在做什么,我认识运营商电信的什么领导,他可以给我什么样的资源。或 者说,原来我跟政府打交道,我可以从政府拿到什么样的资源。听起来,你会怦然动心,让人觉得他跟政府、运营商、大国企合作,说不定就能挣出钱来。

这种公司最缺的,是对互联网精神的理解,它 根本就没有为用户服务的理念,所以它根本不会形成用户基础。没有坚实的用户基础,商业模式越复杂,做事情的难度就越大。中国成功的互联网公司,基本上见不 到只依靠政府的支持就能成功的。互联网是虚拟的东西,如果没有一种用户至上的服务精神,没有每周724小时不紧张工作的奋斗精神,很难做成功。最典型的例子就是绿坝,它根本无视用户的利益,想通过政府的指令,强行到每个人的电脑里去插扛子。但是绿坝的下场,我们都有目共睹。

第五类,商业模式太过复杂。

有一些商业模式有产品,但是比较复杂。这种商业模式不光要满足用户,还要把产业链上下游联系起来。它处在中间,同时满足上下游企业,这个模式才能做下去。

比如说,现在出现不少做城市生活社区的搜索网站。首先,它要说服商家跟它合作。但商家却关心它的用户数量多不多,你用户多我才愿意跟你合作。同时它还要鼓励用户上线,用户却说,你都没有什么商家,我上来找什么东西呢?所以,它们就变成了两线作战。

很多人觉得这种模式有成功的可能性,但是我认为失败率相当高,因为这对他的企业资源和运营有高标准,严要求。它永远存在先有鸡还是先有蛋的困惑。而实际上,真正能成功的模式,都是要单线作战。最终我可能要搞定几方,但是刚开始的时候,一定要先能解决一方。

比如说美国的团购网站,也是城市生活、电子商务,但是它不需要搞定用户,只需要搞定商家,因为商家的折扣只要足够大,提供的产品和服务是真实的,就一定能吸引到很多人。所以,他不需要花钱打很多广告就把用户拉过来了。

第六类,是我自己领悟的,就是太早挣钱的模式不容易成功。

从做大的角度讲,互联网公司刚开始的模式一定看不清。道理很简单,如果模式很清晰,巨头都来做,哪还给你机会。

如果有些商业模式一出来就有明确的收入,这 就有两种情况,一种是商业模式确实很好,但是模仿者众多,巨头也会模仿。比如说,帮商家卖电子打折券。一些门户巨头们都不用多想,毫不犹豫就冲进来了,这 种模式就不太容易成功。另一种情况是,早期挣到钱之后,容易让团队产生小富即安的感觉,很可能就变成一个小盆景——能挣小钱但是做不大。

相反,有些看不清模式的,像当年的QQ、搜索,今天的微博,在大家都看不清的时候给他们成长的空间和机会,他们一旦聚集了巨大的用户群,很容易建立挣钱的机会。

转载自:http://blog.sina.com.cn/s/blog_49f9228d0100mdjh.html

10条设计法则

总感觉设计应该不只是凭空感觉,任何事物都有一定的依据。好的设计,应该也有一些条条框框的设计准则,比如黄金比例等等。。

这篇文章列了10个设计方面的准则,限于本人英语水平不足,怕翻译不准确误导群众,故。。。。。将就着看吧。反正大概意思应该能明白。呵呵

As designers we have to be aware of the function of our work and design as much as we care about the aesthetics and visuals. There are a lot of terms for the design of how the site functions and works, from “usability design” to “user experience,” what remains constant is that if we want to become better designers we have to pair these two concepts together.

Using clear and effective design laws as guides we can use proven formulas for better design. These laws both assist in the usability / experience of our design as well as the aesthetic values. Furthermore being able to refer and cite these laws when presenting or discussing design you can further establish yourself as a expert with justified reasons for your design choices.

1. Hick’s Law

Hick’s law states that with every additional choice the time it will take for one to make a selection increases. This means that the more options a user has when using your website or web application the more difficult it will be to use. This law really speaks the importance of simplicity.

The classic case study for Hick’s law involves a grocery store which put out free jam tasting for customers. In one case they had 40+ jams to sample and choose from, and in the other only a few samples. What they discovered is that customers purchased more jam when presented with three to four options over the forty plus. Most customers opted not to purchase jam at all rather than pick from such a large selection.

What this means for us designers is that we should minimize the amount of choices a user has to select from. Removing any unnecessary pages, links, buttons or selections will make your designs much more effective.

Read more about Hick’s Law.

2. The Pareto Principal, or the 80 / 20 Rule

The pareto principal stipulates that a high percentage of users will perform a low percentage of actions. Meaning that most of your users are going to go to a small percentage of pages. Or in terms of web applications that most of your users will perform a small percentage of tasks.

Using this principal we can identify what that small percentage of actions that most of the users are performing (using analytics, research, interviews, etc…) We can then put higher emphasis on those tasks and actions to make the site easier to use. Sometimes this can lead to the inclusion of a new navigation, or altering the homepage to make finding and accomplishing those tasks easier.

This can also lead to the pair down and removal of content and features from a website. If the users are not accessing or using the information, then you can improve the site by removing it. This ties into Hick’s Law and Occam’s Razor.

Read more about the Pareto Principal

3. The Rule of Thirds

The rule of thirds is a method of composing elements to be visually pleasing in addition to identifying ways that users eyes will scan across  the page. Photographers have been using this principal for years to create more visually interesting compositions.

The rule of thirds is used by breaking up a design into thirds both vertically and horizontally. This builds a grid of intersecting lines. The rule states that a viewer is more likely to be drawn to the intersection of those lines. Additionally it is a good rule of thumb to place elements along the lines and intersections as well as avoid placing anything in the dead center of the composition or have a horizon diving the composition in half.

Placing elements so that they take up 1/3rd or 2/rds of the space will be more visually pleasing to most viewers.

Read more about the Rule of Thirds.

4. Proximity

The law of proximity is often neglected, even by experienced designers. This law states that elements that are near each other will appear related. This sounds like a very simple and obvious law but it is so often overlooked.

What this means is that you must be very aware of how much space you are placing between elements with in your design. If you have a series of elements that are too close together, users will assume that this was done so on purpose and that those elements are related. This is often an issue with web applications, where buttons or controls are grouped together yet have unrelated functionality. The result is that users get confused when trying to use and understand the application.

For example a search button that is too close to a save and cancel will likely get the assumption that the search is related to saving or canceling. Some users may think that the search is for searching previous versions of your work or that it is specific search for help, etc…

Proximity should be used carefully as it is extremely powerful. One simple example of good proximity use would be placing headlines closer to the paragraphs they are related to them than the paragraphs previous. You can look at the headlines in this blog as an example.

5. Feedback

Feedback is a concept that industrial designers have mastered for decades. Feedback is giving a user clear indication that something has happened, is happening or could happen. This communication is essential in the design of many products, consider a coffee maker that didn’t have a light indicating it was on. You would probably be burning coffee constantly!

Since users interact with our sites and applications we need to be aware of providing adequate feedback. This means providing loading bars, hover states on all links, using the visited link property,  :focus states on form elements and :active states on links.

Sometimes designers will neglect to have hover states on links out of laziness. However it really does improve the usability and quality of your design.

6. Fitts’ Law

fittslawFitts’ Law can be described as “The time required to move to a target is a function of the target size and distance to the target.” We can apply this to web design by looking at the hit area of our objects. Meaning the larger we can make the clickable area of key links and navigational elements the easier they will be to click on. Remember that while as web designers we may be extremely proficient at using the mouse and the web, there are a lot of users who still have trouble with these basic functions.

A common misuse of Fitts’ law is when a design is coded so that the text of a menu bar is clickable but the tabs themselves are not. Rather than just making the text clickable it would be a great idea to add padding to that link element to increase the clickable area. Sometimes this means turning the anchor into a block level element and wrapping details inside.

This can work in the opposite way as well, meaning items we want to be difficult to be clicked on (such as cancel buttons / links) should have a smaller clickable area. This is why you often see forms or actions that have large “save” buttons but text based “delete” or “cancel” links. WordPress uses this law extremely well.

Read more about Fitts’ Law.

7. The Golden Ratio

The golden ratio is often confused with the rule of thirds, but make no mistake they are different. The golden ratio looks at what proportions are naturally most visually appealing. This ratio has been used in design, architecture and engineering for hundreds of years. It even has been tied to what features we find most attractive in people (both facial features and body types).

The golden ratio can be described as a ratio with in the elements of a form, such as height to width, approximating 0.618.

When applied to rectangles you can continue to create smaller disections of the shape using the .618 ratio, which creates a natural spiral pattern. This can be seen in nature by examining sea shells.

This ratio has been used through out history, in everything from the craftsmanship of violins to the design of the Parthenon and Stonehendge.

It is unlikely that some of these items were created with the golden ratio in mind, rather the creators likely preferred the visual appeal of the design when using these ratios.

Ultimately the golden ratio is more likely to produce visually pleasing compositions.

Read more about the Golden Ratio

8. Occam’s Razor

Occam’s Razor put simply, states that “the simplest solution is almost always the best.” With the flexibility and power of the web and our design tools, it is easy to get carried away. The result is a very complicated site or design that may have a lot of functionality and information, but is difficult to use, build and maintain. Despite the fact that one might think the site can do more, it actually accomplishes less.

This is commonly an issue where companies feel the need to put everything they possibly could up on the website in the rare case that someone wants the information. What gets ignored is that the overwhelming majority of the users will access about 20% of the content on the site (see the 80/20 rule earlier).

Being ruthless about the value that a page or piece of content provides and removing anything that is unnecessary will make significantly stronger and more effective designs.

Additionally this rule speaks to the age old saying that “A design isn’t finished when there is nothing more to add, but when there is nothing left to take away.” Design simplicity is elegant, sophisticated and much more effective than the complex decorative style that is so prevalent on the web these days.

Read more about Occams Razor.

9. Fibonacci Sequence

The Fibonacci Sequence is a series of numbers in which each number is the sum of the preceding two. For example if you started with 1 it would go like this:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etc…

This is significant as it has been found in many classical creative works, is found commonly in nature and is often used in addition to the golden ratio. Patterns based on the sequence are intrinsically aesthetic and therefor should be used in the composition of our designs.

This sequence can be used to create visual patterns, create shapes, organic figures, build grids or dictate sizing and ratios. The Fibonacci sequence is considered to be one of the most influential patterns in both mathematics as well as design.

Read more about the Fibonacci Sequence

10. Mental Models

The Mental Model law states that it is significantly easier for users to understand and learn something new if they can model it off of something they already understand. This is why the concept of tabs works so well and why operating systems are modeled off of real world office situations (folders, files, desktop, etc…)

We can use this concept in making our designs easier to use as well as more effective visually. There are times where it would be effective to model our designs off of real world situations or objects. Consider designs that mimic desktops, papers or offices. Users can learn, understand and draw meaning from these types of designs because they can relate it to their understanding of the objects in real life.

Use the Laws, Design Better

Are there any laws or design principals that you use when crafting your designs? I would love to hear about them.

新版Twitter基于黄金比例设计:http://www.techcrunchchina.com/4933

转载自:http://www.3point7designs.com/blog/2010/07/ten-laws-to-design-by/

注册Google Apps企业套件时提示电话“输入无效”

注册Google企业套件的一半步骤随处可见,按照提示一步步做就好了。填写注册信息的时候地点选择“中国香港”,然后就卡在电话哪儿了,总是提示电话“输入无效”。其实就是电话格式不符合选择的所在地的正确格式。可以使用的一个格式是“xxxx-xxxx”,即八位电话号码四位为一组中间使用“-”隔开。Google在此处给出电话出错的信息是相当地蛋定…

IE Bug 总结和修复

同时,由于整理仓促,有些理解和表达不当和其他纰漏在所难免,还请大家帮忙更正。谢谢。

问题 浏览器 DEMO 解决方法
Hacking Rules: property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;
1 input[button | submit] 不能用 margin:0 auto; 居中 IE8 bug | fixed 为input添加width
2 body{overflow:hidden;}没有去掉滚动条 IE6/7 bug | fixed 设置html{overflow:hidden;}
3 hasLayout的标签拥有高度 IE6/7 bug | fixed *height:0;
_overflow:hidden;
4 form>[hasLayout]元素有margin-left时,子元素中的[input | textarea] 出现2×margin-left IE6/7 bug | fixed form > [hasLayout 元素]{margin-left:宽度;}
form div{*margin-left:宽度÷2;}
5 当border-width有1条<边3条时被设置成dotted时,1px的边dotted显示成dashed IE7 bug | fixed 不在同一个元素上使用不同宽度的 dotted
6 当子元素有position:relative的时候,父元素设置overflow:[hidden|auto]相当于给子元素设置了position:visible; IE6/7 bug | fixed 给父元素设置position:relative;
7 :hover伪类不能改变有position:absolute的子级元素的left/top值 IE7 bug | fixed 把top/left的值设置成除0%外的所有百分值;或添加一个margin-[所有方向]除0外的所有值,包括0%
8 :focus + selector {} 选择器失效 IE8 bug | fixed 在失效选择器后面添加一个空选择器, :focus{}
9 列表中混乱的浮动:在list中浮动图片时,图片出现溢出正常位置;或没有list-style IE8 bug | fixed 用背景图片替换list-style
10 th 不会自动继承上级元素的 text-align IE8 bug | fixed 给th添加text-align:inherit;
11 样式(包括link/style/@import(link)) 最多允许个为是:32 IE6-8 ─ 常识 99.99%的情况下,不会遇到
12 :hover 时若background-color为#fff, 失效 IE7 bug | fixed 把background-color改成background。或者,非#fff || #ffffff
13 忽略’>’后有注释的选择器:selector> /**/ selector{} IE7 bug | fixed 官方DEMO有误
14 * html IE6 ─ HACK 只对IE6有效
15 PNG图片中的颜色和背景颜色的值相同,但显示不同 IE6-7 bug | fixed 利用 pngcrush 去除图片中的 Gamma profiles
16 margin:0 auto; 不能让block元素水平居中 IE6-8 bug | fixed 给block元素添加一个width
17 使用伪类 :first-line | :first-letter, 属性的值中出现!important 会使属性失效 IE8 bug | fixed !important is evil, don’t use it anymore
18 :first-letter 失效 IE6 bug | fixed 把 :first-letter 移到离{}最近的地方,如 h1, p:first-letter{},而非 p:first-letter h1{}
19 Position:absolute元素中,a display:block, 在非:hover时只有文本可点击 IE6/7 bug | fixed 给a添加background, 如果背景透明,使用background:url(‘任何页面中已经缓存的文件链接’),不推荐background:url(#)[官方的解决方法],因为会增加一下HTTP请求
20 float列表元素不水平对齐:li不设置float,a设置display:block;float:[方向],li不水平对齐 IE6/7 bug | fixed 给li设置display:inline 或 float:[方向]
21 dt, dd, li 背景失效 IE6 bug | fixed dt, dd, li{position:relative;}
22 <noscript />元素的样式在启用javascript的情况下显示了样式 IE6-8 bug | fixed 利用js给<noscript />添加display:none;
23 使用filter处理的透明背景图片的透明部分不可点 IE6-8 bug | fixed 把background:none变成background:url(‘链接’),链接到本身和图片之外的任何文件
24 li内元素偏离 baseline 向下拉 IE8 bug | fixed 给li设置display:inline 或 float:[方向]
25 列表中li的list-style不显示 IE6/7 bug | fixed 给li添加margin-left,留空间来显示(不要加在ul上)
26 图片不能垂直居中 IE6/7 bug/fixed 添加一个空标签,并赋给”Layout”, 比如display:inline-block;
27 不能自定义指针样式 IE6-8 bug | fixed 给指针文件设置绝对路径
28 背景溢出,拖动滚动条后显示正常 IE6 bug | fixed 给父元素添加overflow:hidden防止溢出,并赋予hasLayout,如果添加_zoom:1;
29 高度超过height定义的高 IE6 bug/fixed 添加_overflow:hidden;(推荐)或者_font-size:0;
30 宽度超过width定义的宽 IE6 bug/fixed 添加_overflow:hidden;
31 双倍边距 IE6 ─ 常识 添加display:inline到float元素中
32 margin负值隐藏:hasLayout的父元素内的非hasLayout元素,使用负边距时,超出父元素部分不可见 IE6/7 bug/fixed 去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
33 给两个浮动元素的某中一个的文字设定为斜体,另一个元素下拉在有斜体文字元素的下面 IE6 bug/fixed 给有斜体文字的元素添加overflow:hidden;
35 3px 间隔:在float元素后的元素,会有3px间隔 IE6 bug/fixed 因为是确切的3px,所以,用“暴力破解”吧,比如_margin-left:-3px;
35 text-align 影响块级元素 IE6/7 bug/fixed 整理你的float;或者分开设置text-align

参考文章:http://haslayout.net/

http://ued.alipay.com/wd/2010/07/28/ie-beat-the-holy-canon-css-bug-table/

50个非常有用的javascript和jquery特效插件

这篇文章没做翻译,反正也凑合能看懂吧。大概看看图,需要的话点击进去看具体插件介绍。

个人感觉这50个插件,有部分还是很不错的。留下做个标记以后好找。呵呵~~

Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

JS-03 in 50 Useful JavaScript and jQuery Techniques and Plugins

Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

JS-39 in 50 Useful JavaScript and jQuery Techniques and Plugins

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

JS-00 in 50 Useful JavaScript and jQuery Techniques and Plugins

Nivo Slider
The Most Awesome jQuery Image Slider

JS-02 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery.Syntax
jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

JS-04 in 50 Useful JavaScript and jQuery Techniques and Plugins

jquery.timepickr.js
This is my humble attempt to enhence web time picking.

JS-05 in 50 Useful JavaScript and jQuery Techniques and Plugins

Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

JS-06 in 50 Useful JavaScript and jQuery Techniques and Plugins

A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

JS-07 in 50 Useful JavaScript and jQuery Techniques and Plugins

Making a Mosaic Slideshow With jQuery & CSS
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

JS-08 in 50 Useful JavaScript and jQuery Techniques and Plugins

17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements
Having full control of elements on a page and the order they are presented in can be quite useful. jQuery as always is a safe choice to go for. There are several good quality plugins to pick from. This post provides an overview of plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

JS-09 in 50 Useful JavaScript and jQuery Techniques and Plugins

Create an Impressive Content Editing System with jQuery and PHP
I’m going to show you how to use jQuery and PHP to build a content editing system that will allow you or your client to easily edit .html pages visually.

JS-10 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery MegaMenu Plugin

JS-11 in 50 Useful JavaScript and jQuery Techniques and Plugins

Excellent JQuery Plugins To Enhance Form Validation
Simple jquery plugins can enhance and beautify HTML form elements, these simple jquery scripts turn a simple HTML website to a fantastic look and feel. These plugins can be enabled very easily. In this roundup I have gathered most beautiful Jquery plugins that are related to all kinds of form validation. This list also includes roundups of some blogs. Go ahead and enjoy

gameQuery – a javascript game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

JS-13 in 50 Useful JavaScript and jQuery Techniques and Plugins

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

JS-14 in 50 Useful JavaScript and jQuery Techniques and Plugins

jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

JS-15 in 50 Useful JavaScript and jQuery Techniques and Plugins

A demo of AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

JS-16 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

JS-17 in 50 Useful JavaScript and jQuery Techniques and Plugins

Create a Content Rich Tooltip with JSON and jQuery
Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

JS-18 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery image zoom effect
So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text.

JS-19 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Roundabout Shapes
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

JS-20 in 50 Useful JavaScript and jQuery Techniques and Plugins

Extending jQuery’s selector capabilities

JS-21 in 50 Useful JavaScript and jQuery Techniques and Plugins

How to show/hide a hidden input form field using jQuery
This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an ‘other’ option. I wanted to allow users to select the ‘other’ option which then would show an input field so they can enter a specific description of what that ‘other’ item is. I didn’t want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

JS-22 in 50 Useful JavaScript and jQuery Techniques and Plugins

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

JS-24 in 50 Useful JavaScript and jQuery Techniques and Plugins

Useful JavaScript / jQuery Tools

JavaScriptMVC
JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

JS-26 in 50 Useful JavaScript and jQuery Techniques and Plugins

PEG.js – Parser Generator for JavaScript
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily bulid fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

JS-27 in 50 Useful JavaScript and jQuery Techniques and Plugins

PhoneGap
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

JS-28 in 50 Useful JavaScript and jQuery Techniques and Plugins

JavaScript Shell
A command-line interface for JavaScript and DOM.

JS-29 in 50 Useful JavaScript and jQuery Techniques and Plugins

WireIt – a Javascript Wiring Library
WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

JS-30 in 50 Useful JavaScript and jQuery Techniques and Plugins

JavaScript Programming Patterns
In this article I am trying to present some of the techniques out there that I have discovered. The patterns I would like to mention are the following:
– The Old-School Way
– Singleton
– Module Pattern
– Revealing Module Pattern
– Custom Objects
– Lazy Function Definition

JS-31 in 50 Useful JavaScript and jQuery Techniques and Plugins

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

JS-32 in 50 Useful JavaScript and jQuery Techniques and Plugins

How to Test your JavaScript Code with QUnit
QUnit, developed by the jQuery team, is a great framework for unit testing your JavaScript. In this tutorial, I’ll introduce what QUnit specifically is, and why you should care about rigorously testing your code.

JS-33 in 50 Useful JavaScript and jQuery Techniques and Plugins

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

JS-34 in 50 Useful JavaScript and jQuery Techniques and Plugins

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

JS-35 in 50 Useful JavaScript and jQuery Techniques and Plugins

Online javascript beautifier
This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

JS-36 in 50 Useful JavaScript and jQuery Techniques and Plugins

CSS & Javascript Character Entity Calculator
Enter your HTML Entity Character number (such as &#2335 or just 2335 – ?) to get the CSS and JS values for that entity.

JS-37 in 50 Useful JavaScript and jQuery Techniques and Plugins

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

JS-38 in 50 Useful JavaScript and jQuery Techniques and Plugins

Showdown – Markdown in JavaScript
Showdown – a JavaScript port of Markdown

JS-40 in 50 Useful JavaScript and jQuery Techniques and Plugins

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

JS-41 in 50 Useful JavaScript and jQuery Techniques and Plugins

fLABjs
fLABjs is a special API wrapper around LABjs which adapts the code to work properly in a file:// local filesystem environment. There are a number of things with core LABjs does which are not appropriate for local filesystems, such as XHR, special path handling rules, etc.

JS-43 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery LazyLoad Ad : Delays loading of advertising
jQuery LazyLoad Ad is a jQuery plugin that takes advantage of LazyLoad delaying ads loading.

qTip – The jQuery tooltip plugin
qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

JS-47 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Collapsing and Expanding Table Rows

JS-48 in 50 Useful JavaScript and jQuery Techniques and Plugins

Improving Search Boxes with jQuery
This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

JS-49 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Grid Plugin

JS-50 in 50 Useful JavaScript and jQuery Techniques and Plugins

Pines Notify jQuery Plugin
Pines Notify’s features include:
– Timed hiding with visual effects.
– Sticky (no automatic hiding) notices.
– Optional hide button.
– Supports dynamically updating text, title, icon, type…
– Stacks allow notice sets to stack independently.
– Control stack direction and push to top or bottom.

JS-51 in 50 Useful JavaScript and jQuery Techniques and Plugins

jQuery Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.

JS-52 in 50 Useful JavaScript and jQuery Techniques and Plugins

原文转自:http://www.noupe.com/javascript/50-useful-javascript-and-jquery-techniques-and-plugins.html

用jquery插件创建视觉震撼的网站

HoverFade

Demo Download

jQuery-Notes 1.0.2

Demo Download

gMap – Google Maps Plugin For jQuery

Demo Download

jQuery Menu Style

Demo Download

Contextual Slideout Tips With jQuery & CSS3

Demo Download

Growl

Demo Download

Animate Panning Slideshow with jQuery

Demo Download

jQuery Masonry

Demo Download

jQuery Quicksand

Demo Download

Jquery Plugin MopSlider 2.4

Demo Download

jQuery color plugin xcolor

Demo Download

jQuery Image Scroller

Demo Download

Auto-Playing Featured Content Slider

Demo Download

Horinaja

Demo Download

Slide Deck

Demo Download

Automatic Image Slider w/ CSS & jQuery

Demo Download

Create a Slick and Accessible Slideshow Using jQuery

Demo Download

Fancy Thumbnail Hover Effect w/ jQuery

Demo Download

Coda Slider Effect

Demo Download

Micro Image Gallery: A jQuery Plugin

Demo Download

Image Highlighting and Preview with jQuery

Demo Download

Textarea Words, Characters counter and maxlength plugin

Demo Download

GOOGLE CHARTS

Demo Download

IdmgAreaSelect

Demo Download

jQuery Bookmark

Demo Download

Poshy Tip

Demo Download

jqPlot Charts and Graphs for jQuery

Demo Download

jQuery MegaMenu Plugin

Demo Download

FullCalendar – Full-sized Calendar jQuery Plugin

Demo Download

jQuery Canvas Loader

Demo Download

Meerkat

Demo Download

jQuery PhotoShoot Plugin 1.0

Demo Download

jqFancyTransitions

Demo Download

jQuery Slider plugin (Safari style)

Demo Download

jTextTranslate: A jQuery Translation Plugin

Demo Download

xBreadcrumbs (Extended Breadcrumbs) jQuery Plugin

Demo Download

Get TopUp!

Demo Download

FireQuery – Firebug extension for jQuery development

Demo Download

ImagineMenu

Demo Download

Jquery AjaxSuggest

Demo Download

Ajax File Uploader

Demo Download

3d Tag Sphere

Demo Download

(MB)Extruder

Demo Download

jQuery Simple Multi-Select

Demo Download

Fancy Box

Demo Download

转自:http://www.smashingapps.com/2010/09/28/awesome-jquery-plugins-and-techniques-to-create-visually-excellent-websites.html

9个设计时常犯的错误,改进用户体验

网站,用户体验应该摆在第一位,这是网站取得成功的第一要素,以下的9个小毛病,指出来大家以后设计时可以注意防范类似的错误。

Web 用户体验大师 Jacob Nielsen 说过,“一个烂网站就像一个性情乖戾的推销员”,这样的推销员不仅无法说服顾客,而且让人生厌,就网站而言,再也没有什么比蹩脚的用户体验更让人沮丧的 了。本文讲述了 Web 设计与开发中常犯的 9 个用户体验错误以及它们的解决方法。

1. 难以找到你感兴趣的内容

下面这些知名站点不仅设计陈旧,而且易用性不佳

为什么不用更有意义的表单名字?

那几个旋转的骨牌原来是导航…

reddit.com,我喜欢它的概念,但内容太令人受伤。

我们常常在从一个网站查找内容的时候发现困难重重,比如那些政府站点,既然我们都知道内容为王的道理,我们就不应该让用户为了查找一点内容而翻遍成 千上万的菜单。

解决方法

简而言之,就是将你认为重要的信息放在容易找到的位置。如果你的站点有海量内容:

  1. 将各种内容放在它们应该放的栏目。
  2. 让你站点的搜索功能工作正常。
  3. 提供清晰的标签和目录。
  4. 让重要的内容重点显示。
  5. 提供本地化命名。

另外,使用 blur 测试,将你的设计草图做比如 10% 的模糊处理,这样你就能发现那些需要突出显示的内容是否真的突出了,还可以使用 IntuitionHQ.com 一类易用性测试服务。

2. 蹩脚的布局

典型的中文门户风格

到处都是文字,到处都可以点击

好用吗?有点,好看吗?一点也不。

内容难以查找的另一个原因是布局,将所有的东西放在首页,到处都是 Flash 广告,满眼都是文字,密密麻麻,挨挨挤挤。解决方法是请一个 Web 设计师将你的布局做一个设计。尽管有不少布局蹩脚的新闻站点仍然非常成功,但让它们成功的不是它们挨挨挤挤的布局。

3. 让人摸不着头脑的导航系统

原来那些橙色的,带问好的竖条是导航用的。

他们说,片图抵千言…

看上去挺漂亮,但 Flash 和 HTML 两个版本对用户来说有什么意义?

人们通常对导航菜单有一个约定俗成的期望,然而我们遇到很多奇怪的导航,常常让我们摸不着头脑。解决方法:

  • 先画个导航菜单草图
  • 让它有点逻辑
  • 找些人问问,他们希望在什么位置找到特定的信息,按他们的说法安排菜单
  • 考虑一下你的站点的目标用户
  • 做易用性测试
  • 使用面包屑导航,并确认前进和后退按钮起作用。

4. 蹩脚的菜单设计

到处都是导航菜单,但什么都找不到。

微软的

最令人关心的价格信息却无处可查。

很多站点的导航菜单布局十分不合理,重要信息被掩埋在很深的菜单下,重要信息需要挖掘很久才能找到,广告和内容搅和在一起,诸如此类。使用分析工 具,分析什么内容最受欢迎,用户在哪些页停留时间最长,哪些内容被频繁阅读,将这些内容放在容易被找到的位置。

5. 缺乏进度指示

Dell – 看上去并不难

但这些滚动滚到哪里才是头。

很多站点对于用户的操作进度,缺乏指示,或者指示混乱,假如你在进行一个长时间的操作,却不知道后面还剩下多少步,你会很容易半路放弃。

解决方法

人们无非想知道他们目前所在的位置,以及后面还余下多少步,告诉他们就是。

6. 无法反馈信息

压根没有信息反馈功能

可以反馈信息,但很难找到

无法找到信息反馈功能

Facebook 或许有理由不提供反馈,它们的用户量太大了,但小规模站点都应该提供用户反馈功能。可以是 Email,反馈表单,或是论坛。

7. 滥用社会媒体网络功能

这样的数字很让人伤心。

虽然,如今每个人和他的狗都有 Facebook, Twitter, Digg, LinkeIn 账户,但99%的人事实上从来不更新他们的内容,如果你在网站上提供了自己的 Twitter 链接,且实时显示自己的跟随数目,如果数字是1或者0,就太丢人了。

8. 太多选项

晕了

这一大堆选项让人头都要炸了

为什么要有这么多选择

选择多未必幸福,如果苹果有什么东西值得我们学习,那就是,人们不必去做过多选择,或许,几个基本的选项已经足够,或许,一个适合我的选项也已经足 够。保持简单,让用户少做选择,是良好用户体验的一个重要因素。

9. 工作不正常的链接,按钮与表单

错误的链接,不存在的页面,无法正常工作的表单,诸如此类,对于这类问题,除了测试,还是测试。

本文国际来源:1stwebdesigner.com 9 Usability And UX Pitfalls: Learn How To Avoid Them (原文作者:Jacob Creech

Web前端50个创意实用网站(二)

接上一篇:Web前端50个创意实用网站(一)
两篇文章都是不错的介绍,强烈推荐。

Kaleido

为你的代码创建视觉化标识。来自麻省理工。

Sketchpad

一个强大的在线图像编辑器。难能可贵的是,这是基于 HTML5 的。

Unicode code converter

虽然界面有些乱,但这个工具能把一段文字转换成各种编码形式。

Grid System Generator

另一个网格设计生成器。

ud.com namecheck (强烈推荐)

这个看似简单的工具,可以帮你查询某个名字是否还可以注册域名,商标,已经社会媒体网络入口。

Typograph — Scale & Rhythm

这个工具可以帮你即时预览各种不同的 Web 排版效果,并生成代码。

ColorBrewer Intro – Selecting Good Color Schemes for Maps

适用于地图的配色工具。

CSS Inliner Tool (推荐)

将独立的 CSS 定义转换为 Inline CSS。假如你使用电子邮件进行营销,会发现这种工具非常实用,因为邮件客户端常常会将你独立的 CSS 代码过滤掉,而 Inline CSS 不会被过滤。

HTML Purifier – Filter your HTML the standards-compliant way!

这个使用 PHP 设计的工具,可以对你的 HTML 代码进行过滤,去除其中的恶意代码,并按 W3C 标准对代码进行净化。

Rendera

在线编写 HTML5 和 CSS 代码,现场看到效果。

RegExr

又一个在线学习,体验,测试正则表单式的地方。

try ruby! (in your browser)

Ruby 在线体验。

Google Command Line

使用命令符访问 Google 的一些产品和服务。

Tiny Fluid Grid

又一个网格设计工具,很小巧。

Fonolo.com

这个很别致的站点,可以帮你快速接通那些大公司的免费技术电话,不过目前只能用于美国和加拿大。

Producteev: Creating To-Do Lists with Emails (推荐)

把重要的工作安排发到 task@producteev.com,他们会帮你生成一个任务列表,以便安排你的日程。

AddUse – User research made easy

一个在线用户测试或调查管理工具。

bookwhen (推荐)

帮助你的用户在线预订你的展会,课程等服务,免费版支持150个项目以及每月300个预订。

本文国际来源:Smashing Magazine 50 Powerful Time-Savers For Web Designers (原文作者:Vitaly Friedman

转载自:http://blog.csdn.net/comsharp/archive/2010/07/01/5707455.aspx

Web前端50个创意实用网站(一)

本篇分两部分,另一篇点击这里:Web前端50个创意实用网站(二),主要是web前端技术辅助网站,有些网站的创意和设计都很不错。本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在。

LaunchList

站点发布前的工作清单,预设了28个需要检查的事项,也可以自定义。同类工具: Ultimate Website Launch Checklist 以及 The Ultimate Website Prelaunch Checklist

Pencil Project: Sketching and Prototyping with Firefox

一个开源 GUI 原型设计工具。

Zootool

一个非常漂亮的书签工具,可以将你收集的各种素材,图片,文档,链接,视频等在线组织到一起。

Bounce (推荐)

输入一个站点地址,该程序会给该站点截图,然后,你可以在上面批注,加评论,并和朋友分享。非常适合用来和您的客户在线就某个站点的设计进行讨论。

Ninite Batch Installer

这个站点可以将很多免费的流行软件(最好的版本)打包在一起,一次性安装到你的机器,支持 Windows7,Vista 和 XP。

Support Details (强烈推荐)

假如你想让你的用户提供他/她所使用的浏览器环境,比如 Flash 版本,操作系统,屏幕分辨率,Cookie,JavaScript 状态等,可以让他/她访问一下这个站点,这个站点或自动将这些内容探测出来,并允许用户现场通过邮件将报告发送给你。

MugTug’s Darkroom

一个在线图片处理程序,可以调整对比度,白平衡,曝光,饱和度等,可以从 Picasa 及 Flickr 上传图片,同类产品:PixlrSumo Paint

Visual Website Optimizer (强烈推荐)

Visual Website Optimizer 绝对是你所能见到的最好的 A/B 测试工具。

Keyonary

这个简单的在线工具可以帮你列出 Mac OS X, Photoshop 等工具的快捷键清单。

gridr buildrrr

一个在线网格设计工具,选择你希望使用的网格布局,帮你预览并生成 CSS 代码。

Instant Blueprint – Create a web project framework in seconds.

帮你瞬间生成一个 Web 项目框架,基于合法 HTML/XHTML 和 CSS。

Hummingbird

一个实时的(真正的实时,每秒刷新20次)站点流量分析工具,基于 Node.js.

jsFiddle

在线 Web 编辑器,支持 JavaScript, MooTools, jQuery, Prototype, YUI, Glow, Dojo, HTML 以及 CSS。

String: create a multi-language website or app

帮你创建多语种 Web 应用的资源文件,

Titanpad

可以多人同时编辑同一个文档,别的改动会实时以不同颜色标识,可以是同一个办公室的多个用户,也可以是地球另一边的多个用户。

Pixelnovel Timeline: Version Control for Adobe Photoshop

该工具通过插件方式集成 Subversion 客户端,可以在 Photoshop 中实现版本控制。非免费工具。

0to255

给出一种颜色,会帮你列出这种颜色由浅入深的各种颜色变化,并特别针对 Web 做了优化。

Load Impact: Website load/stress test

一个在线压力测试工具,模拟多用户同时访问你的站点,并出具报告以分析你的站点可以支撑的访问者数量。

Ideone: Online IDE & Debugging Tool

一个在线 IDE 和调试工具,支持多达40种语言,包括 C++, Java, JavaScript, Perl, PHP, Python and Ruby,同类产品:PHP Anywhere 以及 CodeRun

Online Dummy Image Generator

快速帮你生成一个在线虚拟图片,以便您进行某些测试。

HiFi RegExp Tool

在线正则表达式工具。

Tableizer (推荐)

将你 Excel 表格中的内容复制粘贴到这个站点,它会帮你生成 HTML 格式的表格(HTML Table)。

FollowUpThen: Easy Email Reminder

-假如你希望有人提醒你什么时候该做什么事,你可以给比如 1day@followupthen.com 一类的地址发个邮件,1day 表示一天后,这样,一天后,你会收到他们的提醒邮件,1day 可以改成人和别的时间间隔。

Divine: Conversion tool from PSD to HTML

这个工具是一个 Photoshop 插件,可以将你的 PSD 转换成 WordPress 主题。(译者:有待验证)

转:10 个强大的开源 Web 流量分析工具

Web 流量分析工具多不胜数,从 WebTrends 这样专业而昂贵的,到 Google Analytics 这样强大而免费的,从需要在服务器端单独部署的,到可以从前端集成的,不一而足。本文收集并介绍了10个功能强大的开源 Web 流量分析工具,因为是开源的,因此可以免费部署到你的网站。

TraceWatch

TraceWatch 是一个开源 Web 流量分析程序,支持实时分析,可以提供深度分析报告。

SlimStat

基于 PHP-MySQL,同时,可以像 Google Analytics 那样,通过 JavaScript 或 PHP 脚本集成到网站。

Piwik


可以生成站点的详细的实时访问报告,基于 PHP 和 MySQL,也可以像 Google Analytics 那样在前端集成。

Open Web Analytics

基于 PHP,内置对 WordPress,Gallery 以及 MediaWiki 的支持。

W3Perl

W3Perl 是一个 Web Log 分析工具。

CrawlTrack

CrawTrack 是一个很好的 Google Analytics 的开源替用品,提供非常独特的报告,比如,CrawTrack 可以帮你预防诸如 SQL 注射一类的攻击。

BBClone

BBClone 是一个 Web 计数器,可以提供很详细的访问报告。基于 PHP。

PhpMyVisites


基于 GNU/GPL 开源协议,可以提供很详细的,有关访问者信息的报告,它的 GUI 界面很有趣而且实用,安装也很简单。

AWStats

可以提供非常强大的,关于网站,FTP 站点,乃至 Email 服务器的访问分析报告,基于 CGI。

Grape

Grape 的界面比较简单,功能虽然不多,但很实用。

本文国际来源:reencoded.com 10 amazing open source web analytics (原文作者:denbagus

转载自:http://blog.csdn.net/comsharp/archive/2010/06/17/5675810.aspx