高校门户建设中Web前端技术

阮晓龙

高校门户建设中Web前端技术

阮晓龙

阮晓龙

河南中医学院网络信息中心

阮晓龙（1981-）男（汉），河南省洛阳市人，讲师，本科，主要研究方向为计算机网络、计算机软件、Web技术。

当今，高校已经充分利用门户，并使之成为信息传播不可或缺的载体。但是高校门户并未紧跟Web前端技术的发展，依旧是互联网初期的老版门户。如何应用已成熟的Web前端技术对高校门户进行改革，推动高校门户向高层次发展，需要不断的研究与探索。

1 Web前端技术

什么是Web前端

Web前端包含Web前端设计（UI设计、交互设计等）、Web前端开发（HTML、CSS、JavaScript等）、Web前端测试、Web前端优化等。网站只是Web前端的最终展现形式，并不是Web前端的全部内容。

什么是Web前端技术

Web前端技术拥有一个复杂的知识体系，图1描述了Web前端技术的知识体系结构，足以证明Web前端技术的复杂性。Web前端开发技术根本无法代表Web前端技术，图1中的知识体系结构也不是Web前端技术的全部内容，只是宏观上概括了Web前端技术的基础内容。Web前端技术涵盖的Web前端设计技术、Web前端测试技术、Web前端优化技术、Web前端开发技术中运用的软件工程等并没有在图1中展示。

图1 Web前端技术的知识体系结构

Web前端技术的应用情况

JavaScript类库

JavaScript作为实现网页交互、动态效果、AJAX交互等，已是Web前端开发的必需品。为使JavaScript的开发轻松、简单，诞生了JavaScript类库。JavaScript类库在Web前端开发中的使用，使代码写的更少、实现的功能更多、浏览器兼容性更好。jQuery、Prototype和Dojo都属于非常强大的JavaScript类库。其中，jQuery已内置在国际顶尖的三套开源CMS（Joomla、WordPress和Drupal）中。

CSS框架

CSS框架不同与JavaScript类库，CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块。CSS框架提高了开发和设计效率，规范CSS和HTML的开发。主流的CSS框架有Yahoo Pure、YUI Grid CSS、Blueprint等。

前端开发框架

前端开发框架是JavaScript类库与CSS框架的集合体。前端开发框架大大简化了门户的开发过程，使设计者、开发者更快捷、更出色地完成门户的搭建工作。Twitter Bootstrap是目前最流行、使用最广泛的前端开发框架，其它比较优秀的前端开发框架还有Semantic UI、Foundation等。

2 高校门户的分析

高校门户网站现状分析

笔者对全国39所985高校、112所211高校门户进行了详细的调查统计，对调查结果进行了大量数据分析。将高校门户网站的现状进行了分析研究，得出基本的结果如下。

（1）高校在门户建设中，页面静态化技术还未得到普及，40％左右的高校门户仍直接使用动态信息发布技术。详见图2。

图2 985高校（左）和211高校（右）页面静态化使用情况

（2）多数高校在门户建设中仍使用Flash实现页面的动态交互，只有20％左右高校在门户建设中淘汰了Flash。详见图3。

图3 985高校（左）和211高校（右）Flash使用情况

（3）数据显示，只有少数高校在门户建设中使用HTML5技术，85％左右的高校仍然使用HTML4或XHTML技术，反映出大部分高校的门户网站还不能够支持多终端访问。详见图4。

图4 985高校（左）和211高校（右）HTML5使用情况

存在的共同问题

通过数据的对比分析，作为我国高校先头部队的985高校和211高校在门户建设上，使用的Web前端技术相对落后，并且没有充分考虑到用户体验，存在的问题也相对集中。

例如，静态化技术是提升门户访问速度、降低服务器压力的有效手段。但近半数高校在门户建设中并未使用静态化技术。统计数据中高校门户Flash使用率高、HTML5使用率低，说明多数高校在门户建设中对新兴技术的探索不够投入，看似对旧技术越来越熟练，实际是对先进的Web前端技术重视不足。

3 应用Web前端技术进行高校门户建设的优势

应用HTML5和CSS3的优势

