分享
 
 
 

我国网站遵循Web标准情况的不完全调查

王朝other·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

我国网站遵循Web标准情况的不完全调查

by melop at melopia 2005年2月17日

目录

背景介绍

方法

调查结果

结论

参考文献

本文假设您具备一定的HTML、CSS以及XML知识。如果您对相关的内容还不了解,请参阅 http://www.w3school.org

本文适于那些有较长时间网页设计的人员阅读,也适用于网页的入门者。

背景介绍

本节扼要的介绍了Web标准的相关背景知识,包括其定义、历史、重要性以及最近的发展。

什么是Web标准

不需要为自己没有听说过这个词语而感到不好意思,事实上,即使是很多中国的专业网页作者也根本不在意,甚至不知道Web标准。我有5年的网页制作经验,而真正了解这个也不过半年多一点的时间。

根据定义来说, Web标准是一些规范的集合,是由W3C和其他的标准化组织共同制定的,以用它来创建和解释网页的基本内容。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计,使其能够被大多数人所访问。

简单来说,Web标准就是由标准化协会,例如W3C、ECMA,所制定的一系列的规则,用来规范网页编写的各个方面。我不打算在本文中涉及过多的技术上的细节,必要时我会举出一些简单的示例用于说明问题。

Web标准历史

在90年代后期,当互联网和web逐渐成为主流时,Web浏览器(包括当时的Netscape 4及以下版本,IE 4及以下版本。行话叫Version 4浏览器)的开发商还没有完全的支持CSS(层叠式样式表,对于Web开发人员来说,他们可以用CSS来控制Html文档的表现)。考虑到CSS1是在1996年制定的,而CSS2是在1998年才制定的,所以这种对CSS支持的不足也是可以理解的。

由于浏览器对CSS的支持不够,再加上一些平面设计师的要求(这些要求与他们经常与印刷品打交道有关)导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是,当设计师可以用 border="0" 来隐藏表格的边框时,用隐藏表格来控制布局的方法同样被使用。另一个例子是对“transparent”(透明)的使用 ,同样是不可见,他们却使用空白的GIF图片来控制布局。

由于HTML从来就没被用来控制一个文档的表现,导致大量混乱代码、非法代码、浏览器的专用代码和属性就被随意的使用了。“校验”这个词 也很少被人问津。对于这些代码来说,标签大杂烩(tag soup)是一个很形象的名字。

Web标准的现状

新版本的web浏览器的发布,使得对CSS的支持得到了加强与扩展,尽管还没有达到它应有的水平。主流的“新版本浏览器” 包括下面列出的这些以及它们的更新版本:

