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

李夏君

在移動互聯(lián)網(wǎng)環(huán)境下，探索中職計算機專業(yè)前端技術(shù)課程改革的新思路，創(chuàng)新理念，突出移動端技術(shù)的特征非常必要?？赏ㄟ^改進美工設(shè)計課程，增加手機界面設(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)用。

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

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

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

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

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

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

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

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

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

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

五、課程改革的實施

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

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

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

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

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

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

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

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

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

2.以前端語言為入門，打好手機開發(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）”，它是用來進行網(wǎng)頁風(fēng)格設(shè)計的，可以使人更能有效地控制網(wǎng)頁外觀，而且還可以擴充精確指定網(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、實現(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能夠輕松實現(xiàn)類似桌面的應(yīng)用體驗。

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

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

兩者合并為一門課程，名為《前端技術(shù)》，傳授JavaScript的語句、對象、window以及js庫；傳授jQuery的語法、效果、jQuery html、jQuery ajax

每周8節(jié)

第三學(xué)期

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

六、總結(jié)

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