可視化H5的實訓(xùn)教學(xué)研究與實踐

魏蓓蓓

摘 要：移動互聯(lián)信息技術(shù)的迅速崛起，讓信息的傳播迎來了又一次巨大變革。同時手機的快速發(fā)展，讓H5頁面的傳播速度更快，因此H5頁面制作課程的學(xué)習(xí)也迫在眉睫，成為今后學(xué)生就業(yè)的一個重要方向。本文將對可視化H5頁面制作課程的實訓(xùn)教學(xué)提出自己的理解。

關(guān)鍵詞：H5 實訓(xùn)教學(xué)

隨著移動互聯(lián)信息技術(shù)的發(fā)展，人們的生活方式也發(fā)生了巨大的變化。同時，移動互聯(lián)信息技術(shù)讓信息傳播從傳統(tǒng)媒體時代進(jìn)入了新媒體時代，這樣，移動互聯(lián)信息技術(shù)中的H5的作用也就越發(fā)的重要[1]。

一、學(xué)習(xí)可視化H5的重要性

在新媒體時代，傳媒行業(yè)遭遇前所未有的轉(zhuǎn)型與變局。不管是新媒體企業(yè)，還是傳統(tǒng)媒體單位，都對IT人才的需求呈現(xiàn)不斷上升的態(tài)勢，隨之而來的是H5的應(yīng)用需求也越來越大，這樣，高職院校尤其是傳媒類專業(yè)的學(xué)生就更需要掌握H5頁面制作這門技能。那么，什么是H5？H5也就是HTML5的簡稱，HTML也就是超文本標(biāo)記語言的英文縮寫，那么，顯然H5也就是超文本標(biāo)記語言的第5代標(biāo)準(zhǔn)，它是網(wǎng)頁制作中用到的標(biāo)記語言。但是傳媒類專業(yè)的學(xué)生沒有計算機相關(guān)語言的學(xué)習(xí)基礎(chǔ)，因此學(xué)起H5來就更顯得吃力，所以可視化的H5頁面制作工具就應(yīng)運而生，成為首選的學(xué)習(xí)工具[2]。

二、常見的可視化H5制作工具

目前，國內(nèi)外有很多可以進(jìn)行 H5頁面可視化制作的工具，例如，國外常見的工具有 Adobe Edge、Wix、Weebly、Hype等，國內(nèi)常見的工具有木疙瘩、 iH5、意派、易企秀、MAKA、兔展等，這些軟件都有各自的特點，它們?yōu)殚_發(fā)H5頁面提供了有力的支持，使H5的開發(fā)變得更加方便、快捷，并且成本低。

可視化的H5制作工具容易操作，容易掌握，而且功能強大，它能將數(shù)據(jù)轉(zhuǎn)換成圖形或者圖像在屏幕上顯示出來并進(jìn)行交互處理，為沒有計算機語言基礎(chǔ)的人開發(fā)H5頁面提供了強大的技術(shù)支持，使得H5的開發(fā)變得簡單快捷。

三、可視化H5的實訓(xùn)教學(xué)策略

1.選擇合適的教材內(nèi)容

每門課程進(jìn)行教學(xué)前都要選取教材，在教材的選取過程中要根據(jù)教學(xué)過程的實際需要，認(rèn)真地研究備選教材，汲取其中的精華部分，不斷改進(jìn)和完善教學(xué)內(nèi)容，這樣才能夠讓H5頁面制作教學(xué)跟得上行業(yè)發(fā)展的步伐。同時，在教學(xué)過程中，還要合理的拓展教學(xué)內(nèi)容，把一些優(yōu)秀的H5頁面作品整合到教學(xué)范圍內(nèi)，這樣可以讓學(xué)生掌握行業(yè)發(fā)展動態(tài)，學(xué)習(xí)到最新的思路、技術(shù)和方法，同時還可以拓寬學(xué)生的設(shè)計思路，讓他們了解更多、更好的H5頁面作品。除此之外，要充分利用學(xué)校自身的實訓(xùn)室或者機房，合理的增加實訓(xùn)課的課時量，提高學(xué)生的實踐操作能力。這樣能讓學(xué)生通過實訓(xùn)課的實踐操作，更加牢固地掌握相關(guān)理論知識，深化學(xué)生對相關(guān)理論知識的消化和理解，做到融會貫通、活學(xué)活用。

