此博客仅为记录之用,所有文章全文转载,如有版权问题请联系aegeansee(#)gmail.com处理。

2008年11月7日星期五

11个让你有所感悟的经典职场寓言



 
 

AegeanSee 通过 Google 阅读器发送给您的内容:

 
 

于 08-11-1 通过 有意思吧 作者:有意思吧 - liuxia

小时候,语文课本上总还是喜欢那些寓言的,一点也不长,一个小故事,一篇课文就结束了,到时候,自然有参考资料,告诉我们:这篇寓言说的是什么意思。
渐渐的,长大了,发现寓言不只是在书本里,到处都有,职场更多。都要吃饭,也许每个人都可以从里面看出不同的寓意来。不再废话,赶紧把领取的文章发上。

www.u148.net

(一)一只乌鸦坐在树上,整天无所事事。一只小兔子看见乌鸦,就问:"我能象你一样整天坐在那里,什么事也不干吗?"乌鸦答道:"当然啦,为什么不呢?"于是,兔子便坐在树下,开始休息。突然,一只狐狸出现了。狐狸跳向兔子……并把它给吃了。

这个故事的寓意是……要想坐在那里什么也不干,你必须坐(做)得非常非常高。

(二)一只火鸡和一头公牛在聊天。"我非常想到那棵树顶上去,"火鸡叹口气道,"但是我没有那份力气。""这样啊,那你为什么不吃点我的粪便呢?"公牛答道,"那里面充满了营养。"火鸡吃了一团牛粪,发现它真的使自己有力气到达树的第一个分叉处。第二天,在吃了更多的牛粪以后,火鸡到达了树的第二个分叉处。最终,两星期后,火鸡非常骄傲地站在了树的顶端。但不幸的是,没多久,它就被一个农夫盯上了,并且农夫非常利索地就将火鸡射了下来。

这个故事的寓意是……牛粪(狗屎运)也许能使你抵达顶峰,但它不能使你永远呆在那儿。

(三)一只小鸟正在飞往南方过冬的途中。天气太冷了,小鸟冻僵了,从天上掉下来,跌在一大片农田里。它躺在田里的时候,一只母牛走了过来,而且拉了一泡屎在它身上。冻僵的小鸟躺在牛屎堆里,发觉牛粪真是太温暖了。牛粪让它慢慢缓过劲儿来了!它躺在那儿,又暖和又开心,不久就开始高兴地唱起歌来了。一只路过的猫听到了小鸟的歌声,走过来查个究竟。顺着声音,猫发现了躲在牛粪中的小鸟,非常敏捷地将它刨了出来,并将它给吃了!

这个故事的寓意是……

1)不是每个在你身上拉屎的都是你的敌人。

2)不是每个把你从屎堆中拉出来的都是你的朋友。

3)而且,当你陷入深深的屎堆当中(身陷困境)的时候,闭上你的鸟嘴!


(四)有一位表演大师上场前,他的弟子告诉他鞋带松了。大师点头致谢,蹲下来仔细系。等到弟子转身后,又蹲下来将鞋带解松。有个旁观者看到了这一切,不解地问:"大师,您为什么又要将鞋带解松呢?"大师回答道:"因为我饰演的是一位劳累的旅者,长途跋涉让他的鞋事松开,可以通过这个细节表现他的劳累憔悴。""那你为什么不直接告诉你的弟子呢?""他能细心地发现我的鞋带松了,并且热心地告诉我,我一定要保护他这种热情的积极性,及时地给他鼓励,至于为什么要将鞋带解开,将来会有更多的机会教他表演,可以下一次再说啊。"

这个故事的寓意是……人一个时间只能做一件事,懂抓重点,才是真正的人才。

(五)一个人去买鹦鹉,看到一只鹦鹉前标:此鹦鹉会两门语言,售价二百元。另一只鹦鹉前则标道:此鹦鹉会四门语言,售价四百元。该买哪只呢?两只都毛色光鲜,非常灵活可爱。这人转啊转,拿不定主意。结果突然发现一只老掉了牙的鹦鹉,毛色暗淡散乱,标价八百元。这人赶紧将老板叫来:这只鹦鹉是不是会说八门语言?店主说:不。这人奇怪了:那为什么又老又丑,又没有能力,会值这个数呢?店主回答:因为另外两只鹦鹉叫这只鹦鹉老板。

