校内网站调研报告

PureWeber团队

前言

随着科技的进步,互联网逐渐地走进了我们的生活,并遍布我们生活的各个角落。PC,手机,电视,各种设备都能连接互联网。家庭,学校,公司,机关,到处都能连接互联网。而我们的学校各学院各组织,为了宣传自己,或者是为了向教师和学生等提供便利,也都积极开办了各自的网站。校内网站数目繁多,超过了200个。这些网站的质量怎么样呢?它们应用的技术怎么样呢?在学生和教师看来,他们的体验怎么样呢?带着这些问题,我们团队对校内网站展开了调查。

本次调研不针对任何人任何组织,仅是我们团队的一次小小锻炼。包括收集信息,编写爬虫,挖掘和整理数据等。希望能够从已有的校内站点上学习到有用的知识,同时也希望能对我们认为欠缺的地方提出我们的改进建议。这其中可能无法避免会有主观意见,如有不周,还望见谅。

流行的Web技术应用

为了能够更好地做好调研,寻找对比的样板,我们还调研并了解了当下比较流行的一些Web技术。这些都是相对前沿的技术,国内外各大公司、组织在各自网站上普遍采用的Web技术。这里只讨论开发网站的技术,而不去探讨具体的算法细节。

当下十分流行的Web2.0 是相对Web1.0的新的一类互联网应用的统称。Web1.0 的主要特点在于用户通过浏览器获取信息。Web2.0 则更注重用户的交互作用,用户既是网站内容的浏览者,也是网站内容的制造者。所谓网站内容的制造者是说互联网上的每一个用户不再仅仅是互联网的读者,同时也成为互联网的作者;不再仅仅是在互联网上冲浪,同时也成为波浪制造者;在模式上由单纯的“读”向“写”以及“共同建设”发展;由被动地接收互联网信息向主动创造互联网信息发展,从而更加人性化!很多Web2.0站点提供RSS输出。RSS也叫聚合RSS,是在线共享内容的一种简易方式(也叫聚合内容,Really Simple Syndication)。通常在时效性比较强的内容上使用RSS订阅能更快速获取信息,网站提供RSS输出,有利于让用户获取网站内容的最新更新。

更多时髦的网站使用AJAX技术实现交互,在不刷新页面的情况下完成数据传送与替换。保持了用户操作的流畅性,完整性。更有一些网站采用新的HTML5以及CSS3技术构建前端,使得网站的多媒体表现更加丰富多彩,活灵活现。

校内站点概况

服务器

我们对校内站点做了整体上的数据统计,各个站点概览,并随机抽取几个站点进行了详细的测评。现在可以说一下校内站点的大致情况。从服务器上来看,大部分站点使用Windows加IIS的组合作为网站服务器。我们测试了172个可以访问的站点,其中有121个站点使用Windows Server,占总数的71%。使用Linux作为服务器的有21个站点,占12%。2个站点使用的是Compaq Tru64,1个使用的是Solaris。26个站点服务器未知。服务器未知的站点中,大部分使用的是ASP作为其服务器端语言,可以推知其使用的也很可能是Windows Server。服务器端语言,大约53%使用的是ASP/ASP.NET,PHP占19%,而JSP仅占3%。还有25%未知。

服务器操作系统统计图服务器端语言统计图

我们对校内站点大量使用Windows Server和ASP表示理解。因为在教学中,也大量用到Windows中的各种应用程序。并且有专门的.Net开发的课程。但我们给出的建议是,如果部门、学院、各组织希望自己的站点保持稳定,推荐使用Linux服务器。Linux Server相对Windows Server有更良好的内存管理机制,稳定性更强,能够保证站点的长时间稳定在线,并且价格更加低廉甚至是免费。而Windows Server则相对昂贵且稳定性不佳(不知服务器上的Windows可付钱否?)。

对于编程语言,使用什么样的语言着实不是很重要。可实际情况是,PHP仍然是当下最流行的Web语言,由于其免费方便快捷跨平台高效等特性在大中小网站中被普遍使用。如今,PHP的各种网站开发框架层出不穷,十分完备。例如重量级的Zend,轻量级的Codelgniter等。Pureweber团队主要也是使用PHP进行Web开发,主要是因为其入门简单,易于上手,并且使用方便。顺便提两种比较时髦的语言——Ruby和Python。