HTML5与HTML4.0.1相比，进行了重大的改进。在高校门户的建设中的优势也颇多。比如响应式门户，可支持多终端访问。开发一套程序便可支持移动终端和桌面客户端，提高开发效率，降低门户建设成本；HTML5新增的语义标签使定位、布局更加方便，易于搜索引擎进行判断；在表单中，HTML5新增的maxlength、placeholder、required等属性可减少JavaScript或jQuery的使用，精简门户，缩短页面加载时间；HTML5新增的视频标签可以直接播放视频和音频，无需再加载Flash播放器和第三方播放器；HTML5新增本地存储可以让门户在浏览器端保存大量的离线信息，数据不会因为页面刷新或关闭而改变。

CSS3中增加的丰富效果（比如圆角、字体阴影、边框阴影、透明、渐变等效果），可降低门户对图片效果的依赖，减少门户中图片的使用，缩短页面加载的时间，提升用户体验。与HTML5结合，使HTML5的应用优势最大化。

应用AJAX技术的优势

AJAX技术是一种创建更友好更快捷以及交互性更强的技术。在门户中应用AJAX技术，在页面内通过异步方式与Web服务器通信，无需打断用户操作，完成数据的加载和页面内容的更新。减少每次请求加载的数据，减轻Web服务器压力和网络宽带的负担。

应用静态化技术的优势

应用静态化技术带给高校一个快速、安全、稳定的门户。静态化技术除去了用户请求后Web服务器复杂的处理环节，直接发送静态页面给用户的客户端，缩短用户等待页面加载的时间。

程序的崩溃，数据库无法访问都不会影响门户的正常访问，使高校门户更加稳定。减少攻击漏洞，防止SQL注入，使高校门户网站的安全性得到巨大提升。

另外，由于搜索引擎对静态页面更加友好，静态化发布高校门户更容易被搜索引擎抓取，可提高高校门户的搜索排名，进而扩大影响力。

应用GZIP页面压缩的优势

GZIP是一种文件压缩算法，应用GZIP对纯文本文件压缩，文件大小会减少40％以上。在网络中传输，应用GZIP压缩算法对高校门户页面进行压缩，可提高门户页面的加载速度，降低高校网络带宽的负担。

GZIP页面压缩的优势并不简单地提高了高校门户的加载速度，还有利于搜索引擎抓取门户页面内容。以谷歌搜索引擎为例，搜索引擎可以直接抓取并读取GZIP压缩后的门户页面。相对未经GZIP压缩的普通页面，经过GZIP压缩之后的页面可更快的被谷歌的搜索引擎抓取到，提高门户的搜索排名。

4 高校门户建设的基本原则

统一性原则

门户设计要与各部门网站、各院系网站风格统一，具有主次分明的视觉印象，形成高校自身特色。

艺术性原则

门户设计除了要满足用户对于信息和服务的需求外，还要增加门户的美感，满足用户的视觉审美需求。

易用性原则

门户展示的内容要全面、有效，重点突出、层次清晰，符合用户习惯和空间记忆；门户提供的服务和功能要适用、方便，能够协助用户高效、方便地完成信息查询。

扩展性原则

门户设计应具有可扩展性，信息的扩充不能影响门户的框架和风格。

流程规范化原则

门户规划、门户设计与开发、门户测试、门户内容发布、门户运维管理等各个流程都应有规范标准。

5 高校门户建设的软件过程探索

高校门户建设单一地依赖建设原则是不够的，为了保证各类人员在一种组织良好、管理严密的环境下协同配合、共同完成门户建设，还需要在门户建设中引入软件过程。软件过程包含瀑布模型、快速原型模型、增量模型、敏捷过程等。

瀑布模型以文档驱动项目进展，阶段间具有顺序性和依赖性，必须等待前一阶段工作完成，才能开展后一阶段工作。但是，由于瀑布模型几乎完全依赖于书面的规格说明，很有可能导致最终结果无法真正满足用户的需求。

快速原型模型更有助于保证用户的真实需求得到满足，但是快速原型在获知用户真正需求后将会被抛弃，快速原型需要在开发人员尽可能快速的建造原型系统，来减少开发成本。

增量模型是逐步增加软件功能，使用户有充足的时间学习和适应，减少一个全新的软件可能给用户带来的冲击。但是，增量模型很难保证新增构件不破坏原有软件体系结构。

敏捷过程具有高效工作和快速响应变化的能力，以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发，但是敏捷过程完全没有文档，对项目来讲是一种灾难。

高校门户建设的软件过程