这故事告诉我们,真正的领导人,不一定自己能力有多强,只要懂信任,懂放权,懂珍惜,就能团结比自己更强的力量,从而提升自己的身价。相反许多能非常强的人却因为过于完美主义,事必躬亲,什么人都不如自己,最后只能做最好的攻关人员,销售代表,成不了优秀的领导人。

(六)曾经有个小国的人到中国来,进贡了三个一模一样的金人,金壁辉煌,把皇帝高兴坏了。可是这小国的人不厚道,同时出一道题目:这三个金人哪个最有价值?皇帝想了许多的办法,请来珠宝匠检查,称重量,看做工,都是一模一样的。
怎么办?使者还等着回去汇报呢。泱泱大国,不会连这个小事都不懂吧?最后,有一位退位的老臣说他知道这个问题。皇帝将使者请到大殿,老臣胸有成足地拿着三根稻草,插入第一个金人的耳朵里,这稻草从另一边耳朵出来了。第二个金人的稻草从嘴巴里直接掉出来,而第三个金人,稻草进去后掉进了肚子,什么响动也没有。老臣说:第三个金人最有价值!使者默默无语,答案正确。

这个故事告诉我们,最有价值的人,不一定是最能说的人。老天给我们两只耳朵一个嘴巴,本来就是让我们多听少说的。善于倾听,才是成熟的人最基本的素质。

(七)一只鸽子老是不断地搬家。它觉得,每次新窝住了没多久,就有一种浓烈的怪味,让它喘不上气来,不得已只好一直搬家。它觉得很困扰,就把烦恼跟一只经验丰富的老鸽子诉苦。
老鸽子说:"你搬了这么多次家根本没有用啊,因为那种让你困扰的怪味并不是从窝里面发出来的,而是你自己身上的味道啊。"

寓言启示录:与团队格格不入,问题来自于自己!

(有些人会不断埋怨别人的过错,指责别人的缺点,他们觉得周围的环境和人处处跟自己作对;或者是认为自己"曲高和寡",一般人无法理解自己丰富而深刻的思想。实际上,他们没有意识到真正的问题不是来自于周围,而是来自于他们自己。 像这样的人,必须试着认清自己,试着认真而深刻地反省自己。)

(而一个组织也没必要为了失掉这样一只"鸽子"而遗憾。)

(愈来愈多的研究显示,领导能力不是天生的,人们完全可以透过后天的努力获得这种能力。因此,领导者要想成功地改变员工,首先就必须改变自己的领导特质。)

(对领导者而言,出色的管理能力仍然是必需的。领导者拥有这种管理能力,不是为了控制和命令员工,而是为了支持、帮助员工的发展与成长。)

(在这变幻莫测的全球竞争时代,公司高层与其苦苦追寻"先进"的管理方法与手段,不如将眼光放远,锁定员工的才智与热情,这是公司取之不尽的宝藏,公司必须找到适当的途径将他们释放出来。实现这个目标的唯一途径,就是让管理从控制员工,转向为相信员工潜力、鼓舞员工热情。)

(八)A对B说:"我要离开这个公司。我恨这个公司!"B建议道:"我举双手赞成你报复!!破公司一定要给它点颜色看看。不过你现在离开,还不是最好的时机。"A问:为什么?B说:"如果你现在走,公司的损失并不大。你应该趁着在公司的机会,拼命去为自己拉一些客户,成为公司独挡一面的人物,然后带着这些客户突然离开公司,公司才会受到重大损失,非常被动。"A觉得B说的非常在理。于是努力工作,事遂所愿,半年多的努力工作后,他有了许多的忠实客户。再见面时B问A:现在是时机了,要跳赶快行动哦!A淡然笑道:老总跟我长谈过,准备升我做总经理助理,我暂时没有离开的打算了。其实这也正是B的初衷。

一个人的工作,永远只是为自己的简历。只有付出大于得到,让老板真正看到你的能力大于位置,才会给你更多的机会替他创造更多利润。

(九)有三个人要被关进监狱三年,监狱长给他们三个一人一个要求。美国人爱抽雪茄,要了三箱雪茄。法国人最浪漫,要一个美丽的女子相伴。而犹太人说,他要一部与外界沟通的电话。三年过后,第一个冲出来的是美国人,嘴里鼻孔里塞满了雪茄,大喊道:"给我火,给我火!"原来他忘了要火了。接着出来的是法国人。只见他手里抱着一个小孩子,美丽女子手里牵着一个小孩子,肚子里还怀着第三个。最后出来的是犹太人,他紧紧握住监狱长的手说:"这三年来我每天与外界联系,我的生意不但没有停顿,反而增长了200%,为了表示感谢,我送你一辆劳施莱斯!"

