HTML 5技術(shù)在青少年科技教育中的應(yīng)用探討

楊帥

[摘要]在青少年科技教育中，采用H5技術(shù)，可以有效利用移動(dòng)設(shè)備的普及性和便捷性、多種媒體的支持性和交互性，增強(qiáng)科普活動(dòng)的趣味性、體驗(yàn)性和探索性，以充滿(mǎn)趣味性的科學(xué)現(xiàn)象和科學(xué)知識(shí)，揭示科學(xué)的真正內(nèi)涵，激發(fā)青少年的學(xué)習(xí)興趣和探索意識(shí)，提高青少年科技教育的效率和質(zhì)量。

[關(guān)鍵詞]HTML 5技術(shù)青少年科技教育

[中圖分類(lèi)號(hào)]N4

[文獻(xiàn)標(biāo)識(shí)碼]A[文章編號(hào)]1001-9596（2019）03-0061-04

《全民科學(xué)素質(zhì)行動(dòng)計(jì)劃綱要實(shí)施方案（2016—2020年）》指出，科學(xué)素質(zhì)決定公民的思維方式和行為方式，是實(shí)現(xiàn)美好生活的前提，是實(shí)施創(chuàng)新驅(qū)動(dòng)發(fā)展戰(zhàn)略的基礎(chǔ)，是國(guó)家綜合國(guó)力的體現(xiàn)。同時(shí)，該方案指出，目前我國(guó)公民科學(xué)素質(zhì)水平與發(fā)達(dá)國(guó)家相比仍有較大差距，全民科學(xué)素質(zhì)工作發(fā)展還不平衡，不能滿(mǎn)足全面建成小康社會(huì)和建設(shè)創(chuàng)新型國(guó)家的需要。主要表現(xiàn)在：面向農(nóng)民、城鎮(zhèn)新居民、邊遠(yuǎn)和民族地區(qū)群眾的全民科學(xué)素質(zhì)工作仍然薄弱，青少年科技教育有待加強(qiáng);科普技術(shù)手段相對(duì)落后，均衡化、精準(zhǔn)化服務(wù)能力亟待提升;科普投入不足，全社會(huì)參與的激勵(lì)機(jī)制不完善，市場(chǎng)配置資源的作用發(fā)揮不夠[1] 。

當(dāng)前，以互聯(lián)網(wǎng)為代表的信息化技術(shù)飛速發(fā)展，如何將先進(jìn)的信息化技術(shù)應(yīng)用于青少年科技教育工作中，促進(jìn)青少年增強(qiáng)科技強(qiáng)國(guó)意識(shí)，改變過(guò)去由于科普工作方法、技術(shù)手段落后而導(dǎo)致青少年科技教育績(jī)效不理想的現(xiàn)狀，值得深入探究。本文結(jié)合實(shí)際案例，探討將HTML 5（簡(jiǎn)稱(chēng)H5）技術(shù)應(yīng)用于青少年科普工作的流程。

一、相關(guān)概念界定

（一）HTML 5

HTML是Hyper Text Mark|up Language 的縮寫(xiě)，意思是超文本標(biāo)記語(yǔ)言，是一種網(wǎng)頁(yè)創(chuàng)建方式，它是網(wǎng)頁(yè)的開(kāi)發(fā)端和接收端約定標(biāo)記標(biāo)題、正文、圖片、文字樣式等頁(yè)面內(nèi)容的整套規(guī)范跨終端的輕應(yīng)用[2] 。

HTML 5 是HTML超文本標(biāo)記語(yǔ)言的第五次重大修改，實(shí)現(xiàn)了在移動(dòng)設(shè)備上很好地支持多媒體的目的，其優(yōu)點(diǎn)是：

