“Web前端開發(fā)技術(shù)”課程微課設(shè)計(jì)研究

孟瑤 葛玉潔 王康 馬雨琪

摘 要： 作為一種新型的教學(xué)模式和學(xué)習(xí)方法，微課已經(jīng)成為了國(guó)內(nèi)外信息技術(shù)教學(xué)改革的熱點(diǎn)。微課彌補(bǔ)了傳統(tǒng)課堂教學(xué)的缺陷，為其提供了一定的支撐和輔助。文章介紹了微課教學(xué)的概念和特點(diǎn)，以計(jì)算機(jī)專業(yè)的“Web前端開發(fā)技術(shù)”課程為例，分析了該課程的性質(zhì)、教學(xué)內(nèi)容和教學(xué)難點(diǎn)，并闡述了圍繞該課程中表格這一知識(shí)點(diǎn)所設(shè)計(jì)和制作的視頻及其應(yīng)用，為提高該類課程的教學(xué)質(zhì)量和效果提供了參考。

關(guān)鍵詞： 微課； Web前端開發(fā)技術(shù)； 高等教育； 教學(xué)改革

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2019）03-82-03

Study on micro-lecture design for the "Web Front-End Developing Technology" course

Meng Yao， Ge Yujie， Wang Kang， Ma Yuqi

（School of Information Engineering， Eastern Liaoning University， Dandong， Liaoning 118000， China）

Abstract： As a new teaching mode and learning method， micro-lectures have become a popular educational reform field of information technology at home and abroad. Micro-lecture makes up for the defect of traditional classroom teaching and provides support and assistance in the conduction of traditional classroom instruction. This paper introduces the concept and characteristics of micro-lecture， analyzes the nature， content and teaching difficulties of "Web Front-End Developing Technology"， and explains the design， production and application of micro-lecture around the knowledge point of table in this course， which provides a reference for improving the teaching quality and effect in such courses.

Key words： micro-lecture； Web front-end developing technology； higher education； educational reform

0 引言

隨著信息技術(shù)的發(fā)展，學(xué)習(xí)方式的改變，創(chuàng)新成為教育的常態(tài)，而微課（Micro-Lecture）正是該趨勢(shì)的產(chǎn)物之一[1]。本文介紹了微課的概念與特點(diǎn)，分析了高等教育中計(jì)算機(jī)專業(yè)的“Web前端開發(fā)技術(shù)”課程的特點(diǎn)、內(nèi)容以及傳統(tǒng)教學(xué)存在的問(wèn)題，并以該課程中的表格知識(shí)點(diǎn)為例，探討微課的設(shè)計(jì)、制作和應(yīng)用過(guò)程。

1 微課教學(xué)

2008年美國(guó)新墨西哥州圣胡安學(xué)院的高級(jí)教學(xué)設(shè)計(jì)師David Penrose提出了現(xiàn)今流行的微課程概念，他把微課稱為“知識(shí)脈沖”，認(rèn)為微型的“知識(shí)脈沖”只要在相應(yīng)的作業(yè)與討論的支持下，就能夠與傳統(tǒng)的長(zhǎng)時(shí)間授課一樣取得相同的效果[2]。微課一般是以視頻為載體，記錄在教學(xué)過(guò)程中的某個(gè)學(xué)科知識(shí)點(diǎn)（如難點(diǎn)、重點(diǎn)、疑點(diǎn)等），或圍繞某個(gè)環(huán)節(jié)開展教學(xué)互動(dòng)（如學(xué)習(xí)活動(dòng)、主題、實(shí)驗(yàn)、任務(wù)等）[3]。微課具有時(shí)間短、內(nèi)容精、資源多等特點(diǎn)，支持移動(dòng)學(xué)習(xí)、碎片學(xué)習(xí)、泛在學(xué)習(xí)等多種學(xué)習(xí)方式，特別適合解決現(xiàn)代生活節(jié)奏快、干擾多、信息而帶來(lái)的影響學(xué)習(xí)持久性的缺陷。這種新的學(xué)習(xí)體驗(yàn)大大提高了學(xué)習(xí)者學(xué)習(xí)的興趣和積極性[4]。

2 微課在Web前端開發(fā)技術(shù)課程教學(xué)中的應(yīng)用

本節(jié)介紹了Web前端開發(fā)技術(shù)課程的教學(xué)內(nèi)容與特點(diǎn)，以及微課在該課程中的設(shè)計(jì)、實(shí)施與應(yīng)用。