这个故事告诉我们,什么样的选择决定什么样的生活。今天的生活是由三年前我们的选择决定的,而今天我们的抉择将决定我们三年后的生活。我们要选择接触最新的信息,了解最新的趋势,从而更好的创造自己的将来。

(十)两个人在森林里,遇到了一只大老虎。A就赶紧从背后取下一双更轻便的运动鞋换上。B急死了,骂道:"你干嘛呢,再换鞋也跑不过老虎啊!"A说:"我只要跑得比你快就好了。"二十一世纪,没有危机感是最大的危机。特别是地球村时代,电信,银行,甚至是公务员这些我们以为非常稳定和有保障的企业,也会面临许多的变数。

当更多的老虎来临时,我们有没有准备好自己的跑鞋?

(十一)有位秀才第三次进京赶考,住在一个经常住的店里。考试前两天他做了三个梦,第一个梦是梦到自己在墙上种白菜,第二个梦是下雨天,他戴了斗笠还打伞,第三个梦是梦到跟心爱的表妹脱光了衣服躺在一起,但是背靠着背。这三个梦似乎有些深意,秀才第二天就赶紧去找算命的解梦。算命的一听,连拍大腿说:"你还是回家吧。你想想,高墙上种菜不是白费劲吗?戴斗笠打雨伞不是多此一举吗?跟表妹都脱光了躺在一张床上了,却背靠背,不是没戏吗?"秀才一听,心灰意冷,回店收拾包袱准备回家。店老板非常奇怪,问:"不是明天才考试吗,今天你怎么就回乡了?"秀才如此这般说了一番,店老板乐了:"哟,我也会解梦的。我倒觉得,你这次一定要留下来。你想想,墙上种菜不是高种吗?戴斗笠打伞不是说明你这次有备无患吗?跟你表妹脱光了背靠靠躺在床上,不是说明你翻身的时候就要到了吗?"秀才一听,更有道理,于是精神振奋地参加考试,居然中了个探花。

积极的人,象太阳,照到哪里哪里亮,消极的人,象月亮,初一十五不一样。想法决定我们的生活,有什么样的想法,就有什么样的未来。...


 
 

可从此处完成的操作:

 
 

[翻译]寻找圣杯



 
 

AegeanSee 通过 Google 阅读器发送给您的内容:

 
 

于 08-11-5 通过 Alipay UED 作者:abdvl

最近在内部讨论关于"完美三栏"的话题,看到一篇"In Search of the Holy Grail",相当的好.故此翻译之.

In Search of the Holy Grail


很抱歉我没有将这篇文章命名.我不是想夸大他的重要性或是轻视其他的Holy Grails.但是确实是这么称呼,我们都明白它的含义.

三栏,一个是固定宽度的导航栏,另一个是GOOGLE广告,或是Filckr图片展示,就像Fancy的松露巧克力一样,和一个重要的柔滑的夹心。在这个博客流行的黄金年代它是相当适用的,加之相当大的实现难度,理所应当的获取了"圣杯"的名称.

有很多文章是讨论关于"圣杯"的,也有很多很好的模板可以使用。但是,所有的方案都是以牺牲以下特性为代价的:合理的内容顺序宽度自适应合理的标签。这三者往往是这难以达到合理的布局中要折中的元素

在最近的一个项目中我终于找到了传说中的圣杯。我在不会改变您的代码和灵活性的前提下尽可能的描述他。他会是:

  • 一个自适应适应的中心和固定宽度的侧边栏
  • 允许中间的内容先于其他出现在代码中
  • 允许任何一栏都是最高的高度
  • 只需要额外的一个DIV标签
  • 非常的简单的CSS代码和很少很少的HACK 补丁

站在巨人的肩膀上

这个技术的灵感来自于Alex Robinson's的One True Layout。他曾经在他的文章里阐述过"圣杯"的若干问题,但是他的解决方法需要两个包装并且要求每一栏都需要一个父级DIV,否则很难写内在结构.
另一方面则是由Eric Meyer's的写法想到的,他利用了多种类型的单元混合定位。它的例子中也是用了固定的侧边栏和自适应的中心层,可是不幸的是,他依赖于近似的百分比,不是固定的值,而且填充了一部分随屏幕分辨率不同而自适应宽度的层。

