当前位置:首页 >主题月刊>

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

来源:www.timetimetime.net 时间:2019-11-05 编辑:经典散文

1991年8月6日,Tim Berners-Lee(互联网之父)建立了世界上第一个网站,随后将其用作网站页面的HTML语言(超文本标记语言)。 6月,它作为IETF(互联网工程任务组)的工作草案发布,直到2014年10月28日。W3C(万维网联盟)正式发布了HTML的第五个主要修订版HTML5。

HTML5的出现赶上了Internet在多终端的大规模应用中的“黄金时代”。根据中国互联网络信息中心2016年7月发布的《中国互联网络发展状况统计报告》,中国网民对各种信息的需求和及时性在不断提高。阅读信息占据了人们每天的“黄金”时间和“碎片”时间;该显示频道还涵盖了从PC(个人计算机)到移动设备的大量终端设备,并且来自各行各业的信息还通过多终端服务为人们的生活的各个角落提供服务。

气象服务信息作为信息资源的一个分支,在决策,公共,专业和科学服务中发挥着重要作用。使用HTML5技术在多终端设备上传播和显示气象服务信息已成为大势所趋。 HTML5技术可以满足自适应和兼容多终端设备的显示要求,并具有显示三维,图形和显示特殊效果的能力,这有利于最大程度地提高网络气象信息的服务质量,从而改善用户体验和用户粘性。

1多终端显示屏对气象服务信息的迫切需求

随着人们生活质量的不断提高,公众对气象服务的及时性和准确性提出了更高的要求。公众对天气信息的需求更加迫切,例如天气趋势,实时变化,风雨影响以及突发性灾害,这些与“衣服,食物,住房和交通”密切相关。为了满足需求,气象部门针对不同的受众开发了各种气象服务信息和产品,仅以预报为例:从短期预报到长期预报,从现场预报到网格预报,从常规预报从精细预测到模型预测,从人工预测到模型预测都在不断丰富和发展。 “如何首次通过更多渠道发布气象信息”已成为气象部门面临的重要障碍之一。

目前,中国气象部门向公众提供气象服务信息的渠道主要包括报纸,电视,广播电台,农村大喇叭,电子显示器等传统渠道。随着互联网技术和4G技术的普及,传统的渠道释放已逐渐压缩,个人计算机,智能手机,智能平板电脑和智能电视等设备逐渐占据了核心通信渠道,形成了多终端服务模式,而且多终端技术也已成为气象部门。向公众提供公共天气服务的重要手段之一。根据网络环境,可以在多个终端上显示和更新气象服务信息,为公众的日常生活提供辅助天气信息,甚至可以减少生命和财产损失。

目前,天气网站上的大多数图表和数据都是基于Flash显示的。没有使用HTML5的相关技术,它会在没有Flash插件的情况下出现在计算机上。 Echart软件系统已被气象网站广泛使用,它已经启动了基于HTML5的图表应用程序,该应用程序与PC和移动设备自动兼容。以中国天气网为例,PC,Android,iOS可以正常显示,无需安装插件。

HTML5在多终端显示中的2个关键技术和优势

拓宽气象服务信息的显示渠道,丰富多终端设备的显示内容,应用HTML5技术是最佳解决方案。 HTML5是万维网的核心语言,它进一步丰富和增强了HTML标记的语义,设备兼容性,图形效果,本地存储,并且更加注重CSS3(级联样式表)和JavaScript的结合,从而使页面布局更加清晰明了。比较特别。丰富,美丽,易于修改。

随着移动互联网技术的发展,移动终端为HTML5技术的发展提供了平台。当前,智能终端使用的主流操作系统包括:Android(Google),iOS(Apple),Windows Phone(Microsoft),Symbian(Nokia),BlackBerry OS(Blackberry)等。由于系统平台不同,应用程序软件无法兼容,从而导致多个平台的开发和更新周期长,并且移植困难。通过引入HTML5技术,本机应用程序(本地本机应用程序)到加载浏览器引擎开发的Web应用程序(Web应用程序)的开发,可以实现跨多个终端的敏捷迭代,成为应用程序开发人员应用程序的核心解决方案。

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核心效果的显示,但是Microsoft的IE系列不支持HTML5特殊效果。

随着计算机硬件和软件技术的相互促进和不断发展,操作系统和浏览器也在迅速更新迭代。由于速度慢和缺乏经验(例如Windows XP操作系统下的IE6和IE7),已淘汰了许多旧的浏览器,这使HTML5技术开始发挥作用。同时,国内互联网公司开发的浏览器以其强大的功能,较高的安全性和人性化的体验受到网民的高度青睐。这些浏览器均采用最新的排版引擎并支持HTML5技术。目前,国内三大互联网巨头腾讯,阿里巴巴和百度都已将其网站调整为HTML5技术。凤凰卫视,网易,新华网,新浪网,当当网,携程,优酷网等知名互联网先驱也都完成了HTML5网站。一些新兴网站的建设直接使用HTML5技术来建立站点。行业内采用的策略是在确保不支持HTML5技术的浏览器的基本功能的前提下,完全支持显示更用户友好的HTML5体验。

2.2.1多媒体标签

