美章网 资料文库 互动小说阅读网站设计与实现范文

互动小说阅读网站设计与实现范文

时间:2022-02-18 09:23:03

互动小说阅读网站设计与实现

摘要:

以提高用户体验为目标,分析比较了不同电子阅读方式的兼容性、操作性、美观度、交互性,以互动小说网站设计为切入点,采用HTML互动小说阅读网站是指一个具有交互、互动功能的小说阅读网站。HTML5是超文本标记语言的最新标准,是能将Web从内容平台推向标准化的应用平台。使用HTML5+CSS3+JavaScript搭建一个可跨平台使用的互动小说阅读网站,在代码的编写上,摒弃了旧标签而使用了新的更加语义化的标签,而在体验上,比一般的小说阅读网站多了触屏滑动等交互功能。这个网站不仅能够在计算机平台上正常阅读,并且能够在移动端拥有更好的体验。

关键词:

HTML5;交互式设计;电子阅读;数字出版

近年来,信息技术的不断发展带动了很多学科都在向信息技术靠近,并以信息技术为载体,衍生出无数新生事物,渗透到人类社会的各个领域。数字出版作为一支不可忽视的力量开始与传统出版形成争锋之势[1]。网络环境下,小说阅读网站早已兴起。小说阅读网站,即提供小说阅读的网站,其阅读方式从最初提供简陋不美观的在线阅读,到打包制作成PDF、CHM或EXE格式等对操作系统有要求,或者是需要另外安装阅读器软件,这些都增添了出版商的痛苦,并使读者不方便,不能感受到良好的阅读体验[2,3]。于是人们迫切希望在电子阅读上,技术能有大的突破,带来崭新的体验。作为网络上应用最为广泛的语言——HTM(LHyperTextMark-upLanguage,超文本标记语言或超文本链接标示语言)的最新标准是HTML5[4,5]。该标准于2008年草案,将在2014年推出正式版。HTML5旨在将Web从内容平台推向标准化应用平台并统一各大平台阵营的标准,虽然目前在真正意义上实现HTML5可能会需要很长时间,因为该标准还在制定、开发、讨论和实验阶段,但它无疑会给Web标准的发展带来巨大飞跃。“CSS之父”HakonWiumLie认为,HTML5与CSS3将是全球互联网未来发展的趋势[6]。本文主要研究使用HTML5技术,并结合CSS3和JavaScript,设计并实现一个可跨平台使用的互动小说阅读网站。

1现状分析

1.1电子阅读方式比较广义上来说,电子书就是将内容数字化的图书[7],当前电子书阅读方式主要分为两种形式,即在线阅读方式和离线阅读方式。在线阅读主要是在线阅读网站形式的电子书,现在很多网站都有小说阅读平台,小说类型繁多,而且多由Flash做出电子书,离线阅读主要是使用其他电子文本形式和独立APP应用形式的电子书[8]。表1是对当前电子阅读方式从兼容性、操作性、美观度、交互性四个方面的比较。从表1可以看出,在线阅读网站形式是最有跨平台潜质的,只是需要一定的改进,改进的方法则可采用HTML5。使用HTML5规范开发出来的东西可运行在跨平台、跨浏览器的环境中,而且会更快,开发和维护都很经济。

1.2HTML特点HTML是一种标记语言(markuplanguage),自90年代初被引入到互联网以来就一直在不断地发展。其主要特点如下:1)简易性。HTML版本升级采用超集方式,从而更加灵活方便。2)可扩展性。HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。3)平台无关性。虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上。

2互动阅读小说网站设计与实现

2.1结构设计当前移动设备浏览器的发展走在了计算机端的前方,在这个智能手机和将平板电脑大爆炸的时代,移动优先已成趋势,不管开发什么,都以移动为主,人们阅读也逐渐不会依赖于计算机屏幕阅读而转向各种移动设备[9,10]。本文将基本实现一个基于HTML5建立的互动小说阅读网站,比起一般在电脑上打开的阅读网站结构设计更简单化,并在移动设备上会有更好的体验。由于本网站主要面向的对象是使用移动设备进行小说阅读的群众,故假想存在一个互联网上已有PC版的小说阅读网站,PC版与移动版将动态引用同一数据库的内容。

2.1.1网站草案网站首页暂定分为一个header、三个article跟一个footer。header中放置网站LOGO与导航。第一个article包含五个版块,分别是“热门”、“更新”、“新作”、“结局”、“经典”,每个版块放置六篇小说;第二个article是“今日推荐”,做简单的图片幻灯,小说封面两张两张切换;第三个article放置“四海推荐”、“全站强推”、“新类新风”。还考虑了是否添加一个“最近阅读”的article。最下方是footer,采用单色底加网站名字。

