任?！∪A智杰　靳曉敏

【摘要】基于互聯(lián)網(wǎng)+教育模式下，傳統(tǒng)的教學(xué)模式、課堂教學(xué)結(jié)構(gòu)、課程資源都不能適合目前高校的前端課程教學(xué)，本文以軟件工程專業(yè)的Web前端課程為例，構(gòu)建了基于S-CMS的開放、協(xié)作、分享的漸進(jìn)式線上前端項目案例，并給出了具體實現(xiàn)步驟，強調(diào)以學(xué)生自主學(xué)習(xí)為中心，有助于培養(yǎng)學(xué)生實際動手能力。

【關(guān)鍵詞】前端課程??S-CMS??漸進(jìn)式項目案例

一、概述

隨著國家頒布中長期教育規(guī)劃綱要和教育信息化工作要點，提出了優(yōu)質(zhì)教育資源的開發(fā)與應(yīng)用、強化實踐教育環(huán)節(jié)的背景下，各種在線教育資源平臺如雨后春筍般出現(xiàn)，幾乎覆蓋所有的線下教育，如何強化教師利用信息技術(shù)所提供資源，如何深化創(chuàng)新人才培養(yǎng)模式，形成個性化數(shù)字教育平臺資源，就尤其重要。

余曉蘭提出了基于MOOC平臺SPOC模式與傳統(tǒng)《網(wǎng)頁設(shè)計與制作》課程課堂教學(xué)的混合教學(xué)模式，培養(yǎng)學(xué)生自主學(xué)習(xí)優(yōu)質(zhì)教學(xué)資源能力;宗月萍提出了基于清華優(yōu)慕課教學(xué)平臺的《網(wǎng)頁設(shè)計與制作》課程為例線上線下混合式教學(xué);王菁等闡述了基于云平臺的“網(wǎng)頁設(shè)計與制作”的課程輔助教學(xué)平臺，通過制定合理教學(xué)內(nèi)容，提高教學(xué)效果;為提高教學(xué)質(zhì)量和培養(yǎng)學(xué)生的創(chuàng)新能力，汪榮提出了基于網(wǎng)絡(luò)教學(xué)平臺下《網(wǎng)頁設(shè)計與制作》網(wǎng)絡(luò)教學(xué)平臺;為了運用信息化手段進(jìn)行教學(xué)改革，顧盼提出了基于雨課堂平臺的混合式的教學(xué)方式;為了加強在線課程的建設(shè)，湯智華提出了基于互聯(lián)網(wǎng)+背景下，并以"網(wǎng)頁設(shè)計與制作"課程為例，從課程建設(shè)、課程內(nèi)容、資源建設(shè)進(jìn)行了相關(guān)的研究和探討;以上論述從不同角度闡述了基于互聯(lián)網(wǎng)+模式下的前端課程改革的必要性和緊迫性。

二、漸進(jìn)式線上項目案例的建設(shè)

（一）漸進(jìn)式線上項目案的設(shè)計理念

伴隨著教育信息化的迅猛發(fā)展，特別是教育大數(shù)據(jù)、云計算、MOOC、翻轉(zhuǎn)課堂、微課、創(chuàng)客和智慧教育等線上教學(xué)平臺的出現(xiàn)，教育模式發(fā)生了巨大的變革，傳統(tǒng)的Web前端課程如何跟進(jìn)時代的發(fā)展，改變教學(xué)觀念，更新教學(xué)方法，提高教學(xué)效果就尤其迫切，本文提出了基于S-CMS的漸進(jìn)式線上前端項目案例建設(shè)為核心理念，強調(diào)吸收整合互聯(lián)網(wǎng)最新的前端資源，以學(xué)生自主為中心的研究性、探究性的學(xué)習(xí)模式，支持學(xué)生和教師共同參與建設(shè)項目案例，以項目為主導(dǎo)，學(xué)生從【前端理論學(xué)習(xí)】->【項目案例實踐】->【線上項目應(yīng)用】，三位一體、一站式的個性化的教學(xué)模式。

（二）漸進(jìn)式線上項目案例平臺的選擇

本文所采用的平臺為S-CMS作為線上前端項目案例主要的實現(xiàn)方式。該系統(tǒng)提供了完整電腦端模板、移動端模板、生成APP和微信小程序四大核心功能，其所提供的后臺管理系統(tǒng)，所有學(xué)生可以直接通過添加后臺數(shù)據(jù)，將數(shù)據(jù)顯示到前端頁面，降低學(xué)生后端開發(fā)的難度，滿足當(dāng)前所有前端教學(xué)案例的集成與實現(xiàn)。

（三）漸進(jìn)式線上項目案例資源的選擇

主要范圍涉及校企合作案例、在線專業(yè)教育平臺案例、自主開發(fā)案例、學(xué)生推薦案例、典型教材案例、微信公眾號案例、前端技術(shù)類APP和網(wǎng)站案例等，整合優(yōu)質(zhì)典型的前端項目案例，通過S-CMS制作對應(yīng)的線上前端案例，供所有相關(guān)人員進(jìn)行交流和學(xué)習(xí)。

