中職計算機專業前端技術課程改革探索

李夏君

在移動互聯網環境下，探索中職計算機專業前端技術課程改革的新思路，創新理念，突出移動端技術的特征非常必要。可通過改進美工設計課程，增加手機界面設計部分；在《網頁布局》課程增加html5知識以及處理不同瀏覽器兼容性部分；合并JavaScript和jQuery，開設《前端技術》課程，傳授有關語法、對象和框架有關知識，從而讓學生掌握相關的技能技術，縮短與企業接軌的時間。

一、問題的提出

前端技術是從網頁制作演變而來的，它的主要職能就是把網站的界面更好地呈現給用戶。前端開發技術包括4個部分：前端美工，瀏覽器兼容，CSS、HTML和JavaScript語言，以及jQuery和Html5的應用。

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

二、移動端技術發展現況、企業用人需要和課程改革的必要性

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

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

三、移動端開發與網站開發的比較

移動端開發主要是應用在手機網站制作，而移動端開發與網站開發的流程是一樣，都是經過需求分析之后，建立網站架構，根據方案完成初稿設計出首頁的尺寸和風格，再制定出界面設計圖。通過對項目總體設計之后，劃分模塊進行實現。

無論是網站編程還是移動端編程，前端所需要的知識和理論基礎是相同的。兩者的區別是在現實中實現的媒介不同，一個是個人電腦，一個是手機。媒介大小、材質和觸摸方式決定了界面設計和實現的方法不一樣。web平臺的規范是鍵盤+鼠標，移動設備平臺的規范是鍵盤+手指（觸摸和手勢）。

四、前端開發的技術、能力要求和薪資水平

按照智聯招聘（“http：//sou.zhaopin.com/”）發布的招聘信息，通過歸納整理，可以得出當前企業對前端開發的技術和能力要求。

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

五、課程改革的實施

根據上述市場調查所得的技術和能力要求，筆者按照美工設計、前端開發基礎（HTML、CSS、JavaScript）、jQuery和html5的應用這三方面對現任課程進行改革。

1.美工設計除了傳統界面設計之外，增加手機界面設計

手機用戶界面是用戶與手機系統、應用交互的窗口，手機界面的設計必須基于手機設備的物理特性和系統應用的特性進行合理的設計。手機界面設計是個復雜的有不同學科參與的工程，其中最重要的兩點的就是產品本身的UI設計和用戶體驗設計，只有將這兩者完美融合才能打造出優秀的作品。手機界面設計著重于風格確定、圖片設計和色彩調配。

（1）風格確定

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

（2）圖標設計

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

（3）色彩調配

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

2.以前端語言為入門，打好手機開發基礎

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

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

3.增設JQuery、Html5和瀏覽器兼容知識

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

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

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

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

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

每周8節

第三學期

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

六、總結

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