idea's blog

经过一段时间的在国外(欧美)Web收录网站上的浏览，我收集了16个(增加中...)我自认为设计得最好的Web站点，其中有1个是中文网站。我收集的标准是：感觉良好，简洁，美观，不拖沓，有个性。

我倒不想收集那么多非中文的网站，因为我的网站就是一个中文网站。不过，我只能说，我无法找到几个让我满意的中文网站。

首先，简洁这个条件就排除了大部分我所看到的中文网站，当我看到那些花里花哨的网站时，我就产生一种关闭浏览器的冲动。他们做的是什么东西？就算是自已欣赏用的，你也不能欣赏那种东西吧？我曾经见过身边有一个人做了大约10个静态页面，竟然文件压缩后体积有4MB。这样的东西放自己的电脑看看还有可能，能放到网上吗？内容那就不说了，完全的胡乱拼图。不过这种网页作品得到了大部分在场的人(100多人)的认同并表示赞赏。

我选择的这些网站也许你不认为是最好的，不过，我认为你不会觉得无法接受。

这些网站的链接和截图在：http://www.ideawu.net/person/bestweb.html

在2000年以前，我使用的搜索引擎只有Yahho.com。然后开始使用baidu.com和google.com，就不再使用雅虎(Yahoo!)有将近6年了。偶而浏览几次，也只是不小心就进入而已。

今天从一个web收录站点进入yahoo.com，发现Yahoo!的界面焕然一新了。我奇怪它从什么时候开始的？新Yahoo!界面简洁，已经大量使用Ajax技术，给用户带来更佳的体验。

看来，Yahoo!是想成为一个时尚网站？

它的标签内容可以被记忆，你第一次点击某个标签(如Entertainment)时，它会向服务器请求信息，显示有些延迟。而你再次点击时，它就不再向服务器请求了---除非你刷新浏览器---所以切换是立即的，因为刚才的内容已经被记忆。

不过，只是yahoo.com，并不是雅虎中国。

使用jsp/php/asp等动态程序生成的页面如何对搜索引擎友好呢？你可能想使用url_rewrite。不过，最好还是让同一个网址在任意时间对应的页面内容都是一样的或者相似的。因为搜索引擎不喜欢页面内容总是在变化的网址。

一般博客文章需要将新发表的文章显示在前面，所以会使用"order by id desc"类似的SQL语句来查询一页包含的多篇文章。例如下面在JAVA+MYSQL中：

public Article[] getArticleArray(int from, int size){
    Article[] article = new Article[0];
    String query = "SELECT * FROM blog ORDER BY DESC id LIMIT " + from + "," + size;
    try{
        ResultSet rs = st.executeQuery(query);
        rs.last();
        size = rs.getRow();
        article = new Article[size];
        rs.beforeFirst();
        for(int i=0; rs.next(); i++){
            article[i] = new Article(
                rs.getInt("id"), rs.getString("time"),
                rs.getString("name"), rs.getString("blog")
            );
        }
        rs.close();
    }catch(Exception e){
        System.out.println(e);
    }
    return article;
}

这是我们的SEO分页类MySEOPager中的一个方法。如果我们想显示第一页，我们使用getArticleArray(0,10)来查询最新发表的10篇文章。

这有什么问题呢？问题是当你添加一篇文章之后，原来的所有分页都改变了。为了让getArticleArray(0,10)每一次查询显示相同的文章，应该让getArticleArray(0,10)显示新先发表的10篇文章。我们可以这样改造我们的分页类。删除与将影响页面的内容，你删除越新的文章，生成的页面改变越大。

public Article[] getArticleArray(int from, int size){
    Article[] article = new Article[0];
    String query = "SELECT * FROM blog ORDER BY id LIMIT " + from + "," + size;
    try{
        ResultSet rs = st.executeQuery(query);
        rs.last();
        size = rs.getRow();
        article = new Article[size];
        rs.beforeFirst();
        for(int i=0; rs.next(); i++){
            article[i] = new Article(
                rs.getInt("id"), rs.getString("time"),
                rs.getString("name"), rs.getString("blog")
            );
        }
        rs.close();
    }catch(Exception e){
        System.out.println(e);
    }
    return article;
}

我们还需要得到数据库里到底有多少文章，所以再增加一个方法。

public int getArticleCount(){
    int rowcount = 0;
    String query = "SELECT COUNT(*) AS rowcount FROM ideabook";
    try{
        ResultSet rs = st.executeQuery(query);
        if(rs.next()){
            rowcount = rs.getInt("rowcount");
        }
    }catch(Exception e){
        System.out.println(e);
    }
    return rowcount;
}

现在我们在JSP页面中显示最新发表的10篇文章。

