◆李高峰

基于工作過(guò)程之《HTML5移動(dòng)開發(fā)》教學(xué)與改革

◆李高峰

國(guó)內(nèi)高職院校的html課程在不斷改革和拓寬知識(shí)面、在創(chuàng)新教學(xué)模式等方面做了很多工作,對(duì)HTML5移動(dòng)端開發(fā)的迅速發(fā)展起到了非常重要的作用。但隨著技術(shù)的進(jìn)步、社會(huì)的發(fā)展,以及學(xué)生智能手機(jī)的普及,國(guó)內(nèi)高職HTML5移動(dòng)端開發(fā)的教育在新形勢(shì)下如何進(jìn)一步改革創(chuàng)新,是當(dāng)前面臨的重要課題。

工作過(guò)程；高職教學(xué)；HTML5；改革

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)絡(luò)架構(gòu)的完善，寬帶的提升，網(wǎng)站已成為形象宣傳、產(chǎn)品展示推廣、信息溝通的最方便快捷的途徑，移動(dòng)端APP的開發(fā)和使用更是成為了近年來(lái)最熱門的途徑之一。HTML語(yǔ)言是一種超級(jí)文本標(biāo)記語(yǔ)言，自Web興起發(fā)展至今都在穩(wěn)定地發(fā)展著。HTML5于2008年1月發(fā)布第一份正式草案出后，作為一款跨平臺(tái)的超級(jí)文本標(biāo)記語(yǔ)言，不僅在計(jì)算機(jī)端，而且在移動(dòng)端也得到了廣泛的應(yīng)用。

一、高職學(xué)生情況分析

（一）學(xué)生對(duì)新事物有較高的興趣，學(xué)習(xí)能力很強(qiáng)，有寬廣的創(chuàng)造力和想象力，多數(shù)人壓力不大而非常樂(lè)觀，對(duì)新知識(shí)更容易接受；

（二）部分學(xué)生不喜歡受約束、個(gè)性強(qiáng)、任性、自我、缺乏理想、回避壓力、獨(dú)立性較差，有懶散表現(xiàn)；

（三）大部分學(xué)生比較注重課程教學(xué)的實(shí)用性和趣味性；

（四）學(xué)生來(lái)自不同地區(qū)不同的學(xué)習(xí)條件及家庭環(huán)境，對(duì)計(jì)算機(jī)知識(shí)和移動(dòng)設(shè)備應(yīng)用軟件掌握的基礎(chǔ)不一樣，加大了教學(xué)難度；

（五）教學(xué)對(duì)象是大二的學(xué)生，熟悉了高職校園生活，開始產(chǎn)生應(yīng)對(duì)情緒。

二、課程教學(xué)技能目標(biāo)

為了充分體現(xiàn)職業(yè)教育特色，本課程突出培養(yǎng)學(xué)生在兩個(gè)方面的職業(yè)技能：一是HTML5綜合運(yùn)用的能力，二是移動(dòng)端APP開發(fā)的能力。

面向企業(yè)，是該課程充滿活力的根本所在。適應(yīng)企業(yè)需求，以應(yīng)用為目的，把知識(shí)轉(zhuǎn)化為能力，是該課程改革的核心。本課程采用層次遞進(jìn)、課堂教學(xué) + 線上直播，線下實(shí)訓(xùn)+實(shí)戰(zhàn)課內(nèi)課外，工作實(shí)際項(xiàng)目相結(jié)合的教學(xué)組織形式，通過(guò)“提出問(wèn)題，找出方案、解決問(wèn)題”的教學(xué)方式，培養(yǎng)學(xué)生綜合的網(wǎng)站設(shè)計(jì)能力，建立暢通的信息渠道，激勵(lì)并引導(dǎo)學(xué)生自主學(xué)習(xí)和創(chuàng)新學(xué)習(xí)，鍛煉學(xué)生后續(xù)自我學(xué)習(xí)的能力。工作案例的設(shè)計(jì)分為基本需求和高級(jí)需求，以滿足不同層次工作任務(wù)的需要。在每個(gè)案例完成后，及時(shí)進(jìn)行總結(jié)，并由教師提出新的需求，課后由學(xué)生登錄課程教學(xué)網(wǎng)站獨(dú)立完成并上交。這種方法，大大提高了學(xué)生自主學(xué)習(xí)的積極性，學(xué)生帶著問(wèn)題去學(xué)，使學(xué)生真正變成教學(xué)過(guò)程中的主體；經(jīng)過(guò)充分的調(diào)查與思考后，學(xué)生提出了自己解決問(wèn)題的方案，表現(xiàn)出了很高的創(chuàng)新能力。

