还剩51页未读,继续阅读
本资源只提供10页预览,全部文档请下载后查看!喜欢就下载吧,查找使用更方便
文本内容:
题目基于HTML5移动终端平台推送信息系统设计与实现摘要目前,移动客户终端的开发设计正处于兴盛时期,当前的移动客户终端的操作系统种类较多,但是主要的操作系统主要有IOS和安卓系统两类,应用程序的开发者通常是需要对这些操作系统分别进行应用程序的设计,因此,跨平台移动技术的开发以及应用便成为了今日热门的研究对象,怎样能够有效的提高开发的效率就成为值得研究的课题传统的开发程序中往往是需要对每一款操作系统分别进行开发,导致经常出现重复性的工作,因此利用Web平台进行跨平台性的中间件诞生,但是在性能上经常是有着一定的局限性跟随着目前互联网技术的不断发展,人们在信息获取的途径上也变得愈加丰富,移动客户终端以成为现如今人们生活信息的主要来源怎么样能够高速有效的进行信心推送在移动客户终端上便成为了重要的研究方向信息的推送技术早已存在,移动互联网以及智能移动客户终端普及之前,信息推送技术便已经应用在互联网PC个性化制定信息等业务环境中IOS以及安卓操作系统都各自有着特有的推送机制可是,如果使用跨平台的开发方式,目前对于移动客户端的信息推送机制怎么在跨平台框架中实现,使用统一的客户端服务器对各类的移动终端的操作系统进行信息的推送还是缺少相应的研究为使用户能在移动客户终端上有着较好的体验,本文提出了基于移动客户终端风格展示设计,此设计基于扁平化、相应式、流式布局的风格进行实现的,在技术上主要是是依靠CSS3和HTML5提供了多个的主题风格,服务器端以及移动客户终端相互之间使用了轻量级的数据格式JSON在设计中使用Web应用经过PhoneGap和移动平台进行无缝连接在服务器端使用的是JavaEE框架框架技术,基于切面编程的思想进行设计整合,框架的构建中层次分明内容管理系统中主要实现的功能是基于HTML5实现不同的页面相应,实现内容管理界面之间的全屏访问信息推送服务主要是针对不同平台使用了不同的推送标方案,推送的策略主要是是基于用户和主题,用户能够制定出比较喜欢的主题,服务器端也能够按照用户的预览内容进行记录得到用户偏爱的主题,主动的向用户进行推送关键词:HTML_
5、移动应用、推送系统、跨平台AbstractAtpresentthedevelopmentanddesignofthemobileclientterminalisinaperiodofprosperitythemobileclientterminalofthecurrentoperatingsystemtypesbuttheoperatingsystemtherearemainlytwokindsofIOSandAndroidsystemsapplicationdevelopersoftenneeddesignintotheapplicationoftheseoperatingsystemsothatcrossplatformmobiletechnologythedevelopmentandapplicationhasbecomeahotresearchobjectoftodayhowtoeffectivelyimprovetheefficiencyofdevelopmenthasbecomeatopicworthyofstudy.ThetraditionaldevelopmentprogramisoftenrequiredforeachoperatingsystemweredevelopedleadingtofrequentrepetitiveworksotheuseofWebplatformforcrossplatformmiddlewarewasbornbuttheperformanceisoftenlimited.WiththecontinuousdevelopmentoftheInternettechnologypeoplehavebecomemoreandmoreabundantinthewayofinformationacquisitionandthemobileclientterminalhasbecomethemainsourceofpeopleslifeinformation.Howtoeffectivelycarryouttheconfidenceinmobileclientterminalhasbecomeanimportantresearchdirection.InformationpushtechnologyalreadyexistsbeforethepopularityofmobileInternetandsmartmobileclientterminalsinformationpushtechnologyhasbeenappliedintheInternetPCpersonalizedinformationandotherbusinessenvironment.IOSandAndroidoperatingsystemshavetheirownuniquepushmechanism.Howeveriftheuseofcrossplatformthemobileclientinformationpushmechanismhowtoachievecrossplatformframeworkthemobileterminaloperatingsystemusingaunifiedclientserverforallkindsofinformationpushorthelackofcorrespondingresearch.AstheusercanhaveagoodexperienceinthemobileclientterminalthispaperproposesthemobileclientterminaldisplaystyledesignbasedonthisdesignbasedontheflatandthecorrespondingflowlayoutstyletoachieveintechnologyismainlyrelyonCSS3andHTML5providesanumberofthemesserverandthemobileclientterminalusesalightweightJSONdataformatbetween.InthedesignoftheuseofWebapplicationsthroughPhoneGapandmobileplatformforseamlessconnection.IntheserversideistheuseofJavaEEframeworktechnologybasedontheideaofprogrammingtocarryouttheintegrationofdesigntheframeworkoftheconstructionofaclear.ContentmanagementsystemtoachievethemainfunctionisbasedonHTML5toachievedifferentpagescorrespondingtoachievefullscreenaccessbetweenthecontentmanagementinterface.Informationpushserviceismainlyfordifferentplatformsusingdifferentstandardpushpushstrategyisthemainthemeandtheuserbasedontheusercandevelopamorelovethemetheservercanrecorduserpreferencesinaccordancewiththethemepreviewthecontentoftheusertheinitiativetotheuserpush.Keywords:HTML_5mobileapplicationpushsystemcrossplatform目录TOC\o1-3\h\uHyperlink\l_Toc68631374第一章绪论7Hyperlink\l_Toc
686313751.1研究背景与研究意义7Hyperlink\l_Toc
686313761.2国内外研究现状8Hyperlink\l_Toc
686313771.
2.1移动终端系统研究现状8Hyperlink\l_Toc
686313781.
2.2跨平台移动应用发展现状8Hyperlink\l_Toc
686313791.
2.3HTML5研究现状9Hyperlink\l_Toc
686313801.3本文研究内容10Hyperlink\l_Toc
686313811.4本文组织架构11Hyperlink\l_Toc68631382第二章相关核心技术介绍11Hyperlink\l_Toc
686313832.1HTML5技术介绍11Hyperlink\l_Toc
686313842.
1.1HTML5简介11Hyperlink\l_Toc
686313852.
1.2HTML5新特性11Hyperlink\l_Toc
686313862.
1.3HTML5应用前景12Hyperlink\l_Toc
686313872.2PhoneGap介绍13Hyperlink\l_Toc
686313882.3JavaEE技术14Hyperlink\l_Toc
686313892.4本章总结16Hyperlink\l_Toc68631390第三章移动客户端设计及实现17Hyperlink\l_Toc
686313913.1移动端风格设计17Hyperlink\l_Toc
686313923.2移动端内容展示设计21Hyperlink\l_Toc
686313933.3数据交互的实现26Hyperlink\l_Toc
686313943.
3.1JSON数据格式26Hyperlink\l_Toc
686313953.
3.2客户端跨域请求方案27Hyperlink\l_Toc
686313963.4基于PhoneGap跨平台移动端实现29Hyperlink\l_Toc
686313973.
4.1PhoneGap平台构建29Hyperlink\l_Toc
686313983.
4.2PhoneGap跨平台应用31Hyperlink\l_Toc
686313993.5本章小结32Hyperlink\l_Toc68631400第四章推送系统设计和实现32Hyperlink\l_Toc
686314014.1系统服务端设计实现32Hyperlink\l_Toc
686314024.
1.1表现层设计与实现32Hyperlink\l_Toc
686314034.
1.2业务逻辑层设计与实现34Hyperlink\l_Toc
686314044.
1.3持久层设计与实现35Hyperlink\l_Toc
686314054.2内容管理系统设计与实现36Hyperlink\l_Toc
686314064.3管理界面设计41Hyperlink\l_Toc
686314074.
3.1管理界面设计分析41Hyperlink\l_Toc
686314084.
3.2管理界面设计风格42Hyperlink\l_Toc
686314094.
3.3管理界面响应设计43Hyperlink\l_Toc
686314104.4本章小结45Hyperlink\l_Toc68631411第五章推送服务设计45Hyperlink\l_Toc
686314125.1推送信息技术分析及设计46Hyperlink\l_Toc
686314135.
1.1安卓系统推送46Hyperlink\l_Toc
686314145.
1.2IOS系统推送47Hyperlink\l_Toc
686314155.2推送信息策略分析47Hyperlink\l_Toc
686314165.3推送信息服务的实现48Hyperlink\l_Toc
686314175.
3.1推送信息流程48Hyperlink\l_Toc
686314185.
3.2推送信息服务核心程序49Hyperlink\l_Toc
686314195.4本章小结50Hyperlink\l_Toc68631420第六章总结与愿望51Hyperlink\l_Toc
686314216.1本文总结
516.2研究展望51第一章绪论
1.1研究背景与研究意义当今国内的互联网行业的发展呈现出全新状态,传统形式的互联网已成饱和趋势,而正在崛起的正式发展飞速的移动互联网根据前瞻产业研究院所公布的数据显示,目前在国内使用移动客户端进行互联网访问的用户已经超过五亿而且随着移动终端设备的迅速增加,产品成本不断降低,wifi无线网络的覆盖面积逐渐增加,移动终端设备持有率将会极速上升在这样互联网格局改变的形势下,人们在获取互联网信息的方式也在跟随着发生该变在传统的互联网时代,人们上网的形式多数都是通过PC计算机客户端进行对预览信息以及门户网站获取最新的时事新闻信息
[1]但是在当下,人们可以通=通过移动客户端轻松地随时获取互联网的时讯新闻,这与互联网自身具有的特点有着不可分割的关系移动终端设备的携带方面性、移动性能强的特点,使用户能够通过终端设备轻松方面的随时获取有效信息,时讯新闻等因此本文目标是开发出一款基于移动客户端的内容管理系统,给用户提供出便捷、灵活的获取信息和新闻的方式对于传统的内容管理系统,移动客户终端内容管理系统在开发上有着自身的难点,其原因是由目前移动设备的结构状况决定的目前互联网移动设备的种类很多,出现多种系统平台共同存在的局面使用较多的有IOS系统、Android系统、WindowMobile系统都是基于不同的技术实现的,但是开发一款面向多系统兼容的移动客户端内容管理平台需要对每一个系统平台进行分别开发,因此就会大大的降低了开发工作的效率针对以上问题,经过翻阅大量的文献资料研究以及分析,决定选用基于HTML_5技术的WebApp方式进行本系统的开发,HTML_5的多种新的特性能够有效的解决面对跨平台开发瓶颈的问题,致使移动客户端内容管理系统能够快速、高效的实现系统开发相对于当今比较流行的Native的开发方式,此移动终端内容管理系统的实现具有以下方面的优势跨平台方面,同一个应用程序,经过一次开发,能够在各个平台兼容运行传统的系统开发方式的移动内容管理系统,需要针对每一个系统平台进行分别的开发当下移动终端市场中的多种平台共同存在,除了上文提到的IOS系统、Android系统、WindoowsPhone系统,还有黑莓系统等等移动终端系统内容管理要想在多个平台兼容运行,需要开发出多个应用程序针对每个系统平台但是采用基于Web方式开发的移动端内容管理系统便能够在不同的系统平台中兼容的运行
[2]系统云端的升级,使用原生的移动系统移动内容管理系统中,有着缺陷,就是在程序发布的时候相对繁琐程序发布时,不仅是对一个应用程序的修改,还要对更新版本的移动终端内容管理系统上传到这种的应用商店中比如IOS系统中的应用程序需要先上传到苹果公司专用的AppStore平台中,但是苹果公司会对此移动应用的上传进行审核,这期间造成很多的不便如果此应用程序存在着漏洞,进行重新修改的话,程序重新的发布会更加的繁琐相比之下,云端的升级系统减少了这些缺陷,仅需要在服务器端进行更新,所有的使用者就能够查到最新的版本大大的减少了工作量但是目前的HTML_5在移动客户端的开发中的技术并不是很成熟的,在该系统开发过程中,还是存在着以下几方面的挑战
(1)性能的问题,致使基于Web访问方式开发的移动客户端内容管理系统性能差的原因有多个,如本身开发技术问题、移动终端的硬件设备问题、浏览器的解析问题现在Web开发的性能上与native技术相比较有一定的差距,随着移动设备产品的更新换代,移动设备的硬件和浏览器的解析问题也在逐渐的消失同时随着技术的快速升级,轻量级、性能较好的HTML_5框架将会出现,自身的开发技术也在科技快速发展的今天也能顺利的解决
(2)移动终端设备以及浏览器的差异性,目前移动终端设备的制造生产商,浏览器的开发商已经对HTML_5的支持还没有完全的形成统一的协议标准,其产品对HTML_5的支持程度也有着不同这就对于基于HTML_5开发系统客户端内容管理系统的研发带有着一定的挑战
(3)缺乏统一的实现标准,除了上文提到的移动设备,浏览器的差异性,其致使基于HTML_5移动客户端开发的主要问题是没有统一的WebApp实现标准现在移动终端设备领域系统的多平台性,针对不同的平台需要设计不同的风格,用户能够更加习惯的当前设备的交互,市场上Web应用也在迅速的发展增加,使用者也会习惯于Web应用的交互习惯经过上述的介绍,HTML_5开发的移动客户端的内容管理系统有着较好的跨平台性,能够在很大程度上减少项目开发时为不同的操作系统版本匹配的工作量然俄日性能较差,使用者体验不能够满足的缺陷,在本文中设计的一个基于HTML_5移动客户端跨平台内容管理系统,在一定的程度上能够改进系统的性能,保证其轻量级、跨平台、高性能的特点
1.2国内外研究现状
1.
2.1移动终端系统研究现状随着移动互联网的普及,网民更趋向于通过移动互联网获取新闻资讯[f6l现在移动内容管理系统的主要形式新闻资讯客户端和移动新闻门户网,新闻内容管理仍是通过Web的方式现在移动智能领域的移动应用使用排行中,新闻资讯应用仅次于即时通讯应用而移动网站的访问排行的,新闻门户网仅次于移动搜索网站网民现在更习惯通过移动互联网获取新闻资讯,这与移动互联网对新闻传播方式密不可分移动互联网对新闻资讯的传播高效、及时、迅速,新闻内容丰富多样且对用户针对性强,方便用户互动交流现阶段移动新闻资讯客户端以及移动门户主有以下特点:1内容丰富、特色现阶段互联网新闻信息特点是新闻海量、迭代迅速不同的用户对新闻资讯的需求不同,各式各样的移动新闻资讯客户端应运而生各类门户层出不穷,知名大型门户网也在不断推出新的产品2内容短小、精致移动设备的特性,以及现阶段生活节奏的加快,精致、概括性强的新闻资讯更容易吸引用户的眼球移动端的新闻资讯往往是通过缩减编辑后展现给用户的3信息灵活多样传统、单向的信息己经不能满足现阶段用户的眼球,不同的热点层出不穷移动新闻必须适应这样变化,保持新闻信息灵活多样
1.
2.2跨平台移动应用发展现状国外在移动端跨平台开发领域方面起步较早,同时也有着相对完整的结构体系,在这种具有领先地位的研究以及企业级别应用中都是有所体现的在2008年HTML_5草案的发布,是HTML_5新特性以及跨平台移动客户端研究开发提供了技术上的可能性在这个基础之上国内以及国外有关于跨平台开发移动客户端方面做了大量的研究PhoneGap
1.0产品于2011年7月底发布其目的是让开发者能够使用传统的Web技术开发;HTML_
5、Javascript、CSS开发支持不同的平台的移动终端应用程序,开发者能够通过WebAPI接口调用手机系统中核心功能,比如,照相机、GPS、文件、加速器、联系人等等其目前已经支持市场中常见的智能手机系统,Android系统、ios系统等
[3]另外,PhoneGap还提供了丰富的插件功能以供开发者进行调用随着HTML_5技术的快速发展,国外出现了大量的基于HTML_5移动应用框架,例如EXT框架团队所开发的KendoUI,Appframework是基于jQueryMobile所开发的等等基于HTML_5的跨平台应用开发目前在国外已经被广泛的应用,并且增长速度非常快,并且结构体系也在逐渐的进行完善,在今后多元化的移动客户端应用的发展中,跨平台应用也会占有一席地位的最近几点,国内的开发移动客户端应用主要还是以原生的系统开发为主,但是在近两年内出现了大量的互联网公司,都在进行HTML_5跨平台上投入大量的研究2014年6月在国内第一个开源的跨平台HTML_5前端的框架AmazeUI发布AmazeUI是以移动客户端优先为理念,从小屏幕慢慢的发展到大屏幕之中,最后达到了适应所有屏幕,致使互联移动2013年百度公司也推出了自己开发的LightApp,此应用是一种不用下载,在浏览器中即搜即用的移动应用事实上,其实基于HTML_5的APPWeb化,功能是用户在其官方网站首页中点击某个连接,就能够进入到HTML_5应用之中,或者进入WEB站此外一些是完全基于HTML_5的应用如天气应用sun、DailyCost等等,在其性能以及体验上表现都比较好总而言之,跨平台的移动终端应用,其市场前景相对较好,但是基于HTML_5的WebApp还是不够成熟,在今后两三年中WebApp所占的市场份额会逐渐上升然而NativeApp也不会退出市场,将会形成相互共存的时代,随着HTML_5的发展,WebApp也会有着进一步的发展空间
1.
2.3HTML5研究现状HTML_5技术自从诞生至今已有几年的时间了,在这几年的时间之中HTML_5的发展并不是非常顺利的,对于HTML_5应用需要从两个方面进行考虑,一方面认为今后的Web是HTML_5的主要发展市场,另一方面认为HTML_5的缺陷和实际应用中所保持的态度最近几年HTML_5虽然有着一些缺陷,但是长远来看其发展还是有很大空间的其主要能够体现在以下几个方面HTML_5标准协议制度在对HTML_5制定标准规范过程中,W3C组织的工作流程一般是草案、最后修订、候选推荐、建议推荐、推荐到2014年10月,W3C组织宣布这一项推荐标准规范完成,这表明经过几年的HTML_5的标准规范制定完成自2008年,工作草案的发布以来,很多的互联网公司对HTML_5进行研究开发,同时也出现很多的问题,并且能够及时的反馈出问题,致使HTML_5的规范标准逐步的走向完善浏览器的支持情况,移动终端设备的浏览器市场和桌面的浏览器市场有着很大的不同之处,目前移动客户端主流的浏览器主要有AndroidBrowse浏览器,Safari浏览器等都融入到HTML_5研究当中,同时他们所占的市场份额也在不断的增多移动终端设备的浏览器对HTML_5的支持,是移动终端设备和HTML_5相互之间双赢的发展,都能得到有效的推广,同时浏览器也会使更多的用户对其青睐
[4]HTML_5对于移动设备系统开发平台的访问能力还在不断的发展之中,目前与传统的互联网访问系统相比,还是有着很多的性能缺陷但是由于移动设备硬件的快速更新换代,这个问题也随之被顺利的解决比如2011年代2013年本人以及身边的同学就曾经使用过单核的_528M频率的G
8、单核1G的NexusOne、双核
1.2G的GalaxySII,现在则是4核
1.6G的NoteII等移动设备各种各样的基于HTML_5的开源的框架、开发工具快速的出现,并且在其不断的发展之中逐渐的完善除了较老的SenchaTouch9,PhoneGap、jQueryMobile、LungoJS外,同时还出现了各种的CraftyCocos2d-htm
15、limeJS、GameMake、Impact等游戏的开发工具,Skeleton、GroundworkCSS、Gumby等应用程式的设计框架,大量的数据开发平台通常的情况下技术是在不断的发展之中有需求的变化进步的,基于HTML_5的各个技术的发展同时也表示了HTML_5的需求也在不断的增多目前国内的很多大型的互联网公司也都在进行HTML_5的研发当中,并且都推出了自己的移动平台比如说百度公司的WebApp平台C1oudA,Firefox的HTML_5平台FirefoxOS,Intel的应用移植工具AppPorter,任天堂的应用开发框架NintendoWebFramework等等Fiash的开发商Adobe也在这上看到了HTML_5的发展前景,并放弃了本身Flash的移动客户端产品,快速的投入到了HTML_5开发之中,并推出了很多的基于HTML_5的开发工具,动画制作工具,可视化编辑器等KendoUI公司曾经做过一个关于HTML_5的调查,根据此公司的调查数据表明,很多的Web开发者对于HTML_5的应用前景是持有乐观态度的,几乎所有的Web开发者已经使用或者说正在使用HTML_5技术Appcelerator经过调查发现其得到的结果与KendoUI公司调查的结果极度的相似在国内HTML_5的技术也在成为研究的热点,开源的HTML_5也保持着相对较好的人气很多机遇HTML_5的应用也在潜移默化的融入到人们的生活之中目前我们能够经常看到的应用主要有两种形式,一种是传统的互联网站实现移动化其中百度地图就是推出了WAP版本,使用了HTML_5的新特性进行地图的定位功能另外一种方式就是移动终端应用中融合HTML_5技术,比较有代表性的应用主要有淘宝、新浪等等总而言之,HTML_5技术在不断的发展中进行完善,以后将会得到更进一步的发展以及应用
1.3本文研究内容在本文中按照现阶段的内容管理方案的现状,提出了基于HTML5技术的移动内容管理系统的解决方案本文主要从下面几个内容进行阐述的
(1)本文基于HTML5技术的跨平台移动客户终端内容的实现展示为了使移动平台特性能够满足用户要求,本文中提出了一种能够适应多种操作平台的移动客户终端风格Fin并且针对移动客户终端和服务器端的数据交互,对跨平的实现作出了详细的介绍
(2)内容系统服务器端的分析和实现,按照内容管理服务器端,使用了较为轻量级的数据服务框架SSH,并且设计出响应式的界面管理程序,管理的人员能够经过不同的屏幕分辨率进行设备管理
(3)信息推送服务的分析以及实现按照移动互联网的内容信息系统的现状,提出的主题用户推送策略,而且对于不用的客户端进行相对应的实现
1.4本文组织架构本文内容组织架构如下:第1章,绪论,介绍了当前移动内容管理方面的国内以及国外的研究现状研究背景以及意义,同时还介绍了基于HTML5跨平台研究的意义和背景针对移动内容的管理系统,跨平台移动客户终端互联网和HTML5的研究现状逐步的进行分析,最后就是按照本文的研究内容和组织架构作出了阐述第2章,对核心技术的分析,在本章中对于本文的核心的技术进行了系统的介绍和详细的分析,其中主要包含有对HTML_5的简介以及新特性分析,PhoneGap的原理机制分析,核心技术分析第3章,移动客户端设计及实现,在本章中提出了跨平台移动客户端应用内容的风格展示Fin,其次又提出了服务器端和轻量级的移动客户终端进行数据交互实现方式,最后做出了移动平台和WebApp进行无缝连接的解决方案第4章,推送系统设计和实现,对于内容关系的服务,做出了一种高扩展以及低祸合等客户服务器端架构与此同时,对内容管理系统的对象实现模型进行了详细的分析和实现,设计出面对多种屏幕的设备响应式内容管理界面第_5章,推送服务设计,在本章中进行了信息推送的分析,并且提出解决方案以及相应的推送政策第6章,总结与展望对全文进行了全面性的总结,并根据现在发现趋势提出了针对以后发展的设想第二章相关核心技术介绍
2.1HTML5技术介绍
2.
1.1HTML5简介HTML是英文HyperTextMarkupLanguage的缩写,就是超文本标记语言,是网页所构成的文本标签的组合HTML_5是HTML的下一代的标准,HTML_5是从广义上讲的,其实它是包含有CSS
3、javaScript、HTML_5等在内的一套完整的Web开发技术组合
2.
1.2HTML5新特性HTML_5基于HTML原有的标准上解决了很多的实际问题,并且做出了很多方面的改进,集成了SVG技术内容,而且增加了各种的特色标签以及API,使HTML_5具备很多比较实用的新鲜的功能特点
1.地理位置HTML_5技术新增加了GeolocationAPI,可以使程序编程人员能够在取得程序权限的情况下顺利的获取到浏览器使用者的全时的地理方位信息,允许程序开发人员在这个基础之上给使用者提供更多的人性化的服务,例如说LBS的相关服务等
2.数据存储在使用HTML_5技术之前,很多的用户客户端数据主要的存储方式是以Flash插件或者是cookie,但是以Flash插件为存储方式的数据需要基于第三方插件的基础之上,而cookie储存的方式对存储的数据量有着很大的限制,因此以上两者都不是理想的数据存储方式HTML_5所推出的新的数据存储方式主要有本地数据存储以及WebSQL数据库存储方式,这两种存储方式具有存储空间较大,并且存储空间相对独立,接口丰富便捷等特点WebSQL数据库方式是将所要存储的数据已云数据库的形式进行存储的,使用SQL数据库进行数据的增加修改删除等操作;本地存储的方式主要是数据建值对的方式进行存储的,一般有SessionStorage和LocalStorage两种,SessionStorage仅能用于一次的临时对话存储,LocalStorage则能够用于永久的数据保存
3.多媒体播放audio以及video标签的诞生,在很大程度上简化了对多媒体内容的处理,允许程序开发人员将音频数据和视频数据在网页中嵌入开发,所以,在进行音频文件和视频文件的访问时不需要第三方插件的支持就能够实现,在很大程度上提高了独立性
4.画布在HTML_5中增加了包含有CanvasAPI的二维图绘功能,让程序开发员能够通过编写JavaScript的程序代码在网页中实现Canvas画布的绘图功能,并且具有多种多样的特效处理功能
5.新标签语义HTML_5中增加了各种各样的新标签功能比如footer、header等等标签的出现,放弃了基于传统的HTML标准下的div标签的通哟欧诺个表现形式,使得网页中的标签在名称上具有更加丰富的语境,更加具体的描述,并且程序代码的可读性较高新标签的诞生在一定程度上化简了网站的开发,同时方便了程序员在开发中对网站创建的过程
2.
1.3HTML5应用前景HTML_5相比于上一代的HTML标准在其性能以及功能上都有较为明显的提高,新增加了很多的功能特性,虽然现在HTML_5还存在着一些明显的不足和缺陷,但是在应用前景方面仍然还有很多的空间首先,在移动端的开发研究方面,各个移动应用系统平台下的浏览器对于HTML_5的支持程度明显的较高,而且还在不断的提高中,因此移动端的网络应用现状在很大程度上能够得到有效的改善其次,基于HTML_5技术,能够对现在的操作系统内容进行独有的创新,用户可以通过WebApp的形式进行App的获取,并且不用再在本地下载安装,比如Google的ChromeOS等最后HTML_5技术具有的先天性的跨平台优势,随着Web技术应用的功能以及性能上的不断提高,互联网云计算技术的快速发展以及日益增大,HTML_5技术的跨平台应用优势将会有很大程度上的发展空间
2.2PhoneGap介绍
1.PhoneGap移动开发框架介绍伴随着移动互联网高度信息化的快速发展,市场中出现的移动终端智能化操作系统也随之增多自从2007年美国的苹果公司发布第一代明星级别的移动终端设备Iphone,此设备是基于IOS操作系统,之后愈来愈多的基于智能操作系统的移动终端设备如雨后春笋般的出现然而当时的互联网巨头谷歌公司也在其后于2008年发布了基于Linux内核的开源的智能移动终端设备操作系统,就是现在的安卓系统
[5]因为安卓操作系统具有免费性和开源性的特点,致使很多的手机生产制造商以及移动通信运营商也都在争取加入到以谷歌公司为主要导向的开放式手持设备联盟当中,他们共同出资投入技术性人才进行对安卓操作系统的开发以及改进随着安卓操作系统的快速崛起,移动智能终端设备领域开始了飞速的发展模式,同时智能手机使用者也在呈阶梯式的增长之后,美国微软公司也发布了旗下的智能手机,此手机是基于WindowsPhone为操作系统,黑莓公司也发布了B1ackBerryOS智能手机,诺基亚发布了MeeGo操作系统的智能手机,韩国三星公司也发布了基于Bada操作系统的智能手机正在众多公司都在发布具有自己操作系统的智能手机的同时,出现了一个对于手机应用开发的程序员面前的难题,就是他们所开发的一款应用程序需要针对于每种操作系统都要重新开发设计,这样才能实现对所有移动终端设备的全部覆盖,然而面对于基于各种不同操作系统的应用程序在其程序开发过程中的开发环境以及开发语言都是有着很大程度上的不同比如要想开发安卓操作系统的应用程序,需要开发程序人员掌握Java语言,而WindowsMobileying用程序的开发者们需要掌握的是Windows系统下所用到的C#语言,然而要想开发IOS系统下的应用程序,开发人员们需要掌握MacOSX系统下的O句ective-C语言这就给想开发出一个应用程序的又覆盖所有的智能手机操作系统来说是十分艰难的问题,同一个应用程序需要兼容各种不同操作系统下的版本,这样的开发效率很低,并且费时,费力这时软件开发界出现了一个叫做PhoneGap框架的应用,此应用是针对程序开发人员提供的一个软件多个操作系统兼容的问题,达到能够一次程序的编写就能够全部兼容的目的,很好的满足了程序开发人员的需求PhoneGap框架是基于CSS、JavaScript、HTML等Web技术所创建的跨平台的应用程序开发框架2009年由Nitobi公司最先发布出的可以通过本地应用程序进行开发语言和Web浏览接口之间的关联,实现了采用Web技术进行程序的开发,并且封装成为能够跨平台使用的应用程序,目前已经被Adobe公司收购现在,PhoneGap框架所开发出的应用程序已经可以兼容市场上多数的移动客户端智能操作系统的手机基于PhoneGap框架所开发编制出的应用程序经过各个操作系统平台上进行编译然后所生成的具有独立性的安装程序之后,能够得到与原生开发的应用之间差距很小的用户体验程序开发人员也能通过PhoneGap所提供的API进行无差异的调用,运行在不同操作系统中的硬件功能,软件功能包括振铃、摄像头、话筒、听筒、地理位置等等在使用PhoneGap框架编写智能手机终端应用程序时,所用到的主要技术有CSS、HTML和JavaScript等,CSS技术和HTML技术在最近几年都是有比较明显的发展,特别是CSS3和HTML_5技术的提出以及不断的发展和完善,并且出现了很多新的特性,比如HTML_5中的canvas画布,离线应用、websocketAPI以及geolocationAPI,CSS3中全新增加的各种各样的选择器,都在一定程度上丰富了程序开发人员基于PhoneGap框架进行开发选择
2.PhoneGap框架开发的有点PhoneGap框架是一款非常优越的跨平台应用,其优点主要有以下几个方面
(1)免费、开源PhoneGap是完全开源的系统开发框架,任何人都可以通过互联网进行免费的代码获取
(2)协议的标准化PhoneGap框架采用的是W3C标准化技术
(3)方便维护基于PhoneGap框架开发的应用程序在不同的操作系统平台上都有一套基于Web的程序代码进行实现,以便程序的开发以及系统的升级
(4)跨平台能力强PhoneGap框架支持安卓系统、IOS系统、WindowsPhone系统、BlackberryOS系统等移动平台,能做到对其“runeverywhere,writeonce”,能够有效的提高应用程序开发效率
3.PhoneGap移动开发框架运行机制经过使用PhoneGap框架对移动客户端的应用程序开发一般有以下三大步骤首先,选用JavaScript、CSS
3、HTML_5等Web技术进行移动客户端应用程序编写,然后选用PhoneGap框架对已经编写好的代码进行统一封装最后,将封装好的程序代码进行打包,然后能够生成兼容各个智能操作系统平台的安装文件PhoneGap框架是利用JavaScript在Web开发中调用各种平台的原生API时候能起到衔接作用,其实是将外部JavaScript调用转化成为平台原生API调用PhoneGap框架使应用程序在开发以及使用过程中不在局限于原生语言之上,它使能Web技术所用的程序开发人员,能够轻松的进行应用程序的开发,并且能够经过PhoneGap框架满足程序开发人员的跨平台需求
[6]
4.PhoneGap移动开发框架的不足就当下情况来看,虽然PhoneGap框架在跨平台领域中开发应用程序取得了优越的成绩,同时也受到很多的程序开发者的青睐,但是,在用户体验等方面,还是存在着一些明显的缺陷
(1)执行性能方面在正常的运行过程中,基于PhoneGap框架所开发的应用程序运行时较为流畅,并能够拥有很好的用户体验但是当用户对应用程序进行高频操作时,应用程序会出现卡顿,反应慢的现象
(2)资源的占有和稳定的应用型方面对于应用程序的频繁操作会使系统的反应速度变慢,WebKit中的WebView不能够有效的释放内存,因此致使应用程序占用系统内存空间增大,在这样的情况下,有可能造成应用程序的瘫痪,并且出现应用程序的闪退现象
(3)提供的接口质量以及数量的方面PhoneGap框架所支持的API框架还远不能够达到原生的开发环境中提供的API多,其性能的表现也不如原生的好,同时也达不到原生系统中应用程序的用户体验
2.3JavaEE技术
1.JavaEE技术介绍JavaEE技术属于Java语言中企业级别的应用技术,现在被广泛的应用在在企业开发平台中,并且具有明显的优势,JavaEE技术所具有的独特的开放性、稳定性、安全性严格等特点使之成为了企业高信息化的首选同时也被银行、电信、证券公司、电子商务等行业都在大量的采用JavaEE技术组件信息化的平台典型的JavaEE技术平台是以企业级别的JavaBean为核心的,正常情况下使用其运行的成本以及开发的成本都相对较高目前被广泛应用的JavaEE平台是SSH组合这一组合是较为轻量级别的JavaEE平台,具有高度的扩展性、可维护性、以及相对稳定的性能并且不需要EJB的支持就能够在Web容器中运行无论是轻量级别的SSH组合框架,还是典型的JavaEE框架,其结构上大致都是分为以下几个层表现层这一层是由JSP页面、Velocity页面、PDF文档等视窗组件构成的,基本用于客户端请求的收集,并且将其内容在视窗中显示出来控制器层该层是由一些控制期间组成的,这一层能够将客户端发送的信息请求进行拦截,并且能够对业务逻辑层进行调用的接口,将请求转发给下面一层的接口中根据其返回的结果,将结果传送到表现层业务逻辑层这一层是由一系列的业务逻辑所构成的对象该层能够实现系统中业务逻辑的方法,并且向控制器层提供相应的接口,能够调用DAO层数据接口,并且将结果经过业务逻辑方法处理后返回给控制器层DAO层(数据访问对象层)这一层是由DAO组件构成,这些DAO组件是经过原子性等数据库访问形式实现的领域对象层这一层是由一系列的传统的Java对象构成的,其中往往能够实现各自的业务逻辑实现的方法
2.JavaEE轻量级别框架
(1)Spring框架Spring框架是从其诞生至今一直都处在不断地发展以及改进之中,目前Spring框架框架在JavaEE框架中起着至关重要的作用Spring框架完全是在具体的实践中完成的,众多的开发实践步骤已经实现了将某一特定的应用部分留给开发者使用,为Java开发者提供出较为简单的解决方案其中主要包括技术控制核心,反转的IOC,SpringMVC框架,能够实现声明式事务管理AOP框架,以及多种与持久层组合的技术并且贯穿了业务层、表现层、持久层并且能够与其他的框架进行完美整合Spring框架有七个不同处,具有较好的定义子模块组成SpringWeb、SpringContext、SpringDAO、SpringAOP、SpringCore、SpringORM、SpringMVC、SpringCore为主要的核心模块,在使用Spring框架时必须使用SpringCore模块,Spring框架的各个模块与SpringCore为基础构建的,并且每个子模块都是相对独立的,能够进行单独的使用或者是联合的使用其中面向切面的编程以及控制反转是为了开发者使用的,并且使用率非常广泛对于AOP以及IOC的解析如下
(1)AOP切面编程AOP指的是切面编程,对于传统上的编程思想一般都是面向对的,AOP则是面向一个切面系统中经常是根绝业务的划分,将其分为多个组件,这些的组件有一部分相同的调用功能,如事物、安全等切面编程的思想就是将具有相同的功能进行提取,给所有的部件进行调用也可以将AOP看成是其他业务组件上的覆盖层目前切面编程的实现主要有两种形式,一种是静态的代理类,这是需要进行自己创建代码进行编译实现的另一种是动态的代理类,在运行中动态创建这经常需要借助于反射、CGLIB等技术总体来说,Spring框架具有以下特点
(1)设计上入侵式较低,程序代码污染小
(2)与服务器之间相互独立,在Spring框架的基础上应用,能够保证RunAnywhere、WriteOnce
(3)Spring的依赖性,注入增强了一些组件的解祸性,减少了业务对象的复杂性
(4)Spring框架的切面编程能够集中式处理事务、日志、安全等通用业务,同时增强了服用性
(5)Spring框架的ORM和DAO能够良好的支持第三方持久层的框架,降低了数据库访问的复杂性
(6)Spring框架在其开放程度上较高,开发者能够任意的对Spring框架中的部分进行选择,并且不需要依赖于Spring框架
(2)控制反转IOC在Spring框架中控制反转还有另外的一个称呼就是依赖注入,其意思都是比较相似的,控制反转对象进行创建管理反转到Spring容器之中,然而依赖对象是在组合引用的情况下有Spring容器创建并注入能够看出SpringIOC是一种对象管理器
[7]在实际应用中一个对象对另一个对象进行引用,不是通过对象个创建而是基于SpringIOC更加容易这样的明显特点就是实现对象之间的解祸这样有很明显的方便性,一个系统能够划分为多个模块,并且多个模块可以由不同的开发者进行IOC的工作模式是Bean工厂,依照Xml注解的配置,并且其是依赖新的一类反射动态,生成并且注入到需求类中
3.Hibernate框架目前的Web开发语言多数都是以面向对象对中心思想,现在的数据库也都是关系型数据库计算机语言对于对象的操作以及数据库的操作所构成的不一致性,因而致使了ORM的产生OPM框架的数据库主要是编程语言以及底层数据库之间的桥梁Hibernate是的一种ORM框架,HibernateAPI能够为应用程序对数据库的访问提供接口,其中可以分为几种类型提供数据库访问接口SessionTransactionQuery;提供对Hibernate内部事件拦截并做出相关回应的接口;提供对Hibernate配置的Configuration接口;用于对Hibernate进行扩展的接口,如IdentifierGeneratorUserType和CompositeUserType接口Hibernate的内部对JTA、JNDI、JDBC实现了封装形式其中的JDBC是数据底层间的数据库访问工具,而且用户只需要对JDBC驱动安装即可,就能够通过Hibernate进行底层数据库间的访问然而,JavaEE框架和Hibernate的服务器应用的相互继承主要是通过JTA以及JNDI作为中间工具
2.4本章总结在本章中对于跨平台的核心技术做出了简单的介绍然后又按照PhoneGap技术的运行原理和机制做了深刻的解析其次,按照跨平台的Web应用技术的有关技术做出响应式页面的设计介绍最后对服务器开发端做了轻量级的JavaEE开发框架简单介绍第三章移动客户端设计及实现
3.1移动端风格设计Fin的设计风格是本文中所提出的相关的设计理念,其中的核心思想主要是清晰,简单,核心技术是CSS3以及HTML_
5.在其设计理念中主要是基于当下较为流行的扁平化设计、响应式设计、流式布局设计等,能够根据不同的手机设计出不同的主体风格,形成一套能够适用于各个平台的移动终端内容风格展示
3.
1.1设计规范分析UI界面设计中黄金定律永远都是遵循同一套编程代码规范在FIN风格中设计了能够有效的保证程序代码的高质量、灵活性、稳定性等,并且遵循以下设计规范HTML规范
(1)为每一个HTML页面的头一行添加具有标准模式的声明,这样可以使每一个浏览器都能够保持一致的展现
(2)语法方面,可以用空格键代替制表符;用双引号来进行属性的自定义;嵌套的元素应当进行一次缩进;不省略可选结束标签;不需要再自闭和的元素尾部添加斜线
(3)为页面匹配制定的IE版本,能够通过meta标签进行实现为使IE采用最新模式,通常情况下以edgemode作为设置
(4)为根元素指定相应的属性,为稳定设置较为正确的语言,这就为语音合成以及翻译工具做出了相应的规则
(5)根本的实用性,HTML相关标准以及语义需要遵守严格的规则,不能违背实用性的标准提高代码的可读性,HTML中的属性必须遵循以下顺序classidnamedata-*srcfortype,hreftitlealtaria-,role
(6)对于布尔型声明属性时,不进行赋值是可以的
(7)浏览器对于页面的高校便捷的渲染方式进行判断办法近视对字符编码的声明
(8)尽可能的使用重构和迭代进行编写HTML代码,减少父类元素的使用CSS规范
(1)声明顺序方面按照以下顺序对相应的属性进行声明分组Positioning、BoxmodelTypographic,Visua
(2)在同时使用多个元素的时候,采用以下几种代替的方法一是用如RailsJekyll或者其他的系统支持的功能,将CSS进行合并处理,二是用CSS处理器将几个CSS文件进行合并,而且编译成一个文件
(3)特定的前缀属性,要对其每个属性都垂直
(4)语法方面,制表符能够用两个空格进行代替;声明的有括号为单独的一行,以便代码的阅读,并每条声明后,插入一个空格;将选择器进行分组时,把单独的选择器独立成行,常规做法是将声明处的左括号前加空格;每行一条声明能够精确的获取错误报告,最后一条声明除外,每句的结束需要用分号,假如有些属性需要用逗号进行分隔,那么需要在逗号后加一个空格;属性值以及颜色值都小于1的情况下,通常是将小数的整数部分的0进行省略,十六进制数值采用小写;保证代码的统一性,选择器中的属性都要添加双引号;避免0值单位
(5)媒体查询位置,不能讲查询位置以及有关的规则分开,以免造成遗忘
(6)如果有多条的样式声明,需分行声明如果仅有一条,就放在同一行中
(7)避免不必要的嵌套,程序中过多的嵌套会产生比必要的麻烦,只能在必须将样式放到后面容器中时,才能够使用嵌套
(8)clink标签的使用要比@import指令反应速度快,并且能够有效的避免很多问题,因此尽量的使用clink标签9避免过多的使用简写的声明属性,过多的使用简写的声明会导致程序代码的混乱,在读程序的时候也是很难理解,因为会产生一些未知的错误
(10)选择器,尽量避免使用属性的选择器,避免很多层次的选择器,这样会影响浏览器的渲染能力
(11)代码组织,有一些代码的组织规范,建议以组件进行划分,把代码进行分组使用同一的空白符,在页面中有多个CSS文件的形式进行划分12注释,注释对于程序来说非常的重要,因此需要养成较好的注释习惯,并确定其简单易懂同时还需要注意的是将代码正确的注释目的,进行传递的,同时也要尽量的避免不必要的注释
(13)class命名,与以往的额通用语言命名方式不同,CSS中的class命名规则通常是小写的英文字符或者是破折号破折号主要用于命名空间
(14)编辑器配置,编辑器也能设置一定的编辑规范,比如制表符代替两个空格
3.
1.2设计原则分析Fin风格设计的原则是面向所有的移动客户端内容管理系统设计师和开发者们提供的完美的设计规范,使用的系统能够适合各个移动操作系统平台的特点,使用户能够更加容易的识别以及学习同时其提供的组件能够使开发者能够降低成本所以,要想进行移动客户端应用程序设计首先要学习各个操作系统的设计原则以及设计规范各个平台的设计原则如下表3-1所示表
3.1各个移动平台设计原则通过上表内容设计原则的比较能够看出,这个操作系统在设计理念上都有着各自的最求,同时也存在设一定的一致性从使用的经验来看,他们在很多的方面还是有着共同的设计特性的,也具备着各自的明显的特点随着移动客户端交互设计的发展,BenShneiderman也提出了交互设计领域中的几条原则如下
(1)内容优先对于移动设备来说,对于具有较小的屏幕空间来说,设计者需要以内容为核心进行屏幕布局的合理删除多余无用信息,使用户能够习惯内容信息能够有效的提高屏幕的利用率
(2)为了触摸进行设计,移动手机客户端为重的触摸操作代替了传统的硬件敲击,触摸的灵活性更加方便一些,但是由于触摸的准确度还没有完全的理想情况下高、手机登移动设备的灵敏度缺陷等,所以需要对以上缺点进行相应的规则进行完善基于我们应用的框架,组建成一套一致性较高的规范原则进行各种操作触摸界面应该具有很好的易学性和引导性
(3)多通道设计,在输入以及输出的方式上增加其他的形式,不但是文字,如语音、图片、视频、震动等,都会给使用者带来很好的体验,有更加强烈的真实感
(4)流畅性,触摸操作将会有一定的缺陷,比如说触摸目标的不准确性,操作的不正确性,反馈延迟等特性这些因素都能够影响应用程序的运行性能,尽量的确保避免这些缺陷确保应用很好的流畅性
(5)易学性,界面应该具有清晰,明白的特点,具有很好的引导性质,通过图表的隐喻或者是文字的提示给使用者提供了线索,让使用者能够更好的理解并去操作
(6)切入的输入方式可以经过使用二维码的方式,滑动线等替代文字的输入
(7)中断设计,移动客户端应用具备网络中断、电量不足等异常的情况,因此在设计
3.
1.3扁平化风格自从win8界面的诞生以来使用扁平化的设计,其设备风格被广泛的设计者所认同,同时也被更多的使用者所接受目前的移动客户端的设计者也有着更多的扁平化设计风格,比如说IOS7的界面图标所谓的扁平化设计其实就是讲过去使用的虚拟效果,例如阴影、高光、采用简单化、简洁是界面看上去更加的扁平化在扁平化设计过程中图标的选择和色彩的选择调整特别的重要设计出较好的扁平化风格,对于每个设计师的理解都是不相同的,但是基本可以按照以下几种原则布局能够设置一定的视觉规范原则,使其布局具有一定的引导性使使用者的眼光按照所设定的布局浏览到相应的内容一致性色彩,风格等都具有一定的简单易用性,又有美观的效果,不会使用户在视觉上有刺激的感觉,使用者会有舒适感层次化,在一个界面中通常会有内容重要性的差别,重要的内容相对要重点的突出,相对于次要的内容则需要普通的显示可以使用层级将此效果进行实现例如说网站主页的导航,相对于普通的内容更加重要一些,因此可以将导航放到顶部,并且通过层次感进行达到视觉效果对比,可以通过使用一些特定的元素进行颜色的对比,能够起到较为好的效果目标用户,不同领域的网站通常是在不同的设计需求中针对这样的需求,分别的设计出相应的风格如政府部门的网站通常是以红色为主,界面的管主要以浅颜色为主反馈当用户进行一系列的操作时,需要通过一定的反馈告知使用者操作后的结果如当用户点击中导航栏中的某一点的时候,需要让用户知道次条目已被选中,可以使用加亮或者是其他的视觉效果进行实现降低复杂性,无论是什么样的规范进行实现,都不能建立在加大用户复杂性的基础之上视觉设计的再好,用户操作起来不方便,也使用户难以理解,同时也失去了用户相应的体验鼓励探索,再设计方面不仅能考虑到新的用户,但是还要考虑对老用户进行设计的相应,老用户通常是需要更高的需求,然而面对以上的需求可以通过使用一定的指引,让老用户能够更高的体现相应的功能原型不管是什么养的额设计都不能脱离最初设计需求,在设计之前需要对设计进行充分的探索以及尝试
3.
1.4流式布局设计分析CSS在还有没被广泛的认可的时候,网页的布局基本上是基于表格实现的,经常是经过百分比进行各个模块的宽度设计,随着之后的CSS也被广大设计者认可时,设计者们去向于使用像素进行布局的,这样的网页布局设置通常是宽度固定的方式,经常用的像素宽度是960,这样的设计尺寸对于不同的屏幕显示出来的效果也是不相同的目前随着HTML_5媒体查询被广泛的应用,针对于不同的屏幕尺寸做相应的效果假如在使用屏幕固定宽度的设计,会针对于不同的设备做不用宽度的设计因此,随着设备的增加,开发者的工作量也会随着增加因此,需要一个对各个屏幕尺寸都兼容的设计伊桑.马科特在其发表的文章中指出,采用媒体查询、流式布局以及弹性的图片进行布局,尽管以上几项技术不是非常的新颖,但是将几项技术放到一块设计便有了确实的创造性这两者之间构成了响应设计的核心设计的一款响应是的网页,应该遵循一些原则计算百分比的时,可以通过目标的元素宽度上除上下文元素宽度得到网页的元素中,像内容栏,侧边栏,同样也可以根据上述公式得到百分比
[8]可以使用文字的设置EM进行文字的缩放,这样网页中的内容就能够根据页面的变化为变化,也可以将body标签设置成大小为100070,其文字都是较为相对单位EMO弹性图片的布局,也能够通过CSS中的max-width属性设置,这时的图片可以对width设置属性,否则的设计缩放的效果都会消失,也可以对不同的屏幕尺寸设计不同的图片的大小
3.
1.5HTMLS与CSS3响应式页面设计响应式的页面设计是利用CSS3的媒体查询等技术进行网页的构建,目前已经被广泛的应用,并且已经被广泛的浏览器所支持,另外,要对于老版的浏览器InternetExplorer67和8进行兼容修复媒体的查询有媒体的特性媒体的类型条件进行表达式的组成,针对于不同的媒体通常是特性表达式会多一些可以用于媒体对特有的widthheightcolor等进行检测使用媒体查询能够达到不同的样式的效果在创建媒体查询时,经常用到的是设备的视口宽度以及屏幕宽度另外媒体的查询还能提供下一个特性设备宽度,视口高度,视口宽度,设备的高度,电视扫描方式,检测屏幕以及打印机分辨率等等
3.2移动端内容展示设计
3.
2.1响应式设计与实现目前的移动设备大致上可以分为两大类,平板电脑和智能手机平板电脑的屏幕尺寸相对于智能手机来说要大一些虽然不同的平板电脑屏幕尺寸和不同的智能手机的屏幕尺寸都略有差异,但是我们能够通过宽度设置作为UI风格的划分因此在做相应设计的时候,将UI使用的群体大致能够分为两类,窄屏幕移动终端设备以及宽屏幕移动终端设备相对两种的设备尺寸使用者的体验也是不同的,使用者的交互习惯也是不相同的对于移动设备展示应用来说,屏幕小的设备依据的原则是内容优先,内容列表或者是内容信息应该布满屏幕,对于导航栏的信息将会用隐藏的方式将图标隐藏,当点击时能够展现出来,同样也可以通过向右滑动等将导航栏滑出相对于屏幕设备较宽的设备来说,如果整个内容都布满屏幕列表,屏幕会表现的空旷,无力这种情况应该将导航栏固定在屏幕一边,这样不仅能够方便阅读,还能增加屏幕美观性将屏幕宽度设置为876像素以上的设备大多数为平板电脑级别或者是PC设备,768像素一下的大多数为移动手机设备根据以上内容分析做出相应的设计当屏幕的尺寸大于768像素时,UI主要以左右两列方式布局,左侧为内容信息或内容列表,左侧为导航栏,如图3-1所示图3-1屏幕大于768像素UI效果当屏幕尺寸小于768像素时,UI的设计主要是以内容为主,屏幕仅显示内容列表或者是内容信息,当使用者向右滑动屏幕时,或者说是点击导航的图标时,导航栏将会出现如图3-2所示图3-2屏幕尺寸小于768时显示效果
3.
2.2流式布局的设计与实现前段的内容展示UI设计主要是面向不同的屏幕尺寸的不同像素的移动终端设备,针对不同分辨率的移动设备流式布局能够有效的解决跨平台的内容展示针对于不同设备的字体的大小对于用户体验的研究表明,640*960设备中的32px-34px字体可以给用户带来较为舒适的体验按照这样的理念,将640*960的设备中的具体文章列表,栏目列表,字体大小,文章内容等字体为32px但并不是直接将每个字的字体大小进行设定,是按照流式布局原则设计了body字体的大小为32px,其百分比为100070lem
[9]为了更好的适应屏幕尺寸,可以按照流式布局原则,将内容中的图片选用了弹性的设计,将图片的最大宽度设置为100070,图片将根据设备的尺寸做出相应的调整,并不会被剪切掉如下图3-33-4所示640*960,720*1280这两个尺寸的效果较为明显能够看出尽管在不同的尺寸情况下,所显示的效果是类似的,字体的大小和底部栏都有自适应的夺话,以及流式图3-3720*1280显示效果图3-4640*960显示效果
3.
2.3不同主题风格的设计与实现针对不同的智能手机平台,都有着不同的设计风格IOS系统设计师都喜欢用隐喻以及拟物的手法,安卓系统设计师一般都提倡的是简洁性以及流畅性,WindowsPhone系统上用Metro的视觉风格使其能够具有简洁流畅的性质但是这些不同的用户平台其目的就是为了让使用者有着更好的体验,就是在其规范上有着一定的差异性为了满足各个平台的不同的风格,在应用设计中依据不同的平台做出相应的变化,能够体现出不同系统平台风格的差异性在颜色上的变化也能反映出各个平台的差异性,安卓系统平台比较注重的是简单化、个性化、颜色方面一般选用的是黑白搭配;IOS系统则更加注重的是美学上的完整性,多数采用的是黑、白、灰、灰蓝交替的方式设计;IOS7系统更加的扁平化,更加简单的灰白搭配;WindowsPhone系统相对更加的时尚一些,绚丽一些对于不同的平台之间其控件也是有着各自的差异的,为了更好的跨平台设计,需要根据不同的平台做出不同的改变底部的标签选中安卓系统采用的是标签顶部的颜色标记加粗变化;IOS系统选用的是背景的颜色变化,并且标签为圆角的;IOS7则采用的是扁平化的颜色变化;WindowPhone系统选用的则是动画效果标签这样的额标签设计能够符合这种平台的标签控件特点图标、按钮等也都符合了各种系统平台的风格设计图3-5至3-8所示
3.
2.4扁平化风格的设计与实现如图3-
6.3-3-7所示,客户端的UI采用的是竖向的列表的方式,这样设计可以方便清晰简洁的给使用者展示内容信息,同样的导航菜单选用的也是竖向列表的方式展示的这种设计较为简明,使用者不用过多的进行思考,对导航内容一目了然,假如展示的方式过于繁琐,会让使用者失去更多的操作信心扁平化的设计风格能够让使用者体现导航栏以及内容列表的排列方式,从细节上也能充分的做到扁平化设计具体的设计如下
(1)在配色上选用简单的白色、浅蓝、黑色搭配,字体中不需要衬线,也不需要更多的装饰,没有绚丽的色彩,简简单单的三色搭配就能达到意想不到的效果
(2)点击事件的反馈,当底部的导航被点击时,选中部位的颜色会发生变化,颜色由黑色变为灰色形成对比如图3-6所示的新闻导航,简明个颜色差异形成了请了的视觉对比
(3)图标选用了文字图标的形式和,并且内容列表、导航、各个图标中也没有选用丰富多彩的颜色设计,而是选用的预期寓意对应的字体图标这样做的效果是清晰、易见、并且能够让使用者简单易懂的操作进行较好的人机交互不但和整个扁平化的设计风格相互对应,而且效果较好从性能的角度来看,减少了很多与服务器端的交互请求
3.3数据交互的实现
3.
3.1JSON数据格式JSON是英文JavaScriptObjectNotatinon首字母的缩写,是JavaScript中的一个子集其实一种文本的格式,与编程语言没有关系,因为这个特性能够使其成功的跨平台,跨语言的成为语言数据的通讯载体它的数据格式为键值对(key:value)的方式,数据的格式以数据的键值对的方式存在,在不相同的数据格式中使用逗号将其进行分隔,对象则是以花扩好的形式进行存储的,数据则使用方括号进行存储的如下图3-10所示JSON这样的数据文本的格式,使数据在传输过程中更加具有可读性、轻便型等方便的特点,其所具有的优点如下
(1)使用的是纯文本语言,能够方便的跨平台、跨语言进行传输
(2)数据的格式为轻量级别,不产生过多的冗余信息,非常适用于大量的数据传输情况
(3)基于avaScript,客户端能够方便的进行解析,服务器端对其的解析也是较好的支持
(4)数据易读、可读性较强,根据语言格式能够轻松辨认
(5)数据结构形式简单,方便编写以及解析上述JSON的数据格式的一些优点,但是对于另外一种经常用到的数据格式载体XML,JSON的优点以及缺陷较为明显一些XML作为文档的标记语言有着较好的可扩展性以及可读性然而在服务器端也有着较好的XML解析的编程工具,例如说DOM4,可是对于客户端是Web,经过用JavaScript方式解析,JSON有着先天的优势,因为JSON是基于JavaScript的,而JavaScript对于XML的解析还是需要基于Dom结构的另外,JSON在数据的传输上也有着较大的优势,XML语言的格式决定着严格的闭合标签的必要性,这样能使数据大小相同的JSON以及XML中,XML的有效数据相对于JSON的有效数据较小所以,JSON数据在传输效率上要明显的高于XMLJSON的缺点也是较为突出的,通过JSON的数据格式就能够看出,JSON的可读性要差与XML语言同时JSON的数据核实也没有相应的命名空间基于以上的分析,JSON在数据的传输方面更加的方便,性能较高基于这一方面的考虑,在客户端以及服务器端的数据交互中选用了JSON的数据格式
3.
3.2客户端跨域请求方案浏览器对于JavaScript的XMLHttpRequest}2请求有着一定的安全性限制,禁止XMLHttpRequest进行跨域的HTTP请求简单的说a.com下的JavaScript不能够对b.com的数据进行请求具体的跨域限制如表
3.2所示对于以上的安全策略,当下有如下几种的解决方式
(1)后台proxy方式加入a.com下的javascript对b.com下的数据进行跨域访问,实际上是访问的a.com下的代理页面由于此方案中需要啊com服务器端进行代理设置,不能保存session信息
(2)iframe方式,此方式经过隐藏的JavaScript创建一个iframe进行跨域的请求
(3)on-Demand方式,事实上这样的方案是将动态的script进行创建实现的,浏览器虽然能够拒绝来自XMLHttpReques的跨域请求,但是能够允许script的动态跨域请求,因此能够通过动态创建script标签进行跨域请求
(4)HTMLS的postMessage方式,HTML_5中有的新特性能够在不同的HTML文档中传送消息功能经过以上的分析决定选用on-Demand的方式进行解决跨域访问问题,JSONP就是利用这个原理实现的,用于跨域的通信的解决方案JSONP能够解释为有填充的JSON,JSONP当通过script数据请求,需要带有一个callback作为回传的对象,服务器端将需要传送的JSON数据封装给callback并发送给客户端具体的程序代码实现如下服务端代码:
3.4基于PhoneGap跨平台移动端实现
3.
4.1PhoneGap平台构建PhoneGap框架的主要作用是在使用Web技术进行客户端代码开发与原生的安卓系统或者是IOS系统之间的衔接通过使用PhoneGap能够有效的利用现在的Web技术前端,来完成跨平台的主流技术移动应用程序的开发工作根据PhoneGap框架中官网所提供的的技术帮助信息,在PhoneGapv
3.0之后的版本,PhoneGap框架的安装需要在Nodejs平台下进行npm机制管理,所以,安装PhoneGap框架之前需要先进行Node.js的安装
1.安装Node.js平台首先要进入Node.js的官方网站进行最新版本的Node.js软件下载此软件的安装与正常的windows下的软件安装方法相类似,安装方式较为简单,打开所下载的文件,按照安装指示步骤进行安装完成就可以打开软件进行系统命令行输入“node-v”命令进行安装结果鉴定,假如命令中能够正常的显示所安装的版本信息,则表示Node.js软件在该机器中已经安装成功;如果命令行中出现相关的错误提示信息,就需要对命令行中所出现的问题进行一一排查,在解决完所出现的问题之后进行重新的安装Node.js,安装完成之后就能够进行下面步骤的操作因为目前的Node.js已经集成了npm,所以,这里这里就不需要对此机器上另外的安装npm支持
2.安装PhoneGap框架PhoneGap框架的安装使用npm机制进行管理,这需要在软件开发所用的机器上以命令行的方法进行安装将命令行打开,键入安装命令“npminstall-gphonegap”可以进行安装,软件的安装界面如图3-11所示当软件安装完成之后就可以键入命令“phonegap-v”进行检查,假如命令行中显示PhoneGap软件的版本信息,就表示PhoneGap已经安装成功,能够进行下一步的操作;假如命令行中出现错误信息的提示,就需要进行检查以及排除所显示的错误,按照提示步骤进行重新安装图3-11PhoneGap安装界面图
3.创建PhoneGap工程当PhoneGap软件安装完成之后,就能够使用命令行键入创建命令创建PhoneGap工程依据PhoneGap工程能够生成各种移动开发平台的开发工程,并在相应的环境中能够进一步的个性化修改以及制定
3.
4.2PhoneGap跨平台应用在上文中对PhoneGap框架创建了跨平台应用程序,在此应用程序中兼容各种不同的平台,能够在不同的应用平台中运行程序然而不同的系统平台运行的仅是基于HTML_5的Web应用,基于Fin设计风格的移动客户端的应用已经设计完成,现需要将Web的应用兼容到PhoneGap应用中经过PhoneGap框架构建的移动端的应用,有一个名称为www的文件夹,该文件夹下就是嵌入的Web应用但是在不同的应用平台下,www文件夹还会出现不同系统平台的Web应用程序目录将会不停的复制www文件所以在我们修改Web应用的时候,仅需要对应用下的www文件进行修改,不需要对各个平台文件进行修改将Web应用嵌入到PhoneGap框架之中进行应用程序打包,然后经过cll进行编译,打包至手机端就实现了Web程序应用以及PhoneGap应用的融合并能够通过以下程序命令进行实现这样就把Web应用创建完成,在IOS系统以及安卓系统手机上运行的效果如3-
11.3-12所示图3-12HTML5cms在nexut4运行图图3-12HTML5cms在iphone5运行图
3.5本章小结在本章中提出了基于HTML5的内容风格展示,设计了扁平化的风格和相应式的设计,以及多主题的风格,其中的主要技术是基于CSS和HTML5技术另外提出了服务器端和移动客户终端轻量级的数据交互方案最后基于PhoneGap技术实现了WebApp和各种移动终端设备平台之间无缝融合第四章推送系统设计和实现
4.1系统服务端设计实现
4.
1.1表现层设计与实现表现层在三层构架之中的最上一层,这一层直接与客户端进行信息交互这一层负责对客户端请求接收,并且能够解析客户端的接收请求,并且与业务层进行数据交互,获取到交互信息后返回客户端,因此完成了这一层的数据请求系统中的表现层选用的是SpringMvc技术,相对传统的Struts
2.0具有着更加开放的开发效率、更低的学习成本、更加好的运行效率SpringMvc是基于Spring为基础,基于MVC模式,具体的实现方式见图4-1所示图4-1springMVC工作机制移动客户端所发送的请求后,首先一个提示点是Spring的DipatcheroDipatcherServlet经常是单一为例,作为前端的控制器负责将数据请求发送到不相同的SpringMVC控制器中,其中的代码实现是在web.xml配置中Dipatcher的Servelet,具体配置如下DispatcherServlet的配置完成后,还要将那些URL进行制定,有DispatcherServlet处理,配置代码如下所示:以上的DispatcherServlet已经进行配置好,所得到移动应用客户端控制后,会对一个或者多个处理器的映射进行查询,获得的请求在下一次转发目标后,处理的机会根据请求中的URL对应到相对应的Controller控制器下面就是Controller中的工作,在spring
3.0加入了注释的配置,能够简单的在一个Action类中进行,加上@Controlle;用来进行对这一类的声明Controller层类在Controller类中能够定义为一个公共的函数作为接口处理,并且每个借口都能够对应到一个url中以上的步骤完成以后就可以进行Controller的客户端接收程序的配置了,然而controller不仅需要请求的接受,还需要将对应的业务逻辑层所获取到的数据传送到Dispather中,然后进行客户端程序交付Controller将数据传送给Dispather是经过ModelAndView进行实现的ModelAndView不仅是连带着数据,而且还是携带着具体的视觉窗口,这就能够知道Dispather将会有那个view进行显示
4.
1.2业务逻辑层设计与实现业务的逻辑层对于持久层以及控制层相对独立,并且位于两层的中间,其目的主要是为了方便对应不同层次设计的需求,并且完成了对具体的业务逻辑层的控制能够起到对持久层以及控制层的连接作用,低层能够对持久层进行调用接口,对不同持久层进行重组,用来对自己所需要的数据进行满足,并能灵活的向控制层提供数据业务的逻辑层也是经过Spring进行相应配置的,每个业务的逻辑层类经过Spring中的IOC进行管理当启动应用程序的时候,通过ContextLoaderListener的监听读取配置中的xml业务逻辑层类,并融入到IOC中,业务的逻辑层注入Spring容器中后,就能够通过相应的控制进行反转得到具体的实体类代码配置如下文所示业务的逻辑层,系统能够实现对具体事务的配置,当业务的逻辑步骤在某一步中出现错误时,就能够实现回滚在一个业务逻辑中能够对应相对不同的持久层的数据操作,这就能够保证业务之间的一致性Spring事实的业务中主要声明式和Spring编写的两类方式,Spring编写,经过使用Bean中相应配置事务声明式就是经过Spring里的AOP框架进行实现的,声明式也存在着两种方法,注释声明以及XML声明经过aop:和tx:进行声明式在Spring
2.0中添加,比如说tx:advice能够定义一个通知,通过aop能够定义其中的一个切面,这种配置方式,更大的简化了XML的声明过程代码配置如下所示
4.
1.3持久层设计与实现持久层在系统设计中的最低层构架,是直接能够与数据库进行交互的一层代替了JDBC对数据库的直接操作,其提供的update、load()、save、delete方法,这些的操作都有Hibernet中的Session对象进行操作的,当语句被执行时,Session会从SessionFactory的缓存中找到相应的SQL语句,再访问数据库作为ORM工具,数据表与类的对映关系是其核心功能每一个表对应着一个类,每一个表中字段都有类中的字段相对应Hibernate中表与类的对应关系是通过XML文件来配置完成的如下所示从上述配置内容中能够看出在User类中进行配置,User与UserExt的关系是一对多,所谓的一对多就是类中的映射,在Hibernet中有多种之间的映射关系,单向的一对
一、单向的多对多、单项的一对多、双向的一对多、双向的多对多、双向的一对
一、单向的多对一从上述关系中能够看出一对多运用的比较多,在我们的内容管理系统中,内容以及栏目都是一对多的关系Hibernate具有的较高效轻便的特点,除了delete、load(、save以及update之外,Hibernate也能提供了本身具有的较好的检索策略以及检索方式检索的方式分为三种立即检索、延迟加载以及迫切做连接检索延迟加载能够将所获取的类的信息延迟到实际的应用当中,然后在获取一对多的类信息时,能够有效的减少加载的类信息代码的实现如下Hibernate的类之间存在着双向的关系一对多、多对
一、多对多等关系,这种的配置关系能够在开发过程中也会带来极大的方便性,但其中也有不合理的地方如当我们需要将某一个栏目删除的时候,其中下面的内容也都全部的删除,在进行内容的更新时,栏目信息也发生了相应的改变面对这样的问题hibernate提供了级联以及是否放弃关系的维护方法(inverse)级联表示当对象发生改变的时候,其关联的对象能够发生改变,级联有以下几种情况none修改对象,不对其关联的对象修改save-update当对象发生改变时保存、更新操作时级联的对象也发生保存、更新操作delete当对象被删除的时候、级联也会被删除all当对象发生一系列的操作时,关联的对象也会同样的发生变化,delete-orphan当前对象被删除的同时也会删除预期解出关系的孤立对象inverse表示该对象是否能够维护两个对象之间的联系,inverse=true”则表示该对象不能维护关联关系
4.2内容管理系统设计与实现
4.
3.1内容管理系统模型的设计
4.
3.
1.1用户模型设计经过研究和分析,内容管理系统中主要的功能可分为内容栏目的管理,管理员管理,日志管理,推送主题管理,权限管理,角色管理,字典项管理,推送主题管理不同的管理员相对有不同的管理权限,如图4-2所示图4-2内容管理系统用户模型图
(1)管理员中主要有三种角色,系统审核员、系统管理员、系统发布人员,系统的发布人员中能够进行添加,删除以及修改内容栏,但是内容栏目信息时需要系统的审核人员之后方能够生效
(2)系统管理员能够进行添加系统发布人员以及系统管理人员,系统发布人员能够添加系统发布人员而且系统管理员能够管理系统管理人员的权限,比如系统管理员,给系统审核员所添加的字典项管理权限,系统的管理人员能够对字典项进行有效的管理
4.
3.
1.2用户角色模型设计系统中所设定的三种角色,能够进行灵活性的扩展配置系统中所默认的系统管理员,系统发布员、系统审核员这三种角色另外,系统的管理员能够灵活的对新角色进行配置,这种方式的实现主要依赖于系统中的权限的管理系统的操作之中,也都会有相关的权限的控制,系统管理员拥有最高的权限,其他的角色管理员权限都能够用系统管理员来配置因此,系统中不同的角色就会有不同的操作权限,能够实现操作中的隔离以下图为例,如图4-3所示用户的角色管理以及用户管理是之间是相辅相成的,当系统中增加一个新的管理员时,就必须选择相应的管理权限,管理员的权限决定于它所归属的角色当其中的角色权限发生改变时,管理的自身权限也会发生变化图4-3用户角色管理用例图
4.
3.
1.3栏目和内容模型设计本文中所实现的内容管理时,为使内容的完整性、正确性的保证,采用的内容审核以及内容的发布设计系统给的发布员能够对栏目以及内容进行管理,其中包括修改、删除,内容和添加栏目,但是这些改变是不能够真正的体现到移动客户端程序中去的,只能是当系统审核员对栏目以及内容修改审核完成以后,移动客户端才能够看到栏目以及内容的变化栏目以及内容的发布,修改以及审核分离,能够保证系统中正确的、安全的内容,以增加系统中的容错性如图4-4所示图4-4内容和栏目管理用例图
4.
3.2内容管理系统对象实体的设计基于内容的管理系统进行如下分析,能够得出内容管理系统对象的模型主要是由几个部分组成,用户对象,栏目对象,内容对象,管理员对象用户能够通过查询栏目信息以及内容信息,并进行订阅具体的栏目
[10]管理员管理用户、内容对象以及栏目一个栏目下有很多个内容的对象用户以及管理员其实都属于人员,并且有比较相似的对象信息,能够用统一的模型实体进行表示,但是有一个是否是管理员的表示进行区分用户的模型选用了两个用户的对象,一个是扩展的用户对象,另一个是基本用户的对象两个对象是一对一的关系,基本对象的类管理中常用重要的用户信息,扩展对象类管理较为不常用的用户信息如图4-54-6所示图4-5基本用户对象类图4-6扩展用户对象类栏目信息的具体的对象模型是基本栏目对象类以及扩展栏目对象两大部分,其中,基本的栏目对象模型主要包括栏目的权限,副栏目,子栏目等等信息,然而栏目的扩展对象类又包括有名称,审核步骤,栏目图片等信息如4-74-8所示图4-7基本栏目对象类图4-9扩展栏目类对象内容信息的具体对象模型主要包含有内容的基本类信息,内容的扩展类信息,内容文本类信息基本的信息主要含有ID阅读量,直属栏目等信息内容的扩展类信息含有时间,图标等信息内容文本类包含有内容的文本信息如图4-104-114-12所示
4.3管理界面设计目前,大多数的网站页面的设计都在使用像素为960的宽度设计,这样能够给所有的移动客户端用户带来较为统一的用户体验960像素的宽度设计主要是满足笔记本的用户宽度,对于具有较高分辨率的PC来说,网页的两边会多出一些空白的地方对于移动客户终端设备访问则会有很多的不便性为了方便系统管理员在不同的设备中方便进行系统管理,需要进行一个响应式,针对于各个的分辨率都会有较好的用户管理界面体验
4.
3.1管理界面设计分析本文所要实现的是一个具有内容管理的系统,内容管理的界面主要是为栏目提供内容,用户的管理工作以及相关的系统配置所以,在内容管理的界面设计上,简单明了以及清晰的设计是在实现具体的遵循原则针对于本系统中的适用性,提出了一下几点设计原则
(1)做设计之前需要进行需求分析在对UI开始设计之前,确保系统的功能,将所有的细节都考虑清楚然后在去做相关的界面设计这样会减少需求的变化,相应的工作量也会大大等变多
(2)采用较为友好的人机交互的方式人机交互设计一个UI的设计必要的条件,也算是UI设计能否成功的重要条件在进行UI设计时需要遵循使用的习惯,并且不要轻易的在用户的交互上做创新设计,除非是创新点具有更加合理的设计想法较好的人机交互界面设计不仅能够给用户带来方便性、易用性、更加重要的是能够很有力度的吸引客户然而作为内容管理系统的管理界面需要以使用者作为基础,才能够设计出对管理员展现内容信息全面有简洁,管理员对信息的管理较为方便的系统3设计需要有正确的引导性相对于专业设计人员,系统的管理员往往不具备很好人机交互基础而且一个管理员需要做的是对整个系统的管理,如果每一个功能操作都需要具体的培训才可以完成,会造成极大时间浪费所以设计一定需要方便的引导管理员去操作,每进入一个模块,只需要根据相应的界面提示便可以自主的操作使用这可以通过一些图标,颜色搭配,视觉效果来实现
[11]4一致性原则在设计中需要遵守统一的设计规范,不仅仅是风格,每一个细节,如图标、按钮都需要做到
4.
3.2管理界面设计风格如下图4-17所示,内容管理界面的UI导航栏之中,采用的是竖向列表的方式,如此的设计能够清晰便捷的向使用者展示用户的信息内容,与此相同二级菜单所采用的也是竖向列表方式如此的设计能够简单清晰,使用者不用过多的考虑就能够对管理信息一目了然,假如系统中显示的过于繁琐的展现,使用者将会失去操作的信心管理上的扁平化设计风格不仅能够体现在导航栏的排列方式上,在细节上也充分的做到了扁平化的设计具体的细节上的分析如下导航栏中的配色上也是简单的采用灰色白色的搭配风格,内容列表上采用的是简单的白色灰色之间的搭配,同时也能起到意想不到的效果图标采用的是文字图标的形式,而且用户、内容、栏目,配置的图标也没有采用绚丽的图标设计风格,而是选用与其寓意相对应的图标字体这样产生的效果其优点能够明显突出,清晰的展现出来,并且具有简单易懂的良好性人机交互这样不但能与整个设计目标扁平化风格相互对应,而且效果较好并且从性能上的角度来讲,减少了与服务器端的交互请求事件点击会产生反馈,当事件点击发生时,屏幕上背景颜色能够产生变化,形成明显的对比如图4-13所示,当导航中的某一处被选用的时候,字体图标的颜色发生变化,变成天蓝色内容列表中,当某一处被选中的时候,背景颜色会变成浅绿色通过颜色的差异性以及视觉上的对比,从而能够用户进行反馈各个层之间的关系较为清晰,如图4-14所示,内容的主题以及导航栏之间选用的是左右的形式布局,内容的主体中具体的内容和操作主要选用的是上下方式的布局,这种布局,画面简单具有层次感关系表又比较清晰与此同时导航之间在设计上也有了明显的层次感这种设计不仅使层次化的分为了一级,二级,并且在系统管理者来讲也会有着更好的用户体验的
4.
3.3管理界面响应设计内容管理界面主要是适用于不同的分辨率移动终端设备,这样能够给管理证带来极大的方便性,管理的界面层次之间能够划分为两大部分,内容以及主体导航栏是管理界面中的重要组成部分,其作用是引导管理员去执行工作但是,在响应式的设计中,面对不同的分辨率的设备,能够保证导航的使用性具有一定的难度针对这样的难度,本文提出了以下的设计方式
(1)仅仅显示高级的优先内容对于较小的屏幕尺寸的移动设备,就需要对导航栏进行重新的构建,仅仅显示几个高优先级的栏目
(2)用创造力进行优先的空间进行处理对于不同大小的移动设备,能够对UI界面进行调整,用来适用可以使用的空间,使用户在视觉上以及感觉上保持相对一致,有着访问同一个网站的用户体验
(3)使用下拉的菜单,在屏幕的左上角增加一个图标菜单,当用户的图标被点击的时候第一个菜单内容层展开,当其中的一个栏目被点击的时候,下一个内容逐渐的被展开这就能给使用者一个比较清晰简明的内容导航
(4)为导航栏更换位置,可以选择用分布式的导航以及迎客的方式来解决导航管理界面的主要内容管理部分,通常内容的管理部分所涉及到的模块以及空间较多,配置、列表、操作等等,面对这种情况,响应式的设计中能够保持内容管理部分的易用性在设计中的难点,面对这样的难题,提出了以下的方法
(1)选择优先的内容管理,面对较小的移动屏幕设备,可选择性的显示需要管理操作内容
(2)使用较多的按钮,为了使小屏幕的移动终端设备具有可配置性,能够使用更多的按钮来协助管理员所获得的全面的内容管理
(3)页面流失的布局,依照不同的设备的屏幕尺寸,能够选用流失布局的方式来保证页面的美观性根据内容的主体以及导航栏部分的设计方式,进行以下内容的设计以991为中介值,导航栏主要是分为隐式和显示,而且导航栏在小屏幕设备中选择的是内容优先,提供下拉菜单隐式菜单为一个导航的图标,当图标被点击的时候导航栏会显示出来内容主体的列表部分会优先选择显示,然而表单的页面所选用的是流式布局在PC客户端,屏幕尺寸的大小为991,进行左侧导航栏显示在移动客户端这时屏幕尺寸显示会较小,左侧的导航栏将会隐藏,管理内容的响应也会减少,这就是内容流式的布局效果当点击的左上角或者是向左上角活动时候,导航栏便会显示出来效果,如图4-154-164-17所示
4.4本章小结在本章中首先是对内容管理服务器端的设计提出目标要求,主要包括服务器端的高效、可扩展、能伸缩的设计原则并且按照这些原则,主要是基于分层的实现轻量级、低祸合等服务器端的架构而且给出了内容管理的系统对象模型的实现最后,设计实现面向多个屏幕设备的响应式的内容管理界面第五章推送服务设计信息推送服务是与客户端主动信息查询不同的,而是服务器端主动向客户端发送消息的一种服务目前系统的推送服务有着较为广阔的应用前景,以及研究方向经过服务器端的主动信息推送,能够有效的帮助使用者更加方便的获取到感兴趣的信息,大大的减少了搜索阅读所耗费的时间系统能够针对使用者推送具有个性化的新闻信息,提高使用者的体验
5.1推送信息技术分析及设计
5.
1.1安卓系统推送在安卓系统平台中实现信息推送,与IOS系统不相同,随着信息推送技术的不断成熟,现在有好多的解决方式这几种解决方式都是基于以下的几个原理
(1)客户端的轮询,移动客户端能够每隔一段时间向服务器端发送一个HTTP的请求,进行查询服务器端是否有新的消息推送这一方案,对于轮询的频率设计是重点,假如轮询的频率相对较低,就会导致系统消息的接收延迟假如轮询的频率过高,相对应的网络带宽以及耗电量的占有率也会提高
(2)sms推送方式,通过拦截移动客户端的SMS消息,进行获取推送消息这种的方案能够很好的实现推送消息的实时性,但是SMS信息主要是通过通过移动运营商发送,这需要向运营商缴纳一定的费用的,成本会较高
(3)通过使用TCP的长连接进行消息推送移动客户端和服务器端建立了一个长连接,服务器端能够通过Push的方式给移动客户端发送消息这种方案能够有效的改善轮询中多带来的网络带宽以及高的耗电量问题这一方案唯一的缺点就是和IOS系统推送服务器相比较,较为困难的实现推送服务经过上文的分析,能够发现最后一种方式较为合理,目前较为成熟的信息推送技术基本都是使用最后一种的方案类似于IOS系统中的APNS谷歌也能够提供出云消息信息服务,GCM,其实原生的,简单的性能具有方便性但是由于服务器的关系国内的网络环境中对谷歌不能很好访问,这就使得GCM方案不具有可用性随着国内这几年消息推送技术的飞速发展,出现了一批信息推送服务能够代替GCM的功能,如百度云推送对于基本的信息推送服务,他们作为免费的三方平台有着很好的推送服务长连接中如果采用较为传统的Socket方式,耗电量会较高,功耗消费较大的缺点目前出现的一些通信协议能够便捷的用到信息推送领域,主要以XMPP以及MATT为主,其中GCM底层的通信就是基于XMPP协议进行封装的,其中是Jabber发展而来的MATT是较为轻量级的,并且具有简单的扩展性,基于订阅/发布模式的传输协议基于MATT协议推送信息耗电量较小、消耗的网络资源相对较少,并且具有高度的可用性但是目前的MATT协议传输还是不够成熟,有一定的缺陷,实现起来也是比较复杂的XMPP协议基于Jabber基础之上进行开发设计的,目前该协议技术也是比较成熟的,但是其流量的消耗以及电量消耗相对于XQTT也是很高的,并且基于XML的方式数据也很复杂,冗余高根据GCM网络的不稳定性,我们采用的是JPusp作为系统推送服务平台进行的信息推送实现其推送的协议主要是选用ed自定义二进制协议,减少流量的消耗其中选用的是长连接方式能够保证低电量的消耗,实时性的信息推送的优点如图5-1所示
5.
1.2IOS系统推送IOS系统实现的信息推送比较简单,自从iPhone
3.0开始,苹果操作系统为信息推送实现提供了服务器推送APNS,开发者只要把消息所要推送的消息推送的目的iPhone设备发送到APNS服务器中APNS服务器会从自身的iPhone设备注册列表中找到所要推送的iPhone设备,并且能够将消息发送到每一个应用程序中,APNS服务器也会维护一个deviceToken,服务器向APNS以及iPhone保持一个长连接,用来维护客户端以及服务器之间的联系经过上面的分析,内容关系系统管理的推送流程如下
(1)首先需要将内容管理应用注册到APNS上,并能够获取相应的deviceToken
(2)移动客户端安装内容管理系统应用程序后,系统会向APNS访问并且获取自己的token,同时APNS也会将每一个移动客户端的token发送给内容管理系统的服务器端
(3)系统管理内容向APNS发送所需要发送的内容信息,设备中的token发送到APNS则会根据token与其所对应的移动客户端程序建立连接,并且将信息传送过去
5.2推送信息策略分析目前消息推送主要是让用户能够获得实时性的新闻消息的较为直接的方式不过使用者每天都会大量的APP推送信息,假如所推送的消息不是有效信息,使用者将会把信心视而不见,甚至有可能当成是垃圾信息处理这样的信息推送效果是会适得其反,因此一个较好的推送策略是实现信息推送的一个必要条件
[12]内容管理系统中的推送策略主要是基于订阅/发布模式与统计用户偏好的主题并且给予一定的推送模式第一会根据不同的信息分类,并且设计种类繁多的主题使用者可以根据以上内容,定制自己满意的信息,同时也能够随时的修改自己所订阅的主题服务器端就会根据不同的信息主题给用户发送不同的信息,服务器端也能根据用户的访问主题的次数不同,得到用户所喜欢的主题,并且给予推送因而实现个性化的信息推送按照以上的信息推送策略,推送的信息系统需要遵守系列规则
(1)可变性的主题,根据用户的不同,服务器端都会存在相应的主题使用者的需求是不断变化的,确保服务器端主题的良好以及可变性,用来满足用户需求的变化确保客户端主题的可变性,用来保证用户能够随时的选择感兴趣的主题
(2)多样性的主题,确保主题的多样性,用来满足对用户不同信息需求主题的细分主要是有利于更加明确的用户兴趣爱好,并且保证信息推送的有效性
(3)主题之间的交叉,互斥决策在主题之间有交叉时,会依据信息的相关性来分析,并且根据分析的结果进行相应的决策当主题之间存在相互斥性时,会根据互斥性的分析做相应的决策
5.3推送信息服务的实现
5.
3.1推送信息流程信息推送服务的实现主要包含以下几个步骤
(1)服务器端所制定的内容时,会为每一个内容设置相应的主题
(2)使用者能够任意定制自己喜欢的主题,主动要求服务器端推送与该主题相关的内容
(3)根据用户所浏览的内容信息以及打开的推送信息,对用户偏爱进行统计
(4)服务器端按照主动的定制以及统计得到用户的偏爱信息并向用户推送信息如图5-2所示
5.
3.2推送信息服务核心程序用户接收推送消息图
5.3用户接收推送消息代码统计用户是否查看接收到的推送信息:图
5.4统计用户是否查看推送消息代码
5.4本章小结在本章中就当前的推送现状进行了系统的分析,之后按照推送技术的现状和跨平台内容管理的而需求,提出了基于主题以及用户的推送策略,用户能够制定出自己喜欢的主题,服务器端也能够按照用户的预览记录得出偏爱的主题,并且主动的推送到用户终端第六章总结与愿望
6.1本文总结随着移动互联网技术的快速普及,网民越加习惯经过使用移动端互联网设备进行获取新闻资讯然而在移动智能终端设备领域呈现出多个平台共同存在的局面基于这种状态,本文中主要的研究成果如下
(1)本文中提出了一种跨平台的移动移动内容风格展示FinFin风格的扁平化设计,响应式设计,流失布局,多主题的风格,并且基于CSS3以及HTML_5技术实现了在不相同的屏幕分辨率下展现出的不同的效果满足各种设备屏幕分辨率下的最好的用户体验
(2)内容管理设计的服务器端的构架主要依赖于分层的思想,基于Spring注入依赖以及事物管理对三层类型进行管理,有效的降低了三层之间的祸合性持久层选用一定的优化策略,对数据库的访问进行优化
(3)基于用户模式以及主题模式的推送策略用户能够订阅自己较为喜欢的主题,服务器端也能够根据用户的阅读推送记录以及浏览记录获取到用户偏爱的主题,进行有效的信息推送并且基于APNS以及JPush实现不用平台的信息推送服务
(4)基于PhoneGap实现响应式的WebApp与各种移动终端智能平台之间的无缝融合
6.2研究展望本论文设计了一个基于HTML_5的跨平台移动内容管理系统,真正的实现一个应用使用在不同平台随着互联网技术的高速发展,互联网技术的快速更新,用户的需求也在不同的变化,为了更好的适应这样的变化,系统还要进行进一步的完善后续的工作主要包含有以下几个方面
(1)制定出更多的UI界面风格的样式,目前变化较快的不仅仅是技术,还有人机交互方面、风格设计方面也在快速的变化着根据时代的改变,制定出更多的主题风格的客户端UI界面风格,满足使用者的审美、操作习惯
(2)制定出更加完美的个性化的信息推送技术现阶段的信息推送政策主要是局域主题模式以及用户模式,采用阅读发布以及统计用户的偏好主题策略,在今后的工作中需要更多的开发用户的预览信息,经过精确的算法进行使用者的行为分析,给予用户更好的个性化的信息推送方案
(3)提高服务器端的并发能力,跟随着用户的不断增多,对于服务器端的并发能力的需求会越来越高,经过采用分布式的框架,数据库的缓存能力等技术提高服务的并发能力,组建一个较高性能、并发性高、分布式服务端的平台构架参考文献
[1]付亮,于立娟,陈幽君.2012-2013年移动互联网发展趋势综述[[J].互联网天地,201301:1-
6.
[2]余晓晖.移动互联网的发展与思考[[J].电信网技术,200826:21-
26.
[3]张玉晴,黄瑾聘.基于HTML_5的跨平台移动应用关键技术的研究与实现[[J].工业控制计算机,2013}03:56-
58.
[4]CHARLANDALEROUXB.MobileApplicationDevelopment:Webvs.Native[J].2011,545:49-
53.
[5]黄永慧,陈程凯.HTML_5在移动应用开发上的应用前景[[J].计算机技术与发展,2013,07:207-
210.
[6]刘亚魁.基于HTML_5的新闻类移动应用框架设计与实现[D].北京:北京邮电大学,
2013.
[7]刘华星,杨庚.HTML_5一一下一代Web开发标准研究[[J].计算机技术与发展,2011218:54-
58.
[8]符石.常用HTML_5移动应用框架[J].电脑知识与技术,201310:2304-
2305.
[9].冯永亮.HTMLS本地数据存储技术研究[J].西安文理学院学报:自然科学版,2014173:66-
69.
[10].冯恺,双揩.Web实时通信服务器Push机制的研究[[J].
[11].FetteIMelnikovA.Thewebsoeketprotocol[J].
2011.
[12].W3C:2014年推出HTMLS标准,2016年推
5.1版[OL]http:!Jwww.iteye.comlnewsl2611
[13].IDC.WorldwideSmartphoneShipmentsTopOneBillion}UnitsfortheFirstTime[OL]httpaiwww.idc.com;`getdoe.ispcc}ntai}WrId=poUS24645514
[14].IDC.WorldwideSmartphoneMarketGrows
28.6%YearOverYearintheFirstQuarterof2014[OL]httpa/www.idc.cam/getdoc.jspcontainerld=prUS4823414
[15].S.AllenVGrauperaVandL.LundriganProSmartphoneCrossPlatformDevelopment:iPhoneBlackberryWindowsMobileandAndroidDevelopmentandDistribution1stEditionAppressNewYorkApril
2010.
[16].CorralLSillittiASucciGGaribboARamellaPEvolutionofmobilesoftwaredevelopmentfromplatform-Specifictoweb-Basedmultiplatformparadigm.ACMSymposiumonNewIdeasinProgrammingandReflectionsonSoftwarepp.181-
183.
2011.
[15].AndreCharland,BrianLerouxMobileapplicationdevelopment:webvs.nativeCommunicationsoftheAGMv.54n.5May2011
[16].潘晓梦,邓建华,苏厚勤一种跨平台移动应用方案的研究与实践[[J],计算机应用与软件
[17].LuisCorralAlbertoSillittiGiancarloSucciMobileMultiplatformDevelopment:AnExperimentforPerformanceAnalysisProcediaComputerScience
[18].I.SinghandM.PalmieriComparisonofcross-platform-mobiledevelopmenttoolsIDT:MalardalenUniversity
2011.
[19].LunnyA.PhoneGapBeginnersGuide[M].PacktPublishingLtd
2011.Page233-262
[20].张长学,张伟,董智明.移动推送技术面面观[[J].移动通信,2011355:21-
27.
[21].SunL.OverviewandEvaluationofNotificationsSystemsforExistingM2M[J].
2014.
[22].WarrenIMendsASriramaSetal.PushNotificationMechanismsforPervasiveSmartphoneApplications[J].PervasiveComputingIEEE2014132:61-
71.致谢11。