响应式《JAVA程序设计》专题学习网站的建设

随着“互联网+”概念的提出，在高职高专的计算机教学中，JAVA程序设计的学习越来越重要。考虑到目前学生使用的终端设备形式多样，屏幕分辨率千差万别，给出了响应式《JAVA程序设计》专题学习网站的设计与实现，使网站页面随浏览设备的不同而自行响应，方便学生随时随地进行学习。

【关键词】N响应式 JAVA 专题学习

1 引言

随着计算机应用领域的扩大和软、硬件的发展以及用人单位的不断需求，在高职高专的计算机教学中，程序设计语言的学习及应用越来越显示出其重要地位。JAVA语言以其平台无关、面向对象、分布式等特性，已经成为当前较为流行的编程语言之一。目前国内许多高职院校根据市场人才需求，已经将JAVA课程体系包括：JAVA程序设计、JSP/Servlet技术、JAVA EE架构技术，甚至Android开发引入教学中来。JAVA程序设计在整个专业人才培养的过程中起到承前启后的重要作用。

然而高职院校学生高考分数普遍不高，良好的学习习惯没有养成，学习计算机语言类课程有一定的难度，这要求我们不仅要转变教学观念、改进教学内容，还要变革教学手段。

随着互联网、移动互联网的兴旺，充分利用网络信息技术，创设数字化的学习环境，开发符合学科课程要求的学习资源、探究网络环境下的教学模式，搭建网络环境下的学习平台逐步成为教育改革的发展方向。专题学习网站作为网络化学习平台的一种新形式，顺应时代的潮流应运而生。

但由于目前学生使用的终端设备多种多样，屏幕的分辨率千差万别，我们不太可能为每种设备专门设计一套网站。在这样的环境下，设计并实现响应式的JAVA专题学习网站，使得网站页面随浏览设备的不同而自行响应，动态调整布局结构和元素的规格样式，将相同的内容以不同的布局呈现给不同终端的学生用户，可以方便学生随时随地进行学习。这对于促进高职院校教学改革的深化、提高高职院校教育质量有着较为深远的理论研究价值和较强的实践意义。

2 网站的设计

2.1 网站专题内容设计

对于JAVA程序设计，我们按照学生认知规律，采用分层法设计专题知识，层次间采用树型结构表示。我们把JAVA程序设计分为新手入门、基础学习、进阶应用、延伸探究三个专题层次，让学生循序渐进的进行学习。每个层次中，我们根据内容的需要，划分出了子专题层，子专题层由若干原子专题聚合而成，原子专题作为原子型对象（树型结构的叶节点）是粒度最小的。如果当前层次没有再划分出子专题层，则这个层次就是原子专题本身。

对于新手入门这个层级，我们划分了JAVA语言概述、搭建JAVA开发环境、开发第一个JAVA程序这样三个原子专题模块，让初学者通过这三个专题知识的学习，从零基础到初步了解 JAVA语言和平台，并能创建第一个JAVA程序，以提高他们的学习兴趣和动手能力。

对于基础学习这个层级，我们划分了JAVA语言编程基础、JAVA语言与面向对象和系统常用类三个专题。让初学者由浅入深，详细地了解JAVA语言的基本语法知识，初步掌握JAVA语言的编程思想和方法。

对于进阶应用这个层级，我们划分了JAVA语言的I/O操作、异常处理技术、线程处理技术、Applet小程序开发、图形用户界面开发、图形图像处理技术、多媒体技术、网络编程技术和数据库处理技术这样几个专题，使学生可以更深入地学习JAVA技术，从而能够编写有一定规模的应用程序。

对于延伸探究这个层级，我们划分了JavaBean和RMI、JSP和Servlet这两个专题，不仅涉及软件的复用性和Java的分布计算等能力，同时也让学生初步了解JAVA的一些应用领域，为将来进行实用性程序开发打下基础。

这一系列专题的设计，打破了一般普通教材章节限制，由浅入深、循序渐进的对JAVA相关的一系列知识进行重组。不仅可以辅助教师进行课堂教学，还可以很好的帮助学生通过自学，来探究JAVA的一系列知识，使学生尽快掌握JAVA编程思想和技巧。

