以工作过程为导向的《大前端开发》课程规划与设计

刘磊

（广东理工职业学院计算机系，广州 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.