陳惠娥 胡安明

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

關鍵詞：SPOC;翻轉(zhuǎn)課堂;教學模式;前端設計

中圖分類號：TP391.13-4? ? ?文獻標識碼：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)課堂受制于有限時間的約束，課堂上被大量的基礎知識點占據(jù)，缺乏綜合項目的實踐。理想的課堂應該是師生有備而來，課堂充分互動。伴隨著翻轉(zhuǎn)課堂前沿教育理念的出現(xiàn)，SPOC作為對MOOC的繼承和發(fā)展。它能夠把優(yōu)質(zhì)的SPOC資源與課堂教學優(yōu)勢結合起來，實現(xiàn)對教學流程逆序創(chuàng)新重構。

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

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

2? SPOC翻轉(zhuǎn)課堂的學習情境設計（The learning?situation design of SPOC flipped classroom）

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

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

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

行動領域：工作過程導向的課程基礎（開發(fā)平臺），是與本職業(yè)緊密相關的職業(yè)情境中構成職業(yè)能力的工作任務的總和，采用工作過程描述的方式，體現(xiàn)了職業(yè)的、社會的和個人的需求[5]。

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

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

2.2? ?通過典型工作任務分析，確定專項學習領域

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

2.3? ?根據(jù)前端學習領域，設計項目學習情境

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

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

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

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

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

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

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

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

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

4? ?結論（Conclusion）

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

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

參考文獻（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è)教育課程開發(fā)與實施[M].北京：清華大學出版社，2009：79.

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

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

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