HTML5与移动平台

HTML5与移动平台（精选7篇）

HTML5与移动平台 第1篇

HTML5是HTML的最新版本(处于完善阶段),其前身是Web Applications 1.0,2004年由网页超文本技术工作小组(WHATWG)提出,2007年被万维网联盟(W3C)所接纳,于2008年发布了第一份正式草案。HTML5的目的是为了取代1999年指定的HTML4.01。它强化了Web网页的表现性能,并追加了本地数据库等Web应用功能,已经成为各大公司无法忽视的下一代互联网的网页标准。业内很多大型公司如Google,Apple等,已经将HTML5应用在其产品中:Google的移动语音信箱,Apple的i Ad(苹果公司的广告管理系统)都是用HTML5写成。

随着智能手机市场的不断发展,HTML5为更多的移动平台提供解决方案。HTML5已经为开发人员提供一系列的标签与API,允许开发人员更简单地使用CSS3、Javascript构建富媒体(rich media)网络应用。这就是大家重视HTML5的原因。

2 HTML5中插入视频与音频

在HTML5的帮助下,开发人员可以将视频或音频组件轻松地嵌入到他们的网络应用中。允许将控制按钮(播放键,暂停键,停止键等)从视频或音频组件区域中分离出来,整个应用的界面会更灵活;同样也能使用一组控制按钮控制多个视频或音频组件。HTML5的视频API允许开发人员自定义许多有趣的操作,比如:调节亮度,加入3D效果等等。

在这些不同操作中,开发人员能够设计真正创新的手机应用,使操作和手机视频数据更加人性化。例如,他们可以将地理位置与手机拍摄的图片结合在一起,从而提供个性化,人性化的服务。

当前,对于手机应用平台而言,HTML5的视频和音频功能仍然有限。因此,苹果的i Phone手机支持

3

HTML5专有的标签

专注于HTML5

除ipad以外,

在ipad上,视频是直接在移动网页上加载的,但不能总是同时观看或者管理多个网页,也无法得到视频数据,例如,为了实现各种创意效果,将它复制到元素中,就可以看到各种示范在HTML5上的应用,在很多不同的网站上展示,这在移动平台上是无法实现的。然而,ipad可以允许创建一个个性化的视频播放器,组合各种不同的传统控制按钮,例如对于视频的播放和暂停,显示视频的指示时间和已播放的视频时间。在其他的可能性当中,还可以列出数据源的位置,并且在列表中控制视频的来源。

表1列出一些移动终端对HTML5的部分功能的支持情况。

苹果不实现autoplay功能是为了防止未经许可的下载。

4 标签带来的动态图像

考虑到手机移动多媒体的所有优势,新的HTML5标签是一种对flash lite的补充与替换。同样,当把SVG和Javascript结合起来,开发人员可以自如的管理像素,谷歌致力于使开放源码版本的Quake2兼容HTML5并不惊讶。

有了HTML5,将

5 HTML5的API与移动平台之间的联系

当以上所有的HTLM5功能将与API相连接,在手机平台上将采取完全措施,目前,地理定位的API已经被植入在很多移动终端,包括i Phone中,开发者可以直接通过GPS获取地理坐标。HTML5是想为每个手机终端的可用组件创建API。可以想象例如一个可以直接从移动终端的各种不同元件获取音频、视频、照片等数据的“抓取”API(capture);一个可以在浏览器中打开各种不同应用(从VOIP到视频会议,甚至实时的“增强现实”)的API,在现实中,谷歌已经通过植入在智能手机中的GPS及谷歌地图应用和街景视图实现了一部分以上提到的功能;一个可以提供统一格式的“联系人”的API。

6 HTML5的本地存储功能

当创建一个网络应用时,一个十分重要的问题经常会摆在我们面前:数据的本地存储与读取。如果不使用本地存储功能,可以使用co支持ie来保存一些登录信息,并且将所有其他信息转存到一个SQL数据库如My SQL中。但并不能保证用户一直都有一个很好的网络环境,如果网速过慢,数据的存储与读取就会有失败的可能。另外,在网络环境欠佳时,数据的本地存储与读取在保存临时文件(cache)方面是十分方便的。

借助两个HTML5在专用的APIWeb Storage与Web SQL Database,可以在本地使用SQL语言获取所有以“键-值”()形式存储的信息;在任何时候,搜索或者升级时,这些“键-值”信息都是可用的。在移动终端中设置一个SQL的关系数据库,对熟悉SQL语言的开发人员来说是非常实用的,对于开源应用的改写与移植也会非常方便。

以上两个API的用途并不止数据的本地存储与读取,还包括简化个性化应用的过程等等。Google停止对gears的开发,全面转向HTML5的发展,这个是一个非常明显的信号:HTML5将足以满足各类开发人员的需求。

7 HTML5的拖放功能

在HTML5之前,Web页面上的拖放功能是很难实现的。在HTML5中,所有页面中的元素都是可以拖放的。为了实现这个功能,开发人员可以在元素属性中加入draggable="true"。另外,例如dragstart这样的事件与data Transfer这样的Javascript的API,允许开发人员实现(编写)在拖拽一个元素时所要执行的动作代码。在移动互联网领域,用户直观的拖放动作与触摸屏之间的互动在人机工程学中是非常重要的。

