移动Web应用程序

移动Web应用程序（精选10篇）

移动Web应用程序 第1篇

ASP.NET移动控件由一组ASP.NET服务器控件和设备适配器组成, 它们可以以智能的方式呈现用户的应用程序。ASP.NET移动控件还可扩展Machine.config文件的架构, 并添加数据以支持移动设备呈现。ASP.NET提供可扩展的模型, 以便第三方可以添加对新设备和新控件的支持。

用户可以使用Microsoft Visual Studio.NET中的ASP.NET移动设计器或文本编辑器以及公共语言运行库支持的任何编程语言来构建移动Web应用程序。.NET Framework和ASP.NET移动控件共同形成了一个强大、灵活可扩展的平台, 用于开发和部署移动Web应用程序。

1 查看移动Web应用程序

开发人员需要在各种设备和模拟器上彻底测试和查看应用程序, 确保它支持最多的设备。下面介绍查看移动Web应用程序的方法。

(1) 使用桌面浏览器。由于ASP.NET移动Web窗体支持基于HTML的浏览器, 因此可以使用桌面浏览器查看移动Web应用程序。

(2) 使用模拟器。通常可以获取移动设备的模拟器应用程序。使用模拟器可以从桌面工作站测试应用程序, 不需要使用实际的设备或无线连接。模拟器还可以包括附加的开发工具, 如查看页的源代码或设备状态的功能。

(3) 使用无线Internet访问。如果受支持的移动电话或其他移动设备具有无线访问Internet功能, 可以用它来查看Web应用程序。但是, 必须确保可以从Internet访问Web服务器。如果该服务器在机构的Internet上, 则网络可能需要使用代理或网关。某些产品可以提供对Internet服务器的安全无线访问。

(4) 使用Pocket PC。使用Pocket PC来查看应用程序 (只要它与Web服务器进行了网络连接) 。Pocket PC具有几个网络连接选项。

(5) 不支持Cookie设备。与所有ASP.NET应用程序一样, 移动Web应用程序也可以配置为使用客户端Cookie或不使用客户端Cookie。有些移动设备不支持Cookie, 而有些设备可能允许用户关闭Cookie。若要支持这些设备, 请将应用程序配置为使用无Cookie的会话, 并且不要在应用程序代码中依赖于Cookie。

2 ASP.NET移动控件

ASP.NET包含各种控件、组件和工具, 帮助开发人员迅速为多种类型的无线设备生成移动Web应用程序。ASP.NET移动Web窗体支持移动设备, 识别多种移动设备并为它们提供适当的呈现。

开发人员还可以在.NET Framework中使用用户控件创建新的移动控件。设备制造商或独立的软件供应商可以添加对新设备的支持。或者他们可以自定义控件, 以通过编写自己的控件适配器在特定设备上利用独有功能。

2.1 扩展性

ASP.NET移动Web窗体和移动控件提供与ASP.NET中所提供的相同的扩展性功能, 并且增加了对使用多种设备的支持。具体而言, ASP.NET移动Web窗体和移动控件提供以下类型的扩展性。

可以编写新的移动控件并在ASP.NET移动Web窗体页中使用它们。新的控件可以采用继承或包含来利用现有控件。可以使用ASP.NET用户控件以声明方式来编写简单的移动控件。可以通过为控件添加新适配器, 基于特定设备自定义任何控件的输出。可以使用适配器扩展性添加对全新设备的支持, 不必更改单独的应用程序。

开发人员可以在ASP.NET移动设计器中使用任何文本编辑器, 创建由控件组成的ASP.NET移动Web窗体页。许多控件类似于Web窗体中的桌面控件以及类似于其他编程语言 (例如Microsoft Visual Basic) 中的GUI控件。例如Label和TextBox控件模仿Web窗体的Label和TextBox控件以及Visual Basic中相应控件的行为。

2.2 移动控件的ASP.NET命名空间

Microsoft ASP.NET提供了三个用于实现移动组件和控件的运行时和设计时行为的命名空间。这些命名空间包括用于实现属性、类、控件和元素的基本接口和基类。下面列出了ASP NET中用于移动控件的命名空间以及组成这些命名空间的类。

(1) System.Web.Mobile。核心的功能类、身份验证类和错误处理类。

(2) System.Web.UI.MobileControls。核心的ASP.NET移动控件类。

(3) System.Web.UI.MobileControls.Adapters。核心的适配器类。可以实现它们以创建用于目标设备的适配器。

在ASP.NET页框架中提供的移动控件:

(1) Mobile AdRotator:AdRotator控件提供广告轮换功能的方式与Web窗体AdRotator控件相同, 但它提供移动设备的自适应呈现。

(2) Calendar:Calendar控件提供日期选取功能的方式与Web Calendar控件相同, 但它显示在移动设备上。

(3) Mobile Image:Image控件指定要显示在移动设备上的图像。

(4) Mobile Link:Link控件创建基于文本的、只可输出的控件, 后者表示指向移动页上另一个Form控件的超级链接或任意URL。

(5) Mobile List:List控件将项的列表呈现到移动设备。

(6) MobilePage:这是所有移动ASP.NET页的基类。作为基类, MobilePage控件提供移动Web应用程序中所有容器的最外面的层。它是唯一与URL关联的容器, 主要包含所有控件共有的样式和上下文信息。

(7) Mobile ObjectList:ObjectList控件提供了一种用于组织控件的分组机制。Mobile ObjectList是一个非常有用的控件, 它有点象DataGrid, 但考虑到移动设备一般屏幕比较小, 所以使用一个引导的视图来显示每条记录的数据。

(8) PhoneCall:PhoneCall控件生成与设备相关的交互式用户界面, 用于自动拨叫或显示电话号码。利用PhoneCall控件可以通过页面上的一个超级链接实现拨号。对于在线服务或者其它要求, 这个功能是十分有效的。

(9) ValidationSummary:ValidationSummary控件显示窗体呈现过程中发生的所有验证错误的摘要。由于移动设备的屏幕空间非常狭小, 所以不可能有大量的空间显示错误信息。因此, 可以使用ValidstionSummary, 把错误消息集中在一个表单中一起显示。

3 为特定设备进行定义

使用ASP.NET移动设计器的好处之一是能够创建考虑到在目标设备上显示内容时的特点和特殊注意事项的应用程序。设计器中的设备筛选器、模板化技术和属性重写功能使用户可以自定义用户的应用程序, 以便对特定的设备类型以不同的方式呈现控件。如图1所示的一组过程指导完成为控件创建模板和属性重写的任务。

在此演练中, 开发人员将向窗体中添加一个List控件, 定义用于此控件的设备筛选器, 将该筛选器应用于此控件, 编辑控件的模板, 然后为设备筛选器应用属性重写。

4 结束语

ASP.NET和Web窗体的知识可以更好地帮助开发人员使用移动控件构建移动Web应用程序。

参考文献

[1]涂曙光.让应用程序连接到公众Web应用[J].程序员, 2010 (2) .

[2]靳广斌, 田志峰.用Visual Basic 2005开发移动Web窗体的研究[J].电力学报, 2009 (6) .

[3]王旭.基于Web服务的MLL系统的设计与实现[J].软件导刊, 2009 (12) .

移动Web应用程序 第2篇

一种单页应用的页面结构

面向移动端的单页应用(Single Page Web Application)，从页面代码上来说，会使用较一般网页不同的结构，单页应用并不是说应用只需要一个视图，而是说可以将组成应用的多个视图集合在一个网页内呈现，且在视图之间能够自由切换(平滑的动画形式居多)。

我制作单页应用使用的是一种常见方法，像下面这样：

CSS Code复制内容到剪贴板

“view-pageview-current”>

“view-page”>

“view-page”>

.view-page{

display:none;

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

}

.view-current{

display:block;

}

可以看出，其原理是视图都由绝对定位的覆盖屏幕大小(可见视口)的元素构成，在某一时间点，只会显示一个视图。

固定页脚的问题

那么，固定页脚是一个什么问题呢?请看下图：

先说说什么是固定页脚吧。上图右可以看到，当页面内容较多，超出一屏的高度时，页脚是“自然地”紧跟在内容后边，滚动到底部时，才会看到位于最下方的页脚。同时，上图左可以看到，当页面内容较少时，页脚则直接位于屏幕最下方，剩余区域则是空白。这就是固定页脚，它可以算是一种比较理想的“总是在它应该在的位置”的页脚。

那么，问题来了。参考上图左，除了固定页脚的效果之外，现在还要求当页面内容较少时，页面内容(Content)可以水平垂直居中于剩余的空间(Container)。在上述单页应用的页面结构中，应该如何实现呢?

方法探讨

水平垂直居中与Flexbox

让我们一步一步来。先完成“水平垂直居中”。由于内容高度不确定，所以这里适合使用弹性盒模型(Flexbox)。

关于弹性盒模型的指南，推荐阅读A Complete Guide to Flexbox 和Dive into Flexbox 。

应用Flexbox实现水平垂直居中可以先得到这样的代码(由于其他视图不再需要，这里只保留一个视图)：

CSS Code复制内容到剪贴板

“view-pageview-current”>

“containerflex-containerjustify-content-centeralign-items-center”>

“content”>

上面的div.container对应前面图中的剩余空间(作为容器)，div.content则是需要水平垂直居中的内容。对应的css是：

CSS Code复制内容到剪贴板

.container{

min-height:100%;

}

flex-container、justify-content-center、align-items-center都是弹性盒模型的辅助class(熟悉了Flexbox就可以很快理解)。使用辅助class是因为弹性盒模型从前到后几经变化，兼容处理需要稍多代码，

这些辅助class的css是：

CSS Code复制内容到剪贴板

.flex-container{

display:-webkit-box;

display:-webkit-flexbox;

display:-ms-flexbox;

display:-webkit-flex;

display:flex;

}

.justify-content-center{

-webkit-box-pack:center;

-webkit-flex-pack:center;

-ms-flex-pack:center;

-webkit-justify-content:center;

justify-content:center;

}

