关注Web前端：掀门户网站改版潮

文/刘欢

关注Web前端：掀门户网站改版潮

文/刘欢

目前，许多高校已经开始意识到前端工作对于校园Web应用的重要性，并开始反思过去信息化工作中对于Web前端的忽视。一个最好的证明就是高校的门户网站改版潮。

Web前端的过去和现在

Web前端（Front-End）泛指Web应用中表面化的，用户看得见、摸得着的内容，包括外观界面、页面内容、操作交互等。与之相对应的则是后端（Back-End），如脚本编程、数据库交互、业务逻辑处理、服务器配置和管理等。绝大部分Web应用都同时包括了前端和后端。前后端相互配合，各种信息数据由后端生成，并通过前端呈现给用户。

在早期的Web应用开发中，前端工作主要是指HTML页面的开发。由于网络速度、电脑硬件、浏览器软件等因素的制约，彼时的前端开发工作大都局限于简单的页面内容呈现。由于HTML页面的创建较为简单，后端开发人员常常包揽了前后端的工作，以致于前后端之间的区分显得较为模糊。

随着网络速度和电脑硬件水平的提升，在确保基本的内容显示的前提下，人们开始考虑如何使Web应用显得更加美观，前后端的分离逐渐显现。此时出现了“网页设计”、“网站美工”等一系列新名词，一些专门的艺术设计人员参与到Web应用开发中，开始为站点设计各种外观界面。这些人也因此成为了最早的专门从事前端开发的人群。

然而问题也同时浮现出来。早期的前端开发者往往缺少对代码和编程的了解。在这一时期，站点界面中的图片修饰常通过“切图”的方式完成，HTML的架构也大都借助于表格定位。CSS开始被前端开发者使用，但往往仅用于指定一些简单的外观样式。这些问题的凸显，使得前端开发显得不那么富有技术价值，并在一段时间内陷于较为尴尬的境地。

随着浏览器的升级换代，以及各种终端设备的不断涌现，前端逐渐被赋予了新的涵义。此时的前端工作不仅需要考虑应用的视觉效果，还需要考虑用户的使用体验，构思人机交互的过程，并试图将应用在多种设备环境中加以呈现，所涉及的主要技术不仅局限于HTML和CSS，而且还包括了JavaScript。前端设计和前端开发成为了前端工作的两个主要分支。其中，前端设计是对Web应用的视觉、交互等效果的构想与规划，而前端开发则负责通过编写代码来实现这些视觉效果。前端不再是一个缺少技术含量的工作岗位，相反它却对从业者提出了较高的要求。在后端技术差异逐步缩小的今天，前端的优劣已然成为了评价Web应用质量的重要标准。

Web前端与高校信息化建设

2014年是中国接入国际互联网的20周年，回顾过去的这段时间，Web前端的概念从无到有，其技术逐渐兴起、发展并走向成熟，前端工作者们极大地改变了人们获取互联网海量信息的方式，乃至于影响了大众的Web交互习惯和审美兴趣，其间的变化不可谓不大。然而在高校的信息化建设中，Web前端的相关工作却始终是软肋之一，这主要体现在两个方面：

一是高校Web应用用户交互体验的薄弱。在过去，高校的信息化主要解决的是“有没有”的问题。在软件建设中，关注重心主要在于各类信息化系统的功能实现，在于系统是否能按时按需完成，此时后端的开发处于相对更加重要的位置，前端的比重被大大压缩，甚至被完全忽略。这些信息化系统在建成并投入使用后，逐渐成为了高校日常教学、科研、管理工作中不可或缺的部分，但由于前后端投入的差异，使得系统的展示层面常常缺乏对用户操作体验的关注，其后果是系统在师生中的满意度往往并不高，校园用户常常抱怨“系统不好用”、“很难上手”、“操作不友好”、“在某些浏览器中无法访问”等等。

