響應式《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