.align-items-center{

-webkit-box-align:center;

-webkit-flex-align:center;

-ms-flex-align:center;

-webkit-align-items:center;

align-items:center;

}

到此，水平垂直居中就完成了。

实现固定页脚

现在加入页脚的部分。这时候html代码变成：

CSS Code复制内容到剪贴板

“view-pageview-current”>

“containerflex-containerjustify-content-centeralign-items-center”>

“content”>

“footer”>

注意，div.view-page是绝对定位，且定义了height: 100%;，而此时div.container也定义了min-height: 100%;。考虑到要“为页脚留空间”，结合传统网页中的固定页脚的做法，得到完整的css：

CSS Code复制内容到剪贴板

.container{

min-height:100%;

margin-bottom:-120px;

padding-bottom:120px;

-webkit-box-sizing:border-box;

box-sizing:border-box;

}

.footer{

height:120px;/*假定页脚的高度为120px*/

}

以上就是在这种条件下的固定页脚的实现方法。虽然最后看起来只是这样一小段代码，但我还是思考了相当一段时间加上试验才得到。其中padding-bottom和负值的margin-bottom的结合应用很关键。此外，作为移动端的网页，要想到使用box-sizing这个配合百分比会非常有用的CSS3属性。

其他形式的尝试?

我也试过使用主轴为垂直方向的Flexbox来实现，但可惜经过测试，flex-direction: column;还没有被现在的主流手机浏览器所支持。

传统网页的固定页脚

关于传统网页的固定页脚，有一个专门的站点HTML5 CSS Sticky Footer介绍了其实现方法和原理，你也可以阅读我以前写的简单实现固定在页面底部的页脚。

结语

移动Web单页应用的页面结构是比较特别，所以固定页脚这么有用的东西做起来又是一个新话题了。想到并试验成功后，我第一反应就是赶紧记下来，真是担心以后忘掉了还得费劲重想...

移动Web应用程序 第3篇

关键词：响应式Web设计；移动信息服务；移动档案馆

基于移动终端搜索引擎，开发响应式网页，来适应各种尺寸移动终端设备访问或获取档案信息资源。目前档案馆缺乏在移动终端中，基于搜索引擎的档案信息移动服务方式以及实现的具体方法。为此笔者提出开发响应式Web设计来解决这一问题。

1 档案移动信息服务的主要方式及面临的问题

1.1 档案移动信息服务的主要方式。档案移动信息服务方式主要经历了短信、WAP、APP、微平台几个阶段。微平台指微信、微博、社交网站等社交平台。因微信、微博普及面更广、使用持续度高，所以主要论述这两种服务。现行阶段基本是多种方式同时运行。

国内档案移动信息服务兴起于2002年左右，开始探索基于GPRS的移动信息服务，2006年后进入集中发展时期。韩义义（2006）报道贵州省档案馆宣布可通过短信查询档案和现行文件目录业务，成为首个通过短信提供档案服务的档案馆[1]。瞿英和王晓凤（2007）依据国内缺乏针对档案系统的WAP应用的现状，对基于WAP的高校综合档案查询系统进行了详细分析，设计出了可行的系统方案[2]。短信和WAP在2006-2009年为档案移动信息服务主要服务方式。武汉市档案馆在2013年国际档案日上，启动数字化档案馆手机档案信息文化推送系统，被誉为全国首个“手机档案馆”[3]。此后档案APP开始兴起，但只有少数档案馆应用。黄永勤等人（2014）指出新浪微博作为国内首家微博平台，于2009年8月推出，仅有14%的档案学人在2009年注册并发布第一条微博[4]。王潇与黄新荣（2013）调查了截至2013年1月23日微信公众号，实际档案部门注册数为0[5]。胡晶（2013）报道十堰市档案局于2013年9月5日推出手机微信查询开放档案和现行文件业务[6]。2009-2016年，在社交媒体热浪的席卷之下，微博在档案移动信息服务中被广泛应用，而从2014年开始微信在档案移动信息服务中掀起了新浪潮。

1.2 档案移动信息服务面临的问题。

1.2.1 部分WAP网站用户体验不佳。WAP（Wireless Application Protocol，无线应用协议）以智能信息传送的方式在移动终端实现互联网和高级数据业务的引入和互操作，实质是为移动用户提供浏览网页等网络服务[7]。笔者访问部分档案信息网的WAP网站，其中有的档案网站，如安徽省档案信息网，用户体验较好，有的档案网站体验不佳：第一，内容纷繁复杂，界面冗长。界面垂直排列的网页内容可说为丰富，也可形容为“过重”，它实际上是将PC端的网页进行缩放。第二，字体太小，需手动放大。打开页面无法看清字体及内容，一眼实难观尽。第三，操作不便。想要找到某一栏目，除了不停的放大页面外，还需操作谨慎，稍有不慎点击到非目标栏目，就需重新返回，再次缩放点击，操作耗时。

1.2.2 APP开发运营成本与利用效益的反差。调查看来，极少数档案馆已上线运营档案APP，如浙江省档案馆、广西壮族自治区档案馆等。虽档案APP初有发展，但笔者认为部分档案馆研发档案APP还需三四而后行。首先，档案APP的研发成本高，周期较长。需开发iOS、Android、Windows phone等多个版本，以适应使用不同操作系统移动终端的人群使用。其次，不断的更新新内容、运维。APP上线后的后期任务接踵而至，完成这些“任务”的人财物消耗大。最后，用户对档案APP的利用频次、粘性程度较低。有着档案素养和档案兴趣高的少数人群，使用APP的时间和目的会较多，而仅在必要时才利用的广大普通民众，其利用档案的迫切必要性相对较少，用户利用粘性低。

1.2.3 微平台侧重于宣传与普惠档案服务的局部发展。目前档案微平台活跃并广泛开展，开通微博的档案馆及档案学人数量大，微信公众号也已上百。但其提供的内容以信息发布和指导性文件这一系列的休闲档案为主，譬如，业内动态、照片珍藏、网上展览、查档须知、法律法规等；查询上大多只能做到预约查档。档案微平台服务的内容还较为同质化和狭窄，缺少特色服务，全方位的档案信息服务。

1.2.4 档案移动应用建设困于成本高、技术难、资源共享难的问题之中。第一，成本上，存在着移动服务开发门槛较高、移动用户利用成本较高[8]。开发门槛即意味着平台系统开发所需的经费及技术，用户利用成本体现在流量的损耗和利用档案所必要支付费用等。第二，技术上，体现在多种技术联合和访问网络的安全上。需要数字技术、信息技术、互联网技术等技术的共同作用。移动设备的无线信号强弱受制于各种外界因素如信号发射的强弱、建筑物的阻挡、金属物的屏蔽、气候的变化等等，一旦无线信号减弱，则会影响到数字档案的传递和利用[9]。第三，资源共享问题。APP生成的原生性和管理的碎片化使得档案信息资源在各自APP中孤立封闭，形成了一个个的信息孤岛[10]。移动应用上的档案信息，是由档案馆挑选出部分信息加以发布的，挑选信息本身就阻碍了信息的完整共享，同时挑选出的信息未必与档案利用者需求相切合，档案信息资源共享互动率低。

2 响应式Web设计的特点、开发应用及优势

2.1 响应式Web设计的含义及特点。2010年5月Ethan Marcotte最先提出响应式Web设计（Responsive Web design），这一理念源于建筑领域中的响应式设计，即根据各个客户设计不同的物理空间。由此引发了Web设计同样也可和响应式建筑相似，做到根据不同设备环境自动响应及调整的思考。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式Web设计的理念是页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整[11]。其基本特点，一是基于搜索引擎，无须下载。二是响应多种设备，适配多种尺寸。

2.2 响应式Web设计的开发与应用。响应式Web设计开发的原理涉及到调整分辨率、赋予弹性化、重构布局、调整样式等[12]。其中关键技术：一是流动布局。传统的的固定布局都为网页设置了一个固定宽度的外包裹，且这个外包裹的元素不能移动，无论访问者移动终端屏幕的分辨率是多少，网页都显示为和其它访问者相同的宽度。这样需在移动终端上缩放界面。而流动布局则是用相对单位百分比，访问时可自适应用户的分辨率，无需缩放界面，网页显示具有可变性。二是弹性图片和媒体。在响应式Web设计中通过使用一些CSS技巧，使图像和媒体比例限制在其父元素范围之内，相应于布局的其他部分按比例缩放，以适应其设备的大小[13]。三是CSS3媒体查询技术。是响应式Web设计最核心的技术，其允许设计人员基于各种不同的设备属性（比如屏幕宽度、分辨率、方向等）来确定目标样式。媒体查询访问终端的分辨率小于或大于设定范围，则自动适应访问端的尺寸。

应用上，可利用开源的响应式Web设计前端开发框架，如UIKit、Bootstrap，进一步适应性设计应用。国内云南大学图书馆在使用PHP语言编写的开源内容管理框架Drupal平台上，成功开发了基于响应式Web设计技术的图书馆移动门户网站。并采用CSS Hack，针对不同浏览器编写不同CSS样式，解决响应式网页在IE6、IE7、IE8中样式乱的问题[14]。

2.3 应用优势。

2.3.1 优化界面 提升用户体验。第一，内容简明。因定制式的响应，界面根据不同设备屏幕分辨率大小可自适应显示。第二，字体清晰。显示效果清晰，不用手动放大、缩小，可随意翻阅穿梭于各个页面之间。第三，操作简便。减去不停手动缩放界面的步骤，某些由于界面限制而被隐藏的栏目也易找到。

2.3.2 降低成本 增加利用效益。一是响应式Web设计满足高需求而维护成本低。在开发成本上，响应式Web设计与APP相比没有多少优势可言，但其在后期的运营与维护上则有着巨大的优势。在维护上，响应式网站服务端统一升级维护，自动更新。档案馆不用面对不同的设备维护多个版本，可不需特定的人维护移动网页。同时提升利用者的“享受”程度，增加用户黏性，实现较好的利用效益。二是减少内容多次分发负担。档案馆不再需要对APP、WAP、微平台等不同移动信息服务渠道分发内容，集中处理优化响应式网站内容即可，减少内容上的更新和营运维护成本。