前端样式

在做网站调研时,我们并不十分关心网站的后台如何,虽然这对网站的使用体验来说很重要。我们更关心的是前端的表现。一个现代的网站至少要使用现代的前端样式,重点内容突出,特效使用适当。这点国内的门户网站做的非常糟糕——打开任何一个门户网站,映入眼帘的是一个庞大的导航条,让你完全找不到要点。拖动滚动条,大片大片的文章标题密密麻麻地展现在眼前,广告铺天盖地,令人眼花缭乱。

163

工大新闻网这点做得似乎好一些,看起来内容清晰很多。但是单就导航条来说,分类内容还是过多。建议合并分类,并使用二级菜单来显示子类。这样会使读者更容易定位想要寻找的内容。再者,既然提供了搜索窗口,就应当将其直接显示给读者而非隐藏在一个“新闻搜索”按钮之下。我们对新闻站的视觉评价是一般。

hitnew

校内网站也有一些让我们看起来耳目一新的,例如哈工大首页,还有学生公寓管理中心。学生公寓管理中心的页面据我们所知,是一些在校学生做的。虽然在样式上算不上十分优秀,但是在校内网站中做横向对比,也算是较为优秀的设计了。页面顶端的导航条效率不够高,给人反应缓慢的感觉。而有些页面和样式也处于待定义阶段。整理来看,给人的视觉效果还是不错的。

home

网站基本数据统计

稳定性

在我们对这些站点进行数据统计时,发现很多站点无法访问或者访问特别慢。虽然我们的测试环境是校内网络,仍然有很多站点无法访问。网站既然存在,就没有理由一直处于下线状态。在服务器上空跑,只会浪费更多的资源。如果访问量不佳,或者站点根本没有存在的意义,我们的建议是关闭这些站点从而节省开销。

网站连通情况

从上图可以看出,有11%的网站无法连通。假定基数是200(实际大于200)的话,那么将有20几个网站无法连通。我们不清楚这些网站是已经下线还是程序存在异常。如果不再提供服务,那么就应当注销,在校内站点地图中移除。如果站点在线但存在异常,那么我们猜测这可能是长时间的无人维护导致的。部门既然有能力投入资金建立起自己的网站,那么也应该投入一定的人力来维护这个网站。自己都不注重网站的建设,能期待有多少人来访问呢?

成功访问率统计

我们从网络监测中心获得了一份数据,在持续不断的监测中,统计站点的成功访问率。一般来说,站点应该保持95%以上的在线率。从上图可以看出这样的站点占了大约54%。那么其他站点给用户的体验可以推测为,偶尔或经常发生故障。我们认为这不是一个好现象,感觉是有大量的资源在被浪费。希望相关的部门能够重新考虑自己的网站经营策略。

YSlow测试

YSlow是YAHOO!美国开发的一个基于网页性能分析浏览器插件,非常的棒,从中我们可以看出页面上的很多不足,并且可以知道应该如何改进和优化。我们对一百多个站点的首页进行了YSlow评分测试。首先说明,这项评分不能代表站点的好坏,只是在网页的响应,文档和多媒体的使用上以YAHOO!的标准来进行评估。分数越高,表示性能越好,反之,性能越差。我们以80分为界作出了一个统计图,并将低于75分的站点及分数列表于下,建议相应的站点优化代码,改进结构以提高访问效率。

YSlow

由此来看,似乎大部分站点的性能都比较不错,不能表示其用户体验上也是这样。下表列出了YSlow评分低于75的站点,建议这些网站能够改进代码,合理布置前端页面结构,精简图片,减少页面对象从而加快页面加载速度,提高访问质量。

站点名称YSlow综合评分
乐学网(交互式网络教学平台)74
先进动力控制与可靠性研究所74
离退休工作处74
中国国家图书馆-中国国家数字图书馆73
博研高等教育培训中心73
现代焊接生产技术实验室72
哈尔滨工业大学结构检测与控制研究中心72
中国学术会议在线69
哈尔滨工业大学新闻网69
学生公寓管理中心69
哈尔滨工业大学--基础学部56
哈尔滨工业大学物理系55
人事处50

