趙大偉++陳剛

摘要：隨著Web2.0技術(shù)普及和人們對(duì)用戶體驗(yàn)的要求越來越高，傳統(tǒng)的Web界面已經(jīng)不能滿足人們對(duì)交互特性的要求， Web前端開發(fā)技術(shù)越來越受到重視，各大行業(yè)對(duì)Web前端開發(fā)方面的人才需求量也大幅度提升。本文就教學(xué)過程中Web前端開發(fā)技術(shù)課程，提出一種新的教學(xué)模式，并探討了新模式中具體的教學(xué)改革及實(shí)施方法。

關(guān)鍵詞：Web2.0；前端開發(fā)；Html5；課程

中圖分類號(hào)：TP301.6 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）24-0109-02

Research on the Training Mode of the Web Front-end Development Technology

ZHAO Da-wei，CHEN Gang

（Department of Computer， College of Humanities & Sciences of Northeast Normal University， Changchun 130117， China）

Abstract： With the popularization of Web2.0 technology and the requirements of the user experience， the traditional Web interface has been unable to meet the requirements of the interactive features， Web front-end development technology is more and more attention， and the major industries of the Web front-end development needs of the talent is also a substantial increase. This paper puts forward a new teaching mode， and discusses the specific teaching reform and implementation of the new teaching mode in the course of developing Web in the teaching process.

Key words： Web2.0； Front-end development； Html5； Course

1 前言

傳統(tǒng)的Web 前端開發(fā)是指靜態(tài)網(wǎng)頁的布局的設(shè)計(jì)，是 Web1.0 時(shí)代開發(fā)人員的主要工作。那個(gè)時(shí)代，網(wǎng)站的內(nèi)容主要是以靜態(tài)的頁面為主，人們進(jìn)入網(wǎng)站也主要是通過瀏覽網(wǎng)頁的內(nèi)容，獲取相關(guān)的信息。2005 年以后，隨首Web2.0 的發(fā)展和普及，各種交互式的Web 應(yīng)用大量涌現(xiàn)，人們?cè)谠L問網(wǎng)站時(shí)用戶體驗(yàn)的要求程度越來越高，網(wǎng)站的前端頁面的設(shè)計(jì)由此發(fā)生了質(zhì)的變化。前端頁面上良好的軟件化的交互形式能夠?yàn)橛脩籼峁┝烁玫氖褂皿w驗(yàn)，所以前端頁面的開發(fā)技術(shù)難度越來越大，此時(shí)的Web前端開發(fā)是指綜合運(yùn)用HTML、CSS、DIV、JavaScript、DOM和AJAX等技術(shù)實(shí)現(xiàn)網(wǎng)站的整體布局和改善用戶體驗(yàn)的工作。在一些技術(shù)比較發(fā)達(dá)的國家，前端開發(fā)技術(shù)人員已經(jīng)獨(dú)立出來并形成專門的開發(fā)群體，而目前我國缺乏大量的前端開發(fā)人員，隨著Web2.0的普及，未來幾年國內(nèi)各大行業(yè)對(duì)Web前端開發(fā)方面的人才需求將會(huì)大幅提升，Web前端開發(fā)技術(shù)人才也會(huì)日益受到重視。

一位優(yōu)秀的Web前端開發(fā)技術(shù)人員在知識(shí)體系上既要有廣度，又要有深度，傳統(tǒng)的網(wǎng)頁設(shè)計(jì)人員只需要掌握DreamWeaver、Flash和Photoshop等基本的工具軟件就可以勝任，這也是目前很多高校中網(wǎng)頁設(shè)計(jì)課程體系中的核心課程，現(xiàn)在的Web前端開發(fā)人員只掌握這些是遠(yuǎn)遠(yuǎn)不夠的，現(xiàn)在的前端開發(fā)無論是技術(shù)上還是難度上都更接近于網(wǎng)站后臺(tái)的開發(fā)，所以需要的更加專業(yè)的技術(shù)人員。為了更好地進(jìn)行Web前端開發(fā)技術(shù)人才的培養(yǎng)我們針對(duì)教學(xué)計(jì)劃進(jìn)行了修訂，結(jié)合當(dāng)前對(duì)Web開發(fā)技術(shù)人員的具體的技術(shù)需求進(jìn)行教學(xué)。