2.3.3 打破限制 传递全方位信息。移动终端的响应式网页，可提供与PC端网页一致的内容，无须删减，表现力一致。如此，极大地避免挑选档案信息发布，及“挑选”档案信息进行二次发布的时间消耗。这也是档案馆从供给侧的一方改革，提供移动终端可查询全部相关档案信息的移动信息服务新方式，满足用户对信息多样性、丰富性的浏览需求。

2.3.4 助力解决“钱、技、共享”难题。首先“钱”的难题上。相较于档案馆微信公众号、档案APP，其最大的赢点在于较少的运营成本。网络技术的飞速发展，档案用户在“流量”和“时间损耗”上的利用成本也会降低。其次“技”的难题上。国家层面极力提倡互联网与传统行业的链合发展，互联网普及广，技术发展快。移动通信的无线通信技术也在不断的更新换代，信号和速率增强，抗干扰和便民程度不断增强。最后“共享”的难题上。可将PC端已上线运行的由国家档案局档案科学技术研究所启动的“国家开放档案信息共享平台”，进一步改造为响应式网站，合理利用已有的档案信息聚合共享渠道和平台。

3 面临的困境

3.1 响应式Web设计开发成本资金筹措问题。我国档案馆早已冠以“清水衙门”的头衔：一是内部资金缺乏，我国档案工作实行统一领导、分级管理的原则，其运行经费都源于中央审批拨款；二是缺少外部资金来源，2013年财政部、发展改革委公布取消和免征 一批行政事业性收费，其中包括利用档案的收费。三是内部资金消耗大，目前档案馆在数字档案馆构建中投入了巨大资金，在经费运转上绝大部分档案馆应是“步履蹒跚”了。由于经费不足，开发成本筹措不定而使部分档案馆开发响应式Web设计望而却步。

3.2 响应式Web设计技术合作问题。大多数档案馆的工作人员是没有更多的时间、精力或学识担当开发重任。那么档案馆开发响应式Web设计，则面临着技术合作问题，其需与外界合作共力，譬如档案馆与档案馆之间，档案馆与外部专业机构，共同或外包共建来实现档案网站的响应式Web设计。

3.3 部分浏览器响应问题。响应式Web设计需要浏览器有较高支持能力，一般在Chrome、Firefox和Safari上支持较好，而在IE8及其以下的旧版本IE浏览器上支持率极低。主要原因是IE8及其以下的旧版本IE浏览器并不支持CSS3。媒体查询功能是响应式网页设计的核心，是CSS3带来的功能，所以只有支持CSS3的浏览器才能实现响应式设计[15]。

4 解决方法

4.1 众筹助力解决开发成本问题。众筹指通过互联网方式发布筹款项目并募集资金[16]。为解决档案馆开发响应式Web设计所需的资金，档案馆可在专业相关性较高的网站或众筹网上，发起响应式Web设计开发资金众筹项目，通过互联网合理合法募集社会资金。目前，国内优酷众筹取得较大成功，在规定募集时间长短和目标金额前提下，募得资金，完成众筹项目。

4.2 “产学研”为导向 与高等学校技术合作。产学研通常指以企业为技术需求方，与以科研院所或高等学校为技术供给方之间的合作，其实质是促进技术创新所需各种生产要素的有效组合[17]。档案馆在此处姑且充当“企业”，发出对响应式Web设计这一技术需求，而科研院所或高等学校则研发相应的技术，从而实现学、研、产的有效递进，达到共赢的功效。

4.3 尽量支持旧版本IE 鼓励用户更新浏览器。一是国内97.45%的Windows Phone用户使用移动版IE浏览器[18]，IE浏览器用户决定了响应式Web设计应尽量支持IE。对于那些不支持媒体查询功能的浏览器，可以通过加载media-queries.js或者html5.js的方法来解决。对于IE6浏览器，很多样式都不兼容，本站采用了弹出窗口提示升级浏览器的方法[19]。二是国外数据公司Gadget Lab发布了2015年全球移动浏览器份额的数据，中国市场份额中安卓类浏览器占37.63%、Safari占35.82%、Chrome占19.19%、Firefox占4.41%[20]。这些被广泛使用的移动浏览器，几乎都支持响应式网页，按照使用需求，大众用户都可选择性地更新使用支持响应式网页的浏览器。

参考文献：

[1]韩义义.贵州手机短信可查档案目录[N].中国档案报，2006-06-08（1）.

[2]瞿英，王晓凤.基于WAP的高校档案查询系统的设计[J].兰台世界，2007（15）：37.

[3]武汉建全国首个“指尖上的档案馆”[EB/OL].[2016-04-15].http：//news.xinhuanet.com/info/2013-06/10/c_132446105.htm.

[4]黄永勤，黄丽萍，王兰成.档案学人微博的调研与分析[J].档案学通讯，2014（6）：31-35.

[5]王潇，黄新荣.微信公众平台开启档案利用新时代[J].陕西档案，2013（2）：26-28.

[6]胡晶.十堰市档案馆开通手机微信查档业务[J].湖北档案，2013（9）：16.

[7]赵屹，汪艳.档案利用服务的移动化形式与泛在化趋势[J].档案与建设，2015（10）：4-7.

[8][10]王协舟，王露露.Light APP在档案移动信息服务中的应用研究——基于档案机构微信公众号的调查[J].档案学研究，2016（1）：38-43.

[9]徐一男，李禾.数字档案移动实现模式探析[J].兰台世界，2013（26）：35-36.

[11]百度百科.响应式网页技术[EB/OL].[2016-04-10].http：//baike.baidu.com/link？url=ueD8gHtke0CJkNDS27oONzoJmf_YG2kf5MXBgA5h1p8FO_0D_84_ImgoTSInf8WUqRetnjjd1BBYRDXDJUvq0q.

[12][14][15][19]毕剑，刘晓艳，张禹.使用响应式网页设计构建图书馆移动门户网站——以云南大学图书馆为例[J].现代图书情报技术，2015（2）：97-102.

[13]曹树金，吴育冰.响应式Web设计及其在图书馆门户网站中的应用——以“211”高校图书馆为例[J].图书情报研究，2016（1）：30-34.

[16]百度百科.众筹[EB/OL].[2016-04-22].http：//baike.baidu.com/link？url=R6rStAIxI4xGlQ6TzZiB_dNU5bsJbrc8IVQ8TpxX6feppXkHgVOnrh7AbxyVWsAvv8oSOf0Ta5mVbUK5WwcXlK.

[17]百度百科.产学研[EB/OL].[2016-04-25].http：//baike.baidu.com/link？url=vRIE5MJuCcvxsVSGDKrNaweyAhSE-HHLFsBHOi_b8NPcjQphdWtecLM6d-RVqUhiQD-TUqEHcdgkVcDduXKC8a.

[18][20]移动浏览器全球份额数据出炉，你喜欢哪一款？[EB/OL].[2016-04-25].http：//wp.msn.com.cn/news/413476.shtml.

移动Web应用程序 第4篇

1 跨平台移动Web开发框架

1.1 移动Web开发框架

对于移动Web开发框架来说，它主要是用于这个方面的构建。即对运行在移动终端Web浏览器中的跨平台界面。从某种角度来说，移动Web开发框架的种类有很多。比如，Sencha Touch、Safire。在众多的移动Web开发框架中，jQuery Mobile、Sencha Touch这两种开发框架是使用最为频繁的。同时，对于HTML5来说，这两种开发框架都能够给予它一定的支持。对于这种常用的开发框架来说，它们有着各自不同的优势。对于Sencha Touch开发框架来说，它比较适合那些属于特定的行业。同时这些特定行业有着比较多的交互需求。对这些特定行业进行对应产品方面的应用开发。比如，在企业中，那些办公系统的开发。对于jQuery Mobile开发框架来说，它主要是对那些数据交互起来比较简单的移动互联网的开发。总的来说，jQuery Mobile开发框架更具有优势。它不仅可以支持多种移动平台的开发，也不需要达到多高的要求才能进行开发设计。

1.2 跨平台移动Web开发框架

总的来说，跨平台的移动Web开发框架主要是为跨平台的API提供一定的支撑。在跨平台的API中，这种开发框架的运用可以使开发者减少对里面各个终端平台中相关系统等方面的注意。在把跨平台移动Web开发框架运用到其中之后，还能够进行跨平台混合运用的开发。相应地，在我国一些跨平台开发框架是经常使用的。比如，PhoneGap、AppCan。对于其中的PhoneGap来说，它是以普通而常见的Web技术编程作为对应的基础。并在此基础上，对跨平台移动应用程序予以快速的创建。同时，它是一种混合应用型的开发平台。相应地，对于它来说，能够支持很多方面的主流移动平台。比如，Symbian、Windows Phone。对于硬件方面的API，跨平台移动Web开发框架也包含了款很多方面。比如，对应的地理定位、相关的文档、摄像头。除此之外，对于这三方的插件来说，它的运用使其本身具有的功能不断扩大。在运行中，能够提供更多的帮助。

2 跨平台移动Web的数据交互

从某种意义上说，在跨平台移动Web开发框架中，数据交互技术占据重要的位置，是里面起到关键性作用的组成部分。相应地，对于跨平台移动Web来说，其中的数据交互发生了一系列变化。传统的Web数据交互主要是利用客户端的优势，来把页面申请提交给对应的服务端。进而，在此基础上，服务端会通过某种媒介把有关信息又回传给页面端。最终，生成对应的浏览页面。只是这种传统的数据交互存在一定的缺陷，不能够进行异步支持。而这种数据交互方式已经不能适用与跨平台移动Web开发。针对这种情况，相应的开发者进行了完善。因此，在跨平台移动Web方面，数据交互需要具有这些条件。一是：在跨平台移动Web方面，经过改进后对应模式下的移动客户端显示的数据并不是来自内部的服务器。因而，在进行数据交互的时候，需要移动客户端向对应的服务端发送有关数据的消息请求。二是：当服务端接收到相应的信息请求时，它就会在呼应的数据库中把相关消息调出来。并把这些数据发送到需要的客户端。

