HTML5技术在气象服务信息多终端展示方面的合理应用

1991年8月6日，蒂姆伯纳斯李搭建了世界上第一个网站，随后作为应用于网站页面显示的HTML语言于1993年6月作为IETF的工作草案发布，直至2014年10月28日W3C正式发布HTML第五次重大修改，即HTML5。

HTML5的出现赶上了互联网在多终端大规模应用的黄金时代。依据中国互联网络信息中心2016年7月公布的《中国互联网络发展状况统计报告》表明，中国网民对于各类信息的需求量与及时性与日俱增，阅读信息占据人们日常的黄金时间和碎片化时间;同时信息展现渠道也覆盖了众多终端设备，从PC发展到移动设备，各行各业的信息也通过多终端服务到人们生活的每个角落。

作为信息资源的一个分支，气象服务信息在决策、公众、专业与科技服务中起到重要作用，应用HTML5技术在多终端设备上传播与展示气象服务信息是大势所趋。HTML5技术能够满足适配与兼容多终端设备的展示需求，具备三维、图形及显示特效的展现能力，有利于最大化提高网络气象信息的服务质量，从而提升用户体验与用户黏性。

1 气象服务信息在多终端展示方面的迫切需求

随着人们生活质量的不断提升，公众对于气象服务的及时性与准确性也有了更高的要求。对于天气趋势、实时变化、风雨影响、突发灾害等与衣、食、住、行息息相关的气象信息，公众需求更为迫切。为迎合需求，气象部门面向各类受众研发出各种气象服务信息与产品，仅以预报为例：从短期预报到长期预报、从站点预报到格点预报、从常规预报到精细化预报、从人工预报到模式预报，不断地被丰富和发展。如何将气象信息通过更多的渠道第一时间发布这一问题成为气象部门面临的重要障碍之一。

目前，我国气象部门面向公众提供气象服务信息的渠道主要有：报纸、电视、电台、农村大喇叭、电子显示屏等传统渠道。随着互联网技术和4G技术的普及，传统渠道发布被逐渐压缩，个人电脑、智能手机、智能平板和智能电视等设备逐渐占据核心传播渠道，形成多终端服务的方式，多终端技术也成为气象部门为公众提供公共气象服务的重要手段之一。基于网络环境，气象服务信息能够在多终 シ端上展示与更新，对公众的日常生活提供辅助气象信息，甚至能够起到✫减少生命和财产损失的作用。

目前，气象网站上的图表、数据大部分还是以flash为基础展示，并未使用到HTML5的相关技术，会出现在没有装flash插件的电脑上无法正常显示的现象。已经被气象网站广泛应用的Echart软件系统，推出了基于HTML5的图表应用，自动兼容PC端和移动端。以中国天气网为例，PC、Android、iOS均能正常显示，且不需要装任何插件。

2 HTML5在多终端展示的关键技术与优势

拓宽气象服务信息的展示渠道，丰富多终端设备的展示内容，应用HTML5技术是最佳解决方♡案。HTML5是万维网的核心语言，进一步丰富和增强了HTML标记语义、设备兼容性、图形特效、本地存储，以及更强调了CSS3和JavaScript的结合能力，使页面布局更清晰、特效更丰富、展示更美观、适配更简单。

随着移动互联网技术的发展， 移动终端给HTML5技术提供了更大的发展平台。目前，智能终端采用的主流操作系统包括：Android、iOS、Windows Phone、Symbian、BlackBerry OS等。由于系统平台不同，应用软件无法兼容，导致多平台开发与更新周期长，移植困难。通过引入HTML5技术，将native app开发转向web app加载浏览器引擎的开发，可实现跨越多终端的敏捷迭代，成为app开发商应用的核心解决方案。

2.1 丰富的标记组成

HTML5技术基于原有标准之上增加了众多标记。相比HTML4，HTML5丰富了表单、视频、音频、拖放、画布、SVG、地理位置、存储、缓存和Webworker等内容，使标记表达更清晰易懂。

HTML5技术重要特征之一就是加强了标记的语义化，便于程序员快速理解与编写网页布局。一个基本的网页布局包括头部、导航、文章内容、右边栏和底部模块。使用HTML5技术书写代码，页面模块全部通过标记直接命名，后利用CSS3样式控制标记位置，使文档结构更加清晰，可读性强，更有利于网站SEO工作的开展，提升网站品牌。