参考文献

微信平台人才招聘文案html5 第2篇

这个世界上，英雄有很多种，但是大多名不副实。

有的勇往直前，执行力惊人，但却简单粗暴。

有的长袖善舞，与客户谈笑风生，但却过于浮华不实。

有的天马行空，策划力超群，但却无法落地。

有的满腹经纶，文案有如天花乱坠，但却对市场一窍不通。

他们，都不是英雄。

只有你，擅长文案、了解市场、沟通客户、督促实施，全挂功夫。你才是英雄！

这样的人才，难道你还能忍受传统媒体每月可怜兮兮的5000+工资？ 难道你还能忍受体制内复杂的人际关系和重重束缚？ 来吧，英雄，我们要你！

****公司诚聘策划总监，如果你对职位名字不满意，请随意更改：

首席策划、首席文案、策划总督、绝世策划师……他们只是一个名号而已

只要你是英雄，只要你具有打动客户并切实执行的能力，广阔天地，等你来战！更有机会晋升合伙人，把****变成自己的企业！

来吧，英雄，我们要你！不管你是现役媒体人，还是广告界的新星，带着案例来，我们喝杯咖啡，一起构想一下美好的前景。

好吧，如果你暂时还不够英雄，我们**英雄培训班，也需要更简单一点的搭配 哪一位骑士不是从侍从做起呢？

1、文案策划

你不需要懂设计，你也不需要懂材质，但你必须懂文字！那种能够字字珠玑、打动人心的文字！

2、广告执行

情商高于智商，经历高于学历。待人接物是一种本领，沟通协调是超越书本的能力。哪怕你初出茅庐，只要你愿意，你来，我们也要你。

HTML5如何引发一场移动革命 第3篇

新一代互联网标准在本质上可以让程序通过Web浏览器而不是特定的操作系统来运行。这就意味着，无论何时何地，消费者将能从包括个人电脑、笔记本电脑、智能手机或平板电脑在内的任意设备访问相同的程序和基于云的内容，因为浏览器就是通用平台。这种功能可能会改变消费者的习惯，使移动电、媒体和技术行业的实力平衡发生变化。但它既会创造机遇，也将带来挑战。

以web为中心

移动技术的发展与20世纪80年代PC制造商之间发生的激烈竞争颇为相似。微软公司的Windows操作系统支持无数家制造商的硬件，虽然如今这已是一件理所当然的事，但当初却并非如此。还记得Cornmodore64这一历史上最热销的PC，或者Apple Ⅱ所采用的操作系统吗?在微软公司的DOS和后来的Windows问吐之前，PC用户面临着一个艰难的抉择：究竟采用哪种技术?因为这决定了他们可以玩哪些游戏，使用哪些实用程序，同时也决定了他们电脑的整体有用性如何。如今，同样的事情也在移动设备领域重演。用户必须权衡硬什和软件的优点，然后义无反顾地选择某种技术。

新一代HTML被称为HTML5，它能缩小移动设备间的差异。HTML5是迄今为止web标准领域最为重大的变革，它采用的设计允许程序通过Web浏览器运行，并且将视频等目前需要插件和其他变通方法才能使用的多媒体内容也纳入其中。理论上，这将使浏览器成为一种通用的计算平台，用户无需离开浏览器就能完成一切任务，包括编辑文档、访问社交网络、看电影、玩游戏或听音乐。所有具备Web浏览器的设备都拥有这些功能，不但如此，消费者还可以访问以远程方式存储在“云”中的各种内容，而不受位置和设备的限制。

这就是为什么“以Web为中心”在移动设备领域的前景尤其光明的第一个原因。第二个原因是，它有助于弥补智能手机和平板电脑相对于PC和笔记本电脑的一大劣势，即处理能力相对较弱。这个弱点在一定程度上迫使人们优化特定设备的性能，为应用(apps)的爆炸式增长提供了动力。根据Zokem研究公司在2011年3月进行的一项研究，智能手机用户目前每月花在应用上的时间平均超过11小时，比用于浏览网页或通话的时间还要多。HTML5有可能改善移动体验——它的标准支持浏览器在本地存储的数据量是目前的1000倍，因此，用户可以在离线期间工作，例如撰写电子邮件。而当接通网络时，他们的设备会自动更新。此外，软件和应用的运行速度更快了，因为复杂的处理任务是由网络服务器执行的。

当然，并非所有程序都适合通过浏览器运行，而且HTML5也不是即将出现的第一个候选通用平台：已于2010年被甲骨文公司收购的Sun Microsystems就曾承诺，凭借它的Java语言，程序员可以做到“编写一次，随处运行”——虽然事实并非如此。同时，以Web为中心的模式可能会在用户中引发安全恐慌，因为程序不再安装在特定设备上，而且数据采用了远程存储方式，在标准和浏览器方面都可能存在各自为政的问题。毕竟，谷歌的Chrome、微软的Internet Explorer以及MoziIla的Firefox等现有的浏览器处理现行HTML4标准的方式并不相同。

