以工作過程為導(dǎo)向的《大前端開發(fā)》課程規(guī)劃與設(shè)計(jì)

劉磊

（廣東理工職業(yè)學(xué)院計(jì)算機(jī)系，廣州 510000）

以工作過程為導(dǎo)向的《大前端開發(fā)》課程規(guī)劃與設(shè)計(jì)

劉磊

（廣東理工職業(yè)學(xué)院計(jì)算機(jī)系，廣州 510000）

0　引言

隨著互聯(lián)網(wǎng)的高速發(fā)展，網(wǎng)上海量信息鋪天蓋地而來，如何從眾多信息中脫穎而出，以生動(dòng)的展示界面、良好的交互效果留住用戶，一直是Web開發(fā)者研究的課題。Web1.0時(shí)代，網(wǎng)站是最重要的信息發(fā)布者，形式主要是靜態(tài)網(wǎng)頁，界面以文字圖片為主，效果較單一；Web2.0時(shí)代，以瀏覽器為載體的Web端依然占據(jù)主流，Mobile端有所發(fā)展，現(xiàn)在的網(wǎng)頁大量使用Flash、CSS、XML、JavaScript等前端技術(shù)，能夠良好展示音頻、視頻、文字、圖片、游戲等各種信息內(nèi)容，網(wǎng)頁界面生動(dòng)，效果豐富；進(jìn)入云計(jì)算時(shí)代，隨著HTML5相關(guān)技術(shù)（包括HTML5、CSS3、JavaScript，簡(jiǎn)稱H5）的發(fā)展，Mobile端迅速壯大，越來越成為信息展示的主流，此時(shí)的前端開發(fā)不僅包括傳統(tǒng)的網(wǎng)頁設(shè)計(jì)、更重要的是移動(dòng)設(shè)備上的展示頁面開發(fā)，前端開發(fā)者需要綜合考慮更多設(shè)備（PC端、移動(dòng)端）展示要求、更豐富的交互效果、更好的安全性，這種開發(fā)區(qū)別于傳統(tǒng)的Web前端開發(fā)（更多是PC界面），可以稱之為大前端開發(fā) （統(tǒng)一PC界面和Mobile界面），出現(xiàn)了“響應(yīng)式布局”的設(shè)計(jì)理念，相關(guān)技術(shù)以H5、jQuery、Bootstrap等為代表。

企業(yè)對(duì)大前端開發(fā)的崗位需求日趨火爆，高職院校如何抓住這一機(jī)遇，將傳統(tǒng)的網(wǎng)頁設(shè)計(jì)與制作、Web客戶端開發(fā)等課程升級(jí)為大前端開發(fā)課程，更注重HTML5、CSS3、jQuery、Bootstrap等企業(yè)急需知識(shí)的講解，構(gòu)建適合高職類學(xué)生學(xué)習(xí)的《大前端開發(fā)》課程已經(jīng)成為一項(xiàng)亟待解決的任務(wù)。筆者以前端開發(fā)工程師工作過程為導(dǎo)向，嘗試構(gòu)建《大前端開發(fā)》課程。

1　大前端開發(fā)定義

本文論述的大前端開發(fā)指以設(shè)計(jì)圖為起點(diǎn)，綜合使用HTML、CSS、JavaScript、XML、AJAX、H5等技術(shù)，以完成Web和Mobile等前端頁面為終點(diǎn)的工作過程。對(duì)于大前端開發(fā)工程師來說，他的上游是美工設(shè)計(jì)師，下游是服務(wù)端開發(fā)工程師，輸入是頁面設(shè)計(jì)效果圖，輸出是前端頁面源碼。簡(jiǎn)單的說，大前端開發(fā)包括交互設(shè)計(jì)、編碼實(shí)現(xiàn)、頁面優(yōu)化、服務(wù)端交互等過程。

2　大前端開發(fā)崗位典型職責(zé)與技能分析

隨著人們對(duì)前端頁面的交互性能要求越來越高，各大瀏覽器的原生功能和支持標(biāo)準(zhǔn)也日新月異。大前端開發(fā)崗位越來越重要，對(duì)應(yīng)的知識(shí)技能要求廣度和深度也更加看重。下面作簡(jiǎn)要分析。

表1　大前端開發(fā)崗位職責(zé)

表2　大前端開發(fā)職業(yè)技能

3　大前端開發(fā)典型工作過程

大前端開發(fā)作為Web應(yīng)用開發(fā)過程中重要的一環(huán)，要將設(shè)計(jì)師的效果圖轉(zhuǎn)變?yōu)闉g覽器可以訪問的前端頁面，同時(shí)也要考慮與后臺(tái)服務(wù)源碼的整合，起到承前啟后的作用。大前端開發(fā)工程師的典型工作過程如圖1所示。

圖1　大前端開發(fā)典型工作過程

4　《大前端開發(fā)》課程規(guī)劃