总之，在移动互联网方面，跨平台移动Web开发框架进行以及数据交互的完善有着非常深远的意义。它使移动互联网的功能不断增加，更加全面，有利于把我国移动互联网事业推向一个更高的平台，拥有更加广阔的天地。

参考文献

[1]李张永,陈和平,顾进广.跨平台移动Web开发框架与数据交互方法[J].计算机工程与设计,2014,05:1827-1832.

[2]孟凡宁,丛中昌,黄志兴,贺楚瑜.移动互联网应用跨平台开发研究[J].移动通信,2013,13:60-63.

实验九-Web应用程序设计 第5篇

一、实验目的（1）掌握网站设计的总体方法和步骤。

（2）综合理解Web程序设计方法。

二、实验内容

设计一个小型的WEB应用程序。WEB应用程序应包括3个以上简单且规范的页面，每个页面完成明确的功能。

三、实验要求

1）需要使用母版页技术；

2）需要使用到TexBox、GridView、DataList等ASP.NET服务器控件；

3）需要利用Session或者Cookie等内置对象实现页面间切换和数据传递；

4）需要用到数据库访问。

建议题目：

（1）图书信息管理系统：能够实现添加新书、修改和删除图书信息，借出操作等；支持按书号精确查询图书信息、按书名模糊查询图书信息等。

移动Web应用程序 第6篇

摘 要：移动图书馆进一步扩展了图书馆服务的方式和手段，是数字图书馆发展的新方向、新领域，也是未来几年图书馆信息化建设的重点内容之一。从系统结构、技术路线、建设成本、读者使用方式等角度，分析了Web App（Web 应用）服务模式的特点；在此基础上，设计、开发了基于Web App服务模式的移动图书馆。经上线测试，系统各项功能运行正常，在多个移动平台上使用不同移动浏览器访问，呈现效果一致。

关键词：移动图书馆；Web App；服务模式；设计与实现

中图分类号：G250.76 文献标志码：A 文章编号：1673-8454（2016）05-0047-04

一、前言

移动图书馆（Mobile Library）是指使用Smartphone、PDA、Tablet PC等移动终端，通过接入移动互联网来使用书目检索、借阅查询、预约操作、续借操作等图书馆服务的一种网络应用系统，具有移动性、便携性、及时性等特征[1][2]。移动图书馆将移动互联网技术和图书馆服务完美、有机地结合在一起，实现了图书馆的泛在服务[3]，任何人在任何时间、任何地点都可以借助移动终端获取图书信息和服务。

移动图书馆的服务模式是指为读者提供服务的具体形式[4]，不仅决定了读者使用的具体方式，也是移动图书馆系统结构、技术路线及建设成本的决定因素之一。短消息（SMS）、Web应用（Web App）、本地应用（Native App）、混合应用（Hybrid App）是目前主流的四种服务模式[5]。本文采用Web App服务模式，设计、开发了移动图书馆系统，在多个移动平台上使用不同移动浏览器访问，呈现效果一致。

二、Web App服务模式

1.Web App简介

Web App是一种采用HTTP作为传输协议，使用HTML5脚本语言编写，通过浏览器呈现内容的移动应用程序[6]。WAP网站[7]、Web网站是与Web App相近的另外两个术语，但三者在技术路线、应用定位、适用范围等方面存在较大差异。

WAP网站以WML语言编写并使用WAP协议进行传送，以适应早期无线网络数据传输速率低、移动设备性能低的情况。

Web网站和Web App虽然都使用HTML语言编写、使用HTTP协议传送，但在以下几点有着明显区别：Web网站主要通过计算机终端访问，以提供海量信息为主要目标，交互界面以超链接为主要元素，精美且复杂；而Web App主要通过移动设备访问，以实现某项业务为主要目标，交互界面以便于触控操作的按钮（Button）、滑杆（RangeSlider）、面板（Panel）等为主，简洁清爽。

2.技术路线

基于Web App服务模式的移动图书馆由运行在Web服务器上的服务端程序和运行在移动终端上的浏览器组成。服务端程序可以采用PHP、JSP、ASP.NET等成熟的动态网页技术开发，但UI前端需要采用响应式设计以适合在屏幕尺寸较小且分辨率多样的移动设备上访问，通常可以借助Dojo Mobile、Responsive、Clouda、Groundwork、jQuery Mobile、Senda Touch等移动UI框架快速实现响应式设计。其中，常用的框架主要有以下四个：

（1）jqMbi

jqMbi由查询库、jqUi和jqPlugin等三个组件构成[8]，使用简单，支持iOS、Android等移动设备上的WebKit浏览器，但对使用其他内核的移动浏览器支持不够好。

（2）Senda Touch

Senda Touch是专门为移动设备开发应用的一个重量级JavaScript框架，用户界面组件和数据管理全部基于HTML 5和CSS3，兼容Android、iOS等多种移动设备及各种内核的浏览器，但入门门槛较高[8]。

（3）PhoneGap

PhoneGap是一个基于HTML，CSS和JavaScript的移动App快速开发平台[8]。严格来讲，PhoneGap并不单纯是UI框架，因为需要借助iOS、Android、Palm、Windows Phone等移动操作系统厂商提供的SDK开发对应的客户端App。尽管可以调用系统底层函数和本地资源实现各种功能，如扫描二维码、GPS定位、拨打电话等，但也丧失了跨平台的特性。因此，PhoneGap更适合开发Hybrid App（混合式应用）。

（4）jQuery Mobile

jQuery Mobile是一个基于jQuery框架的轻量级JavaScript库，具有以下几个优点：

1）兼容性强：通过采用“渐进增强”策略，支持不同性能档次的移动设备，支持iOS、Android、Windows Phone等多个移动平台搭载的移动浏览器，以及Opera Mobile、UC等基于不同内核的第三方移动浏览器；

2）易使用：使用HTML 5标记即可创建移动页面，几乎不需要编写任何JavaScript代码；

3）组件丰富：jQuery Mobile提供了丰富、友好的UI组件，可以创建精美的人机交互界面，提供近似Native App的使用体验。

由此可见，jQuery Mobile具有轻量级、易用、响应式设计、兼容性强等优点，是开发Web App的首选框架。

3.读者使用方式

基于Web App服务模式的移动图书馆简单易用，对移动设备性能及读者操作技能的要求较低。支持普通手机、智能手机、平板、PDA等多种移动设备，只要安装了移动浏览器并能接入移动互联网即可。读者只需要启动浏览器并输入网址即可使用移动图书馆提供的各项服务，不需要安装额外的App，操作方式与计算机上网类似，没有太多障碍。

4.建设成本

Web App服务模式不涉及客户端App的开发，不需要考虑复杂的底层适配问题，具有优良的跨平台特性，可以实现“一次开发，多终端运行”。因此，相比Native App 、Hybrid App等服务模式，Web App的建设成本、后期维护成本都非常低。

三、系统设计

1.系统功能结构设计

整个系统按用户角色分为两个子系统：读者子系统和管理员子系统。根据需求分析，功能结构设计如图1所示

（1）读者子系统功能详细分析

读者子系统包括身份验证、信息动态、个人信息管理、馆藏书目检索、图书事务等五个子模块：

1）身份验证。读者使用借阅证号码或手机号码进行登录，身份验证通过后才能使用移动图书馆提供的全部功能，未登录用户只能查看信息动态模块下的本馆概况、书目推荐、动态资讯、使用帮助等内容。

2）信息动态。查阅图书馆公共信息，包括本馆概况、书目推荐、动态资讯、建议留言、使用帮助等。其中，建议留言需要登录后才能使用。

3）个人信息管理。维护个人信息，读者可以方便地修改电话号码、邮箱、个人简介等基本资料，也可以重置登录密码。

4）图书事务。包括借阅历史查询、图书续借、图书预借、图书预借查询及管理、借阅证挂失等功能。图书事务是移动图书馆的核心功能模块，也是读者最期望使用的功能之一，

5）馆藏书目检索。读者可以书目标题、作者、出版社、ISBN等为条件，输入关键词查询图书基本信息，如果已借出则可以执行预借操作。

（2）管理员子系统详细功能分析

管理员子系统包括以下五个子模块：

1）读者账户管理：批量或逐条增加、删除读者账户，以及修改读者资料、解除借阅证挂失等功能。

2）书目信息管理：批量或逐条增加、删除、修改书刊信息。

3）新闻管理：增加、删除、修改新闻内容。

4）回复留言：查看读者留言并回复。

5）查询统计：对图书借阅、预借、系统登录等数据进行查询、统计，分析读者的借阅行为及规律以便改善服务。

2.数据库设计

数据库是系统的灵魂，既是实现系统功能的基本保障，也是决定系统响应速度、运行稳定性的关键因素。根据功能结构，部分核心数据库表的设计及功能如下：

1）读者信息表。存放读者详细信息，包括借阅证条形码、姓名、性别、读者类型、身份证号码、电话号码、电子邮件地址、自我简介、登录密码、是否冻结等字段。

2）动态资讯表。存放发布的新闻，包括标题、内容、发布者、发布时间、阅读次数等字段。

3）建议留言表。存放读者建议留言，包括留言标题、内容、留言者、发表时间、管理员回复内容、回复者、回复时间等字段。

4）书目信息表。存放书刊详细信息，包括书刊条形码、书名、图书分类号、图书架位编号、出版社、作者、单价、借阅次数、上架日期等字段。

5）借阅信息表。存放书刊借阅信息，包括图书条形码、借阅日期、归还日期、借阅者、是否续借等字段。

6）预借信息表。存放预借信息，包括预借者、预借图书、是否已借等字段。

四、系统实现

1.系统架构

系统采用三层结构，依次为：数据访问层（Data Access Layer）、业务逻辑层（Business Logic Layer）和表示层（Presentation），如图2所示。

