无可赖何_{阿肆的个人博客}

知道为什么网页没有想象中很炫的效果吗？因为今天是一年一度的“CSS裸奔节”。

脱掉衣服，亮出身材，大家一起裸奔吧

想参与或了解更多，请点击http://www.webrebuild.org/naked

这段时间在学校没有很多事，就将一直“看不惯”的中国移动的首页给重构了下玩玩。重构之后的网页：http://www.ivershuo.com/did/for_cmcc

下面是重构的效果：

可以看出重构之后的页面大小(131.1K+127.3K=258.4K)不到原网页大小(525.5)一半，HTTP请求大幅度的减少。单从经济方面来说，也算不小的一笔开销节约了。

首先说说原网页有哪些地方不够合理吧：

1. HTML标签混乱，结构不够合理；
2. 过多的图片装饰；
3. 浏览器兼容做得不好；
4. 可访问性有待加强；
5. 多余的样式和脚本（因为首页和内页的布局几乎完全不同）；
6. 那么大的一个FLASH放在内容前段！

所以在重构的时候主要从这几方面下手。使用XHTML+CSS重写结构和样式，完全通过W3C验证，HTML代码从原来的834行精简成342行；尽量兼容流行的浏览器（经测试，在WIN平台下的Firefox3、IE6、IE7、Opera9.6、Chrome2、Safari4 beta表现基本和原网页一致）；重做装饰图片，减少HTTP请求；增强可访问性，使用可禁用、兼容且无侵入式的脚本。最后我觉得首页的那个大FLASH——并且正在我准备重构的时候，他又换了个更大的FLASH——对于页面的载入影响比较大，何况还是使用的用户并不多的移动线路，曾经我使用教育网的时候就很难完整的刷开移动的首页，所以对于这个FLASH个人颇有微词。

上图显示了页面主要重构的部分，下面列表的每项对应上图相应数字热点区域：

1. 这里主要简单的做了个SEO的优化，思想借鉴了Google搜索结果页面的LOGO编写方式。关于细节可以查看原代码，至于可行性有待讨论（在CSS森林群里面讨论时，来自腾讯重构组的鬼和飘不赞同隐藏IE下无效图片的红叉）；
2. 个人认为这里是整个页面最杂乱的地方，没有办法，我得保留原来的呈现。优化了这里几个元素的底图，对英文版链接动态样式底图合并，并保证图片失效下的可用性（具体方法查看源代码）。搜索按钮使用border样式替换原背景样式。省公司的下拉链接添保证了禁用js下的可用性；
3. 这里优化底图。不过使用了一个多余的标签，并不是完美的重构，希望能找到更好的方法；
4. 这块的结构动了大手术，解决原网页在结构上的不科学、浏览器的不兼容及js禁用下tab无法切换的等诸多问题；
5. 这里解决在Firefox等浏览器下不显示背景问题，及下拉链接添保证了禁用js下的可用性。

在文档结构上，吝啬的使用了Zeldman推荐的“i”、“j”、“c”文件夹分别保存图片、脚本和样式表，并且将网页需要动态替换的广告图片另外存放以便后台程序处理（真正使用中不推荐使用名称为“ad”的文件夹，以免被广告拦截软件拦截）。

这是一个基础的网站重构的例子，对于想了解网站重构的朋友或许有点帮助。当然在正式的重构中还有很多需要做的，也希望各位朋友指导我需要改善和提高的地方。

最后要说的，大家不要批评中国移动的网页开发人员，他们比我们大多数人优秀，技术比我们也强，只是在真正的实施中会有其他不可控的客观原因，如历史原因、产品经理或者老板的压力等。所以我更希望在中国各位网站负责人能真正重视网站重构，因为他确实能使你节省钱，获得更多的客户……

下面这个写给豆瓣看的，各位可以无视：doubanclaim4ab4a8b8908a8c2b

先看几个图吧：

提问：这些“竖线”分隔符是什么——在HTML里怎么表现？

1. 仅仅在HTML里面插入一个竖线：|；
2. 将竖线放在一个<span>标签里面；
3. 作为背景图片插入（作为该导航连接的标签背景或者添加一个如<span>标签设置其背景）；
4. 作为列表（如果导航连接是放在一个列表标签里）的list-style样式属性；
5. 作为border样式表现；
6. others......

绝大部分网站将这个竖线表现为1或者2的形式，有些网站将这个用在了背景图（如淘宝），yahoo是用border样式表现的。到底用那种表现方式更好呢？

首先我们得弄清楚一件事：（从语义上来说）这个竖线到底是什么？

我个人的理解这是一个分割符（废话！），应该用border样式比较科学。打个比方：就像两个相邻的房间，中间分割的是墙。那么作为盒模型，border应该是最类似这个“墙”的。