言归正传,看看代码

代码是很直观而且很优雅的。
(为了直观起见,我们使用了非语义化的"中心"、"左"和"右"来阐述我们的代码,但是我们建议您在您的代码中使用语义化的标签 -Ed.)

  1. <div id="header"></div>
  2. <div id="container">
  3.   <div id="center" class="column"></div>
  4.   <div id="left" class="column"></div>
  5.   <div id="right" class="column"></div>
  6. </div>
  7. <div id="footer"></div>

一个额外的DIV包含着我们的三个层,这样的结构符合我集中内容上一体的标记为一体的习惯(obsessive compulsive markup habits. 翻译的不准确)
样式很也简单,左边侧栏是200PX,右边是150,为了简便标示用LC,RC,CC分别代表左边,右边和中间,样式如下:

  1. body {
  2.   min-width: 550px;      /* 2x LC width + RC width */
  3. }
  4. #container {
  5.   padding-left: 200px;   /* LC width */
  6.   padding-right: 150px;  /* RC width */
  7. }
  8. #container .column {
  9.   position: relative;
  10.   float: left;
  11. }
  12. #center {
  13.   width: 100%;
  14. }
  15. #left {
  16.   width: 200px;          /* LC width */
  17.   right: 200px;          /* LC width */
  18.   margin-left: -100%;
  19. }
  20. #right {
  21.   width: 150px;          /* RC width */
  22.   margin-right: -150px;  /* RC width */
  23. }
  24. #footer {
  25.   clear: both;
  26. }
  27. /*** IE6 Fix ***/
  28. * html #left {
  29.   left: 150px;           /* RC width */
  30. }

重新度量你想要的模型的价值,你会发现其实很简单.这布局能在Opera, Firefox, and IE6(需要在最后一句HACK).IE5.5则需要HACK CSS盒模型。刚好也给读者一个练习的机会(Orz).
再看一遍这段优化代码(例子)

原理
其实诀窍很简单,让左边栏与右边padding,右边栏与左边padding,中间刚好剩下自适应的内容层.
让我们一步一步来演示这个过程
第一步:创建父级容器
包括header, footer, and container.

  1. <div id="header"></div>
  2.  
  3. <div id="container"></div>
  4.  
  5. <div id="footer"></div>

我们让container(包容的容器)padding-left,padding-right,padding的值分别是左边栏和右边栏的值.

  1. #container {
  2.   padding-left: 200px;   /* LC width */
  3.   padding-right: 150px;  /* RC width */
  4. }

我们的布局大致是这样的:

第二步:添加栏
我们现在已经有了父级容器,现在来插入里面的三栏

  1. <div id="header"></div>
  2.  
  3. <div id="container">
  4.   <div id="center" class="column"></div>
  5.   <div id="left" class="column"></div>
  6.   <div id="right" class="column"></div>
  7. </div>
  8.  
  9. <div id="footer"></div>

现在我们要添加宽度和浮动属性以使他们在一行,并且在footer清除浮动

  1. #container .column {
  2.   float: left;
  3. }
  4. #center {
  5.   width: 100%;
  6. }
  7. #left {
  8.   width: 200px;  /* LC width */
  9. }
  10. #right {
  11.   width: 150px;  /* RC width */
  12. }
  13. #footer {
  14.  
  15.   clear: both;
  16. }

你会留意到中间的层已经和外面的层一样宽了(除去padding值的情况下),一会我们就可以看见所有的层都在一起并且也是100%宽。现在,层的顺序就是我们想要的顺序了,但是因为中间的层占据了100%的宽度,所以左边和右边的层就掉了下来。

第三步:把左边栏放在左边
现在我们要干的是怎么样让这三栏在一行,中间的容器已经完全符合我们的要求了,我们只需要关注剩下的两个,先从左边的开始。
需要两步让左边栏在左边.第一步:让他以100%的负margin(margin-left: -100%;)穿过中间的层,记住一定要用100%,因为中间的层的宽度是100%.

  1. #left {
  2.   width: 200px;        /* LC width */
  3.   margin-left: -100%
  4. }

现在左边栏和中间栏重合,左边重合,右边栏浮动过来(虽然还是掉下去了),现在的结果变成了下面的样子:

