基于CDIO的網(wǎng)頁制作基礎(chǔ)及HTML課程教學(xué)改革實踐

劉田田

摘 要： 提出基于CDIO理念的網(wǎng)頁制作基礎(chǔ)及HTML教學(xué)改革新實踐。以問題為先導(dǎo)，激發(fā)學(xué)生對HTML課程的好奇心和興趣；同時以項目為驅(qū)動，圍繞具體APP實例進(jìn)行展開；以應(yīng)用為目標(biāo)，將教學(xué)與實際任務(wù)結(jié)合，讓學(xué)生學(xué)中做、做中學(xué)。教學(xué)實踐及學(xué)生評價表明，基于CDIO理念的HTML課程改革實踐能夠有效激發(fā)學(xué)生的學(xué)習(xí)興趣，使其自主性和創(chuàng)造性得到提高。

關(guān)鍵詞： HTML； APP開發(fā)； 教學(xué)改革； CDIO工程教育

中圖分類號：G642.0 文獻(xiàn)標(biāo)志碼：A 文章編號：1006-8228（2018）11-81-03

Abstract： This paper puts forward a new teaching practice of Web page making basics and HTML based on CDIO， which uses questions as a guide to stimulate students' curiosity and interest in HTML courses， uses the specific project APP instance to carry out the teaching， and with the goal of application， combines teaching with practical tasks to make learning and operation integrated. Teaching practice and student evaluation show that the teaching reform for HTML courses based on the CDIO concept can effectively stimulate students interest in learning and improve their autonomy and creativity.

Key words： HTML； APP development； teaching reform； CDIO engineering education

0 引言

現(xiàn)代教育的目標(biāo)是培養(yǎng)求知者發(fā)現(xiàn)、分析與解決問題的綜合能力，而隨著經(jīng)濟(jì)的快速發(fā)展，應(yīng)用型和技能型人才成為目前用人單位急缺的資源，作為培養(yǎng)應(yīng)用型和技能型人才的高職教育日益受到重視。高職教育注重人才素質(zhì)與職業(yè)綜合能力的培養(yǎng)，為用人單位輸送具備一線生產(chǎn)與管理、技術(shù)與服務(wù)的“應(yīng)用型”人才。網(wǎng)頁制作基礎(chǔ)及HTML是軟件技術(shù)專業(yè)的一門專業(yè)基礎(chǔ)課，具有很強(qiáng)的實踐性。通過學(xué)習(xí)該課程，使學(xué)生掌握HTML5、CSS和JS技術(shù)，為學(xué)生今后學(xué)習(xí)開發(fā)各種類型的APP打下基礎(chǔ)。

CDIO[1-3]，即Conceive（構(gòu)思）、Design（設(shè)計）、Implement（實現(xiàn)）和Operate（運(yùn)作）四個單詞的首字母縮寫。CDIO工程教學(xué)模式以產(chǎn)品研發(fā)到產(chǎn)品運(yùn)行的生命周期為載體，讓學(xué)生以主動的、實踐的、課程之間有機(jī)聯(lián)系的方式學(xué)習(xí)工程。旨在培養(yǎng)學(xué)生扎實的理論功底、專業(yè)技能、團(tuán)隊合作和人際交往技能。

本文首先對網(wǎng)頁制作基礎(chǔ)及HTML課程現(xiàn)狀和當(dāng)前技術(shù)現(xiàn)狀進(jìn)行闡述分析，接著針對課程特點(diǎn)，結(jié)合CDIO工程教育理念，對該課程教學(xué)改革提出新的課程實施步驟。

1 網(wǎng)頁制作基礎(chǔ)及HTML課程傳統(tǒng)教學(xué)現(xiàn)狀

網(wǎng)頁制作基礎(chǔ)課程包括HTML5、CSS和JS三個方面的知識點(diǎn)，是理論與實踐并重的課程，如果在教學(xué)過程中繼續(xù)使用傳統(tǒng)的教學(xué)模式，就極易造成重理論而輕實踐的結(jié)果[4]。我們以“網(wǎng)頁制作基礎(chǔ)及HTML”課程為例，分析課程存在的主要問題。

一是教學(xué)目標(biāo)設(shè)定，傳統(tǒng)課程的學(xué)習(xí)目標(biāo)列舉教授的知識點(diǎn)、學(xué)生應(yīng)掌握的知識點(diǎn)，這種教學(xué)目標(biāo)僅僅完成了最基本的知識灌輸，不利于學(xué)生能力的培養(yǎng)。此外，對于職業(yè)院校的學(xué)生而言，知識的理解是基礎(chǔ)，達(dá)到靈活的應(yīng)用并且提高項目能力才是最終目標(biāo)。

二是傳授方法，教師在教學(xué)中要避免只單純地傳授知識或單純地訓(xùn)練學(xué)生的某種技能，教師須在教學(xué)過程中培養(yǎng)學(xué)生的專業(yè)知識能力、個人能力、人際交往能力以及創(chuàng)造能力[5]。