通过对多种软件过程进行对比，笔者认为高校门户建设应该以用户需求为核心，采用敏捷过程来建设，再结合瀑布模型，以文档驱动项目阶段性进展，弥补敏捷过程无文档的不足。详见图5。

图5 高校门户建设的软件过程模型

需求调研与验证

需求调研针对不同的用户群体，收集多种的用户群体的意见与需求。对调研结果进行验证，明确用户需求。

设计与审核

根据用户需求，对高校门户进行UI设计和交互设计。设计完成之后交付用户审核，用户变更需求，返回前一阶段。

静态页面开发、测试与审核

根据UI设计和交互设计，对高校门户静态页面进行开发。静态页面测试完成之后交付用户审核，用户变更需求，返回前一阶段。

模板开发、测试与审核

根据静态页面，对高校门户模板进行开发。模板测试完成之后交付用户审核，用户变更需求，返回前一阶段。

门户发布

模板通过用户审核，对高校门户进行发布。

门户优化

高校门户发布后便开始门户的维护工作，不断对门户进行优化，优化过程中可能需要返回门户设计阶段、模板开发阶段对门户进行调整。

需求变更

用户需求发生变更，则按照软件过程对门户重新开始执行。

高校门户建设中引入软件过程的价值

优化项目管理，提高项目质量

采用敏捷过程和瀑布模型结合的软件过程，把项目分为多个阶段，使项目流程化进行。每个阶段工作完成后，都需要与用户进行沟通，通过与用户沟通的结果对项目进行迭代开发，满足用户不断变化的需求。通过对每个阶段工作结果的审核，及时发现问题，提高项目质量。

提高团队执行力与工作效率

采用敏捷过程和瀑布模型结合的软件过程，能够让团队成员清楚的知道每阶段的工作流程与每个人的工作职责，团队成员能够在每阶段工作的执行过程中进行良好的沟通与协作，提升团队工作执行力，提高团队的工作效率。

6 高校门户的建设与服务模式

目前建设与服务模式

目前大多高校门户是由某一个信息化部门或网络中心负责建设与维护。信息化部门或网络中心指定一人负责门户工作，不建设专业团队。而门户工作量大，负责人被迫对门户工作进行简化，导致高校门户技术落后、信息发布混乱、内容更新不及时、门户管理混乱，高校门户的使用价值不断降低。

门户作为高校在互联网上传播信息不可或缺的载体，高校应该重视门户建设，健全门户建设与服务模式，提升门户在互联网上的宣传力度。

关于建设与服务模式的探索

自建专业专职团队

高校自建专业专职团队进行高校门户建设和后期维护。团队成员包括教师和在校大学生，全权负责门户的建设和维护工作。团队由高校领导直接负责，实现高校门户资源的高效调动。

团队分为技术开发小组、内容策划和编辑小组、运维管理小组三个小组。

技术开发小组负责高校门户Web前端设计工作、门户开发与测试工作和性能优化工作。

内容策划和编辑小组可以与宣传部、校报、学生社团相结合，负责专题策划工作、内容维护工作、内容审核工作。

运维管理小组负责服务器运维工作和服务器安全工作。

大学生组成的专业专职团队的建设，不仅保障了高校门户的正常运营，而且每年可向社会输出一批具有专业技能的技术型人才。

建设与服务外包

将门户的建设和服务统一外包给专业技术公司，由专业技术公司负责门户建设和后期运维管理工作。

多数文科类高校缺乏门户设计、开发、运维人才，将门户建设外包给专业技术公司，依靠专业技术公司快速建设门户、保障门户正常运行，可以减少高校在门户设计、开发、运维管理工作中人力与物力的投入。

但是，高校门户建设和服务的外包具有两个弊端。第一，门户出现的问题需要反馈给外包公司才能得到解决，问题的处理流程繁琐、不灵活。第二，高校自身仍需要具有内容建设能力，只能将设计开发和运维管理工作外包。

7 结束语

在互联网的飞速发展今天，只具备信息展示功能的门户已经不能满足用户的需求。但是，使用Web前端技术已能够建设富有文化内涵、艺术创意的门户，使用户在浏览信息的同时获得更美感的印象。而作为提供高等教学和科学研究的高等教育机构，高校应该紧随互联网发展的脚步，在门户建设中充分利用Web前端技术，建设更具魅力与特色的门户，推动国内高校门户改革。

10.3969/j.issn.1001-8972.2015.02.033