数据访问层主要实现数据库读写并封装为数据访问组件；业务逻辑层调用数据访问组件实现数据处理、数据验证等业务逻辑；表示层根据用户指令调用业务逻辑层中的类完成业务处理，最后将运算结果显示在页面上。通过分层设计可以分散关注并能有效降低模块之间的耦合性，从而提高开发效率。

2.系统开发环境

本系统开发环境为：Microsoft Visual Studio 2010，ASP.NET 4.0+jQueryMobile 1.4.2，开发语言为C#，数据库系统选用SQL Server 2005。

3.部分关键技术

（1）响应式设计

为了使文本和图像在不同屏幕尺寸和分辨率下的显示效果达到最优，全部页面均采用响应式设计。基础功能由jQueryMobile框架提供，针对本系统的功能需求及应用特点，增加了部分媒体查询，例如，通过以下查询优化文本及图像在宽屏下的显示效果：

@media （min-width：46em）{ .div_Content{ padding： 15px 5% 4.5em； } }

（2）人机交互界面优化

移动设备上常用的输入设备包括triple-tap数字键盘、QWERTY全功能键盘、Fastap键盘、触摸屏、虚拟激光键盘等。但不管是键盘还是触摸屏，操作上都是以单手为主，尤其是右手大拇指，这为信息输入带来了不便。例如，输入内容时需要在中英文、数字、符号之间多次切换，导航操作需要手指移动较长距离等。因此，人机交互界面优化是本系统开发中的另一项关键技术。

通过采用工具栏、侧滑菜单、弹出式面板等类似本地App的交互元素，以及增加按钮触控面积、优化输入框等措施，可有效减少用户操作次数，提高信息输入效率。

例如，页面内所有超链接均呈现为按钮样式（20px×20px）以方便触控；页面顶部和底部采用固定工具栏模式（data-position="fixed"），当滚动条滚动到中部时自动隐藏顶部栏和底部栏以增加内容显示区域，单击页面空白区域则恢复显示，既方便阅读，也减少了操作次数；常用导航菜单项布局在页面底部，采用导航容器（data-role="navbar"）使按钮满屏横向排列，以方便用户点选；在需要输入数字、日期、网址、电子邮件等内容时，通过HTML 5表单控件中的type属性设定输入框类型，获取焦点后键盘会自动呈现为数字、英文、中文输入模式，可以减少用户切换输入法的次数。再如，通过收缩面板（panel）配合折叠组（collapsible-set）实现侧滑菜单，既节约页面空间，又方便用户点选，其效果如图3所示。

（3）访问设备侦测

jQueryMobile框架致力于在不同的平台上获得一致的使用体验，但如果读者通过PC端访问系统，界面难免显得单调、呆板。因此，有必要侦测用户访问时所使用的设备类型，如果是PC终端则应适当增加页面元素，使用户获得更好的使用体验。

由于不同操作系统、不同浏览器所报告的UA（UserAgent）并不相同，所以本系统在后台代码中通过分析HTTPRequest.UserAgnet属性值来判断用户所使用的设备类型。

五、系统测试

移动图书馆开发完成后进行了上线测试，服务器环境为Windows Server 2003+ IIS 6.0+.NET Framework 4.0，经过测试各项功能运行正常。图4是在联想S898t手机（Android 4.2.2，QQ浏览器4.5）上运行的效果截图。

六、结束语

移动图书馆因其具有移动性、便携性、灵活性等优点，深受年青读者的喜爱。随着“拇指一族”的增多，以及移动互联网向着高速率、高稳定性的方向发展，可以预见移动图书馆必将成为未来几年图书馆信息化建设的重点。本文设计、开发的基于Web App服务模式的移动图书馆，支持智能手机、iPad、PDA、Pocket PC等多种移动设备，所采用的技术路线具有一定的灵活性和可扩展性。在后续研发中，将根据用户的反馈意见和建议，进一步完善功能，优化UI界面，以便为读者提供更好的服务。

参考文献：

[1]胡振华，蔡新.移动图书馆信息服务系统[J].图书馆自动化，2004（4）：18-20.

[2]海金梅，魏志玲.基于3G通信技术的移动图书馆建设[J].图书馆学刊，2011（8）：114-116.

[3]刘松柏，姜海峰，李书宁.移动图书馆建设的难点与趋势[J].图书情报工作，2013（4）：79-83.

[4]梁欣，过仕明.移动图书馆服务模式探索[J].图书情报工作，2013（9）：58-64.

[5]刘芷茵.移动图书馆的设计与功能实现——以广州越秀区图书馆为例[J].图书馆学刊，2013（10）：118-121.

[6]Web App.百度百科[EB/OL].http：//baike.baidu.com/view/8346651.htm.

[7]孟勇.基于WAP的移动图书馆系统的设计与实现[J].现代情报，2010（9）：92-95.

[8]单东林，张晓菲等.锋利的jQuery（第2版）[M].北京：人民邮电出版社，2012：298-299.

移动Web应用程序 第7篇

1 项目背景

目前有一些关于植物定位方面的研究, 如利用Web服务器采用B/S架构, 由C语言NET、ASP、ADO、NET技术开发, 同时, 引入百度地图Java Seript API, 用户只需通过浏览器不仅能够监控数据信息, 而且定位信息能够直观地被显示在地图上[2];北京植物园建立了一系列包括植物引种登记、植物物种等的植物信息数据库, 还有图、文、表一体化的植物定制电子地图, 植物信息的数字化管理能够被实现, 但仅仅是简单的地图显示图[3];还有探究通过GPS移动定位、百度地图定位API接口, 在对校园内植物分布坐标数据采集与分析, 个人定位可以被实现, 可以查询周边植物信息等等[4]。

福建农林大学风景秀丽, 吸引了很多游客进校参观。但游人却不能全然知道其植物名称与特点。本系统是基于移动手机客户端, 利用BDS定位导航功能以及百度地图显示信息功能, 导入植物数据库大数据进行校园植物信息查询和路径导航。可以通过移动手机Web平台, 利用百度地图定位功能和大数据库数据系统, 让游人打开手机植物搜索App就好。

2 查询系统设计

植物查询系统大致分为两个部分, 分别是:植物分布的查询、移动定位周边植物信息的查询。

通过BDS移动定位周边的植物信息, 得到个人周围BDS地理位置。并通过与植物分布坐标数据库对照剖析使用百度地图API使得相关植物信息清晰地显示在地图中。这部分设计的初衷是为了便于游客发现周边相同美景, 便于宣传某学校的美丽。

2.1 分布查询系统基础设计

这个掌上应用, 包含了植物信息表和植物坐标表。两个表格具有对应关系, 表示植物定位信息的不同两个领域的联系。其一表包含:植物的编号、简介和植物名称;另一表格包含植物的编号和经度、纬度。其中经纬度的形式表明定位的实质只是平面位置。

2.2 获取植物定位信息

为定位校园内的植物坐标, 需要借用百度地图的坐标拾取器进行坐标定位并获取其坐标。例如在校园内规定其中若干点的标识, 如百度地图上常见的位置定位一样显示定位信息坐标位置。

2.3 两点定位植物坐标

小型植物的地理坐标可以通过测算和其相同片区内的大型植物的距离差和偏移角度来测得。利用两点纬度计算距离的方法进行推导换算, 这样获得的所有坐标数据才是精确覆盖范围广的数据库。

如下为两点经纬度的距离准确计算的公式[5]:

设定A (ψ1, λ1) 点和B (ψ2, , λ2) 点。则:

2.4 移动端BDS定位

本文所设计的移动目标定位追踪系统通过BDS导航模块接收移动目标位置信息, 并通过GSM网络与客户端信息传送。用来实现对移动目标的定位追踪。该系统终端体积小、携带方便, 双模定位更加精确。室外定位技术主要是借助BDS。用户终端由BDS接收机接收卫星信号, 具有系统覆盖广和定位精度高等好的方面[6]。

3 BDS移动定位误差来源分析

北斗二代定位系统采用的是无源定位的方式, 导航电文会被卫星系统不断发射出来[7]。从北斗定位的过程来看, 由于测量带来的偏差视作伪距测量时的距离误差, 被称做用户等效测距误差[8]。

3.1 BDS移动单点定位法

不断地发射导航电文是BDS卫星部分作用[9]。因为用户接收机使用的时钟与卫星星载时钟不可能总是同步, 所以除了用户的三维坐标x、y、z外, 卫星与接收机之间的时间差被作为未知数, 然后用4个方程将这4个未知数解出来。所以如果想知道接收机所处的位置, 至少要能接收到4个卫星的信号。形成以下方程式建立方程求解[10]:

3.2 基于BDS的伪卫星技术

旨在解决BDS定位误差问题。地面伪卫星和北斗卫星发射相同格式的导航信号, 用户机同时接收双星与地面伪卫星的信号进行位置的解算, 从而定位。通过伪卫星建立方程, 将高程方程替换, 可以获得含有四个、四个以上未知数方程组[11]:

3.3 实地测量定位误差

在获得校园内绝大部分植物的庞大坐标定位信息数据库后, 需要测算实际坐标与在数据库内显示的坐标定位信息的误差。选择30个数据库内随机定位坐标, 再实地测量各点坐标, 对比两项坐标的误差大小。

3.3.1 随机选取定位数据

在系统建立的数据库中随机机选30组定位信息。读取此中坐标, 得如下表1, 并在地图上标注其分布得如图1。

3.3.2 实地定位测量误差分析

相关App网页设计在myeclipse软件工具编程, 并存储在百度地图API, 生成压缩包最后摆上百度云服务器, 实地测量其百度坐标经纬度可以利用移动手机相关的应用网站操作, 最终得到30个点的百度坐标, 如表1。

通过得出的两组对应的百度定位值计算, 使用百度地图API接口的下式进行两点经纬度的距离计算[12]:

Varpoint A=new BMap.Point (x, y) ;

Varpoint B=new BMap.Point (x‘, y’) ;

BMap.get Distance (point A, point B) .to Fixed。