三、《HTML5移動(dòng)開發(fā)》教學(xué)模塊設(shè)計(jì)

《HTML5移動(dòng)開發(fā)》教學(xué)模塊設(shè)計(jì)以“以就業(yè)為導(dǎo)向，項(xiàng)目教學(xué)為主體”、以構(gòu)造學(xué)生知識(shí)、能力、素質(zhì)三位一體的原則，突出實(shí)用、實(shí)際、實(shí)踐、實(shí)效，使高職計(jì)算機(jī)應(yīng)用和移動(dòng)商務(wù)專業(yè)學(xué)生的培養(yǎng)與企業(yè)用人之間實(shí)現(xiàn)“提前培養(yǎng)，同步使用”。本課程以實(shí)踐性教學(xué)環(huán)節(jié)為主，并建議學(xué)生學(xué)完后考取web前端工程師證，同時(shí)也將本專業(yè)領(lǐng)域的新知識(shí)、新技術(shù)、新流程和新方法融入到課程之中，基本克服了專業(yè)知識(shí)滯后于市場(chǎng)需求的現(xiàn)象。

（一）理論教學(xué)環(huán)節(jié)設(shè)計(jì)

理論課全部安排在理實(shí)一體實(shí)訓(xùn)室進(jìn)行。在課堂教學(xué)中采用如下組織方式：1.采用項(xiàng)目導(dǎo)向，案例教學(xué)，培養(yǎng)學(xué)生學(xué)以致用的能力。2.采用先進(jìn)的多媒體教學(xué)手段，增加教學(xué)的感性與理性學(xué)習(xí)效果。3.采用小作業(yè)與大作業(yè)相結(jié)合，機(jī)試與電子作品相結(jié)合的考核方法。4.結(jié)合企業(yè)開發(fā)流程，介紹國(guó)內(nèi)外最前沿的與學(xué)生專業(yè)相關(guān)的移動(dòng)端開發(fā)技術(shù)，讓學(xué)生與時(shí)俱進(jìn)。

（二）實(shí)訓(xùn)教學(xué)環(huán)節(jié)設(shè)計(jì)

《HTML5移動(dòng)端開發(fā)》課程是技術(shù)性、實(shí)踐性很強(qiáng)的課程。在教學(xué)中充分照顧到了專業(yè)學(xué)生知識(shí)結(jié)構(gòu)和思維特點(diǎn)，通過(guò)工程過(guò)程導(dǎo)引項(xiàng)目教學(xué)演示、訓(xùn)練項(xiàng)目學(xué)生模仿練習(xí)以及強(qiáng)化項(xiàng)目學(xué)生課后自行完成，使學(xué)生體驗(yàn)并逐步掌握具體的操作和使用方法；同時(shí)也注意通過(guò)系統(tǒng)的課堂講解，結(jié)合實(shí)例進(jìn)行原理性講解，使學(xué)生能夠較準(zhǔn)確地理解基本原理和基本概念，提高應(yīng)用這些知識(shí)靈活處理實(shí)際問(wèn)題的能力。在實(shí)驗(yàn)與實(shí)訓(xùn)課教學(xué)中，由授課教師組織全體學(xué)生學(xué)習(xí)實(shí)踐內(nèi)容、注意相關(guān)事項(xiàng)，再由教師給學(xué)生布置實(shí)訓(xùn)任務(wù)，以規(guī)定的項(xiàng)目為導(dǎo)向，讓學(xué)生獨(dú)立完成任務(wù)。