大前端開發(fā)技能的訓(xùn)練，需要掌握非常多細(xì)而小的知識(shí)點(diǎn)和工具，整個(gè)過程貫穿了切圖、編碼、調(diào)優(yōu)、發(fā)布等技術(shù)點(diǎn)，還需要熟悉一些W3C標(biāo)準(zhǔn)，大前端開發(fā)課程的教學(xué)要囊括這些知識(shí)點(diǎn)。大前端開發(fā)課程的詳細(xì)知識(shí)體系如圖2所示。

前端開發(fā)崗位需求火爆，高職院校開設(shè)大前端開發(fā)課程意義重大，筆者思考課程規(guī)劃，得出以下建議：

（1）由于大前端開發(fā)知識(shí)體系龐雜，入門容易，但精通很難，建議設(shè)置為72學(xué)時(shí)，其中理論36學(xué)時(shí)，實(shí)踐36學(xué)時(shí)；如果條件許可，后續(xù)課程開設(shè)《大前端開發(fā)項(xiàng)目實(shí)踐》，36學(xué)時(shí)，以項(xiàng)目演練的方式鞏固知識(shí)點(diǎn)，學(xué)生掌握的效果會(huì)更好。

（2）參考本文整理的大前端開發(fā)工作過程，以此為導(dǎo)向精心設(shè)計(jì)教學(xué)場(chǎng)景，將知識(shí)點(diǎn)的學(xué)習(xí)融入工作過程中，達(dá)到學(xué)中做、做中學(xué)的融合，讓學(xué)習(xí)有目的、有成果、有價(jià)值，學(xué)生自然成就感倍增，信心十足。

5　《大前端開發(fā)》課程設(shè)計(jì)

（1）課程定位

大前端開發(fā)建議設(shè)置為計(jì)算機(jī)類專業(yè)核心必修課程，對(duì)應(yīng)“前端開發(fā)工程師”職業(yè)崗位。通過本課程的學(xué)習(xí)，要求學(xué)生掌握網(wǎng)頁設(shè)計(jì)的基本概念，理解W3C標(biāo)準(zhǔn)，理解“響應(yīng)式布局”理念，學(xué)會(huì)使用常用的網(wǎng)頁開發(fā)和調(diào)試工具，掌握HTML、CSS、JavaScript、H5相關(guān)技術(shù)，能夠設(shè)計(jì)制作一些綜合的前端頁面，并能進(jìn)行性能分析、安全評(píng)價(jià)、兼容性測(cè)試。大前端開發(fā)課程教學(xué)場(chǎng)景的設(shè)計(jì)以企業(yè)實(shí)際工作過程為導(dǎo)向，通過完成這些精心設(shè)計(jì)的項(xiàng)目模塊，學(xué)生不但能夠掌握前端開發(fā)的專業(yè)知識(shí)和專業(yè)技能，還能夠全面培養(yǎng)其團(tuán)隊(duì)協(xié)作、溝通表達(dá)、工作責(zé)任心、職業(yè)道德與規(guī)范等綜合素質(zhì)，使學(xué)生通過學(xué)習(xí)的過程掌握工作崗位所需要的各項(xiàng)技能和相關(guān)專業(yè)知識(shí)。

大前端開發(fā)課程前導(dǎo)課建議開設(shè)計(jì)算機(jī)平面設(shè)計(jì)，熟悉頁面設(shè)計(jì)和切圖規(guī)則，為前端開發(fā)打下基礎(chǔ)；后續(xù)課建議開設(shè)Web服務(wù)器開發(fā)技術(shù)，了解B/S系統(tǒng)架構(gòu)的運(yùn)作模式，掌握前后端數(shù)據(jù)交互的規(guī)則，理解前端數(shù)據(jù)展示安全和性能的優(yōu)化技巧。

（2）課程目標(biāo)

本課程目標(biāo)包括知識(shí)目標(biāo)、技能目標(biāo)、素養(yǎng)目標(biāo)三個(gè)方面，知識(shí)目標(biāo)是基礎(chǔ)，技能目標(biāo)是保障，素養(yǎng)目標(biāo)是擴(kuò)展。三個(gè)目標(biāo)之間的關(guān)系如圖3所示。

圖2　《大前端開發(fā)》課程知識(shí)體系圖

圖3　課程目標(biāo)分解圖

（3）整體設(shè)計(jì)思路

大前端開發(fā)課程的教學(xué)設(shè)計(jì)以工作過程為導(dǎo)向，以任務(wù)引領(lǐng)為課程框架，參考企業(yè)崗位實(shí)際工作過程，分析所需技術(shù)點(diǎn)和職業(yè)素養(yǎng)，將課程按遞進(jìn)方式設(shè)計(jì)成項(xiàng)目模塊，把崗位要求融入到模塊教學(xué)中，學(xué)生通過教學(xué)場(chǎng)景完成學(xué)習(xí)，由淺入深，以點(diǎn)到面的全面掌握前端開發(fā)的職業(yè)技能。

