HTML5技術(shù)在氣象服務(wù)信息多終端展示方面的合理應(yīng)用

1、HTML5技術(shù)在氣象效勞信息多終端展示方面的合理應(yīng)用1991年8月6日，蒂姆伯納斯李(互聯(lián)網(wǎng)之父)搭建了世界上第一個網(wǎng)站 :/info.cern.ch/，隨后作為應(yīng)用于網(wǎng)站頁面顯示的HTML語言(Hyper TextMarkup Language，超文本標(biāo)記語言)于1993年6月作為IETF(互聯(lián)網(wǎng)工程任務(wù)組)的工作草案發(fā)布，直至2021年10月28日W3C(萬維網(wǎng)聯(lián)盟)正式發(fā)布HTML第五次重大修改，即HTML5。HTML5的出現(xiàn)趕上了互聯(lián)網(wǎng)在多終端大規(guī)模應(yīng)用的黃金時代。根據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心2021年7月公布的?中國互聯(lián)網(wǎng)絡(luò)開展?fàn)顩r統(tǒng)計報告?說明，中國網(wǎng)民對于各類信息的需求量與及時性與日

2、俱增，閱讀信息占據(jù)人們?nèi)粘５狞S金時間和碎片化時間;同時信息展現(xiàn)渠道也覆蓋了眾多終端設(shè)備，從PC(Personal Computer，個人計算機)開展到挪動設(shè)備，各行各業(yè)的信息也通過多終端效勞到人們生活的每個角落。作為信息資源的一個分支，氣象效勞信息在決策、公眾、專業(yè)與科技效勞中起到重要作用，應(yīng)用HTML5技術(shù)在多終端設(shè)備上傳播與展示氣象效勞信息是大勢所趨。HTML5技術(shù)可以滿足適配與兼容多終端設(shè)備的展示需求，具備三維、圖形及顯示特效的展現(xiàn)才能，有利于最大化進步網(wǎng)絡(luò)氣象信息的效勞質(zhì)量，從而提升用戶體驗與用戶黏性。1 氣象效勞信息在多終端展示方面的迫切需求隨著人們生活質(zhì)量的不斷提升，公眾對于氣象效

3、勞的及時性與準(zhǔn)確性也有了更高的要求。對于天氣趨勢、實時變化、風(fēng)雨影響、突發(fā)災(zāi)害等與衣、食、住、行息息相關(guān)的氣象信息，公眾需求更為迫切。為迎合需求，氣象部門面向各類受眾研發(fā)出各種氣象效勞信息與產(chǎn)品，僅以預(yù)報為例：從短期預(yù)報到長期預(yù)報、從站點預(yù)報到格點預(yù)報、從常規(guī)預(yù)報到精細(xì)化預(yù)報、從人工預(yù)報到形式預(yù)報，不斷地被豐富和開展。如何將氣象信息通過更多的渠道第一時間發(fā)布這一問題成為氣象部門面臨的重要障礙之一。目前，我國氣象部門面向公眾提供氣象效勞信息的渠道主要有：報紙、電視、電臺、農(nóng)村大喇叭、電子顯示屏等傳統(tǒng)渠道。隨著互聯(lián)網(wǎng)技術(shù)和4G技術(shù)的普及，傳統(tǒng)渠道發(fā)布被逐漸壓縮，個人電腦、智能、智能平板和智能電視等

4、設(shè)備逐漸占據(jù)核心傳播渠道，形成多終端效勞的方式，多終端技術(shù)也成為氣象部門為公眾提供公共氣象效勞的重要手段之一?；诰W(wǎng)絡(luò)環(huán)境，氣象效勞信息可以在多終端上展示與更新，對公眾的日常生活提供輔助氣象信息，甚至可以起到減少生命和財產(chǎn)損失的作用。目前，氣象網(wǎng)站上的圖表、數(shù)據(jù)大部分還是以flash為根底展示，并未使用到HTML5的相關(guān)技術(shù)，會出如今沒有裝flash插件的電腦上無法正常顯示的現(xiàn)象。已經(jīng)被氣象網(wǎng)站廣泛應(yīng)用的Echart軟件系統(tǒng)，推出了基于HTML5的圖表應(yīng)用，自動兼容PC端和挪動端。以中國天氣網(wǎng)為例，PC、Android、iOS均能正常顯示，且不需要裝任何插件。2 HTML5在多終端展示的關(guān)鍵技

