haha世界

by Jeff Croft
翻译：qing
原文地址：http://www.alistapart.com/articles/frameworksfordesigners
近来，在Web开发中”框架”是一个相当时髦的词。比如JavaScript 框架 YUI、 JQuery和Prototype 都引起广泛的关注， Web应用框架Rails and Dojo 更是引人瞩目，仿佛所有人都使用某种框架来开发自己的网站。但究竟什么是框架?是不是框架仅仅是对程序员有用，设计师是否可以从中收益？
什么是框架?
为了便于沟通，我们给“框架”统一一个定义（至少在本篇文章中是统一的）：一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使设计师和开发人员把重点放在任务项目所特有的方面，避免重复开发。通常的讲，框架就是上面提到的JavaScript框架和Web应用框架。
需要强调说明的是，我们不必讨论构造、打包发布，相反，一个框架只为你或你的团队使用即可。

出处：onestab.net
翻译：onestab
原文：mezzoblue CSS Crib Sheet
在使用CSS建站时，您肯定遇到过形形色色的布局问题，最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易，当您遇到困难时为您提供快速参考。
如果您有所补充，请在这里发表您的意见。
本文的其他语言版：法语，德语，西班牙语和匈牙利语。欢迎提供其他翻译。
有疑问，先验证
在调试时，先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。
在其他浏览器中进行测试之前，请先在最先进的浏览器中撰写和测试CSS代码，而不是相反。
如果您在破旧的浏览器中编写和测试，你的代码就不得不依赖那个破旧浏览器的糟糕的显示，然后在符合标准的浏览器中进行测试，看到显示结果“不正常”时，你会很沮丧的。相反，您应该先将您的代码完善，然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的，你不必再为支持其他浏览器而劳心费神。当然了，目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。
确保您想要的效果真的存在
许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定样式，您用的就是私有代码，除了IE之外，在别的浏览器中毫无作用。如果验证器告诉您代码没有定义，极有可能您用了私有样式，别指望在不同的浏览器中得到一致的效果。
如果布局中一定要用浮动对象，别忘了适时使用清除（clear）属性。
浮动元素似易实难，而且难以驾驭。如果您发现浮动对象伸出了容器的边界，或者不像您所期望的那样显示，请检查您的期望是否正确。关于这个问题请看Eric Meyer 的教程。
边距的合并：可用padding 或 border 来避免。
您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins，边距的合并可能就是问题的根源。 Andy Budd 对此的解释也许能为你解惑。
避免将 padding/border 和固定宽度同时应用到同一元素。
IE5 错误的区块模型是罪魁祸首，是它把事情弄得乱七八糟。虽然有补救方案，不过最好是绕过这个问题，当子元素的宽度固定时，为其父元素指定 padding。
避免IE下未指定样式内容的闪烁。
如果您用 @import 来输入外部样式表，早晚会发现IE有“闪烁”的毛病。在应用CSS样式之前，未格式化的HTML文本会短暂地出现。这是可以避免的。
别指望 min-width 在IE中有用。
IE不支持它，但是它将 width 当作 min-width，所以通过一些 IE 的过滤技巧(filtering)，可以实现同样的最终效果。
走投无路时，试一试减少宽度
由于舍入误差，有时 50% 加上 50% 等于 100.1%，破坏某些浏览器中的布局。不妨试试将 50% 减到 49%，甚至 49.9%。
IE 中显示不正常？
可能是 Peekaboo 臭虫在作怪，尤其是当鼠标经过超链接时能显示正常。修补方法见Position is Everything。
如果使用了锚点，在应用超链接样式时要特别小心。
如果您在代码中使用了传统的锚点()，您会注意到 :hover 和 :active 伪类也会作用于它。要避免这种情形，你可以使用 id，或者使用鲜为人知的语法： :link:hover, [...]

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。我们来简单了解一下这些标准：
1．结构标准语言
（1）XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
（1）DOM
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。

一、HTTP响应码
响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。
响应码分五种类型，由它们的第一位数字表示：
1xx：信息，请求收到，继续处理
2xx：成功，行为被成功地接受、理解和采纳
3xx：重定向，为了完成请求，必须进一步执行的动作
4xx：客户端错误，请求包含语法错误或者请求无法实现
5xx：服务器错误，服务器不能实现一种明显无效的请求
下表显示每个响应码及其含义：

