HTML5技術在氣象服務信息多終端展示方面的合理應用_優(yōu)秀論文

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

2、時性與日俱增, 閱讀信息占據(jù)人們日常的黃金時間和碎片化時間;同時信息展現(xiàn)渠道也覆蓋了眾多終端設備, 從PC(Personal Computer, 個人計算機)發(fā)展到移動設備, 各行各業(yè)的信息也通過多終端服務到人們生活的每個角落。作為信息資源的一個分支, 氣象服務信息在決策、公眾、專業(yè)與科技服務中起到重要作用, 應用HTML5技術在多終端設備上傳播與展示氣象服務信息是大勢所趨。HTML5技術能夠滿足適配與兼容多終端設備的展示需求, 具備三維、圖形及顯示特效的展現(xiàn)能力, 有利于最大化提高網(wǎng)絡氣象信息的服務質量, 從而提升用戶體驗與用戶黏性。1 氣象服務信息在多終端展示方面的迫切需求隨著人們生活質量

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

4、縮, 個人電腦、智能手機、智能平板和智能電視等設備逐漸占據(jù)核心傳播渠道, 形成多終端服務的方式, 多終端技術也成為氣象部門為公眾提供公共氣象服務的重要手段之一?；诰W(wǎng)絡環(huán)境, 氣象服務信息能夠在多終端上展示與更新, 對公眾的日常生活提供輔助氣象信息, 甚至能夠起到減少生命和財產損失的作用。目前, 氣象上的圖表、數(shù)據(jù)大部分還是以flash為基礎展示, 并未使用到HTML5的相關技術, 會出現(xiàn)在沒有裝flash插件的電腦上無法正常顯示的現(xiàn)象。已經(jīng)被氣象廣泛應用的Echart軟件系統(tǒng), 推出了基于HTML5的圖表應用, 自動兼容PC端和移動端。以中國天氣網(wǎng)為例, PC、Android、iOS均能正常

5、顯示, 且不需要裝任何插件。2 HTML5在多終端展示的關鍵技術與優(yōu)勢拓寬氣象服務信息的展示渠道, 豐富多終端設備的展示內容, 應用HTML5技術是最佳解決方案。HTML5是萬維網(wǎng)的核心語言, 進一步豐富和增強了HTML標記語義、設備兼容性、圖形特效、本地存儲, 以及更強調了CSS3(層疊樣式表)和JavaScript的結合能力, 使頁面布局更清晰、特效更豐富、展示更美觀、適配更簡單。隨著移動互聯(lián)網(wǎng)技術的發(fā)展, 移動終端給HTML5技術提供了更大的發(fā)展平臺。目前, 智能終端采用的主流操作系統(tǒng)包括：Android(谷歌)、iOS(蘋果)、Windows Phone(微軟)、Symbian(諾基亞

6、)、BlackBerry OS(黑莓)等。由于系統(tǒng)平臺不同, 應用軟件無法兼容, 導致多平臺開發(fā)與更新周期長, 移植困難。通過引入HTML5技術, 將native app(本地原生應用)開發(fā)轉向web app(網(wǎng)頁應用)加載瀏覽器引擎的開發(fā), 可實現(xiàn)跨越多終端的敏捷迭代, 成為app開發(fā)商應用的核心解決方案。2.1 豐富的標記組成HTML5技術基于原有標準之上增加了眾多標記。相比HTML4, HTML5豐富了表單、視頻、音頻、拖放、畫布、SVG(Scalable Vector Graphics, 可伸縮矢量圖形)、地理位置、存儲、緩存和Webworker等內容, 使標記表達更清晰易懂。HTML

7、5技術重要特征之一就是加強了標記的語義化, 便于程序員快速理解與編寫網(wǎng)頁布局。一個基本的網(wǎng)頁布局包括頭部、導航、文章內容、右邊欄和底部模塊。使用HTML5技術書寫代碼, 頁面模塊全部通過標記直接命名, 后利用CSS3樣式控制標記位置, 使文檔結構更加清晰, 可讀性強, 更有利于SEO(搜索引擎優(yōu)化)工作的開展, 提升品牌。2.2 多終端的兼容性HTML5技術自誕生之日起就在業(yè)內引起質疑, 質疑的焦點就是瀏覽器兼容性的問題。目前, 核心瀏覽器包括Internet Explorer(微軟瀏覽器)、Firefox(火狐瀏覽器)、Chrome(谷歌瀏覽器)、Opera(歐朋瀏覽器)、Safari(蘋果

8、瀏覽器)五大品牌, 每款瀏覽器的排版引擎均有差異。同時, 國內互聯(lián)網(wǎng)公司也開發(fā)一些綜合瀏覽器, 將五大瀏覽器的排版引擎進行封裝與整合, 有的公司甚至進行了深度開發(fā), 使瀏覽器具備多模式切換功能, 如：搜狗瀏覽器、傲游瀏覽器、360瀏覽器、QQ瀏覽器、獵豹瀏覽器、世紀之窗瀏覽器等, 形成了百家爭鳴的局勢。這一現(xiàn)狀導致了采用同一套HTML、CSS和JavaScript的頁面代碼, 卻展示效果略有差異。表1所示為HTML5一些核心的新特效在五大瀏覽器的支持情況。可以看到, 新版的五大瀏覽器均支持顯示HTML5的核心特效, 但是微軟的IE系列對HTML5的特效支持效果不佳。伴隨著計算機硬件與軟件技術的