2.2 响应式专题学习网站的组成

响应式专题学习网站是把专题学习网站采用响应式设计方法来实现的网站，所以本质上仍是一种专题学习网站，它也是指在互联网络环境下，围绕某门课程与多门课程密切相关的某一项或多项学习专题进行较为广泛深入研究的资源学习型网站。它应该包括一般专题学习网站的以下四个基本组成部分：

2.2.1 结构化知识展示

展示与学习专题相关的结构化知识，把课程学习内容相关的文本、图片、图像、动画等知识结构化重组。所用到的媒体可通过网络搜集，也可通开发者自行建设，按一定的教学策略进行分类，以合适的形式进行组织，并制作成生动的、有较强交互性的以网页形式呈现的网络课件。

2.2.2 拓展性学习资源

拓展性学习资源是结构化知识的补充和延伸，将与学习专题相关的扩展性的学习素材资源进行收集管理，包括结合学科特点的不同学习工具和相关资源网站的链接。其资源可以是“按规范开发的、与本专题相关并综合各学科知识的资源数据库，也可以是一些经过整理和分类的相关学科网页的集合，或者是指向互联网上相关资源网站或网页的超链接清单，也可以是一些搜索引擎工具等。师生在教学过程中发挥创造的内容也可以作为拓展资源存入资源库，供师生共享。

2.2.3 网上协商讨论空间

网上协商讨论空间实质上是一个可以为学习者创造协作、探索、交流的学习环境的平台，根据学习专题，构建网上协商讨论，答疑指导和远程讨论区域。专题学习网站可以提供Email、BBS、微信、QQ等网络通讯工具为师生提供同步和异步的交流。

2.2.4 网上自我评价系统

基于专题学习网站的学习情况评价依赖于网上评价系统的实现。网上评价系统收集了与学习专题相关的基础性强、覆盖面广、难度适宜的大量试题，让学习者能进行网上自我学习评价。

2.3 网站总体架构设计

响应式《Java程序设计》专题学习网站的设计原则是，紧紧围绕上面划分的Java专题知识和结合专题网站的基本组成部分，有机整合本门学科和相关学科的相关知识及相关多媒体学习资源，构建有助于学生自主、探究、协作学习的知识结构系统。

我们根据课程内容要求和学习者的特征，恰当地选择文本、图片、视频、课件等学习资源以及相关学科的相关内容，通过结构化的资源重组，构建符合逻辑的知识体系。我们根据协作学习的需要，建立了讨论交流论坛，为学习者开展协作、探索、交流活动创造学习环境，培养学生创新和团队合作的精神。我们根据专题学习目标，编制相应的评价内容，制作在线测试模块，方便学习者自我评价。

我们按照真实网站开发过程中构建专题知识内容，并将拓展性的学科知识和相关资源融入其中，基本形成了网站的总体架构框架，如图1所示。

3 网站的实现

本网站采用JSP/Servlet技术进行开发，开发和部署过程中用到的工具、框架，全部采用常用的开源软件。现将网站开发过程中的关键技术和工具介绍如下。

3.1 SSH框架

本网站在总体架构上，采用了非常成熟的SSH框架。SSH 为 Struts+Spring+Hibernate的一个集成框架，是目前较流行的一种Web应用程序开源框架。集成SSH框架的系统从职责上分为四层：表示层、业务逻辑层、数据持久层和域模块层（实体层），以帮助开发人员在短期内搭建结构清晰、可复用性好、维护方便的Web应用程序。其中使用Struts作为系统的整体基础架构，负责MVC的分离，在Struts框架的模型部分，控制业务跳转，利用Hibernate框架对持久层提供支持，Spring做管理，管理struts和hibernate。

采用上述开发模型，不仅实现了视图、控制器与模型的彻底分离，而且还实现了业务逻辑层与持久层的分离。这样无论前端如何变化，模型层只需很少的改动，并且数据库的变化也不会对前端有所影响，大大提高了系统的可复用性。而且由于不同层之间耦合度小，有利于团队成员并行工作，大大提高了开发效率。

3.2 MariaDB数据库