int start = -1;
MySEOPager pager = new MySEOPager();
int artcount = pager.getArticleCount();
try{
    Integer.parseInt(request.getParameter("start"));
}catch(Exception e){
    start = artcount-10;
}
if(start > artcount - 10) start = artcount - 10;
if(start < 0) start = 0;

Article art = pager.getArticleArray(start, 10);
// do something with art here.
int previous = start + 10; // 传到上一页的start值
int next = start - 10; // 传到下一页的start值

这样，生成的页面的内容的是否改变与你是否删除了先发表的文章有关系。只要你不删除文章，showblog.jsp?start=0带有这个参数的网址对应的页面都不改变。只要你删除的是第n篇文章，那么start<(n-pagesize)对应的页面都不改变。你添加文章只影响第一页。

在我编写的ideabook留言本使用了这种方法。

这种方法被证明是愚蠢的，唯一的好处是同一个网址对应的内容几乎不变。

Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器，拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准，所以使用Firefox来调试网页是非常好的。

Firefox默认安装包只有8M(Linux版)和5M(Win版)，安装后功能较少。为了能制作网页，我们需要安装Web Developer插件。下面我就介绍一下我使用使用Firefox + Web Developer插件制作网页的简单过程。

1. 设计好你的页面的粗略内容，结构化它们

你可能是在心里设计，也可能是在纸上设计，也可能在电脑里用PhotoShop设计。我强调，先有内容，再有表现。但不是先有所有的内容然后再来设计表现，我认为内容应该占主导地位。将内容分类，也就是结构化。

2. 把内容的文本输入HTML文件中，设计和收集将要使用的图像

使用带有语法着色功能的文本编辑器输入文本，利用段落来结构化你的文本。

3. 用HTML/XHTML标签括住内容的文本

因为你已经将文本结构化好了，那么轻易就可以用标签将它们括住----主要使用div标签，列表内容使用列表标签，文本段落使用p标签。为重要的标签(到底哪一些标签是重要的，你在结构化的时候已经想好)分配id属性和class属性。创建一个空白的CSS文件，并在网页中引用它。

4. 用Firefox浏览器打开HTML文件浏览器

现在，你已经写好了一个纯HTML的网页。即使这样，它在浏览器下也应该具有良好的显示。否则说明你的结构化过程不够成功，查看代码，找出是否有需要改进的地方。

5. 应用Web Developer插件来设计完整的CSS样式表，使用网页的显示更加完好

用鼠标右键单击网页，选择菜单Web Developer-->CSS-->Edit Css，打开可编辑CSS的侧栏。在里面输入CSS代码，你的代码将立即作用于网页。所以，这也是另一种意义上的可视化网页制作方式。在调试定位的时候，你可以为对象加上不同颜色的边框，这样可以使对象间的位置关系更加显然。

为了防止代码丢失，经常把你的CSS代码保存在你所创建的CSS文件中。

6. 收尾

当你对页面的显示已经相对满意的时候，在IE，Opera和其它你所能弄到的浏览器里查看你的网页的显示效果。如果有差异，以Firefox为准，并利用hack消除在IE中的差异。

7. 结语

这里只不过给出了步骤性的教程，一个网页是否显示良好，更主要的是你的艺术感觉和你的经验。

• Firefox浏览器插件的中文网址是 http://addons.mozine.org/
• Web Developer插件的下载地址是 http://addons.mozine.org/addon.php?id=32

我写的ideabook留言本是一款简单的JSP+MYSQL数据库留言本。我希望它成为初学者学习JSP+MYSQL的最好代码。它也可以作为实际应用的留言本使用。

• 结构清晰，功能分配经过精心设计。所以代码非常简单。
• 基于XHTML+DIV的页面代码设计。生成的页面通过XHTML 1.0验证。
• 在保持数据库内容不变的情况下，分页显示的内容不变，有利于搜索引擎的收录。
• 反垃圾留言功能。
• 体积小巧。

程序已经在 ideabook首页 http://www.ideawu.net/person/ideabook/ 进行测试。 提供源代码下载。

我翻译了一篇关于Firefox的内存使用分析的文章。据作者的分析，Firefox并没有内存泄漏的问题。作者详细地分析了浏览带有大量图片的网页时Firefox的内存占用情况。

从这篇文章我们可以知道，Firefox在浏览带有大量图片的网页时占用大量内存的原因是它把所有的图像解压缩后保存在内存中。作者使用了一个程序，让Firefox只保存压缩后的图像，从而大大减少了内存的使用。

翻译的文章在http://www.ideawu.net/linux/firefox_mem.html

原文在http://primates.ximian.com/~federico/news-2005-11.html