特效统计

当今最流行的页面特效非JavaScript莫属。JavaScript能在前端做出数据检验,页面填充,页面动画效果等等特效,被普遍用于各种网站中。在我们的统计数据中可以看出,大多数网站都或多或少地使用到了JavaScript来控制页面效果。例如“新闻网”上,当鼠标悬停在“新闻搜索”字样的标题栏上时,下面显示出搜索框的效果。由于站点数量较多,我们对JavaScript的统计进行了排序。代码的大小一般能够体现出效果的复杂性。我们没有到相应的站点做实地的验证,因为有些JavaScript框架封装文件就比较庞大,而网站中可能只用到其中一小部分效果。下图列出了使用JavaScript最多的10个网站。

JavaScript

JavaScript如果使用不当,会拖慢网页显示速度,影响使用体验。结合上面的统计和YSlow评分,可以看出有些站点评分较低可能是JavaScript使用过多且布置混乱导致。例如:中国学术会议在线,新闻网,乐学网。建议这些网站重新整理JavaScript代码以提高浏览体验。

连接情况统计

最小异常TOP10

曾经我们统计过这些站点的异常数。但是后来发现,站点建立的时间不一。而我们获取的数据是从站点登记以来监测到的异常数。所以我们用这些数据除以监测的天数,再乘以某个系数,得到了这样的一个数据。上图列出了异常最少的10个站点。

网站访问量TOP10 日均访问TOP10

我们又从监测中心获得了网站访问量的统计。考虑到网站创建时间不同,我们也进行了日均访问量的统计。如上两图。

平均连接时间比例

当然网站的连接情况速度不仅要看页面的加载速度,也要看网站的响应速度。我们认为300ms是可以忍受的快响应速度,而大于600ms则是慢响应速度。而这些数据都来自校内网络测试出来的结果。有高达27%的受监测站点响应时间大于600ms,说明网站整体的稳定性有待提高。

部分站点首页评析

我们抽取了从工大首页比较容易到达的网站进行了较详细的分析。下面将我们的分析结果逐个列出。因为这个是分组进行统计和整理的,难免有些主观意见。只希望网站的相关部门,能够听取不同的声音。

学生公寓管理中心

这个站点让人第一眼看去,不免和中国移动的首页做出了比较。我们给出的评价是假如中国移动是5分,那美观程度上home肯定能算4分了。整个站点在各个浏览器下的显示效果都比较好。相较于中国移动的页面,移动的页面几乎没有任何特效,而公寓管理中心的页面上有自动切换的图片,还有悬浮的广告(测试时)。图片和JavaScript使用比较多。首页的图片过大,载入过慢,拖慢了整个网页的显示速度。

home

内容方面,大量的页面都是待建状态,而有信息的页面也基本全是文字信息,规章制度之类。分类比较清楚,基本可以快速定位,但主要问题还是信息量不大。功能体验上来讲,可以很快地找到需要的功能。但交互功能不多,仅有的几个(报修,寝室打分)还算好用。嵌入了地图功能和MSN聊天功能。使用上来看,只有报修页面使用的比较多,其他则近乎鸡肋。留言板的回复很及时,但内置的论坛里面几乎都是广告。

服务器环境为Windows,Apache/2.2.9 (APMServ) mod_ssl/2.2.9 OpenSSL/0.9.8h PHP/5.2.6。

教职工之家

界面良好,不过常用下载框体与FLASH框位置分配有问题。页面顶部和底部均有FLASH特效,分配较合理。我们查看了这个网站前端的代码,发现布局使用的是比较老旧的表格式布局。表格布局在现今流行的网站中已经不再采用。取而代之是块和CSS共同控制的布局格式。这样的布局样式灵活性高,自定义性强,有着表格无法比拟的优势。从布局可以看出,这个网站已经有几年的历史了。但是搭建后没有进行很好的后期维护,技术框架已经落后。

gh