第二步:现在要把左边栏拉到正确的位置,我们使用相对定位来抵消左边栏的宽度

  1. #container .columns {
  2.   float: left;
  3.   position: relative;
  4. }
  5. #left {
  6.   width: 200px;        /* LC width */
  7.   margin-left: -100%
  8.   right: 200px;        /* LC width */
  9. }

因为设置了right: 200px;所以左边栏被中心层的右边推远了200px,刚好到了左边。(The right property pushes it 200px away from the right edge; that is, to the left.)现在左边栏刚好完美的到了他应该到的位置

第四步:把右边栏放到右边
剩下的事就是把右边栏放在右边,需要把他拉出容器放在容器的padding上,我们依然利用负边距。

  1. #right {
  2.   width: 150px;          /* RC width */
  3.   margin-right: -150px;  /* RC width */
  4. }

现在所有的东西都在他该在的位置上了,没有谁"掉队",呵呵。

第五步:补充设计
如果浏览器重新调整大小,中间的容器小于左边栏的时候,整个布局都会被破坏掉,所以要设置一个min-width来保持我们的布局不被片破坏,虽然在IE6上这个属性是不起作用的,但是没关系。

  1. body {
  2.   min-width: 550px;  /* 2x LC width + RC width */
  3. }

没有任何一个布局是不要对IE增加一些额外的工作就能完成的。(-_-!) 在IE6中负边距会使左边栏离的太远(在全宽浏览下),我们要用右边栏的宽大把他向右拉回来。并且用* html来屏蔽其他浏览器执行他.

  1. * html #left {
  2.   left: 150px;  /* RC width */
  3. }

至于为什么要用右边栏的宽度,要牵涉到一些算法。当然我不会用去解释这些,我们只要知道这样是起作用的,我们甚至可以认为这个是IE的众多"魔法"之一。

Padding, please
我不是设计师,但是上面的布局实在是触犯了我的审美观。没有边距的栏目是很分辨和阅读的,我们需要空隙!

使用One True Layout这样百分比布局的的弊端之一就是会造成中间层的padding困难,百分比的padding在某些分辨率下会变的很难看。可以用固定宽度的padding,但是需要给每一栏内部嵌套一个div。

用这个布局padding不是问题,他可以直接给左、右边栏添加padding,只需响应的调整即可。例如我们要给上面的例子添加10px的padding,并且保持他(width+padding)还是200px,只需要小小的改动

  1. #left {
  2.   width: 180px;        /* LC fullwidth - padding */
  3.   padding: 0 10px;
  4.   right: 200px;        /* LC fullwidth */
  5.   margin-left: -100%;
  6. }

要给中心层加padding需要一个技巧,但是不需要额外的结构,只需额外的一小段css。加的100%的宽度导致中心层和外部的的padding以外(non-padded width)的宽度一样宽。为了达到我们想要的效果,我们需要增加右边的margin,使其等于padding值的总和,这样就保证了他会是我们想要的大小。
我们改变了中间层的改变成现在这样后,左边栏需要移动更多的距离才能在正确的位置上,这也是技巧所在。我们需要给右边框的抵消值(上面的right值)增加上中间层的padding值。
为了更具体的说明,我继续以上面的例子为例,现在给每一个边框增加10px的padding值(合计20px),中间层增加20px的padding值(合计40px),新的样式如下:

  1. body {
  2.   min-width: 630px;      /* 2x (LC fullwidth +
  3.                             CC padding) + RC fullwidth */
  4. }
  5. #container {
  6.   padding-left: 200px;   /* LC fullwidth */
  7.   padding-right: 190px;  /* RC fullwidth + CC padding */
  8. }
  9. #container .column {
  10.   position: relative;
  11.   float: left;
  12. }
  13. #center {
  14.   padding: 10px 20px;    /* CC padding */
  15.   width: 100%;
  16. }
  17. #left {
  18.   width: 180px;          /* LC width */
  19.   padding: 0 10px;       /* LC padding */
  20.   right: 240px;          /* LC fullwidth + CC padding */
  21.   margin-left: -100%;
  22. }
  23. #right {
  24.   width: 130px;          /* RC width */
  25.   padding: 0 10px;       /* RC padding */
  26.   margin-right: -190px;  /* RC fullwidth + CC padding */
  27. }
  28. #footer {
  29.   clear: both;
  30. }
  31.  
  32. /*** IE Fix ***/
  33. * html #left {
  34.   left: 150px;           /* RC fullwidth */
  35. }