2 Web前端開發(fā)技術(shù)課程改革

2.1課程設(shè)置

課程改革的目的是適應(yīng)web 2.0發(fā)展和普及，培養(yǎng)掌握基本的Web前端開發(fā)技術(shù)，其中包括HTML、CSS、DIV、JavaScript、DOM和AJAX等，還要掌握網(wǎng)站性能優(yōu)化、搜索引擎優(yōu)化和服務(wù)器端開發(fā)技術(shù)的基礎(chǔ)知識(shí)，掌握運(yùn)用各種Web前端開發(fā)與測(cè)試工具進(jìn)行輔助開發(fā)等。

以Web 前端開發(fā)工程師崗位的技術(shù)需求為導(dǎo)向設(shè)置課程，使其滿足Web前端開發(fā)的技術(shù)人才能力的要求，在教學(xué)內(nèi)容上設(shè)置為包含HTML、DIV 、CSS、JavaScript、DOM 和AJAX 等5 個(gè)模塊的教學(xué)內(nèi)容。為了更好地適應(yīng)Web開發(fā)技術(shù)的發(fā)展和社會(huì)的需要，課程中我們還適時(shí)增加HTML5[1]方面的知識(shí)。在新構(gòu)建的知識(shí)體系將CSS+DIV 技術(shù)貫穿整個(gè)教學(xué)環(huán)節(jié)中，重點(diǎn)介紹CSS+DIV 技術(shù)在現(xiàn)代網(wǎng)頁前端頁面設(shè)計(jì)中的作用，并在教學(xué)中將JavaScript、DOM 和AJAX 技術(shù)與它們進(jìn)行融合，培養(yǎng)學(xué)生設(shè)計(jì)和開發(fā)現(xiàn)代的前端頁面的能力。

2.2 案例式教學(xué)

Web 前端開發(fā)技術(shù)課程采用案例式教學(xué)，以“任務(wù)驅(qū)動(dòng)，項(xiàng)目拉動(dòng)”為目標(biāo)，規(guī)范Web 前端開發(fā)的流程，以當(dāng)前優(yōu)秀的精品課程網(wǎng)站，優(yōu)秀的企業(yè)網(wǎng)站和典型的商業(yè)網(wǎng)站為案例，學(xué)習(xí)前端頁面的設(shè)計(jì)和開發(fā)，學(xué)習(xí)先進(jìn)的技術(shù)和理念，通過案例教學(xué)使學(xué)生能夠獨(dú)立完成自選課題的設(shè)計(jì)任務(wù)。在教學(xué)中采用基于建構(gòu)主義認(rèn)知靈活性理論的教學(xué)設(shè)計(jì)模式[2]，在教學(xué)設(shè)計(jì)過程中，完成案例時(shí)始終貫串建構(gòu)主義的概念，對(duì)新知識(shí)點(diǎn)分別進(jìn)行感觀建構(gòu)、情景知識(shí)建構(gòu)、實(shí)踐知識(shí)建構(gòu)到最后的重建，形成最終的意義建構(gòu)，學(xué)生在學(xué)習(xí)的過程中可以從不同的情景中實(shí)現(xiàn)對(duì)知識(shí)的理解和認(rèn)識(shí)，并通過案例提高學(xué)生的動(dòng)手和實(shí)踐能力。