从内容上来看,该站点每月大约3条消息左右。时效性较好,并且含有多媒体消息。同时利用文字和多媒体的展示效果很好,含有站内搜索和站长留言这样的交互模块。主页的浏览体验较好,附属页面欠佳。网站的使用频率较高。

服务器环境为Windows,Microsoft-IIS/6.0。使用的是PHP语言。

哈尔滨工业大学医院

整体布局清爽整洁,色彩偏冷色。建议减少冷色调,适当添加暖色以给人温和感。类似体检中心首页底部体检流程的色彩效果,就比首页效果好很多。整体页面布局上建议将次要内容统一整理到一个或多个侧边栏上,而在中心区域重点显示想要给来访者展示的主要内容,例如新闻,科室简介等。“科室简介”以及“先进设备”两栏采用的滚动图片显示,在当前互联网样式设计中已经不再流行,并且访客会对其产生厌烦感。建议采用静态图片或者Flash,JavaScript特效等形式来显示。各主流浏览器下兼容性良好。医院概况中的医院视频建议使用流行的FLV格式视频,压缩率更好、清晰度更好和兼容性更好。若干页面使用图片的滚动显示。容易使访问者产生反感,建议去掉该特效。

校医院

内容上,信息含量一般,很多分类中的内容为空,例如护理天地中“天使风采”一栏中大部分栏目内容为空。其他版面内容也较少。医院动态中提供的信息较少,例如“新闻播报”一栏从08年至今只有21条信息。有一些简介内容也是空页面,没有任何可用信息。新闻的时效性过低,最新通知中的最近一个条目是半年以前。校园疫情中的条目为0,没有体现任何作用。医疗咨询的使用率较高,但是回复不够及时。此类咨询类服务应该在24小时内回复咨询者。页面部分效果使用的技术较落后,滚动特效已经不适用,首页Flash无法显示。总体上浏览体验一般。有关校医院的主要信息都能通过导航条很方便地获得。但缺少更加详细的信息。体检预约,体检结果查询需要和医院进行交互,所以此处无法测试。医疗咨询从现存的结果来看,做的还是有些欠缺——既然是在线咨询,应当作出较迅速的反应。

大学人生

总体来看,界面设计符合共青团“血染风采”的风格,但是仔细看起来有点简陋,不能给人以“充实”的感。各浏览器的兼容性良好。图片使用较少,并且flash不能正常加载。而内容上,由于网站大部分内容都是同过外链到“今日哈工大”的新闻,所以网站不仅图片等多媒体内容少,而且自身文本信息也少。内容分6类:1.团委机构 2.思想教育 3.校园文化 4.社会实践 5.科技创新 6.文档下载。但大部分模块空无一物,或者更新内容少。除了新闻更新较好以外,部分模块没有实质性内容,比如“思想教育”模块和“科技创新”模块。没有交互模块。使用的人数较少。

大学人生

这个网站给我们的感觉基本上是在空跑,没有实质性内容。服务器使用的是Windows,Microsoft-IIS/6.0。使用APS.NET构建。

大型精密仪器设备开放共享平台

在我们撰写这份报告时,这个站点已经无法访问了,页面上是Apache和Tomcat的提示信息。大致写一下我们团队成员在测试时对此站点的评价。主色调为蓝白色,感觉上比较清新,但制作的比较简单,美观程度较差。在各种浏览器上,大多数页面没有问题,但部分会出现多余的输出。主页使用了动态图片(GIF),无其他特效。站点内容上几乎不更新,全站消息数不超过10条。在展示功能模块上,可以比较清楚的找到需要的东西,展示界面也比较清晰。交互方面,留言功能无法使用,注册用户需要激活邮箱才能使用,但注册后并未收到激活邮件。

综合浏览体验:分类比较明确,能够在导航栏中比较准确的找到要找的分类。但主页上的提示类信息较少。能够很方便的获取需要的信息,但没有什么信息可以获取。系统反馈无法使用,注册后未收到激活邮件,不能激活,不能进行更进一步的体验。从使用频率上看,很少有人使用,上面的使用记录只有几个人。在系统反馈界面没有看到任何留言或消息,全部预约项目只有5个,通过的只有2个。

