一款基于Html5语言的跨平台教学课件制作软件的设计和开发(倪央央)

第一篇：一款基于Html5语言的跨平台教学课件制作软件的设计和开发(倪央央)

一款基于Html5语言的跨平台 教学课件制作软件的设计和开发

宜兴市高校招生办公室倪央央

一、前言

随着移动互联网技术逐渐在学校和家庭中普及，“电子书包”（Electronic Schoolbag）和“数字化学习”(e-learning)之概念亦开始逐步进入课堂和家庭。

各类大型开放式网络课程——慕课（Massive Open Online Courses/MOOC）平台近年来在中国迅猛发展，如Coursera、慕课学院、中国大学MOOC、网易公开课、腾讯公开课等各类MOOC平台获得了公众显著的关注，各大高校亦逐步与这些平台合作签约。国内外一流高校的教学资源及互联网巨头资本的流入，使MOOC课程拥有了颇为丰富的课程资源以及相当数量的忠实用户。

移动互联网技术如此快的发展，新技术乃至新模式对于传统教学体系的冲击，是巨大且不可逆转的。传统单平台课件在移动互联技术的不断发展之情况下，对新学习方式、新的学习的平台的变化显得力有未逮。如何制作跨平台学习的课件？如何让传统单平台课件适应新的网络学习环境？html5语言，为解决跨平台教学课件制作的问题，提供了一个契机，更以其在课件稳定性、形式表现多样性、良好的交互性以及支持跨平台学习等各方面的天然优势，日益成为备受青睐的一种课件制作形式。

二、html5语言简介

Html5语言，是超文本标记语言（Hypertext Markup Language）的第五次重大修改，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。使用HTML5开发课件，有其独有的优势：

1、HTML5对多媒体有良好的支持

HTML5课件能将各种课件形式融合起来，实现文字、图片、表格、音频、视频、交互、色彩、创意的有机结合。

HTML5支持视频、音频等多媒体元素，它向开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。故此，HTML5开发的课件，让文、图、表、声、画等有机结合。HTML5新提供的canvas元素，使用 JavaScript绘制图像，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

这些新的特性让人印象深刻，使得HTML5网页课件告别传统网页课件缺乏声影、形式单一等各种不足。HTML5网页课件能使得学习内容的表现形式变得更加丰富，能提升学生之学习兴趣，让学生得以更加专注。

2、HTML5课件拥有良好的交互性

比之传统Web技术，HTML5的用户体验大大改善。在课件设计开发时，教学设计者可以充分发挥此种技术的优点，并结合内容特点，设计互动的一些学习点，增强学生学习的参 与。

3、HTML5课件支持跨平台学习

HTML5最主要的优势在于终端，即跨平台，跨分辨率，终端自适应等方面。相比传统的HTML技术，它在终端设备上有更好的体验，尤其在平板和手机平台上更有得天独厚的优势。

很显然，在这一点上，HTML5的新特性和移动互联网学习课件的需求可谓是天作之合。移动互联网时代，用户的终端设备是一个范围很广的概念，同一用户可能有多个不同的设备，对于课件来说，只有适应不同的终端设备，支持跨平台学习，才能给予学生良好一致的学习体验。

三、软件开发环境介绍

1、Bootstrap框架 Bootstrap，由Twitter推出，是目前非常流行的前段框架。它基于HTML5，CSS和Javascript，由于Bootstrap简单且灵活，能够提供更快捷的网页开发速度。Bootstrap是由来自Twitter的工程师马克·奥托和雅各·桑顿协作开发的Css/Html框架，它提供了优美典范的开发规范，是由动态Css语言less写成，一经推出便极受欢迎，作为GitHub上热门的开源项目，为美国航空航天局和微软全国广播公司等机构所使用。同时，国内一些移动开发者熟悉的框架，也由此优化改进而来。Bootstrap对于开发响应式布局、移动设备优先的跨平台项目可以说是量身定制。

2、jQuery库

jQuery是一个便捷、迅速而又小巧且功能丰富的JavaScript库。通过在众多浏览器上都有很高易用性的API接口，它可以让HTML文档遍历和处理、事件处理、动画描绘、Ajax这类事情变得更加简单。随着通用性和可扩展的深度结合，jQuery改变了上百万人对于JavaScript的编程习惯，是目前最受欢迎的JavaScript库。

3、WebSrtorm编辑器

WebStorm是jetbrains公司旗下一款JavaScript 开发工具，与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。WebStorm的智能代码编辑器提供了对JavaScript，Node.js、HTML和CSS，以及其他语言顶级的支持，给代码完成、错误检测，重构等编程工作带来更多的优势。

图1：HBuilder界面

四、HTML5课件制作软件H5slide设计和开发

图2：H5Slide界面

1、H5Slide软件简介

H5Slide是Github上的一款开源项目，通过HTML5技术，为用户编辑、播放、控制幻灯片等种种行为提供全套解决方案。相较Powerpoint来说，它要小巧方便的多，它可在各种设备上自由的进行幻灯片之演示。基于云端的处理模式可以让资源得到更容易的分享和传播，而开源模式亦可以使得代码安全性得到一定程度的保障，同时在此基础上，可以使此项目本身能够得到持续性的改进及发展。本研究在此开源项目上，结合教学课件制作要求，对此软件进行了进一步的开发和研究。

2、H5Slide软件设计原则

该软件在设计目的是提供给用户一款能够替代Powerpoint甚至是Flash软件的方便、快捷易用的跨平台课件制作工具。在软件的设计中，遵循可靠性、鲁棒性、标准化、可扩展、易用性、可维护性等软件工程所必须遵守的原则。

3、H5Slide软件功能模块设计

为满足用户开发课件的需求，需要对H5slide的功能模块进行设计。H5slide的软件所有的功能都通过单HTML页面配合CSS和JS完成，节约系统资源。

在软件设计过程中，充分考虑易用性原则，重点考虑了对不同平台的不同屏幕尺寸的适配性。在进行了针对性的研究后，设计出软件的功能大致如下：用户（课件制作者）可以从不同的客户端（pc、平板、手机等）浏览登陆软件，在软件中，对所需要制作的课件进行方便快捷的编辑、排序、删除等操作。在课件制作过程中，可以插入图片、声音、多媒体等教学资源。在课件制作完成后，可以点击播放按钮全屏在设备上播放，并且可以实现前进、后退、跳转等常用的幻灯片播放功能。

根据软件功能模块设计需求，软件页面中划分为几个区块（DIV），每个区块由不同的功 能模块组成：

图3：H5slide功能模块设计图

（1）顶部菜单（TopBar）

标题：提供修改幻灯片的总标题功能。

样式：弹出幻灯片样式选择菜单，目前只提供标准样式和反式样式。

选择幻灯片播放时切换的动画效果，有12种不同的效果可供选择

图4：样式选择模块图

播放菜单：在鼠标按下（DropDown）事件触发以后，弹出从头开始播放幻灯和从当前页码开始播放菜单供用户选择。在选择后会进入幻灯片播放页面全屏进行播放。

部分代码：