二是高校Web应用外观视觉效果的薄弱。校园Web应用包括了门户网站和各类信息化系统。其中，门户网站是高校对外宣传的重要窗口，优秀的门户网站设计有助于提升访问者的感官体验，塑造良好的学校形象，高校理应对其门户网站的前端效果设置较高的标准和要求。但事实上，许多高校门户网站的前端设计质量不佳，在色彩、图像、排版等方面的处理较为随意，使浏览者很难产生“美”的感觉。与门户网站所不同，各类信息化系统在视觉效果方面的要求并不高，但这也并不意味着这些系统能够完全忽视界面的视觉效果。当前许多高校信息化系统往往界面丑陋，或是过度修饰，饱受校园用户的诟病。

在高校新一轮信息化建设中，用户是否满意成为了评价信息化建设质量的重要标准。与此同时，Web前端作为提升用户满意度的关键手段之一，其重要性也越来越凸显。首先，Web前端工作有助于解决高校信息化系统中存在的各种现有问题。例如，高校信息化系统的一大痼疾是浏览器兼容性问题，系统常常只能在特定的浏览器中才能正常使用，这给用户带来了极大的不便。而通过前端技术则能够有效地解决兼容性问题，使得用户在使用大多数浏览器来查看网站或者系统时，能够保持统一的显示效果和可操作性。

其次，Web前端工作有助于改善用户体验，提升高校的信息化服务质量。例如，高校信息化系统的交互层面常常缺乏人性化的设计，导致用户学习成本较高，使用效率低下，而前端技术则能够使这些交互过程更加清晰、顺畅、友好，实现情感化的、富有人文关怀的人机交互。通过前端设计加以美化后的门户网站和信息化系统，则能够给予用户愉悦的视觉感受，提升应用的外观水准。

再之，Web前端工作还有助于高校开拓新的信息化服务领域。过去的高校信息化服务主战场是单一的PC客户端浏览器，时至今日，局面却大不相同，平板电脑、手机等新型移动设备层出不穷，对应的平台也纷繁复杂，此时高校迫切需要思考如何在新的终端领域，以新的形式为校园用户提供服务。Web前端开发无疑是高校目前应对这一问题的最佳的，甚至是唯一的解决方案。

目前，许多高校已经开始意识到前端工作对于校园Web应用的重要性，并开始反思过去信息化工作中对于Web前端的忽视。一个最好的证明就是高校的门户网站改版潮。在过去两年中，大批国内高校开始关注门户网站的宣传效果，纷纷对网站进行设计美化，实施大规模的改版，使网站的前端效果紧跟时代潮流。这一举动收获了令人意想不到的效果，当中国人民大学在其改版后的官网首页中登出一张“人大女神”照片后，引发了强烈的社会关注，其服务器甚至一度被挤爆。

然而，高校的Web前端之路却注定并不平坦，Web前端的相关工作很难被轻易驾驭。对于高校信息化建设而言，前端问题的复杂性甚至很可能远超过后端。摆在高校面前的棘手问题至少包括以下几点：

其一，比起后端技术，Web前端技术更新换代更快，框架更加多样化，成熟的技术方案更稀缺，且可借鉴并照搬复制的成功经验极少。如在前端界面方面，目前就有Bootstrap、Foundation、SemanticUI、Pure等不同的开发框架，在JavaScript函数库方面，则有jQuery、Dojo、YUI、Extjs、angular等框架。这些框架自身处于不断升级和更新的状态中，有的框架在经历一段时间的发展后便消亡了，而更多新的框架则如雨后春笋般出现。要紧跟技术发展的潮流，并能够在诸多可选项中选取合适的前端技术方案，是一件非常有难度的事情。

其二，浏览器的不断更新换代，移动设备的推陈出新，使得前端开发人员往往疲于应付。浏览器兼容性是前端开发中需要考虑的重要问题，但为数众多的IE浏览器历史版本，各式各样的语言标准，使得每解决一个兼容性问题都需要付出大量的时间和精力。此外，在移动互联网时代，要使得Web应用能够完美兼容笔记本、平板电脑、手机等参数各异的不同设备，开发人员也面临着巨大的挑战。

其三，除“IT外包”外，高校也需要在其信息化建设过程中组建一支属于自己的前端开发团队。然而，相较于后端开发者而言，优秀的前端开发者较为稀缺，高校要招募且留存其中水平较高的开发人员，其操作难度和投入程度无疑也较高。此外，高校还需要考虑如何创造适宜的学习工作环境，以实现前端开发团队中成员的个人可持续发展。