2.案例教學(xué)法及項目教學(xué)法

對于實踐教學(xué)來說，案例教學(xué)法是一種具有很高實效性的教學(xué)方式。對每個知識點都采用一個或多個相應(yīng)案例進(jìn)行分析及講解，首先，教師需要結(jié)合具體的教學(xué)內(nèi)容，選擇一些典型的案例，然后通過案例的分析引導(dǎo)，讓學(xué)生自覺的參與進(jìn)案例分析中，這樣可以調(diào)動學(xué)生的主動思維，提高學(xué)生獨立解決問題的能力。案例教學(xué)法打破了傳統(tǒng)的教學(xué)方式以教學(xué)為主，學(xué)生被動吸收的教學(xué)模式，更加強調(diào)了學(xué)生在課堂教學(xué)中的作用，這樣既能夠激發(fā)學(xué)生的探究欲，又能夠培養(yǎng)學(xué)生的思維創(chuàng)造能力。

項目教學(xué)法是一種以項目為主線，以教師為指引、以實訓(xùn)為導(dǎo)向、以學(xué)生為主體的教學(xué)模式。項目教學(xué)法有較強的啟發(fā)性、有良好的互信動、有很好的實踐性，還有明確的學(xué)習(xí)目標(biāo)，和傳統(tǒng)教學(xué)模式相比，項目教學(xué)法可以有助于教師更方便地處理教學(xué)難題，而且能夠培養(yǎng)學(xué)生形成良好的創(chuàng)新精神和提高實際解決問題的能力。在教學(xué)過程中，通過一個項目的引入，來鞏固幾個知識點的掌握。教師結(jié)合具體教學(xué)內(nèi)容和學(xué)生實際情況，將具體的項目引入到課堂上，經(jīng)過教師的啟發(fā)、指導(dǎo)和策劃，讓學(xué)生能夠通過獨立思考和團(tuán)隊合作來完成項目的設(shè)計和制作。項目教學(xué)法的使用，有助于增強教師和學(xué)生之間的交流互動，大大縮短了學(xué)生理論學(xué)習(xí)與實踐操作之間的距離，提高了學(xué)生的學(xué)習(xí)積極性[3]。

H5頁面制作重視的是實際操作，因此教師在教學(xué)過程中就要融入更多的實訓(xùn)內(nèi)容，這樣學(xué)生才能形成理論聯(lián)系實際的意識，進(jìn)而增強學(xué)生的實際操作能力。在H5頁面制作的每個環(huán)節(jié)都可以使用案例教學(xué)和項目教學(xué)，案例和項目是理論的具體應(yīng)用，通過案例教學(xué)和項目教學(xué)讓學(xué)生加深對理論知識的理解，進(jìn)一步來提高學(xué)生靈活運用理論知識的能力，這也是我們教學(xué)過程最終要實現(xiàn)的目標(biāo)。但是，教師必須要仔細(xì)的選取案例和項目，這樣才能保證案例教學(xué)和項目教學(xué)的效果，最好能夠選擇一些既能加深學(xué)生對理論知識的理解，又十分貼近教學(xué)內(nèi)容的經(jīng)典案例和項目。比如學(xué)習(xí)組與長數(shù)據(jù)的時候，教師可以選取相關(guān)媒體的優(yōu)秀案例，例如閃電新聞的H5頁面“他是誰？”，教師可以用這個實際案例來分析頁面的設(shè)計和制作要點，這樣就能夠引導(dǎo)學(xué)生用組與長數(shù)據(jù)的方法來設(shè)計大體框架，進(jìn)而讓學(xué)生體驗整個設(shè)計與制作的流程，從選題策劃到視覺設(shè)計再到最后發(fā)布。

3.加強作業(yè)訓(xùn)練