2.1 課程性質(zhì)

本文討論的Web前端開發(fā)技術(shù)課程是信息管理與信息系統(tǒng)專業(yè)的一門專業(yè)主干課程，是一門實(shí)用性較強(qiáng)的實(shí)踐類課程，是為滿足企業(yè)對(duì)前端開發(fā)工程師知識(shí)技能的需求而設(shè)置的。該課程圍繞HTML、CSS、JavaScript語(yǔ)言以及前端框架展開教學(xué)，市場(chǎng)需求量大，就業(yè)前景樂(lè)觀。課程內(nèi)容包括：前端開發(fā)技術(shù)的發(fā)展歷程及關(guān)鍵技術(shù)；主流前端開發(fā)工具的功能和使用，頁(yè)面的運(yùn)行和調(diào)試方法；前端頁(yè)面內(nèi)容與樣式制作的基本方法和技巧；前端腳本語(yǔ)言的原理和應(yīng)用；主流的前端開源框架的使用；前端頁(yè)面的綜合設(shè)計(jì)。

該課程以實(shí)際案例為中心，旨在使學(xué)生掌握Web網(wǎng)頁(yè)的前端制作技術(shù)及相關(guān)軟件的使用，掌握網(wǎng)頁(yè)前端制作的基本方法和技巧，培養(yǎng)網(wǎng)頁(yè)前端頁(yè)面設(shè)計(jì)與實(shí)現(xiàn)的基本能力，具備根據(jù)實(shí)際需求開發(fā)一定規(guī)模的靜態(tài)網(wǎng)站的能力。該門課程的教學(xué)為后續(xù)動(dòng)態(tài)網(wǎng)站開發(fā)類課程的學(xué)習(xí)提供了必要的基礎(chǔ)，同時(shí)也為學(xué)生畢業(yè)后從事前端開發(fā)工程師等相關(guān)工作奠定扎實(shí)的理論及實(shí)踐基礎(chǔ)。

2.2 設(shè)計(jì)與實(shí)施

Web前端開發(fā)技術(shù)課程的內(nèi)容繁多復(fù)雜，涵蓋HTML5、CSS3、JavaScript這三個(gè)核心，以及圍繞這三個(gè)核心而開發(fā)出來(lái)的大量技術(shù)框架和解決方案。此外，學(xué)生還需要了解主流瀏覽器的兼容性，構(gòu)建/管理工具來(lái)管理依賴的大量框架，以及代碼編寫必須符合的規(guī)范，以保證程序的可讀性。因此課程組針對(duì)該門課程的重點(diǎn)和難點(diǎn)開發(fā)了一系列的微課，作為對(duì)傳統(tǒng)課堂教學(xué)的有益補(bǔ)充。下面以課程組教師指導(dǎo)學(xué)生開發(fā)的“Web前端設(shè)計(jì)表格”視頻為例，介紹該視頻的設(shè)計(jì)和實(shí)現(xiàn)過(guò)程。該視頻使用了萬(wàn)彩動(dòng)畫大師制作動(dòng)畫視頻，Camtasia 9軟件錄制視頻，前端頁(yè)面開發(fā)使用HBuilder開發(fā)工具編寫代碼。

該視頻對(duì)前端頁(yè)面中的表格知識(shí)點(diǎn)進(jìn)行講解。通過(guò)對(duì)此知識(shí)點(diǎn)的講授和練習(xí)，使學(xué)生了解表格的應(yīng)用形式，理解表格的基本結(jié)構(gòu)，以及掌握制作表格的方法和技巧。視頻設(shè)計(jì)中采用了多種教學(xué)方法，使用案例法和圖像法來(lái)提出問(wèn)題和明確主題，使用案例法、分解法和動(dòng)畫法來(lái)解決問(wèn)題，講解知識(shí)點(diǎn)，通過(guò)課后練習(xí)題來(lái)實(shí)際應(yīng)用所學(xué)知識(shí)點(diǎn)。教學(xué)內(nèi)容設(shè)計(jì)包括以下四個(gè)部分。

⑴ 提出問(wèn)題

聯(lián)系實(shí)際情況，舉例介紹實(shí)際網(wǎng)站中常見的可以應(yīng)用表格的場(chǎng)景，引出Web前端開發(fā)技術(shù)課程中表格這一知識(shí)點(diǎn)，從而提出本次視頻的問(wèn)題：如何在網(wǎng)頁(yè)中實(shí)現(xiàn)表格，具體視頻實(shí)現(xiàn)如圖1所示。