9、相互促進、不斷發(fā)展, 操作系統(tǒng)與瀏覽器也在快速更新迭代。一批老版本的瀏覽器因為速度慢、體驗差被淘汰(如：Windows XP操作系統(tǒng)下的IE6與IE7), 從而使得HTML5技術又顯生機。同時, 國內互聯(lián)網(wǎng)公司研發(fā)的瀏覽器以功能性強、安全性高、體驗人性化等特點, 更受網(wǎng)民青睞, 這些瀏覽器一律采用最新的排版引擎, 對HTML5技術的支持較好。目前, 國內互聯(lián)網(wǎng)三大巨頭騰訊、阿里巴巴和百度將旗下全部調整為HTML5技術搭建, 鳳凰、網(wǎng)易、新華、新浪、當當、攜程、優(yōu)酷等一批知名互聯(lián)網(wǎng)先驅也相繼完成了HTML5化的建設, 一些新興直接采用HTML5技術建站。行業(yè)內部采用的策略是：在保證不支持HTML

10、5技術瀏覽器的基礎功能前提下, 全面支持展示更具人性化的HTML5體驗效果。2.2.1 多媒體標記在HTML5標記中新增了和標記, 用于插入音頻和視頻文件。該標記徹底解決了網(wǎng)頁視頻播放的兼容性問題。在沒有音頻和視頻標記之前, 播放視頻一般使用通過第三方插件研發(fā)的播放器, 而有些設備不支持第三方插件, 這樣將導致同一個頁面部分設備不能播放, 例如：以蘋果和安卓操作系統(tǒng)的移動設備不支持flash播放器。對于HTML5中的和標記, 完全依托于各瀏覽器自行支持, 所使用的播放器也由各大瀏覽器公司自行研制, 因此標記支持的格式也略有差異。為了使多終端支持網(wǎng)頁播放視頻, 當前一般使用判定終端類別分別處理的

11、解決方案。該方案主要使用JavaScript代碼獲取HTTP請求消息頭中的UA(用戶代理信息), 通過UA中關鍵字判斷用戶設備。如果用戶設備為iPhone、iPad、iTouch和Android等移動設備, 網(wǎng)頁使用標記打出。如果非移動設備, 網(wǎng)頁繼續(xù)使用第三方插件播放器打出。通過此方案, 基本保證網(wǎng)頁視頻在多終端播放的兼容性, 也解決了網(wǎng)頁視頻在低版本操作系統(tǒng)(如Windows XP)的播放支持。2.2.2 本地化存儲對于B/S(瀏覽器/服務器模式)架構來說, 關聯(lián)與記錄網(wǎng)民多次請求信息是個重要技術要點。HTML5技術解決本地化存儲問題。其次, 數(shù)據(jù)存儲大小也大幅提升, 一般瀏覽器支持5M的

12、存儲空間, 等于為頁面臨時提供了一個微型數(shù)據(jù)庫, 減輕服務器的請求壓力。3 采用HTML5技術在氣象服務信息多終端上展示針對氣象服務信息, HTML5技術可提供眾多支撐, 以下將重點介紹三種與網(wǎng)絡氣象服務密切相關的技術, 即響應式布局、圖表技術和經(jīng)緯度定位技術。3.1 響應式布局隨著多終端的出現(xiàn), 給建設者提出一個很大的難題。各種屏幕尺寸和分辨率不一致, 造成無法適配。很多的解決方法是：為不同的設備提供不同的網(wǎng)頁, 例如在已有PC版的前提下, 繼續(xù)提供一個mobile版本、iPhone和iPad版本。如此開發(fā), 增加了架構設計的復雜度, 提高了研發(fā)與運維成本, 僅適用于具備充足維護能力的門戶使

13、用。此時, 基于HTML5技術研發(fā)的響應式布局技術, 解決了多終端適配的問題。3.1.1 響應式介紹響應式布局是Ethan Marcotte在2010年5月提出的一個概念, 旨在實現(xiàn)一個能夠兼容多個終端, 而不是為每個終端做一個特定的版本。這個概念的出現(xiàn)給低成本的移動端搭建提供了新思路, 能夠替代通過服務器端或網(wǎng)頁獲取用戶請求的UA判斷設備類型做指定版本跳轉的解決方案。響應式布局可以為不同終端的用戶提供更舒適的界面和更優(yōu)質的用戶體驗。隨著當前不同屏幕、不同分辨率移動設備的普及, 該技術將會被更多選為解決方案。3.1.2 實現(xiàn)響應式布局核心技術路線是利用HTML5和CSS3的Media Quer