大前端開發(fā)課程的設(shè)計(jì)以能力為本位、以職業(yè)實(shí)踐為主線、以項(xiàng)目課程為主體，打破傳統(tǒng)的課程教學(xué)模式，將前端開發(fā)崗位能力中用到的知識(shí)點(diǎn)融合在項(xiàng)目中。學(xué)生通過各項(xiàng)目的系列練習(xí)操作，熟練地掌握崗位所需知識(shí)和技能，并不斷強(qiáng)化。項(xiàng)目體現(xiàn)操作能力和解決問題能力的培養(yǎng)，體現(xiàn)職業(yè)教育“以就業(yè)為導(dǎo)向，以能力為本位”的教育理念。

整個(gè)大前端開發(fā)課程可劃分成一個(gè)個(gè)子項(xiàng)目，各項(xiàng)目之間既獨(dú)立又相互聯(lián)系。作為項(xiàng)目是獨(dú)立的，但作為項(xiàng)目當(dāng)中應(yīng)用到的知識(shí)點(diǎn)，各項(xiàng)目之間又是有關(guān)聯(lián)的。在不同的項(xiàng)目之間，重點(diǎn)知識(shí)點(diǎn)的應(yīng)用（如CSS、JS、調(diào)試等）是不斷重復(fù)的，以強(qiáng)化學(xué)生對(duì)知識(shí)點(diǎn)的理解，也讓學(xué)生能夠接觸到大量的不同類型前端的制作。當(dāng)然，每個(gè)項(xiàng)目的側(cè)重點(diǎn)是不同的，教學(xué)中應(yīng)當(dāng)注意處理好各項(xiàng)目之間的關(guān)系，注意重、難點(diǎn)的把握。

（4）項(xiàng)目模塊設(shè)計(jì)案例

基于工作過程導(dǎo)向的思想，大前端開發(fā)課程典型任務(wù)模塊設(shè)計(jì)如圖4所示。

6　結(jié)語

H5技術(shù)的迅猛發(fā)展，使前端開發(fā)有了一統(tǒng)江湖的趨勢(shì)，大前端開發(fā)正是順勢(shì)產(chǎn)生的崗位需求，高職院校開設(shè)《大前端開發(fā)》課程，對(duì)于把握前沿技術(shù)和促進(jìn)學(xué)生就業(yè)，具有重要的意義。本文以工作過程為導(dǎo)向，嘗試闡述了《大前端開發(fā)》課程的規(guī)劃與設(shè)計(jì)，相信對(duì)本課程的開設(shè)具有一定的建設(shè)意義。

圖4　《大前端開發(fā)》課程項(xiàng)目模塊設(shè)計(jì)

［1］魏冬梅.Web前端開發(fā)課程教學(xué)探討與實(shí)踐［J］.福建電腦，2013（06）.

［2］頓祖義.項(xiàng)目化課程改革:高職院校教學(xué)工作的重要抓手［J］.湖北民族學(xué)院學(xué)報(bào)（哲學(xué)社會(huì)科學(xué)版），2008（06）.

［3］徐涵.以工作過程為導(dǎo)向的職業(yè)教育［J］.職業(yè)技術(shù)教育，2007（34）.

［4］袁江.基于工作過程的課程觀［J］.中國(guó)職業(yè)技術(shù)教育，2005（04）.

［5］劉薇，龔海華.HTML5&CSS3在網(wǎng)頁設(shè)計(jì)中的優(yōu)勢(shì)［J］.金田（勵(lì)志），2012（12）.

［6］于曉霞，沈志剛.基于“工作過程”面向“職業(yè)崗位定位”的教學(xué)模式在網(wǎng)頁設(shè)計(jì)課程中的應(yīng)用［J］.科技信息，2009（06）.

Front End Development；Working Process；Knowledge System

Plan and Design of Front End Development Based on Working Process

LIU Lei
（Computer Science Department，Guangdong Polytechnic Institute，Guangzhou 510000）

1007-1423（2015）33-0013-04

10.3969/j.issn.1007-1423.2015.33.004

劉磊（1984-），男，山東人，碩士研究生，研究方向?yàn)閃eb開發(fā)、項(xiàng)目管理、數(shù)據(jù)存儲(chǔ)等

2015-11-06

2015-11-16

HTML5技術(shù)的發(fā)展，使Web前端開發(fā)和移動(dòng)前端開發(fā)趨于統(tǒng)一，大前端開發(fā)崗位需求火爆，高職院校開設(shè)《大前端開發(fā)》課程具有重要的現(xiàn)實(shí)意義。嘗試以大前端開發(fā)工作過程為導(dǎo)向，分析所涉及的技術(shù)節(jié)點(diǎn)，進(jìn)而規(guī)劃課程體系，設(shè)計(jì)課程模塊。

大前端開發(fā)；工作過程；知識(shí)體系

廣東開放大學(xué)-廣東理工職業(yè)學(xué)院教育教學(xué)改革項(xiàng)目 （No.JG201334）、廣東開放大學(xué)-廣東理工職業(yè)學(xué)院科研項(xiàng)目（No.1427）

The development of HTML5 technology makes the development of web front end and the development of mobile front end is unified，and the demand of the front end of the development is hot.Attempts to develop the work process oriented，analyses of the technical nodes involved，and then plans the course system，designs curriculum module.