陳惠娥 胡安明

摘? 要：隨著互聯(lián)網(wǎng)+現(xiàn)代服務(wù)業(yè)的建設(shè)和發(fā)展，前端設(shè)計(jì)已經(jīng)成為創(chuàng)新驅(qū)動(dòng)產(chǎn)業(yè)和經(jīng)濟(jì)增長(zhǎng)的平臺(tái)。本文通過分析前端設(shè)計(jì)教學(xué)的課程定位、內(nèi)容方法、學(xué)習(xí)者特征等，以學(xué)生為主體，構(gòu)建課前、課中、課后、SPOC平臺(tái)、雨課堂五位一體教學(xué)模式，實(shí)踐結(jié)果表明，該模式能提高學(xué)生自學(xué)意識(shí)，學(xué)習(xí)動(dòng)力、學(xué)習(xí)興趣，深刻內(nèi)化知識(shí)，提升前端設(shè)計(jì)應(yīng)用能力。

關(guān)鍵詞：SPOC;翻轉(zhuǎn)課堂;教學(xué)模式;前端設(shè)計(jì)

中圖分類號(hào)：TP391.13-4? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

Research on Teaching Mode Based on SPOC Flipped Classroom

——A Case Study of Front End Design

CHEN Huie，HU Anming

（Tianhe College，Guangdong Polytechnic Normal University，Guangzhou 510540，China）

Abstract：With the construction and development of modern service industry in Internet plus，front-end design has become a platform for innovation to drive industry and economic growth.By analyzing the course orientation，content methods and learner characteristics of the Front End Design course，this paper constructs a five-in-one teaching mode of pre-class， in-class， after-class， SPOC platform and rain classroom，with students as the main body.The practice results show that this mode can improve students' self-study awareness，learning motivation and learning interest， deeply internalize knowledge and improve the application ability of the front-end design.

Keywords：SPOC;flipped classroom;teaching mode;front-end design

1? ?引言（Introduction）

傳統(tǒng)課堂受制于有限時(shí)間的約束，課堂上被大量的基礎(chǔ)知識(shí)點(diǎn)占據(jù)，缺乏綜合項(xiàng)目的實(shí)踐。理想的課堂應(yīng)該是師生有備而來，課堂充分互動(dòng)。伴隨著翻轉(zhuǎn)課堂前沿教育理念的出現(xiàn)，SPOC作為對(duì)MOOC的繼承和發(fā)展。它能夠把優(yōu)質(zhì)的SPOC資源與課堂教學(xué)優(yōu)勢(shì)結(jié)合起來，實(shí)現(xiàn)對(duì)教學(xué)流程逆序創(chuàng)新重構(gòu)。

2000年，美國(guó)MaureenLage，Glenn Platt and Michael Treglia在論文中介紹了他們?cè)诿绹?guó)邁阿密大學(xué)教授“經(jīng)濟(jì)學(xué)入門”時(shí)采用“翻轉(zhuǎn)教學(xué)”的模式，以及取得的成績(jī)。隨著互聯(lián)網(wǎng)的發(fā)展，翻轉(zhuǎn)課堂的方法逐漸在美國(guó)盛行并被國(guó)內(nèi)外許多學(xué)者賦予豐富的內(nèi)涵。翻轉(zhuǎn)課堂是在課外掌握新知識(shí)，在課上以問題解決、討論或者辯論等形式進(jìn)行知識(shí)的內(nèi)化[1]，翻轉(zhuǎn)課堂顛覆了傳統(tǒng)教學(xué)理念，真正體現(xiàn)了“以學(xué)生為中心”的教育理念，課堂上學(xué)生協(xié)作學(xué)習(xí)，教師對(duì)學(xué)生進(jìn)行有針對(duì)性的個(gè)別化的指導(dǎo)[2]。在我國(guó)，廣大學(xué)者嘗試如何把基礎(chǔ)知識(shí)放到課前，課中進(jìn)行課前知識(shí)的內(nèi)化，綜合項(xiàng)目的指導(dǎo)應(yīng)用和實(shí)踐，課后進(jìn)行測(cè)評(píng)鞏固。