虽然可能存在这些不利因素，采用HTML5的网站还是在与日俱增。众多硬件制造商站在HTML5一边，开发社区正努力快速拿出方案保护云中数据的安全。可以预测，在未来三到五年中，所有移动应用中会有超过半数转向HTML5。而无论转变的速度有多快，都必将对消费者和企业产生巨大影响。

对消费者的影响

以很多消费者用移动设备来完成的一项简单任务——阅读新闻标题为例。现在，这项任务需要访问特定的网站，或者需要在所用的每个设备上分别安装应用，而且每次访问那些收费网站时都得支付一笔费用。采用以Web为中心的模式，在理论上可以从任意设备通过浏览器访问单个应用，只需支付一次费用就完全搞定。由于所有内容都存储在云中，人们可以毫无障碍地共享和访问计费信息和偏好设置，所有设备都能保持同步。消费者可以先在平板电脑上阅读一篇文章，然后转到笔记本电脑接着阅读。更高级一点的情况是：消费者可以在台式机上启动即时短信或视频聊天对话，然后在自己的智能手机上继续交谈或发短信。对消费者来说，关键在于：以web为中心象征着朝向真正的“智能”设备迈出的重要一步。

对业界的影响

消费者行为的变化可能会影响电信、媒体、技术乃至广告等诸多行业的经济法则。例如，随着越来越多的网上商店销售可跨设备使用的应用，残酷无情的竞争可能会让广告代理商们由衷地怀念当初在移动广告收入中享受多达40％分成的日子。

软件开发商。目前，每当一种应用销售给消费者时，其开发者都要向设备制造商、电信运营商或操作系统开发商支付最多达30％的分成。在以Web为中心的环境中，开发商可以避免这些中间环节，不仅同一款应用可跨所有设备销售，而且任何人都可以建立网上商店，将应用直接销售给用户。例如，谷歌已经开始向通过Chrome网上商店销售应用的开发者收取大约5％的分销费。

电信运营商。对于电信运营商来说，以web为中心可能是一把双刃剑。一方面，以Web为中心会刺激人们对移动互联网服务的需求，为运营商创造机会，它也有助于缓解原产app商店一枝独秀的局面；另一方面，运营商无法保证能从新apps中赚到钱，可能出现的数据通信量激增现象需要对网络基础设施进行大量投资，而且那些提供基于Web的移动语音和视频服务的公司将使运营商面临更激烈的竞争。

内容提供商。以Web为中心会为内容提供商带来创收和节约的机会。在创收方面，消费者可以在移动状态下轻松地访问以Web为中心的内容，促使他们对更及时、更贴近自身需求的资料产生兴趣。此外，由于消费者在各种设备上都能顺畅地访问HTML5内容，因此可为提供商创造更多机会，使之能向消费者直接提供节目，或通过苹果公司的iTunes等聚合程序来提供内容。最后，广告可以支持更多移动内容。如今，诸多平台呈现出各自为政的格局，使在线出版商很难针对大批用户管理广告库。消费者锁定和测量等高级功能可能会移植到移动Web环境。当然，这种发展无疑会吸引更多企业参与，引发更激烈的竞争，让这个新的环境充满活力和挑战。

HTML5与移动平台 第4篇

油田移动办公平台 (以下统称为移动办公平台) 系统平台是采用国内目前最新的页面转化适配技术, (可灵活地将JSP、ASPX、ASP、HTML、PHP等页面转化为标准的WAP语言) 全称移动代理接入适配中间件服务器, 简称MAA平台。

油田移动办公平台生产系统软件架构图如图1所示。

2 技术原理

将移动办公平台服务器部署在局域网内部, 它与油田内部应用系统部署在一个局域网内, 通过局域网利用HTTP等多种协议与企业内部IT系统 (如OA、合同、邮件、信息门户、新井审批等) 进行通信, 完成油田业务系统的接入;通过专线或Internet网络与运营商的系统进行通信, 完成油田接入业务在手机终端上的展现与双向传输。

页面适配方案的工作原理可用图2来表示。

(1) 适配服务器抓取数据源的HTML页面。

(2) 适配服务器将HTML文件转换成XML元数据。

(3) 适配人员以XML元数据为基础, 通过UMDP语言及XSLT对元数据进行重构, 生成UMSC需要的XML。

(4) 适配服务器将XML发给移动终端。移动终端对此XML进行解析, 展现界面。

(5) 移动终端发生操作, 将指令发送到适配服务器, 生成元数据, 适配人员通过UMDP语言及XSLT对元数据进行重构。

(6) 适配服务器将接收到的指令进行处理, 模拟出数据源可识别的指令发送给数据源。数据源收到指令, 完成相关操作。

这实际上就是一个页面抓取解析翻译展现的过程。

3 示例说明

以一个油田企业门户为例, 如图3油田新闻网页界面。

(1) 在电脑D盘安装D:Program Filesapache-tomcat-6.0.32, 并在D:Program Filesapache-tomcat-6.0.32confserver xml下用记事本打开在的上一行增加如下代码:

(2) 在D:盘部署移动办公平台系统project文件夹和maa-config.xsd文件。