当然上下的padding值能很方便的添加,具体请参看nicely padded version 中的例子
这个布局也能在em下很好的工作,但是不能在混合em和px的时候工作,选什么你来定,但是要选的正确。
等高栏
这个布局能保证所有的栏目都是等高的,实现方式是来着与One True Layout的adapted wholesale。所以我不详细解释,增加和修改代码如下

  1. #container {
  2.   overflow: hidden;
  3. }
  4. #container .column {
  5.   padding-bottom: 20010px;  /* X + padding-bottom */
  6.   margin-bottom: -20000px;  /* X */
  7. }
  8. #footer {
  9.   position: relative;
  10. }

我特别在下面留了10个像素

附加的说明,请注意在Opera上存在一个bug,即overflow:hidden会让你所有的栏目都变大,在One True Layout上有详细的解决办法。你可以使用这个方法或是等Opera 9(被修复了这个bug)来测试。
另一个问题是,在IE中如果内容的高度没有背景图片的高度高,背景不会被剪掉,他会超出footer。如果你没有独立的footer或是内容比背景高,这也不是个问题。如果你仍然需要一个footer,不要怕还是有解决的办法的。用一个DIV把footer封装一下就可以。

  1. <div id="footer-wrapper">
  2.   <div id="footer"></div>
  3. </div>

现在依然用上面我们使用到的让各个栏目对齐的技巧来让footer超过封装的DIV,来显示我们想要显示的内容

  1. * html body {
  2.   overflow: hidden;
  3. }
  4. * html #footer-wrapper {
  5.   float: left;
  6.   position: relative;
  7.   width: 100%;
  8.   padding-bottom: 10010px;
  9.   margin-bottom: -10000px;
  10.   background: #fff;         /* Same as body 
  11.                                background */
  12. }

现在解决了所有的问题,得到了我们想要的结果和很少量冗余的代码。

哦,还需要说明的
完美主义者有可能是想知道是否有一个更好的方式来做到这一点?我之前声明过,我引用了一个非语义化的包含容器(DIV),确实,我们不应该包含一个额外的结构来打乱我们完美的结构.
如果你像我一样,象知道这样怎么去实现,不需要更多的结构,我向你介绍"wrapper-free Holy Grail (没有包含的圣杯)",其最抽象的特殊之处在于,用一个DIV实现了各部分 — 不多也不少,语义化,不愧于"圣杯"的美名.其原理是相似的.主体直接应用padding不需要多余的容器,而用负边距来延伸header和footer 使其刚好达到想要的宽度.
这种布局能在所有的浏览器上正常工作,甚至(令人震惊)是在IE上,但是不是等高的.而且在非常小的窗口中是会"破掉"的,使用他的时候一定要谨慎.
最后
虽然文中提到的例子很具体,但是这项技术的使用范围确实很大.为什么不能有两个活动的中心层,为什么不调换层的顺序.这些引用都超出了本文的表述范围,但是要实现他们只需要很小的改动即可.使用圣杯是明智的.他可以成为你使用CSS的技巧之一.


 
 

可从此处完成的操作:

 
 

2008年11月5日星期三

Web 开发终极工具箱:120个 Web 开发工具 (下)

新闻来源:mashable.com
这是 Mashable 搜集的最新 Web 开发工具箱,包括拖放式 Web 程序创建工具,代码库,项目管理,测试程序,以及支持各种编程语言的框架,从 Ajax 到 Ruby 到 Python。这是第二部分。   参考与资料


COfundOS - 一个讨论开源软件,寻找投资的平台。
Mac Yenta - 独立 Mac 开发者的社会化网络平台
CorkDump - 一个关于常用资源(代码片段,CSS,Flash 等)讨论板。
All Developers Network - 开发者社会化网络
CodePlex - 来自微软的开源项目托管站点


UnmatchList - 开发设计者的资源库
developerAnalytics - 社会媒体评价与报告,帮助你发现有潜力的社会媒体应用。
CollabFinder - 一个供开发设计者协同工作的地方。
测试,监控,Bug 跟踪,项目管理



CloudStatus - 对 Web 上最流行云服务进行观察

BetaBitz - 一个帮助你寻找 Beta 测试者的地方

observu - 免费的网站与服务器监测服务

UserFix - Bug 报告与功能请求站点

OctaGate SiteTimer - 用来测试你的站点的访问时延



Cuzillion - 简单的页面测试与检查程序