5、術(shù)與優(yōu)勢拓寬氣象效勞信息的展示渠道，豐富多終端設(shè)備的展示內(nèi)容，應(yīng)用HTML5技術(shù)是最正確解決方案。HTML5是萬維網(wǎng)的核心語言，進一步豐富和增強了HTML標(biāo)記語義、設(shè)備兼容性、圖形特效、本地存儲，以及更強調(diào)了CSS3(層疊款式表)和JavaScript的結(jié)合才能，使頁面布局更明晰、特效更豐富、展示更美觀、適配更簡單。隨著挪動互聯(lián)網(wǎng)技術(shù)的開展， 挪動終端給HTML5技術(shù)提供了更大的開展平臺。目前，智能終端采用的主流操作系統(tǒng)包括：Android(谷歌)、iOS(蘋果)、Windows Phone(微軟)、Symbian(諾基亞)、BlackBerry OS(黑莓)等。由于系統(tǒng)平臺不同，應(yīng)用軟件無法

6、兼容，導(dǎo)致多平臺開發(fā)與更新周期長，移植困難。通過引入HTML5技術(shù)，將native app(本地原生應(yīng)用)開發(fā)轉(zhuǎn)向web app(網(wǎng)頁應(yīng)用)加載閱讀器引擎的開發(fā)，可實現(xiàn)跨越多終端的敏捷迭代，成為app開發(fā)商應(yīng)用的核心解決方案。2.1 豐富的標(biāo)記組成HTML5技術(shù)基于原有標(biāo)準(zhǔn)之上增加了眾多標(biāo)記。相比HTML4，HTML5豐富了表單、視頻、音頻、拖放、畫布、SVG(Scalable Vector Graphics，可伸縮矢量圖形)、地理位置、存儲、緩存和Webworker等內(nèi)容，使標(biāo)記表達更明晰易懂。HTML5技術(shù)重要特征之一就是加強了標(biāo)記的語義化，便于程序員快速理解與編寫網(wǎng)頁布局。一個根本的網(wǎng)頁

7、布局包括頭部、導(dǎo)航、文章內(nèi)容、右邊欄和底部模塊。使用HTML5技術(shù)書寫代碼，頁面模塊全部通過標(biāo)記直接命名，后利用CSS3款式控制標(biāo)記位置，使文檔構(gòu)造更加明晰，可讀性強，更有利于網(wǎng)站SEO(搜索引擎優(yōu)化)工作的開展，提升網(wǎng)站品牌。2.2 多終端的兼容性HTML5技術(shù)自誕生之日起就在業(yè)內(nèi)引起質(zhì)疑，質(zhì)疑的焦點就是閱讀器兼容性的問題。目前，核心閱讀器包括Internet Explorer(微軟閱讀器)、Firefox(火狐閱讀器)、Chrome(谷歌閱讀器)、Opera(歐朋閱讀器)、Safari(蘋果閱讀器)五大品牌，每款閱讀器的排版引擎均有差異。同時，國內(nèi)互聯(lián)網(wǎng)公司也開發(fā)一些綜合閱讀器，將五大閱讀

8、器的排版引擎進展封裝與整合，有的公司甚至進展了深度開發(fā)，使閱讀器具備多形式切換功能，如：搜狗閱讀器、傲游閱讀器、360閱讀器、QQ閱讀器、獵豹閱讀器、世紀(jì)之窗閱讀器等，形成了百家爭鳴的局勢。這一現(xiàn)狀導(dǎo)致了采用同一套HTML、CSS和JavaScript的頁面代碼，卻展示效果略有差異。表1所示為HTML5一些核心的新特效在五大閱讀器的支持情況。可以看到，新版的五大閱讀器均支持顯示HTML5的核心特效，但是微軟的IE系列對HTML5的特效支持效果不佳。伴隨著計算機硬件與軟件技術(shù)的互相促進、不斷開展，操作系統(tǒng)與閱讀器也在快速更新迭代。一批老版本的閱讀器因為速度慢、體驗差被淘汰(如：Windows X

9、P操作系統(tǒng)下的IE6與IE7)，從而使得HTML5技術(shù)又顯活力。同時，國內(nèi)互聯(lián)網(wǎng)公司研發(fā)的閱讀器以功能性強、平安性高、體驗人性化等特點，更受網(wǎng)民青睞，這些閱讀器一律采用最新的排版引擎，對HTML5技術(shù)的支持較好。目前，國內(nèi)互聯(lián)網(wǎng)三大巨頭騰訊、阿里巴巴和百度將旗下網(wǎng)站全部調(diào)整為HTML5技術(shù)搭建，鳳凰、網(wǎng)易、新華、新浪、當(dāng)當(dāng)、攜程、優(yōu)酷等一批知名互聯(lián)網(wǎng)先驅(qū)也相繼完成了網(wǎng)站HTML5化的建立，一些新興網(wǎng)站直接采用HTML5技術(shù)建站。行業(yè)內(nèi)部采用的策略是：在保證不支持HTML5技術(shù)閱讀器的根底功能前提下，全面支持展示更具人性化的HTML5體驗效果。2.2.1 多媒體標(biāo)記在HTML5標(biāo)記中新增了和標(biāo)記

