fcicq最近在IPA上看到一篇安全相关的文章， 它的最末尾有个checklist，于是催我把它翻译了。前几天比较忙，周末没什么事儿了，就翻译一下吧。
原文的标题是如何让网站更安全。 这里仅翻译文章最后的一个checklist。
2008/4/20更新：fcicq倒是神速啊，马上就把具体的应用策略扔出来了 
参考：PHP 实践 Security Checklist
许多网站都使用了下拉菜单效果，但大部分都是用Javascript实现的。 自己写过下拉菜单的人应该知道，处理onmouseover和onmouseout事件极其繁琐。 而实际上，仅使用CSS的:hover伪类就能简洁地实现下拉菜单效果。
不过遗憾的是只有完全支持:hover伪类的浏览器如Firefox才能实现这种效果。 像IE这种仅能部分支持:hover的浏览器就只能老老实实地用Javascript来做了。
请看下面的代码。
<html>
<head>
<style>
</style>
</head>
<body>
<div id="menu">
<h3>Select from menu</h3>
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
<li>menu item 5</li>
</ul>
</div>
</html>
我们尚未定义样式表，这个页面显示结果就是一个简单的列表。
为了实现下拉菜单，我们先将<ul>元素隐藏起来：
#menu ul { display: none; }
然后应当让菜单在鼠标经过时显示，所以应当为<div>的:hover伪类添加如下定义：
#menu:hover ul { display: block; }
阅读全文 »今天来讲一下CSS中的绝对定位和相对定位，即position属性的使用方法。
position属性常见的值有三种：
- static: 不使用定位（默认值）。
- absolute: 使用绝对定位。
- relative: 使用相对定位。
在解释定位方式之前，首先要阐明文档流(document flow)的概念。 浏览器在解释HTML文档时，它会将各个元素按照在HTML文档中出现的次序， 从上到下依次排列。例如下面的代码将产生如下的效果：
又懒了一下，好几天没更新了。其实上周买的书到了，这几天在忙着看书， 没顾得上研究技术。昨天一口气看完了《CSS禅意花园》， 觉得这本书不愧CSS设计的王者称号，无论从欣赏还是学习的角度，这本书都值得一读。
当然，原书网站CSS Zen Garden也一定要去看看。
今天先来介绍一个从这本书上学到的小技巧：如何用图片替换文字。
所谓图片替换文字就是用图片代替HTML中的某个文字元素，如标题。网站设计中很常用， 比如我想用图片而不是文字来显示blog标题，我可以在本应当显示<h1>的地方显示一个<img>， 但这样页面中失去<h1>会影响搜索引擎评分。当然我也可以通过css给<h1>设置一个背景图片， 但<h1>内的文字必须显示，否则也会影响搜索引擎评分。 可以使用下面的方法之一来通过CSS完美解决。
阅读全文 »今天说说Apache的优化。为什么要优化？因为服务器资源不够用。 资源有很多方面，但根据木桶理论，只要有一种资源不够用， 整个服务器的性能就会受到影响（所谓瓶颈）。
服务器资源
那么服务器的资源包括哪些？对于网站来说主要是CPU、TCP连接数这两者。 CPU表现在任务数上，在Linux下使用平均负载(loadavg)来衡量。 可通过以下命令来查看（参考这篇文章）：
cat /proc/loadavg
对于单CPU的服务器，loadavg高于1，表明任务队列出现了等待，CPU忙不过来了。 超过2以上就会明显感到性能降低了。
TCP连接数可通过以下命令查看：
netstat -ant | grep :80 | wc -l
如果要实时监控服务器资源，可参考OpenNMS项目。
注1：内存不算，低廉的价格使得网站服务器很少有因为内存不够而down掉的。
注2：CPU%是瞬时的CPU使用率，通常无法反映出整体负载。
刚刚为blog加了个面向打印的css，大家可以从浏览器的打印预览中看到效果。 之所以要加这个css，是因为blog显示的内容中有很多是不需要并且不便于打印的， 比如侧边栏、评论输入框等，打印时把这些无用的东西都隐藏掉， 对用户比较友好。
总结一下css的要点。参考的原文在这里。
阅读全文 »原文链接。 这是一篇关于网站易用性的文章，作者以亲身体会讲述了43条 网站设计中常犯的错误，而无疑这些错误会大大影响网站的可用性。 如今网站易用性已成为一种趋势，但纵观国内的各大网站， 似乎易用性并未成为设计者们广泛理解的概念， 因此希望这篇文章对大家能有作用。
1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向，他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。
2. 让网站易于速读。因特网不是书，因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作，我不得不迅速读完所有内容。 项目符号、标题、副标题、列表，这些都能帮助读者迅速找到他想要的内容。
3. 不要使用难于阅读的花哨字体。当然，某些字体可以让网站精彩纷呈。 不过它们容易阅读吗？如果你的主要目的是传递信息并让读者阅读， 你应该让阅读过程舒服些。
4. 不要用小字体。如上一条所述，你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能，但如果必须放大才能看清一个网站的话， 我就再也不会去访问它了。
5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。 原因很简单，在新窗口中打开外部链接，用户就不必离开我的网站。 错！让用户决定如何打开链接，否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站，在必要的时候他们会回来的。
6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。 如果你改变窗口大小，你会在他们面前失去信用。
7. 不必要时不要让用户注册。直白地讲，我上网是为了获取信息，不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息，除非特别必要（比如你 能提供的消息非常有价值）。
8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。
9. 不要过多使用Flash。Flash不仅会增加网站的读取时间， 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。
10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐，结果他们失败了。 记住，永远不要使用音乐。
阅读全文 »原文在这里， 对于初学CSS布局的人也许会有很大的帮助。有经验的开发者在调试CSS布局时也能得到些启发。
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常， 即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界， 错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。 这是MacIE的著名的bug，倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何， 一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。 因此不要对float元素指定margin和padding属性 （可以在float元素内部嵌套一个div来设置margin和padding）。 也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。 因此请保证宽度之和小于99%。
9. 是否重设了默认的样式？
某些属性如margin、padding等，不同浏览器会有不同的解释。 因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD？
如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
最近一直在开发Ajax应用程序。众所周知Ajax的特点是客户端和服务器分离， 客户端通常由纯Javascript组成，通过XMLHttpRequest对象与服务器通信。 在调试客户端代码时，如果服务器开在本地，尚可通过samba等方式直接编辑 服务器上的客户端js代码，倘若服务器在异地，那么每次修改js代码后通过FTP等 方式上传之后再调试就十分费事。说到这里自然会想到将js代码放到本地， 然而XMLHttpRequest却只能访问同一域名下的URL，本地的js代码无法直接使用 远程服务器上的服务。
迷茫之际，同事介绍了delegate这款软件，利用它即可实现本地调试客户端代码。
delegate可以在这里下载。 delegate实际上是一个功能强大的代理服务器，它有个类似于Linux的mount功能， 能够将Internet上的URL映射到本地。利用这个功能， 即可将远程的服务器端和本地的客户端集成到同一个域名下， 实现客户端代码的本地调试。
方法如下：
- 将Apache配置到本机的8080端口，然后将客户端代码放在htdocs下， 使之能够通过 http://localhost:8080/client/ 访问。
- 下载delegate并解压缩。
- 编辑以下的配置文件 delegate.cfg。
-P80 ADMIN="yourname@yourmail.com" MOUNT="/client/* http://localhost:8080/client/*" MOUNT="/cgi-bin/* http://server-address/cgi-bin/*"
第一行的 -P80 指定delegate使用80端口；第二行的ADMIN指定管理员邮件地址， 可以随意设置；第三行将客户端映射到 delegate 的 /client/ 路径下； 第四行将远程服务器目录映射到 delegate 的 /cgi-bin/ 路径下。
另外，如果你需要通过代理服务器访问远程服务器，可以这样设置：MOUNT="/cgi-bin/* http://server-address/cgi-bin/*" PROXY="代理服务器地址:端口"
- 在命令行输入以下命令安装delegate。注意不同版本的delegate的可执行文件名不同。
dg9.4.1.exe +=delegate.cfg
- 打开浏览器，访问 http://localhost/client/。这样即可随时看到对js代码的修改。
实际上，用好这个方法还可以“盗用”许多网站的服务，即自己开发客户端， 再通过 delegate 将请求转发给服务器。其方法不再详述。
box模型即由<div>等块元素的 margin、padding、border、width、height 等属性构成的显示模型， 它是CSS布局的基础。通过设置<div>的各种属性，可以得到任何想要的页面效果。
各个元素的含义如下：
- margin: box外边界到外层元素的距离，即余白。
- border: box的边界宽度。
- padding: box内的内容到box内边界的距离，即边距。
- width: box的宽度。
- height: box的高度。
其中有问题的就是 width 和 height 的定义。一般的浏览器将 width 和 height 定义为 除掉 margin、padding、border 之后的box内容的大小，实际上 box 所占有的面积 为定义的 width/height 再加上 margin、padding、border的大小。
阅读全文 »