在HTML5标签中添加了和标签,用于插入音频和视频文件。该标签完全解决了网络视频播放的兼容性问题。在没有音频和视频标记之前,网站广播的视频通常使用由第三方插件开发的播放器,并且某些设备不支持第三方插件,这将导致同一页面上的某些设备无法播放,例如:Apple和Android操作系统该移动设备不支持Flash Player。

对于HTML5标记,它完全依赖于浏览器本身的支持。所使用的播放器也是由主要的浏览器公司开发的,因此商标支持的格式略有不同。为了使多终端支持网页播放视频,当前的通用网站使用“单独确定终端类处理”的解决方案。该方案主要使用JavaScript代码在HTTP请求消息的报头中获取UA(用户代理信息),并通过使用UA中的关键字来判断用户设备。如果用户设备是移动设备(例如iPhone,iPad,iTouch和Android),则该网页上会标有标签。如果不是移动设备,则继续使用第三方插件播放器来播放网页。通过该方案,基本上保证了网页视频在多终端播放中的兼容性,并且还解决了在低级操作系统(例如Windows XP)中网页视频的播放支持。

2.2.2本地存储

对于B/S(浏览器/服务器模式)体系结构,多次关联和记录Internet用户的信息请求是重要的技术点。 HTML5技术解决了本地化的存储问题。其次,数据存储的大小也大大提高了。通用浏览器支持5M的存储空间,这相当于为页面临时提供一个微型数据库,以减轻服务器的请求压力。

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

HTML5技术可以为气象服务信息提供很多支持。下面将重点介绍与网络天气服务紧密相关的三种技术,即响应式布局,制图技术和经纬度定位技术。

3.1响应式布局

随着多终端的出现,这对网站建设者提出了很大的问题。各种屏幕尺寸和分辨率不一致,导致网站不合适。许多网站的解决方案是在现有PC版本的前提下为不同的设备提供不同的网页,例如移动版本,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插件-ins,无法实现多终端显示。 HTML5技术的出现彻底解决了此类问题。最近,一些PC和移动浏览器开发人员宣布,由于HTML5的出色绘制效果和兼容性,它们将不再支持某些第三方插件。

3.2.1实施

图表需要以两种方式实现。首先是配置前端样式演示。第二个是通过AJAX(异步JavaScript和XML)请求背景数据(天气服务信息),并通过Echarts加载数据。

首先为Echarts准备一个高宽度的DOM容器,在初始化期间加载Echarts,然后选择需要加载的属性以进行配置。其次,将需要动态加载数据的配置放入AJAX的成功: function(){}中进行处理,定义一个容器以接收要动态添加到数据中的一系列配置项,然后遍历从AJAX返回的数据。背景。最后,将遍历的数据分配给容器中的相应属性。

3.3经纬度定位技术

目前,气象信息服务的方式不仅限于简单的信息发布,而是更多的重点直接与受众的基本属性有关。基于位置的服务是气象信息服务最常用的方法。获取终端的常用方法包括:无线网络定位,IP(网络互连协议)定位,移动电话基站定位以及经纬度定位。当在多个终端上显示气象服务信息网站的内容时,最常见,最直接,最方便的方法是IP定位与经纬度的结合。

3.3.1概述

纬度和经度定位使用HTML5地理位置界面来获取用户的地理位置。此方法与Internet Explorer 9,Firefox,Chrome,Safari和Opera浏览器调用兼容。对于具有GPS(全球定位系统)定位或北斗卫星定位的移动设备,纬度和经度获取更为准确,例如智能平板电脑,智能手机,智能电视等。

对于气象业务信息适配多终端设备的显示,首先确定它是否为移动设备,如果确定为移动设备,则直接获取该设备的经纬度信息,使用经纬度信息确定用户的地理位置,并推送与该地理位置有关的气象服务;如果非移动设备或用户禁止对设备进行定位,则可以通过自行开发的IP定位界面直接获取设备的IP信息,而用户的地理位置由IP确定(当前IP定位仅限于市政级别),并且地理位置相关。天气服务。

3.3.2实施

当应用HTML5实现经纬度定位时,您需要编写JavaScript代码以通过navigator.geolocation对象获取多终端设备的当前位置。该对象包含三种方法,即getCurrentPosition,watchPosition和clearWatch。 getCurrentPosition方法是一种用于获取设备的纬度和经度的方法,可以提供经度,纬度和高度信息。提供以米为单位的经度,纬度和高度精度;提供设备当前的地面速度(以米/秒为单位);智能设备的当前移动设备的角度方向。

4个结论

作为新一代Web技术,HTML5技术已经逐渐成熟,特别是在多终端应用程序领域,已成为主要Internet公司的核心技术。通过使用HTML5技术,协助气象服务信息在PC和移动设备等多个终端上显示内容,可以降低Web研发的复杂性,缩短研发周期,降低运维成本,扩大支持气象的信息发布渠道服务。增强气象服务信息与公众的相关性,增强用户对气象服务信息发布的体验,为建设“以人为本”的网络气象服务提供强大的技术储备。

上一篇:探索IP承载网的稳定技术

相关文章
热门标签
日期归档

版权所有© 阅读时间 | 备案: 鄂ICP备12015973号-1 | www.timetimetime.net . All Rights Reserved | 网站地图