[url=http://www.mozilla.org]mozilla Firefox 1.0

[url=http://www.mozilla.org]mozilla 浏览器及对应的Netscape产品

Opera 7

Microsft Internet Explorer 6

虽然浏览器的开发商对CSS支持的步伐很缓慢,但是现在已经有许多浏览器选择了支持CSS,此时,不应该再有任何理由再像以前那样使用HTML了,应该让它恢复本来的面貌:去描述文档的结构 ,而不是它的表现。 正因为此,我们现在才能够用CSS来达到其本来的目的了。

Web标准的优点

尽管已经说了很多,但我认为还是很有必要提一提Web标准带来的好处。毕竟没人会为一种划不来的标准去折腾自己。

Web标准具有这么些优点:

使页面加载得更快速

降低带宽带来的费用

重新新设计更有效率、花费更少

帮助在各个站点中保持视觉效果的一致性

更利于搜索引擎的检索

令站点更容易被各种浏览器和用户代理访问(包括手机、PDA和残障人士使用的文字浏览器)

尤其说说文件尺寸减小的问题。使用传统的HTML表格布局方法通常会使站点增加毫无必要的带宽传输消耗,而用户也必须等待很久才能加载完页面。根据资料显示,某页面根据Web标准重构后,代码量从原来的13.7kB下降至2.1kB,足足下降了85%之多。根据保守估计,页面重构后,平均尺寸最大也仅为原页面的70%左右。对于流量很大的站点,这无形中就是节省开支的一大妙法。

然而在我国...

有点如此突出的Web标准,近年来在国外已经得到了很大的重视。尤其是美国颁布了 501号法案以后,皆要求站点必须为残障人士提供与普通人士相当的可访问性支持。要知道,传统的布局方法是很难达到这样的要求的。

美国的多数技术性站点都开始向Web标准转型。许多大型站点也已经使用新方法重构。例如就在最近(2005年1月),微软公司的msn站点使用XHTML Strict+CSS完全重写。访问速度大大提升,为站点带来了效益。而回顾国内的站点,却还是安于现状。而这次调查的结果也向国内的网页设计人员敲响了警钟。

调查方法。

本次调查选取了国外一些大型站点以及我国的主题类似与之的站点做出几项指标的比较。包括页面大小,代码质量(通过W3C Validator进行验证)和兼容性及可访问性。

测评结果

网站

机构

页面URL

文档类型

HTML大小(字节)

除去标签的内容大小

比率

Markup验证错误

WAI可访问性评价

www.msn.com

[url=http://www.microsoft.com]Microsoft MSN站点

XHTML 1.0 Strict

http://www.msn.com

29974

Meta:260

text:3976

Summary:530

href:11385

53.9%

21

11处不符标准,总体评价4星

www.sohu.com

搜狐站点

未声明,按HTML 4.01 Transitional 处理

http://www.sohu.com

136736

Meta:44

text:6915

Summary:78

href:375909

32.6%

1259

约550处不符标准,未计算人工测评错误。总体评价1星

www.wired.com

连线IT杂志

XHTML 1.0 Transitional

http://www.wired.com

36441

Meta:33

text:8107

Summary:757

href:11545

56.1%

0 (完全标准)

8处不符标准,总体评价5星

www.pconline.com.cn

太平洋电脑网

未声明,按HTML 4.01 Transitional处理

http://www.pconline.com.cn

151166

Meta:656

text:7228

Summary:23

href:42980

33.7%

645

422处不符合指引,总体评价2星

www.middlebury.edu

Middle Bury University

XHTML 1.0 Strict

http://www.middlebury.edu/about/

11405

Meta:150

text:3180

Summary:503

href:2934

2016正文

58.7%

39

13处不符合指引,总体评价4星

www.zsu.com.cn

中山大学

未声明,按HTML 4.01 Transitional处理

http://www.zsu.edu.cn/2003/xxgk/xxgk.htm

11543

Meta:25

text:5124

Summary:0

href:2452

4640正文

50.4%

45

43处不符合指引,总体评价3星

数据分析

msn.com vs. sohu.com

这两家都是咨询类的门户网站,涉及内容相似,因此具有很强的可比性。Msn.com 于2005年1月改版,完全使用 XHTML 1.0 Strict重构,并使用了CSS排版。Sohu.com沿用传统的HTML表格布局,甚至无法在其网页的开头找到文档类型声明,因此测试中假设它为最宽松的HTML 4.01 Transitional。

首先看到,其真正的内容与文件大小的比例如图所示:

图表 1

可以清楚看到,使用了XHTML的msn.com有效传达信息的同时,减少了很多不必要的尺寸。而搜狐则足足有65%对用户来说毫无意义的代码。

图表 2

从图表2中可以看到,msn.com比较注重可访问性。其中它对一些不使用视觉浏览器的客户做出了支持,这点从“不可见描述”的比较中就可以清楚看到。另外,可访问性问题也比搜狐远远要少。令人感觉惨不忍睹的是,尽管使用了最为 宽松的文档标准,sohu.com的验证错误依然高达惊人的1259个! 而msn.com使用了极为严格的验证标准,验证错误就仅有21个。差距立即体现出来。

在文字浏览器和小屏幕设备当中,msn.com依然比sohu.com保持优势。看看下面的截图就一目了然了:

图表 3. 在手机设备上,msn.com仍井然有序

图表 4. 而sohu的链接挤在一起,难以阅读

在文本浏览器(Opera 7模拟)中,msn.com也明显较sohu易读:

图表 5. msn.com明显较sohu易读

图表 6. sohu版面混乱,还出现不少诸如IMG这样的标签

wired.com vs. pconline.com.cn

这两家都是与IT 相关的网站。Wired.com 采用的是XHTML Transitional文档类型,在本次的调查中, Wired.com是表现最佳的一个。它完全达到了w3c的相关标准,各个参数都处于前列。Pconline 即太平洋电脑网是国内访问量最大的IT站点之一。但是在测评当中,其对标准的漠视以及很差的兼容性让人留下很不好的印象。

图表 7

看来,XHTML能够有效降低带宽消耗并非没有根据。与上例相似,使用了XHTML的Wired.com减少了很多不必要的尺寸。而太平洋电脑与搜狐相似,真正有意义的内容仅占整个文件的33.7%。

图表 8

尽管比搜狐做得好些,但是pconline上的代码错误依然高踞在645处。与有着相似题材的Wired.com的0处错误相比真是黯然失色了。自然了,如此多的代码问题,可访问性自然也就不佳, 400多处的可访问性问题也显示了这个站点的缺陷。

在文字浏览器和小屏幕设备当中,wired.com较pconline.com.cn容易访问。看看下面的截图:

图表 9. 在手机设备上,wired.com仍井然有序

图表 10. PConline有的链接甚至与背景颜色相同,根本无法阅读。毫无意义的装饰图片混乱陈列

在文本浏览器(Opera 7模拟)中:

图表 11. wired.com明显较pconline易读

图表 12. pconline版面混乱,IMG、IFRAME这样的标签随处可见

Wired.com十分注重可访问性,注意它在每种设备中都提供了不同字体大小的选项。PConline在小屏幕设备和文本浏览器中都是难以阅读,在小屏幕设备中甚至还出现了字体颜色与背景相同这样的重大失误。

Middlebury.edu vs. Zsu.edu.cn

本来不太情愿,毕竟是自己的学校嘛,总得留点面子。可是回头一想,知道了差距才会有进步嘛。所以就把中山大学的网站ZSU.edu.cn也拿出来跟别人的比比看咯。由于这次使用的页面包含的正文量比较大,所以为了公平起见,两个页面中的正文量换算成相同,以利于比较。

图表 13

这次使用XHTML的Middlebury的优势不太明显,大约比Zsu高了8%左右。考虑到这两个页面都比较简单,能像这样接近也是情理之中。如果页面稍稍复杂,则Zsu肯定会有更多的垃圾代码产生。

图表 14

在图表14中,两所大学页面的错误率都比较低。但是zsu.edu.cn的两类问题依然比Middlebury.edu要稍多,而且不要忘记,Middlebery.edu使用的是几乎最为严格的XHTML 1.0 Strict标准来进行验证的, 而中大只是HTML 4.01。而且在验证过程当中还发现,中大的页面当中频繁出现与其文档编码gb2312不符的UTF-8编码字符,导致验证失败。

尽管没有在所检测的URL上发现严重的可访问性问题,但是ZSU.edu.cn却有一个致命的可访问性错误。这个错误源于在其首页上使用了IFrame以及不遵从W3C规定,没有为每幅图片加上alt说明。 在文本浏览器(Opera 7模拟)中:

图表 15. 比较有条理的Middlebury.edu首页

图表 16. 充斥着IMG和IFRAME的中山大学的首页根本无法被残障人士及某些便携设备使用

结论

尽管此次调查仅仅分析了廖廖几个网站,但是却反映了很多国内外站点面临的问题。不标准导致了许多站点的高成本、低效率甚至无法被某些浏览者访问。更要命的是,国内很多的大型网站和他们的开发人员依然抱着旧有的方式不放,这是阻碍Web标准在我国推广的一个重大障碍。

希望我们能够敲响警钟,努力去改变这样的现状。

参考文献

Designing with web standards, Jeffrey Zeldman, New Riders, 2003

MSN goes CSS, Douglas Bowman, StopDesign.com , 2005

New MSN.com Homepage, Venkat Narayanan, MSDN Blog, 2005

网站设计师

W3C

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有