Recent Updates RSS Hide threads | Keyboard Shortcuts
-
Web开发人员必备的20款超赞的jQuery插件
Jeck
导语：jQuery的易扩展性吸引了来自全球的开发者来共同编写jQuery插件。jQuery插件不仅能够增强网站的可用性，有效地改善用户体验，还可以大大减少开发时间。现在的jQuery插件很多，可以根据您的项目需要来选择。这里为您介绍20款非常不错的插件。
Creative Radical Web Typography
Lettering.js是一个轻量经的、易于使用的jQuery插件，可创造出极具个性的网页排版，是2010年最佳jQuery插件之一。
New FancyMoves Jquery Product Slider
Jquery Product Slider是一款效果很不错的产品幻灯片插件。
Jquery Space Gallery
Jquery Space Gallery是一款很有空间感的图片库插件。
Fancy Thumbnail Hover Effect
这是一款非常不错的Hover效果插件。
Jquery Inline Form Validation
这是一款表单验证插件。
Site Switcher
这是一款站点切换插件。
AnythingSlider
这是一款效果很棒的幻灯片插件。
Jquery Tooltip Coda Bubble
这是一款简洁的jQuery信息提示插件。
Jquery Upload and Crop Image
这是一款图片上传和裁剪插件。
jQuery Carts
这是一款jQuery图表插件。
Twitter-like login box
这是一款类似Twitter登陆框效果的插件。
File Download
这是一款文件下载插件。
Polaroid Photo Viewer
这是一款宝丽莱效果图片浏览插件。
jquery Hover Sub Tag Cloud
这是一款子标签云显示插件。
Graph Visualization
这是一款图标可视化插件。
Show/Hide Jquery Panel
这是一款控制面板显示和隐藏的插件。
Drop Down with CSS and jQuery
这是一款下拉菜单插件。
Quick & Easy Zooming With jQuery – Zoomy
这是一款非常好用的缩放插件。
Horizontal Accordions
这是一款横向手风琴效果插件。
Flexible Rating
这是一款非常灵活的评分插件。
（编译来源：梦想天空 原文来自：20 Useful jQuery Plugins Every Developer Should Know About）
-
960 Grid System
Jeck
随着CSS 框架的流行升温不断，前端er们也越来越关注CSS框架的使用，国内也有很多关于各种CSS框架的使用技巧和教程，彬Go一直关注着各种CSS框架，尤其是960 grid system(960网格系统)，由于国内关于960网格系统的文章并不多，所以彬Go会尽量多的去帮助大家翻译和收集一些相关的教程和技巧，今天这篇关于960 grid system的文章转自译言，简单介绍了960网格系统（960 Grid System）问世的过程及960网格系统的特性及使用方法等。希望对大家有所帮助。同时彬Go在此祝大家Happy 牛 year！
更新：
Bryan Veloso 在最近在他重新发布的网站Avalonstar 上应用了960网格系统（960 Grid System）中的16列的PS模板开发。
在这同时感谢他给960.gs提供了网站的截图以供使用。
您还可以参考以下960网格系统相关教程:
《960 Grid System 基本原理及使用方法 》
《使用Photoshop+960 Grid System模板进行网页设计 》
《精选15个国外CSS框架》正如你们所知，我最近正为一个CSS框架（此框架是应本人最近的个人的专项需求所开发的）建一个站点。由于一直没想到更好的名字，再说960这个数字凑成的logo还不错，所以简单的叫做960 网格系统（960 Grid System）。
这很有趣，因为我只是在星期天网上临睡前上tweet发了一条关于960网格系统的信息，然后就收到很多评论，甚至收到了很多咨询相关信息的邮件。
应该特别指出的是，这个180KB大小的下载包，不仅仅是CSS框架，它包含了一下文件：可打印的缩略图表，针对Firewofks,Phototshop，OmniGraffle 和Vision的模板文件，CSS文件，HTML文件。
960.css文件经压缩后大小只有4KB。
首先，我写本CSS框 架自是为了我自己的项目，同时只是为了过把设计的瘾。我十分清楚并不是所有人都会喜欢它。有这么句老话——你要么满足全部人某一时段的需求，要么满足一部 分人的永远的需求。我并不打算那样做。我只是想将我过去一年多所关注的网格方面的东西跟大家分享。假如有人能因此而有所收获，那是件好事。
好了，废话少说，继续往下看吧。
浏览器支持
本框架代码适用于所有由yahoo评为A级（A-grade）的浏览器。本文发文时间，yahoo对浏览器的评定情况如下图所示。
留意上表可以发现：IE5.x并不在表中，其实原因很简单，对于Yahoo来说，IE5.x的市场占有率已经很小，不仅如此，连微软都停止了对该版本提供支持。假如你还被人用刀顶着喉咙，让你写代码去适应这个古老的浏览器的话，我建议你到Authentic Jobs （译者注：某招聘网）看看别的更好的职位吧。
开发背景
我开始对网格设计产生兴趣是在看了 Khoi Vinh 和 Mark Boulton的 文章之后。我承认，一开始我并不十分理解他们文中的概念，但是后来，经过不断的思考，终于了解到这是一个在web网页页面设计领域内经得起时间考验的实践 总结。不管你喜欢还是不喜欢，现今的网页大多都是以一个个四四方方的“块”组成。不可避免的，页面设计上也用各式长方形通过不同的组合来达到目的。
竟然我们要使用这些四四方方的东西，那么我们应该对它们有个逻辑性的认识。有次在完成Khoi和Mark安排的初步工作后,偶然发现了Cameron Moll的文章，文中说到，960px是网页设计的最佳宽度。现在基本上显示器都支持1024×768的分辨率（就像支持以前的800*600那样），而在这个分辨率下，960px的宽度的确能够非常好地展现网页的内容。
自从看了那几篇文章以后，我在设计中 开始应用这个布局方法——将960px分成若干列。直至2007年春，可以这样说，我发现了我的一套规律。这个发现导致我开始了我个人网站的重构，工作还 在进行中，不过进度很快。假如你看我瞄我一下，发现了我正在吃我的“狗粮”，在此同时，我的网站已经用上了新版本的16列网格布局。
我现在还不能好好坐下并完成重构工作，因为我还得完成硕士学位相关的信件，还有需要完成接到一些私活等等。按时间顺序来说，技术上我已经在Blueprint发布之前开始使用我网格系 统了。这个说法其实没什么很大价值，只是帮我解释了“为什么使用另外一个网格框架？”，因为我已经在一个项目里用Blueprint。为了减少这个项目日 后的维护成本，我们要使用一个已有的代码库。尽管我们在编写代码前已经商定按Blueprint的约定出发，但相关的设计人员并没有从Blueprint 的层面出发来设计布局。当然，这也有一部分责任在我，在开发前我并没有与他们充分的交流Blueprint工作方式。在项目的最后阶段，我基本上将所有的 按Blueprint框架写的代码换回了用table布局。
这时候我在想，如果有那么一个精简的东西能让网页设计者和编码者思维更活跃，沟通更顺畅，岂不乐哉？而且，要是执行机构包含在该工作流中呢？960网格系统应运而生！
它并不是
到目前为止，我收到的邮件大部分的问题都是“你个这个跟Blueprint哪有什么不同”，这些绝大部分都是很愤恨的说，就像在说“简直浪费你的时间，因为Blueprint已经存在，我更喜欢Blueprint，你回去吃奶吧。”一样。
对于这部分人，我想给点欢呼声，你们大可以继续使用那些你们认为最适合的，最熟悉的框架。我可不愿意挑起矛盾，强迫大家使用这个框架，而不去使用那个框架，尽管这个框架是更值得用的。
它有着明显的缺陷，或者有不少优秀的功能，这全在于你怎么看待它。这就决定了（或不决定）960网格系统的架构方式。系统中包含样式表text.css，它的存在主要是为了保证绝大部分的页面设计中，开发者可以快速定义原型，常用模块如头部文件，段落和列表的基本样式。
我没有脱离我原有方向而去做像在ALA（美国图书馆协会）官网中用来描述入门文章所用的那种竖排文字的效果。这并不意味着我感觉这种竖排的效果无 效，而实际上，我清楚看到这个效果的价值所在。我认为这是一个棒极了的点子，是我崇高的追求。然而它是极其脆弱的，假如通过内容编辑器上传了任意大小、 173px高的图片，那在它之后的网页元素就都会被打乱。
我同意它是众多解决方法中的一个，而其他则更需要去规范化。事实上，当一个网站页面设计完成的时候，绝大部分的内容都会独一无二的固定下来。我特意没有去设置文字和页面背景颜色。你也可以说我懒，但是这正是在使用Blueprint时所领悟到的，我必须坚持下来。我可不希望到时有人会说：“为什么这个<th>有背景色？”。
我也没有加入例如图片，引用内容等样式，这是因为我很少用到。再者我考虑到这样会比那种布局和原型相关联的框架更具可设计性和更具内容导向性。现在能使你轻易的写一个一次性的属于你的样式表了。
因此，假如我的网格系统并不如你想象的那样，我希望你们原谅我。尽管我很喜欢披头士，而且我不会手下留情。
正文
简单的说了下960网格系统不去做的内容之后，我们来强调一下该系统的基本特性。首先，对于热爱linux的用户。在linux系统里默认的字体顺序是这样的：Helvetica, Arial, Liberation Sans和FreeSans，还有通用的sans-serif。
在Ubuntu系统里，我发现它使用的默认字体san-serif 的宽度更接近Verdana （相比于Helvetica 和Arial）。这并不是很大问题，但是如果你需要让你的页面在各种浏览器上表现一致的话，你要做的不仅仅是为linux用户选择一个通用的字体。假如你 按某一大约宽度的字体来确定块的大小的话，这显得相当重要，仔细观察下，页面很可能在换行的时候出现问题。
当我将此问题跟我朋友Yannick说了后，他建议我使用在Fedora和Red Hat 两款Linux操作系统都默认使用的Liberation Sans字体。同时它也可以在通用公共许可证的保护下简单自由地获得，如此的与众不同。假如非让我去描述它，我可以说改字体里数字像用了Verdana， 而其他则像用了Helvetica。
在读过 Jon Christopher’s 的文章后，知道FreeSans最接近Ubuntu下的默认字体 Helvetica。因此，在text.css的font-family下的设置是页面字体同时适应MSX（MAC OS Ten）,Windows和基于Linux的系统。
调整与间隔
在我们书生气十足的要为字体的像素数惊醒大辩论的之前，且听我说，我暂且将此按下不表。我十分清楚你们的论点，甚至在做更富有弹性的页面是参考了你们的观点。对于我来说，这就是重复投资。你可以花上无数小时在考虑字体的大小，继承问题，就像我当时做Geniant Blog那时一样，或者你可以在以后都一个个像素的调整。
我发现Blueprint上文本字体使用了12px，但是YUI（Yahoo user interface）的fonts.css将文本文字定义为13px。除了对他们按百分比的调整方法有异议之外，我确实非常喜欢他们实现排版的方式。我们 已经将这些运用在Geniant Blog上，以实现更好的效果（虽然这个工作耗费了很多时间精力）。
当我不得不小心点设置一个垂直的基线时，可以选用body中文本字体大小是13px，算上1.5倍行高（line-height）则是19.5px。绝大多数块级别的元素的底部边距为20px。这样一来，你非常容易就得到了一个一致的基准线。这只需要调整标题的行高而已。
有两个块级别的元素我没有将设置它的底部边距，它们分别是blockquote 和form。在strict文档类型定义里面，要求所有其他的块级元素都在它们里面。比如：paragraph标签在blockquote里面，或者 fieldsets标签在form里面。尽管它不可以设置什么边距，但是那些块级的子元素可以整齐的排列在里面。
我已经将list元素设置为左缩进30px，假如你要顶端对齐，则将缩进像素数归零。我实际上认为对齐了标点符号是相当酷的，但还没有碰到有这种需求的顾客，于是我在在CSS文件中对应的地方改掉了，以免产生不必要的争论。
:Focus
我只是简单的再说下这观点，这观点相当普遍。尽管我个人认为Eric Meyer将reset.css中的”:focus”移除的确是使页面更美观，但我想保留焦点的边框才是正道，因为有部分用户是使用键盘来点击链接的，而非鼠标。
为了让代码兼容Opera浏览器，代码编写上花了较长的时间。这是因为Opera浏览器中根本就没有类似:focus这样的不标签。不管怎么说，假如你希望你的链接看起来更简洁一点，你可以将text.css中的a:focus去掉，同时你要知道你的操作将会使你设计牺牲了网页的到达无障碍性。
列
960网格系 统中与Blueprint有着不少大不相同的地方，除了命名规则不一样外，还有各列获得各列之间的间隔的方式也大不相同。在Blueprint中，每个列 直接的间隔都是10px（对我来说，觉得太少了），而且都是在列的右边。每行的最后一列要用class=”last”来去掉它本身的右边的间隔。这意味着 不管在容器的左边还是右边，都必须会有空隙。在大多数的情况下，这不会有什么大问题，但是如果如果用户的使用了特殊的浏览器，实际上使用Chrome浏览 器时就会显示出不正常。
在960网格系统里，每一列都是左右各有边距10px，这是考虑到有些容器会留有10px作为边上的缓冲，而且列与列中间的宽度会达到20px，还有一个就是：没有必要在每行最后一列额外的指定class来清除多余间隔。
在少数情况下，你可能需要将一个网格嵌套在另一个网格里面。在这种情况下，你需要用class=”alpha”,用在嵌套在里面每一行的第一个网格，用class=”omega”在嵌套在里面的网格的每一行的最后一个网格。这稍微增加了你工作量，但是这就是比较边缘的情况，并不会出现得太多。
我特地选用了这样一种方式约定命名规则，使用grid_xx,出于以下几种考虑，假如用span-xx这类会容易把人弄糊涂，因 为<span>,<td colspan=”x”>和<colgroup span=”x”>在HTML标签早已存在了。我想只有在这几个标签或属性没有被使用的情况下我才选择这个命名规则。同时我也不喜欢一而再的用这种 ——class=”column…”，虽然这个方法是不错的，但是Bluprint那伙人在最近的项目中把这个东西用滥了。
你通过给网格样式用prefix_XX 或者suffix_XX组合控制，就可以很容易的在每个单元网格的前面或后面添加空白的列（栏），这很像Blueprint。命名规则其实是按个人喜欢，就像我确实很容易就被诸如“Append”这些词搞昏头，所以还是少惹它为妙。
IE浏览器
今天又不少人问我有关960网格系 统的IE兼容的问题，还有压缩包里面为什么ie.css这个文件？简单的说，本系统根本不用进行修补来适应IE浏览器。IE6有个顽固的问题，就是在任何 浮动的元素的margin显示上都会是控制上的两倍。或者这是个大问题，但是在那些浮动的元素样式控制上添加display:inline后能很好地解决 这问题。这方法对其他浏览器也没有任何副作用，所以在在主样式表——960.css里很容易找到这段代码。
你也许也会发现<hr />在IE6和IE7下，在画出的横线的四方都会有些空隙，其中上下各有大概7个像素的空隙。通过调节<hr />的margin属性很容易解决这个问题。对于我来说，这个问题还可以接受，并不值得通过再加css控制来修复它。假如你非要给解决这个问题的 话，你单独写个css来兼容IE浏览器吧，记住，要单独写个css文件和做好标注。
清除元素
最后一点，我想说说960.css中的清除元素的方式。这是我个人最喜欢的部分，通过添加极少数标签就可以清除任何元素。由于我之前已经大篇幅说过 了这问题，这里就不再展开细说了。基本上，通过添加“class=”clear””在对应的你希望消除的<span>或者<div& gt;这类的标签里，就可以让对应内容“消失”。唯一的影响就是它同时会消除浮动。
对于一些不想将自己HTML代码弄得“如此混乱”的人，其实还有其他清除的方法——你可以通过CSS来增加标签，而这种方法已经有非常丰富的文档可参考。实际上，通过添加class=”clearfix”到元素里，是清除元素后方的内容。
使用许可
整个源代码压缩包是完全免费的，许可发布遵循GPL和MIT。其实我也不是非常清楚这两个东西，按我理解遵循这两个许可证发布协议以为着你可以将我的代码用在任何情况下（商用或者自用）。在这我尤其要感谢我的朋友Michael Montgomery ，感谢他那些不是很专业的建议，感谢他帮我在各种法律术语之间理清了思路。他白天是个有资质的律师，晚上则是网络武士，帮我修饰960网格系统的文字资料。
尾声
好了，伙计们，就这样了。真心希望960网格会对你们的画草图，搭建框架，网页设计/编码等工作有所帮助。
转自:译言
-
宠物班
Jeck
-
IE9 Beta 官方下载
Jeck
北京时间9月16日凌晨，微软更新了IE 9的新页面,此次发布的Beta版本一共有27个国家的语言,其中也包括了简体中文和香港和台湾的繁体中文版.
IE9的热门新功能:1.硬件加速的 HTML5. 2.和Windows 7 无缝的集成 3.新UI界面设计. 4.更加出色的安全保护和隐私保护. 5.对存在诟病了加载项进行了改进 6.改进了开发工具.
微软官方简介:
硬件加速的 HTML5. 现在, 在您浏览网站时, 您仅仅使用了计算机性能的10%. Internet Explorer 9 将这个比例提升到 90%. 内置了专业级的HTML5支持, Internet Explorer 9 通过Windows 充分发挥了计算机硬件的优势，让开发人员能够开发出下一代的体验.新的硬件加速HTML5 功能包括支持video 和 audio 元素, 开启了平滑、内嵌的视频，不需要插件. 此外, 支持 HTML5 canvas 元素让动态图形的渲染更加的容易, 同时通过Windows 和图形处理单元（GPU）获得加速. 新增的对几个CSS3模块的支持大大增加了网页设计师创作的手段，新的DOM支持意味着更灵活的Web开发.
支持现代的标准. 开发者和客户期待着新的丰富的web应用程序，由web标准例如HTML5, CSS3 和 ECMAScript5开启. 我们一直和标准组织例如W3C 合作，来帮助开发这些标准并将标准通过Internet Explorer 9交付到市场. Internet Explorer 9 已经支持众多的硬件加速，符合基于HTML5, CSS3, DOM L2 和 L3, SVG, ECMAScript5, 等标准的功能.
和Windows 7 无缝的集成. 有了和Windows 7无缝的集成，访问和使用您喜欢的网站在Internet Explorer 9中更加容易. 您可以从任务栏直接访问您喜欢的网站，不需要首先打开浏览器. 有了 固定站点, 您可以拖动喜欢的站点到Window 任务栏让访问更加容易。固定站点能够和其他Windows 7的原生应用程序混合。当网站支持的时候，每个站点可以固定到任务栏预览和跳转菜单， 这样您就可以与其他的Windows 应用程序互动和熟悉这些网站. 跳转菜单是一个不打开浏览器快速访问站点的方法. 缩略图预览控件在Windows 7任务栏可以提供控制，以支持他们的网站. 使用缩略图预览控件，您可以在支持的网站暂停或倒转影片. 您还可以把标签拖动到远离浏览器的地方使用Windows Aero Snap 来对齐一组网站，和原生的应用程序一样.
您的网站更加出色. 新的Internet Explorer 9 浏览器框架使得网站更加出色。简洁并且增强的用户界面将站点放置在前端。浏览器框架是简洁的的，所有的控件将保持安静并且透明，将焦点集中在网站. 每个网站的特点是反映整个的浏览器，使用户沉浸在访问的站点中。浏览器淡化到到背景中，将网站放置到前端，并且您需要的功能悄悄的显露.
下载:点击进入官方下载页面
-
成名之前的Google：斯坦福大学期间的Backrub原貌
Jeck
从1998年开始，Google一步一步地成长为互联网的巨人之一。
现在，Google有了自己的数据中心，全球分布有36个数据中心，服务器总量外界不清楚。据猜测，应远远不止20万台，并且每天都在增长。依Google现在的超大规模，令人不禁想看看当初的Google在斯坦福大学时是什么样的。
1998年初，Google的搜索引擎和网站是运行在如下设备的。
（我有个疑问：上面哪个才是他们DIY的硬盘扩展箱呢？）
Google平台原貌 — Backrub
Google的最初平台被称为“Backrub”，是用Java和Python编写的，运行在如下硬件上：
- Sun Ultra II： 200MHz 双核；内存256MB。 这就是当时Backrub系统的主干设备。
- 服务器：奔2 300MHz 双核*2； 内存512MB；硬盘9G*9。 主搜索运行在此设备上。（Intel捐赠）
- F50 IBM RS/6000：4核；内存512MB；硬盘9G*8。（IBM捐赠）
- Backrub最初的储存设备的是2个独立的机箱：9G*3的硬盘箱和4G*6的硬盘箱。这些硬盘是附加在Sun Ultra II上的。
- IBM的硬盘扩展箱，已配备8个9G的硬盘。（IBM捐赠）
- DIY的硬盘扩展箱，可以装10个9G的SCSI硬盘。
Backrub首次使用Google的Logo
在1997年，Backrub网站上有这样的一段自我描述的话。（比较有意思的是，他们遇到了网络故障，详情看下面的蓝色文字。）
- Backrub是“网络爬虫”，用来扫描互联网的。
- 我们目前正努力提高网络搜索引擎的技术。我们会尽快提供多种相关服务的。
- “抱歉，由于遇到无法控制的网络问题，故诸多服务暂停使用。我们正努力解决这一问题，相信很快就能解决。1997年12月4日。”
Backrub的Logo是什么样的？请看下图：
（看到这个Logo，让我不禁想起《大话西游》中，紫霞说的一句话：“谁的手？”我也有这疑问，这是谁的手，是佩奇的么？还是布林的？）
（上图是1997年Google Logo的第一次露面。一年后，Google正式上线。）
原文来源：伯乐在线 - 职场博客
原文链接：http://forum.jobbole.com/entry.php/91