教學(xué)過程中，所有的項(xiàng)目案例均來自當(dāng)前企業(yè)中的實(shí)際項(xiàng)目，根據(jù)軟件工程的理論，把項(xiàng)目案例自下而上分為技術(shù)層、操作層和綜合層三個(gè)層次[3]。技術(shù)層注重對(duì)開發(fā)技術(shù)的學(xué)習(xí)和掌握，操作層重點(diǎn)在于技術(shù)的應(yīng)用，將技術(shù)應(yīng)用于實(shí)踐，綜合層則關(guān)注技術(shù)的整合與創(chuàng)新。技術(shù)層是操作層和綜合層的基礎(chǔ)，綜合層則是技術(shù)層和操作層的實(shí)現(xiàn)和深化。實(shí)踐類課程增設(shè)課程設(shè)計(jì)，加強(qiáng)學(xué)生在校期間科研訓(xùn)練及項(xiàng)目經(jīng)歷提高計(jì)算機(jī)專業(yè)學(xué)生Web 前端開發(fā)能力，增強(qiáng)學(xué)生的職業(yè)競(jìng)爭(zhēng)力。

3 Web前端開發(fā)技術(shù)能力培養(yǎng)

3.1 加強(qiáng)教學(xué)資源建設(shè)與教學(xué)平臺(tái)搭建

完善教學(xué)資源，采用與教學(xué)特點(diǎn)相適應(yīng)的課內(nèi)教學(xué)多媒體教學(xué)形式，采用國內(nèi)外重點(diǎn)教材，引進(jìn)國內(nèi)外一流大學(xué)和成功的軟件人才培養(yǎng)機(jī)構(gòu)的先進(jìn)教學(xué)思路，借鑒國外課程，調(diào)整、更新和充實(shí)教學(xué)內(nèi)容，采用雙語教學(xué)方式，努力與軟件人才國際化的培養(yǎng)目標(biāo)接軌。

構(gòu)建自主學(xué)習(xí)的資源平臺(tái)，搭建程序設(shè)計(jì)項(xiàng)目資源案例庫，豐富學(xué)生課外學(xué)習(xí)層面，建立相應(yīng)的課程教學(xué)網(wǎng)站，實(shí)現(xiàn)課內(nèi)課外相結(jié)合的教學(xué)模式[4]。

3.2 實(shí)踐基地建設(shè)與職業(yè)能力訓(xùn)練

除了在實(shí)習(xí)過程中的校外教學(xué)基地，學(xué)校還根據(jù)Web前端開發(fā)技術(shù)的具體特點(diǎn)，建設(shè)一批基于校園的網(wǎng)絡(luò)工作室、互聯(lián)網(wǎng)企業(yè)于一體的綜合性實(shí)踐基地。在教學(xué)過程中，教師可以帶領(lǐng)學(xué)生進(jìn)入基地，參與到實(shí)際的web開發(fā)與社會(huì)實(shí)踐中去，包括校園的網(wǎng)絡(luò)工作室等基地就是由學(xué)生進(jìn)行管理和維護(hù)，提高學(xué)生的職業(yè)能力，使學(xué)生完成從理論到實(shí)踐的過渡，從學(xué)校到“職場(chǎng)”的過渡。以上基地的建立強(qiáng)化了學(xué)生的實(shí)踐和崗位適應(yīng)能力。教學(xué)中，我們要求學(xué)生的項(xiàng)目、課題的實(shí)踐性環(huán)節(jié)不少于20%，強(qiáng)化學(xué)生實(shí)踐能力的訓(xùn)練，開設(shè)了多門反映Web前端開發(fā)技術(shù)最新發(fā)展的課程，為培養(yǎng)學(xué)生的職業(yè)素質(zhì)提供平臺(tái)。

4 多角度、綜合性的考核提高職業(yè)素養(yǎng)

Web前端開發(fā)技術(shù)的實(shí)踐性比較強(qiáng)，我們也希望通過課程改革提高學(xué)生的開發(fā)技術(shù)和能力，最終提高學(xué)生的職業(yè)素養(yǎng)和設(shè)計(jì)能力，進(jìn)入社會(huì)后能夠勝任專業(yè)崗位的需求。在Web前端開發(fā)技術(shù)課程考核中，我們采用多樣化、職業(yè)性的考核評(píng)價(jià)體系取代傳統(tǒng)的考核方式。

