Web程序設計課程教學改革與實踐

李 亞，王 青

（ 1. 廣州大學 計算機與教育軟件學院，廣東 廣州510006；2. 中山大學 數據科學與計算機學院，廣東 廣州 510006）

Web程序設計課程教學改革與實踐

李 亞1，王 青2

（ 1. 廣州大學 計算機與教育軟件學院，廣東 廣州510006；2. 中山大學 數據科學與計算機學院，廣東 廣州 510006）

Web技術發展迅速，傳統的Web程序設計課程已經無法滿足時代要求。文章分析目前Web程序設計課程教學存在的主要問題，從教學內容、教學實踐、課程考評機制等多方面闡述課程改革的主要過程，并說明改革成果。

Web程序設計；瀏覽器編程；集體學習；JavaScript；PHP；Ajax

0 引 言

截至2016年12月，我國網站數量為482萬個，網民規模達7.31億，互聯網普及率達53.2%[1]。一方面，隨著互聯網技術不斷發展，Web應用不斷增加，Web編程在軟件產業中的比重越來越大，軟件產業對Web開發人員的需求量迅猛上升，作為Web開發人員基本專業課程的Web程序設計課程日益重要；另一方面，Web 2.0時代的Web應用更看重用戶體驗，用戶期望能夠通過瀏覽器及時高效地與Web應用交互，獲取需要的信息與服務，因此，現代Web更注重前端（客戶端）技術，如HTML、CSS、JavaScript、Ajax、RIA、JavaScript框架與類庫、Mashup等。了解Web重要性和掌握這些Web技術能夠加深學生對計算機科學與技術的理解，提高學生發現和解決問題的能力。

1 目前課程教學存在的問題

1.1 課程教學內容知識結構不合理

現有Web程序設計課程教學內容大部分仍然以服務器端技術為主，如ASP、ASP.NET、PHP、JSP等，少有前端技術，難以滿足現代Web應用的需要。少數院校以JavaScript為主要教學內容，但局限于JavaScript語言本身，沒有與其他技術結合起來形成一個完整的Web前端技術堆棧?？偟恼f來，現有Web程序設計課程已經不能滿足Web技術的發展，不能適應產業發展的需要，難以培養業界亟須的具備現代Web應用設計開發能力的軟件工程師。

1.2 教師主導的灌輸式教學方法陳舊

現代Web程序設計技術發展迅速且內容龐雜，傳統的教學方法和教學環境難以應對實際需求。Web專用的編程語言包括HTML、CSS、JavaScript、JSP、PHP、Servlet、ASP等，且幾乎所有的現代主流編程語言都支持Web編程，并有各自標準的Web框架，如J2EE、.NET ASP Framework、Django、Rails等，各種前端的Web JavaScript框架和類庫更是有如過江之鯽，不勝枚舉。傳統教學方法由教師驅動教學，教師通過課堂教學講解主要知識點，并結合實驗引導學生對所學內容進行鞏固練習，師生間的互動局限于課堂，學生之間缺少有效的集體討論與互相學習，學生碰到各種棘手難題時難以得到及時有效的幫助。

1.3 考核方式簡單、僵化

課程考核一般采用期末考試70%、平時表現30%的方式，這種考核方式輕實踐、重理論，輕過程、重結果，不能客觀、公平、全面地評價學生對課程知識的掌握程度，也不能激發學生的學習積極性[2]。Web技術實踐性強、工程化思想突出，課程要求學生應具備較強的實踐動手能力，課程考核應注重考查學生的平時成績和實際動手能力。

2 教學內容改革

現代Web以Ajax技術的問世為開端，強調Web應用的可用性和用戶體驗，Web應用的邏輯也由此分離出業務邏輯和表示邏輯，且表示邏輯逐漸從服務端遷移到瀏覽器端。瀏覽器不再是瘦客戶端(Thin Client)，客戶端技術（瀏覽器編程）也不再僅僅是用戶界面和交互設計，還具有程序設計的內容。當前Web技術的核心不再局限于服務端，而是客戶端和服務端并重，客戶端是服務端的基礎，服務端的所有技術都是為了輸出客戶端代碼，如果不能掌握和理解客戶端技術，就很難說真正理解服務端的代碼和技術，也難以真正高效使用。以客戶端技術為起點講授符合現代技術發展趨勢的Web程序設計技術；同時，通過Web技術引導學生思考計算機科學中的原理、規律、模式和最佳實踐，可以逐步培養學生科學規范的軟件開發習慣。

