《一款基于Html5语言的跨平台教学课件制作软件的设计和开发(倪央央)》由会员分享，可在线阅读，更多相关《一款基于Html5语言的跨平台教学课件制作软件的设计和开发(倪央央)（7页珍藏版）》请在金锄头文库上搜索。
1、1 一款基于 Html5语言的跨平台教学课件制作软件的设计和开发宜兴市高校招生办公室倪央央一、前言随着移动互联网技术逐渐在学校和家庭中普及，“电子书包” （ Electronic Schoolbag）和“数字化学习”(e-learning) 之概念亦开始逐步进入课堂和家庭。各类大型开放式网络课程慕课（Massive Open Online Courses/MOOC）平台近年来在中国迅猛发展，如Coursera、慕课学院、中国大学MOOC、网易公开课、腾讯公开课等各类 MOOC 平台获得了公众显著的关注，各大高校亦逐步与这些平台合作签约。国内外一流高校的教学资源及互联网巨头资本的流入，使MOOC
2、 课程拥有了颇为丰富的课程资源以及相当数量的忠实用户。移动互联网技术如此快的发展，新技术乃至新模式对于传统教学体系的冲击，是巨大且不可逆转的。 传统单平台课件在移动互联技术的不断发展之情况下，对新学习方式、 新的学习平台的变化显得力有未逮。如何制作跨平台学习的课件？如何让传统单平台课件适应新的网络学习环境？html5 语言，为解决跨平台教学课件制作的问题，提供了一个契机，更以其在课件稳定性、形式表现多样性、良好的交互性以及支持跨平台学习等各方面的天然优势，日益成为备受青睐的一种课件制作形式。二、html5 语言简介Html5 语言， 是超文本标记语言（Hypertext Markup Lang
3、uage ）的第五次重大修改，2014年 10 月由万维网联盟（W3C）完成标准制定。目标是取代1999 年所制定的HTML 4.01 和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需 求。使用 HTML5 开发课件，有其独有的优势：1、HTML5 对多媒体有良好的支持HTML5 课件能将各种课件形式融合起来，实现文字、图片、表格、音频、视频、交互、色彩、创意的有机结合。HTML5 支持视频、音频等多媒体元素，它向开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。故此，HTML5 开发的课件，让文、图、表、声、画等有
4、机结合。HTML5 新提供的canvas 元素，使用JavaScript绘制图像，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这些新的特性让人印象深刻，使得HTML5 网页课件告别传统网页课件缺乏声影、形式单一等各种不足。HTML5 网页课件能使得学习内容的表现形式变得更加丰富，能提升学生之学习兴趣，让学生得以更加专注。2、HTML5 课件拥有良好的交互性比之传统 Web 技术， HTML5 的用户体验大大改善。在课件设计开发时，教学设计者可以充分发挥此种技术的优点，并结合内容特点，设计互动的一些学习点，增强学生学习的参2 与。3、HTML5 课件支持跨平台学习HTML5 最主要的优
5、势在于终端，即跨平台，跨分辨率，终端自适应等方面。相比传统 的 HTML 技术，它在终端设备上有更好的体验，尤其在平板和手机平台上更有得天独厚的优势。很显然， 在这一点上， HTML5 的新特性和移动互联网学习课件的需求可谓是天作之合。移动互联网时代， 用户的终端设备是一个范围很广的概念，同一用户可能有多个不同的设备，对于课件来说， 只有适应不同的终端设备，支持跨平台学习，才能给予学生良好一致的学习体验。三、软件开发环境介绍1、 Bootstrap 框架Bootstrap， 由 Twitter 推出， 是目前非常流行的前段框架。它基于 HTML5， CSS和 Javascript， 由于 Bo
6、otstrap 简单且灵活，能够提供更快捷的网页开发速度。Bootstrap 是由来自Twitter的工程师马克奥托和雅各桑顿协作开发的Css/Html 框架，它提供了优美典范的开发规范，是由动态Css语言 less 写成，一经推出便极受欢迎，作为GitHub 上热门的开源项目，为美国航空航天局和微软全国广播公司等机构所使用。同时，国内一些移动开发者熟悉的框架，也由此优化改进而来。Bootstrap 对于开发响应式布局、移动设备优先的跨平台项目可以说是量身定制。2、 jQuery 库jQuery 是一个便捷、迅速而又小巧且功能丰富的JavaScript库。通过在众多浏览器上都有很高易用性的AP
7、I接口，它可以让HTML 文档遍历和处理、事件处理、动画描绘、Ajax 这类事情变得更加简单。随着通用性和可扩展的深度结合，jQuery 改变了上百万人对于JavaScript的编程习惯，是目前最受欢迎的JavaScript库。3、 WebSrtorm 编辑器WebStorm 是 jetbrains 公司旗下一款JavaScript 开发工具，与IntelliJ IDEA 同源，继承了IntelliJ IDEA强大的 JS部分的功能。 WebStorm 的智能代码编辑器提供了对JavaScript， Node.js、HTML 和 CSS ，以及其他语言顶级的支持，给代码完成、错误检测，重构等编
8、程工作带来更多的优势。图 1：HBuilder界面3 四、HTML5 课件制作软件H5slide设计和开发图 2： H5Slide 界面1、 H5Slide软件简介H5Slide是 Github 上的一款开源项目，通过HTML5 技术，为用户编辑、播放、控制幻灯片等种种行为提供全套解决方案。相较Powerpoint 来说，它要小巧方便的多，它可在各种设备上自由的进行幻灯片之演示。基于云端的处理模式可以让资源得到更容易的分享和传播，而开源模式亦可以使得代码安全性得到一定程度的保障，同时在此基础上，可以使此项目本身能够得到持续性的改进及发展。本研究在此开源项目上，结合教学课件制作要求，对此软件进行
9、了进一步的开发和研究。2、 H5Slide软件设计原则该软件在设计目的是提供给用户一款能够替代Powerpoint 甚至是 Flash 软件的方便、 快捷易用的跨平台课件制作工具。在软件的设计中，遵循可靠性、鲁棒性、标准化、可扩展、易用性、可维护性等软件工程所必须遵守的原则。3、 H5Slide软件功能模块设计为满足用户开发课件的需求，需要对H5slide 的功能模块进行设计。H5slide 的软件所有的功能都通过单HTML 页面配合 CSS和 JS完成，节约系统资源。在软件设计过程中，充分考虑易用性原则，重点考虑了对不同平台的不同屏幕尺寸的适配性。在进行了针对性的研究后，设计出软件的功能大致
10、如下：用户（课件制作者）可以从不同的客户端（pc、平板、手机等）浏览登陆软件，在软件中，对所需要制作的课件进行方便快捷的编辑、排序、删除等操作。在课件制作过程中，可以插入图片、声音、多媒体等教学资源。在课件制作完成后，可以点击播放按钮全屏在设备上播放，并且可以实现前进、后退、跳转等常用的幻灯片播放功能。根据软件功能模块设计需求，软件页面中划分为几个区块（DIV） ，每个区块由不同的功4 能模块组成：图 3：H5slide功能模块设计图（1）顶部菜单（ TopBar）标题：提供修改幻灯片的总标题功能。样式：弹出幻灯片样式选择菜单，目前只提供标准样式和反式样式。选择幻灯片播放时切换的动画效果，有1
11、2 种不同的效果可供选择图 4：样式选择模块图播放菜单：在鼠标按下（DropDown ）事件触发以后，弹出从头开始播放幻灯和从当前页码开始播放菜单供用户选择。在选择后会进入幻灯片播放页面全屏进行播放。部分代码：5 H5Slide 复位 从当前页开始 Publish Remove （2）侧边导航栏（ Sidebar）版式选择：提供六种不同的幻灯版式供选择。页码：排列幻灯的页码备选，一般分为标题页、内容页和结束页。底部编辑条：可对幻灯片进行添加、删除和排序操作。当选择添加幻灯片是，会弹出添加幻灯页面，提供8 种类样式供选择。部分代码：版式 More. 6 页码 （3）幻灯片内容编辑模块（edito
12、r-stage ）本模块的功能是对幻灯内容进行编辑，修改文字、 标题， 也可以在幻灯中插入图片或其他媒体文件。图 5：插入图片菜单（4）全屏播放模块提供全屏模式播放幻灯片，常规的功能为前进、后退、转向和退出。部分代码1 / 1 7 PREV NEXT GOTO EXIT 4、 H5Slide 软件功能测试在开发中，使用不同的浏览器，选取不同的移动互联网平台，对软件进行了功能测试和兼容性测试。 IOS平台选取的机型有iPad （分辨率 1024*768 ） 、 iPhone5 （分辨率 568*320 ） 、iPhone6s （分辨率 736*414 ） 。 安卓平台选取的机型为Samsung
13、Galaxy S4（分辨率 640*360 ） 、Google Nexus 6（分辨率690*387 ） 。测试发现，在ie 内核和 webkit 内核浏览器中，软件均可以正常运行，在移动版ie、firefox 、Chrome 等浏览器测试界面中表现正常，具有良好的用户体验。软件在用户使用中，实现了软件功能设计的目标，能够初步满足制作跨平台课件的需求。五、结语本文对于HTML5 在制作课件中的实际应用进行了一点初步的分析和研究，设计和开发了基于 HTML5 的简单课件制作软件H5Silde，并且对软件进行了跨平台测试。HTML5 技术的“跨平台”特点使其能在不同操作系统、不同硬件平台上实现较好
14、的通用性和兼容性，给老师的授课带来极大的便利。Html5 的跨平台特性降低了课件的开发成本和开发时间，同时基于H5 制作的软件在市场和教育上也越来越普及和丰富，将会是未来技术的一个颇有前景的发展的方向。我们也能看到，HTML5 一直处于完善发展之中，直到2014 年才最终公开发布其标准规范，因此，我们目前拥有的HTML5 的教学资源并不够丰富，能用熟练掌握HTML5 技术的人员也不够充足。 改变教学的传统观念和习惯，让原有的教学资源教学课件也能实现跨平台使用，达到新旧资源同步和融合还需要一定的时间和过程，而此， 正是值得我们下一步思考和研究的方向。参考文献 ：1 Wittner O J. HTML5 in the Norwegian Higher Education InstitutionsJ. 2011. 2 陈锐浩 . 基于Android 平台的移动课件的设计及制作J. 现代计算机(专业版 ), 2013, 30(3): 55-58. 3 马少雄 . 基于 HTML5 的教育游戏设计与开发D. 上海师范大学, 2013. 4 潘志宏 , 罗伟斌 , 柳青 . 基于HTML5 跨平台移动应用的研究与实践JJ. 电脑知识与技术, 2013, 17: 029. 5 王金龙 . HTML5 技术在数学教学中的应用J. 教育教学论坛, 2015 (7): 235-237.