Web前端開發(fā)技術(shù)課程的考核，我們采取的多樣化的考核方式，如作品演示、作品集成、項(xiàng)目驗(yàn)收等。將學(xué)生的作品和自選課題，作為評(píng)價(jià)考核的重要組成部分，學(xué)生在匯報(bào)和演示作品的同時(shí)鍛煉了學(xué)生口頭表達(dá)能力、與人溝通能力等多方面能力，也加深了他們對(duì)Web前端開發(fā)技術(shù)和項(xiàng)目開發(fā)的深入了解。在項(xiàng)目驗(yàn)收考核中，我們?yōu)榱俗寣W(xué)生更好地完成項(xiàng)目，分為階段驗(yàn)收和綜合驗(yàn)收，階段驗(yàn)收用來檢查和了解學(xué)生的學(xué)習(xí)情況，了解學(xué)生對(duì)Web前端技術(shù)的掌握情況，及時(shí)的發(fā)現(xiàn)問題并找出解決辦法。綜合驗(yàn)收是通過學(xué)生對(duì)具體項(xiàng)目案例的實(shí)現(xiàn)情況，來檢驗(yàn)學(xué)生的Web前端開發(fā)能力及相關(guān)的綜合能力，這種考核方式既能客觀的評(píng)價(jià)學(xué)生的能力水平又能夠培養(yǎng)他們的團(tuán)結(jié)協(xié)作精神，促進(jìn)學(xué)生們綜合職業(yè)能力培養(yǎng)和提高[5]。

5 結(jié)束語

隨著Web技術(shù)的發(fā)展與變化，企業(yè)與社會(huì)對(duì)Web前端開發(fā)技術(shù)人才的要求越來越高，計(jì)算機(jī)相關(guān)專業(yè)的人才培養(yǎng)模式也要做出改變。Web前端開發(fā)技術(shù)課程的設(shè)立與改革使學(xué)生能夠更早的接觸最新的技術(shù)和知識(shí)，達(dá)到了讓學(xué)生跨入互聯(lián)網(wǎng)web 開發(fā)技術(shù)的大門。隨著互聯(lián)網(wǎng)技術(shù)發(fā)展和更新，我們的教學(xué)及課程也會(huì)適應(yīng)W3C的標(biāo)準(zhǔn)而做出調(diào)整和更新。比如在技術(shù)的選擇上要適應(yīng)瀏覽器兼容性、web 安全等，增加移動(dòng)互聯(lián)網(wǎng)相關(guān)設(shè)備的前端技術(shù)方面的內(nèi)容，適應(yīng)產(chǎn)業(yè)的需求，為互聯(lián)網(wǎng)行業(yè)培養(yǎng)合格的人才。同時(shí)，針對(duì)行業(yè)應(yīng)用，細(xì)化人才培養(yǎng)目標(biāo)，建立“多元”化的培養(yǎng)目標(biāo)模型； 通過校企合作、基地建設(shè)等不斷地完善我們的實(shí)驗(yàn)和實(shí)踐體系，切實(shí)提高學(xué)生的設(shè)計(jì)、應(yīng)用和創(chuàng)新的能力。

參考文獻(xiàn)：

[1] 馬新強(qiáng)，孫兆，袁哲.Web標(biāo)準(zhǔn)與HTML5的核心技術(shù)研究[J].重慶文理學(xué)院學(xué)報(bào)：自然科學(xué)版，2010，29（6）：61-65.

[2] 秦美峰.Web前端編程實(shí)踐性教學(xué)的探索[J].福建電腦，2015（1）：117-119.

[3] 儲(chǔ)久良.Web前端開發(fā)技術(shù)課程教學(xué)改革與實(shí)踐[J].計(jì)算機(jī)教育，2014（14）：12-15.

[4] 唐燦.下一代Web界面前端技術(shù)綜述[J].重慶工商大學(xué)學(xué)報(bào)：自然科學(xué)版，2009，26（4）：350-354.

[5] 阮曉龍.Web前端開發(fā)課程內(nèi)容改革的探索與嘗試[J].中國現(xiàn)代教育裝備，2015（4）：94-97.