三是考核評估方法，傳統(tǒng)的基于考試的評估方法把學(xué)生的注意力偏隅在課程的理論知識和局部技巧上，使學(xué)生對所學(xué)知識無法形成完整的認(rèn)知，也不能靈活應(yīng)用，對實際項目沒有系統(tǒng)的分析能力和開發(fā)/編程能力。當(dāng)遇到大型復(fù)雜的軟件項目時，往往不能快速有效地構(gòu)思、設(shè)計、實現(xiàn)與運(yùn)行[6]。

2 基于CDIO的網(wǎng)頁制作基礎(chǔ)及HTML課程教學(xué)改革實踐步驟

基于課程教學(xué)現(xiàn)狀和存在的問題，本文將CDIO工程教育模式應(yīng)用到HTML課程[7]的改革中，以具體APP開發(fā)項目為驅(qū)動，貫徹CDIO的核心精神，形成“應(yīng)用為目標(biāo)、理論作工具，教師主導(dǎo)、學(xué)生主體”的基于CDIO的項目式驅(qū)動教學(xué)/學(xué)習(xí)方法。

2.1 教學(xué)目標(biāo)設(shè)定

通過本課程的學(xué)習(xí)，使學(xué)生了解H5 APP的基本概念，學(xué)會開發(fā)APP前端頁面與后端服務(wù)，能夠生成安卓或蘋果的安裝包，并進(jìn)行云部署發(fā)布產(chǎn)品。培養(yǎng)學(xué)生掌握頁面組件的基本用法，掌握APP調(diào)用手機(jī)硬件的方法，以及訓(xùn)練界面設(shè)計實現(xiàn)能力，為今后學(xué)習(xí)開發(fā)移動端應(yīng)用打下扎實基礎(chǔ)。

依據(jù)課程標(biāo)準(zhǔn)，先通過簡單APP示例（如hello world、掃一掃）了解WeX5開發(fā)H5 APP的過程及所使用的，再以仿微店APP開發(fā)為主線，貫穿整個教學(xué)過程，在逐步完成各章節(jié)同步訓(xùn)練的過程中，以“層層遞進(jìn)”的方式完成一個H5 APP的開發(fā)，從而讓學(xué)生在實踐中掌握知識、技能和素質(zhì)目標(biāo)。

2.2 教學(xué)方式選擇

課堂教學(xué)采用“教、學(xué)、做”一體化方式，以項目開發(fā)過程引導(dǎo)學(xué)生學(xué)習(xí)基本知識，通過動手實踐，讓學(xué)生掌握H5 APP開發(fā)的知識以及操作技能?！耙惑w化”是CDIO工程教育的核心，將理論與實踐、知識與能力間互相結(jié)合，通過集成化的教學(xué)過程，把專業(yè)知識與工程項目融合在一起，教學(xué)過程以學(xué)生動手實踐為主，配合教師示范和檢查作用，用一系列綜合和拓展實訓(xùn)來培養(yǎng)學(xué)生的技術(shù)應(yīng)用能力和創(chuàng)新能力。

采用“項目驅(qū)動”、“問題牽引”和“多重循環(huán)”等教學(xué)方法，課程首先通過具體實現(xiàn)“掃描二維碼的實現(xiàn)原理”來了解基于WeX5工具開發(fā)H5 APP的過程及方法，再以仿微店APP的開發(fā)為主線，貫穿整個教學(xué)過程。在逐步完成同步訓(xùn)練后，以“層層遞進(jìn)”的方式完成H5 APP的開發(fā)，從而讓學(xué)生在實踐中掌握知識和技能。最后以一個完整“記賬APP”的實訓(xùn)項目，深化學(xué)生對知識的掌握，培養(yǎng)學(xué)生團(tuán)隊協(xié)作、解決實際問題的能力。

教師在舉例示范時，不僅要展示問題的解決方案，更要體現(xiàn)問題的分析過程，啟發(fā)學(xué)生思考。在課堂上，學(xué)生分為幾個學(xué)習(xí)小組，啟發(fā)各個小組針對同一問題，思考不同的解決方案。通過小組代表闡述解決問題方案，激發(fā)小組成員間的良性競爭意識，激勵學(xué)生主動參與課堂教學(xué)，更好的促進(jìn)知識的吸收與轉(zhuǎn)化。整個課堂教學(xué)在機(jī)房進(jìn)行，學(xué)生人手一臺計算機(jī)，在真實環(huán)境中進(jìn)行學(xué)習(xí)和訓(xùn)練。教師機(jī)和學(xué)生機(jī)安裝多媒體教學(xué)軟件，以便進(jìn)行廣播教學(xué)、學(xué)生作品展示、提問和作業(yè)提交。

2.3 教學(xué)評價方式

基于CDIO工程模式的HTML課程改革中采用“過程評價+結(jié)果評價”的形成性考核方式，總評成績由形成性考核的各項成績組成。分?jǐn)?shù)比例為：20%綜合素質(zhì)評價（平時表現(xiàn)+通用能力考核）、40%過程考核（課堂實踐+課后實踐+操作實踐）、40%終結(jié)考核（項目實戰(zhàn)）。其中，綜合素質(zhì)評價又從出勤情況、學(xué)習(xí)態(tài)度、學(xué)習(xí)表現(xiàn)和通用能力四個方面來考核；過程考核包括課堂及課后實踐操作；終結(jié)考核由一個完整實訓(xùn)項目評定。此外，還引入了“組間互評+組內(nèi)自評+教師評價”的多元化評價機(jī)制，培養(yǎng)學(xué)生的批判性思維，同時又可以防止學(xué)生在項目完成過程中 “搭順風(fēng)車”的現(xiàn)象，起到相互監(jiān)督的效果。

