李 亞，王 青

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

Web程序設(shè)計課程教學改革與實踐

李 亞1，王 青2

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

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

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

0 引 言

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

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

1.1 課程教學內(nèi)容知識結(jié)構(gòu)不合理

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

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

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

1.3 考核方式簡單、僵化

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

2 教學內(nèi)容改革

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

2.1 知識點構(gòu)成

課程內(nèi)容板塊間的關(guān)系與Web技術(shù)發(fā)展史的邏輯相對應(yīng)，由淺入深、由易到難、由基礎(chǔ)技術(shù)到高級技術(shù)，知識點結(jié)構(gòu)如圖1所示。

2.1.1 基礎(chǔ)知識

圖1 Web程序設(shè)計課程知識點結(jié)構(gòu)

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

2.1.2 服務(wù)器編程

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

2.1.3 瀏覽器編程

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

2.1.4 現(xiàn)代Web編程

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

2.1.5 公共基礎(chǔ)

公共基礎(chǔ)部分包括正則表達式和XML的內(nèi)容，這兩種共性技術(shù)在多種技術(shù)中都有應(yīng)用，因此將其穿插在服務(wù)器編程和瀏覽器編程中進行介紹。

2.2 實踐環(huán)節(jié)

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

2.2.1 實 驗

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

2.2.2 程序設(shè)計作業(yè)

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

2.2.3 課程設(shè)計

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

3 教學實踐探索

課程教學中以案例為驅(qū)動，同時結(jié)合實驗、作業(yè)及課程設(shè)計，著重培養(yǎng)學生的動手實踐能力。讓學生通過實踐掌握和理解課程知識點，并加以融會貫通，學到“活”的知識。此外，課程基于自組織學習理論[4]和Learning 2.0技術(shù)[5]，設(shè)計課程教學環(huán)境，構(gòu)建教學基礎(chǔ)設(shè)施。

3.1 案例驅(qū)動式教學

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

3.2 配置教學基礎(chǔ)設(shè)施

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

3.2.1 教學基礎(chǔ)設(shè)施

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

3.2.2 用戶創(chuàng)造內(nèi)容

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

3.2.3 集體學習

圖2 教學案例路線圖

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

3.3 改革考核機制

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

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

4 結(jié) 語

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

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

[2] 儲久良. Web前端開發(fā)技術(shù)課程教學改革與實踐[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] 曹國剛, 藍星, 李文舉, 等. 形成性評價在軟件工程專業(yè)課程中的實踐研究[J]. 計算機教育, 2017(6): 40-44.

1672-5913(2017)11-0065-05

G642

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

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

（編輯：史志偉）