1.跨平臺(tái)。用HTML 5技術(shù)開(kāi)發(fā)的科普資源可以實(shí)現(xiàn)跨平臺(tái)的使用，可應(yīng)用于電腦、手機(jī)、平板等設(shè)備，支持Windows、IOS、安卓等系統(tǒng)。另外，H5可以方便快捷地在社交平臺(tái)，如QQ、微信上進(jìn)行傳播，不像手機(jī)應(yīng)用軟件APP需要進(jìn)行下載、安裝，只需要用H5技術(shù)制作的教學(xué)資源掃描一下每個(gè)資源自帶的二維碼，即可觀看。該技術(shù)可以將傳統(tǒng)的以圖片、文字、音視頻、動(dòng)畫(huà)等多媒體構(gòu)成的科普資源，用H5技術(shù)進(jìn)行傳播，使信息技術(shù)助力科普工作。

2.自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。即同一張頁(yè)面自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度自動(dòng)調(diào)整布局（layout），避免了在開(kāi)發(fā)制作過(guò)程中需要對(duì)不同設(shè)備提供不同網(wǎng)頁(yè)的問(wèn)題。

3.即時(shí)更新。傳統(tǒng)手段制作的軟件、資源更新比較麻煩，而HTML 5制作的資源是即時(shí)的，科普工作者在線(xiàn)制作、更改資源后，觀看者瀏覽時(shí)內(nèi)容就自動(dòng)更新。因此，通過(guò)H5技術(shù)制作并發(fā)布的科普內(nèi)容，使用者只需通過(guò)掃描資源自帶的二維碼，或是點(diǎn)擊資源自動(dòng)生成的內(nèi)容鏈接就可以觀看，而且可以重復(fù)使用，不需要考慮安裝、更新以及存儲(chǔ)空間等問(wèn)題，可以使科技教育資源方便、快捷、大范圍的傳播。

4.統(tǒng)計(jì)和數(shù)據(jù)收集功能。目前很多在線(xiàn)應(yīng)用，如購(gòu)物網(wǎng)站平臺(tái)、教育平臺(tái)等都會(huì)對(duì)用戶(hù)的使用痕跡進(jìn)行跟蹤記錄，以獲取具體數(shù)據(jù)，然后再根據(jù)收集到的數(shù)據(jù)，分析個(gè)人喜好，有針對(duì)性地推送相關(guān)內(nèi)容。H5技術(shù)在線(xiàn)科普內(nèi)容也可以對(duì)使用者進(jìn)行信息跟蹤，獲取數(shù)據(jù)，對(duì)科普資料的使用情況、使用人群及需求進(jìn)行數(shù)據(jù)收集和分析。

（二）科普

科普的目的是實(shí)現(xiàn)科學(xué)技術(shù)的傳播與普及。科普工作要通過(guò)各種途徑、技術(shù)、方法，把自然科學(xué)知識(shí)、社會(huì)科學(xué)知識(shí)、科學(xué)研究方法、科學(xué)思想、科學(xué)精神向社會(huì)公眾普及，促進(jìn)公眾理解科學(xué) [3]。

二、開(kāi)展青少年科技教育的意義

科學(xué)技術(shù)是第一生產(chǎn)力。要想在當(dāng)前激烈競(jìng)爭(zhēng)的國(guó)際環(huán)境中獲得長(zhǎng)遠(yuǎn)發(fā)展，發(fā)展科學(xué)技術(shù)是關(guān)鍵。在當(dāng)前全球化背景下，提升我國(guó)的國(guó)際地位，實(shí)現(xiàn)中華民族的偉大復(fù)興，離不開(kāi)科學(xué)技術(shù)的長(zhǎng)足發(fā)展。青少年是祖國(guó)的未來(lái)、民族的希望，“少年強(qiáng)則國(guó)強(qiáng)”，因此面向青少年開(kāi)展科技教育，用先進(jìn)的科學(xué)思想、科學(xué)技術(shù)、科學(xué)意識(shí)武裝頭腦，堅(jiān)定理想信念、培養(yǎng)創(chuàng)造精神、提高科學(xué)素質(zhì)顯得尤為重要。另外，通過(guò)開(kāi)展科技教育，可以凸顯科技知識(shí)的價(jià)值，提升科學(xué)教育的重要性，推動(dòng)社會(huì)不斷發(fā)展。