1) 在D:projecthaikezyytmspui文件夹下, 用XMLspy编辑工具创建ui.xml, 增加发布到移动办公平台上的油田企业门户URL地址。 (其他内网应用系统发布到移动办公平台可修改此文件, 增加应用系统对应的URL即可) 。

2) 在D:projecthaikezyytmspconfigmaa-config.xml下增加发布到移动办公平台上的油田企业门户对应的各功能网页对应的URL地址, 如下代码:

3) 用XMLspy编辑工具利用HTML5技术以及CSS、XSLT知识结合油田企业门户网站的油田新闻功能对应的首页:http//10.75.1.12/default.aspx、更多油田新闻功能:http://10.75.1.12Lists/List12/info More.aspx、油田要闻显示功能:http:/10.75.1.12/Lists/List12/Disp Form.aspx对应的静态网页源代码进行梳理、选取需要对外发布的功能代码进行分析编写以下3个模板代码文件:图4是XMLspy编辑界面。

Index.xsl详细代码如下:

more.xsl详细代码如下:

show.xsl详细代码如下:

4) 在PC机上演示效果

在谷歌浏览器上输入:http://127.0.0.1:8080/htgl, 回车, 如图5所示。

点击图5“油田主页”按钮进入下一界面如图6所示。

点击图6红色标注新闻, 进入新闻详细内容显示界面如图7所示。

5) 移动办公平台生产系统展示效果

以上源代码文件部署到油田移动办公平台生产系统, 操作移动办公平台配置企业门户系统图标及URL, 在手机及手持终端设备的浏览器上输入3g.zyof.com.cn, 进入平台登录界面输入油田用户的AD域用户和密码进入移动办公平台“我的应用”主界面如图8所示。

点击图8“我的应用”主界面的“门户网站”图标进入油田新闻列表如图9所示。

点击图9中标示新闻会出现新闻详细内容界面, 如图10所示。

4 结语

通过对移动办公平台的软件结构及技术原理的了解, 并经过对移动办公平台的应用系统的部署及对开发技术HTML5、CSS3、XLST等技术的培训, 就可让开发人员熟练掌握HTML5等开发技巧, 对油田局域网内的应用系统进行二次转码加工处理、部署, 就可使油田领导、员工在任何时间、任何地点通过手持终端设备的浏览器访问移动办公平台与局域网内应用系统交互进行日常工作的办公操作, 极大地提高了油田领导、员工的移动办公的工作积极性;同时移动办公平台较强的可延展性能也极大地给予了软件开发人员学习、研究HTML5技术的创新动力。

摘要：通过对一个油田移动办公平台的技术原理的介绍, 并阐述了功能模块的静态网页源代码转码开发、部署、效果展示等工作, 使开发人员可以逐步掌握HTML5开发技术。

关键词：中原油田,MAA平台,HTML5技术,CSS3技术,XLST技术,XMLspy技术

参考文献

[1]申林.使用HTML、CSS和JavaScript开发Android程序.电子工业出版社.

[2]唐俊开.HTML5移动Web开发指南.电子工业出版社.

HTML5与移动平台 第5篇

它被公认为下一代的Web语言。它被喻为终将改变移动互联网世界的幕后推手。

2010年2月，苹果发布iPad时，就表示已支持HTML5 。今年1月，其新官网上线，已完全使用HTML5。7月，苹果更是收购了html5.com的域名。谷歌的Youtube已部分使用HTML5，Chrome浏览器率先宣布全面支持HTML5的浏览器之一。前不久，微软也投入HTML5的怀抱，IE9开始对其支持。至此，世界三大移动互联网巨头都支持了HTML5。Facebook则在加紧移动Web应用商店的探索步伐。而UCweb的俞永福坚定地认为HTML5的到来将为手机浏览器带来新生。

巨头们都对HTML5顶礼膜拜，我们有何理由说不呢？

HTML5为手机而生

HTML5是HTML语言的更新版，是W3C 与 WHATWG双方经过多年努力在2006年达成的合作结果。相对于以往的版本，HTML5增加了一些有趣的新特性，如：用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储的更好的支持；新的特殊内容元素，比如 article、footer、header、nav、section；新的表单控件，比如 calendar、date、time、email、url、search。

因为上述的新增特性，HTML5有了富媒体技术的浏览平台之称。这些特性极适合移动终端的用户体验，因而得到了各大互联网巨头的垂青。目前，支持HTML5的移动终端浏览器包括了业界主流的Safari、Chrome和IE9三家。另外，Firefox 与 Opera也部分支持HTML5。

移动终端之所以代表着互联网界的未来，就在于它的便携性。对于大部分国人来讲，移动终端目前的用途无非就是娱乐，看电影、听歌、打游戏等。娱乐类的应用决定了用户体验是移动终端软硬件大战中的决胜关键。HTML5带给了移动终端用户前所未有的用户体验。