隨著SPOC（Small Private Online Course小規(guī)模限制性在線課程）的出現(xiàn)，為翻轉(zhuǎn)課堂教學(xué)改革提供了平臺(tái)和機(jī)遇，較之于MOOC大規(guī)模在線課程，其服務(wù)的對(duì)象為校內(nèi)大學(xué)生，規(guī)模達(dá)到幾十人到幾百人。老師可以根據(jù)學(xué)生需求，自由設(shè)置和調(diào)控課程的內(nèi)容、進(jìn)度和評(píng)分。與此同時(shí)，SPOC平臺(tái)結(jié)合雨課堂APP能夠促進(jìn)翻轉(zhuǎn)課堂教學(xué)模式的深度發(fā)展應(yīng)用，它實(shí)現(xiàn)了一個(gè)載體能夠整合多種媒體元素，制作成一份預(yù)習(xí)資料推送給廣大學(xué)生進(jìn)行課前預(yù)習(xí)（類似于微課課件）。教師把這些視頻材料當(dāng)做家庭作業(yè)布置給學(xué)生，然后在實(shí)體課堂教學(xué)中回答學(xué)生的問題，把握學(xué)生學(xué)習(xí)動(dòng)態(tài)，根據(jù)課前的問題在課中進(jìn)行解答，課后進(jìn)行鞏固再現(xiàn)，幫助提高教學(xué)質(zhì)量。

2? SPOC翻轉(zhuǎn)課堂的學(xué)習(xí)情境設(shè)計(jì)（The learning?situation design of SPOC flipped classroom）

《前端設(shè)計(jì)》課程源于IT互聯(lián)網(wǎng)時(shí)代蓬勃發(fā)展的需要，從網(wǎng)頁制作演變而來，早期的web1.0內(nèi)容是靜態(tài)的，以圖文顯示并提供瀏覽為主，隨著互聯(lián)網(wǎng)+的深入發(fā)展和Html5、Css3的應(yīng)用，現(xiàn)代網(wǎng)頁交互效果顯著，應(yīng)用領(lǐng)域廣闊。來自傳智播客官網(wǎng)數(shù)據(jù)顯示截止2017年前端工程師平均薪資高達(dá)17240元，每日崗位需求5601人[3]。

2013年教育部在《教育信息化十年發(fā)展規(guī)劃》中指出促進(jìn)信息技術(shù)與教育教學(xué)深度融合，增強(qiáng)學(xué)生在網(wǎng)絡(luò)環(huán)境下提出問題、分析問題和解決問題的能力[4]。以下通過對(duì)《前端設(shè)計(jì)》應(yīng)用型課程的開發(fā)路徑進(jìn)行探析，基于“行動(dòng)領(lǐng)域、學(xué)習(xí)領(lǐng)域、項(xiàng)目情境設(shè)計(jì)”的開發(fā)過程，以項(xiàng)目為載體設(shè)計(jì)學(xué)習(xí)情境，由簡(jiǎn)單到復(fù)雜的項(xiàng)目驅(qū)動(dòng)式結(jié)合翻轉(zhuǎn)課堂教學(xué)。

2.1? ?基于職業(yè)工作崗位分析，確定典型工作任務(wù)

行動(dòng)領(lǐng)域：工作過程導(dǎo)向的課程基礎(chǔ)（開發(fā)平臺(tái)），是與本職業(yè)緊密相關(guān)的職業(yè)情境中構(gòu)成職業(yè)能力的工作任務(wù)的總和，采用工作過程描述的方式，體現(xiàn)了職業(yè)的、社會(huì)的和個(gè)人的需求[5]。

典型工作任務(wù)包含完整的職業(yè)工作過程，能反映獨(dú)立的職業(yè)規(guī)范或職業(yè)面貌。通過到企業(yè)調(diào)研，對(duì)智聯(lián)招聘和前程無憂有關(guān)前端工程師職位招聘信息的比較分析，以及三年來計(jì)算機(jī)專業(yè)畢業(yè)生的跟蹤調(diào)查信息，確定計(jì)算機(jī)前端設(shè)計(jì)畢業(yè)生所從事的職業(yè)分別有PC Web前端工程師、移動(dòng)Web前端工程師、Web全棧開發(fā)工程師等主要職業(yè)崗位群。通過參考國(guó)家職業(yè)標(biāo)準(zhǔn)，對(duì)計(jì)算機(jī)類型企業(yè)職業(yè)能力分析，確定其所包含的實(shí)際工作任務(wù)，整合為用戶需求分析、界面設(shè)計(jì)、業(yè)務(wù)系統(tǒng)功能分析與實(shí)現(xiàn)、優(yōu)化頁面兼容瀏覽器、產(chǎn)品用戶體驗(yàn)設(shè)計(jì)的實(shí)現(xiàn)和優(yōu)化、設(shè)計(jì)文檔或需求說明書編制、前端框架搭建、撰寫技術(shù)文檔、配合交互設(shè)計(jì)與后端工程師實(shí)現(xiàn)系統(tǒng)整合等9項(xiàng)典型工作任務(wù)。如表1所示：