哈尔滨工业大学学报编辑部

界面总体上可以,只是英文主页实在简陋。几乎没有渲染。未发现由于浏览器不兼容的情况。页面顶部的logo用了flash特效。而内容上来看,信息量很少,基本荒废了。主要内容分类为期刊简介,新闻公告,作者指南,征订,资料下载。作者指南是空的,虽然分类了,但几个分类内容都没多少字。时效性来看从07年到10年一共就5条新闻,最近一条还是10年9月20日。信息比较少,所有的信息都是文本形式,没有任何多媒体。在浏览体验上展示部分都是非常普通的文本或者列表。没有太多做太多的样式化。留言模块是以发邮件的方式,需要用到outlook,体验不是很好。登陆界面也很简单。编辑部主页全都是服务器错误,无任何内容,各个报的主页样式也很简单陈旧。

学报编辑部

这样的站点,它的信息承载已经不再有意义。仍然在一个服务器上运行,却没有多少人光顾。即使去浏览,也会发现内容贫乏,错误泛滥。建议管理员尽快修复各种错误,使网站可以正常运行。网站的运营人员应当不断得向站点内填充内容,扩大交互频率。这样,网站才有继续生存下去的意义。

对校内站点的建议

熟悉工大主页的人可以发现,上述站点都是主页列表中“校内常用站点”中的网站。我们在这些网站中发现了很多问题,而带着这么多问题的网站却依然在我们常用站点列表中,是否说明了我们学校对待校内网站的一些问题呢?这点很值得我们思考。

作为学生,在日常学习生活中也会或多或少地用到校内的各种网站。在进行这次调研之前,真的未想到原来学校竟然有这么多网站。而这些网站的质量也良莠不齐。很多网站我们闻所未闻,当然更不用说上去使用了。更何况,很多网站在使用上给人的感觉如此之糟糕。例如“著名的”物理实验选课系统,学生对此抱怨很多,但是相关部门依旧在使用老旧的技术磨练着学生和老师们的耐心。

编者认为,工大的网站确实应该如某位老师所说,该好好进行改革了。而即使要改革,也要遵循一定的方法,不能随随便便就找几个抱着练手心态来的学生,给他们个样板撒开就做。这样只会重蹈覆辙,让我们校内的网站越来越冷。要办好网站,首先要找准定位,有没有办网站的必要,如果办网站需要确定一个主题,需要给用户什么样的内容,什么样的功能,是否产生交互,是否需要反馈等等。仅凭一个低品质的网站,无法给任何部门、组织、学院加分。建议相关部门把建设好自己的网站提上日程,找准网站的建设方向,让网站尽快回归正轨。

技术前沿

技术是会随着时间不断进步的,我们真心希望校内网站能够尝试使用新的Web技术,为其用户提供更好的使用体验。这里简单介绍几个比较前沿的Web前端技术。有了这些技术,若再请上优秀的美工,开发者便能够做出使用方便,赏心悦目的网站来。

AJAX

在目前的Web2.0热潮中,Ajax已成为人们谈论最多的技术术语!其实,AJAX(Asynchronous JavaScript and XML)是多种技术的综合,它使用XHTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用Javascript绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合,可以说AJAX已成为Web开发的重要武器!

HTML5

HTML5是HTML下一个的主要修订版本,现在仍处于发展阶段。目标是取代1999年所定订的HTML 4.01和XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。

CSS3

CSS即层叠样式表(Cascading Stylesheet)。 在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

关于我们

PureWeber团队是2011年初成立的Web开发团队,是通过程序设计与实践2 – Web开发课程建立起的一个开发团队。这门课程是一个公益性的培训课程,由哈尔滨工业大学ACM ICPC创新基地提供支持,旨在提高学生的动手编程能力、培养编程兴趣。该课程由孙大烈老师于2010年秋季学期发起,面向计算机学院低年级学生,讲授基于Linux, Apache, Mysql, PHP的Web开发技术。以上测评均出自团队个人之手,难免会有主观臆断。如果对某些站点有评论不周之处,还望海涵。