只是，如果这个分割符不是一个“竖线”呢？像淘宝栏目导航和腾讯首页顶部的导航。我觉得这个分割（视觉表现形式）从HTML语义上来说没有明显的意义，在现阶段作为list-style表现可能比较好（不要说你的导航不是包含在列表里的）。

之所以说“现阶段”，是因为幸运的是CSS3已经支持将图片作为border（感谢腾讯文王同学提供参考文章地址），当然不幸的是还只有Safari和Firefox 3.1 (Alpha)支持这个属性，等到其他浏览器的支持估计不知道得等到什么时候。

上述观点欢迎大家发表不同意见。

虽然自己对网络上叫嚣的web2.0及div+css的设计的很多浅薄的话语很有微词，但是自己也无心（或许因为自己知识也比较浅薄吧）去解释什么任由他们继续"炒作"。在腾讯的twinsen大哥博客上看到这篇不错的文章，说得比较深刻也比较易懂，是很中的的一篇文章，所以转过来给大家学习下。

之前的一篇关于CSS的文章不太被很多人了解，结果好一段时间都在沉思关于CSS一块的文章应该怎么写，至今尚未得出一个让自己满意的答案。新的一 年了，回首之前的日子；公司里面一大堆东西在忙差不多有一个月没有写过有关技术的文章，也很久没有关注过群里的事情（屏蔽了好几个）。这两天回到群里面 看，发觉质量下降了；闲聊的人越来越多，谈论乱78糟事情的人也越来越多了。……看来是时候该写一点东西出来，鼓舞一下网站重构人员的士气和给大家树立一 个明确的目标。

回到主题，关于WEB2.0的。对于这个名词应该对大家都不陌生。这几年的中国互联网闹得沸沸扬扬的，有人推 崇，有人认为炒作。然而这些人都知道WEB2.0么？没错，我的矛头不单是指向各个互联网企业的C[X]O，还有那些若干想靠一篇评论出位的 bloger。或者大家也会觉得我是这样的一个人，那我们一起先来看看我们现在所知道的WEB2.0的几点：

• WEB2.0是一个并非以技术为主导的概念；
• WEB2.0是以一系列网站做为代表的统称；
• WEB2.0是以用户作为内容来源的；
• WEB2.0是出自于2004年3月，在欧雷利媒体公司（O’Reilly Media Inc.）在线出版及研究的副总裁戴尔·多尔蒂（Dale Dougherty）之手。

这 里要说说的就是从这里的提出人和公司。Dale Dougherty是最早提出API的人之一。对于这样的一个技术型的人说出了一个并非以技术作为主导的概念，单是这一点就可以认定这个是一个不可让人相 信的骗局。记得EMU说过的这样的一句话：“一个有技术影响力的技术型的人，一旦从事的工作失去了技术影响力就是说已经没有了影响力。当没有了影响力他从 事的任何工作都会失去信心，进而失效。”

另外的一方面来说，一系列的网站作为代表的统称。那是否按照那些网站的模式和架构就是叫做WEB2.0时代的网站呢？所以出现了这么多“找死的WEB2.0”。因为从一个终点描述去多向发展是根本不可能到达所谓的终点的。

第三点，很多所谓的内容为王，进而的还有以用户作为内容来源。那么我们的用户在哪里来？是不是就是说国内的除了Tencent、Taobao等这些有着大型用户群体的公司以外别的公司都没法进入WEB2.0？

大家可以看到就依耐Tim O'Reilly整理后的演讲一文《What is WEB2.0》（官方指定译文）当中，被国人传达后所注重的几点是那么的漏洞百出。也就正如页面界没有人不知道的一本书《网站重构》到了中国就变成了DIV+CSS。但是大家不知道有没有认真地读过这本书，里面有着Jeffrey Zeldman所 说这样的一句话——“即大量的使用div标签作为结构元素，没有固定的标准和道理说不行，但事实上这是一种更高级的table滥用。”原文为“Well, if know anything about templates, you will know that you can use tables or <div> tags. Well, it's the same for nested templates. In other words, if you wanted to yank out the tables and replace them with <div> tags, you still can use nested templates and it will still work. There is no rule or technical reason that says you can't use <div> tags in templates or nested templates or library items.”（网络的出处）。所以真正阻碍我们的发展的并不是我们“拿来”的别人的书，而是那些鲁迅笔下的被无形的手掐着的鸭子。

然而本文并不是单纯的像很多人一样只是说出他的问题而不去解决它，也就是我想让大家知道的WEB2.0的单手原则。按照Tim O'Reilly的演讲中后半段以及Dale Dougherty的意向我们可以将中间的所提到的技术合并同类项按照历史中出现的顺序归结为以下的5点（如RSS和XML合并到XHML一类等）：