14、y(媒體查詢)功能精確限制不同的媒體類型和同一媒體的不同條件。功能支持使用min和max用于表示大于或等于和小于或等于限定瀏覽器可視區(qū)域的邊界條件, 也能按照設備的寬高、渲染窗口的寬高、手持設備的方向、畫面比例、設備比例等值組合設定媒體類型的條件。響應式布局的優(yōu)點是面對不同分辨率設備靈活性強, 能夠快捷解決多設備顯示適應問題。響應式布局的不足是不太適用于大型開發(fā), 適用于中小型企業(yè)站、結構層次簡單的上使用。氣象服務信息發(fā)布的可使用本技術, 確定適配幾種屏幕分辨率開展研發(fā)工作, 能夠降低后期維護多種終端的成本。3.2 圖表技術在氣象服務信息發(fā)布時, 一般會將難懂的數(shù)據(jù)繪制成曲線圖、柱狀圖和餅狀圖

15、等圖形, 便于公眾直觀理解數(shù)據(jù)的含義。在HTML4技術時代, 主要嵌入使用第三方插件研發(fā)的圖形產品, 如flash圖形, 這就要求瀏覽器本身必須安裝第三方插件。在網(wǎng)絡環(huán)境較差的情況下, 第三方插件加載緩慢, 甚至會加載失敗, 導致瀏覽器卡頓, 更大的弊端在于第三方插件的兼容性, 如：部分移動設備不支持flash插件, 無法實現(xiàn)多終端顯示。HTML5技術的出現(xiàn)徹底解決了此類問題。近期由于HTML5的繪圖效果俱佳、兼容性好, 部分PC和移動設備瀏覽器的開發(fā)商宣布將不再支持部分第三方插件。3.2.1 實現(xiàn)針對Echarts的使用需要分兩方面實施。第一是對前端樣式展現(xiàn)進行配置, 第二是用AJAX(異步

16、JavaScript和XML)方式請求獲取后臺數(shù)據(jù)(氣象服務信息), Echarts來加載數(shù)據(jù)。首先為Echarts準備一個具有高寬的DOM容器, 初始化時加載Echarts, 同時選定需要加載的屬性進行配置。其次, 將需要動態(tài)加載數(shù)據(jù)的配置放入AJAX的success:function()中進行處理, 定義一個容器接收即將動態(tài)加入數(shù)據(jù)的配置項的數(shù)組, 后對后臺返回過來的數(shù)據(jù)進行遍歷。最終, 將遍歷出的數(shù)據(jù)賦給容器中的相應屬性。3.3 經(jīng)緯度定位技術當前, 氣象信息服務的方式已經(jīng)不局限于簡單的信息發(fā)布, 更強調與受眾的基本屬性直接關聯(lián), 基于位置的服務就是氣象信息服務中最常用的一種方式。常見獲

17、取終端的定位方式包括：無線網(wǎng)絡定位、IP(網(wǎng)絡互連協(xié)議)定位、手機基站定位和經(jīng)緯度定位等。在多終端上展示氣象服務信息內容時, 最常用、最直接、最便捷的方式為IP定位與經(jīng)緯度相結合的方式。3.3.1 概述經(jīng)緯度定位使用的是HTML5 Geolocation接口獲得用戶的地理位置。該方法兼容支持Internet Explorer9、Firefox、Chrome、Safari以及Opera瀏覽器調用。對于移動設備具備GPS(全球定位系統(tǒng))定位或北斗衛(wèi)星定位的設備, 經(jīng)緯度獲取更為準確, 如智能平板、智能手機、智能電視等。面向氣象服務信息適配多終端設備展示, 首先判斷是否為移動設備, 如果確定為移動設

18、備, 可直接獲取設備的經(jīng)緯度信息, 利用經(jīng)緯度信息判斷用戶的地理位置, 推送與地理位置相關的氣象服務;如果非移動設備或用戶禁止定位自身設備, 可直接通過自研的IP定位接口獲取設備的IP信息, 通過IP確定用戶地理位置(當前IP定位僅限到市級), 并推送與地理位置相關的氣象服務。3.3.2 實現(xiàn)應用HTML5實現(xiàn)經(jīng)緯度定位時, 需要編寫JavaScript代碼通過navigator.geolocation對象獲取多終端設備的當前位置, 該對象包含三個方法, 即getCurrentPosition、watchPosition和clearWatch。其中getCurrentPosition方法為獲取設備經(jīng)緯度的方法, 能夠提供經(jīng)