其四，对于校园用户而言，他们每天都会在互联网中接触到形形色色的Web应用，其中许多应用来自大型互联网公司，具有着较高的前端设计水准。这在无形中丰富了校园用户的前端交互经验，提升了用户的审美口味，并使得用户对于高校Web应用产生了更高的期许。高校要期望给予用户以“惊喜”的使用体验，除了需要紧跟时代潮流外，更重要的是要发展属于高校的个性化创意和思想，而这无疑也是前端工作中最难做好的一件事情。

华东师范大学的前端开发实践

近年来，华东师范大学在优化前端开发方面已经做出了大量尝试。较具代表性的是2012年的门户网站改版，在完成这一任务的过程中，我们将前端设计与开发放在了较为重要的位置，为站点制订了较高的外观和用户体验要求。

首先，在改版的策划阶段，我们没有采用将电脑版和移动版网站分开制作的方式，而是选择了使用响应式设计这一新兴的前端技术，通过HTML5与CSS的结合，并配合必要的JavaScript代码，实现门户网站在各种不同设备中的优化显示。我们设计了门户网站在不同分辨率设备中的显示效果，构思了网站中各种元素在不同情形下的排列、演变过程，并据此设计HTML页面结构，编写CSS响应规则。最终生成的前端主页能在各种PC、平板电脑和手机中实现自适应显示。

除使用响应式技术外，我们还在开发中加入了大量前端细节。例如为了使用户能够更好地获取门户网站首页中的公告信息，我们利用了HTML5的LocalStorage特性，将首页中的公告列表信息写入浏览器的本地存储中。当用户再次访问首页时，前端页面会将公告列表与本地存储中的列表进行比对，若存在新的公告，页面则会自动弹出提示框，提醒用户有未读的消息。当用户点击该提示框时，页面将直接显示未读的公告链接。这一功能使得用户无需点击展开公告栏目即可快速获得最新的公告资讯，且省去了通过后端进行开发的复杂流程和数据存储开支。

又如，在门户网站首页中存在一个名为“学术报告”的栏目，用于滚动显示近期的学术报告名称、时间和地点。为了便于校园用户能够更快捷地记录自己感兴趣的学术报告信息，我们加入了另一个有趣的前端细节，即通过前端页面的JavaScript生成一个添加Google日历的URL，在其中拼接学术报告的标题、起始和结束时间、地点等参数，并在页面中每个报告的右侧创建一个带有该链接的图标。当用户看到自己感兴趣的报告时，即可通过点击该图标，将这一讲座信息直接添加到自己的Google日程中，或者将该信息同步到用户的安卓移动设备上。

此外，我们还通过前端页面制作了视频与图片混合轮动的跑马灯效果，使得首页的焦点区域不仅只显示传统的大幅宣传图片轮播，而且还使得用户能够在其中观看视频，获得更加丰富的资讯和更深入的交互体验；通过记录用户过去在首页上的邮箱登录记录，在前端页面中为用户自动预先填入邮箱的用户名和后缀，以实现邮箱的一键快速登录；通过将文章内容中的图片代码进行提取，在前端页面中以图集的形式全屏轮动展示这些图片，以便于用户对图片的集中浏览，等等。经过前端人员的精心设计与开发，门户网站改版工作最终获得了绝大部分师生的好评，网站的访问量随之快速上升。学校也通过本次门户网站的前端改造塑造了良好的网络形象。

展望

在过去，Web前端设计与开发仅仅受到少数大型互联网公司的重视，而时至今日，Web前端也成为了高校信息化建设的新焦点。我们认为，高校应该针对Web前端采取更加积极主动的态度，投入更多的关注。当前Web前端主要包含了HTML、CSS和JavaScript三种技术，随着互联网的快速发展，Web前端的未来变数极大，新的技术可能会不断涌现，它也因此成为最有可能为高校信息化建设带来颠覆性变革的力量之一。

（作者单位为华东师范大学信息化办公室）