web应用程序技术与标准化的分析

web应用程序技术与标准化的分析

移动应用市场的必要性2010年9月，w3c正式发布了html5标准。该标准的强大交互、多媒体和可视化技术满足了人们在互联网应用程序上日益增长的需求。现今,移动互联网应用如火如荼地高速增长,电子商务、社交媒体、网络游戏等应用更是加速了HTML5技术的发展。据悉,中国最早从事HTML5商业游戏开发的创新工厂旗下磊友科技公司推出了全球首款完全HTML5的大型网络游戏《黎明帝国》。为了给人们更灵活,更具有互操作性,能有更多的交互性并令人振奋的web应用,HTML5标准中的关键技术(包括:网页存储、离线网页应用、音频视频、图像动画和地理位置定位等)的应用都进行了标准化,并且HTML5通过增加更多API来改变用户对互联网使用方式和开发者的建网需求,满足用户对互联网应用的体验要求这促使HTML5关键技术在互联网应用的开发过程中显得尤为重要。如今移动终端的网络业务越来受到用户的关注。本文重点阐述了存储技术在校园网路中的应用,分析了HTML5的存储技术在校园管理系统中的优势,对于学生的学习和生活所带来的便捷,另外也简单介绍了HTML5图形图像技术在2D和3D中的应用和视频技术的应用。1在东南角设计中生成3d图像HTML5的canvas是最强大的API之一,可以动态生成图形,图像和动画,在HTML5的游戏中使用的非常普遍。以前在制作网页的图像时,直接将图片嵌入或通过动借助画技术来完成,现在web开发者可以使用原生的JavaScript语言在canvas画图,能直接在页面使用这一标签来制作2D图像或者通过脚本语言和JavaScript调用OpenGL或DriectX来3D渲染效果和作用,所以这一标签的应用在浏览器中的应用显得尤为重要。对于使用canvas来创建2D图像相对来说比较简单,仅仅需要在HTML页面中添加<canvas>标签并且给元素设置ID,给出高度和宽度,这样一个画布的内容就基本画好了。如果在画布上画一幅图,需要用JavaScript来描述,通过“getElementById(‘myCanvas’)”函数来找到想要使用的canvas元素进行初始化,并且可以使用API来画各种各样的2D图像。目前创建2D图像的canvas的API有:canvas状态API、简单形状的API,填充,画笔,檫除等等,这些API定义了基本的绘画方法,相应的画布元素有更复杂的API,比如:“insertimagetocanvas”的API对于HTML5嵌入图像就更加复杂。还有一些类似的API都是在canvas中创建2D图像使用的API,比如,“pixel-leveloperations”API,“shadow”API和“colorgradient”API等等。然而在HTML5上创建3D图像的方法就变得很复杂,在过去的几年的研究中,大致使用三种模型来创建3D图像。第一种是使用标准低级API(诸如,OpenGLES),这种方法被称之为“WebGL”。第二种是在HTML5中使用DOMtree,并且在X3D场景树之间进行DOMtree映射,这种被称之为X3DOM模式。这种模型已经有了开发者联盟,这个联盟被叫做“Web3D”。第三种是O3D模式,是Google研发的一个模型。O3D是3D应用程序的一个接口,该应用程序是Google引进的网页基性开源程序。一旦canvas元素在移动浏览器中被广泛应用,移动用户对在终端上网页游戏将会有极致的体验,并能够在无线终端上体验到3D的动画效果。2在线存储技术及其在电子学习中的应用2.1在线时长为6个月的状态在用户没有网络连接离线的情况下,使用HTML5的离线网页应用的技术使离线网页更好的运行,它允许HTTP目标进行设置,使网页能在没有网络连接情况下进行访问,HTTP目标的设置包含在HTML文件配置中,开发者将文件配置进行特殊化,来达到离线访问的目的。在开发支持离线的Web应用程序时,开发者通常需要使用以下三个方面的功能:(1)离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5中,通过cachemanifest文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。(2)在线状态检测:开发者需要知道浏览器是否在线,这样才能够针对在线或离线的状态,做出对应的处理。在HTML5中,提供了两种检测当前网络是否在线的方式。(3)本地数据存储:离线时,需要能够把数据存储到本地,以便在线时同步到服务器上。为了满足不同的存储需求,HTML5提供了DOMStorage和WebSQLDatabase两种存储机制。HTML5推出的“WebStorage”(Web存储)API,它包括localStorage和sessionStorage,可以存储简单对象(如应用程序状态),使用本地和会话存储能够很好地完成,但是对大量的结构化数据进行处理时,需要用到HTML5的“WebSQLDatabase”API接口。在HTML5中网络存储按照生命周期分为2种,一种是基于会话(session),这种存储周期只是当前会话,当网页被关被后,或者被转到其他网站后,存储也就被销毁。另外一种是本地存储,当网页下次被打开的时候,你仍然可以访问上次打开该网页时存储的数据,比如本地存储的网站用户名就可以使用这种方式。而两者的最大区别在于关掉标签页浏览前重启这个存储还在不在。LocalStorage的技术与cookies类似,但它存储网页的数据量是目前cookies的1000倍,并且它是将网站的信息存储在电脑上,在用户访问web站点进行数据加载后,对LocalStorage的数据通过JavaScript进行访问,但cookies存储的信息则不同,当访问网页时,需要将cookies中的数据信息返回到web服务器。正是由于LocalStorage的技术的这个特点,实现了离线网页的应用,它不但在本地设置了大的缓存,而且内嵌了一个本地的SQL数据库,这种本地存储和SQL数据库加速了web应用的运行,还使用户在网络断开的情况下能够继续访问网页。纵使本地存储的信息量再大,也不可能将网络的所有数据信息全部存储,本地存储只是将客户端浏览器需要的文件进行缓存,当进行离线访问时web服务器会告知客户端在什么条件下才可以离线访问,离线访问需要哪些文件,当客户端完成了相应的工作后才可以离线访问,故网页的离线应用是基于在线的web应用。当访问一个网站时,它会根据用户的设置需求下载浏览器需要的文件,比如图片和视频等,当这些文件下载完毕之后,会存储在本地缓存中,一旦网络断开用户如果还想继续浏览网页中的数据或者重新访问该web站点时,用户同样可以在离线的情况下访问,但相应的浏览器会提示,当前的访问是在离线情况的访问并且使用的数据是本地数据。2.2系统的搭建和应用在现今电子学习活动越来越盛行的时代,基于学习管理系统的网页Moodle(模块化面向对象的动态学习环境)在学术环境中对于支持学习活动和允许教师给出在线测试已经受到了很大的欢迎。然而一些学校不能支付昂贵的基础设施把他们的学习管理系统带入因特网。另外,一些学生,在家上网也存在困难,为了解决诸如此类的问题,HTML5的离线应用和网页存储起了关键的作用。通过设计一个系统将能够使移动浏览器把一个离线的用户接口带给学生使用这个系统,学生们在学校期间和在家没有网络情况下做作业,可以在校园moodle上对任务的回收和提交在移动手机上进行同步。系统概况如图1所示。学生们通过系统进入一个课程并且他们被分配一个测试任务,他们能选择在线做(在学校的期间)也可以选择用它们的移动电话离线做(不在学校期间)。假设他们的电话能通过WIFI设备访问学校的网络,那么学生们将能够通过所谓的测试点(测试点(quizpoint)是一个访问点,在这个访问点上试图把测试带回家的学生们能够从中下载。)的应用同步他们的测试,并带回家,如图2所示。在家里,学生们能够浏览并完成他们的测验。学生们能够在他们被允许的时间内进测试或下载测试。学生们从测试点中得到唯一的ID,然后将会通过在桌面端的测试点中的URL得到离线网页应用。一旦访问了这个URL,移动电话将会下载所有相关的应用文件,在下载完成后,应用就可以离线运行了,图3所示是学生通过选择相应的测试ID,图4所示是通过选择第一个测试ID下载了某一阶段英语测验的的文件。3两种类型视频编码译码器的选择提及网页中的视频无疑会想到flash技术,那么HTML5需要直面的是与flash的竞争关系,然而在PC端HTML5技术暂时还不能动摇flash的霸主地位,但在移动设备上flash的执行效率是最大的问题,这却是HTML5的优势,比如手机使用HTML5技术看视频时其电池续航能力是flash的一倍。在该技术上,HTML5增加了<video>标签,通过使用该标签,在网页中无需嵌入flash插件而达到播放视频的目的。Video标签包含了src(视频的URL)、poster(视频封面,没有播放时显示的图片)、preload(预加载)、autoplay(自动播放)、loop(循环播放)、controls(浏览器自带的控制条)、width(视频宽度)、height(视频高度)等几个属性,以及一个内部使用的标签<source>,通过这些属性对待播放的视频进行设置,举例如下所示:<videoposter=”/2012/01/25sintel/poster.pgn”controls=”controls”preload=”metadata”loop=”loop”autoplaywidth=”800”height=”250”><sourcesrc=”/2012/01/25/sintel/trailer.ogv”type=video/ogg;codecs=”theor,vorbis”media=”screen”/>。然而,不同浏览器支持的视频类型又有些不同,特别的iPhone,iPad,Android他们支持的情况也有区别,导致了本来简简单单的<video>变得复杂,video元素支持两种视频格式的表格如表1所示:其中Ogg=带有Thedora视频编码和Vorbis音频编码的Ogg文件MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件。因此不仅浏览器需要理解<video>标签,而且需要一个必要的编码译码器来播放视频,故HTML5规范需要选择一个视频编码译码器,并且让每一个浏览器制造商执行。目前,在HTML5中使用使用<video>标签,需要考虑三种情况:一是支持OggTheora或者VP8的Opera浏览器、Mozilla浏览器和Chrome浏览器;二是支