2.1 知識點構成

課程內容板塊間的關系與Web技術發展史的邏輯相對應，由淺入深、由易到難、由基礎技術到高級技術，知識點結構如圖1所示。

2.1.1 基礎知識

圖1 Web程序設計課程知識點結構

基礎知識講解基本的互聯網、Web知識和靜態頁面技術，包括HTML、CSS與簡單的Web界面設計，共6個課時。值得注意的是，靜態頁面技術已經取得較大發展，課程內容以現代靜態頁面技術為準，并結合技術演進，深入介紹技術發展及其背后的本質原因，如介紹頁面布局技術時，講解利用div和span進行無表格布局技術，通過和早期利用表格進行布局的技術對比，引導出軟件設計中重要的關注分離原則[3]。

2.1.2 服務器編程

該部分講解簡單的服務器編程，其目的在于實現簡單動態網頁，為瀏覽器編程提供技術基礎，共6個課時?，F代Web應用中，服務端程序有兩大功能：實現應用的業務邏輯和生成應用的表示層代碼，也就是客戶端和瀏覽器代碼，即HTML、CSS、JavaScript等。真正復雜的部分在于實現應用的業務邏輯，由于這些內容很多與Web并無直接關系，大多屬于分布式程序設計和企業應用設計的范疇，會在其他課程中講授，所以本課程弱化了這部分內容。本課程選用PHP作為服務器端語言，因為在眾多服務端編程語言中，PHP相對較為簡單易學，有助于學生快速掌握，把更多精力留給瀏覽器編程；重點講解如何編寫動態網頁程序，根據瀏覽器請求產生出不同的客戶端代碼返回，并重點強調對Web服務器和瀏覽器交互過程的理解。

2.1.3 瀏覽器編程

瀏覽器編程是課程的技術重心，共8個課時，著重講解JavaScript語言、DOM模型以及瀏覽器中網頁加載、渲染、交互的過程、原理和機制，并介紹prototype和script.aculo.us JavaScript工具箱。從技術上說，瀏覽器編程就是使用JavaScript編程語言操縱瀏覽器DOM對象?，F代Web程序設計中，瀏覽器編程從語言、框架、工具到范式都和以前的Web有著巨大差異。瀏覽器不再是瘦客戶端，而是承擔Web應用的表示邏輯，一系列原本在服務端使用的軟件技術都在瀏覽器端出現和使用，如面向對象技術、設計模式、測試驅動的開發、行為驅動的開發、構件化開發等。此外，瀏覽器編程還推動其他技術的發展，如聲明式程序設計、函數式程序設計等。該部分課程內容詳細講解這些技術在瀏覽器編程中的應用，引導學生熟練掌握現代Web瀏覽器編程的方法、過程和編程范式。

2.1.4 現代Web編程

現代Web編程是本課程的重點，共12個課時。在前面服務器編程和瀏覽器編程的基礎上，該部分內容較為全面地覆蓋了現代Web客戶端技術（如Ajax、RIA、Mashup、Web服務（客戶端）等），還對現代Web程序設計中的重點和難點問題進行深入分析（包括Cookie、SessionWeb程序安全）。此外，對于現代Web客戶端技術的最新發展和其他相關技術也做出介紹，如HTML 5、云計算、語義網、Web 3.0、現代Web應用中的軟件工程等。

2.1.5 公共基礎

公共基礎部分包括正則表達式和XML的內容，這兩種共性技術在多種技術中都有應用，因此將其穿插在服務器編程和瀏覽器編程中進行介紹。

2.2 實踐環節

實踐環節通過8次實驗、7次程序設計作業和1個課程設計，對教學知識點內容進行全方位的鞏固加強，提高學生的實際動手能力。

2.2.1 實 驗