在本課程實(shí)踐教學(xué)環(huán)節(jié)上，課程主講教師直接指導(dǎo)和參與，實(shí)踐教學(xué)模式經(jīng)歷了單純的“課堂教學(xué)”加“上機(jī)實(shí)驗(yàn)”，到現(xiàn)今的 “課堂教學(xué)”＋ “任務(wù)導(dǎo)向”+ “上機(jī)實(shí)訓(xùn)”＋“移動(dòng)端作品設(shè)計(jì)制作”，以及部分優(yōu)秀學(xué)生參加移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)競(jìng)賽培訓(xùn)，參與企業(yè)項(xiàng)目開發(fā)，進(jìn)行創(chuàng)新性作品設(shè)計(jì)與制作研究相結(jié)合的教學(xué)改革過(guò)程，以進(jìn)一步培養(yǎng)和訓(xùn)練大學(xué)生的移動(dòng)端開發(fā)綜合應(yīng)用能力。

具體教學(xué)設(shè)計(jì)內(nèi)容：

單元序號(hào) 相關(guān)知識(shí)點(diǎn)與技能點(diǎn)導(dǎo)航教學(xué)設(shè)計(jì)能力分析引導(dǎo)訓(xùn)練你教--我學(xué)同步訓(xùn)練你做-我導(dǎo)拓展訓(xùn)練你做-我評(píng)項(xiàng)目一1、了解WEX5 2、安裝及啟動(dòng)3、開發(fā)工具介紹平臺(tái)體驗(yàn)HELLO你好 頁(yè)面制作歡迎頁(yè)面制作標(biāo)語(yǔ)頁(yè)面制作項(xiàng)目二1、新建HTML5文件2、P、H1、H2、H3、H4、H5、H6文本標(biāo)簽的應(yīng)用3、DIV布局4、WEX 5組件簡(jiǎn)介（1）組件創(chuàng)建（2）組件的屬性（3）組件的事件（4）面板組件（panel）（5）標(biāo)題欄組件（titleBar）（6）多內(nèi)容頁(yè)組件（contents）5、熟悉采用WEX5平臺(tái)各組件快速實(shí)現(xiàn)HTML5標(biāo)簽功能我的界面我做主T型布局設(shè)計(jì)口型布局設(shè)計(jì)POP布局設(shè)計(jì)項(xiàng)目三1、IMG圖片標(biāo)簽的應(yīng)用2、A、LINK超鏈接標(biāo)簽的應(yīng)用3、將文字和圖片合理的設(shè)計(jì)到一個(gè)頁(yè)面網(wǎng)頁(yè)美化個(gè)人簡(jiǎn)介頁(yè)面制作快樂(lè)購(gòu)公司簡(jiǎn)介頁(yè)面制作長(zhǎng)沙旅游簡(jiǎn)介頁(yè)面制作1、了解表單的作用2、FORM表單標(biāo)簽的應(yīng)用3、INPUT輸入標(biāo)簽的應(yīng)用，包含文本、密碼、文件、單選、復(fù)選、圖像等對(duì)像的輸入4、TEXTAREA標(biāo)簽的應(yīng)用5、BUTTON按鈕的創(chuàng)建，包含普通按鈕、提交按鈕、取消按鈕6、掌握表單標(biāo)簽及內(nèi)部標(biāo)簽的綜合應(yīng)用7、WEX5對(duì)應(yīng)組件（1）模型組件(model)（2）輸入框組件（input）（3）滾動(dòng)視圖組件（4）按鈕組件（button）8、利用WEX5平臺(tái)進(jìn)一步熟悉并掌握HTML5表單的制作1、長(zhǎng)沙旅游各景點(diǎn)導(dǎo)航條設(shè)計(jì)2、長(zhǎng)沙旅游景點(diǎn)評(píng)價(jià)注冊(cè)頁(yè)面制作1、快樂(lè)購(gòu)公司導(dǎo)航條設(shè)計(jì)2、快樂(lè)購(gòu)公司論壇注冊(cè)頁(yè)面制作HTML5表單1、個(gè)人網(wǎng)頁(yè)導(dǎo)航條設(shè)計(jì)2、個(gè)性設(shè)置頁(yè)面制作項(xiàng)目四項(xiàng)目五1、SELECT、OPTION列表的應(yīng)用2、WEX5對(duì)應(yīng)組件（1）選擇框組件（select）（2）列表組件（list）（3）行 列 組 件（row、col）（4）數(shù)據(jù)組件（Data）（5）數(shù)據(jù)的輸入與編輯HTML5數(shù)據(jù)列表個(gè)人特長(zhǎng)、 愛好條目信息設(shè)計(jì)快樂(lè)購(gòu)各類產(chǎn)品條目信息設(shè)計(jì)長(zhǎng)沙旅游景點(diǎn)路線展示設(shè)計(jì)項(xiàng)目六1、了解HTML5的基本語(yǔ)法2、HTML5樣式的各種選擇器，包含類、ID、標(biāo)簽、父子、屬性等選擇器3、STYLE標(biāo)簽的應(yīng)用4、文本、圖片、布局樣式的設(shè)置的綜合應(yīng)用5、熟悉在WEX5平臺(tái)中HTML5樣式的創(chuàng)建和書寫HTML5樣式猜年齡游戲頁(yè)面的制作猜公司產(chǎn)品價(jià)格游戲頁(yè)面的制作猜紅桃A游戲頁(yè)面的制作

