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

◆李高峰

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

◆李高峰

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

項目七HTML5交互設(shè)計個人記帳本的設(shè)計添加快樂購公司產(chǎn)品設(shè)計添加長沙旅游景點設(shè)計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)行頁面內(nèi)容的檢測和跳轉(zhuǎn)8、利用WEX5進(jìn)行代碼綁定項目八HTML5 APP開發(fā)1、HTML5頁面調(diào)試2、HTML5本地APP包生成3、APP發(fā)布到智能手機4、HTML5云部署（1）注冊、登錄CLOUDX 5（2）在CLOUDX 5上部署APP 5、云端APP二維碼生成個人網(wǎng)站所有頁面生成APP并發(fā)布到手機和云端快樂購所有頁面生成APP并發(fā)布到手機和云端長沙旅游所有網(wǎng)頁生成APP并發(fā)布到手機和云端仿微店APP開發(fā)掛號應(yīng)用APP開發(fā)1、熟悉HTML5各標(biāo)簽、表單的綜合運用2、靈活選擇HTML5樣式修飾、布局頁面3、熟悉利用JAVASCRIPT進(jìn)行HTML5頁面之間的交互設(shè)計4、熟悉APP的調(diào)試、打包、發(fā)布等操作流程項目九綜合項目開發(fā)理財應(yīng)用APP開發(fā)

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

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

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

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

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

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