搜索
1一款基于Html5语言的跨平台教学课件制作软件的设计和开发宜兴市高校招生办公室倪央央一、前言随着移动互联网技术逐渐在学校和家庭中普及，“电子书包”（ElectronicSchoolbag）和“数字化学习”(e-learning)之概念亦开始逐步进入课堂和家庭。各类大型开放式网络课程——慕课（MassiveOpenOnlineCourses/MOOC）平台近年来在中国迅猛发展，如Coursera、慕课学院、中国大学MOOC、网易公开课、腾讯公开课等各类MOOC平台获得了公众显著的关注，各大高校亦逐步与这些平台合作签约。国内外一流高校的教学资源及互联网巨头资本的流入，使MOOC课程拥有了颇为丰富的课程资源以及相当数量的忠实用户。移动互联网技术如此快的发展，新技术乃至新模式对于传统教学体系的冲击，是巨大且不可逆转的。传统单平台课件在移动互联技术的不断发展之情况下，对新学习方式、新的学习平台的变化显得力有未逮。如何制作跨平台学习的课件？如何让传统单平台课件适应新的网络学习环境？html5语言，为解决跨平台教学课件制作的问题，提供了一个契机，更以其在课件稳定性、形式表现多样性、良好的交互性以及支持跨平台学习等各方面的天然优势，日益成为备受青睐的一种课件制作形式。二、html5语言简介Html5语言，是超文本标记语言（HypertextMarkupLanguage）的第五次重大修改，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。使用HTML5开发课件，有其独有的优势：1、HTML5对多媒体有良好的支持HTML5课件能将各种课件形式融合起来，实现文字、图片、表格、音频、视频、交互、色彩、创意的有机结合。HTML5支持视频、音频等多媒体元素，它向开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。故此，HTML5开发的课件，让文、图、表、声、画等有机结合。HTML5新提供的canvas元素，使用JavaScript绘制图像，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这些新的特性让人印象深刻，使得HTML5网页课件告别传统网页课件缺乏声影、形式单一等各种不足。HTML5网页课件能使得学习内容的表现形式变得更加丰富，能提升学生之学习兴趣，让学生得以更加专注。2、HTML5课件拥有良好的交互性比之传统Web技术，HTML5的用户体验大大改善。在课件设计开发时，教学设计者可以充分发挥此种技术的优点，并结合内容特点，设计互动的一些学习点，增强学生学习的参2与。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开发工具，与IntelliJIDEA同源，继承了IntelliJIDEA强大的JS部分的功能。WebStorm的智能代码编辑器提供了对JavaScript，Node.js、HTML和CSS，以及其他语言顶级的支持，给代码完成、错误检测，重构等编程工作带来更多的优势。图1：HBuilder界面3四、HTML5课件制作软件H5slide设计和开发图2：H5Slide界面1、H5Slide软件简介H5Slide是Github上的一款开源项目，通过HTML5技术，为用户编辑、播放、控制幻灯片等种种行为提供全套解决方案。相较Powerpoint来说，它要小巧方便的多，它可在各种设备上自由的进行幻灯片之演示。基于云端的处理模式可以让资源得到更容易的分享和传播，而开源模式亦可以使得代码安全性得到一定程度的保障，同时在此基础上，可以使此项目本身能够得到持续性的改进及发展。本研究在此开源项目上，结合教学课件制作要求，对此软件进行了进一步的开发和研究。2、H5Slide软件设计原则该软件在设计目的是提供给用户一款能够替代Powerpoint甚至是Flash软件的方便、快捷易用的跨平台课件制作工具。在软件的设计中，遵循可靠性、鲁棒性、标准化、可扩展、易用性、可维护性等软件工程所必须遵守的原则。3、H5Slide软件功能模块设计为满足用户开发课件的需求，需要对H5slide的功能模块进行设计。H5slide的软件所有的功能都通过单HTML页面配合CSS和JS完成，节约系统资源。在软件设计过程中，充分考虑易用性原则，重点考虑了对不同平台的不同屏幕尺寸的适配性。在进行了针对性的研究后，设计出软件的功能大致如下：用户（课件制作者）可以从不同的客户端（pc、平板、手机等）浏览登陆软件，在软件中，对所需要制作的课件进行方便快捷的编辑、排序、删除等操作。在课件制作过程中，可以插入图片、声音、多媒体等教学资源。在课件制作完成后，可以点击播放按钮全屏在设备上播放，并且可以实现前进、后退、跳转等常用的幻灯片播放功能。根据软件功能模块设计需求，软件页面中划分为几个区块（DIV），每个区块由不同的功4能模块组成：图3：H5slide功能模块设计图（1）顶部菜单（TopBar）标题：提供修改幻灯片的总标题功能。样式：弹出幻灯片样式选择菜单，目前只提供标准样式和反式样式。选择幻灯片播放时切换的动画效果，有12种不同的效果可供选择图4：样式选择模块图播放菜单：在鼠标按下（DropDown）事件触发以后，弹出从头开始播放幻灯和从当前页码开始播放菜单供用户选择。在选择后会进入幻灯片播放页面全屏进行播放。部分代码：divid=editorclass=windowdivid=topbarclass=navbarnavbar-fixed-topdivclass=navbar-inner5aclass=brandhref=#H5Slide/aulclass=navid=title-label-wrapperdata-bind=visible:!editingTitle()liahref=#id=label-titledata-bind=text:titleDisplay,click:editTitle/a/ulformclass=navbar-formpull-leftid=title-editor-wrapperdata-bind=visible:editingTitleonsubmit=returnfalse;inputtype=textclass=span2id=input-titleplaceholder=InputTitlehere...data-bind=value:title,hasfocus:editingTitle/formulclass=navpull-rightliahref=#theme-managerdata-toggle=modaliclass=icon-briefcase/i主题/aliahref=#reset-confirmdata-toggle=modaliclass=icon-repeat/i复位/aliahref=#class=dropdown-toggledata-toggle=dropdowniclass=icon-play/i播放bclass=caret/b/aulclass=dropdown-menupull-rightliahref=#id=preview-btn从头开始/aliahref=#id=preview-current-btn从当前页开始/a/ul!--liahref=#id=publish-btniclass=icon-ok/iPublish/a--!--liahref=#id=remove-btniclass=icon-remove/iRemove/a--/ul/div/div（2）侧边导航栏（Sidebar）版式选择：提供六种不同的幻灯版式供选择。页码：排列幻灯的页码备选，一般分为标题页、内容页和结束页。底部编辑条：可对幻灯片进行添加、删除和排序操作。当选择添加幻灯片是，会弹出添加幻灯页面，提供8种类样式供选择。部分代码：divid=layout-panelh3版式/h3ulid=layout-listclass=thumbnailsdata-bind=foreach:layoutListliclass=span1data-bind=css:{active:key==$root.currentLayout()}ahref=#class=thumbnaildata-bind=click:$parent.clickLayout,attr:{title:title}imgdata-bind=attr:{src:'images/layout/'+key+'.png'}//a/li/ul!--buttonclass=btnMore.../button--/divdivid=page-nav6h3页码!--divclass=btn-grouppull-rightbuttonclass=btndata-bind=click:prevPageiclass=icon-chevron-up/i/buttonbuttonclass=btndata-bind=click:nextPageiclass=icon-chevron-down/i/button/div--/h3divid=page-list-wrapperulid=page-listclass=navnav-tabsnav-stackeddata-bind=foreach:pageListlidata-bind=css:{active:$index()==$root.currentPage()}ahref=#data-bind=text:title||'newslide',click:$parent.clickPage/a/li/ul/div（3）幻灯片内容编辑模块（editor-stag