基于HTML5的智能模板设计(小论文)修改版

基于HTML5的PPT智能模板设计刘沧生，管希东，刘立辉，雷志飞，王保龙指导教师：李淑芝，兰红(江西理工大学信息工程学院，江西赣州341000)摘要:随着3G无线通信技术的发展，Web技术的不断升级，针对传统PPT在制作和播放中依赖于Office软件和操作系统，本文阐述利用HTML5新特性和手机无线通信技术设计实现能手机无线遥控的PPT智能模板系统。基于HTML语言，实现了HTML5中的JS接口，完成了CSS样式的设计，构建了PPT智能模板；并借助Socket无线通信技术，实现了基于C/S模式的无线遥控，手机扮演客户端发送控制指令，存储PPT或PPT智能模板的电脑终端作为服务器端执行指令，实现幻灯片的播放。实验表明，该方案能很好的满足制作PPT智能模板和无线遥控幻灯片播放的需求。关键词：HTML5；PPT智能模板；Socket；Android手机；智能遥控SmartPPTtemplatedesignbasedonHTML5LiuCangSheng,GuanXiDong,LiuLihui,LeizhiFei,WangBaolongTutor：LIShuZhi，LanHong(InformationEngineeringCollege,JiangxiUniversityofTechnology,Ganzhou341000)Abstract:Withthedevelopmentof3Gwirelesscommunicationtechnology,escalatingwebtechnologiesintheproductionoftraditionalandplaybackPPTrelyonofficesoftwareandoperatingsystems,thispaperdescribestheuseofnewHTML5featuresandmobilewirelesscommunicationtechnologydesignedtoachieveaSmartPPTtemplatesandsmartphonewirelessremotecontrol.ByHTML-basedlanguage,toachieveinHTML5JSinterfacetocompletetheCSSstyledesignandimplementationofthePPTintelligenttemplates.AndwiththeSocketwirelesscommunicationtechnology,designandimplementationofawirelessremotecontrolsystembasedonC/Smode,thephoneplaystheclientsendsacontrolcommand,thecomputerterminalstoragePPTorPPTsmarttemplatesasaserver-sideexecutionofinstructionstoachievetheslideshow.ExperimentsshowthattheschemecanwellmeettheproductionSmartPPTslideshowtemplatesandwirelessremotecontrolneeds.Keywords:HTML5;PPTintelligenttemplates;Socket;Androidphones;smartremote1引言目前广泛使用的PPT模板都是利用微软公司的Office中包含的PowerPoint软件制作的，在使用中要首先将制作好的PPT放到电脑或U盘上，播放过程中通常需要利用USB鼠标或者无线鼠标实现上下翻页控制。随着智能手机的出现，利用智能手机的无线网络和触屏功能实现智能遥控的应用开始受到广泛关注，本项目的研究目标就是利用手机实现幻灯片的智能播放。手机和Web相结合，实现跟PowerPoint中PPT播放同样的功能，但从此可以不用鼠标和U盘，用户只需要在服务器上输入自己幻灯片的网址，就可以打开幻灯片，并利用智能手机来控制播放。项目实现需要解决两个主要技术难题，一是如何利用HTML5将PPT转换成Web版的幻灯片，二是如何通过无线互联技术实现智能手机的无线遥控。HTML5是目前非常流行的Web开发技术，是包括HTML、CSS和JavaScript在内的一套技术组合。HTML5能够减少浏览器对于插件的需求，并且提供更多有效增强网络应用的标准。智能手机的无线互联和遥控技术可以实现跟服务器的通讯，为项目的实施提供了可行性。项目研究有助于展示HTML5的特殊性能，所制作的幻灯片比传统PPT更加漂亮，手机遥控也将再显无线网和智能手机的强大功能和魅力。目前广泛使用的PPT模板都依赖于PowerPoint软件和操作系统，并且传统制作方式虽然方便，但传统幻灯片显示效果可能固定。然而，web技术的发展，为幻灯片的制作方式提供了另外的可能，使用HTML5技术能够完成制作PPT模板的要求。HTML5因其跨平台，支持多设备，及时更新等优点，现在已经成为开发的一大热点。HTML5是超文本标记语言下一个主要的修订版本，现在仍处于发展阶段。它希望能够减少浏览器对于需要插件的富因特网应用程序的需求，并且提供更多能有效增强网络应用的标准集。广义的HTML5是指包括CSS、JavaScript接口和HTML语言在内的功能集。HTML5是一种适应性很广的技术，拥有显著的优越性，那就是可以跨平台操作使用。它不需要考虑操作系统的兼容性，只需考虑浏览器的兼容性，可移植性强，能够移植到多个平台上。HTML5能够利用其新元素和新特性让制作者自由选择实现动画效果和显示内容，因此PPT模板的制作同样可以利用HTML5的强大功能和新特性来完成。随着电子信息技术的不断发展，智能手机正在进入千家万户，智能手机遥控技术也随之而来并日益发展。智能手机遥控技术是指通过智能手机发送遥控指令信息的技术。该技术能够使智能手机成为各种电器的遥控器，以方便用户能够远程遥控或部分代替其它遥控器的使用。而智能手机遥控技术同样能够在播放幻灯片中发挥作用。它能够利用智能手机与电脑进行Socket通信，从而通过手机向电脑端发送指令信息，从而能够直接使用智能手机操控幻灯片的播放，能够为幻灯片讲解人带来方便。本文利用HTML5的强大功能和最新技术，为摆脱制作幻灯片时对PowerPoint软件和操作系统的依赖，设计一个基于HTML5的智能模板。同时为方便用户播放幻灯片，节省对无线遥控器的花费，设计实现了使用Android手机采用C/S结构的无线遥控PPT播放系统。2系统总体设计2.1总体设计思想基于HTML5的PPT智能模板设计其设计思想是在电脑端利用PPT智能模板设计制作自己的幻灯片，完成之后将其上传到云端，当需要使用幻灯片时在电脑端使用浏览器打开，再将智能手机与电脑进行互联，这样即可使用智能手机控制幻灯片的播放，其基本运行架构如图1所示：电脑端（包含PPT智能模板）云端电脑端智能手机（包含无线遥控PPT播放系统）制作幻灯片打开网址播放图1系统基本运行架构2.2HTML5智能模板设计2.2.1HTML5结构设计使用HTML5新特性制作幻灯片模板的设计原则是尽量使结构清晰、简洁，并尽可能的参照传统幻灯片的结构。HTML5的结构设计如下:(1)因为使用HTML5制作的PPT智能模板的格式为html格式，意味着一个网页对应与一个完整的幻灯片，则每一页幻灯片的页面对应一个div元素。考虑到html格式的幻灯片页面是同时显示的，则必须将要显示的幻灯片区块设置为不透明，其余的幻灯片区块显示为不透明，这样即可保持每次都只有一个页面显示。(2)每一页幻灯片区块都要确定一个对应的id值，id的命名规律为：#slideX,其中X是指第几个页面。该id值对应于幻灯片页面的标签值，当切换页面时，浏览器的地址栏会发生改变，即幻灯片页面的标签值发生改变。(3)每个页面都可以由标题(h1)、次标题(h2)、正文段落、图片等固定标签组合而成，和传统幻灯片中的元素对应。(4)提供统一的设计模板类型，和传统幻灯片中的模板相对应。2.2.2接口设计HTML5智能模板必须拥有一些特定的接口方便外界的使用，下面本文提供了一种可以使用键盘快捷键和鼠标控制的方式操作幻灯片的演示，其中快捷键的控制方式如表1所示。表1快捷键对应幻灯片的切换按键动作按键动作→下一页Home开始页←上一页End末页↓下个动画Ctrl+G跳转↑上个动画Enter全屏2.3无线遥控设计该无线遥控PPT播放系统采用C/S模式，分为手机控制端和受控服务端两个部分。该系统总体业务流程图如图2所示：图2系统业务流程图2.3.1手机控制端设计(1)服务器信息编辑录入模块：主要负责编辑录开始编辑录入服务端信息sharedpreferences是否正确是否显示错误信息是否打开wifi是建立连接显示控制页面否跳转wifi控制页面发送控制指令服务端接收并执行入服务器信息，比如录入服务端的IP地址和该连接名。因为可能会连接有多个电脑的记录，所以还提供了对现有信息的编辑和删除功能。由于一般笔记本IP采用动态主机配置协议（DynamicHostConfigurationProtocol,DHCP）动态分配IP，对于一个网络而言IP地址仅主机号略有不同，这样可以减少用户的输入量；或者是某个连接暂时不用，可进行删除。(2)无线控制模块：主要实现的功能是发送遥控PPT播放的指令，如从头开始放映、从当前进行放映、上一页、下一页、结束放映。考虑一般鼠标具有的移动功能也在无线遥控PPT播放系统中增加了鼠标左键和右键的功能，这样用户可以更好的控制一些其他的工作，如打开文件，进入文件夹等等。(3)鼠标移动模块：主要负责对鼠标移动事件的处理。为了更加精确的控制鼠标的移动，设计时充分利用现在智能手机的触摸屏幕，用户可以根据自己的想法进行任意的移动。2.3.2受控服务端设计受控服务端主要负责接收手机控制端发送的Socket连接请求，建立Socket通信，同时对一个连接进行长通信，执行从手机控制端发送过来的控制指令等工作。3主要技术实现3.1智能模板实现3.1.1基本功能实现(1)根据设计完成的结构将所要显示的内容加入到网页文件中。(2)为文档内容加上初始样式，确定初始界面。(3)页面初始化通过reszie()函数更改当前显示页面的大小，确定每个幻灯片区块元素的id值及为当前页面加上属性--伪类:target，并确定幻灯片的页面总数。(4)通过更改每个幻灯片区块元素的属性--伪类:target来实现决定显示哪一张幻灯片。(5)使用JavaScript实现翻页功能函数。(6)对相应的鼠标事件和键盘事件进行事件监听。3.1.2特殊元素处理幻灯片页面内部的动画可通过特殊的class进行生成，设置成未显示和显示后两者样式,这样用户可以通过切换动画观察到页内的动画效果。3.1.3兼容方面的考虑因为HTML5是不断发展的标准,而现在的浏览器包括Chrome、Opera、IE、Firefox等往往支持部分HTML5标准，IE低版本的浏览器甚至不支持HTML5，因此需要考虑CSSHack技术对浏览器实现兼容，尽量使多版本浏览器显示效果一致。3.1.4扩展设想(1)幻灯片之间的切换动画,可以考虑用独立模块进行实现。(2)能够在当前页面编辑修改幻灯片,无需通过后台代码进行修改。(3)能够制作幻灯片生成程序，生成HTML5格式的幻灯片页面。(4)能够将PPT文件转换为HTML5格式，能在浏览器下浏览。5.能够将网页在正常网页和幻灯片模式下切换。3.2智能手机遥控设计实现3.2.1服务器信息录入Activity是Android组件中最基本也是最为常见用的四大组件之一。在一个Android应用中，一个Activity通常就是一个单独的屏幕，它上面可以显示一些控件也可以监听并处理用户的事件做出响应。Activity之间通过Intent进行通信。服务器信息录入为无线遥控PPT播放系统手机控