拿HTML5支持的视频功能来说，首先这一功能大大方便了用户，用户只要打开支持HTML5的浏览器，就可以直接播放视频，而无需通过安装flash插件。苹果最初就是因为痛恨flash插件下载安装以及打开速度极慢，而在去年首推iPad时坚定地站在HTML5的阵营，而毅然举起反flash大旗，甚至断言“将来没有人会用Flash，整个世界都要改用HTML5。”所有人都在热议HTML5如何“秒杀”Flash，事实上，尽管HTML还存在很多问题，但许是因为Flash的劣势太过明显，让舆论的声音有些一面倒的趋势，除了因为效率低下经常导致浏览崩溃之外，FlashPlayer版权为私有，swf文件的内容也相对封闭且搜索引擎不友好。

而Flash最终真正被HTML5击败的地点也许是在移动互联网，正如乔布斯所说：“Adobe一再反复宣称Apple的移动设备不能提供“完整的网络体验”，因为网络上75%的影片是Flash格式。但他们没有说这些影片几乎所有都属于一个更为先进的格式：H.264。”

值得一提的是，目前大多数视频仍是通过Flash显示的。而HTML5的标准尚未建立，这也成为各大巨头争夺的焦点。以谁家的专利作为业界标准，当然谁家说得算。当前，video 元素支持的三种视频格式中的MP4，以苹果的H.264视频编码最为流行。

HTML5让移动云成为可能

云计算是今年的沸点话题。然而，云计算在移动终端上的落地，HTML5功不可没。

业界习惯将应用程序商店里的应用称为原生应用，HTML5应用称为Web应用。苹果与谷歌应用商店开放API，为开发者们提供了云开发平台。

众所周知，没有互联网，云无以托身。换言之，云依互联网而生。而原生应用则把用户与互联网隔离得越来越远，用户的行为渐渐地受控于各大巨头。就在移动终端原生应用大行其道、浏览器奄奄一息之际，HTML5成为力挽狂澜的中流砥柱。有业内人士分析：“从某种意义上说，HTML5拯救了手机浏览器。它不仅让许多应用可以回归于网页，更能将功能扩大，在手机网页上呈现更为多样的富媒体形式。”而在笔者看来，HTML5之所以代表未来，根本原因在于其技术能够承载云，实现云在移动终端上的落地。

这是一个什么概念呢？

设想一下，你在公司的PC机上看了28.54分钟的《变形金刚》，下班后急于知道剧情的你，在地铁上打开手机，连上网，打开刚刚看电影的那家网站（当然要支持HTML5），登陆你的账户，你就可以从28.55分开始继续享用《变形金刚》了。这就是云存储，明显的不同就是它能让你的电影在不同的终端上续播。

Web App Vs App

随着乔布斯的辞职，苹果将成为悬念最大的公司。随着移动互联网Web App的风生水起，原生App在经历着严峻的挑战。

首先，对于平台开发者而言，以往受限于各大操作系统，一款应用只能跑在一家操作系统下。除非开发者不厌其烦地研发出三个版本的应用来。而基于HTML5的Web App则不需要有此担心，因为该网页语言在大部分操作系统和浏览器中都兼容，所以开发者一个应用仅研发就足够了。而HTML5本身可以帮助开发者在移动终端上直接去调试和修改应用，版本更新起来也会更快更方便，从而大量节约成本。

其次，对于用户来说，移动终端的Web App相当于PC端的Web App，用户不需要费时费力地将原生应用下载到小小的手机后才能使用，而只需要打开浏览器，就可以在网页上看电影、玩游戏了。

第三，应用程序商店存在应用程序推广难的问题。几十万级的应用程序商店，一款新推出的应用肯定是会被淹没的。然而，如果是基于HTML5的Web App的话，那么基于PC互联网而发展起来的网络广告和网络营销就可以在移动互联网中派上用场了。

最后，国外的Facebook、Twitter、Google+等，国内的人人、新浪微博、腾讯开放平台等将成为Web App开发者所钟情的乐土。而未来的Web App也将朝着移动化与社交化的趋势发展。

HTML5与移动平台 第6篇

云计算技术近年来风起云涌, 群雄并起。国内互联网巨头BAT (百度、阿里和腾讯) 皆推出了其云计算技术, 其他中小厂商更是多不胜数。云计算将计算及存储任务放在云服务器中进行, 使在较低配置的终端也能实现大规模的计算和存储, 摆脱了终端设备的限制[2]。通过对比, 本文选择腾讯云作为移动学习平台的后台技术支撑。

随着4G通信技术及智能机的普及, 移动互联网飞速发展, 移动学习越来越日渐可行, 移动学习是一种师生通过移动终端设备进行沟通、学习的方式, 是信息化学习的一个新阶段, 其移动性、高效性、广泛性、交互性、个性化等特点有效弥补了基于互联网的学习平台的不足, 利用手机等移动终端设备进行沟通交流将是未来教育模式发展的必然。

本文在HTML5及云计算的基础上, 设计并实现了高职院校移动学习平台, 课程以视频为主要呈现方式, 学生可以选择感兴趣的课程进行学习, 并可以交流讨论及在线测验, 及时发现和反馈学习中存在的问题。

1 系统总体架构

移动学习平台主要包括:身份验证、在线直播、课程点播、聊天室、网络考试和线下交流六个子模块。

