天生我才必有用

由于Trac 0.11的正式版本已经发布，所以就对自己的Trac 0.11 Beta2进行了升级，可能是第一次升级，所以这个升级过程还不是特别顺利。

在升级前参照Trac的官方说明，下载了Trac-0.11.win32.exe，不知是何原因，安装完成后，运行c:\Python25\Scripts\trac-admin.exe “d:\trac\project” upgrade 命令，就是报错”pkg_resources.DistributionNotFound: Trac==0.11″，看错误信息的意思是说此0.11的版本没有找到。

在Internet上查了一下，有人说再升级前必须关闭apache服务器，否则由于程序还在运行，新程序包就应该不会覆盖旧版本。但尝试了一下发现还是不行，察看c:\python2.5\lib\site-packages\下发现有一个资料夹Trac-0.11-py2.3.egg，我的python明明是2.5版本，怎么生成的信息就说是2.3，猜想可能是安装程序包的问题吧。

既然直接安装不行，那何不试试setup_tools的手动安装。运行c:\python2.5\scripts\easy_install –help，只有输入–upgrade参数，就可以升级了。所以就在命令行输入”c:\python2.5\scripts\easy_install –upgrade trac“，果真升级就自动开始了。安装完后check了一下c:\python2.5\lib\site-packages\，现在版本信息正确了。接着运行c:\Python25\Scripts\trac-admin.exe “d:\trac\project” upgrade也成功了。

运行apache后， 察看屏幕坐下角，果真从Powered by Trac 0.11b2更新成了Powered by Trac 0.11。看来版本更新是成功了。相信以后升级就有经验了，应该遇到的障碍就少了。

现在连W3C都开始参与到丰富多彩的Web 应用的开发中来了，对我们这样Web程序员来说到底是祸是福。搞不清楚为何官方的站点链接http://www.w3.org/2008/webapps/是放在2008的资料夹下的，不会就过来折腾个半年多，到2009年就不搞了吧。不过从介绍的说明中来看，RIA看来会是一种发展的趋势。AJAX和Flex、Sliverlight的竞争一定会更加的激励。

官方还有一个Wiki站点http://www.w3.org/2008/webapps/wiki/Main_Page 。个人感觉暂时也无什么有价值的东西。感觉就是把WebApp的一些标准做了一个索引分类。让我们期待吧。希望时间可以证明它存在的必要。

最后也呼吁一下MS，多看看文档标准说明，不要需求都没搞清楚的瞎开发，Web开发就因为有了IE才觉得特别的累。

对于大多数网站的使用者来说，可能他们并不了解自己所使用的各类浏览器只能显示jpeg、gif和png文件。就算在Windows平台中最常用的bitmap(bmp)格式，以及扫描仪所使用的Tiff格式图片，都是不能被浏览器支持，浏览器并不能直接把以上的格式图片显示在网页中。

当然你也可以要求用户使用各类工具进行图片的转换后，然后再上传。不过相信在这些用户中必然会存在不少不妥协者，当然也必然包含一些菜鸟型用户。相信这种方法应该不是非常好的解决方案。我们当然应该为网友做更多，让他们可以简单的使用我们的网站。

现在就介绍一种非常方便、强大的工具，它不仅可以支持各类图片格式的转换，也能对图片进行相关的缩放。前提可能就是你网站的Web Host是Linux，同时它支持ImageMagick。（应该专业些的Web Host都会安装这个工具）。如果你的Web Host支持SSH，你只需使用SSH登入到系统中，在命令行运行一下convert命令即可。如果系统未给出任何出错信息，而给出了convert命令的相关帮助，那就说明你的系统支持ImageMagick。

以下介绍一下常用的命令：

• 转换图片格式：

  convert image.tiff image.png

• 对图片进行缩放：

convert -resize 400×300 src.png dst.png

convert -resize 200×200^ src.png dst.png

更多命令行信息请参考：http://www.imagemagick.org/script/command-line-processing.php

在PHP中只需要简单的使用system()这个函数来调用以上的外部命令即可。同时也可结合GD库来实现图片的Watermark功能。

对于网站的完整性来说，主要会发生的问题就是网站页面中出现的Dead Link。如何检验这种错误呢？当然你可以使用最笨的方法点击每一个链接，不过相信没人愿意去干这种枯燥乏味的体力活。其实最简单的方法是使用W3C Link checker，但这种Check却存在唯一的缺陷，无法解决内部网站的验证，除非你能把这些内部网站暴露在Internet上，让W3C Link Checker可以访问到它们。

要解决访问这个问题其实也不是非常困难，在参照W3C页面的Install it locally 说明来做就可以了。

如果你想我一样，有Debian/Ubuntu的环境，那么安装更方便。