較之于傳統(tǒng)課程的開發(fā)路徑，基于職業(yè)工作崗位分析確定典型工作任務(wù)更加側(cè)重于課程結(jié)構(gòu)下學(xué)生的職業(yè)能力、應(yīng)用能力和社會(huì)能力與產(chǎn)業(yè)崗位能力需求對(duì)接，改變傳統(tǒng)的學(xué)科體系下采用分科課程傳授細(xì)節(jié)知識(shí)，追求知識(shí)本位、學(xué)科本位，以及知識(shí)結(jié)構(gòu)的課程開發(fā)模式。

2.2? ?通過典型工作任務(wù)分析，確定專項(xiàng)學(xué)習(xí)領(lǐng)域

學(xué)習(xí)領(lǐng)域：工作過程導(dǎo)向的應(yīng)用型課程方案（課程名稱），是一個(gè)由職業(yè)能力描述的學(xué)習(xí)目標(biāo)、工作任務(wù)陳述的學(xué)習(xí)內(nèi)容和實(shí)踐理論綜合學(xué)習(xí)時(shí)間（基本學(xué)時(shí)）三部分構(gòu)成的學(xué)習(xí)單元。依據(jù)學(xué)習(xí)領(lǐng)域?qū)η岸寺殬I(yè)認(rèn)知結(jié)構(gòu)的要求，打破原有的專業(yè)理論課程和實(shí)踐課程組成的課程體系，以工作過程為導(dǎo)向進(jìn)行教、學(xué)、做一體化的應(yīng)用型課程重構(gòu)，將前端設(shè)計(jì)九個(gè)行動(dòng)領(lǐng)域轉(zhuǎn)化為Web前端技術(shù)、Html5移動(dòng)應(yīng)用開發(fā)、全棧應(yīng)用開發(fā)等三個(gè)前端設(shè)計(jì)專項(xiàng)學(xué)習(xí)領(lǐng)域。

2.3? ?根據(jù)前端學(xué)習(xí)領(lǐng)域，設(shè)計(jì)項(xiàng)目學(xué)習(xí)情境

蘇霍姆林斯基指出：“用環(huán)境、用學(xué)生自己創(chuàng)造的周圍情景、用豐富集體精神生活和一切東西進(jìn)行教育，這就是教育過程中最微妙的領(lǐng)域之一”[6]。

我國(guó)學(xué)者姜大源認(rèn)為學(xué)習(xí)情境是基于工作過程導(dǎo)向的教學(xué)。在工作任務(wù)及其工作環(huán)境下，將學(xué)習(xí)領(lǐng)域中的能力目標(biāo)和內(nèi)容重構(gòu)稱為學(xué)習(xí)單元。對(duì)于大學(xué)生而言，具備了一定的信息技術(shù)能力，同時(shí)具備自學(xué)能力和團(tuán)隊(duì)合作能力[7]，教師可以通過翻轉(zhuǎn)課堂的模式進(jìn)行有針對(duì)性地個(gè)性化教學(xué)，順應(yīng)時(shí)代對(duì)教育的訴求[8]。嚴(yán)權(quán)（2012）在《應(yīng)用型本科課程論》中指出應(yīng)用型本科課程具有服務(wù)區(qū)域經(jīng)濟(jì)、崇尚實(shí)用和面向大眾等特點(diǎn)，在選擇課程內(nèi)容時(shí)應(yīng)堅(jiān)持基礎(chǔ)性、可操作性和實(shí)踐性的原則。

