基于html5的跨移动平台的新闻阅读应用Word文档格式.docx
《基于html5的跨移动平台的新闻阅读应用Word文档格式.docx》由会员分享，可在线阅读，更多相关《基于html5的跨移动平台的新闻阅读应用Word文档格式.docx（51页珍藏版）》请在冰豆网上搜索。
1.2CSS3相关新特性介绍6
1.3jQueryMobile框架介绍7
1.3.1综述7
1.3.2组件7
1.3.3事件与方法9
1.4Spring框架9
1.5Hibernate框架9
1.6RSS技术10
2跨移动平台的新闻阅读应用的可行性分析11
2.1.可行性分析11
2.1.1.技术可行性11
2.1.2.操作可行性11
2.1.3.经济可行性11
2.2.可行性分析结论12
3跨移动平台的新闻阅读应用的需求分析13
3.1系统性能需求13
3.2系统功能需求分析13
3.2.1.注册与登录模块13
3.2.2.订阅管理模块13
3.2.3.浏览用户订阅新闻模块14
3.2.4.管理订阅新闻模块14
3.2.5.新闻评论模块14
3.3跨移动平台的新闻阅读应用的DFD图15
3.4跨移动平台的新闻阅读应用的ER图16
3.5用例的实现与说明17
3.5.1.用例图示17
3.5.2.用例规约17
3.6时序图19
3.6.1.注册时序图19
3.6.2.登录时序图20
3.6.3.浏览条目时序图20
3.6.4.管理订阅时序图21
3.6.5.新闻评论时序图22
3.7开发平台22
3.8应用运行环境22
3.8.1.服务器端硬件与软件环境23
3.8.2.客户端硬件与软件环境23
4跨移动平台的新闻阅读应用的概要设计24
4.1应用的系统结构与开发模型24
4.1.1.B/S系统结构24
4.1.2.MVC开发模型24
4.2应用系统结构图25
4.3数据库设计25
4.3.1.数据字典26
5跨移动平台的新闻阅读应用的详细设计29
5.1应用结构图29
5.2功能实现30
5.2.1.注册模块与注册模块30
5.2.2.管理订阅模块31
5.2.3.浏览订阅模块34
5.2.4.管理条目模块38
5.2.5.新闻评论模块40
6项目测试42
6.1单元测试42
6.2集成测试42
6.3系统测试42
6.4响应性能测试43
项目总结45
参考文献46
致谢47
前言
研究背景和意义
本文主要探讨跨平台新闻聚合阅读应用在移动中的重要地位。
随着信息爆炸时代的到来，个人获取信息的渠道异常丰富，各种渠道提供了不同的信息，如果没有统一的管理工具，要查看新闻信息必须查看信息源，同时要从一大堆信息中分辩哪些是旧的，哪些是新的，这会导致产生大量重复性的工作产生，如果要获取多个信息源的新闻，那重复的工作会更加的多。
但是如果使用信息聚合应用，就可以把多个信息源集中起来，统一浏览与管理，只要查看这个应用就能查看到最新的新闻资讯，并且可以查找以前看过的内容，实现个人信息源中心的作用。
现在移动互联网的资费越来越低，很多人都通过移动终端来获取信息，这的确是一个非常便利的手段，因为这可以十分便利地联网与别人交流或者获取资讯。
因为移动平台的激烈竞争，诞生了像iOS、Android、WP7等不同的移动操作系统，这些系统给用户提供的更多的选择与不同的体验，却增加了开发人员的负担，因为想要更多的用户就要兼容更多的系统，这样在开发和升级上的工作就会大大增加。
近几年快速发展的HTML5给更好的跨移动平台应用提供了技术的支持，现在HTML5提供了丰富的功能如：
视频标签、画布、离线支持，加上越来越强大的CSS3，在开发跨移动平台应用时能够使开发人员更加专注于功能的实现，而不用顾虑太多的平台相关兼容，所以使用HTML5相关技术在开发跨移动平台应用时是个不错的选择。
研究方法与要达到的要求
使用jQueryMobile框架开发一个Web应用，通过使用jQueryMobile框架API提供的功能模块和方法事件实现较丰富的跨移动平台新闻阅读应用，另外使用HTML5与CSS3实现增强性的功能，提供更好的用户体验。
同时测试该应用在不同平台上面的表现效果，以此测试应用跨平台性的适应性，探讨跨移动平台应用的开发方向。
该Web应用要完成任务设定的基本要求，和部分考虑实现功能，能够在主流移动平台如：
Android和iOS上运行良好，同时有较好的用户体验，以此证明基于HTML5的jQueryMobile开发的应用能够胜任跨移动平台开发的任务，能够提供较好的平台适应性。
图0-1效果图
与国内研究对比
国外知名的新闻阅读应用《Googlereader》和国内领先的新闻阅读应用《鲜果阅读》都有推出移动版的应用，以下就这些应用与本应用的异同做些简单分析：
1.跨平台性：
《Googlereader》的移动版本有移动网页版和客户端版，移动网页版的功能有所精简，比较简单。
《鲜果阅读》的移动版本也有移动网页版和客户端版，但是移动网页版更加简单，只实现了基本的功能。
本应用基于移动网页提供了一致的功能体验，但是需要较新的浏览器支持。
2.功能：
《Googlereader》的客户端版功能齐全，同时提供了良好的体验。
《鲜果阅读》的客户端版提供了相对简单的功能，但是有很好的用户体验。
本应用通过较新的HTML5与jQueryMobile提供了较完整的功能与比较好的用户体验。
3.其它：
《Googlereader》与《鲜果阅读》作为商业化应用在浏览器兼容上面考虑更多，所以他们在移动网页上的功能会有所精简，而重点维护客户端版本。
本应用因为研究性的需要，只确保在主流移动平台如Android和iOS上能良好运行，其它一些较老的移动平台和较旧版本的浏览器，在兼容方法可能有所欠缺。
研究范围
围绕跨移动平台新闻阅读应用的需求，使用jQueryMobile框架作为核心架构，实现应用基本功能，另外再使用HTML5与CSS3增强用户体验与完成考虑添加的功能。
研究范围集中于实验jQueryMobile的提供的API是否满足跨移动平台应用开发的需要，同时尝试结合HTML5与CSS3进行开发，研究这些最新技术在现有平台上面的适应性。
1相关技术介绍
1.1HTML5相关新特性介绍
HTML5的上一个版本是4.01，发布时间在1999年，这会使人觉得奇怪为什么一个版本间会隔了十多年，其实这是因为W3C在发布4.01版本后就改变研究方向到XHTML，但是因为XHTML发展的过于超前和规范太严格，所以没被业界接受，反而是Opera、Apple的浏览器厂商在HTML基础上面发展的新版本受到欢迎，后来W3C加入到HTML新版本的开发上面，这就是现在的HTML5，这个新版本有如下几点新特性：
1.简单的声明
之前的HTML4.01文件类型声明：
<
!
DOCTYPEhtmlPUBLIC"
-//W3C/DTDHTML4.01//EN"
"
http:
//www.w3.org/TR/html4/strict.dtd"
>
和XHTML1.0文件类型声明：
-//W3C/DTDXHTML1.0Strict//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
到HTML5声明文件类型只要如下简单即可：
DOCTYPEhtml>
因为HTML5的一个设计原理就是必须要向后兼容，兼容未来的HTML版本，所以再写一个声明版本的doctype已经没有多大意义，对验证器来说也是一样。
同时HTML5的规范还省略了不必要的复杂性，避免不必要的复杂性。
如<
style>
声明rel="
stylesheet"
后就不必要再声明type="
text/css"
了，因为这两个声明是同样的意思，只要有rel="
就够了，因为这样浏览器就可以猜测出你要链接的是一个CSS样式表。
2.新的有具体意义的标签
header>
（头部）、<
nav>
（导航）、<
article>
（文章）、<
section>
（分区）、<
footer>
（脚本）、这些元素的作用类似于以前的<
div>
（分区）,可以把文档分割为独立的不同的部分，但是新标签有具体的语义上的含义，可以把网页分隔成清晰的独立的模块。
3.新的表单元素
fieldset>
元素把表单内容的一部分打包，生成一组相关表单的字段。
input>
增加新的带有浏览器直接支持插件的类型，提供原生的更好的用户输入体验:
colordatedatetimedatetime-localmonthweektimeemailnumberrange
searchtelurl
增加新属性带有默认的动作事件或者特殊的效果：
autocompleteautofocusformformactionformenctypeformmethodformnovalidateformtargetheightmaxminmultiplepatternplaceholderrequiredstep
4.视频与音频支持
video>
标签定义视频，通过浏览器原生支持MP4、WebM和Ogg三种视频格式，各个浏览器公司对这三种视频支持略有不同。
audio>
标签定义音频，通过浏览器原生支持MP3、Wav、和Ogg三种音频格式，同样各个浏览器对这三种音频支持略有不同。
5.元素拖放
通过设置元素为可拖元素和drag（拖到）与drag（拖放）事件，和相关的动作处理事件，完成网页元素的拖放事件操作，这个也是通过浏览器原生支持的，只需简单的操作就可以完成。
6.画布元素
canvas>
元素是只用于图形的容器，可以通过脚本语言绘制自定义的图形，或者绘制图片文件，它与其它图片元素的区别在于它是通过脚本来实现的。
7.离线应用与数据支持
提供比cookies更安全更快捷的本地存储功能，能够在用户浏览器保存更多的数据。
8.其它
SVG格式支持、位置定位服务、独立线程、服务器发送事件。
1.2CSS3相关新特性介绍
1.强大的选择符：
CSS3的扩展了CSS2.1的基本选择符，它允许在标签中指定特定的HTML元素而不必使用多余的类、ID或者JavaScript脚本，另外增加了全新的伪对象选择符，用来和content属性一起使用，设置在对象前后使设计弹性更大。
2.更丰富的色彩效果：
颜色取值HSL能够设定色调的饱和度和亮度，RGBA和HSLA的参数Alpha可以指定元素的透明度，另外还可以使用transparent指定全透明色彩。
3.多栏布局：
CSS3提供了多列布局的支持，通过指定columns的相关属性，就可以指定列数或者根据列宽动态布局。
4.丰富的背景属性：
CSS3增加了多个背景属性，如background-image、background-repeat、background-size、background-position等，这样就可以在一个元素上添加上不同效果的背景图片，设计更美观的网页。
5.字体与文字支持：
支持将字体文件映射到客户端系统，使的客户端可以使用没有安装的字体样式。
Text（文本）属性有所增强，支持一些文字处理，或者文字效果。
6.增强边框支持：
更详细的边框设置，和原生的圆角支持。
比如：
多色边框、边框背景图、圆角与边框阴影，那样就可以通过简单的代码实现丰富的效果。
7.新增弹性盒子模型：
可以设定盒子的比例或者固定大小，然后就能使各个元素的自适应窗口大小，而且还可以指定布局的取向和顺序，使网页元素的布局更加灵活，更有弹性。
8.媒体查询：
mediaquery可以测定浏览设备的类型和大小，从而编写不同的样式，使网页的平台适应性大大提高，提供更好浏览体验。
9.其它：
边框图片、渐变设计、动画效果、语音样式。
1.3jQueryMobile框架介绍
1.3.1综述
jQueryMobile框架是jQuery面向手机与平板等移动设备开发的核心库，并且提供了完整统一的UI框架，为开发人员提供一个跨浏览器的框架，使得开发移动Web网站或应用更加快捷。
jQueryMobile中的页面都是基于简洁、语义化的HTML来构建，这样可以确保能兼容大部分支持web浏览的设备。
在这些设备解析CSS和JavaScript的过程中，以一种不明显的方式将语义化的页面转化为富客户端页面。
1.3.2组件
页面与对话框
jQueryMobile关于页面提供了如下几种组件：
带有头部栏和底部栏的页面，链接动态载入页面，对话框页面以及体验比较好的页面切换效果，同时提供动态页面后退动作的处理，满意开发移动应用的需求。
工具栏
提供工具栏组件。
可以头部栏和底部栏添加按钮；
不同样式的导航栏；
头部栏和底部栏自动适应页面，显示或者隐藏；
某些页面内容作全屏显示，例如展示图片。
按钮
提供三种颜色主题的18种不同标志的图标按钮，并且可以设置按钮的图标位置、是否带有文字、是否行内按钮，或者一组相关的按钮。
内容格式
提供四种不同宽度的列布局，自动把元素按照比例平铺。
折叠展示的内容，并且可以把相关的几个折叠元素组合成一个集合。
表单元素
提供风格统一的美观的UI的表单元素，可以设置标签和元素在同一行的格式显示，也可以把多个表单元素组和成一个独立样式的表单集合。
列表视图
提供了多种样式可带统计数字的列表：
基本的网格列表、数字列表、分割显示的列表、带分割标题的列表等，提供列表内查询的功能支持。
图1-1jQueryMobile基本组件1
图1-2jQueryMobile基本组件2
1.3.3事件与方法
jQueryMobile对移动设备提供了丰富的事件支持，如：
触摸、虚拟鼠标、改变屏幕方向、滑动和页面状态改变的事件支持。
基于框架的方法就提供改变或加载页面、清除框架记录缓存、显示或隐藏通知信息、显示或隐藏工具栏等丰富的方法，使开发人员使用jQueryMobile开发Web应用更加得心应手。
1.4Spring框架
1.管理容器：
Spring包含并管理应用对象的配置和生命周期，可以配置bean的实例策略与相互之间联系。
委托Spring容器对对象生命周期进行管理，从而使开发人员可以更加注重与业务上的工作。
2.控制反转：
Spring3.0通过一种称为控制反转（InversionofControl，IoC）的技术完成松耦合的需求。
一个对象依赖的其它对象会通过被动的方式传递进来，而不用自己创建依赖的对象。
3.面向切面编程：
Spring3.0还提供了称为面向切面编程（Aspect-OrientedProgramming，AOP）方式的支持，通过分离应用的业务逻辑与系统服务（如日记）实现高内聚，使得对象实现自己的功能，完成业务逻辑就足够了。
4.SpringMVC：
SpringMVC框架是一个全功能的Web应用程序的MVC实现。
通过控制器实现Web应用程序的业务逻辑，加上Spring框架一贯的易用性、扩展性与灵活性，使得SpringMVC能够高效地和其它技术协同工作。
1.5Hibernate框架
基于Java语言的一种对象关系映射解决方案，使得开发人员使用通过面向对象的思维来操作关系数据库。
同时提供HQL查询工具、缓存管理、延迟加载策略、事务管理批量操作等方法。
1.6RSS技术
RSS（信息聚合）是一种描述与同步网站信息的格式。
有些网站提供RSS输出，即把网站最新的内容实时地输出到RSS上面，这样用户只要借助RSS聚合工具就能获取到多个信息源的最新更新，在不访问来源网站的情况下获取网站的的资讯。
2跨移动平台的新闻阅读应用的可行性分析
2.1.可行性分析
可行性分析主要是对跨移动平台的新闻阅读应用的技术可行性、操作可行性、经济可行性进行分析，所指定的解决方案是否可行，能否在规定资源和时间的约束下完成，能否获得相应的效益。
2.1.1.技术可行性
本应用后台技术采取成熟的Spring与Hibernate框架，拥有规范、完整的官方文档与详细的网络教程，加上已经有一定的使用经验，所以能够应用于开发相关功能应用。
HTML5与jQueryMobile是Web最新的技术与新诞生的框架，所有相关资料与经验会比较欠缺，但是可以参考官方详细文档，并通过实验验证效果，所以也可以对这些新技术新框架进行使用，开发跨平台应用。
2.1.2.操作可行性
本应用基于HTML5与jQueryMobile框架开发，框架UI提供了良好的用户体验，并且在主流的移动平台都有较好的适应性。
另外在jQueryMobile的UI的基础上面再增加一定的优化，使框架能满足应用的需求。
良好的用户体验为操作可行性提供了保证。
2.1.3.经济可行性
后台应用的框架Spring、Hibernate都基于开源框架，能免费使用并获得一定的支持服务。
数据库系统采用性能高、成本低、可靠性好的关系型数据库MySQL，能够为数据存储提供较好的支持。
费用支出主要集中于开发与维护人员的工资，以及服务器运行与网络流量的费用。
2.2.可行性分析结论
通过可行性分析，跨平台新闻阅读应用在技术、操作、经济三个方面的可行性都达到要求，具备进行开发的价值，并能在开发完成上线，为用户提供服务。
3跨移动平台的新闻阅读应用的需求分析
3.1系统性能需求
表3-1系统性能需求
主要质量属性
详细要求
正确性
无逻辑错误
稳定性
Web服务持续稳定工作时间≥3天（72小时）
可靠性
有针对异常的处理，防止非法操作
性能，效率
应用响应时间小于等于3秒
易用性
精简操作步骤，相关操作有一定的提示
清晰性
界面条理清楚，操作明确
安全性
保护用户信息
可扩展性
可在当前需求基础之上进行功能上的扩展
跨平台性
可运行在主流的移动平台上
3.2系统功能需求分析
3.2.1.注册与登录模块
为用户提供注册帐号，使之能够登录到系统，以独立的身份使用应用，浏览或者管理自己的新闻信息。
3.2.2.订阅管理模块
用户可以搜索自己感兴趣的新闻，并将该新闻源添加到自己的订阅源中，然后就可以在应用中第一时间浏览到最新的新闻资讯。
同时，用户还可以删除已订阅的新闻源，使新闻阅读应用中的信息符合个人的需求。
3.2.3.浏览用户订阅新闻模块
以列表方式或者图片方式浏览已经用户订阅的最新的新闻，或者订阅源内全部的新闻。
系统还支持用户浏览自己收藏的新闻，或者应用推荐的新闻条目（即用户推荐）。
使得用户可以统一浏览感兴趣的新闻。
3.2.4.管理订阅新闻模块
标记用户已读的新闻条目，用户可以初始新闻条目的阅读状态，另外提供收藏、分享到微博的功能，使用户可以对自己订阅的新闻进行管理，分享感兴趣的新闻，并且通过用户的操作动作，应用汇集关注度高的新闻，进行推荐。
3.2.5.新闻评论模块
用户可以查看某条应用其他用户所给的评论，并能自己发表评论，参与到与其他用户的讨论中，获取比新闻本身更丰富资讯。
3.3
跨移动平台的新闻阅读应用的DFD图
图3-1跨移动平台的新闻阅读应用的DFD图
3.4跨移动平台的新闻阅读应用的ER图
拥有
N
11
用户
1
包含
新闻订阅
新闻源
等于
阅读记录
新闻条目
评论
图3-2跨移动平台的新闻阅读应用的ER图
3.5用例的实现与说明
3.5.1.用例图示
图3-3注册用户用例图
3.5.2.用例规约
表3-2注册用例规约
用例名称：
注册
涉及的参与者：
未注册用户
涉及
升级会员 