文/廣東省輕工職業(yè)技術(shù)學(xué)校 李夏君

中職計(jì)算機(jī)專業(yè)前端技術(shù)課程改革探索

文/廣東省輕工職業(yè)技術(shù)學(xué)校 李夏君

在移動(dòng)互聯(lián)網(wǎng)環(huán)境下，探索中職計(jì)算機(jī)專業(yè)前端技術(shù)課程改革的新思路，創(chuàng)新理念，突出移動(dòng)端技術(shù)的特征非常必要?？赏ㄟ^改進(jìn)美工設(shè)計(jì)課程，增加手機(jī)界面設(shè)計(jì)部分;在《網(wǎng)頁布局》課程增加html5知識(shí)以及處理不同瀏覽器兼容性部分;合并JavaScript和jQuery，開設(shè)《前端技術(shù)》課程，傳授有關(guān)語法、對(duì)象和框架有關(guān)知識(shí)，從而讓學(xué)生掌握相關(guān)的技能技術(shù)，縮短與企業(yè)接軌的時(shí)間。

一、問題的提出

前端技術(shù)是從網(wǎng)頁制作演變而來的，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。前端開發(fā)技術(shù)包括4個(gè)部分:前端美工，瀏覽器兼容，CSS、HTML和JavaScript語言，以及jQuery和Html5的應(yīng)用。

我校計(jì)算機(jī)專業(yè)現(xiàn)設(shè)有有關(guān)網(wǎng)站前端開發(fā)課程，分別是第一學(xué)期《Photoshop》(著重網(wǎng)頁界面美工設(shè)計(jì))，第二學(xué)期開設(shè)的《網(wǎng)頁布局》(采用div/css實(shí)現(xiàn)網(wǎng)頁布局)，還有第四學(xué)期的綜合實(shí)訓(xùn)課《網(wǎng)站開發(fā)設(shè)計(jì)》，將所學(xué)美工設(shè)計(jì)和網(wǎng)頁布局知識(shí)綜合應(yīng)用。所有這些課程均在pc端實(shí)現(xiàn)，無論是課程的數(shù)量還是課程的內(nèi)容，都無法滿足市場(chǎng)需要。

二、移動(dòng)端技術(shù)發(fā)展現(xiàn)況、企業(yè)用人需要和課程改革的必要性

隨著寬帶無線接入技術(shù)和移動(dòng)終端技術(shù)的飛速發(fā)展，手機(jī)的運(yùn)用迅猛發(fā)展。工信部最新數(shù)據(jù)顯示，截至2015年12月底，我國手機(jī)用戶數(shù)達(dá)13．06億戶，手機(jī)用戶普及率達(dá)95．5部/百人，顯示目前我國以快速的步伐進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代。與此同時(shí)，企業(yè)需要大量移動(dòng)端的前端開發(fā)人員。例如，在“智聯(lián)招聘”網(wǎng)站的招聘崗位輸入“前端開發(fā)”，工作地點(diǎn)選擇“廣州”，一共得出1578條搜索結(jié)果。

另一方面，從學(xué)校出來的學(xué)生如果在校期間沒有學(xué)習(xí)相關(guān)技術(shù)知識(shí)，無法滿足企業(yè)的要求。大勢(shì)所趨，在手機(jī)蓬勃發(fā)展的今天，如何對(duì)前端技術(shù)課程進(jìn)行改革，帶領(lǐng)學(xué)生，讓其技術(shù)從pc端走向移動(dòng)端，是一線計(jì)算機(jī)專業(yè)教師必須面對(duì)的問題。

三、移動(dòng)端開發(fā)與網(wǎng)站開發(fā)的比較

移動(dòng)端開發(fā)主要是應(yīng)用在手機(jī)網(wǎng)站制作，而移動(dòng)端開發(fā)與網(wǎng)站開發(fā)的流程是一樣，都是經(jīng)過需求分析之后，建立網(wǎng)站架構(gòu)，根據(jù)方案完成初稿設(shè)計(jì)出首頁的尺寸和風(fēng)格，再制定出界面設(shè)計(jì)圖。通過對(duì)項(xiàng)目總體設(shè)計(jì)之后，劃分模塊進(jìn)行實(shí)現(xiàn)。

