2007-11
02

前些日子就知道CakePHP发布了1.2 pre-beta版。 偶然在delicious上看到这篇文章: CakePHP 1.2的五个方便的新特性。 好文不敢独享,现将其大意记录如下。图片就不转载了,想看图的话可以直接去原文上看。

1. 集中显示友好的错误信息

使用框架时最郁闷的莫过于调试,PHP会报告框架出错,而实际上我们代码中的错误则很难发现。 CakePHP 1.2版中,错误信息会集中显示在页面上方,并且单击错误信息就能看到错误所在的位置, 可以节省大量的调试时间。

2. 内建分页功能

CakePHP 1.1时必须手动书写分页代码,而1.2版则内建了分页功能,还支持单击标题排序。 只需书写下面的代码:

class MembersController extends AppController {
    var $paginate = array('order'=> 'Member.created DESC');
    function listall() {
        $this->set('data', $this->paginate());
    }
}

3. 复杂的表单验证

原来1.1版的表单验证只能使用正则表达式,因此无法验证类似于“包含数字、字母并且长度不大于10且可以为空” 这样的复杂规则就很难通过表单验证实现。而1.2版则支持下面这种复杂的验证。

var $validate = array(
'title' => array(
    'required' => VALID_NOT_EMPTY,
    'length' => array( 'rule' => array('maxLength', 100))
    ),
'body' => VALID_NOT_EMPTY
);

4. 内置电子邮件功能

1.2版添加了发送电子邮件的模块。

5. HTTP请求生成、XML解析

1.2版支持HTTPSocket、XML模块,通过它们可以直接调用外部的WebAPI了。



2007-10
19

原文链接:http://www.avatarfinancial.com/pages/cake/

这篇文章可以说是CakePHP教程中最经典的了。虽然不是完整的手把手系列, 但作者将自己使用CakePHP的经验总结了21条,这些尤其是对新手十分有用。

翻译时故意保留了一些CakePHP中特有的词语没有翻译, 如controller、model等。相信学过CakePHP的人应该马上就能理解它们的意思吧。

另外,CakePHP的wiki已经失效,取而代之的是一个名为bakery的网站。 原文中引用的wiki的链接也都已更新到了bakery上。

阅读全文 »

2007-10
08

这两天一直被一个问题所困扰。同样的一段程序,在自己的机器上调试完全没有问题,放到服务器上时间显示就快了8个小时。显然这8个小时就差在时区设置上。我在自己的机器上写代码时,对timestamp进行了时区调整($now += 8 * 3600)之后再进行getdate()转换,结果完全正确;放到服务器上执行,就要将时区调整代码去掉之后才正常。一时百思不得其解。

写了个小测试程序:先用 time() 取得当前时间戳,再用 getdate() 获取当前的小时、分、秒,分别放到开发环境和服务器上执行。结果很显然,服务器上显示的时间是正确的(22点显示为22点),而我的机器的时间是错误的(22点显示为14点)。从时区的角度来看,服务器使用了正确的CST时区(中国时区),而我的开发环境的时区则是UTC的。但开发环境操作系统是Windows,时区设置也正确,为什么会出错?

窄多的blog上看到,通过date_default_timezone_set()函数可以设置默认时区名。天啊,居然有这样的函数,查了查资料发现它的反义函数date_default_timezone_get(),将这个函数分别在开发环境和服务器上执行,果然,我的时区设置为 UTC。

知道了原因就好修改了。打开开发环境中的 php.ini,找到 date.timezone,去掉注释并将其设置为 Asia/Chongqing,再运行,这次结果正确了。


2007-08
16

许多网站都使用了下拉菜单效果,但大部分都是用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>

我们尚未定义样式表,这个页面显示结果就是一个简单的列表。

dropdown-menu-orig.png

为了实现下拉菜单,我们先将<ul>元素隐藏起来:

#menu ul { display: none; }

然后应当让菜单在鼠标经过时显示,所以应当为<div>的:hover伪类添加如下定义:

#menu:hover ul { display: block; }
阅读全文 »

2007-08
15

今天来讲一下CSS中的绝对定位和相对定位,即position属性的使用方法。

position属性常见的值有三种:

  • static: 不使用定位(默认值)。
  • absolute: 使用绝对定位。
  • relative: 使用相对定位。

在解释定位方式之前,首先要阐明文档流(document flow)的概念。 浏览器在解释HTML文档时,它会将各个元素按照在HTML文档中出现的次序, 从上到下依次排列。例如下面的代码将产生如下的效果:

document-flow.png
阅读全文 »

2007-08
14

