基于HTML5的PPT智能模板设计

针对传统PPT在制作和播放中依赖于Office软件、不能很好的解决跨操作系统和终端设备、需要专门配置翻页激光笔无线遥控播放等问题，提出了一个基于HTML5新特性和WIFI无线通信技术相结合的手机无线遥控PPT智能模板的解决方案。通过实现HTML5中的JS接口和CSS样式设计，构建了基于浏览器模式的PPT通用智能模板;利用模板设计的PPT存放于云端，PPT播放采用Socket无线通信技术，通过WIFI访问云端，基于C/S模式设置服务器和客户端的通讯地址，其中手机扮演客户端发送控制指令，存储PPT或PPT智能模板的电脑终端作为服务器端执行指令，实现手机无线遥控幻灯片的播放。

1、引言(Introduction)

目前广泛使用的PPT模板都是利用微软公司的Office中包含的PowerPoint软件制作的，但当前这种教学PPT的使用还存在以下问题：(1)老师只能在讲台前面手动或者专门配置投影仪无线遥控翻页激光笔来实现翻页，或影响教学效果，或增加学校开支。(2)老师需要携带存储了制作好PPT的笔记本电脑，没有很好的解决跨终端设备播放的问题。(3)可能由于PPT播放环境与制作环境不同从而无法很好的展现想要的播放效果。

造成以上问题的原因主要有以下两点：(1)没有很好的解决“低成本”无线遥控PPT的播放;(2)局限于微软的PPT，从而限制于操作系统和终端设备等。然而Web技术的发展，为幻灯片的制作方式提供了另外的可能，使用HTML5技术能够满足制作PPT模板的要求。HTML5因其跨平台、支持多设备、及时更新等优点，可以很好地解决上述问题;同时由于目前智能手机的普及，也为很好的实现“低成本”无线遥控提供了可能。经研究发现可以设计一个基于HTML5的智能模板和采用智能手机来实现无线遥控的系统。

2、系统总体设计(The overall design of the system)

2.1、总体设计思想

HTML5具有丰富的API，支持2D或3D绘图，能够播放音频和视频，能够产生超强的视觉效果，智能手机的无线上网功能不仅可以应用于通讯和娱乐，还可以应用于生活实践中。因而系统设计的基本思想是将两种新技术相结合，解决传统依赖于微软操作系统的PPT制作和应用问题。系统设计的总体运行架构。

图1 系统基本运行架构

图1展示了基于HTML5的PPT智能模板设计的基本思想：首先利用HTML5新特性在电脑端设计PPT的通用智能模板;然后利用PPT智能模板设计制作符合个人需求的幻灯片，完成之后将其上传到云端;当需要使用幻灯片时在电脑端使用浏览器打开;最后将智能手机与电脑进行互联，这样即可使用智能手机控制幻灯片的播放。

2.2、HTML5智能模板设计

2.2.1、幻灯片智能模板结构设计

使用HTML5新特性制作幻灯片模板的设计原则是：尽量使结构清晰、简洁，并尽可能的参照传统幻灯片的结构。HTML5智能模板的结构设计为：

(1)PPT到html的转换：因为使用HTML5制作的PPT智能模板为html格式，意味着一个网页对应于一个完整的幻灯片，则每一页幻灯片的页面对应一个<div>元素。考虑到html格式的幻灯片页面是同时显示的，则必须将要显示的幻灯片区块设置为透明，其余的幻灯片区块显示设置为不透明，这样即可保持每次都只有一个页面显示。

(2)页面标签设计：每一页幻灯片区块都要确定一个对应的id值，id的命名规律为：#slideX,其中X是指第几个页面。该id值对应于幻灯片页面的标签值，当切换页面时，浏览器的地址栏会发生改变，即幻灯片页面的标签值发生改变。

(3)页面内容设计：幻灯片的每页内容必须和传统的幻灯片中的元素进行对应，常见的固定元素有标题(h1)、次标题(h2)、正文段落、图片等。另外可以考虑设计一些常用的页面内容，。

图2 系统业务流程图

系统采用Socket通信，双方首先要获取到IP地址。客户端IP的获取可以通过打开手机的WiFi，连接上一个无线网络即可根据动态主机配置协议动态分配到IP地址;服务端则通过连上一个无线网络也可动态分配到IP地址，从而进行通信连接。通信的过程为：首先是服务端获取到自身IP并显示给用户，用户将该IP地址作为服务端信息输入到客户端，建立Socket连接;然后客户端发送控制信息给服务端，最后服务端将接收到的控制信息利用Java中的Robot类执行这个输入事件[5]。

3、主要技术实现(The main technology)

3.1、智能模板实现

智能模板设计包括基本功能实现和特殊元素处理。

3.1.1、基本功能实现

(1)根据设计完成的结构将所要显示的内容加入到网页文件中。

(2)为文档内容加上初始样式，确定初始界面。

(3)页面初始化，通过resize()函数更改当前显示页面的大小，确定每个幻灯片区块元素的id值，为当前页面加上属性——伪类:target，并确定幻灯片的页面总数。

(4)通过更改每个幻灯片区块元素的属性——伪类:target来决定显示哪一张幻灯片。

(5)使用JavaScript实现翻页函数功能。

(6)对相应的鼠标事件和键盘事件进行事件监听[6]。

3.1.2、特殊元素处理

