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

李夏君?オ?

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

一、問(wèn)題的提出

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

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

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

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

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

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

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

無(wú)論是網(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ī)范是鍵盤(pán)+鼠標(biāo)，移動(dòng)設(shè)備平臺(tái)的規(guī)范是鍵盤(pán)+手指（觸摸和手勢(shì)）。

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

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

遇到問(wèn)題能夠積極主動(dòng)去學(xué)習(xí)并解決問(wèn)題

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

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

根據(jù)上述市場(chǎng)調(diào)查所得的技術(shù)和能力要求，筆者按照美工設(shè)計(jì)、前端開(kāi)發(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ì)的重要工作。目前，無(wú)論是引領(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)一，避免用戶視覺(jué)上的紊亂。

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

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

2.以前端語(yǔ)言為入門(mén)，打好手機(jī)開(kāi)發(fā)基礎(chǔ)

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

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

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

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

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

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

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

六、總結(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)頁(yè)布局增加html5知識(shí)以及處理不同瀏覽器兼容性問(wèn)題；增設(shè)JavaScript和jQuery課程，傳授有關(guān)語(yǔ)法、對(duì)象和框架。目的在于讓學(xué)生掌握移動(dòng)端技能技術(shù)，縮短與企業(yè)接軌的時(shí)間。

責(zé)任編輯陳春陽(yáng)