劉蕾 劉冰月
摘 要:Web前端技術(shù)在軟件開發(fā)中的地位十分重要,無論是臺式機還是移動端的軟件產(chǎn)品都離不開前端技術(shù),因此高等院校計算機專業(yè)都普遍開設(shè)了Web前端課程,甚至一些文科專業(yè)也開展了學(xué)習(xí)。Web前端課程通常包括一系列課程,比如網(wǎng)頁設(shè)計與開發(fā)、JavaScript編程、HTML5網(wǎng)頁制作等,內(nèi)容都是圍繞HTML、CSS、JavaScript知識體系展開。針對該類課程知識點多,學(xué)生層次復(fù)雜的問題,基于多年教學(xué)總結(jié),提出了一套前端課程的設(shè)置方案,探討在Web前端課程中應(yīng)該包含的知識體系、教材選用和教學(xué)實踐等問題。這套教學(xué)知識體系適用于計算機類專業(yè)學(xué)生,在教學(xué)過程中取得了良好的教學(xué)效果。
關(guān)鍵詞:Web前端技術(shù);知識體系;教材選用;教學(xué)實踐
中圖分類號:TP31 文獻標識碼:A
1 引言(Introduction)
Web前端是計算機應(yīng)用開發(fā)的重要領(lǐng)域。Web前端開發(fā)人員需要熟練掌握HTML、CSS、JavaScript、Ajax等核心的前端開發(fā)技術(shù),同時具備互聯(lián)網(wǎng)交互設(shè)計能力,熟悉瀏覽器工作原理和數(shù)據(jù)通信協(xié)議,掌握最新的開發(fā)工具和開發(fā)框架[1]。由于前端技術(shù)內(nèi)容豐富、包羅萬象,目前沒有哪門課能夠概括其全部,因此,前端技術(shù)通常以各種形式出現(xiàn)在不同的課程中。例如哈佛大學(xué)的公開課《計算機導(dǎo)論》中,講述了HTML、CSS、JavaScript、Ajax,以及網(wǎng)站網(wǎng)頁開發(fā)等內(nèi)容;斯坦福大學(xué)的公開課《用網(wǎng)頁技術(shù)開發(fā)手機應(yīng)用》中,講述了Canvas、SVG、OpenGL、WebGL、JavaScript、HTML5等;拉籌伯大學(xué)的公開課《新聞人的網(wǎng)絡(luò)編輯和發(fā)布》中,講述了HTML和CSS的使用方法,并且提出無論是文科生還是理科生都應(yīng)該了解網(wǎng)頁制作的知識;清華大學(xué)的《Web前端技術(shù)實訓(xùn)課程》中,講述Web交互技術(shù)發(fā)展趨勢、瀏覽器渲染技術(shù)、JavaScript高級程序設(shè)計、HTML5&CSS3;技術(shù)、JS關(guān)鍵技術(shù)、JS架構(gòu)設(shè)計等主題。在計算機專業(yè)中,Web前端技術(shù)是分布式網(wǎng)站建設(shè)、JavaScript高級編程、Java Web網(wǎng)站開發(fā)、Android移動開發(fā)、人機交互等專業(yè)課程的先行課程[2]。不同專業(yè)的學(xué)生學(xué)習(xí)該課程,其教學(xué)內(nèi)容會作相應(yīng)調(diào)整,下面我們就探討一下計算機專業(yè)本科同學(xué)在前端技術(shù)課程當中應(yīng)該掌握的知識體系[3]。
2 Web前端知識體系(Web front-end knowledge
system)
2.1 HTML
HTML超文本標記語言是互聯(lián)網(wǎng)的核心語言,它的作用是告訴瀏覽器如何顯示文檔的內(nèi)容,如文本、圖像和其他媒體資源,還可以通過超鏈接把文檔與其他互聯(lián)網(wǎng)資源連接起來。學(xué)生需要了解HTML語法,學(xué)習(xí)使用編輯工具編寫HTML文檔。通過HTML文檔的創(chuàng)建過程,獲得編輯和修改HTML網(wǎng)頁的經(jīng)驗;了解瀏覽器如何對網(wǎng)頁進行展示,理解HTML文檔與瀏覽器的關(guān)系,記憶HTML常用標簽的用法。
2.2 HTML5
HTML5是HTML目前發(fā)布的版本,為了在移動設(shè)備上支持多媒體,引入了一些新的語法元素,如Video、Audio和Canvas標簽。Canvas是取代Flash顯示圖形或動畫并且能夠與用戶交互的多媒體元素,學(xué)生應(yīng)該掌握Canvas編程方法,會使用相關(guān)繪圖API完成在Canvas上繪制路徑、矩形、圓形、字符,以及圖像的操作。其他一些HTML5新增的功能在幫助瀏覽器實現(xiàn)富客戶端功能上,也將發(fā)揮巨大的作用[4],學(xué)生應(yīng)該了解這些新增的元素和屬性。表單一直都是Web的核心技術(shù)之一,可以依靠它來完成Web上的數(shù)據(jù)輸入界面,從而使得客戶端和服務(wù)器能夠進行方便快捷的交互。HTML5新增了許多表單控件及其API,可以方便完成驗證功能而不用借助其他前端腳本語言。HTML5還引進了文檔結(jié)構(gòu)標簽,如header、section、article、nav、footer等,使搜索引擎可以更好地理解文檔的語義。此外,本地存儲、本地緩存、本地數(shù)據(jù)庫等也是學(xué)生應(yīng)該熟練掌握的內(nèi)容。
2.3 CSS
CSS是級聯(lián)樣式表,它的作用是控制頁面里每一個元素的表現(xiàn)形式,比如字體樣式、背景、排列方式、區(qū)域尺寸、邊框等。學(xué)生學(xué)習(xí)的重點在于掌握CSS選擇符的使用,可以在學(xué)習(xí)和使用中逐漸擴展對CSS3新增選擇符的認識。字體和文本、背景、邊框、邊距等常用屬性必須記憶,應(yīng)該通過大量編碼練習(xí)強化記憶。CSS3是CSS目前的版本,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。CSS3高級選擇器是非常有用的,例如子串匹配的屬性選擇符、結(jié)構(gòu)性偽類、目標偽類、UI元素狀態(tài)偽類、通用兄弟元素選擇器,它們可以減少在標簽中的class和ID的數(shù)量并讓設(shè)計師更方便地維護樣式表。使用CSS偽類知識可以制作出豐富多彩的顯示效果,學(xué)生需要在平時多多積累。盒子模型在前端開發(fā)中非常重要,重點掌握CSS中盒子模型的各個屬性,學(xué)生需通過大量編碼練習(xí)強化記憶。浮動和定位在頁面布局中有著重要的意義,是學(xué)習(xí)時必須掌握的重點,通過編碼實踐,比較每一個屬性值不同的含義。CSS3的新特征有很多,例如圓角效果、圖形化邊框、盒子陰影與文字陰影、變形效果、動畫效果、多欄布局、媒體查詢等。難點在于定義動畫關(guān)鍵幀@keyframes,需要理解關(guān)鍵幀的含義并在編碼實踐時認真體會其作用,比較不同的屬性值的區(qū)別。使用Transition與Transform結(jié)合能夠?qū)崿F(xiàn)豐富多彩的動畫效果,需要熟練掌握Transition與Transform知識,并將這部分知識進行結(jié)合使用[5]。
2.4 JavaScript
JavaScript是一種面向?qū)ο蟮目蛻舳四_本語言,它的運行不需要Web服務(wù)器的支持,可以直接在客戶端本地運行。通過JavaScript的學(xué)習(xí),學(xué)生能夠了解JavaScript的基本語法,函數(shù)和事件,學(xué)會使用JavaScript的內(nèi)置對象、BOM對象、DOM對象和它們的常用方法[6]。
學(xué)生應(yīng)該理解函數(shù)、事件的概念。在JavaScript中,函數(shù)可以簡單地理解為用來完成一系列工作的一組語句。JavaScript函數(shù)可以封裝那些在程序中可能需要多次使用的模塊,并可以作為事件驅(qū)動處理程序。使用函數(shù)前一定要先進行定義,函數(shù)定義分為三個部分:函數(shù)名、參數(shù)列表和函數(shù)體。事件就是指Web頁面在瀏覽器處于活動狀態(tài)時發(fā)生的各種事情,也就是用戶與Web頁面交互時產(chǎn)生的各種操作。瀏覽器為了響應(yīng)某個事件而進行的處理,叫做事件處理,這個處理過程叫做事件處理函數(shù)。對事件的處理,一般都是通過調(diào)用相應(yīng)的事件處理函數(shù)去完成的。學(xué)生應(yīng)該重點掌握JavaScript的函數(shù)和事件處理,先學(xué)會編寫簡單的事件處理響應(yīng)函數(shù)。練習(xí)如何使用JavaScript控制客戶端行為是重要的學(xué)習(xí)途徑。讓學(xué)生通過JavaScript實際案例的編寫過程,學(xué)習(xí)JavaScript語言的編程思路和編程經(jīng)驗,記憶JavaScript的基本語法結(jié)構(gòu)。
關(guān)于JavaScript對象,學(xué)生應(yīng)該理解以下知識點。對象是一組包含數(shù)據(jù)的屬性和對屬性中包含的數(shù)據(jù)進行操作的方法。JavaScript中支持的對象主要有內(nèi)置對象、瀏覽器對象、DOM對象、自定義對象。JavaScript將一些常用的功能預(yù)先定義成對象,用戶可以直接使用,這種對象就是內(nèi)置對象。瀏覽器對象是網(wǎng)頁和瀏覽器本身的各種元素在JavaScript程序中的體現(xiàn),它使JavaScript可以定位、改變內(nèi)容,以及展示HTML頁面的所有元素。DOM對象定義了用于HTML的一系列標準的對象,以及訪問和處理HTML文檔的標準方法。除了瀏覽器里面預(yù)定義的那些對象之外,也可以自己定義對象。在Javascript高級課程中應(yīng)該講述怎么使用對象、屬性、函數(shù)和方法,怎樣實現(xiàn)自定義對象,并通過大量的編程練習(xí)記憶JavaScript中的常用BOM和DOM對象的方法的使用[7]。
2.5 人機交互設(shè)計
學(xué)生應(yīng)該能夠了解人機交互設(shè)計的具體工作,理解設(shè)計的準則與規(guī)范,學(xué)會分析用戶需求,能夠發(fā)現(xiàn)常見的設(shè)計缺陷,能夠按照標準的設(shè)計流程進行軟件產(chǎn)品交互設(shè)計,會使用設(shè)計工具開發(fā)界面原型。具體的實踐方式,通過收集身邊的交互設(shè)計典型案例,分析其中的成功和失敗,發(fā)現(xiàn)和總結(jié)常見的設(shè)計缺陷,設(shè)立某個應(yīng)用場景,深入分析用戶的需求并組織小組討論。
3 Web前端技術(shù)的教學(xué)目的(The teaching aim of
web front-end technology)
現(xiàn)階段,Web前端開發(fā)工程師是一個較新并且需求量較大的職位,在國際和國內(nèi)的Web開發(fā)相關(guān)領(lǐng)域中也日益受到重視,從事前端開發(fā)的程序員越來越多。對于Web前端開發(fā)人員來說,目前主要需要掌握的技術(shù)包括HTML、CSS和JavaScript。隨著RIA(Rich Internet Applications,富互聯(lián)網(wǎng)應(yīng)用)的流行和普及,一些框架和服務(wù)器端語言也是Web前端開發(fā)工程師應(yīng)該掌握的。
在互聯(lián)網(wǎng)的演化進程中,Web1.0時代的網(wǎng)站主要以靜態(tài)內(nèi)容為主,用戶使用網(wǎng)站時也以瀏覽為主。而進入到Web2.0時代以后,各種媲美于桌面應(yīng)用程序的Web應(yīng)用大量涌現(xiàn),網(wǎng)站的展示和呈現(xiàn)方式也發(fā)生了根本的變化。網(wǎng)頁不再只是由靜態(tài)的、單一的文字和圖片構(gòu)成,而是包含了各種各樣豐富的多媒體資源和動態(tài)功能,這使得網(wǎng)頁的內(nèi)容更加生動、效果更加炫麗、操作也越來越智能化和人性化,網(wǎng)頁上豐富多樣、智能友好的交互形式為用戶提供了更好的使用體驗,而這些都是基于Web前端開發(fā)技術(shù)實現(xiàn)的。
因此,Web前端教學(xué)應(yīng)該以HTML5、CSS3和JavaScript等相關(guān)技術(shù)為主線,使知識講解與實踐相結(jié)合,從設(shè)計人機交互界面開始入門,深入到網(wǎng)站開發(fā)、代碼性能優(yōu)化、提升頁面效率,全面提高學(xué)生的Web前端開發(fā)能力。面向企業(yè)需求,培養(yǎng)適應(yīng)市場需要的開發(fā)人員。
4 Web前端教材編寫思路(Ideas for compiling web
front-end textbook)
目前Web前端教材比較缺乏,為了滿足這門課的教學(xué)需要,我校自主編寫的CDIO教程《HTML5與CSS3實戰(zhàn)教程》對課程內(nèi)容做了如下安排。
在第1章介紹HTML基礎(chǔ),主要介紹HTML的基本語法、常用標簽和重點元素的使用。接下來,在第2—4章主要介紹CSS的使用。分別介紹CSS的基本語法、選擇符的作用和使用、常用屬性的使用和樣式的定義。在此基礎(chǔ)之上,講解CSS的盒子模型的常用屬性、浮動定位和position定位、display屬性的使用。另外,還介紹了CSS3中新引入的動畫效果的實現(xiàn),包括Animation動畫實現(xiàn)和Transition過渡效果實現(xiàn)。在第5章介紹JavaScript基礎(chǔ),主要介紹JavaScript的基本語法、JavaScript函數(shù)定義、事件和事件處理、內(nèi)置對象、BOM對象和DOM對象的常用屬性和方法的使用。第6-8章是對HTML5規(guī)范中新引入的元素和特性進行介紹。首先,介紹了HTML5新增元素和屬性,主要包括HTML5中新增的元素和屬性的含義和使用,例如新增的包含語義信息的文檔結(jié)構(gòu)元素和新增的表單元素等。接下來,講解了HTML5中新引入的Canvas畫布元素,主要介紹Canvas元素的使用,包括利用Canvas繪制基本圖形、繪制圖像,以及Canvas和基本事件處理。然后,介紹HTML5中新增的本地存儲技術(shù),包括Web Storage和本地數(shù)據(jù)庫的使用。在第9章講解貫穿全書的綜合項目案例,主要介紹一個綜合的完整的咖啡銷售網(wǎng)站的頁面設(shè)計和開發(fā),使用到了之前所學(xué)的HTML、CSS和JavaScript,以及HTML5和CSS3的新特性等技術(shù),進行一個較為綜合的Web網(wǎng)站頁面設(shè)計開發(fā)。最后,在第10章講解人機交互設(shè)計的基本原則和典型案例[8]。
5 教學(xué)策略(Teaching strategy)
前端技術(shù)課程中,既有很多靈活的理論知識(尤其是HTML、CSS、JavaScript的語法知識),又有大量代碼設(shè)計題。而且該課程對程序設(shè)計能力的要求很高,需要學(xué)生動手編寫作業(yè)題以應(yīng)用并掌握相關(guān)知識。對于學(xué)習(xí)者來說,應(yīng)該較為熟練使用計算機,有一定英語基礎(chǔ),最好學(xué)習(xí)過《計算機導(dǎo)論》之類的課程。教師在教學(xué)實施之前應(yīng)該準備教學(xué)大綱、教學(xué)日歷、教案、實驗指導(dǎo)書、教學(xué)手冊(制定具體的平時成績考核標準)、期末成績考核標準。除此之外需要至少一個功能完整的網(wǎng)站項目供課堂教學(xué)使用,以及大量的基礎(chǔ)案例。
5.1 啟發(fā)式教學(xué)
在Web前端教學(xué)中,對于知識的理解更多來源于實踐,教師應(yīng)該鼓勵學(xué)生去大膽設(shè)想并努力完成自己的作品,培養(yǎng)學(xué)生的創(chuàng)造性思維和主動學(xué)習(xí)精神。在完成自己的作品當中,學(xué)生會發(fā)揮主觀能動性,主動學(xué)習(xí)和嘗試課堂之外的技術(shù),體會到創(chuàng)造的樂趣。
5.2 與科研相結(jié)合
在教學(xué)中引進新的理論和技術(shù)內(nèi)容盡量把科研中涉及到的與前端技術(shù)課程相關(guān)的新理論和技術(shù)、優(yōu)秀論文介紹給學(xué)生。例如,給學(xué)生講解“搜索引擎”,講解當前網(wǎng)絡(luò)和數(shù)據(jù)庫的研究熱點。
5.3 實踐教學(xué)
前端教學(xué)應(yīng)該以HTML5、CSS3和JavaScript等相關(guān)技術(shù)為主線,在整個知識體系講授期間貫穿一個完整的Web前端開發(fā)項目案例[9]。在理論內(nèi)容講解和單元項目案例實現(xiàn)的過程中,結(jié)合具體知識點講解HTML和CSS的基本語法、主要標簽和屬性作用、JavaScript基本語法和常用對象的使用、函數(shù)和事件處理等內(nèi)容,并在掌握了每一章的理論內(nèi)容和單元項目實現(xiàn)過程的基礎(chǔ)之上,完成對課程綜合項目中相應(yīng)的模塊的實現(xiàn),從而綜合應(yīng)用所學(xué)技術(shù)、加深了各章知識點的理解程度和提高技術(shù)運用熟練程度。
5.4 采用新的教育技術(shù)
為了提高教學(xué)效果建立了一個Web前端作品展示網(wǎng)站。以往的課程考核都是學(xué)生上傳源碼,教師檢查。建設(shè)并開通了Web前端作品展示平臺之后,學(xué)生可以獨立上傳文件并展示作品。作品對所有訪問者開源,同學(xué)之間可以相互借鑒和學(xué)習(xí)。同時,平臺還有點贊和評論功能,針對所有學(xué)生和家長開放。對于成績評定,教師有專門的工作臺進行項目評分,方便而高效;教師的評語也可以被學(xué)生看到,促進師生交流。同時,為了保證項目展示穩(wěn)定性和訪問正確性,平臺設(shè)定輔助上傳機制,自動提示上傳文件的格式錯誤。平臺運行獨立的沙盒機制,防止惡意代碼文件的破壞。
6 結(jié)論(Conclusion)
Web前端課程在高等院校的開設(shè)比較普遍,雖然課程名稱不統(tǒng)一,但是很多專業(yè)都在教授相關(guān)課程,面向的學(xué)生群體不同,教授的內(nèi)容難度也不相同。作為計算機專業(yè)的院系,一般都開設(shè)了前端課程,或者要求學(xué)生自學(xué)以掌握相關(guān)知識。本科或者??茖W(xué)習(xí)計算機專業(yè)的學(xué)生[10],掌握了前端開發(fā)的技能,在就業(yè)時可以選擇Web前端工程師的崗位,從事相關(guān)的工作。作為教師,我們應(yīng)該認真研究最新的技術(shù)熱點,更好地開展Web前端課程教學(xué),使課程與行業(yè)現(xiàn)狀接軌,讓學(xué)生更加順利的就業(yè)[11]。
參考文獻(References)
[1] 魏冬梅.Web前端開發(fā)課程教學(xué)探討與實踐[J].福建電腦,2013(6):181-183.
[2] 阮曉龍.Web前端開發(fā)課程內(nèi)容改革的探索與嘗試[J].中國現(xiàn)代教育裝備,2015(7):94-97.
[3] 儲久良.Web前端開發(fā)技術(shù)課程教學(xué)改革與實踐[J].計算機教育,2014(14):12-15.
[4] 陸鋼,李慧云.HTML5技術(shù)應(yīng)用現(xiàn)狀與發(fā)展趨勢研究[J].廣東通信技術(shù),2013(5):2-5.
[5] 孔志文.HTML5與CSS3技術(shù)在網(wǎng)頁制作中的應(yīng)用及發(fā)展前景[J].課程教育研究,2015(9):216-217.
[6] 胡沛.JavaScript課程教學(xué)改革探索[J].電腦知識與技術(shù),2011
(32):7944-7945.
[7] 江駿.基于CDIO的JavaScript課程教學(xué)改革與研究[J].消費電子,2012(15):56-56.
[8] 胡倫.對網(wǎng)絡(luò)課程人機交互設(shè)計的研究與探索[J].中國教育信息化,2011(1):75-76.
[9] Dan L I,Yang N.Reform of the Course of HTML+CSS Web Page Design Based on Project-oriented and Task-driven[J].Computer Knowledge & Technology,2013(3):15-20.
[10] 陸煒妮,鄒利華.基于專本銜接的“web前端”課程設(shè)計[J].石家莊職業(yè)技術(shù)學(xué)院學(xué)報,2017(6):62-65.
[11] Chen X,Dong W U.Teaching Reformation Practice of the HTML5 Web Front-End Development Course Based on Employment Orientation[J].Modern Computer,
2017(1):14-19.
作者簡介:
劉 蕾(1978-),女,碩士,副教授.研究領(lǐng)域:數(shù)據(jù)挖掘,大數(shù)據(jù).
劉冰月(1978-),女,碩士,教授.研究領(lǐng)域:數(shù)據(jù)挖掘,大數(shù)據(jù).