2.2 多终端的兼容性

HTML5技术自诞生之日起就在业内引起质疑，质疑的焦点就是浏览器兼容性的问题。目前，核心浏览器包括Internet Explorer、Firefox、Chrome、Opera、Safari五大品牌，每款浏览器的排版引擎均有差异。同时，国内互联网公司也开发一些综合浏览器，将五大浏览器的排版引擎进行封装与整合，有的公司甚至进行了深度开发，使浏览器具备多模式切换功能，如：搜狗浏览器、傲游浏览器、360浏览器、QQ浏览器、猎豹浏览器、世纪之窗浏览器等，形成了百家争鸣的局势。这一现状导致了采用同一套HTML、CSS和JavaScript的页面代码，却展示效果略有差异。表1所示为HTML5一些核心的新特效在五大浏☒览器的支持情况。可以看到，新版的五大浏览器均支持显示HTML5的核心特效，但是微软的IE系列对HTML5的特效支持效果不佳。

伴随着计算机硬件与软件技术的相互促进、不断发展，操作系统与浏览器也在快速更新迭代。一批老版本的浏览器因为速度慢、体验差被淘汰，从而使得HTML5技术又显生机。同时，国内互联网公司研发的浏览器以功能性强、安全性高、体验人性化等特点，更受网民青睐，这些浏览器一律采用最新的排版引擎，对HTML5技术的支持较好。目前，国内互联网三大巨头腾讯、阿里巴巴和百度将旗下网站全部调整为HTML5技术搭建，凤凰、网易、新华、新浪、当当、携程、优酷等一批知名互联网先驱也相继完成了网站HTML5化的建设，一些新兴网站直接采用HTML5技术建站。行业内部采用的ต策略是：在保证不支持HTML5技术浏览器的基础功能前提下，全面支持展示更具人性化的HTML5体验效果。

2.2.1 多媒体标记

在HTML5标记中新增了和标记，用于插入音频和视频文件。该标记彻底解决了网页视频播放的兼容性问题。在没有音频和视频标记之前，网站播放视频一般使用通过第三方插件研发的播放器，而有些设备不支持第三方插件，这样将导致同一个页面部分设备不能播放，例如：以苹果和安卓操作系统的移动设备不支持flash播放器。

对于HTML5中的和标记，完全依托于各浏览器自行支持，所使用的播放器也由各大浏览器公司自行研制，因此标记支持的格式也略有差异。为了使多终端支持网页播放视频，当前一般网站使用判定终端类别分别处理的解决方案。该方案主要使用JavaScript代码获取HTTP请求消息头中的UA，通过UA中关键字判断用户设备。如果用户设备为iPhone、iPad、iTouch和Android等移动设备，网页使用标记打出。如果非移动设备，网页继续使用第三方插件播放器打出。通过此方案，基本保证网页视频在多终端播放的兼容性，也解决了网页视频在低版本操作系统的播放支持。

2.2.2 本地化存储

对于B/S架构来说，关联与记录网民多次请求信息是个重要技术要点。HTML5技术解决本地化存储问题。其次，数据存储大小也大幅提升，一般浏览器支持5M的存储空间，等于为页面临时提供了一个微型数据库，减轻服务器的请求压力。

3 采用HTML5技术在气象服务信息多终端上展示

针对气象服务信息，HTML5技术可提供众多支撑，以下将重点介绍三种与网络气象服务密切相关的技术，即响应式布局、图表技术和经纬度定位技术。

3.1 响应式布局

随着多终端的出现，给网站建设者提出一个很大的难题。各种屏幕尺寸和分辨率不一致，造成网站无法适配。很多网站的解决方法是：为不同的设备提供不同的网页，例如在已有PC版的前提下，继续提供一个mobile版本、iPhone和iPad版本。如此开发，增加了架构设计的复杂度，提高了研发与运维成本，仅适用于具备充足维护能力的门户网站使用。此时，基于HTML5技术研发的响应式布局技术，解决了多终端适配的问题。

3.1.1 响应式介绍

响应式布局是Ethan Marcotte在2010年5月提出的一个概念，旨在实现一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念的出现给低成本的移动端网站搭建提供了新思路，能够替代通过服务器端或网页获取用户请求的UA判断设备类型做指定版本跳转的解决方案。响应式布局可以为不同终端的用户提供更舒适的界面和更优质的用户体验。随着当前不同屏幕、不同分辨率移动设备的普及，该技术将会被更多网站选为解决方案。