系统的总体架构如图1所示:

2 关键技术及实现

2.1 身份验证

用户分为学生、教师和系统管理员三个类别, 系统给他们分配不同的权限。传统的学习平台是通过用户名、密码进行身份验证, 密码设置简单容易被破解, 设置复杂又容易忘记, 基于生物特征的身份验证不仅简便而且安全性较高。

学习平台通过在HTML5网页中调用本地摄像头获取用户头像, 并发送到腾讯云端, 腾讯云端将识别给定的人脸图片, 从数据库中检索用户的身份信息并返回, 在主流PC端和移动端均能达到实时检测的效果。随着智能机上指纹传感器的普及, 将来也可以通过指纹验证登陆者的身份。

2.2 视频直播及点播

随着移动互联网的发展, 视频直播和视频点播因直观生动, 逐渐成为了目前在线学习平台的主要呈现方式, 然而视频直播和视频点播平台搭建技术门槛较高, 为了解决这个问题可以借助于云计算技术。腾讯云可轻松接入专业视频录制设备、手机、PC等任意标准HLS/RTMP多个直播源, 并支持排序, 便于适配多种教学场景。

如果通过手机采集音视频, 可以安装腾讯云推流APP;如果通过PC采集音视频, 安装OBS (Open Broadcaster Software) , OBS是用于音视频编码并推送直播视频源到服务器的免费开源直播软件。

利用腾讯云直播时, 可录制并无缝对接点播平台, 提供一站式视频服务。直播过程中, 录制系统会按每30分钟一个分片的粒度将直播视频进行存储[3]。这期间生成的视频文件, 都会进入腾讯云点播系统, 视频数据流程如图2所示。

HTML5网页中, 播放视频不需要安装专门的浏览器插件, HTML5本身提供专门用于播放视频的video元素。为了解决不同浏览器的兼容性问题, 学习平台通过在直播网页及点播网页中嵌入腾讯云网页播放器, 实现PC浏览器和手机浏览器的自适应切换。例如:在视频点播中, PC平台优先使用Flash播放器以适应多种视频格式的情况, 而手机浏览器上会使用HT⁃ML5技术实现视频播放。

2.3 在线聊天室

交流讨论是学习平台的一项必备功能, 在线聊天室要方便学生之间, 学生与教师之间的交流与讨论, 支持一对一和群聊功能。传统的网页实现聊天室的方法是通过每隔一段时间请求服务器获取相关聊天信息来实现。Web Socket是HTML5引入的一种新的协议, 用于实现前台浏览器与后台服务器全双工通信, 只需一个握手的动作, 前台和后台之间就形成了一条快速通道。客户端使用Web Socket协议获取实时内容, 使用HTTP协议获取非实时内容[4], 服务器端采用两个模块分别处理Web Socket请求和HTTP请求。

2.4 网络考试系统

网络考试系统可以检测学生对课程内容的掌握情况, 帮助教师和学生发现教和学中存在的问题。网络考试系统可以根据题库自动组卷, 支持学生在线考试, 学生提交试卷后, 可以自动评分, 并对学生的成绩进行统计, 帮助教师发现教学中存在的问题和不足, 同时可以帮助学生形成错题集。在线考试过程中, 很可能发生网络不稳定, 断网的事情, 要保证学生答题不丢失。通过利用HTML5的应用缓存控制机制以及数据存储技术, 可以实现网络考试系统的离线Web应用。学生在考试过程中, 如网络断开, 学生可以继续答题[5], 再次联网以后, 学生的答卷将自动同步到服务器。

2.5 线下交流

在HTML5网页中, 可以通过API获取当前用户的地理位置信息, 并可以将该地理位置共享出来, 便于学习平台上的教师之间、学生之间、教师与学生之间开展线下交流。学习平台通过调用GPS等位置传感器获取教师及学生的位置信息, 以实现学习平台的线上线下资源的融合, 形成O2O闭环。纯HTML5Geolocation定位能力相对较弱, 腾讯在此基础上进行了改进, 可以调用腾讯地图的位置服务API进行实现线下交流模块。

3 平台实验

学习平台程序采用Java语言开发, 开发环境为Eclipse 3.7, JDK 1.7, 移动web开发框架选择j Query Mobile1.4.0, 数据库采用Mysql 5.1, 服务器选用腾讯云服务器。实验选用的视频直播推流手机为荣耀畅玩5X, Android版本为5.1.1。视频直播收看手机选择红米3S, Android版本为6.0.1, 浏览器为UC V11.0.8.858。

教师登录移动学习平台后, 可以利用手机客户端直播课程, 也可以上传剪辑好的课程录像以供视频点播, 同时可以在线答疑, 发布课程信息及在线组卷。

学生登录移动学习平台后, 可以观看学习平台上的直播课程 (如图3所示) 及点播课程 (如图4所示) , 在学习过程中, 可以利用网络聊天室与老师、同学进行交流讨论, 还可以进行在线测验 (如图5所示) , 检验学习效果。通过线下交流模块共享位置信息 (如图6所示) , 学生也可请求附近的教师进行线下辅导。

4 结束语