由此可見，借鑒學(xué)習(xí)情境設(shè)計(jì)的載體（以項(xiàng)目、任務(wù)、案例、活動(dòng)、產(chǎn)品、構(gòu)建、設(shè)施、對(duì)象、工具等對(duì)象）對(duì)學(xué)習(xí)情境進(jìn)行具體化設(shè)計(jì)，有利于將理論知識(shí)和實(shí)踐技能進(jìn)行融合，將前端設(shè)計(jì)學(xué)習(xí)領(lǐng)域的目標(biāo)全覆蓋，并充分考慮企業(yè)、教師、客戶需求、學(xué)員、目標(biāo)、內(nèi)容、載體、方法、媒體、學(xué)習(xí)地點(diǎn)、組織、時(shí)間等因素。

以專項(xiàng)項(xiàng)目為載體，如《WEB前端技術(shù)》課程其學(xué)習(xí)領(lǐng)域根據(jù)行業(yè)需求可以通過企業(yè)展示平臺(tái)制作、社交平臺(tái)制作、在線教育平臺(tái)制作、金融平臺(tái)制作、旅游平臺(tái)制作、電商平臺(tái)制作等六個(gè)項(xiàng)目學(xué)習(xí)情境的設(shè)計(jì)來實(shí)現(xiàn)?！禜TML5移動(dòng)應(yīng)用開發(fā)》課程其學(xué)習(xí)領(lǐng)域根據(jù)應(yīng)用程序的需求可以通過微拼團(tuán)、微報(bào)名、微官網(wǎng)、微投票、微預(yù)約、微抽獎(jiǎng)等六個(gè)項(xiàng)目學(xué)習(xí)情境的設(shè)計(jì)來實(shí)現(xiàn)?！度珬?yīng)用開發(fā)》課程其學(xué)習(xí)領(lǐng)域根據(jù)任務(wù)功能需求可以通過OA協(xié)同辦公系統(tǒng)、社區(qū)服務(wù)平臺(tái)、報(bào)名培訓(xùn)、購物商城、餐飲外賣、移動(dòng)房產(chǎn)等六個(gè)項(xiàng)目學(xué)習(xí)情境的設(shè)計(jì)來實(shí)現(xiàn)。

3? SPOC翻轉(zhuǎn)課堂前端教學(xué)模式的設(shè)計(jì)（Teaching?mode design of Front End Design based on SPOC?flipped classroom）

項(xiàng)目學(xué)習(xí)情境的設(shè)計(jì)是一種革新的教學(xué)設(shè)計(jì)，依托互聯(lián)網(wǎng)，學(xué)生獲得知識(shí)的途徑和渠道非常豐富，我們更需要一種革新的教學(xué)方式（如翻轉(zhuǎn)課堂（Flipped Classroom））來創(chuàng)新教學(xué)?；诹鞒淘僭?，翻轉(zhuǎn)課堂改變了教學(xué)順序和步驟，實(shí)現(xiàn)了教學(xué)流程的逆序創(chuàng)新。革新的教學(xué)設(shè)計(jì)結(jié)合逆序的教學(xué)流程可以預(yù)先傳播知識(shí)，強(qiáng)化知識(shí)內(nèi)化的過程，激發(fā)學(xué)生進(jìn)行深度學(xué)習(xí)，提高實(shí)踐開發(fā)能力。

本研究的翻轉(zhuǎn)課堂基于SPOC在線視頻平臺(tái)，以學(xué)習(xí)者為主體，構(gòu)建了五位一體的教學(xué)模式，包含（課前、課中、課后、SPOC平臺(tái)、雨課堂），同時(shí)制定教學(xué)目標(biāo)、微視頻資源制作、小組協(xié)作學(xué)習(xí)、課前評(píng)價(jià)反饋、課中實(shí)踐測(cè)評(píng)等內(nèi)容貫穿于五大教學(xué)模式。根據(jù)課程培養(yǎng)目標(biāo)制定教學(xué)單元學(xué)習(xí)目標(biāo);根據(jù)項(xiàng)目情境重構(gòu)課程單元，并制作微視頻資源;學(xué)生在課前先學(xué)、先測(cè)、先知，課中結(jié)合雨課堂APP進(jìn)行課堂交互，協(xié)助學(xué)習(xí)。評(píng)價(jià)貫穿于課前—課中—課后整個(gè)系統(tǒng)的教學(xué)流程。最后，針對(duì)項(xiàng)目單元中的難點(diǎn)課中指導(dǎo)實(shí)踐并進(jìn)行測(cè)評(píng)鞏固。課后借助SPOC平臺(tái)進(jìn)行單元測(cè)試和項(xiàng)目實(shí)踐。