10、，用于插入音頻和視頻文件。該標(biāo)記徹底解決了網(wǎng)頁視頻播放的兼容性問題。在沒有音頻和視頻標(biāo)記之前，網(wǎng)站播放視頻一般使用通過第三方插件研發(fā)的播放器，而有些設(shè)備不支持第三方插件，這樣將導(dǎo)致同一個頁面部分設(shè)備不能播放，例如：以蘋果和安卓操作系統(tǒng)的挪動設(shè)備不支持flash播放器。對于HTML5中的和標(biāo)記，完全依托于各閱讀器自行支持，所使用的播放器也由各大閱讀器公司自行研制，因此標(biāo)記支持的格式也略有差異。為了使多終端支持網(wǎng)頁播放視頻，當(dāng)前一般網(wǎng)站使用斷定終端類別分別處理的解決方案。該方案主要使用JavaScript代碼獲取 懇求消息頭中的UA(用戶代理信息)，通過UA中關(guān)鍵字判斷用戶設(shè)備。假設(shè)用戶設(shè)備為iP

11、hone、iPad、iTouch和Android等挪動設(shè)備，網(wǎng)頁使用標(biāo)記打出。假設(shè)非挪動設(shè)備，網(wǎng)頁繼續(xù)使用第三方插件播放器打出。通過此方案，根本保證網(wǎng)頁視頻在多終端播放的兼容性，也解決了網(wǎng)頁視頻在低版本操作系統(tǒng)(如Windows XP)的播放支持。2.2.2 本地化存儲對于B/S(閱讀器/效勞器形式)架構(gòu)來說，關(guān)聯(lián)與記錄網(wǎng)民屢次懇求信息是個重要技術(shù)要點。HTML5技術(shù)解決本地化存儲問題。其次，數(shù)據(jù)存儲大小也大幅提升，一般閱讀器支持5M的存儲空間，等于為頁面臨時提供了一個微型數(shù)據(jù)庫，減輕效勞器的懇求壓力。3 采用HTML5技術(shù)在氣象效勞信息多終端上展示針對氣象效勞信息，HTML5技術(shù)可提供眾多支

12、撐，以下將重點介紹三種與網(wǎng)絡(luò)氣象效勞親密相關(guān)的技術(shù)，即響應(yīng)式布局、圖表技術(shù)和經(jīng)緯度定位技術(shù)。3.1 響應(yīng)式布局隨著多終端的出現(xiàn)，給網(wǎng)站建立者提出一個很大的難題。各種屏幕尺寸和分辨率不一致，造成網(wǎng)站無法適配。很多網(wǎng)站的解決方法是：為不同的設(shè)備提供不同的網(wǎng)頁，例如在已有PC版的前提下，繼續(xù)提供一個mobile版本、iPhone和iPad版本。如此開發(fā)，增加了架構(gòu)設(shè)計的復(fù)雜度，進步了研發(fā)與運維本錢，僅適用于具備充足維護才能的門戶網(wǎng)站使用。此時，基于HTML5技術(shù)研發(fā)的響應(yīng)式布局技術(shù)，解決了多終端適配的問題。3.1.1 響應(yīng)式介紹響應(yīng)式布局是Ethan Marcotte在2021年5月提出的一個概念，

13、旨在實現(xiàn)一個網(wǎng)站可以兼容多個終端，而不是為每個終端做一個特定的版本。這個概念的出現(xiàn)給低本錢的挪動端網(wǎng)站搭建提供了新思路，可以替代通過效勞器端或網(wǎng)頁獲取用戶懇求的UA判斷設(shè)備類型做指定版本跳轉(zhuǎn)的解決方案。響應(yīng)式布局可以為不同終端的用戶提供更舒適的界面和更優(yōu)質(zhì)的用戶體驗。隨著當(dāng)前不同屏幕、不同分辨率挪動設(shè)備的普及，該技術(shù)將會被更多網(wǎng)站選為解決方案。3.1.2 實現(xiàn)響應(yīng)式布局核心技術(shù)道路是利用HTML5和CSS3的Media Query(媒體查詢)功能準(zhǔn)確限制不同的媒體類型和同一媒體的不同條件。功能支持使用min和max用于表示大于或等于和小于或等于限定閱讀器可視區(qū)域的邊界條件，也能按照設(shè)備的寬高、