MariaDB是一个增强的MySQL替代品，是由原来 MySQL 的作者Michael Widenius创办的公司所开发的免费开源的数据库服务器。MariaDB采用 Maria存储引擎，与MySQL相比较，MariaDB具有更快的复制查询处理能力，运行速度更快，支持对Unicode的排序等很多优点。

3.3 Bootstrap框架

响应式网站前端框架的出现，提高了网站研发效率，极大减轻了网站开发和运维成本。在本响应式《JAVA程序设计》专题学习网站的开发中，采用了目前较为流行的Bootstrap3前端框架。

Bootstrap提供了优雅的HTML和CSS规范，它是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。Bootstrap的主要优势在于：

（1）Bootstrap是彻底的开源框架。

（2）坚持移动先行，支持响应式Web设计。

（3）涵盖了从布局到表单、按钮等网站前端设计的各个方面。

（4）全面支持HTML5和CSS3。

3.4 HTML5技术

HTML5的设计目的是为了在移动设备上支持多媒体。HTML5的新特性主要有：

（1）新增了语义化标签元素。

（2）良好的多媒体支持

（3）跨文档信息通信。

（4）客户端存储。

本网站的在线视频播放采用高压缩、低损坏的视频格式。开发中运用HTML5与内嵌播放器结合的视频播放方式，可以跨平台兼容现在的所有主流浏览器，解决了在线播放视频的兼容性问题。

4 网站效果测试

由于移动设备上的用户体验和桌面电脑差异很大，因此对响应式页面的测试具有非常重要的意义。

在开发过程中，我们采用Google Chrome的开发者工具（DevTools），其中有一个称作设备调试模式（device mode）的模块，它是一套专门用于调试和测试响应式页面的工具集。chrome的device mode不像其他的响应式页面测试工具仅仅简单地调整视区（viewport）大小，而是可以兼顾到模拟移动端的用户体验，特别是触屏手势交互，例如轻击（tap），滑动（swipe），而这一切都在网页浏览器里进行模拟。

但我们不得不承认，再好的测试工具也仅仅是模拟而已，网站最真实的效果还是要经过部署，真正使用才能看到。不过移动设备种类繁多，我们不可能对每一种设备都进行采购和测试。由于从平台角度看，在国内目前所有活跃的移动设备中，安卓平台设备占据主要地位，而智能手机是生活中最常见的智能移动终端。所以本文对所开发的响应式《JAVA程序设计》专题学习网站分别在PC端和Android手机端进行了测试。

4.1在PC端

在IE浏览器上，运行开发完成的网站，效果如图2所示。

4.2 在移动端

由于篇幅限制，我们不可能把网站中涉及的所有模块，如视频播放等一一为大家截图演示，所以针对上面PC端显示的主要模块，响应式《JAVA程序设计》专题学习网站在移动端的显示效果如图3、4、4所示。

5 结语

本文设计实现的响应式的JAVA专题学习网站，有效补充了高职院校教学中专题学习网站建设的不足，提供了一个丰富的适合学生自主探究和协作学习的资源库，构建了方便师生、生生之间同步或异步协作交流的平台。由于本网站是响应式网站，所以能使网站页面随浏览设备的不同而自行响应，动态调整布局结构和元素的规格样式，将相同的内容以不同的布局呈现给不同终端的学生用户，方便学生随时随地进行学习，从而使本网站充分发挥它在课程改革和网络化教学中的积极作用。

参考文献

[1]王咸伟.Java网络通信专题学习网站的设计与开发[J].中国教育信息化，2010（17）.

[2]张金鹏，张成远，季锡强.MariaDB原理与实现[M].北京：人民邮电出版社，2015.

[3]陈甫.Bootstrap3在Java Web项目中的应用[J].电脑编程技巧与维护，2014（17）.

[4] Ben Frain著，王永强译.响应式Web设计：HTML5和CSS3实战[M].北京：人民邮电出版社，2004.

作者简介

柳海燕（1982-），女，河北省张家口市人。现为苏州高博软件技术职业学院讲师。硕士学位。研究方向为软件开发、数据库设计。

作者单位

苏州高博软件技术职业学院 江苏省苏州市 215163