H5頁面制作教學(xué)的作業(yè)環(huán)節(jié)具有非常重要的作用，不僅可以檢查學(xué)生對所學(xué)知識的掌握程度，還能夠鍛煉學(xué)生對各種制作方法的操作能力，比如各類動畫應(yīng)用、行為、觸發(fā)事件與交互控制等。教師通過查看學(xué)生作業(yè)，可以對學(xué)生的作業(yè)完成情況進(jìn)行分析和總結(jié)，進(jìn)而發(fā)現(xiàn)學(xué)生對所學(xué)知識的掌握情況，然后再針對學(xué)生的作業(yè)情況進(jìn)行系統(tǒng)的講解，對發(fā)現(xiàn)的問題及時進(jìn)行處理，對學(xué)生的疑惑及時進(jìn)行解答，這樣就可以做到及時發(fā)現(xiàn)、及時解決，從而讓學(xué)生對每個小知識點都能夠牢固的掌握，避免造成問題的累積。

4.用比賽帶動實訓(xùn)

目前有很多H5頁面制作方向的大賽，教師可以及時搜索相關(guān)信息，組織學(xué)生參與，讓學(xué)生在比賽中發(fā)現(xiàn)自己在學(xué)習(xí)中的薄弱環(huán)節(jié)，在比賽中鞏固自己對知識的掌握，在比賽中解決自己沒有遇到過的問題，這樣用比賽帶動日常實訓(xùn)，起到事半功倍的效果。

5.學(xué)生自主探究

對學(xué)生進(jìn)行分組，以組為單位完成作品，把每次各組完成的作品放到課堂上，讓各組派出一個代表來講解自己所在組的作品，分享在制作過程中的想法、問題、解決方法以及收獲;然后讓其他學(xué)生對這組的作品進(jìn)行質(zhì)疑、評價或建議，經(jīng)過討論之后，各組再自行修改或完善作品，最后，再評選出最好的幾組成品。

四、實踐效果

在實訓(xùn)策略實施前，學(xué)生單純依靠教師的講授，缺乏學(xué)習(xí)的興趣和主動性，對單一知識點能夠掌握，但一出現(xiàn)綜合性的項目或者幾個知識點的集合就開始摸不著頭腦。課后作業(yè)更是一塌糊涂，只會尋找模板進(jìn)行改動，從不主動思考，存在應(yīng)付的心理。

實訓(xùn)策略實施后，效果很明顯：

1.讓學(xué)生處于主體地位，教師位于指引地位。

在教學(xué)過程中，教師會更多地注重學(xué)生的反饋，在實訓(xùn)的同時進(jìn)行調(diào)整，在調(diào)整的同時進(jìn)行總結(jié)，這樣不但能夠提高學(xué)生們的實踐能力，而且還能提高教師的專業(yè)能力。同時，也能激發(fā)學(xué)生們的學(xué)習(xí)興趣，促進(jìn)學(xué)生們自主學(xué)習(xí)、獨立解決問題，學(xué)生不再一味地等著教師傳道受業(yè)解惑，而是帶著問題去學(xué)習(xí)，去探索，去

鉆研。

2.有利于學(xué)生了解項目完成的各階段任務(wù)。

基于平時的各種實訓(xùn)，學(xué)生們對頁面制作的各個階段都能做到了如指掌，拿到一個項目不再摸不著頭腦，而是迅速就能進(jìn)入狀態(tài)，開始籌備一項項準(zhǔn)備工作。同時，依靠平時的分組訓(xùn)練，也增強了團(tuán)隊合作能力，為今后走到工作崗位之后的合作打下基礎(chǔ)。

結(jié)語

總之，H5頁面制作這門課程的實踐性很強，這就需要教師在教學(xué)過程中不斷研究適合教學(xué)的新方法，不斷調(diào)整教學(xué)內(nèi)容，采取更加多樣化的方式方法來激發(fā)學(xué)生的學(xué)習(xí)興趣，把行業(yè)發(fā)展的新技術(shù)融入教學(xué)過程中，促進(jìn)學(xué)生能夠利用自己所學(xué)的知識對實際問題進(jìn)行處理，更好地適應(yīng)未來工作崗位的工作需要。

參考文獻(xiàn)

[1]王丹丹.基于可視化編輯平臺教授H5設(shè)計的必要性[J].藝術(shù)科技.20180515.

[2]王志.H5，如何助力新聞可視化[J].傳媒評論.20180905.

[3]饒曉娟.利用新媒體數(shù)字化營銷工具H5進(jìn)行項目化教學(xué)的實踐[J].職業(yè).20161225.