我國(guó)社會(huì)主義建設(shè)正處于飛速發(fā)展階段，青少年只有從小掌握和學(xué)習(xí)先進(jìn)科技知識(shí)，才能擔(dān)起改造自然、推動(dòng)社會(huì)發(fā)展的重任。因此，青少年科技教育工作應(yīng)該得到各級(jí)行政部門(mén)、教育部門(mén)的重視。當(dāng)前，信息技術(shù)飛速發(fā)展，科普工作可以借助信息化技術(shù)開(kāi)展豐富多彩的科普教育和實(shí)踐活動(dòng)，營(yíng)造良好的科技教育環(huán)境，使青少年受到更多更好的科技教育，激發(fā)他們深入探索科學(xué)奧秘的興趣。

三、H5 技術(shù)在青少年科學(xué)教育中的應(yīng)用

H5 技術(shù)利用移動(dòng)設(shè)備的普及性和便捷性、多種媒體的支持性和交互性，可以增強(qiáng)科普活動(dòng)的趣味性、體驗(yàn)性和探索性，可以用充滿(mǎn)趣味性的科學(xué)現(xiàn)象和科學(xué)知識(shí)在揭示科學(xué)真正內(nèi)涵的同時(shí)，激發(fā)青少年的學(xué)習(xí)興趣和探索意識(shí)。針對(duì)青少年開(kāi)展的科普活動(dòng)，應(yīng)該避免灌輸式教學(xué)，要努力營(yíng)造真實(shí)的學(xué)習(xí)和體驗(yàn)環(huán)境，使他們切身感受科技的神奇與魅力。H5 技術(shù)在青少年科學(xué)教育中的應(yīng)用流程如下。

（一）設(shè)計(jì)

根據(jù)青少年的心智發(fā)展，設(shè)計(jì)貼近現(xiàn)實(shí)生活，感染性強(qiáng)、參與性強(qiáng)、探究性強(qiáng)的科技教育資源。另外，H5開(kāi)發(fā)的科普學(xué)習(xí)資料，主要是針對(duì)移動(dòng)終端，因此有利于青少年開(kāi)展碎片化瀏覽。青少年可以根據(jù)自身需求，突破時(shí)空限制，充分體現(xiàn)內(nèi)容、時(shí)間、過(guò)程的碎片化。H5技術(shù)開(kāi)發(fā)的科普資源應(yīng)充分體現(xiàn)移動(dòng)端觀看所具有的靈活性、便捷性、交互性、情境性等特征。

（二）開(kāi)發(fā)傳播

目前，H5被廣泛用于制作小游戲、邀請(qǐng)函、產(chǎn)品宣傳等，在微信傳播中十分盛行，因此，H5富媒體、低門(mén)檻的特性在科普資源制作與傳播中潛力巨大。另外，易于實(shí)現(xiàn)、工具多樣也是推動(dòng)其發(fā)展的重要原因。H5技術(shù)門(mén)檻低，簡(jiǎn)單易上手，制作工具也很多，比如“MAKA”“易企秀”“微學(xué)寶”“初頁(yè)”“iH5”等，在這些平臺(tái)上用戶(hù)注冊(cè)后，即可免費(fèi)使用平臺(tái)提供的工具進(jìn)行課程資源的開(kāi)發(fā)、存儲(chǔ)、管理等，以所見(jiàn)即所得的方式將文字、圖片、音視頻等素材應(yīng)用于自己的資源開(kāi)發(fā)。目前，主流的H5制作平臺(tái)有以下特點(diǎn)。

1.零代碼。H5不需要編寫(xiě)任何代碼，只需“創(chuàng)意+鼠標(biāo)拖拽、點(diǎn)擊”，即可輕松制作便于交互、精彩紛呈的科普教學(xué)資源。

2.工具免費(fèi)且無(wú)需安裝。H5工具大多是免費(fèi)的，并且還具有數(shù)據(jù)搜集、分析、統(tǒng)計(jì)功能，這些工具除了使用簡(jiǎn)單外，不像其他軟件一樣需要下載到本地安裝，只要登錄在線(xiàn)制作平臺(tái)即可制作、編輯。