本文将HTML5技术及云计算技术运用到高职院校移动学习平台的构建中, 对平台中用到的关键技术进行了详细的剖析。通过构建简单易用的移动学习平台, 为高职院校学生的学习提供了便利, 打破了高职院校在教学时间和空间上的局限性。移动学习平台的使用, 使学生无论在任何时间、任何地点都可以利用手中的设备随时随地地学习、交流、测试, 职业教育也将由此迎来一个崭新的开始。

摘要：在HTML5及云计算的基础上, 设计并实现了高职院校移动学习平台。该学习平台利用图像识别、视频直播、离线存储等技术为高职院校学生提供了便利的移动学习平台。学生可以随时随地利用智能手机、平板等设备进行学习并进行测验。该平台简单实用, 为高职院校学生的学习提供了便利。

关键词：HTML5,云计算,高职院校,移动,学习平台

参考文献

[1]李慧云, 何震苇, 李丽, 等.HTML5技术与应用模式研究[J].电信科学, 2012 (5) :24-29.

[2]叶汝军, 师海宁.基于云计算的个性化移动学习平台设计研究[J].中国教育信息化, 2014 (3) :67-69.

[3]腾讯公司.腾讯云文档中[EBOL]. (2016-08-12) .https://www.qcloud.com/doc/api/258/5822.

[4]陈丽枫, 郑力新, 王佳斌.基于HTML5 Web Socket的Web实时通信机制的研究与实现[J].微型机与应用, 2016, 35 (10) :88-91.

基于HTML5的移动教育平台搭建 第7篇

关键词：HTML5,移动教育,视频交互教学,离线存储

1 HTML5的适应性分析

HTML5标准能与浏览器很好地结合,因此,自从其2010年面世以来,一直受到全球各大浏览器厂家的全力支持。

1.1 多媒体技术支持

HTML5区别于其他标准的一个重要特征是其能支持多媒体技术,大大降低了浏览器对某些插件的需求。HTML5通过将标签集成到浏览器中实现多媒体的技术功能,其中,最为重要的是视频标签video和音频标签audio,用于满足用户对于浏览器视频和音频的需求。HTML5不仅能够兼容网站自带的音、视频播放功能,还能识别摄像头和某些音、视频播放APP等。HTML5对于多媒体技术的支持,正是其受到广泛关注的重要原因。

1.2 离线存储

移动终端是一种十分方便的设备,因其便于携带,所以,经常伴随着人们的移动而移动,有时会在不同的局域网之间移动。其虽然开通了网络自动连接功能,但移动终端在不同局域网之间不断切换,难免会出现网络连接失败或者断开的情况。Application Cache离线存储机制能很好地解决这一问题:在网络断开时,采用MANIFEST文件记录应用数据的变化,并且定义和保存浏览器之前在本地网页上的文件;网络恢复正常之后,根据用户需求,迅速返回之前存储的数据和信息,以便与Web同步。

1.3 丰富的API接口

移动终端APP与浏览器应用之间最大的差别在于移动终端APP能够访问和调用终端设备摄像头、传感器等基本固件的能力,而浏览器则不具备这样的功能。HTML5标准问世之后,改变了这一现象,提供了丰富的API接口,使浏览器能够通过某些设备调用指令来现摄像头、传感器等的调用。除此之外,HTML5还提供了支持Web实时通信的Web Socket功能,通过实时通信功能和摄像头功能的调用,还可以实现视频通话,这极大地丰富了浏览器的功能。

2 教育平台设计

随着教育形式的多样化,移动教育由于其不局限于学习地点和学习时间的特点,受到了广大师生和家长的欢迎。欧美等国家移动教育起步较早,主要将移动教育作为辅助教学活动进行研究,其对于教学质量和学习效率的提高起到了积极的作用。我国移动教育刚刚起步,各种教育平台主要集中在文字和图片形式的可见教学,采用多媒体技术的教育平台还比较少见。本文基于这一发展趋势,构建了一个基于HTML5标准的移动教育平台。

2.1 功能架构

本文从学生和老师当前的主流交互方式出发,发现学生们更加希望通过听或者看的形式辅助学习,对于传统的阅读形式的学习方式,学生们普遍反映学习效率不高,因此,本文构建了一款基于HTML5标准的教育平台。平台改变了传统阅读为主的辅助学习方式,采用师生视频交互形式,除此之外,教师还可以录制视频上传到平台,方便学生在线观看学习或者下载保存,使学生的学习时间更加自由。平台功能架构如图1所示。

平台主要模块说明如下。

第一,注册登录。教育平台上的课程分为公开课程和非公开课程两类,公开课程对所有用户和网站游客开放,而非公开课程只对平台用户开放。学生在提交注册信息之后,系统管理员会对注册信息进行核实,如果确定注册者为教育机构的学生,注册完成;注册成功后,学生登录平台就可以观看和下载非公开课程。

第二,讨论区。学生可以在讨论区向老师提出相关问题,也可以与其他同学讨论学习进度等,教师和同学都可以在讨论区回复与课程相关的问题。