Mob4Hire - 为你的移动应用程序需要大量测试者

Beanstalk - 一个托管的服务,用来浏览跟踪版本控制,包含对Basecamp 以及 Campfire 等同类服务的集成。

BUGtrack - 项目管理,Bug 跟踪

UserZoom - 用户体验测试平台


devunity - 曾是一个 Beta 版 Bug 跟踪服务,现已成为社会化开发平台
BuiltWith - 对任何站点提供技术分析与 SEO 信息服务
fixx - Bug 跟踪,包含移动设备界面与协同功能
BugWiki - 一个简易的 Bug 跟踪系统
litmus - 基于 Web 的测试程序,在不同浏览器上检查你的设计


Bugtagger - 一个包含标签机制的 Bug 跟踪程序,方便找到每个 Bug 是与什么相关的
FEED Validator - 验证你的 Atom, RSS 以及 KML 聚合服务
pastebin - Debug 工具允许你协同工作以找到问题所在
JUnit.org - 一个测试框架,编写并执行自动测试程序
  Ruby 以及 Ruby on Rails 资源与工具


Open Source Rails - 一个用来展示基于开源 Ruby on Rails 站点的地方
Exceptional - Rails 程序异常跟踪与管理工具
TuneUp - 使用 Rails 插件检查你的程序的性能
heroku - Ruby on Rails平台,无需安装配置,直接在浏览器中写代码。
RSpec 1.1.8 - Ruby 的开发框架,包括 Scenario 框架与代码示例框架



Lovd By Less - 一个开源的 Ruby on Rails 社会网络平台
Merb - 一个 Ruby 框架,包含广泛功能
Camping - 一个 Ruby 微框架
  Ajax, Java & JavaScript 资源与工具


Javxs - 在线工具,将 HTML 转换为 JavaScript
frevvo - 一个 Ajax 表单创建工具,包括 XML 支持与拖放式控制
AjaxDaddy - Ajax 程序演示
WaveMaker - 可视化,开源 Ajax 所见即所得编辑器
AppJet - JavaScript 程序编写平台



SproutCore - 一个 JavaScript 框架,用来创建桌面质量的 Web 程序
Bungee Connect - Ajax Web 程序平台,跨浏览器支持
Spring - 企业 Java 应用平台,旨在提高开发效率与程序质量
jQuery - 一个用于 Ajax Web 开发的 JavaScript 库。
KSS - 使用该框架,无需编写任何代码就可以开发基于 javaScript 的 UI
    PHP 资源与工具


Flow3 - 一个最初用于 TYPO3 5.0 的 PHP 框架,但可以独立使用
Prado - 一个基于组件的 PHP 5 编程框架,面向对象,事件驱动
  Perl 资源与工具


Mason - 基于 Perl 的 网站开发引擎,包含 Debug, 模板等工具
  Flash 资源与工具


OpenLaszlo - 富 Internet 平台,结合 Flash 与 DHTML,但只需一次编写
  Python 资源与工具


GTK+ - 一个用于 Python 的 GUI 开发工具套件
Wing IDE - 专业的 Python 开发环境,提供30天试用
Cheetah - 一个开源的,基于 Python 的模板引擎与代码生成工具

本文国际来源:http://mashable.com/2008/11/01/web-development-tools/

Web 开发工具箱:120个 Web 开发工具(上)

这是 Mashable 搜集的最新 Web 开发工具箱,包括拖放式 Web 程序创建工具,代码库,项目管理,测试程序,以及支持各种编程语言的框架,从 Ajax 到 Ruby 到 Python。这是第一部分。 Web 程序创建类


DreamFace - 一个用来创建个性化 Web 程序的框架。

Organic Incentive - 以拖放式界面创建 Web 饰件

dbFLEX - 商务程序开发平台。

app2you - 在线创建与定制 Web 程序。

Qrimp - 一个便宜的数据库平台,基于你周围的数据(如 Excel)创建应用程序。





Lightspoke - 拖放式程序创建工具,动态过滤,排序,真正的关系数据库后台。

Tersus - 可视化程序创建工具,无需编写代码。

Qt - 跨平台应用程序框架,可以同时开发应用与界面。


代码库与代码搜索




byteMyCode - 代码搜索

Snipplr - 帮你存储,管理所有代码片段。

ErrorKey - 错误代码搜索引擎。

findJAR.com - JAR 文件搜索

github - 代码库,既支持公共代码,又支持私人代码,私人代码通过 SSH 以及 SSL 访问。