这里y和y’是纬度, x、x’是经度;点A和点B是被作为两个不同坐标位置点。两点不同坐标的距离差通过运用BMap.get Distance函数得到, to Fixed表示保存两位小数, 用来计算这30组数据库和BDS系统定位的偏差。正如下面的数据表2。根据表格模拟对比制作出实际与测量对比定位图, 如图2。

这个数据表的数据就是利用通过BMap.get Distance (point A, point B) 方法获得两差异经纬度的实际距离差值。

通过对图2观察后得到剖析结果。可以比较清晰地看到:在校园内的BDS定位误差, 大约95%以上在0~30米的范围之内。

4 解决BDS定位误差对策

4.1 定位误差带来的影响

在某校园内BDS定位误差分析的结果中我们能够清楚, 我们制作的系统是搜索植物目标信息, 而且我们定位位置周围20米内的全部植物的信息能够被获得, 如果是单独运用BDS定位一个植物的定位信息, 可能造成较大的误差, 所以解决此问题非常关键。

4.2 解决方法分析

可从图3得到, 周边20米范围的植物坐标信息在被定位搜索。偏差是30m, 我们假想A作为定位点, 圆1是定位点周边20m圆, 其内全部植物信息都是我们想要获悉的植物信息。圆2为偏差是30m的圆, 圆2内的植物信息绝对是游人想要的[13]。

在比较特殊的条件下, 我们保持搜索半径是20m, 这样我们系统搜索的结果为30m范围内, 图中的阴影部分就是我们希望了解的植物的一点而已。于此, 如果系统把查询的半径变作50m, 那植物定位系统在这样的情况下, 这里面就包括了圆1。这样在真实的情况下, 我们将目标查询范围从20m增大为50m, 这样可以保证在存在BDS定位偏差的条件下, 也同样能得到我们希望的信息。还有就是对于在我们查询中得出的多余部分的信息, 让游览的游人由自身需要判定需要与否就好了。这样, 在保证我们校的目标条件下, 通过简单的增大查询范围就可以解决BDS定位偏差对我们带来的情况。

5 软件功能实现

凭借机群的特点和通信技术的发展状况, 本文提出了基于和基站定位的通讯定位系统。监控中心服务器、嵌入式定位终端以及网站发布3个模块构成系统。系统工作流程是嵌入式定位终端控制SIM900模块定时采集基站信息, 将经纬度数据通过BDS传输到监控中心服务器TCP端口;监控点服务器接收数据并被保存至数据库, 百度地图API接口被Web服务器利用将百度地图服务连接到网页, 用户即可通过浏览器査询位置信息[14]。

5.1 植物查询分布

如图4所示, 在点击搜索栏可以搜索所需要植物的信息, 也可以按右边框的定位栏, 可以定位所在位置, 查询周边植物分布和信息, 即为相应植物在校园内分布情况。

5.2 定位并查询周边植物信息

如图所示, 图5是搜索游人周边50m范围内植物信息结果, 观察可看到游人身边植物的名称和位置以及相关进一步信息。

6 方案创新设计

基于移动手机用户端的植物查询系统结合了BDS的精确定位功能, 并且建造了庞大的植物数据库, 利用百度地图AIP显示功能, 结合当下APP手机软件方便快捷的功能设计的一款全新理念的具有植物查询和路径定位的功能系统。植物查询系统大致分为两个部分, 分别是:植物分布查询、移动定位周边植物信息查询。

移动定位周边植物信息查询的机理是基于BDS移动定位, 得到个人周边BDS定位坐标信息。并通过与植物图库对照剖析使用百度地图API获取相关植物信息并准确地显示在地图上。这部分设计的初衷是为了便于游客发现周边相同美景, 便于宣传农大的美丽。

7 系统应用展望

本系统已经建成大量的植物数据库信息, 并且已经初步制作出植物分布查询系统App软件, 此软件易于安装并使用方便, 搜寻植物功能强大, 定位精准, 查询植物信息全面到位, 是一款非常适合绿色旅游的游客必备手机软件。

此系统目前覆盖面是在校园, 但当植物图库越发完善后, 加之定位越加精准后, 在将来, 不管我们身处何方, 都可用这款系统进行植物查询。今后图库数据更加完善后, 此软件系统可以在森林公园、各名胜风景区和植物园内应用, 随处可查其内植物信息和分布情况。

摘要：北斗卫星导航系统 (BDS) 是我国自主研发的卫星定位系统, 利用北斗卫星导航系统 (BDS) 定位功能和百度地图AIP位置显示功能, 导入校园植物信息数据库, 建立基于移动手机Web的校园植物分布查询系统。植物分布查询和移动定位周边植物信息查询是该系统的两大部分, 可以定位植物也可以获取植物特性信息。目的是为了解决校园及景区游客方便了解该地区植物分布及植物相关信息普及。

移动Web应用程序 第8篇

目前移动嵌入式Web服务器应用广泛, 特别是家庭网络、环境监测、物联网农业, 甚至是电力行业, 例如Web服务器在光伏发电监控系统中的应用[1], 基于嵌入式处理器的Web服务器在网络监控系统中的应用[2]。除此之外, 移动嵌入式Web服务器特别适合以个人轻量级业务为主的应用场景, 大型业务系统可以考虑使用分布式的移动嵌入式Web服务器系统。

用户访问Web服务器, 一般都会直接输入服务器域名进行站点访问, 而根据移动嵌入式Web服务器应用场景的特点, 接入Internet的IP地址大多不是固定的, 而是采用拨号方式连接上网, 特别是以3G通信方式接入Internet网络, 均采用拨号方式接入公网, 而每次拨号, 电信运营商分配的IP地址都有变化, 因此公网中原来的IP地址与域名对应的关系应及时更新, 否则用户无法通过域名访问Web服务器, 将新的IP地址与域名进行更新则是由DDNS模块来完成。DDNS模块将更新请求发送至DDNS服务器, DDNS服务器将最新的IP地址与域名映射关系发送给DNS更新, 如此新的IP地址与域名对应关系便在公网登记, 以便公网用户时刻都能通过域名访问Web服务器。

目前, 移动嵌入式Web服务器方面的研究更偏向于Web实现及服务器数据处理, 文献[3]就是对Web实现所做的研究, 而对Web服务器接入网络方面所做研究甚少。本文研究DDNS在移动嵌入式Web服务器中的应用, 解决远程用户访问动态IP移动嵌入式Web服务器的问题。

1 移动嵌入式Web服务器优势

1.1 移动嵌入式Web服务器优势

移动嵌入式Web服务器相比于PC端服务器, 充分利用嵌入式设备的硬件条件, 建立Web服务器, 节省了硬件成本, 不必再为建立Web服务器准备硬件资源[4]。

优化网络结构, 传统的嵌入式设备只是作为数据汇聚和转发的功能, 起着网关作用, 上层建立了专门的服务器系统, 嵌入式设备需将数据上传至服务器供服务器管理, 而访问者不直接访问嵌入式设备, 而是直接访问服务器获取数据信息。现采用移动嵌入式Web服务器, 访问者直接高效可靠地通过嵌入式设备上的Web服务器实现远程网管信息的传送、控制、展示和管理。在很大程度上简化了网络结构[5]。

移动嵌入式Web服务的便捷性更高, 应用更加广泛, 嵌入式网络结构灵活, 静态移动嵌入式Web服务器在一定程度上限制了嵌入式网络的组建与扩展。

当嵌入式网络结构改变时, 服务器节点有可能变动, 此时不需要知道服务器IP地址, 只需要采用DDNS服务器将域名与新IP更新。又比如搭建个人智能家居系统, 一般而言, 运营商分配个人的是动态IP地址, 用户在远程无法通过域名访问建立智能家居Web服务器, 而需要采用DDNS服务器来完成定期的动态域名与IP更新。

1.2 DDNS技术在移动嵌入式Web服务器的优势

移动嵌入式Web服务器、DDNS服务器、DNS服务器及用户端具体网络结构图如图1所示。

用户端通过域名访问移动嵌入式Web服务器, 域名通过DNS服务器解析得到IP地址, 实际上用户是根据IP地址实现对Web服务器的访问[6], 通信流程如图1实线所示。当域名与IP地址对应关系保持不变时, 公网的DNS服务器一直保存着这对映射关系, 用户可以轻松实现通过域名访问移动嵌入式Web服务器, 但若IP地址有变化时, 而DNS服务器不对最新IP与域名映射关系进行更新, 用户便无法通过域名访问服务器, 解决这一关键问题就是DDNS, 通信流程参考图1虚线所示。

利用DDNS技术来保证域名与IP地址映射关系正确比使用静态IP地址服务器具有明显的优势。

IP地址有限, 而且电信运营商分配静态IP地址的数目特别少, 大多是分配的动态IP地址, 设备的每一次拨号都可能分配到一个不同的IP地址, 因此采用DDNS技术很好地解决了IP地址数目有限的问题。

从成本方面来说, 分配静态IP地址比拨号动态分配IP地址价格要昂贵得多, 拥有静态IP地址不适合轻量级业务的嵌入式应用场合。

目前, DDNS技术越来越成熟, 国内外的DDNS服务供应商也层出不穷, 比如国外的Dyn DNS.org和国内的花生壳等, 都能很好地满足中小企业在DDNS上的需求。

2 移动嵌入式Web服务器接入方案设计

2.1 扩展DDNS的嵌入式服务器架构

对于移动嵌入式Web服务器而言, 与不具有Web服务器嵌入式模块最大的区别就是包含HTTP服务器, HT-TP服务器作为嵌入式设备的扩展模块, 可根据需求来定制, 这也是嵌入式系统的优点之一, 方便模块定制和裁剪。HTTP服务器模块主要负责自身任务管理, 同时提供HT-TP对Web页面请求做出响应, 并且接受远程访问者的数据请求, 这主要是完成HTTP协议的解析, 即将远程访问者的HTTP报文解析并做出相应的回复[7,8]。

