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

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

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

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

一、問題的提出

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、總結(jié)

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

責(zé)任編輯陳春陽