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

劉磊

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

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

劉磊

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

0　引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）課程定位

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

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

（2）課程目標

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

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

圖3　課程目標分解圖

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

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

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

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

（4）項目模塊設(shè)計案例

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

6　結(jié)語

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

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

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

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

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

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

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

［6］于曉霞，沈志剛.基于“工作過程”面向“職業(yè)崗位定位”的教學模式在網(wǎng)頁設(shè)計課程中的應(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-），男，山東人，碩士研究生，研究方向為Web開發(fā)、項目管理、數(shù)據(jù)存儲等

2015-11-06

2015-11-16

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

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

廣東開放大學-廣東理工職業(yè)學院教育教學改革項目 （No.JG201334）、廣東開放大學-廣東理工職業(yè)學院科研項目（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.