此教學(xué)模式在教學(xué)與學(xué)習(xí)理論指導(dǎo)下建立起來的較為穩(wěn)定的教學(xué)流程框架和活動(dòng)程序。其流程框架從宏觀上把握教學(xué)活動(dòng)整體流程及學(xué)習(xí)情境內(nèi)部的關(guān)系和功能，作為活動(dòng)程序規(guī)范教學(xué)模式的有序性和可操作性。注重學(xué)習(xí)者的學(xué)習(xí)體驗(yàn)，教師的角色職能轉(zhuǎn)換，也是本模式的一大特色，經(jīng)過多輪的教學(xué)實(shí)踐，最終構(gòu)建出基于SPOC的翻轉(zhuǎn)課堂教學(xué)模式圖如圖2所示。

本模式是一個(gè)整理問題型魚骨圖，按課程項(xiàng)目情境相互關(guān)聯(lián)性整理而成的課堂教學(xué)模式層次分明、條理清楚，模式體現(xiàn)了先學(xué)先測(cè)，以學(xué)定教，以教促學(xué)，以學(xué)促改的開發(fā)思路。

4? ?結(jié)論（Conclusion）

經(jīng)實(shí)踐發(fā)現(xiàn)，本研究的教學(xué)模式符合學(xué)習(xí)者需求，首先，通過課前的SPOC平臺(tái)資源提供了課前預(yù)習(xí)的一系列配套資源，包括推送資源、在線預(yù)習(xí)，推送題目、在線測(cè)試，單元任務(wù)、自由討論、拓展訓(xùn)練等組合單元;課中結(jié)合雨課堂進(jìn)行課堂管理、檢測(cè)預(yù)習(xí)、導(dǎo)入情境、分組實(shí)現(xiàn)、師生互動(dòng)、成果互評(píng)、經(jīng)驗(yàn)值評(píng)定進(jìn)行實(shí)踐;課后通過項(xiàng)目測(cè)試、智能測(cè)評(píng)、師生總結(jié)等方式完成整個(gè)項(xiàng)目流程的學(xué)習(xí)。

由此可見，探索SPOC翻轉(zhuǎn)課堂教學(xué)模式，是當(dāng)前應(yīng)用型課程轉(zhuǎn)型改革的核心環(huán)節(jié)。此教學(xué)模式與教學(xué)設(shè)計(jì)一一對(duì)應(yīng)，滿足學(xué)生自主學(xué)習(xí)解決問題的能力，增強(qiáng)了教學(xué)互動(dòng)環(huán)節(jié)，提高了課堂教學(xué)的有效性，并為交互式微課程的開發(fā)和微課堂的教學(xué)設(shè)計(jì)提供參考。

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

[1] Vanderbilt? University，Center for Teaching.Flipping the classroom[EB/OL].http：//cft.vanderbilt.edu/guides-sub-pages/flipping-the-classroom.2013-01-22/2015-07-16.

[2] Kenneth Nowaek.A Ture Training Needs Analysis[J].Trainning &Development Journal，1999（4）：65-66.

[3] 傳智播客.http：//www.itcast.cn/subject/webzly/index.shtml？[EB/OL].sogou-chuanzhi-qianduan-xin-pc-qianduankaifa，2018-12-06.

[4] Jacqueline? E.Mc Laughlin.The Flipped Classroom：A? Course? Redesign to Foster Learning and Engagement in a Health Professions School[J].Academic Medicine，2014（2）：236-244.

[5] 嚴(yán)中華.職業(yè)教育課程開發(fā)與實(shí)施[M].北京：清華大學(xué)出版社，2009：79.

[6] 霍姆林斯基[蘇]，帕夫雷什中學(xué)[M].北京：教育科學(xué)出版社，?1983：122.

[7] 容梅，彭雪紅.翻轉(zhuǎn)課堂的歷史、現(xiàn)狀及實(shí)踐策略探析[J].中國(guó)電化教育，2015（07）：108-115.

[8] 郭文良，和學(xué)新.翻轉(zhuǎn)課堂：背景、理念與特征[J].教育理論與實(shí)踐，2015，35（11）：3-6.