3.易傳播。以往的在線(xiàn)教學(xué)資源，需要依靠專(zhuān)門(mén)平臺(tái)和專(zhuān)業(yè)的軟件來(lái)開(kāi)發(fā)、管理，因?yàn)檫^(guò)于專(zhuān)業(yè)，不易于跨平臺(tái)應(yīng)用，不能廣泛傳播。H5具有跨平臺(tái)、自適應(yīng)等特性，只要通過(guò)QQ、微信就能方便快捷地進(jìn)行分享、傳播。

（三）反饋改進(jìn)

基于H5技術(shù)開(kāi)發(fā)的科普資源，瀏覽者可以在觀看后獲取資源使用中的數(shù)據(jù)，如瀏覽內(nèi)容、瀏覽時(shí)間、頁(yè)面停留時(shí)間、資源點(diǎn)擊量等。通過(guò)對(duì)這些數(shù)據(jù)的獲取和分析，可以得到某個(gè)在線(xiàn)科普資源的使用狀況，得到資源使用情況的反饋，并作為資源改進(jìn)的依據(jù)，從而設(shè)計(jì)更合理的科技教育資源。

四、應(yīng)用實(shí)例

以MAKA平臺(tái)制作《認(rèn)識(shí)身邊的小昆蟲(chóng)》為例，介紹H5科技教育資源制作流程。首先根據(jù)設(shè)計(jì)，準(zhǔn)備相應(yīng)的素材，將所需要的圖片、音頻、視頻等素材存儲(chǔ)備用。

（一）登錄MAKA，進(jìn)入制作平臺(tái)

打開(kāi)MAKA平臺(tái)，網(wǎng)址為http：//www.maka.im，可以用微信掃描登錄，也可用賬號(hào)登錄，登錄后即進(jìn)入工具平臺(tái)，選擇“創(chuàng)建作品”開(kāi)始制作H5頁(yè)面。

（二）上傳素材資源

單擊左側(cè)工具欄“上傳”選項(xiàng)卡，將所要呈現(xiàn)的圖片、視頻等素材上傳到平臺(tái)。

（三）設(shè)計(jì)制作頁(yè)面

對(duì)頁(yè)面進(jìn)行設(shè)計(jì)，將素材放置頁(yè)面上，對(duì)素材進(jìn)行大小、位置、透明度、動(dòng)畫(huà)等操作，使之符合頁(yè)面設(shè)計(jì)要求，做完一頁(yè)后添加新頁(yè)面繼續(xù)以上操作，直到做完所有頁(yè)面。

（四）分享發(fā)布信息

鼠標(biāo)單擊窗口右上角“瀏覽/分享”按鈕，自動(dòng)生成二維碼，掃一掃二維碼即可發(fā)布到QQ、微信等平臺(tái)。

五、結(jié)束語(yǔ)

過(guò)去，人們開(kāi)展青少年科技教育中面臨的移動(dòng)性、差異性等問(wèn)題得不到較好地解決，而H5技術(shù)作為一種在線(xiàn)開(kāi)放的科技教育資源，具有投入小、免安裝、可實(shí)時(shí)更新、隨時(shí)統(tǒng)計(jì)等優(yōu)點(diǎn)，可以在一定程度上提高青少年科普工作的效率和質(zhì)量。

參考文獻(xiàn)

[1]全民科學(xué)素質(zhì)行動(dòng)計(jì)劃綱要實(shí)施方案（2016—2020年）[EB/OL].（2016-03-14）.http：//www.gov.cn/zhengce/content/2016-03/14/content_5053247.htm.

[2]百度百科，html5[EB/OL].https：//baike.baidu.com/item/html5/4234903？fr=aladdin.

[3]李成芳.我國(guó)科普工作存在問(wèn)題的原因分析及對(duì)策研究[D]. 武漢：武漢科技大學(xué)，2003.