⑵ 點(diǎn)明主題

以生動(dòng)有趣的動(dòng)畫形式，來(lái)立體形象地介紹網(wǎng)頁(yè)表格的基本結(jié)構(gòu)，點(diǎn)明該視頻的主題。具體視頻實(shí)現(xiàn)如圖2所示。

⑶ 解析原理

結(jié)合實(shí)際案例，分步驟地講解制作表格內(nèi)容和制訂表格樣式的過(guò)程，使用豐富的動(dòng)畫講解基本原理，內(nèi)嵌了程序編寫的小視頻來(lái)實(shí)時(shí)展示操作過(guò)程，幫助學(xué)生理論聯(lián)系實(shí)際，加深對(duì)抽象程序代碼的理解。視頻中亦演示了代碼在瀏覽器中解釋后的頁(yè)面效果，使學(xué)生能更直觀地了解程序運(yùn)行結(jié)果。具體視頻實(shí)現(xiàn)如圖3所示。

⑷ 總結(jié)和實(shí)踐

視頻的末尾總結(jié)了所學(xué)的知識(shí)點(diǎn)，幫助學(xué)生回顧視頻內(nèi)容。具體視頻實(shí)現(xiàn)如圖4所示。

視頻的最后給出了相關(guān)的實(shí)踐練習(xí)題目，幫助學(xué)生應(yīng)用和實(shí)踐所介紹的知識(shí)點(diǎn)。輔助材料中亦給出了例題和練習(xí)題的參考代碼，以方便學(xué)生比對(duì)。具體視頻實(shí)現(xiàn)如圖5所示。

2.3 應(yīng)用與效果

在Web前端開發(fā)技術(shù)課程的教學(xué)過(guò)程中，于每次課堂教學(xué)之后，通過(guò)網(wǎng)絡(luò)教學(xué)平臺(tái)發(fā)布相關(guān)視頻和輔助資料，供學(xué)生課后觀看和學(xué)習(xí)[5]。文中介紹的微課“Web前端設(shè)計(jì)表格”獲得了2018年遼寧省普通高等學(xué)校本科大學(xué)生計(jì)算機(jī)設(shè)計(jì)競(jìng)賽一等獎(jiǎng)和2018年（第11屆）中國(guó)大學(xué)生計(jì)算機(jī)設(shè)計(jì)大賽（微課與教學(xué)輔助類）三等獎(jiǎng)。

3 結(jié)論

本文介紹了Web前端開發(fā)技術(shù)課程的內(nèi)容和特點(diǎn)，以網(wǎng)頁(yè)制作中的表格知識(shí)點(diǎn)為例，闡述了視頻的設(shè)計(jì)、制作和應(yīng)用。在該課程的教學(xué)過(guò)程中，每次課堂教學(xué)之后，通過(guò)網(wǎng)絡(luò)教學(xué)平臺(tái)發(fā)布相關(guān)視頻和輔助資料，供學(xué)生課后使用。下一步任務(wù)是豐富該課程的視頻庫(kù)，結(jié)合網(wǎng)絡(luò)教學(xué)平臺(tái)，串聯(lián)和整合零碎的視頻，幫助學(xué)生在課堂之外更好的自主學(xué)習(xí)和復(fù)習(xí)。

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

[1] 崔曉猛.微課教學(xué)設(shè)計(jì)模式研究[D].陜西師范大學(xué)碩士學(xué)位

論文，2016.

[2] 李享梅，韓斌.《網(wǎng)絡(luò)服務(wù)配置與管理》課程微課設(shè)計(jì)研究[J].

高教學(xué)刊，2015.20：70-71

[3] 王康.Linux服務(wù)配置與管理課程“微課”資源設(shè)計(jì)與開發(fā)[J].

中國(guó)管理信息化，2015.14：225-226

[4] 周密，蒲華秀，席凌.基于HTML5的微課Web前端設(shè)計(jì)[J].電

腦知識(shí)與技術(shù)，2016.12（17）：208-209

[5] 孟瑤.師生互動(dòng)平臺(tái)在高等教育領(lǐng)域的應(yīng)用研究[J].電腦與

信息技術(shù)，2018.26（1）：74-75