第三,学生视频交互。学生在登录移动教育平台后,可以在线观看视频课程,还可以下载课程,方便随时观看;除此之外,学生在课程学习中遇到了问题,或对课程内容不理解,可以通过视频或音频的形式向老师提问。

第四,教师视频交互。教师可以直接利用平台的视频功能录制课程视频或者将事先录制好的课程视频通过资料上传功能上传到教育平台;如果收到学生发来的有关课程的问题,教师可以通过视频或者音频的形式进行回复。

2.2 流程设计

平台的工作流程如图2所示。

第一,平台用户按照用户类型(教师、学生、管理员)登录教育平台,登陆过程中,系统识别用户登录的IP地址,外网情况下,允许学生和教师登录,内网情况下,只允许教师和管理员登录和操作。

第二,用户访问过的页面信息会自动保存到本地,为了提高浏览器的工作效率和节省流量,用户下次访问时,平台会首先将目标信息与已经保存的本地信息进行核对,如果一致(验证成功),则直接返回目标信息,如果不一致(验证不成功),那么需要向下发送请求,并将新信息保存到本地。

第三,请求接收后,需要验证用户是否具有访问权限,还可以直接返回首页。

第四,通过验证之后,服务器与数据库之间进行连接,连接成功则返回用户所需的信息,如果不成功,那么查询文件的访问路径,并重新进行数据库的连接。

3 功能实现

3.1 视频交互教学

将移动终端的便携摄录和HTML5的标签技术相结合,充分利用两者的优势,在师生之间建立新的视频交互模式,丰富教学,增强互动性:教师可以直接利用平台的视频功能录制课程视频或者将事先录制好的课程视频根据内容和科目的不同,相应上传到平台课件中心,为学生的学习提供良好的资源;学生用户在登录平台之后,可以在线观看或者下载保存,做到随时随地跟随老师的思路进行学习;学生在完成作业后,可以选择自己喜欢且具有指导意义的内容,通过移动终端录制视频,将视频上传到讨论区,与教师和学生进行互动。

这种新的模式,改变了单调的灌输式教学,更是对现有教学资源单向呈现的颠覆,在学习者和教学者之间建立了更好的沟通方式,不仅拉近了师生之间的关系,也加强了学习伙伴之间的互动。从技术上来说,双向视频交互教学模式,首先需要浏览器对摄像头的调用,其次,需要网络和平台的支持。相比较来说,摄像设备支持和网络宽带支持较容易实现,平台支持则通过<video>标签来实现。

其中,视频的宽度和高度通过width和height两个标签来定义,播放控制则通过controls来定义,实现播放、暂停和音量控制;视频文件格式则通过source标签定义的,其中,比较主流的移动终端视频格式有mp4和ogg两种。目前支持</video>标签的浏览器有Chrome、Opera、IE9及以上版本等。

3.2 离线存储学习支持

移动教育平台的人性化设计还表现在能在离线情况下记录学习进度,使学生的学习不再受网络断开的困扰,等网络接通后,及时恢复进度。学生在计算机和移动终端切换平台学习时,平台自动同步学习进度。移动教育平台加入离线缓存功能后,在网络断开的情况下,学生可以重复观看之前缓存过的视频信息;网络恢复连接之后,不需要重新加载,只需要加载尚未缓存的信息即可继续学习,这样大大提高了学生的网络学习效率。

离线缓存功能采用了Application Cache离线缓存机制,在网络断开时,通过MANIFEST文件记录应用数据变化,并且定义和保存浏览器之前在本地网页上的文件。

MANIFEST文件能够离线缓存三类资源:CSS文件、GIF图像和Java Script文件。在网络断开连接的情况下,加载MANIFEST文件后,这三类资源仍然可以被使用,实现了学习资料的离线存储。待网络恢复,服务器自动更新移动端的资源。

4 结语

网络以及多媒体的不断发展,推动了移动教育平台的变革,这有助于学生的辅助学习,也加强了师生之间的互动,学习时间和学习地点没有限制,突破了传统学习的束缚。本文通过对在线教育的运行状况进行调研,分析了当前需求者对移动教育平台的实际需求,结合HTML5技术,构建了满足一定需求的移动教育平台。利用该平台,学生能够通过手机终端或者计算机等与教师进行交互,可以在线观看课程视频,还可以下载视频和离线观看。除此之外,当学生遇到问题或者想发表自己对课程的理解时,可以通过发布视频的形式在讨论区与教师、同学进行讨论,极大地丰富了师生之间的交互方式,使课程学习的辅助活动具有实际的应用意义。

参考文献

[1]陈楠楠.基于HTML5的移动学习资源设计及应用研究[D].西安:西安电子科技大学,2013.

[2]李海峰.基于HTML5+j Query Mobile的移动学习平台Web App研究与实现[J].信息通信,2014(5).

[3]郭文斌,俞树文.我国远程教育研究热点知识图谱[J].电化教育研究,2014(2).

[4]顾春莲.HTML5中的音频及视频元素对互联网的影响[J].河北省科学院学报,2011(3).

[5]吕伟.基于Android的移动学习平台的设计与实现[D].南京:南京师范大学,2013.

[6]陶国荣.HTML5实战[J].机械工业出版社.2011(9).