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

突然觉得HTML越来越乱了，现在满世界都在喊着HTML5，前端同学好像都把他当作了一个救世主。

HTML是一门标记语言（Markup Language），标记语言在于他的设计不需要逻辑功能，他最主要的作用就是用确定的标签（在html中是HTML elements）来容纳有不同的内容。其实世间万物本来就有他自己的意义的，在网页上显示出来的一切文本、图像、视频也是。一块巧克力不把它放到巧克力盒子里我们一样知道它是巧克力，只是为了方便生产、运输、卖出的识别我们大多会将巧克力用包装装起来。一个图像我们不用img标签包含，浏览器也是有可能知道它是一个图像的，从一定程度上来说，超文本标记语言的发展是浏览器工业化发展的一个象征。将同类的的东西放到同一个特定的“容器”中，在oop中来说，就是类的思想了。

于是，真正引发的问题就是这个容器究竟该设计得多“大”？这就是设计中经典的抽象程度的问题了。阴阳五行足够概括世间万物、但不能完全描述世间万物。在HTML中，使用标签（Element）和属性（Attribute）二维结合来描述超文本资源。无奈所有的东西都是不断发展的，互联网也不例外。其实HTML5中多出来video等标签就像HTML2多出来img标签一样正常，虽然我们确实值得欢呼，也不用太为此担心兼容——想想gif、png、jpeg——我是达尔文物竞天择思想的支持者。但是我觉得HTML的设计从一开始就没有很好的考虑抽象程度这个问题，可能是为了迁就使用上的方便，最明显的就是这门语言虽然有结构树（DOM）的层级、但是没有意义上的继承，不管是从标签上还是属性上。HTML生来就是有语义的，XHTML想解决数据和结构分离，结果被传道士努力得让大家都只在乎结构和表现的分离了。XHTML2曾一度想放弃向前兼容，还推荐将图像从img标签过渡到object标签，以达到更高的抽象程度，用以更“方便”地描述互联网上将来越多的不同格式的其他资源。HTML5又干脆弄出来一大堆的极度语义化的标签。那么Microformat的出现又是因为什么原因呢？

要看清楚这些，其实我们应该明白其实W3C是一个商业组织。WHATWG更是一个商业化——最明白就是浏览器竞争——的产物。很多东西其实就是商业杂交出来的（比如最明显的代表就是鼓吹“高尚情操”的video标签），HTML的一出生就流淌着商业的血。问题还在于离开商业一切都活不了。

不要再讨论HTML5好不好、HTML5什么时候出来、我们什么时候用它。

有些东西你在思考的时候永远很难想到，比如中国特色的双核浏览器，虽然或许这只是在揠苗助长。

这是个最好的时代，这是个最差的时代。或许一直以来就是。

这段时间在学校没有很多事，就将一直“看不惯”的中国移动的首页给重构了下玩玩。重构之后的网页：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

早两天老师发个通知下来，是中国广东核电集团补招的消息，然后要去广核网站上填写简历，有几个同学去了，说网站要答题，是智力测试的那种，-_-!。然后我刚才去看了下，基于“职业”敏感，打开页面先直接Ctrl+U，然后发现：乖乖~嘻嘻

首先，基于为Firefox讨个公道的原因，批评一下网站验证码部分的设计。页面网址（http://www.cgnpc.com.cn:8002/hrrs/Campus/CampusMain.html）

function showAuthCode(e,whichone){
        if (whichone.style.visibility == "hidden"){
            whichone.zIndex++;
            whichone.style.left=document.body.scrollLeft+event.clientX-event.offsetX-3;
            whichone.style.top=document.body.scrollTop+event.clientY-event.offsetY+21;
            whichone.style.visibility="visible";
        }else{
            whichone.style.visibility="hidden";
        }
}

上面是验证码输入框onfocus()的js代码，你说你个验证码到底是给eval robots看的还是给human看的？！

Firefox用户同僚可以直接输入http://www.cgnpc.com.cn:8002/hrrs/imageCode这个网址将得到的验证码填上就可以了。

然后登录，通过对我的鄙视（第一个页面那里我都需要选择“否”）之后就进入了能力测试部分，题目就是汪涵主持的那个什么什么英雄的那个答题节目差不多的题。我就不多说了，直接教大家答题：查看源代码，通过几个frame，再查看源代码（这页的http://hr-exam.cgnpc.com.cn/User/AbilityDo.aspx），你会发现下面的源码（我精简了只留下核心部分）：
第3题:0, 2, 6, 12, 20, ( )

<input type="radio" value="0" />A．28
<input type="radio" value="1" />B．30
<input type="radio" value="0" />C．40
<input type="radio" value="0" />D．48

我想稍微有点智商的朋友都知道选哪个了吧！然后再提醒一下用Firefox的朋友，这里提交的时候在IE下会有验证，如果题没有答完会弹出警告框来提示并阻止提交的，然是Firefox下不会提示而直接给你提交，并且不管答题是多久时间都是0。

我以前没有看到过一个程序这样的依赖前端脚本（并且是非标准脚本）来判断和处理敏感数据，并且还是用在大型的公司上（据该程序的官方网站上注明，广东移动也是用的这套系统）

点击下面的连接打开我整理的答案

阅读剩余部分...

虽然自己对网络上叫嚣的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