3.1.2 实现

响应式布局核心技术路线是利用HTML5和CSS3的Media Query功能精确限制不同的媒体类型和同一媒体的不同条件。功能支持使用min和max用于表示大于或等于和小于或等于限定浏览器可视区域的边界条件，也能按照设备的宽高、渲染窗口的宽高、手持设备的方向、画面比例、设备比例等值组合设定媒体类型的条件。

响应式布局的优点是面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。响应式布局的不足是不太适用于大型网站开发，适用于中小型企业站、结构层次简单的网站上使用。气象服务信息发布的网站可使用本技术，确定适配几种屏幕分辨率开展研发工作，能够降低后期维护多种终端网站的成本。

3.2 图表技术

在气象服务信息发布时，一般会将难懂的数据绘制成曲线图、柱状图和饼状图等图形，便于公众直观理解数据的含义。在HTML4技术时代，网站主要嵌入使用第三方插件研发的图形产品，如flash图形，这就要求浏览器本身必须安装第三方插件。在网络环境较差的情况下，第三方插件加载缓慢，甚至会加载失败，导致浏览器卡顿，更大的弊端在于第三方插件的兼容性，如：部分移动设备不支持flash插件，无法实现多终端显示。HTML5技术的出现彻底解决了此类问题。近期由于HTML5的绘图效果俱佳、兼容性好，部分PC和移动设备浏览器的开发商宣布将不再支持部分第三方插件。

3.2.1 实现

针对Echarts的使用需要分两方面实施。第一是对前端样式展现进行配置，第二是用AJAX方式请求获取后台数据，Echarts来加载数据。

首先为Echarts准备一个具有高宽的DOM容器，初始化时加载Echarts，同时选定需要加载的属性进行配置。其次，将需要动态加载数据的配置放入AJAX的success:function{}中进行处理，定义一个容器接收即将动态加入数据的配置项的数组，后对后台返回过来的数据进行遍历。最终，将遍历出的数据赋给容器中的相应属性。

3.3 经纬度定位技术

当前，气象信息服务的方式已经不局限于简单的信息发布，更强调与受众的基本属性直接关联，基于位置的服务就是气象信息服务中最常用的一种方式。常见获取终端的定位方式包括：无线网络定位、IP定位、手机基站定位和经纬度定位等。在多终端上展示气象服务信息网站内容时，最常用、最直接、最便捷的方式为IP定位与经纬度相结合的方式。

3.3.1 概述

经纬度定位使用的是HTML5 Geolocation接口获得用户的地理位置。该方法兼容支持Internet Explorer9、Firefox、Chrome、Safari以及Opera浏览器调用。对于移动设备具备GPS定位或北斗卫星定位的设备，经纬度获取更为准确，如智能平板、智能手机、智能电视等。

面向气象服务信息适配多终端设备展示，首先判断是否为移动设备，如果确定为移动设备，可直接获取设备的经纬度信息，利用经纬度信息判断用户的地理位置，推送与地理位置相关的气象服务;如果非移动设备或用户禁止定位自身设备，可直接通过自研的IP定位接口获取设备的IP信息，通过IP确定用户地理位置，并推送与地理位置相关的气象服务。

3.3.2 实现

应用HTML5实现经纬度定位时， 需要编写JavaScript代码通过navigator.geolocation对象获取多终端设备的当前位置，该对象包含三个方法，即getCurrentPosition、watchPosition和clearWatch。其中getCurrentPosition方法为获取设备经纬度的方法，能够提供经度、纬度和海拔信息;提供的以米为单位的经度、纬度和海拔精确度;提供以米每秒为单位的设备的当前对地速度;提供智能设备当前移动的角度方向等内容。

4 结论

HTML5技术作为新一代Web技术已逐渐趋于成熟，特别是在多终端应用领域的突出作用，成为各大互联网公司应用的核心技术。通过使用HTML5技术，辅助气象服务信息在PC和移动设备等多终端上展示内容，能够减少Web研发的复杂度、缩短研发周期、降低后期运维成本，同时也能够拓宽支撑气象服务信息发布渠道，增强气象服务信息与公众的关联性，提升气象服务信息发布的用户体验，为建设以人为本网络气象服务提供强有力的技术储备。