2.1.2网站架构图1为网站架构图。由于真正做到一个阅读网站需要一个庞大的数据库,且牵涉到版权问题,此处仅做一个简单的技术演示站,所涉及到的页面只有首页小说目录页和小说正文页。同时后期修改代码时也一目了然。在HTML4+CSS时代,若想做出一个渐变或者阴影,多数使用图片完成,在电脑上,有时由于网速缓慢等原因,会导致无法达到预期效果,而在移动设备上,又往往因为图片质量被压缩,致使效果严重失真。

2.2网站模块设计该网站采用HTML5+CSS3+Javascript编写,取消了一些过时的HTML4标记,将内容和展示分离,使用全新的表单输入对象以及更合理的Tag,并用到本地数据库,记录阅读历史。如以首页代码为例,取消了通篇的<div>标签,用更形象的HTML5标签代替旧HTML标签。网站程序代码更加简洁,无论是在搜索引擎收录还是浏览器兼容上,均有不小的提升,同时后期修改代码时也一目了然。在HTML4+CSS时代,若想做出一个渐变或者阴影,多数使用图片完成,在电脑上,有时由于网速缓慢等原因,会导致无法达到预期效果,而在移动设备上,又往往因为图片质量被压缩,致使效果严重失真,但在CSS3中,可以使用几个简单的语句就显示出预期的效果来,本站首页搜索框等渐变均使用CSS3绘制,无论在什么设备什么平台上均可完美展现。由于时间的限制,对草案中设想的功能并没有完全实现——比如并没有实现小说正文页两边的侧栏设计(包括书签和微博互动),而是将微博互动放在了小说目录下面,见图2所示。

2.3网站测试各平台测试结果如表2、表3所示。表2及表3说明,基于HTML5技术搭建互动小说阅读网站的实验整体来说是成功的,但由于各浏览器对HTML5的支持度不一,导致了个别问题的出现,但并不影响整体使用。当然,HTML5的技术所能达到的水平绝不仅仅如此,但就交互与互动上来说,能在一定程度上代替Flash所给人带来的惊喜体验。使用HTML5开发的网站,随着时间的推移,必将能够很好地跨平台展现。

3结语

使用HTML5开发的互动小说阅读网站,标签语义化,能降低机器和开发人员理解内容和语境的难度。该网站能在各平台内基本能够正常显示,只要有浏览器即可进行电子书的在线阅读,无需再安装其他插件,更具兼容性。各浏览器对HTML5的兼容还未达到完美状态是当前基于HTML5开发的网站所面对的主要问题,而解决这个问题的办法是,在不兼容的地方使用JavaScript和Flash作为备选方案,保证自己的实现适合所有用户,而随着时间的推移,HTML5能被所有浏览器完美展现时,在不改变当前实现的前提下,即可移除JavaScript和其他备选方案。电子书的发展趋势,很大可能也会偏向跨平台展示,即用HTML5进行开发就可达到更好的体验。虽然因为技术水平的限制,并没有展示得很好,但用HTML5开发互动小说阅读网站必是一个很有前瞻性的尝试。

参考文献

[1]张波.网络出版的利弊分析和我们的对策[J].编辑学报,2000,12(2):82-84.

[2]李敏娜.Web时代下的网络出版研究[D].南宁:广西民族大学,2010:23.

[3]赵爱美.基于HTML5和.NET的移动学习平台研究与实现[J].河南科技学院学,2013,41(4):62-66.

[4]刘华星,杨庚.HTML5——下一代Web开发标准研究[J].计算机技术与发展,2011,21(8):54-58.

[5]闵栋,魏凯,文婷.移动智能终端HTML5技术与标准研究[J].中兴通讯技术,2013,6:10.

[6]吴庆涛,刘超慧,聂荣.HTML5—下一代Web开发标准的核心技术探讨[J].许昌学院学报,2011,30(5):61-63.

[7]练小川.电子书的分类[J].出版参考,2011,Z1:42.

[8]文艳霞.阅读类App的发展与出版机构的对策[J].科技与出版,2012,30(7):10-12.

[9]马志强,蒋晓.基于用户体验的智能手机网站界面设计探讨[J].包装工程,2012,33(16):63-66.

[10]贺兆达,季铁,袁翔.跨平台数字阅读的“通用”界面模式设计探索[J].包装工程,2013,34(18):54-57.

作者:钟云飞 谢素娟 包贤敬 刘波 单位:湖南工业大学包装与材料工程学院

被举报文档标题:互动小说阅读网站设计与实现

被举报文档地址:

https://www.meizhang.comhttps://www.meizhang.com/sjlw/wzsjlw/687336.html
我确定以上信息无误

举报类型:

非法(文档涉及政治、宗教、色情或其他违反国家法律法规的内容)

侵权

其他

验证码:

点击换图

举报理由:
   (必填)