無論是網(wǎng)站編程還是移動(dòng)端編程，前端所需要的知識(shí)和理論基礎(chǔ)是相同的。兩者的區(qū)別是在現(xiàn)實(shí)中實(shí)現(xiàn)的媒介不同，一個(gè)是個(gè)人電腦，一個(gè)是手機(jī)。媒介大小、材質(zhì)和觸摸方式?jīng)Q定了界面設(shè)計(jì)和實(shí)現(xiàn)的方法不一樣。web平臺(tái)的規(guī)范是鍵盤+鼠標(biāo)，移動(dòng)設(shè)備平臺(tái)的規(guī)范是鍵盤+手指(觸摸和手勢(shì))。

四、前端開發(fā)的技術(shù)、能力要求和薪資水平

按照智聯(lián)招聘(“http://sou．zhaopin．com/”)發(fā)布的招聘信息，通過歸納整理，可以得出當(dāng)前企業(yè)對(duì)前端開發(fā)的技術(shù)和能力要求。

表1 企業(yè)對(duì)前端開發(fā)的技術(shù)和能力要求

目前，前端開發(fā)工程師需求主要集中在一線大城市，北京、上海、深圳、廣州等;這些一線城市的薪資水平是非?？捎^的，從“智聯(lián)招聘”中統(tǒng)計(jì)得出，前端開發(fā)工程師月工資介乎4000～15000之間。

五、課程改革的實(shí)施

根據(jù)上述市場(chǎng)調(diào)查所得的技術(shù)和能力要求，筆者按照美工設(shè)計(jì)、前端開發(fā)基礎(chǔ)(HTML、CSS、JavaScript)、jQuery和html5的應(yīng)用這三方面對(duì)現(xiàn)任課程進(jìn)行改革。

1．美工設(shè)計(jì)除了傳統(tǒng)界面設(shè)計(jì)之外，增加手機(jī)界面設(shè)計(jì)

手機(jī)用戶界面是用戶與手機(jī)系統(tǒng)、應(yīng)用交互的窗口，手機(jī)界面的設(shè)計(jì)必須基于手機(jī)設(shè)備的物理特性和系統(tǒng)應(yīng)用的特性進(jìn)行合理的設(shè)計(jì)。手機(jī)界面設(shè)計(jì)是個(gè)復(fù)雜的有不同學(xué)科參與的工程，其中最重要的兩點(diǎn)的就是產(chǎn)品本身的UI設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)，只有將這兩者完美融合才能打造出優(yōu)秀的作品。手機(jī)界面設(shè)計(jì)著重于風(fēng)格確定、圖片設(shè)計(jì)和色彩調(diào)配。

(1)風(fēng)格確定

根據(jù)界面的總體風(fēng)格的策劃思路，結(jié)合界面其他元素的需要，對(duì)手機(jī)界面的整體風(fēng)格進(jìn)行考慮，以保證圖標(biāo)和整體效果的融合。風(fēng)格鮮明的設(shè)計(jì)是手機(jī)界面設(shè)計(jì)的重要工作。目前，無論是引領(lǐng)風(fēng)尚的iphone，還是市場(chǎng)新寵小米手機(jī)，都推崇極簡(jiǎn)扁平化風(fēng)格。

(2)圖標(biāo)設(shè)計(jì)

圖標(biāo)功能:在圖形設(shè)計(jì)之前，圖標(biāo)非常重要，圖標(biāo)的功能是我們進(jìn)行圖標(biāo)造型設(shè)計(jì)的標(biāo)準(zhǔn)和依托。圖標(biāo)一般先用illustrator進(jìn)行繪制，然后photoshop做圖標(biāo)設(shè)計(jì)的后期效果處理。所有界面上同級(jí)、同類的圖標(biāo)要保證表現(xiàn)形式的統(tǒng)一，避免用戶視覺上的紊亂。

(3)色彩調(diào)配

由于手機(jī)本身的限制，在色彩的還原程度上有一定限制，因此在選用色彩時(shí)要根據(jù)使用的屏幕進(jìn)行調(diào)節(jié)，方法就是將設(shè)計(jì)好的效果圖導(dǎo)入相應(yīng)的手機(jī)中，用該手機(jī)自帶的圖片瀏覽軟件進(jìn)行全屏效果查看或者請(qǐng)求開發(fā)人員幫助。