100 继续
101 分组交换协
200 OK
201 被创建
202 被采纳
203 非授权信息
204 无内容
205 重置内容
206 部分内容
300 多选项
301 永久地传送
302 找到
303 参见其他
304 未改动
305 使用代理
307 暂时重定向
400 错误请求
401 未授权
402 要求付费
403 禁止
404 未找到
405 不允许的方法
406 不被采纳
407 要求代理授权
408 请求超时
409 冲突
410 过期的
411 要求的长度
412 前提不成立
413 请求实例太大
414 请求URI太大
415 不支持的媒体类型
416 无法满足的请求范围
417 失败的预期
500 内部服务器错误
501 未被使用
502 网关错误
503 不可用的服务
504 网关超时
505 HTTP版本未被支持

二、HTTP头标
头标由主键/值对组成。它们描述客户端或者服务器的属性、被传输的资源以及应该实现连接。
四种不同类型的头标：

1.通用头标：即可用于请求，也可用于响应，是作为一个整体而不是特定资源与事务相关联。
2.请求头标：允许客户端传递关于自身的信息和希望的响应形式。
3.响应头标：服务器和于传递自身信息的响应。
4.实体头标：定义被传送资源的信息。即可用于请求，也可用于响应。

头标格式：:
下表描述在HTTP/1.1中用到的头标
Accept 定义客户端可以处理的媒体类型，按优先级排序；
在一个以逗号为分隔的列表中，可以定义多种类型和使用通配符。例如：Accept: image/jpeg,image/png,*/*
Accept-Charset [...]

常见的AJAX框架有：
DWR - Web Remoting
Buffalo - Web Remoting (based on prototype)
prototype - JS OO library
openrico - JS UI component (based on prototype)
dojo - JS library and UI component
qooxdoo - JS UI component (C/S Style)
YUL - JS UI component
其中关于DWR和Buffalo之间的比较，它们都是Web Remoting框架，区别在于：
DWR使用自定义的简单文本协议，而Buffalo使用burlap协议。因此Buffalo解析大数据量可能会比较慢，然而可以适用于多种服务器端和客户端，并且burlap协议的完整性和支持的数据类型更加丰富
Buffalo基于prototype，如果你的AJAX应用也是基于prototype，那么可以减少重复加载prototype的带宽，并且获得相当一致的编程概念
DWR的服务器端实现要比Buffalo完善一些
DWR更加通用一些，用户比较广，而Buffalo是国内的Michael写的，用户使用比较少(名气较小)
建议使用buffalo，相对更加易用，然而服务器端功能有待完善
此外，
prototype是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，之上还有rico/script.aculo.us实现一些JS组件功能和效果(不过目前还不是很完善)，以prototype为核心，形成了一个外围的各种各样的JS扩展库，是相当有前途的JS底层框架，值得推荐，prototype以及rico/script.aculo.us的一个特出特点就是非常易学易用，门槛很低，常常是一两行JS代码就可以搞定一个相关的功能。同时它也是RoR集成的AJAX JS库。
qooxdoo是一个功能很强的JS组件库，完全模仿Windows操作系统的GUI组件。特点是不通过常规的HTML来构造页面，完全使用JS以类似VB/Delphi风格的编程方式构造Web GUI界面，比较适合内网面向C/S风格的web应用，，而不适合面向Internet的界面多变风格的应用。qooxdoo的一个重大卖点在于qooxdoo将要提供一个FormDesigner的IDE，通过在IDE里面的可视化拖拽设计方式来自动生成C/S风格的web页面js代码。qooxdoo缺点是JS文件体积过大，超过200KB，初次下载会比较慢，而且并不适合Internet消费类网站。
dojo是一个各个方面相当完善的JS库，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织方式。dojo的优点就是库相当完善，发展时间也比较长，缺点是文件体积也比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，至少给我的感觉是相当笨拙，特别是和prototype相比，更加显得难用。
YUL是Yahoo新近发布的AJAX组件库，也是一个包含了各个方面，从工具类库到通讯，到UI组件的综合性JS库。YUL的优势在于文档非常齐全，而且有Yahoo的支持，缺点是库目前还是不是很全，功能也不强大。
当然，更多的框架和工具介绍：Round-up of 50 AJAX Toolkits and Frameworks
http://www.maxkiesler.com/index.php/weblog/comments/round_up_of_50_ajax_toolkits_and_frameworks/
还有篇AJAX框架汇总:
http://www.duduwolf.com/post/AJAX_Frameworks.asp
我这里选4个介绍认识下：
Google推出Java开发Ajax框架
Google 发布 Google Web Toolkit。Google Web Toolkit是一个开放版本的AJAX Framework，通过它用户可以构建像Google Maps和Gmail之类的Web应用程序。这个Google Web [...]