如图2所示, 嵌入式设备软件根据功能需求各有区别, 尤其是扩展模块, 都是量体裁衣, 图2描述了保护DDNS功能的移动嵌入式Web服务器共有的模块, 主要有Web页面、HTTP服务器、网络通信模块、数据存储区, 网络通信模块既包括有线通信也包括3G或者Wi Fi等无线通信, 本文扩展了DDNS模块, 其他通用模块未在图2中列出。

Web界面将请求发至HTTP服务器, HTTP服务器Hand request接收到请求, 一方面将数据存储, 另一方面将消息发送至主控软件采取相应动作完成功能。将请求数据存储的目的是为了保证各进程模块共享数据内存, 采用开锁、存取、关锁的机制, 保证数据能在不同进程之间共享。比如界面有一条配置温度传感器告警阈值的请求, HTTP服务器将阈值存入数据存储区, 同时又发消息至主控软件中的控制温度传感器进程, 提示有阈值更新, 告诉该进程读取最新阈值判断是否超过阈值, 有温度告警。HTTP服务器与主控软件及数据存储区均是双向通信。HTTP服务器与网络通信模块之间的双向通信是远程客户通过网络通信模块访问Web页面, 并产生Web请求, 同时HTTP服务器将响应通过Web页面反馈给客户。

DDNS守护进程根据IP地址的变动发送DNS更新消息至通信模块到DNS服务器, 更新现在的IP, 服务商将新IP地址及域名更新后, 回复给DDNS。DDNS采用客户端/服务器模式, 在此, DDNS客户端即嵌入式设备, 最主要的作用即向DDNS服务器发送更新域名和IP地址对应关系的DDNS更新请求, 当服务器的IP地址发生变化时, 它们将作为DDNS客户端, 需要动态更新域名和IP地址对应关系的设备。DDNS服务器负责通知DNS服务器动态更新域名和IP地址之间的对应关系。接收到DDNS客户端的更新请求后, DDNS服务器通知DNS服务器重新建立域名和IP地址之间的对应关系。从而保证即使DDNS客户端的IP地址改变, Internet用户仍然可以通过同样的域名访问DDNS客户端。

通过DDNS技术, 嵌入式设备将拨号上网获得的IP与自己的域名绑定, 从而保证远端用户能够通过域名访问移动嵌入式Web服务器。

2.2 DDNS工作流程

DDNS的主要职责是将网络拨号电信运营商分配的新IP地址与域名发送给远端DDNS服务器, DDNS服务器将IP与域名对应关系更新后传送给DNS服务器, 这样域名与新IP地址映射关系就在公网中进行了登记, 远程用户就可以根据域名访问拥有新IP地址的移动嵌入式Web服务器[9]。DDNS工作流程如图3所示。

当移动嵌入式Web服务器上电后, 系统先进行硬件初始化及主控软件初始化, 然后开启DDNS模块的守护进程, 在守护进程中开启一条线程监控网络拨号状态, 如果有网络拨号动作发生, 则取得最新IP地址与原IP地址进行判断;若发现电信运营商分配的IP地址有改变, 则将DDNS缓冲区初始化, 并在time_to_quit时间内与第一个DDNS服务器发起连接请求, time_to_quit为移动嵌入式Web服务器与DDNS服务器连接成功的最大时间, 否则连接超时;连接成功后调用更新程序, 根据供应商提供的报文格式填充报文并用socket发送出去;等待服务器回应, DDNS服务器若将新的IP地址与域名更新成功, 返回request successful。若返回失败, 则依次选择第2个DDNS服务器发起连接请求直至新的IP地址与域名在公网登记成功。

2.3 报文结构分析

2.3.1 发送报文填充

发送报文的填充格式与DDNS服务供应商有直接关系, 每个DDNS服务供应商都有不同的DDNS请求报文格式, 但就Linux平台来说, 大体格式基本一致, 都需要填充服务器域名地址、主机设备用户名及密码、用户代码等信息。

本文主要使用3个DDNS供应商, 分别是Dyn DNS.org、3322服务器和oray服务器。

Dyn DNS.org的报文格式为:

花生壳oray服务器供应商DDNS.oray.com供应商报文格式为:

发送消息之间, 严格按照报文格式组建报文, 否则报文在DDNS服务器端将不被识别。

2.3.2 返回代码解析

DDNS更新请求发送至DDNS服务器后, 等待从DDNS服务器响应的返回值及返回代码, 根据返回值与返回代码, 判断新IP地址与域名更新情况。

代码返回值为-1, 且会返回strange server response, are you connecting to the right server表示服务器域名不正确。返回401表示认证失败, 花生壳DDNS服务供应商返回401表示未付费用户访问了付费DDNS服务器供应商。返回值为200表示发送至服务器成功, 且服务器返回相应代码, 具体代码列表如表1所示。

3 功能验证

打开嵌入式网关, 连接好设备, 在串口设备里可以看到DDNS模块所发报文信息, 嵌入式网关设备串口为COM9, 打开串口设备, 可以查看到DDNS发送报文。如图4所示。

报文结构如图4所示, 返回成功后, 收到request successful, 表示花生壳域名服务器已经将目前的IP地址更新, 域名ht825.oicp.net对应的IP地址是124.42.77.160, 这样直接访问域名ht825.oicp.net就可以直接访问124.42.77.160了。如果由于网络重新拨号, 运营商分配的IP地址不是固定的, 分配的IP地址有了变化, 此时DDNS模块便会将新的IP地址填进报文并发送至花生壳服务器, 服务器更新域名与IP地址映射, 保证外网用户可以根据域名访问服务器。

验证返回200, 同时返回request success。能根据域名ht825.oicp.net解析到IP地址, 但免费的花生壳服务器出现了偶尔不稳定的情况。

验证方法可以通过ping域名的方式验证, 也可以通过HTTP的方式验证, 如图5所示。

在浏览器中输入:http://ht825:raisecomht825@ddns.oray.com/ph/update?hostname=ht825.oicp.net&myip=, 即输入用户名和密码、域名服务器、域名, 就可以更新网络上的域名及IP最新的映射关系, 上文访问域名ht825.oicp.net返回的是本主机入公网的IP地址。

本文的研究重点并不是建立Web服务器, 而是在讨论DDNS的应用, 做了一个简单网页, 作为Web服务器来验证DDNS功能, 在远程任意一台可以连入Internet的计算机访问ht825.oicp.net便可以访问所建的Web浏览器。如图6所示。

远程用户在浏览器输入Web服务器域名后, 就可以访问移动嵌入式Web服务器, 该服务器的主页显示是一个登录页面, 输入用户名和密码登录即可。本文所建Web网站仅为远程访问嵌入式Web实验测试, 并没有太多的功能, 在实际的应用中, 应根据嵌入式模块的功能需求来建立嵌入式Web页面, 比如智能家居嵌入式Web页面、环境监测嵌入式Web页面等。

4 小结

本文将DDNS技术运用于移动嵌入式Web服务器, 解决了远程用户访问动态IP移动嵌入式Web服务器的问题, 将DDNS模块作为独立模块可加载到任何需要使用Web服务器的嵌入式设备上, 具有一定的通用性。物联网技术的快速发展, 传感器节点的增多, 移动嵌入式Web服务器将有更多的用武之地, DDNS技术将在移动嵌入式Web服务器的搭建中起到重要作用。

下一步研究应重点考虑建立通用的DDNS模块, 可以独立配置加载, 这样只需要在嵌入式系统整个软件编译的时候, 将DDNS模块加载进去即可, 增加了DDNS模块的配置性及适用性;同时应当增加更多的DDNS服务器供应商, 增强DDNS模块解析功能, 保证DDNS模块解析的速度。

摘要：移动嵌入式Web服务器伴随着嵌入式技术与网络通信技术的高速发展应运而生, 是基于Internet的嵌入式技术网络化的扩展应用。先从3个方面对嵌入式Web技术的优点进行了分析, 接着阐述了DDNS技术在移动嵌入式Web服务器的重要作用, 然后对包含DDNS模块的通用嵌入式模块进行了说明, 并对DDNS工作流程及报文结构进行分析, 最后对基于移动嵌入式Web服务器的DDNS功能进行了简单验证, 实验证明, 该方案切实可行, 稳定性好且成本低廉。既是对移动嵌入式Web服务器功能的增强, 也是对动态IP嵌入式服务器接入Internet的关键技术分析, 旨在建立一套移动嵌入式Web服务器的通用接入方案, 具有一定的研究价值。

关键词：移动嵌入式Web服务器,DDNS,接入方案,请求报文

参考文献

[1]姚雷, 卢晓东, 万江文.光伏发电监控系统中移动嵌入式Web服务器的实现[J].计算机工程与设计, 2012, 33 (9) :3397-3340.

[2]唐永彬, 杨恢东.基于ARM11的嵌入式Web网络监控系统设计[J].电视技术, 2011, 35 (9) :122-124.

[3]潘琢金, 王秋实.基于AJAX与CGI的嵌入式瘦Web服务器研究[J].计算机工程与设计, 2010, 31 (20) :4372-4437.

[4]高健, 黄岚, 王忠义, 等.一种加权数据融合算法在移动嵌入式Web服务器中的实现[J].计算机测量与控制, 2010, 18 (6) :1376-1379.

[5]单立平.嵌入式Linux网络体系结构设计与TCP/IP协议栈[M].北京:电子工业出版社, 2011.

[6]秋勇, 陈晓宇, 李电, 等.基于DDNS的3G无线通信技术在电能质量在线监测系统中的应用[J].电测与仪表, 2012, 49 (2) :44-47.

[7]龚尧飞, 徐洪波, 金静.嵌入式移动Web服务器系统[J].计算机工程与设计, 2010, 31 (24) :5204-5207.

[8]潘琢金, 王秋实.移动嵌入式Web服务器中动态Web技术的研究[J].计算机工程与设计, 2010, 31 (18) :3975-3978.

移动Web应用程序 第9篇