8次實驗總共16學時，每兩周一次，實驗內容與教學內容緊密結合，由淺入深。實驗1是基礎HTML和CSS，包括基本的HTML標簽和CSS屬性（顏色、字體、文本等）的使用；實驗2是 CSS設計和布局，使用CSS進行無表化布局；實驗3是基本的PHP使用，練習基本的PHP語法和文件讀寫；實驗4是表單和PHP，使用PHP處理HTML表單；實驗5 是基于JavaScript的交互式用戶界面，包括基本的JavaScript語法和簡單JavaScript事件處理器；實驗6是 JavaScript DOM和事件，綜合使用HTML、JavaScript和CSS進行非侵入式客戶端編程；實驗7是基本的Ajax編程；實驗8是旅行日志，實現多來源文本、地圖與圖片信息的聚合。

2.2.2 程序設計作業

作業大致每2周一次，要求學生課后獨立完成，其工作量和難度均超過實驗。布置作業的目的在于深化和鞏固所學知識，將課程知識進一步轉化為“活”的知識。作業1是菜譜制作，用簡單的靜態網頁展示菜譜信息，要有CSS修飾；作業2是電影評論靜態網頁，實現帶有復雜布局的靜態網頁；作業3是電影評論動態網頁，將作業2中的網頁變成動態網頁，要求用PHP讀寫文件；作業4是速配網站，用PHP處理HTML表單；作業5是ASCII字符動畫，用簡單JavaScript編程實現；作業6是拼圖游戲，用JavaScript操縱DOM實現；作業7是備忘錄，通過Ajax消費Web服務。

2.2.3 課程設計

為了讓學生能對各章節知識點和技術實現融會貫通，筆者在課程后半學期安排課程設計，要求學生開發一個完整的學生作業管理系統。課程設計有9項必選的核心需求和3項可選的擴展需求，并且鼓勵學生創新，自行添加新的合理需求。課程設計引導學生綜合利用各種Web技術，完成真實的Web 2.0應用，幫助他們進一步梳理和鞏固所學知識和技術。

3 教學實踐探索

課程教學中以案例為驅動，同時結合實驗、作業及課程設計，著重培養學生的動手實踐能力。讓學生通過實踐掌握和理解課程知識點，并加以融會貫通，學到“活”的知識。此外，課程基于自組織學習理論[4]和Learning 2.0技術[5]，設計課程教學環境，構建教學基礎設施。

3.1 案例驅動式教學

課程中各部分內容都結合相應案例進行教學。首先通過案例提出問題，然后引導學生思索解決方案，再進一步引出具體的Web技術。課程使用一個貫穿始終的案例，其發展路線如圖2所示。

3.2 配置教學基礎設施

課程教學特別重視自組織學習與集體學習，筆者利用現代Web技術建設教學基礎設施，并在此基礎上實施用戶創造內容、集體學習、反饋控制、可視化數據呈現等Learning 2.0的最佳實踐。

3.2.1 教學基礎設施

課程基礎設施由Wiki、自主開發的作業管理系統——MyWeb 2.0、服務端課程作業項目管理與運行環境等工具和應用組成。Wiki是知識管理工具，不僅匯集課程教材、幻燈片講義、在線講義、實驗規格說明、作業規格說明和課程設計規格說明，還包括師生對這些內容的討論等協同創造的內容。MyWeb 2.0是自主開發的開源作業管理系統，學生可以提交和管理自己的作業（項目），并用可視化技術展示課程成果。服務端課程作業項目管理與運行環境包括FTP服務器、Subversion版本管理服務器和Apache Web服務器（含PHP運行環境），用以管理學生作業源代碼與測試部署學生作業。

3.2.2 用戶創造內容

課程內容不僅來源于任課教師，師生對課程內容的討論結果也會匯集到相關知識點所在的Wiki頁面，形成新的教學內容，使得課程內容在教學中不斷完善、與時俱進。用戶創造內容還能調動學生主動參與課程、參與集體學習的積極性。此外，Wiki和用戶創造內容本身就是Web 2.0技術的應用之一，對技術應用的親身體會更能激發學生學習的興趣。

3.2.3 集體學習

圖2 教學案例路線圖