項(xiàng)目七HTML5交互設(shè)計(jì)個(gè)人記帳本的設(shè)計(jì)添加快樂(lè)購(gòu)公司產(chǎn)品設(shè)計(jì)添加長(zhǎng)沙旅游景點(diǎn)設(shè)計(jì)1、SCRIPT標(biāo)簽的應(yīng)用2、變量、常量的應(yīng)用3、JAVASCRIPT函數(shù)的應(yīng)用，包含內(nèi)置函數(shù)、Date函 數(shù)、String函 數(shù)、Array函數(shù)、自定義函數(shù)4、DOM編程框架的應(yīng)用5、BOM編程的應(yīng)用6、JAVASCRIPT事件的應(yīng)用，包含onload、onclick、onreset、onsubmit等7、利用事件和自定義函數(shù)進(jìn)行頁(yè)面內(nèi)容的檢測(cè)和跳轉(zhuǎn)8、利用WEX5進(jìn)行代碼綁定項(xiàng)目八HTML5 APP開發(fā)1、HTML5頁(yè)面調(diào)試2、HTML5本地APP包生成3、APP發(fā)布到智能手機(jī)4、HTML5云部署（1）注冊(cè)、登錄CLOUDX 5（2）在CLOUDX 5上部署APP 5、云端APP二維碼生成個(gè)人網(wǎng)站所有頁(yè)面生成APP并發(fā)布到手機(jī)和云端快樂(lè)購(gòu)所有頁(yè)面生成APP并發(fā)布到手機(jī)和云端長(zhǎng)沙旅游所有網(wǎng)頁(yè)生成APP并發(fā)布到手機(jī)和云端仿微店APP開發(fā)掛號(hào)應(yīng)用APP開發(fā)1、熟悉HTML5各標(biāo)簽、表單的綜合運(yùn)用2、靈活選擇HTML5樣式修飾、布局頁(yè)面3、熟悉利用JAVASCRIPT進(jìn)行HTML5頁(yè)面之間的交互設(shè)計(jì)4、熟悉APP的調(diào)試、打包、發(fā)布等操作流程項(xiàng)目九綜合項(xiàng)目開發(fā)理財(cái)應(yīng)用APP開發(fā)

教學(xué)改革是一項(xiàng)長(zhǎng)期而堅(jiān)巨的工作，通過(guò)課程改革，把《HTML5移動(dòng)端開發(fā)》課程建設(shè)成為能反映國(guó)內(nèi)實(shí)踐類課程建設(shè)最新成果和最高水平，體現(xiàn)現(xiàn)代職業(yè)教育理念，教學(xué)內(nèi)容先進(jìn)、教學(xué)方法完善、教學(xué)手段靈活、特色鮮明、教學(xué)效果顯著的課程。

[1]馬科主篇.HTML 5 APP商業(yè)開發(fā)實(shí)戰(zhàn)教程.高等教育出版社，2016

[2]張寶慧.構(gòu)建計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)工作過(guò)程系統(tǒng)化課程體系的研究.河北師范大學(xué)（J），2014

[3]高春燕.高職基于工作過(guò)程的課程開發(fā)實(shí)踐研究——以前臺(tái)網(wǎng)頁(yè)設(shè)計(jì)《HTML+CSS》為例.才智，2015

[4]沈玲.基于工作過(guò)程的高職課程建設(shè)研究.湖南師范大學(xué)，2012

（作者單位：長(zhǎng)沙商貿(mào)旅游職業(yè)技術(shù)學(xué)院）