14、渲染窗口的寬高、手持設(shè)備的方向、畫面比例、設(shè)備比例等值組合設(shè)定媒體類型的條件。響應(yīng)式布局的優(yōu)點是面對不同分辨率設(shè)備靈敏性強，可以快捷解決多設(shè)備顯示適應(yīng)問題。響應(yīng)式布局的缺乏是不太適用于大型網(wǎng)站開發(fā)，適用于中小型企業(yè)站、構(gòu)造層次簡單的網(wǎng)站上使用。氣象效勞信息發(fā)布的網(wǎng)站可使用本技術(shù)，確定適配幾種屏幕分辨率開展研發(fā)工作，可以降低后期維護多種終端網(wǎng)站的本錢。3.2 圖表技術(shù)在氣象效勞信息發(fā)布時，一般會將難懂的數(shù)據(jù)繪制成曲線圖、柱狀圖和餅狀圖等圖形，便于公眾直觀理解數(shù)據(jù)的含義。在HTML4技術(shù)時代，網(wǎng)站主要嵌入使用第三方插件研發(fā)的圖形產(chǎn)品，如flash圖形，這就要求閱讀器本身必須安裝第三方插件。在網(wǎng)絡(luò)環(huán)

15、境較差的情況下，第三方插件加載緩慢，甚至?xí)虞d失敗，導(dǎo)致閱讀器卡頓，更大的弊端在于第三方插件的兼容性，如：部分挪動設(shè)備不支持flash插件，無法實現(xiàn)多終端顯示。HTML5技術(shù)的出現(xiàn)徹底解決了此類問題。近期由于HTML5的繪圖效果俱佳、兼容性好，部分PC和挪動設(shè)備閱讀器的開發(fā)商宣布將不再支持部分第三方插件。3.2.1 實現(xiàn)針對Echarts的使用需要分兩方面施行。第一是對前端款式展現(xiàn)進展配置，第二是用AJAX(異步JavaScript和XML)方式懇求獲取后臺數(shù)據(jù)(氣象效勞信息)，Echarts來加載數(shù)據(jù)。首先為Echarts準(zhǔn)備一個具有高寬的DOM容器，初始化時加載Echarts，同時選定需要

16、加載的屬性進展配置。其次，將需要動態(tài)加載數(shù)據(jù)的配置放入AJAX的success:function()中進展處理，定義一個容器接收即將動態(tài)參加數(shù)據(jù)的配置項的數(shù)組，后對后臺返回過來的數(shù)據(jù)進展遍歷。最終，將遍歷出的數(shù)據(jù)賦給容器中的相應(yīng)屬性。3.3 經(jīng)緯度定位技術(shù)當(dāng)前，氣象信息效勞的方式已經(jīng)不局限于簡單的信息發(fā)布，更強調(diào)與受眾的根本屬性直接關(guān)聯(lián)，基于位置的效勞就是氣象信息效勞中最常用的一種方式。常見獲取終端的定位方式包括：無線網(wǎng)絡(luò)定位、IP(網(wǎng)絡(luò)互連協(xié)議)定位、基站定位和經(jīng)緯度定位等。在多終端上展示氣象效勞信息網(wǎng)站內(nèi)容時，最常用、最直接、最便捷的方式為IP定位與經(jīng)緯度相結(jié)合的方式。3.3.1 概述經(jīng)緯

17、度定位使用的是HTML5 Geolocation接口獲得用戶的地理位置。該方法兼容支持Internet Explorer9、Firefox、Chrome、Safari以及Opera閱讀器調(diào)用。對于挪動設(shè)備具備GPS(全球定位系統(tǒng))定位或北斗衛(wèi)星定位的設(shè)備，經(jīng)緯度獲取更為準(zhǔn)確，如智能平板、智能、智能電視等。面向氣象效勞信息適配多終端設(shè)備展示，首先判斷是否為挪動設(shè)備，假設(shè)確定為挪動設(shè)備，可直接獲取設(shè)備的經(jīng)緯度信息，利用經(jīng)緯度信息判斷用戶的地理位置，推送與地理位置相關(guān)的氣象效勞;假設(shè)非挪動設(shè)備或用戶制止定位自身設(shè)備，可直接通過自研的IP定位接口獲取設(shè)備的IP信息，通過IP確定用戶地理位置(當(dāng)前IP定位僅限到市級)，并推送與地理位置相關(guān)的氣象效勞。3.3.2 實現(xiàn)應(yīng)用HTML5實現(xiàn)經(jīng)緯度定位時， 需要編寫JavaScript代碼通過navigator.geolocation對象獲取多終端設(shè)備的當(dāng)前位置，該對象包含三個方法，即getCurrentPosition、watchPosition和clearWatch。其中g(shù)etCurrentPosition方法為獲取設(shè)備經(jīng)緯度的方法，可以提供經(jīng)度、緯度和海拔信息;提供的以米為單位的經(jīng)度、緯度和海拔準(zhǔn)確度;提供以米每秒為單位的設(shè)備的當(dāng)前對地速度;提