2．以前端語言為入門，打好手機(jī)開發(fā)基礎(chǔ)

前端開發(fā)最基本也是最必須的三個(gè)技能:HTML、CSS、JavaScript。HTML指的是超文本標(biāo)記語言(Hyper Text Markup Language)，是用來建立網(wǎng)頁架構(gòu)的基本語言。級(jí)聯(lián)樣式表(Cascading Style Sheet)簡(jiǎn)稱“CSS”，通常又稱為“風(fēng)格樣式表(Style Sheet)”，它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的，可以使人更能有效地控制網(wǎng)頁外觀，而且還可以擴(kuò)充精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果的能力。HTML和div/css這兩方面知識(shí)已包含在《網(wǎng)頁布局》課程，自2014年開設(shè)至今，一直得到學(xué)生好評(píng)。

JavaScript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務(wù)器端語言遺留的速度問題，為客戶提供更流暢的瀏覽效果。JavaScrip尚未設(shè)立課程，在這里筆者建議開設(shè)新課程，命名為《前端技術(shù)》，傳授內(nèi)容包括JavaScript的語句、對(duì)象、window以及js庫。

3．增設(shè)JQuery、Html5和瀏覽器兼容知識(shí)

JQuery是一個(gè)Javascript庫。它兼容CSS3，還兼容各種瀏覽器。jQuery使用戶能更方便地處理HTML、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。在課程設(shè)置上，可以將jQuery合并到《前端技術(shù)》中，具體傳授內(nèi)容包括jQuery的語法、效果、jQuery html、jQuery ajax等等。

Html5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用超文本標(biāo)記語言(HTML)的第五次重大修改。Html5是下一代Web語言，它為下一代web提供了全新的框架和平臺(tái)，包括提供免插件的音視頻、圖像動(dòng)畫、本體存儲(chǔ)以及更多酷炫而且重要的功能，并使這些應(yīng)用標(biāo)準(zhǔn)化，從而使Web能夠輕松實(shí)現(xiàn)類似桌面的應(yīng)用體驗(yàn)。

瀏覽器兼容性問題指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。解決辦法就是在開發(fā)過程中使用當(dāng)前比較流行的JS，CSS框架，如jQuery，YUI等等，因?yàn)檫@些框架無論是底層的還是應(yīng)用層的一般都已經(jīng)做好了瀏覽器兼容，所以可以放心使用。除此之外，CSS提供了很多hack接口可供使用，hack既可以實(shí)現(xiàn)跨瀏覽器的兼容，也可以實(shí)現(xiàn)同一瀏覽器不同版本的兼容。

Html5和瀏覽器兼容知識(shí)可以包含在《網(wǎng)頁布局》課程中，作為html的延伸來講明。

表2 課堂內(nèi)容改革、課時(shí)和開設(shè)時(shí)間

除此之外，第四學(xué)期的綜合課程《網(wǎng)站開發(fā)設(shè)計(jì)》可以增設(shè)一個(gè)項(xiàng)目:手機(jī)前端開發(fā)，作為前端課程的綜合運(yùn)用和檢驗(yàn)。一部分學(xué)生可以以小組合作形式，完成一個(gè)基本手機(jī)前端開發(fā)。

六、總結(jié)

在移動(dòng)互聯(lián)網(wǎng)環(huán)境下，筆者根據(jù)企業(yè)需要和多年中職教學(xué)經(jīng)驗(yàn)，探索前端技術(shù)課程整合的新思路，創(chuàng)新理念，突出移動(dòng)端技術(shù)的特征。提出改進(jìn)美工設(shè)計(jì)課程，增加手機(jī)界面設(shè)計(jì)部分;將網(wǎng)頁布局增加html5知識(shí)以及處理不同瀏覽器兼容性問題;增設(shè)JavaScript和jQuery課程，傳授有關(guān)語法、對(duì)象和框架。目的在于讓學(xué)生掌握移動(dòng)端技能技術(shù)，縮短與企業(yè)接軌的時(shí)間。

責(zé)任編輯陳春陽