随着移动计算技术和无线通信技术的发展,移动学习(M-learning)作为数字化学习(E-learning)的一个分支,受到越来越多领域的关注,特别是在教育领域的广泛应用,成为网络教育研究的热点。网络为人们提供了更加丰富的学习环境和多样性的学习资源,使其成为各种信息的巨大知识宝库和信息海洋,学习者们可以在其中挖掘丰富的知识。但是在全社会对继续教育和终身教育的需求,以及更普遍的个别化学习需求的大背景下,学习者往往希望能考虑不同的学习者的情况,如学习需求或学习动机的差异等,来有效地实现移动学习中个别化学习的目标并设计出个性化的学习系统,为学习者提供随时随地学习的平台,提高学习的效率。而Web日志挖掘技术能从Web服务站点日志中抽取出丰富的、未被发现的、有潜在使用价值的信息,得到学习者访问行为和方式,找出学习和教学的规律,更好地满足学习者的个性化学习特征和要求。

2 移动学习理论

移动学习是继数字化学习之后呈现出来的一种新型的学习模式,它除了具有e-Learning的多媒体性、交互性、自主性以外,还具有学习便捷性、情境相关性、实用性及个性化等特性。移动设备和情境很好地结合,移动技术对社会关系网络的增强,移动设备的普适性,使移动技术在支持情境学习、社会性学习、非正式学习等方面更具有独特的优势。

移动学习的概念一直是变化和演进的。最初,移动学习主要指使用小巧的和便携的设备来进行学习,如PDA;通常是在一个固定的场所如教室里。逐渐地移动学习指向了现在最为通行的定义,即:学习者可以带着数字设备移动,可以随时随地访问内容和使用数字工具。移动学习兴起于各种手持设备迅猛发展的大背景下,指学习者在自己需要学习的任何时间、任何地点,通过手持式移动设备和无线通信网络获取学习资源,与他人交流和学习。

国内外移动学习研究都经历了可行性分析、资源整合及终端软件的研发及推广应用3个阶段,取得了一定的研究成果。欧洲和北美的移动学习研究相对比较成熟,并且注重实用性,实施了很多移动学习项目。许多大学和企业陆续建立了自己的WAP教育站点,开展移动学习服务项目,如美国格里菲斯大学和明尼苏达州立大学,Oracle公司等。国内移动学习研究起步相对较晚,但是近几年发展迅速,《国内移动学习理论研究与实践十年瞰览》全面盘点了移动学习项目、课题及典型的应用案例。

3 Web日志挖掘

随着信息技术和数据库技术的迅猛发展,人们能够非常方便地获取和存储大量的数据。面对大规模的海量数据,传统的数据分析工具只能进行一些表层的处理,而无法获得数据之间的内在关系和隐含的信息,从而陷入了“数据丰富,知识贫乏”的困境。为了摆脱这种困境,人们迫切需要一种能够智能地、自动地把数据转换成有用信息和知识的技术和工具,这种对强有力数据分析工具的迫切需求使得数据挖掘(Data Mining)技术应运而生。

根据所挖掘的Web数据类型,可以将Web挖掘分为3类:Web内容挖掘、Web使用挖掘和Web结构挖掘。Web内容挖掘是从Web数据内容中挖掘出有用的信息,挖掘对象包括文本、图像、音频、视频、多媒体和其他各种类型数据。Web内容挖掘内涵丰富,包括:搜索引擎基于传统信息检索技术从Web上提取信息;从Web上更智能地提取信息;基于本体的重构方法等。Web结构挖掘对页面中的超链接进行挖掘,因为超链接中也包含着大量有用信息。其目标是生成关于Web站点和Web页面的结构总结。Web结构挖掘研究的焦点在于链接信息上,这是Web数据的一个重要方面。Web使用挖掘也称Web日志挖掘,是通过挖掘相应站点的日志文件和相关数据来预测该站点上的浏览者的浏览行为模式,从而更好地理解和服务基于Web的应用。具体来说,是从用户的网络行为中抽取用户感兴趣的模式,通过对用户的浏览数据(包括IP地址、URL、域名、访问时间等)进行收集、分析和处理,建立用户行为和兴趣模型,并利用这些模型来理解用户行为,从而改进站点结构,包括数据准备、模式识别和模式分析等过程。

Web日志挖掘是从Web日志文件中抽取蕴涵的、未知的、有潜在应用价值的、非平凡的模式和隐含信息,是数据挖掘技术在Web环境下的应用。它是一门集Web技术、数据挖掘技术、信息科学等多个领域的综合技术。在网络教育中,通过对Web访问信息的挖掘,不仅可以对网络课程页面内容进行分类,还可以得到关于学习者访问行为和方式的普遍知识,挖掘出学习者的访问行为,既满足了学习者对知识的需求,又可以向教师或网络课程制作者提供网络课程的改进意见。

4 K-means算法

聚类分析是数据挖掘中一种非常重要的技术和方法,聚类就是将一组相关集合按照某种相似度函数或相似性准则划分成若干类别,使同一类别个体之间的差异达到最小化,不同类别之间的差异达到最大化聚类分析的问题可描述为:给定m维空间Rm中的n个向量,把每个向量归属到S个聚类中的某一个,使得每个向量与其聚类中心的距离最小,聚类分析的实质是一个全局优化问题此外,可认为m是样本参与聚类的属性个数,n是样本个数,S是由用户预先设定的分类书目或聚类个数。

最著名与最常用的基于划分的聚类算法是K-means算法。K-means算法以k为参数,把n个对象分为k个簇,使得簇内具有较高的相似度,簇间具有较低的相似度。相似度的计算根据一个簇中对象的平均值(被称为簇的重心或簇心)来进行。K-means算法流程说明如下:首先从n个数据对象任意选择k个对象作为初始聚类中心;而对于所剩下其他对象,则根据它们与这些聚类中心的相似度(距离),分别将它们分配给与其最相似的(聚类中心所代表的)聚类;然后再计算每个所获新聚类的聚类中心(该聚类中所有对象的均值);不断重复这一过程直到标准测度函数开始收敛为止。一般都采用均方差作为标准测度函数:

其中E为数据库中所有对象的均方差之和;P为代表对象的空间中的一个点;mi为聚类的均值(p和mi均是多维的)。

k K-means算法的步骤如下:

(1)随机选择k个对象作为初始簇的中心。

(2)根据簇中对象的平均值,将每个对象(重新)赋给最类似的簇。

(3)更新簇的平均值,即簇心。

(4)若簇心不再发生变化,则返回划分结果,否则转2。

5 基于Web日志挖掘的移动学习系统

随着社会的发展以及终身学习的需求,非正式学习的学习者越来越多,单纯的课堂学习已经不能满足广大学习者,移动学习成为正式和非正式学习的必备。移动学习平台成为除课堂以为的又一重要学习环境,由于学习者的个人学习的目标、能力、兴趣、爱好、习惯的不同等,所以就需要针对性的提供差异性的教学安排和教学内容,因此为学习者量身打造合适的学习资源、学习环境成为当今的研究热点。

Web日志挖掘是以Web服务器作为数据源,从海量的数据中挖掘出隐藏在数据中有用的、有价值的数据。传统的学习平台仅仅为学习者提供了学习的环境,没有对学习者个人进行分析,无法为学习者提供有针对性的教学资源和学习计划。在移动学习平台中使用Web日志挖掘,通过使用挖掘技术可以使Web站点拥有智能行为,对学生的学习情况和行为进行分析,挖掘出学生访问平台的模式和学习兴趣等,为向学生提供相关知识和推荐新知识提供依据,大大提供了移动平台的个性化服务书评和服务质量。

在基于Web日志挖掘的移动学习系统中,将学习者日志将在经过预处理后,形成具体的Web事务库如图1所示,通过具体的Web挖掘算法来进行模式发现。可以使移动学习系统能够根据学习者的知识结构、学习行为等个性特征进行个性化教学,以提高学习者学习的积极性和主动性,增强学习者的内部动机,提高学习效率。

6 结语

移动学习时间的零散决定了移动学习资源知识点的零散,从而打破了学习系统的完整性,因而单纯依靠移动学习很难建立起系统的知识结构。文中对移动学习中学生的学习特点、学习兴趣及学习行为进行聚类分析,同时使用关联算法可以了解学习某知识点的学生可能对其他知识点的兴趣等,提出了一个基于Web日志挖掘的个性化的移动学习系统。

摘要：随着互联网技术和无线通信技术的发展,移动学习成为正式和非正式学习者的学习必备方式。使用Web日志数据挖掘技术和K-means聚类分析方法,通过对学习者的学习特征和行为进行监测与分析,有针对性地进行课程资源和教学过程设计,有效改善了系统的拓扑结构,实现了移动学习中个别化学习的目标。

关键词：Web日志挖掘,移动学习,K-means算法

参考文献

[1]数据仓库、挖掘和可视化——核心概念[M].(美)George.M.Marakes,著.清华大学出版社.

[2]数据挖掘技术应用实例[M].纪希兵,主编.机械工业出版社.

[3]关联规则的挖掘及其算法的研究[J].陆楠.吉林大学,2007.

[4]数据挖掘中的聚类方法及其应用—基于统计学视角的研究[J].殷瑞飞.厦门大学,2008.

[5]基于上下文感知的移动学习系统设计[J].王羽莹,孙礼.通信技术,2010.

[6]基于数据挖掘的个性化学习系统研究[J].贾郭军,史春秀.中国教育信息化,2010.

[7]基于蚁群优化在Web数据挖掘分类模型的实现[J].吴林旭,姚跃华,黄晶.计算机工程与科学,2009.

[8]黄茜.Web日志挖掘在个性化网络教育中的应用[J].现代教育技术,2004.

[9]陶小红.Web数据挖掘在智能选课系统中的应用研究[J].技术词汇,2010.

移动Web应用程序 第10篇

随着信息化建设的不断推进, 以及无线通讯技术发展, 手机已经成为人们必不可少的通讯和学习设备。传统基于浏览器访问的网站架构无法满足移动终端的访问需求, 通过手机访问传统网站, 会出现兼容性差、布局混乱、交互困难等问题。移动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.