1. sudo apt-get install w3c-linkchecke。
2. 修改/etc/w3c/checklink.conf文件，可以把Allow_Private_IPs = 1，这样可以验证non-public IP address，修改Doc_URL和Style_URL到正确的地址。
3. 访问http://<servername>/w3c-linkchecker/checklink.html，可以了解是否安装成 功，最好把此html进行修改，把其中的localhost替换成实际的机器名称<servername>。（此页面是说明页面）
4. 访问http://<servername>/cgi-bin/checklink，此地址才是正确校验工具的地址。（如步骤2 Style_URL设置有误，此时可能CSS会出现一些问题，但对任何功能没有影响）

现在就可以尝试验证一下你的网站，看看是否有问题了。

验证工作不仅可以使用Web方式，其实你也可以在命令行中输入checklink完成相同的工作。

不过这两种校验速度还是慢了点，现在还不清楚是否有没有其他的什么参数可以设置，来加快验证的工作。

YSlow是由Yahoo公司开发一个Firefox的插件，它和著名的FireBug插件集成在一起，对网页的性能(Performance)进行评估。可在Yahoo官方网站进行安装：https://addons.mozilla.org/en-US/firefox/addon/5369

包含了一下的功能：

• Performance report card
• HTTP/HTML summary
• List of components in the page
• Tools including JSLint

效果图：

上次介绍使用了Google API来实现条状图（详见Google Chart API 自动生成图表），它使用的技术是动态生成Image图片的方式。

是否可以使用HTML和CSS? 这个当然没问题，具体实现说明请参考A List Apart: Accessible Data Visualization with Web Standards 网站的文章。

如何实现在有限的空间内显示更多的内容呢？其实很多页面的实现上都考虑了这样的一个问题。

如Thickbox的官方页面中就大量使用了这种技术，对页面的局部内容实现滚动，从而使页面上可以显示更多的内容。

那如何实现这样的滚动呢？其实很实现简单。步骤如下：

1. 使用div标签来定义此区域的范围。
2. 在CSS中对此区域定义宽和高。
3. 在CSS中使用overflow属性来定义div的滚动。

现在我们来看一下如何定义overflow的属性，overflow的属性值可以为以下四种：

• overflow: auto – 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，包括水平、垂直或者两者都显示。不过只有当显示的数据内容超过定义的宽高时，滚动条才会显示。
• overflow: scroll – 这个属性会为所定义的区域添加一个滚动条(Scroll bar)，但不管内容的多少，即使显示的内容很少，屏幕上也会显示一个Disable状态的滚动条。
• overflow: visible – 不剪切内容也不添加滚动条.
• overflow: hidden – 会对内容进行剪切，超过显示宽高的内容不会被显示。

可能常用的即时overflow:auto和overflow: scroll。当然此效果也可以使用iframe来实现，不过屏幕内容的刷新会是一个比较烦人的问题。

HTML:

<div class="scroll">
<p>This is a scrolling are created with the CSS property overflow.</p>
<p><span style="color: red;">This is red color</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>

CSS:

div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}

一个非常不错的Web Chart程序接口，无需懂任何语言，只需把数据传送给Google即可。

通过简单的http://chart.apis.google.com/chart?cht=p3&chd=t:30,30,40&chs=250×100&chl=Girl|Boy|Baby
可以生产以下的效果图。

详细说明：http://code.google.com/apis/chart/

查寻功能是每个网站都有的基本功能，最简单的实现方法当然就是使用SQL的like操作符来匹配用户输入的关键字。

以一个简单的CMS系统举例，检索栏位可能包括有Title(主题)和Content(内容)，具体的SQL语句撰写如下：

SELECT * FROM cms WHERE title LIKE '%{$name}%' OR content LIKE '%{$name}%')";

SQL语句中%xxx%可以检索出任何包含xxx的字符串的主题或内容作为符合条件的资料。如xxx为test，那么test、contest、testable等等都是符合的结果。

现在我们就已经完成了一半的功能，接着如何实现高亮显示呢？其实其中最复杂的是如何做到英文的整词选择，最简单方法当然是使用正则表达式来进行替换。PHP代码撰写如下：

$content = preg_replace("/\b(\w*$highlight\w*)\b/",
"<spanstyle=\"background-color:#369;\">$1</span>" ,
$content);

其中正则表达式：\b(\w*test\w*)\b，\b就是来定位整词的，\w代表任意的ascii字符。如需考虑一些符号的情况，如“-”，只需要把\w修改成[\w-]即可。通过以上的正则表达式，我们就可以高亮显示以下的字符串中的关键字了，其中搜索的关键字为test。

test home run contest a test

Safari 3.1终于发布了，在为网友提供一个新的选择的同时，也为网页开发人员增加了工作量，毕竟Apple的MacOS使用者数量不少。希望Windows版本和MacOS的版本差异为零，这样对网页开发者来说反而是个利好消息，至少不用安装苹果系统即可进行页面的测试。到底是好消息还是坏消息，让我们拭目以待。同时也希望Safari 3能够尽快的推广，不要像IE7一样，用户数量一直得不到提高。

有兴趣者可以到苹果的官方站点下载。