（四）漸進(jìn)式線上項目案例的構(gòu)建步驟

無論是移動端的項目案例還是PC端的項目案例，均可以通過移動端或PC端模板來制作，或者通過系統(tǒng)擴展進(jìn)行微信小程序和App的開發(fā)，具體的操作流程如下：

第一步：開發(fā)環(huán)境的安裝：首先，注冊阿里云，登錄購買云服務(wù)器ECS，并在所購買的云服務(wù)器上安裝PHPstudy做為服務(wù)器環(huán)境，并將對應(yīng)的S-CMS系統(tǒng)進(jìn)行安裝云服務(wù)器上。

第二步：登錄后臺主界面，學(xué)生和教師分別注冊管理員權(quán)限，了解S-CMS文件結(jié)構(gòu)，PC版模板和移動版模板存放的文件夾，掌握S-CMS模板共9種類型常見的頁面結(jié)構(gòu)及其引用方式。

第三步：S-CMS提供了豐富的函數(shù)和標(biāo)簽，以滿足不同模板的開發(fā)，函數(shù)格式：{$函數(shù)名（參數(shù)1，參數(shù)2，參數(shù)3）}和標(biāo)簽格式：{@SL_標(biāo)簽名稱}。其中標(biāo)簽為后臺數(shù)據(jù)庫與前端頁面之間的中介，通過前端頁面調(diào)用系統(tǒng)標(biāo)簽來顯示相應(yīng)的數(shù)據(jù)內(nèi)容。標(biāo)簽分為兩類：通用標(biāo)簽和功能標(biāo)簽，功能標(biāo)簽又分為簡介頁面、新聞列表頁標(biāo)簽、新聞內(nèi)容頁標(biāo)簽、產(chǎn)品列表頁標(biāo)簽、產(chǎn)品內(nèi)容頁標(biāo)簽、萬能表單頁標(biāo)簽和聯(lián)系頁面標(biāo)簽。

第四步：前端項目案例，均可以上述標(biāo)簽和函數(shù)，將前端頁面改寫成對應(yīng)的頁面模板。然后，登錄后端管理界面，添加后臺頁面數(shù)據(jù)，更新緩存數(shù)據(jù)，真正把前端項目案例頁面通過S-CMS所提供的標(biāo)簽和函數(shù)，變成具體項目案例的線上實際應(yīng)用案例。

三、結(jié)束語

本文借助S-CMS系統(tǒng)，降低前端學(xué)習(xí)過程中，后端的零門檻開發(fā)，學(xué)生和教師只需要整合現(xiàn)有的優(yōu)質(zhì)項目案例，進(jìn)行模板轉(zhuǎn)化，就可以輕松開發(fā)出移動端或PC端網(wǎng)站頁面應(yīng)用，因此，漸進(jìn)式線上項目的構(gòu)建，既能充分調(diào)動學(xué)生學(xué)習(xí)積極性和主動性，將理論實踐應(yīng)用一站式的學(xué)習(xí)模式，又能提升教師熟練掌握前端理論與實踐，不斷更新教學(xué)觀念，改進(jìn)教學(xué)方法，提高教學(xué)效果和教學(xué)質(zhì)量，全面推進(jìn)前端人才培養(yǎng)的新機制。

參考文獻(xiàn)：

[1]余曉蘭.MOOC平臺基于SPOC的混合教學(xué)模式在高職《網(wǎng)頁設(shè)計與制作》課程中的實踐探索[J].科技經(jīng)濟市場，2019（04）：145-147.

[2]宗月萍.基于清華優(yōu)慕課教學(xué)平臺的線上線下混合式教學(xué)實踐分析——以高職計算機專業(yè)《網(wǎng)頁設(shè)計與制作》課程為例[J].中國新通信，2019，21（07）：202-203.

[3]?王菁，曾文娟.基于云平臺的“網(wǎng)頁設(shè)計與制作”課程教學(xué)實踐探索[J].信息系統(tǒng)工程，2019（02）：168-169.

[4]?汪榮.基于網(wǎng)絡(luò)教學(xué)平臺下《網(wǎng)頁設(shè)計與制作》課程創(chuàng)新能力培養(yǎng)的教學(xué)設(shè)計研究實踐思考[J].才智，2018（34）：169-170.

基金項目：課題：?吉林省教育科學(xué)“十三五”規(guī)劃一般規(guī)劃課題，課題名稱：《吉林省西部高校Web前端課程教學(xué)改革的研究》，課題編號（?GH180580）。

作者簡介：邵英安（1982-），男，漢族，籍貫：吉林白城，學(xué)歷：碩士，研究方向：Web全棧開發(fā);張強（1963-），男，漢族，籍貫：吉林松原，學(xué)歷：碩士，研究方向：軟件工程;白南石（1982-），男，漢族，籍貫：吉林白城，學(xué)歷：碩士，研究方向：Web程序開發(fā);李婧（1977-），女，漢族，籍貫：吉林白城，學(xué)歷：碩士，研究方向：程序算法;楊春巖（1982-），女，漢族，籍貫：吉林白城，學(xué)歷：碩士，研究方向：前端設(shè)計。