得益于課程基礎設計提供的便捷溝通方式和知識分享渠道，課程學習過程中的拓撲結構不再是以教師為中心的星型，而是由學生、助教和老師共同構成的網狀。學生補充并創造大量的課程內容，還通過教學基礎設施提供的平臺，快捷高效地互相學習、互相幫助。如學生在完成作業時遇到難題不能解決時，就可以在該作業所在的Wiki頁面上提問，其他已經知道解決方案的學生可以為其解答。這種及時溝通的方式，快速有效地解決了學生在學習和編程實踐中遇到的技術細節問題，形成集體學習的氛圍。這種基于Wiki的集體學習還有兩大優勢：①明確的上下文，使得對話精煉高效，如上述問答本身就在發現問題的作業頁面上，所以不用額外描述問題產生的場景，使得表達精煉、清晰、高效；②討論結果成為課程內容的補充，能夠在所有學習者之間共享，這樣附著于相應課程內容的討論，不僅為學生提供集體學習和快速解決問題的途徑，更能補充豐富當前Wiki頁面的內容，能夠為所有學生借鑒參考。

3.3 改革考核機制

課程考核是對學生學習行為、過程和成果是否達到既定的課程學習目標進行測評與度量，是學生學習效果最直接的反映。目前，多數高校仍側重于期末考試這一終結性評價方式，這種評價方式重結果、輕過程，容易造成臨時抱佛腳、突擊學習應付考試等不良現象[6]。對此，我們引入形成性評價方法，注重學生平時實驗和作業的表現，及時給出階段性成績，幫助學生養成良好的學習習慣，逐步形成為提高能力而學的主動學習態度；重視學生反饋，持續收集學生對課程內容、教學進度、教學方法、作業安排、實驗難度等多方面的反饋意見，并在每周的教學內容中有針對性地及時做出調整。

Web程序設計的課程考核分階段、多元化進行，注重平時成績，注重實際動手能力。課程考核分為5部分：理論課參與、實驗課參與、平時作業、課程設計和期末考試，其權重分別是0.05、0.05、0.3、0.2和0.4。平時作業的成績是7次作業成績的綜合，學生通過MyWeb 2.0作業管理系統上傳作業，由MyWeb 2.0檢查及部署，以可視化的方式展示學生歷次作業的運行截圖、分數和小組排名/全班排名，并給出作業源碼和在線運行實例的鏈接。此外，MyWeb 2.0還用折線圖的方式表示學生歷次作業的分數與排名情況的變化。通過這種方式，學生的學習成果和學習成長經歷不再是枯燥的代碼和冷冰冰的數字，而是形象的可交互的圖表和應用。這樣的管理評價方式能促使學生更加關注學習的過程，調動學生學習的積極性，使其從被動地“要我學”變成主動地“我要學”，最終促進教學質量的提高。

4 結 語

經過教學內容、授課方式、考評機制等方面的變革和探索，課程在教學實踐中取得良好的教學效果。學生普遍喜愛該課程，積極主動地參與教學活動，認真完成實驗、作業、課程設計等實踐任務，其中有不少作品體現出較高地Web編程水平，期末考試和課程總評成績顯示大部分學生達到課程教學大綱的要求，較好地掌握了現代Web前端程序設計的基本知識和技能。今后筆者在完善課程內容的同時，還將從以下兩方面積極探索：①在課程建設和教學實踐中加強與產業界聯系，及時獲取來自產業界的技術發展信息；②探索課程和人工智能技術的契合點，提高課程的學術深度。

[1] 中國互聯網絡信息中心(CNNIC). 第39次中國互聯網絡發展狀況統計報告[EB/OL].（2017-01-22）[2017-06-23]. http://www.cnnic.cn/gywm/xwzx/rdxw/20172017/201701/t20170122_66448.htm.

[2] 儲久良. Web前端開發技術課程教學改革與實踐[J]. 計算機教育, 2014(14): 12-15.

[3] Wikipedia. Separation of Concerns[EB/OL]. [2017-6-26]. https://en.wikipedia.org/wiki/Separation_of_concerns.

[4] Thomas L, Harri-Augstein E. Augstein：Self-organised learning: Foundations of a conversational science for psychology[M].Oxford: Routledge, 1985.

[5] 杜世純, 傅澤田. 混合式學習探究[J]. 中國高教研究, 2016(10): 52-55.

[6] 曹國剛, 藍星, 李文舉, 等. 形成性評價在軟件工程專業課程中的實踐研究[J]. 計算機教育, 2017(6): 40-44.

1672-5913(2017)11-0065-05

G642

李亞，女，講師，研究方向為計算機視覺、模式識別，liya@gzhu.edu.cn；

王青（通信作者），男，副教授，研究方向為人機交互、機器學習，wangq79@mail.sysu.edu.cn。

（編輯：史志偉）