又懒了一下,好几天没更新了。其实上周买的书到了,这几天在忙着看书, 没顾得上研究技术。昨天一口气看完了《CSS禅意花园》, 觉得这本书不愧CSS设计的王者称号,无论从欣赏还是学习的角度,这本书都值得一读。

当然,原书网站CSS Zen Garden也一定要去看看。

今天先来介绍一个从这本书上学到的小技巧:如何用图片替换文字

所谓图片替换文字就是用图片代替HTML中的某个文字元素,如标题。网站设计中很常用, 比如我想用图片而不是文字来显示blog标题,我可以在本应当显示<h1>的地方显示一个<img>, 但这样页面中失去<h1>会影响搜索引擎评分。当然我也可以通过css给<h1>设置一个背景图片, 但<h1>内的文字必须显示,否则也会影响搜索引擎评分。 可以使用下面的方法之一来通过CSS完美解决。

阅读全文 »

2007-08
09

今天说说Apache的优化。为什么要优化?因为服务器资源不够用。 资源有很多方面,但根据木桶理论,只要有一种资源不够用, 整个服务器的性能就会受到影响(所谓瓶颈)。

服务器资源

那么服务器的资源包括哪些?对于网站来说主要是CPUTCP连接数这两者。 CPU表现在任务数上,在Linux下使用平均负载(loadavg)来衡量。 可通过以下命令来查看(参考这篇文章):

cat /proc/loadavg

对于单CPU的服务器,loadavg高于1,表明任务队列出现了等待,CPU忙不过来了。 超过2以上就会明显感到性能降低了。

TCP连接数可通过以下命令查看:

netstat -ant | grep :80 | wc -l 

如果要实时监控服务器资源,可参考OpenNMS项目。

注1:内存不算,低廉的价格使得网站服务器很少有因为内存不够而down掉的。
注2:CPU%是瞬时的CPU使用率,通常无法反映出整体负载。

阅读全文 »

2007-07
28

刚刚为blog加了个面向打印的css,大家可以从浏览器的打印预览中看到效果。 之所以要加这个css,是因为blog显示的内容中有很多是不需要并且不便于打印的, 比如侧边栏、评论输入框等,打印时把这些无用的东西都隐藏掉, 对用户比较友好。

总结一下css的要点。参考的原文在这里

阅读全文 »

2007-07
22

通常在制作网站首页时需要使页面内容在水平和垂直方向上都居中。 表格布局时代常用的方法是内容之前添加换行。实际上通过CSS有更方便的办法。

这个方法出自creamu.com。 先来看看代码和效果吧。

<style>
#warp {
  position: absolute;
  width:500px;
  height:200px;
  left:50%;
  top:50%;
  margin-left:-250px;
  margin-top:-100px;
  border: solid 3px red;
}
</style>
<body>
  <div id=warp>Test</div>
</body>
centered-div.png

原理很简单:将left和top设置为50%来定位div到浏览器中央,再将margin-left和margin-top值设置为宽和高的一半, 使div居中显示。



2007-05
02

原文链接。 这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条 网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。 如今网站易用性已成为一种趋势,但纵观国内的各大网站, 似乎易用性并未成为设计者们广泛理解的概念, 因此希望这篇文章对大家能有作用。

1. 用户必须在几秒钟知道网站是做什么的。注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向,他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2. 让网站易于速读。因特网不是书,因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作,我不得不迅速读完所有内容。 项目符号、标题、副标题、列表,这些都能帮助读者迅速找到他想要的内容。

3. 不要使用难于阅读的花哨字体。当然,某些字体可以让网站精彩纷呈。 不过它们容易阅读吗?如果你的主要目的是传递信息并让读者阅读, 你应该让阅读过程舒服些。

4. 不要用小字体。如上一条所述,你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能,但如果必须放大才能看清一个网站的话, 我就再也不会去访问它了。

5. 不要打开新浏览器窗口。我的第一个网站曾经经常这么做。 原因很简单,在新窗口中打开外部链接,用户就不必离开我的网站。 错!让用户决定如何打开链接,否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站,在必要的时候他们会回来的。

6. 不要改变用户的浏览器窗口大小。用户有权控制自己的浏览器。 如果你改变窗口大小,你会在他们面前失去信用。

7. 不必要时不要让用户注册。直白地讲,我上网是为了获取信息,不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息,除非特别必要(比如你 能提供的消息非常有价值)。

8. 不要在未经访问者同意的情况下为他们订阅电子杂志。 不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。

9. 不要过多使用Flash。Flash不仅会增加网站的读取时间, 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。

10. 不要播放音乐。早些年Web开发者都喜欢在网站中集成音乐,结果他们失败了。 记住,永远不要使用音乐。

阅读全文 »