merobase - 搜索组件。

Codebase - 代码库,技术支持与安装部署跟踪程序。

CONFiles - 配置文件的在线存储与分享

CodeSnippets - 公共代码库,也支持私人代码

GWT-Ext - 免费的,可下载的饰件库


开发环境,平台与框架


SocialGO - 社会化网络托管平台,包括消息,视频聊天,会员资料,照片分享,博客等
Pringo - 社会化网络平台,功能包括视频,MP3 支持,图片库,圈子,podcasting 等。
slinkset - 一个用于创建社会化新闻站点的在线平台
iWidgets - 社会化 Syndication 平台,允许你将你的内容聚合到社会化网络
WackWall - 一个 Hosted 的社会化网络平台




WhiteLabelDating.com - 一个创建约会,社会网络,社区站点的平台,允许以自己公司的名义创建。
ONEsite - 社会网络平台,包括博客,照片与视频库,评分与标签,消息板,私人消息等
jinity - 免费的社会网络平台,包括消息板,聊天,圈子,日志,投票,新闻等
Magnify.net - 网站视频工具,包括全套媒体工具
ShoutEm - 微博客与社会网络平台



Soceeo - 社会网络平台,包含文件分享,新闻,投票等
Swift - 移动站点创建工具,包括多种设计选项,支持 RSS Feed,多媒体等
SnappVille - 社会网络平台,包括组,博客工具,即时消息等
Ning - 社会网络平台,允许使用自己的品牌,包括会员资料,事件列表,甚至 Facebook 集成。
mixxt - 社会网络平台,包括事件,论坛等
zembly - 一个用来创建社会应用的的平台,目前处于 Beta 版。Yuku - 一个社区平台,可定制,拥有很强大的系统管理工具SocialEngine - 基于 PHP 的社会网络平台,功能包括 multi-part profiles,子网,搜索友好 URL,博客,圈子等。Cappuccino - 一个用来创建桌面品质 Web 程序的开源框架Jaws - 一个用户友好 CMS 平台。   综合开发工具


Tabifier - 对你的代码进行自动缩进。
Sms2do - 一个用来评测和演示 SMS 程序的免费工具。
Pretty Printer - 源代码格式化工具,支持 PHP, JavaScript, CSS 等
Jitterbit - 一个开源集成方案,提高可扩充性与性能
Bitizer - 二进制,十进制,16进制,Base 36 以及 ASCII 转换工具



thmbnl - 显示你站点中那些链接网页的缩略图
ID Selector - 一个 OpenID 工具
consoleFISH - 免费的,基于 Web 的 SSH 服务器访问
form site - 用来创建自定义表单
99Polls - 用来创建投票与调查



Warehouse - 一个非常漂亮的代码库浏览服务,支持多代码库以及非常完善的权限控制
rendur 2.1 - 一个沙箱程,让你一边写代码,一边生成页面
Languify - 翻译管理系统
ROR Sitemap Generator - 顾名思义,这是一个 ROR 网站地图生成工具
MicroMaps - 用来生成交互式地图,放在你的网站



Newsfeed Maker - 为你的网站或博客创建 News Feed
WriteMaps - 网站地图在线生成工具
Project Kenai - 免费的开源项目或代码托管站点
Launch Splash - 为你还没有开通的网站免费生成一个欢迎页面
Browser Shell - 基于浏览器的 SSH 工具
foigo - 创建自定义表单,调查,以及数据库AggData - Premade lists for your development projects.SnapCasa - 网站缩略图工具Versionshelf - 代码库安全管理   Mashups 与 APIs


The Echo Nest - 音乐相关的开发服务 API,包括歌手资料,音乐推荐等功能
Zeep Mobile - 为你的站点添加基于文本的消息系统
Clickatell - 一个短消息网关,让你的网站通过多中连接方式发短消息
Nonoba - 在线游戏开发 API,支持多玩家。
Zong - 移动支付平台,包含开发 API



Web Shots Pro - 一个 API,开发者可用来在他们的程序中添加网站缩略图。
Pushpin - 一个简单易用的在线地图 API,支持大量标记以及众多其它功能
Datamash - Create widgets and mashups for your site with information anywhere on the Web.借助网络上的众多信息为你的站点创建 widgets 与 mashups
Spicy Pipes - Mashup builder.

本文国际来源:http://mashable.com/2008/11/01/web-development-tools/