3 教學(xué)效果

為了獲取該課程改革實踐教學(xué)效果，在課程結(jié)束后利用網(wǎng)絡(luò)評價教學(xué)平臺對軟件技術(shù)專業(yè)16級2個班共65名學(xué)生進(jìn)行了匿名問卷調(diào)查。學(xué)生分別從教學(xué)內(nèi)容、教學(xué)形式、實踐環(huán)節(jié)、考核方式和教學(xué)效果等五個方面對課程進(jìn)行評價，結(jié)果顯示：超過95%的學(xué)生對教學(xué)內(nèi)容和教學(xué)形式安排表示滿意；98.8%的學(xué)生認(rèn)為課程考核內(nèi)容和方式安排合理，能夠真實客觀體現(xiàn)學(xué)生的學(xué)業(yè)水平；兩個教學(xué)班級綜合滿意度分別達(dá)到99.09%和98.37%。在課程進(jìn)行中，學(xué)生保持高的出勤率；設(shè)置提問環(huán)節(jié)學(xué)生有積極的反饋，課程活躍度高；實踐操作環(huán)節(jié)大部分學(xué)生能夠根據(jù)教師的講解和演示完成相應(yīng)訓(xùn)練項目。課后問卷調(diào)查也反映出課程改革實踐充分調(diào)動了學(xué)生的學(xué)習(xí)積極性，促進(jìn)了學(xué)生與教師、學(xué)生之間的交流，提升了學(xué)生知識的應(yīng)用能力和小組成員間協(xié)作能力。

學(xué)生通過在項目教學(xué)過程中的深度參與，實現(xiàn)了從傳統(tǒng)的“看中學(xué)”、“教中學(xué)”向“教、學(xué)、做”一體化的轉(zhuǎn)變，并在這一過程中，潛移默化地提升了學(xué)生的工程實踐技能。以項目為引導(dǎo)，將團(tuán)隊教育貫穿在整個項目的頁面設(shè)計、CSS樣式修改以及JS動作實現(xiàn)的過程中。并通過小組互評激發(fā)學(xué)生的評判性思維，通過組員互助互動培養(yǎng)學(xué)生的合作意識，通過分工協(xié)作增強(qiáng)學(xué)生的責(zé)任感。教學(xué)實踐證明，基于 CDIO 的HTML課程教學(xué)改革能夠很好地提高學(xué)生的自主學(xué)習(xí)能力、團(tuán)隊合作能力、創(chuàng)新意識和工程應(yīng)用能力，促進(jìn)學(xué)生“知識、能力素質(zhì)”的協(xié)調(diào)發(fā)展。

4 結(jié)束語

網(wǎng)頁制作基礎(chǔ)及HTML課程是一門實踐性很強(qiáng)的計算機(jī)專業(yè)基礎(chǔ)課程，將CDIO工程教育的理念和方法應(yīng)用到該課程中，提高了學(xué)生的自主學(xué)習(xí)能力與工程實踐能力，使學(xué)生在實踐中掌握知識、技能和素質(zhì)目標(biāo)。而由于教學(xué)方法的改變，使得任課教師需要花費(fèi)更多的精力進(jìn)行備課和教學(xué)設(shè)計，這就要求教師在后續(xù)課程教學(xué)中加以調(diào)整和改進(jìn)。

參考文獻(xiàn)（References）：

[1] 顧佩華，包能勝，康全禮，陸小華，熊光晶，林鵬，陳嚴(yán).CDIO在中國（上）[J].高等工程教育研究，2012.3：24-40

[2] 顧佩華，包能勝，康全禮，陸小華，熊光晶，林鵬，陳嚴(yán).CDIO在中國（下）[J].高等工程教育研究，2012.5：34-45

[3] 顧佩華，胡文龍，陸小華，包能勝，林鵬.從CDIO在中國到中國的CDIO：發(fā)展路徑、產(chǎn)生的影響及其原因研究[J].高等工程教育研究，2017.1：24-43

[4] 閆寧，宋瑩，楊永光.高職院校教改項目存在的問題及其對策研究[J].中國職業(yè)技術(shù)教育，2017.3：80-84

[5] 康全禮，丁飛己.中國CDIO工程教育模式研究的回顧與反思[J].高等工程教育研究，2016.4：40-46

[6] 姜大志，孫浩軍.基于CDIO的主動式項目驅(qū)動學(xué)習(xí)方法研究——以Java類課程教學(xué)改革為例[J].高等工程教育研究，2012.4：159-164

[7] 馬科.HTML5 APP商業(yè)開發(fā)實戰(zhàn)教程：基于We X5可視化開發(fā)平臺[M].高等教育出版社，2016.