幻灯片页面内部的动画可通过特殊的class进行生成，设置成未显示和显示后两者样式,这样用户可以通过切换动画观察到页内的动画效果。

3.1.3、兼容考虑和扩展设想

系统需要考虑HTML5的CSS Hack技术对浏览器的兼容。能够在当前页面编辑修改幻灯片,无需通过后台代码进行修改，能够将网页在正常网页和幻灯片模式下切换。

3.2、智能手机遥控技术实现

3.2.1、服务器连接配置

服务端信息录入为无线遥控PPT播放系统手机控制端的第一个Activity，在该Activity中设计了提供增加服务器信息的ImageViewButton和退出ImageViewButton。点击增加服务器信息按钮会弹出一个对话框，让用户填入连接名和服务器IP。填写完信息用户点击确认之后，系统检查IP地址是否合法，若正确则保存用户填入的信息。

显示的连接信息包括连接名、录入时间、提供编辑按钮和删除按钮。点击编辑按钮可以读取并修改该连接信息，包括服务端IP地址和连接名。若信息格式正确则在SharedPreferences中更新，否则弹出对话框显示错误信息。点击删除按钮就从SharedPreferences删除，并使用Handler进行更新UI。

最后点击连接信息行就可以进行连接。若没有打开WiFi则弹出对话框通知用户并请求打开WiFi;设置成功点击返回即可回到ConnectionActivity。

3.2.2、无线控制设计

由ConnectionActivity启动了MainActivity后，根据Activity的生命周期，应该在该Activity成为交互Activity即获取焦点之前建立连接，即在OnResume()生命周期方法中采用AsyncTask来异步建立网络连接。在继承AsyncTask重写doInBackground()时建立连接，然后在onPostExecute()方法中进行异步更新UI。因为有可能用户忘了启动服务器，那么连接就会超时，故要捕获超时异常并弹出对话框提示用户可能的错误和处理办法。

在建立连接的方式中，选择采用Socket.connect()方法来建立连接。处理完连接问题之后，就可以发送控制指令了，由于动作比较多，故定义常量类来进行控制指令描述,也方便序列化。考虑到操作的便捷性，系统还提供了通过音量键来实现上下翻页，用户不用看手机屏幕即可方便的实现翻页操作。

3.2.3、鼠标移动设计

对于鼠标的控制主要是利用手机的触摸屏来实现的，对触摸屏有DOWN、MOVE和UP三种事件。可以充分利用MOVE事件来获取手指在手机屏幕的坐标，然后发送到服务端即可。控制电脑鼠标的移动过程有两种方式，一种是进行手机屏幕和电脑屏幕的静态映射，即由手机的位置乘上电脑屏幕相对手机屏幕的倍数就可进行映射，这种方式的缺点在于移动连续性不是很好，在完成一次移动之后重新移动则无法在原来的基础上移动。另一种映射方式是根据手机屏幕的范围和用户移动的习惯，将手机屏幕映射到以当前位置为中心的一个矩形区域，这样可以解决移动连续性的问题。具体实现是在第一种方式的基础上再形成一种坐标映射，即首先使用第一种方式来获知实际的电脑鼠标相对电脑屏幕的位置，然后计算矩形范围进行第二次映射，最后转换为实际的坐标发送到电脑进行执行。

3.2.4、服务端设计

服务端最基本的工作是接收客户端的连接请求和执行发送过来的控制指令。考虑到在服务器一次运行的过程中客户端可能会多次连接服务器，故在接收客户端的连接请求时必须采用多线程来实现。由于一台电脑在同一个时刻肯定只能有一个手机来控制，故采用While()循环来实现，这样只有在Accept()成功一次并执行完该次连接才会接收下一次的连接请求。由于一次Socket通信是采用一次长连接，故需要While(true)的形式来不断的接收客户端发送过来的控制指令然后执行，而不能一次性执行了一个动作就结束了，否则这样反序列化的header信息不一致，会造成失败异常。具体执行这个控制指令时采用Robot类提供的方法来进行，Robot类用于为测试自动化、自运行演示程序和其他需要控

制鼠标和键盘的应用程序生成本机系统输入事件。Robot的主要目的是便于Java平台实现自动测试，。通过实验结果可知传统方式制作的PPT与基于HTML5制作的Web版幻灯片相比，Web版的幻灯片能够达到与传统幻灯片类似的效果，甚至能达到视觉冲击力更好的显示效果。

图3 传统PPT效果图

图4 Web版幻灯片效果图

(2)实验表明该系统可以很好的解决教学过程中无线遥控PPT播放问题，还证明了系统具有良好的稳定性和易操作性方便更新和拓展。

5、结论(Conclusion)

本文提出的基于HTML5的幻灯片智能模板设计和基于Socket的Android手机远程遥控系统是可行的。它具有以下特点:(1)无需PowerPoint软件即可制作幻灯片。(2)幻灯片播放时无需时刻使用鼠标进行控制，能够用智能手机进行播放，展示了无线网和智能手机的强大功能和魅力。(3)该幻灯片智能模板和智能遥控系统能够采用新技术实现传统幻灯片的功能，能够展示HTML5的特殊性能，所制作的幻灯片比传统PPT更加漂亮。(4)不受操作系统的限制，同时支持多终端包括平板、手提电脑、台式电脑等通过网址进行访问，软硬件兼容性更好。

更多相关阅读