以工作過程為導向的《大前端開發》課程規劃與設計

劉磊

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

以工作過程為導向的《大前端開發》課程規劃與設計

劉磊

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

0　引言

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

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

1　大前端開發定義

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

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

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

表1　大前端開發崗位職責

表2　大前端開發職業技能

3　大前端開發典型工作過程

大前端開發作為Web應用開發過程中重要的一環，要將設計師的效果圖轉變為瀏覽器可以訪問的前端頁面，同時也要考慮與后臺服務源碼的整合，起到承前啟后的作用。大前端開發工程師的典型工作過程如圖1所示。

圖1　大前端開發典型工作過程

4　《大前端開發》課程規劃

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

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

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

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

5　《大前端開發》課程設計

（1）課程定位

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

大前端開發課程前導課建議開設計算機平面設計，熟悉頁面設計和切圖規則，為前端開發打下基礎；后續課建議開設Web服務器開發技術，了解B/S系統架構的運作模式，掌握前后端數據交互的規則，理解前端數據展示安全和性能的優化技巧。

（2）課程目標

本課程目標包括知識目標、技能目標、素養目標三個方面，知識目標是基礎，技能目標是保障，素養目標是擴展。三個目標之間的關系如圖3所示。

圖2　《大前端開發》課程知識體系圖

圖3　課程目標分解圖

（3）整體設計思路

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

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

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

（4）項目模塊設計案例

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

6　結語

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

圖4　《大前端開發》課程項目模塊設計

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

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

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

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

［5］劉薇，龔海華.HTML5&CSS3在網頁設計中的優勢［J］.金田（勵志），2012（12）.

［6］于曉霞，沈志剛.基于“工作過程”面向“職業崗位定位”的教學模式在網頁設計課程中的應用［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開發、項目管理、數據存儲等

2015-11-06

2015-11-16

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

大前端開發；工作過程；知識體系

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