HTML5移动开发
HTML5移动开发（精选9篇）
HTML5移动开发 第1篇
1 HTML5的内涵
HTML即超文本语言, 是用来描述网页的一种语言标准, HTML5是HTML的下一代语言标准, 在2008年, HTML5的草案正式得到认可以后, 在经过W3C通过对其进行进一步的完善, 在2012年12月该版本得到了公布, 在2014年HTML5标准得到了正式的应用, 而且HTML5有望成为下一代开放的WEB平台。
2 HTML5在网页技术中的应用
2.1 多媒体支持
相信大部分Web用户都有类似经历, 在浏览视频时需要安装视频插件, 才能正常的观看, 而且各个网站的视频插件互不通用, 影响用户的正常使用, 有的音频网站需要下载相应的音频插件, 如果用户观看过多的视频, 就会在电脑上安装多个插件, 这样就影响用户正常的使用电脑, 给用户的使用带来安全隐患, HTML5的技术的出现, 改变了这个被动的局面, 使这一切都变得极其简单, 只要在浏览器上植入<audio>、<video>等多媒体标签, 就可以采用统一的标签把不同格式的视频、音频、动画等多媒体文件有机的嵌入到浏览器上进行播放, 而且不需要第三方插件, 就能够实现多种媒体的应用。
2.2 画布
在web2.0时代, 用户想要直接在网页上进行绘图还不能轻易完成, 因为现有的技术还不能满足需求。在浏览器当中直接对图片进行操作与交互的功能十分有限, 一般的功能只能限于保存与点击等。如果用户需要对图片进行操作, 就需要安装插件或者相关的软件, 才能在浏览器中画出图形, HTML5针对这种需求, 在浏览器中引入<canvas>标签, 使得用户在浏览器端可以动态地生成各种图形图像、图表以及动画, 实现了网络页面的动态功能。在网页中可以使用Java Script来操作canvas中的对象, 实现对图形图像的交互操作, 实现复杂的canvas的二维的图画效果与3D交互动画。
2.3 本地存储
HTML5的本地存储实现了网页技术的突破, 它提供了一种全新的不同于cookie的方式, 采用以键值的方式在web页面上实现对本地数据的存储, 真正实现了无需第三方插件, 就可以实现对本地数据的永久存储。
2.4 离线Web应用
HTML5提供的非常强大的功能就是离线Web应用, 让Web可以在指定情形下将自己的应用数据缓存到本地浏览器, 没有连接一样可以浏览。使用离线Web应用时, 应用会引入这一清单文件, 浏览器会从清单文件中读取相应URL信息, 并下载相应的资源将其缓存到本地;因此, 在离线状态下访问Web应用的时候浏览器就会自动切换到从本地直接读取这些资源。
3 HTML5在移动通信中的应用
3.1 地理位置
HTML5 Geolocation API技术为移动手机提供了能够与用户分享与确定地理位置信息的功能, 该技术使用简便, 只需要在地理的web应用上插入一API程序就可以轻松的实现这一功能的扩展, 目前, 许多新的手机和浏览器采用HTML5技术开支持Geolocation API的应用来获取用户的地理位置, 同时还采用第三方程序保证用户的隐私安全。
3.2 智能化的表单
采用HTML5标准的表单设计则更为智能化, 具有直接使用的功能, 方便用户通过设置占位文本、增强的输入框类型、创建滑块条控件等功能实现操作与管理, 在表单功能中, HTML5具有自动聚焦、自动输入验证等功能, 能增强用户的体验, 提高工作效率。
3.3 Native App的应用
现在Native App已经成为移动通信的首选应用程序, 它是基于底层操作系统的开发, 在用户的交互与体验、感知方面具有良好的应用效应, 具有明显的优势, 相比浏览器开发来说, Native App可以访问移动终端的硬件资源, 并且能够高效的使用各种终端资源, 如重力加速器、GPS、地理信息等相关的功能。
4 小结
现阶段的HTML5已经开始向移动通讯与网页开发服务提供技术支持, 正改变着传统的web服务方式, 改变网络结构, 相信随着HTML5的技术不断发展的情况下, Web新的功能将会出现, Web App也将与Native App并驾齐驱, 提高网络交互的能力与移动通讯的功能。
参考文献
[1]Mark Pilgrim.HTML5揭秘[M].北京:电子工业出版社.2010.
Html5开发心得 第2篇
HTML5在网页开发上，赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更 有价值的数据驱动的Web。北京恒泰博远软件开发公司对HTML5的解释是，为开发者提供了一个跨平台的移动apps开发方案，并且该方案具有很好的扩展 性和灵活性。
由目前it行业使用html5 开发app来看，如今国内使用html5开发app应用技术尚有欠缺，因为在手机开发app上，html5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。
JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包去使用。
纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。
HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原生应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。
即使这样，我们还是很看好html5 app开发，原因有一下几点。
一、是基于html5强大的兼容性，因为HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联，就因为这种强大的兼容性，使得在当下开发界是如此的火，同样也是因为这强大的兼容性，使得手机 应用软件，app更适合，也更方便。所以更适合手机app软件开发，正好补充了手机小巧的不足。
二、html5 app开发支持的手机系统有android、ios。
三、html5其突出的特点就是强化了web页的表现性,追加了本地数据库，可以用作离线应用的开发，离线应用就是把需要的资源先缓存到本地，下次再查看时无需联网。
四、html5 app开发，能提供更快、更简便的服务，代码可高度重用，服务发布方便。
HTML5移动开发 第3篇
关键词：HTML5,移动互联网,开发,移动应用
移动互联网技术即将互联网技术和手机结合起来的新兴技术。随着科学技术的迅猛发展, 移动互联网技术已经逐渐渗透入人类生活的方方面面之中。人们通过移动端获取大量的互联网信息, 提升了生活水平。而在此繁荣景象的背后, 是日渐发展的移动互联网应用开发技术。随着人们对信息的需求不断发展, 新技术也不断发展起来, 在当前, HTML5技术给移动互联网技术带来一场新的技术革命, 推动移动互联网技术不断向前发展。故本文将探讨HTML5技术在移动互联网开发中的应用。
1 HTML5概述
HTML5是新一代HTML标准版本, 是由万维网联盟所发布的一种用于描述网页文本的技术规范语言。随着移动互联网技术的发展, 在移动开发, 特别是游戏开发中, HTML5得到越来越多的应用, 它融合了网络游戏和移动平台, 代表着互联网发展的方向。HTML5的出现, 有可能改变目前移动互联网应用App为王的局面, 大大促进Web应用的发展, 并促进新的商业模式的出现。
2 HTML5在移动互联网开发中的作用
2.1 改变服务模式
和传统的网页标准不同, HTML5不需要经过操作系统而是通过浏览器来运行应用程序。传统的移动应用受到操作系统的限制而产生版本的兼容性等问题, 而为了满足绝大部分用户的需要, 传统的移动应用必须开发Android、i OS、windows phone等多种版本。应用HTML5技术, 移动应用开发不再受限于操作系统, 只需要通过云服务既可以Web为中心, 在任何条件下运行应用程序, 从而改变以往的用户习惯, 改变移动应用的服务模式, 带来一场技术革命。
2.2 增强互动性
传统的HTML标准在处理多媒体内容时需要很麻烦的操作, 对于文字、视频、图片、音频等需要进行分开处理, 通过对相应的URL进行解析来分别处理。而HTML5标准则完全不受多媒体内容格式的限制, 它利用canvas对象加载图片, 同时便于进行数据的计算和图形的绘制。在HTML5标准中, 通过添加视频标签可以方便Web开发人员实现视频的应用, 从而使展示的内容更加生动, 进一步提升互动性。
2.3 降低开发成本
使用HTML5语言来开发移动应用, 优点在于他基于同一的语言开发平台, 即JS, 统一的数据模型 (XML、DOM) , 同时经过CSS规范来实现对文字、视频、图像、音频等的规范处理。在HTML5标准下, 可以一次开发即可在多种开发环境中互换, 有利于简化移动应用开发的程序, 减少研发成本和维护成本。
2.4 提升安全性
当前的网页中, Web应用面临着恶意广告的影响以及受到未授权的更改等问题。尽管很多浏览器以开发相应的插件功能来减少这一问题的影响, 但是却是以增大系统负担为代价的。利用HTML5标准可以改善这一安全问题, 在HTML5中, 对于iframe元素增加了沙盒属性, 能够尽可能组织恶意广告的播放, 同时阻止不受信任内容的运行, 进一步提升移动网络的运行安全。同时, HTML5标准可以减少对于插件的需求, 从而避免一些恶意插件的混入, 更好提升网络安全性。
3 HTML5在移动互联网开发中的应用
3.1 典型应用
在HTML5标准发布之后, 大量基于HTML5标准的移动应用程序也开始进入公众的视野。最典型的应用当属桌面Web应用的移动化。另一类典型的应用时纯移动端的应用, 如众多的手机应用程序, 他们和本地应用有着非常相似的特性, 在性能和用户体验上均有较好表现。
然而, 完全使用HTML5标准来进行移动应用的开发需要终端浏览器的支持, 因其是通过调用Device API来实现的, 因此需要浏览器对HTML5具有良好的支持性。市面上浏览器对于HTML5仍然无法全面支持新特性, 总体而言均存在一定的缺陷, 导致部分应该无法正常运行。
3.2 混合开发应用
混合型应用是通过融合本地应用和HTML5技术的应用, 继承两者各自的特点而产生。开发者使用HTML5技术实现应用程序的主要功能, 从而满足本地应用的跨平台应用兼容性, 解决存在的碎片化问题;同时, 它使用JS调用混合应用框架的插件库来解决部分浏览器对于新特性不支持的问题, 在保证程序正常运行的情况下充分保证HTML5的新特性得到发挥。
虽然和单纯的HTML5开发相比, 混合型开发面临着更加复杂的编程和调取程序, 但是在当前浏览器无法全部完美支持的条件下, 混合型开发更加具备发展的优势。其完美的跨平台特性能够大量减少开发成本, 同时能够在浏览器逐步完善的过程中逐渐过渡到纯移动Web应用。
4 结语
根据当前的发展趋势, 移动互联网产业仍然体现出蓬勃的生命力, 随着众多大型公司推出新的浏览器操作系统, 如谷歌的chrome OS、Mozilla的Firefox OS, 本地应用Web化的趋势也逐渐显现。在移动通信技术的不断发展和HTML5技术的不断完善之中, 未来移动互联网应用的开发势必是HTML5的天下, HTML5技术必将获得更加长远、更加深层的发展, 也将继续推动移动互联网技术的革新。
参考文献
[1]王红梅.移动互联网现状与趋势浅析[J].电信科学, 2011 (S1) :74-79.
[2]杨栋梁.移动互联网发展趋势的研究[J].电脑知识与技术, 2012 (05) :1039-1042.
[3]吴晓东, 王鹏.HTML5的通信机制及效率的研究[J].长春理工大学学报 (自然科学版) , 2011 (04) :159-163.
[4]刘华星, 杨庚.HTML5——下一代Web开发标准研究[J].计算机技术与发展, 2011 (08) :54-58.
HTML5开发工程师的具体职责 第4篇
1、开发和移植游戏到网页平台
2、和游戏设计师紧密合作，实现游戏设计师的设计。
3、优化游戏代码，保证游戏质量。
4、预估工作时间，安排工作计划，配合团队的计划和管理
岗位要求：
1、2年或以上H5游戏开发经验;
2、熟悉至少一款H5引擎(Egret、Cocos2dX-JS、layabox等),了解各引擎特点，相关工具和环境，至少使用某款H5引擎开发过一款游戏;
3、熟悉面对对象编程的概念，有JavaScript、ActionScript或TypeScript开发经验;
4、熟悉 WebSocket 和 HTTP 等网络协议，熟悉 JSON丶ProtoBuf 等数据协议;
5、有优化包体大小、游戏运行效率、游戏体验的经验;
6、熟悉休闲竞技游戏的开发模式和优化原理，确保游戏在表现效果上和性能上有突出表现;
7、与策划、美术等合作团队进行沟通协调，满足开发需求
HTML5移动开发 第5篇
油田移动办公平台 (以下统称为移动办公平台) 系统平台是采用国内目前最新的页面转化适配技术, (可灵活地将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移动开发 第6篇
在未来的某一天, 我们打开手机, 不再需要访问手机应用商店, 不论是Apple的还是Google的, 我们只需要点击手机主菜单页面上的一个链接, 手机就会立即在它的浏览器上启动一个“应用程序”;再也不需要flash插件, 就能欣赏华丽的视频画面。这就是HTML5在移动应用开发中带给用户的全新体验。
2 什么是HTML5 (What is HTML5)
2.1 HTML5的概念
在这里我不说一些特别难懂的语言, 我这里简单的解释一下, 如果你学过HTML, 那么就是HTML4, HTML5[1]是针对现有的版本进行了一些丰富, 把一些原先常用的标签进行了统一, 还添加了一些以前没有的新标签来满足更复杂的功能, 像原先网页上面的音乐播放器, 现在都不需要通过flash插件来实现, 仅仅通过HTML5编写程序来实现, 可以说HTML5的出现是一个很大的进步。
有些东西需要HTML5来实现, 但是不能保证用户用的浏览器都支持HTML5, 所以有些功能需要保证兼容性, 所以这也是限制HTML5的一个原因。
另一个因素就是HTML5在移动端的表现没有想象中优越[2], 有很多的开发者在移动端做了很多尝试, 尤其是在移动端开发游戏, 在动画效果的实现上面, 流畅度没有得到很好地的保证, 不过随着移动设备的硬件越来越快, 所以在以后HTML5在移动端的劣势会被掩盖, 当然并不是所有的移动端设备表现的都不好, HTML5在IOS平台下的表现就很不错, 已经可以成为企业开发的一个选择, 相反android就不尽人意。
2.2 HTML5新特性
(1) 添加了canvas元素[3], 这个元素可以帮助我们实现更炫更棒的动画效果, HTML5游戏就是通过这个canvas来实现的场景的渲染。
(2) 媒介元素, 如video和audio元素。
(3) 地离线存储的支持。
(4) 原先的标签更加分散和清晰, 如article、footer、header、nav等。
(5) 新的表单元素属性, 比如data、time、Email、url、search等。
HTML5的新特性如图1所示。
3 HTML5使用的框架 (HTML5 framework)
(1) Lungo JS。这个是被认为开发移动网站最好的HTML5开发框架[4], 使用HTML5/CSS3和Java Script技术。可帮助创建基于i OS、Android、Blackberry和Web OS平台的应用程序。该框架可利用当前移动设备的高级特性, 可捕捉事件包括滑动、触屏、长按等。无需使用图片, 全部采用向量声称。
(2) Kendo UI。Kendo UI是一个HTML5平台, 开发者利用它可以开发新颖的、交互的移动应用程序和网站。该框架提供了大量的动画和丰富的拖拽功能、模板功能以及提供了将近10款客户端常用的数据绑定小部件, 如图表、组合框以及常用表格。
(3) Jo。该框架可以创建像本地一样的应用, 并且兼容任何操作系统, 无论是Blackberry、i OS还是Android。并且提供许多HTML5小部件。使用它可以解决任何动画设计方面的问题。
(4) Sencha Touch。Sencha Touch是第一个基于HTML5的移动应用框架, 利用Java Script、HTML5和CSS3来构建移动应用程序, 该框架利用本地代理存储离线数据, 具体使用HTML5来渲染视频和音频组件。可以让你的Web App看起来就像本地应用程序一样。美丽的用户界面组件和丰富的数据管理, 全部基于最新的HTML5和CSS3的Web标准, 全面兼容Android和Apple i OS设备。
(5) Lime JS。Lime JS是一个Java Script游戏开发框架, 用于快速构建运行于触屏设备和桌面浏览器的游戏。允许开发者创建基于HTML5的游戏, 支持主流浏览器包括i OS。
4 HTML5的优势 (Advantage of HTML5)
HTML5最好的一个优势就是跨平台, 如果你是开发者, 你只要写一套程序就可以在任何地方运行, PC, 移动端都可以, 这个大大的节约了开发成本。
另外一个优点就是标准的统一, 开发人员不需要再头疼浏览器的兼容性, 不过在这之前得保证浏览器支持HTML5。
最后一个优点是站在用户的角度, 在移动端你想要用一个APP, 你得去下载, 每次APP更新或者改版, 用户很反感, 用HTML5开发的只需要借助移动端浏览器打开, 不需要用户下载, 打开就可以直接用, 用户头疼的更新问题也不用担心了。
5 结论 (Conclusion)
随着移动互联网技术的发展及智能终端的不断普及, 移动互联网开发技术也大量的涌现出来。作为互联网超文本标记语言的新一代核心标准, HTML5顺应了互联网发展潮流。移动互联网的蓬勃发展使得HTML5的前景一片光明。
摘要：在“移动互联网+”理念蓬勃发展的今天, 智能手机的发展给我们的生活带来了翻天覆地的变化。在智能手机的应用开发中, 目前还是以Apps的开发作为其发展的主流, 然而, 随着HTML5技术的不断发展, 将来的移动互联网应用开发将会变得更加简洁, 从而给用户带来更好的用户体验。HTML5的发展将会引领移动互联开发达到一个新的高度。
关键词：HTML5,移动互联网,开发
参考文献
[1]刘彦科.移动互联技术为自助设备运行管理添翼[J].中国金融电脑, 2012, 8:15-16.
[2]程宝平.HTML5倾国倾城尚待时日[J].通信产业报, 2011 (3) :23-24.
[3]顾春来.APP应用程序开发模式探究[J].硅谷, 2014 (5) :45-46.
HTML5移动开发 第7篇
随着信息化建设的不断推进, 以及无线通讯技术发展, 手机已经成为人们必不可少的通讯和学习设备。传统基于浏览器访问的网站架构无法满足移动终端的访问需求, 通过手机访问传统网站, 会出现兼容性差、布局混乱、交互困难等问题。移动Web前端开发技术得到迅速发展, 如果要迅速地开发某种应用, 就需要一种高效且通用的开发技术。HTML5+JQuery Mobile技术的多种新特性和跨平台特点正迎合了移动平台多样性的需要。
二、 HTML5 和JQuery Mobile介绍
(一) HTML5
HTML5 是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言 (HTML) 的第五次重大修改[1], 是继HTML4 以后的下一代HTML标准规范, 它提供了一些新的元素和属性, 增强了互动性, 并有效减少了开发成本。HTML5 标准最大的变化是支持Web绘图功能, 如图形绘制、路径绘制、变形、绘画等。HTML5 标准中的多媒体, VIDEO视频和AUDIO音频正好弥补了多年来需要插件才能播放Flash模式的缺陷。为了满足本地存储数据的需求, HTML5 标准中新增了两种存储机制Web Storage和Web SQL Database, 解决了移动信号不好时可以进行离线应用的问题。使用地理定位能够实时获取你当前在地图上所在的位置, 这将充分发挥移动设备的特点[2]。
(二) JQuery Mobile
因为有了HTML5 的支持, 越来越多的开发者开始研究基于移动平台的Web应用框架, JQuery Mobile就是其中之一。JQuery Mobile能够充分体现其开发优势, 在传统Web网站基础上, 根据移动设备平台的特点展示其移动版的Web站点。JQuery Mobile是基于JQuery、HTML5 和CSS3 构建的, 其目的是提供一个丰富的、交互性强的接口来兼容不同的移动平台。
JQuery Mobile为所有的主流移动操作系统平台提供高度统一的移动界面框架, 开发者不需要再为每种移动平台编写单独的应用程序, 可以确保外观、感觉和行为在不同移动平台上的一致性。拥有出色的弹性, 轻量化以及渐进增强特性与可访问性。具备的主要特征如下[2]:
1. 基于JQuery核心语法, 易于学习。
2. 支持所有主流移动平台。
3. 采用基于HTML5 标记元素驱动配置JQuery Mobile各种组件, 不需要Java Script配置, 减少了Java Script脚本数量。
4. 自动初始化。JQuery Mobile通过使用HTML5 标准的data-role属性来对相应的插件或组件初始化。
5. 简单的API。基于触摸屏设备优化, 并且提供一个适应不同移动设备的动态触摸用户界面。
6. 可配置的主题风格。框架提供了6 种不同颜色的主题风格, 配置简单, 并支持如text-shadow、boxshadow、gradients等CSS3 特征。
三、移动Web需求分析
珠海广播电视大学目前拥有针对PC终端开发的校园网、电大在线等网络学习平台, 它们在促进教学、管理、提高学习效果方面具有重要作用。但越来越多的师生使用智能手机上网进行信息浏览和学习, 手机端显示浏览传统网站时会有诸多不便。根据珠海广播电视大学在线学习平台 (网页版) 的功能, 对手机网站的基本需求在于呈现电大在线学习平台的主要信息, 同时方便师生登录查看最新公告, 尤其是教务信息和教学信息。
作为传统网络教学平台的补充, 为了便于教学与管理, 移动Web与传统网络教学平台共享用户信息以及相同功能的教学资源, 以便教学双方根据所处的环境选择合适的平台进行教学, 把二者作为一个整体进行教学管理。在移动Web设计过程中, 我们在传统网络教学平台的基础上, 在不改变平台架构的基础上, 增加一个移动设备访问界面, 简化了设计流程, 提高了开发效率, 实现代码复用。
充分考虑移动设备屏幕空间相对较小等因素, 移动Web界面应尽量简洁, 操作简便, 并且能够适应多种多样的浏览器平台。同时根据目前已有的电大在线平台和校园网已有功能, 追踪目前师生访问率最高的板块列表, 移动Web的总体目标为:保障师生员工及时获取学校教务、教学、招生等方面的信息, 操作简便、易于维护。据此设置了首页 (包含校园新闻和通知公告) 、教务 (主要是与师生课堂内外有关的一些管理信息、学籍信息等内容) 、教学和招生四个栏目, 详细的移动Web界面主要模块如图1 所示:
四、移动Web的开发与测试
在本次移动Web开发中, 主要采用第三方UI框架模式, 它是指在项目中通过引入一些第3 方提供的UI界面代码库, 包含底层用户交互动画、特效和可更换主题的可视控件等, 开发人员可以直接用它们来构建具有很好交互性的移动Web应用。因此笔者在视图中引入JQuery和JQuery Mobile库, 快速开发出兼容性高且简洁美观的界面, 利用其提供的AJAX异步Java Script和XML工作机制, 使页面在交互时实现部分刷新, 避免重复加载库文件和重复的代码来节省流量。开发过程中涉及到的关键技术和步骤包括以下五方面:
(一) 引入JQuery Mobile框架
采用从官方网站 (http://jquerymobile.com/download/) 上下载库的方式, 引入JQuery Mobile框架。官方网站上下载JQuery Mobile库 (含CSS库) , 然后将其放置于与网页同一目录下。同时在网页head区域包含这些文件即可使用该框架。其中, meta中加入viewport, 是为了让不同移动浏览器知道屏幕大小, 设置页面宽度。具体代码如图2 所示:
(二) JQuery Mobile固定导航栏
移动Web导航栏通过Navbar部件实现 (加入属性:data-role=”navbar”) , 它提供多达5 个按钮和可选图标系列, 通常位于页眉或页脚内部, 固定导航栏能方便用户切换页面, 快速定位, 需要固定导航栏, 设置其所在页眉或页脚的属性:data-position="fixed", 如需全面定位, 向该元素添加data-fullscreen属性即可, 触摸屏幕将隐藏和显示页眉及页脚, 实现全屏查看。根据Web设计需求, 笔者将导航栏放置在页面底部。
(三) 系统数据库设计
学校原有网络版平台数据库建立十分详细, 数据量庞大。在建设移动Web时充分运用已有的数据库信息, 直接使用查询语句, 调用原有数据库, 提升了开发效率。
(四) 用户界面设计
在设计开发移动Web过程中应把握简洁、易操作的原则;注重信息扁平化原则, 减少信息层次关系, 用户以最少的页面抵达目标操作页;加强页面的交互性和通用性, 提高用户体验。
(五) 系统测试
本系统包含首页显示新闻动态和通知等信息动态, 首页用于校园信息收发方便沟通, 教学页面呈现:已选课程、学籍信息、调停课信息等用于学习, 教务页面展示教务管理相关信息, 招生页面用于招生报名以及信息查看。将该系统在多个移动浏览器进行测试, 该网站都能正常运行, 从测试结果看, 运行流畅, 界面简洁, 数据稳定, 能很好满足师生对性能和外观的需求。
五、关于网站的反思及改进方向
本文通过引入HTML5+JQuery Mobile, 在原有传统网络平台基础上, 利用原有数据库和整体框架, 快速搭建我校移动Web。与传统网络课程形成互补, 弥补传统课程网站需要PC端才能访问的不足, 使得师生只要拥有一般的智能手机或者平板就可以随时访问网站, 从而合理利用时间碎片, 提高教学和管理热情。所实现网站经过测试, 能够通过Android、i Phone、i Pad或PC机友好地访问, 并且兼容大部分浏览器。移动Web已在我校得到应用, 为广大师生提供了信息交流平台, 提高了信息交互效率。但是随着师生需求的细化, 该网站还需要进一步强化交互功能。具体包括如下三方面:
(一) 实现独立的用户登录功能
目前该移动Web的登录部分是和原网站数据库信息连接的, 部分链接直接指向PC端网页, 还没有涉及到独立的登录板块。今后应进一步开发, 需要将用户登录功能独立出来, 实现所有页面适应移动端浏览器。
(二) 实现进一步交互功能
为了增强网站的互动性, 本网站应加强交互功能建设, 如:留言、投票、实时交流等功能。可运用bootstrap搭建响应式手机软件交谈聊天页面样式进行实时交流等。
(三) 实现下拉刷新数据功能
目前每个栏目默认显示6 条数据, 其他数据则需要点击更多才能查看。为了减少用户操作, 增强交互便利性, 下一步可研究如何实现下拉刷新数据, 显示更多数据这一功能。
摘要：本文以珠海广播电视大学传统教学网站为基础, 利用HTML5与JQuery Mobile框架, 提出了快速开发基于移动浏览器构建移动Web的一种方案, 并在Web开发和实践应用基础上进行反思, 提出改进的开发策略。
关键词：HTML5,JQuery Mobile,移动Web
参考文献
[1]互动百科.HTML5[EB/OL].http://www.baike.com/wiki/HTML5, 2015, (12) :20.
[2]覃凤萍.基于HTML5_JQuery Mobile的移动Web应用开发研究[J].大众科技, 2015, (7) :9-10.
[3]高广银, 崔梦新, 王唯佳.移动Web快速开发的研究与实践[J].计算机与现代化, 2014, (8) :124-128.
HTML5与移动平台 第8篇
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上,视频是直接在移动网页上加载的,但不能总是同时观看或者管理多个网页,也无法得到视频数据,例如,为了实现各种创意效果,将它复制到
表1列出一些移动终端对HTML5的部分功能的支持情况。
苹果不实现autoplay功能是为了防止未经许可的下载。
4
考虑到手机移动多媒体的所有优势,新的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语言获取所有以“键-值”(
以上两个API的用途并不止数据的本地存储与读取,还包括简化个性化应用的过程等等。Google停止对gears的开发,全面转向HTML5的发展,这个是一个非常明显的信号:HTML5将足以满足各类开发人员的需求。
7 HTML5的拖放功能
在HTML5之前,Web页面上的拖放功能是很难实现的。在HTML5中,所有页面中的元素都是可以拖放的。为了实现这个功能,开发人员可以在元素属性中加入draggable="true"。另外,例如dragstart这样的事件与data Transfer这样的Javascript的API,允许开发人员实现(编写)在拖拽一个元素时所要执行的动作代码。在移动互联网领域,用户直观的拖放动作与触摸屏之间的互动在人机工程学中是非常重要的。
参考文献
HTML5移动开发 第9篇
1 移动开发主流技术分析
目前,对于移动开发技术的研究也比较多,现在比较流行的有基于GOOGLE的Android技术开发、苹果的Iphone开发、微软的Windows Mobile等相关的移动开发技术。但是,他们所开发出来的产品,往往应用在不用的系统和平台中,系统之间的可移植性比较差,这样就会造成系统开发的多样性与复杂性,随着HTML5开发技术在移动设备上的使用与发展,移动开发技术分为 :原生开发、HTMLS开发、混合开发。
1.1 原生开发
原生开发技术就是开发出来的系统能够直接在电脑或者智能手机上使用,如微软Power Point或者Word应用等系统,原生开发的系统都能够在它们上面运用。采用原生开发的主要优点是速度更快、用户体验好、性能比较优越,通过原生开发可访问智能手机、PDA的所有功能,也可以线上、线下同时使用,在技术能够发现发现大量图形和动画,而且容易对信息定位,而且还能通过应用下载创造盈利。但是,该技术的缺点是系统的兼容性差、上线时间不确定、不能够根据用户的需求进行使用与开发。
1.2 基于 HTML5 的开发技术
HTML5开发技术是一种新的开发技术,它能够实现系统的跨平台使用,采用HTML5技术,可以在标准浏览器上开发跨平台使用的WEB应用程序,这样就降低了软件的开发成本,同时也能够将开发的系统在任何设备的WEB浏览器上进行应用,能够使更多的人使用web的发布功能,提高了系统的使用效率,降低了苹果等服务商的控制功能。但是,该技术不支持某些特色平台的功能,对一些原生功能开发的应用不能有效的使用,系统创收难度更高等缺点。
1.3 混合应用开发
通过上面的分析可以看出,采用原生开发与HTML5混合开发的技术,能够有效的互相补充,应该移动OA系统的开发,可以采用混合开发技术,采用基于HTML5开发的移动OA系统,提高系统的兼容性,降低开发的成本,而且系统的升级比较方便。
2 基于 HTML5 的移动 OA 关键技术及主要功能
2.1 智能设备分析
随着Android, IOS, Windows Phone等智能手机技术的发展,如何将它们在跨平台上使用需要的投入的技术太多,虽然它们之间存在不同,但它们之间各自内置有移动web浏览器应用程序,例如 :Android中的Android Browser,IOS中的Mobile Safari浏览器等都是基于Webkit的内核进行开发的。
2.2 HTML5 开发框架 APPFramework
对于移动OA系统开发需要一定的架构支持,APPFramework是HTML5开发技术的重要应该框架之一,它主要是App Mobi针对HTML5浏览器和 移动设备开发的javascript框架,能有效的支持W3C查询,支持CSS3的功能。具体的系统架构见下图1所示。
2.3 文档查看
文档查看是HTML5开发移动OA系统的关键内容,为了保证文件的规范性、严肃性的关键,采用HTML5查看PDF文档的插件pdf.js技术,文件在系统的服务器被转化为pdf格式,在手机客户端只需要相应的插件就可以查看相应的文档。
2.4 移动 OA 主要功能
(1)通讯录功能
移动OA系统要能够具备职能手机的所有功能,如短信的功能,电话的功能,而且根据系统的需要可以实现自动更新的功能,可以更新部门的名称、联系人等相关的信息,并且实现手机的所有功能,同时系统能够采用Web Service接口函数 (OA Weblnierface) 和后台通信时的处理功能,对接口函数OA Weblnierface的响应,实现对通信录的Web Serviee通信时的异常信息进行处理。
(2)我的公文
采用HTML5的技术,能够有效的实现文件标题、文件内容、时间、年限、文件类别的相关功能,并根据需要进行查询与处理,提高信息处理的安全性与稳定性。点击文件列表可进一步查看详细信息、正文和签署意见。
(3)邮件管理模块设计
移动OA系统,要根据使用者的需要,具备相应的邮件管理系统,实现邮件的出来功能,并且联系人能够通讯录模块共享,在发送邮件时能够实现系统联系人的选择。邮件系统主要包括 :主界面类CEmail、邮件编辑 类CNew Email、收件箱Clnbox、发件箱COut Box、存档箱e Arehive Box、垃圾箱CGarbage Box、草稿箱CDraft Box以及邮件通讯录共享类CEmail Addrbk等几大功能。这些模块构成了移动OA邮件设计的系统基本功能。
(4)新建工作功能
它是移动OA办公系统的重要功能,用户可使用此模块实现请假申请的编辑与处理,实现申请的提交与浏览等相关的功能,当然请假的提高是需要进行控制的,只有部分人员可以看到。在进行制作时,需要提交请假申请以及查看请假申请列表,这样需要有针对性的进行查看,这两个模块是相互独立工作的,所以在进入新建工作功能的需要采用Ccreate Worknew和CCreat Work Apply List类来完成,采用Qt/Embedded控件开发模式开发进行开发实现。
(5)通知公告功能
发布系统的通知和公告是OA系统的一个功能,它要求对特定群体发布通知公告信息,同时根据系统管理的需要,只有相应权限的人才能够看到通知公告,这样能够保证通知公告的有效性,在发送有针对性的公告时,可以选择选择具体的人或者部门进行发送,实现一个完整的通告信息的发送。
3 结束语
在HTML5技术不断地发展过程中,并且在移动网络与智能终端设备得到了广泛的应用,这样采用HTML5等相关的技术,能够有效的对移动OA技术进行开发,并且能够在终端使用,满足不同移动用户的需要。
摘要：随着智能手机、PDA等移动设备得到了广泛的影响,如何有效实现移动互联与办公自动化OA系统实现无缝对接,提高人们的办公效率,让人们的办公不受地域与时间的限制,实现对工作的管理与控制。通过对基于HTML5的移动OA系统的架构与关键技术分析,研究了移动OA开发的主要技术与关键特点。
HTML5移动开发
声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