1. API
2. XHTML
3. CSS
4. AJAX
5. SEO

我们再将以上5个技术点按照我们手指的先后分别命名：

我们大家再将自己的一只手竖起来，正如你在物理课上面学“右手定律”和“左手定则”一样跟着我做一个试验：（当然前提是基于一个身体正常的人类）将任意一只手指单独的弯曲到贴近手心，看看其余的四只手指是否还能与手背成一直线并且舒适。大家是否发现了一些奇异的事情：单只手指弯曲的时候，只有拇指[API]才能完成指定动作。

我们看看这说明了什么：

当单项技术结合到落实的时候，只有单做API能完成任务。然而单做API在我们看来在互联网当中应当只有我们的用户，因为这些用户只会不断地开源自己的“接口”（这里先不讲技术上的API），不断地输出我们想要的资料和信息，同时我们的WEB2.0也是能单靠这一点可以先存活下来的，也就是我们常见的VC砸钱。在这样的WEB2.0时代，冒头的产品就已经很困难了；生存下去就更加的困难，而且在一种无期的持久战中折腾于一个存活阶段却不懂得使用这些技术手法去维持自己的生计，不会开源节流就是等同于自己找死。

举例一一的说明，比如尾指[SEO]也就是大家常见的垃圾站，没有什么技术技巧单纯的作静态页面，被移动封杀以后多少垃圾站站长要被迫转型为服务器提供商。接着是无名指[AJAX]，这里就想以饭否为 例说一说，之前在群里和人打赌过一顿饭他们不能支撑过两年，除非转型。不看好他的原因是因为过多的使用服务器操作，无法将页面静态化，数据静态化；这里会 有过多的流量消耗以及服务器吐页面的性能消耗。再谈到中指[CSS]，过往的WEB1.0的对应形式是什么，针对一项业务开拓新的终端平台就需要重新的招 收一批开发团队；而在WEB2.0的时代，我们只是需要用一个开发团队和一个出色的页面重构人员，通过页面当中CSS连接的media属性连接到 “screen”、“handheld”、“TV”等去展现不同的表现，从而实现开源节流。

由此可见，在WEB2.0当 中，要真正的立于不败之地就必须五个手指一同弯曲，就是五样技术一起抓。然后很多人会奇怪，SEO和AJAX两者技术而言其本身就是有所冲突的；那么他们 两者怎么能一起的并存于WEB2.0的技术领域呢？我们看一看我们的手，无名指[AJAX]和尾指[SEO]相近，相连。而在我们的产品形式当中这样的状 态就只有出现在我们的“Portal端”和“client端”。我们就应当针对用户访问最多（对于全站而言）的client端做AJAX，静态化模板、动 态拉去数据，同时也能借助AJAX的不被搜索引擎收录性保护起用户未公开发布的、加密的以及点对点的信息以及内容；而另外的一方面我们应当在portal 端进行页面文件的静态化，使得用户想要发布的信息更加容易的去被搜索引擎所收录增加网站以及用户的知名度和将信息凝聚。（这里说的是信息的本身而不是像当 前很多所谓WEB2.0网站做的用户本身，当然这里存有若干的技术细节技巧。）而另外的一方面使用完善的XHMTL（当中包括语义化的页面文件和RSS） 表现页面结构，和使用多向的CSS作为多平台终端的低成本扩展。最后使用多支持性的插件和标准化的API（这里指的就是技术上的API）去蚕食那些不属于你的互联网领地，就比如饭否的插件（11个blog服务商）、以及叽歪的输入途径（9种）和API这一块个人觉得就做得非常的成功；相比起来当前的其它老大哥反倒表现出一种“吃老本”的味道，比如“搬家工具”失势的blogcn，输入途径失势的滔滔……等等。

这 个定则放在我这里已经快一年了。一直本着看3做2说1的方式，然而这个3看了做了也快一年了；到现在才把他说出来皆因暂时心里面还没有看到一个更高的3。 不过我相信“舍得”——有舍必有得，正如当初想通这些前也是经历着这样的没有3的阶段。但现在的状况是确实需要把他写出来的。大家也可以看到这里当中提到的五样技术都是我们网站重构人员的职责范围（是指网站重构而非页面重构和页面制作），所以我们应当有责任也有义务去把中国的WEB2.0做好。虽然我们只是技术层面，而真正的WEB2.0当然还有有其他层面的把握。不过本定则当中的一些实现细节技巧因为商业保密原则不能公开，希望大家原谅。

原文地址：http://www.twinsenliang.net/skill/20080101.html