线上线下混合实践教学课件相关技术研究

张明 李晓冬

摘 要：线上线下混合实践教学越来越受到各高校的重视。实践教学网络课件平台，有别于通用教学平台，需要对相关技术进行深入研究。跨平台的多媒体在线课件具有体验好、随时随地访问等特点，教学课件发展的一个重要方向。本文研究了实践教学网络课件平台相关技术，提出了一种基于B/S结构的跨平台方案，实现了实践教学在线课件演示平台。

关键词：线上线下混合教学;实践教学课件;跨平台;TouchPDF

中图分类号：TP311.5 文献标识码：A

1 绪论

互联网技术与智能终端的发展给传统教学课件带来巨大的冲击。面对全新的学习平台与方式，传统课件已难于适应新时代下教与学的需求。随着信息技术的迅猛发展，不断涌现的共享课程、网络课程、慕课、微课等网络教学的形式深受教师和学生的喜爱[1]。

2020年初，新冠肺炎疫情使得高校的大规模开展了线上教学的顺利开展。广大师生经过初期的适应后，能够完成在线教学的任务安排。随着各高校完成开学，教学任务逐步向线上线下混合教学以及线下教学过度。

在线上教学过程中，多媒体教学资源得到了大规模应用，也暴露出不足。对实践教学而言，从线上的“知识课堂”走向线下的“能力课堂”[2]是提高实操能力最重要的一环。在实践教学中，由线上教学过渡到线下教学尚有很多不足需要完善，很多技术需要提高，教学课件就是其中之一。

2 通用平台在实践教学中的不足

通用的线上教学平台能够实现线上教学许多基本功能，为疫情期间的线上教学的技术保障。疫情期间采用教师采用的通用教学平台多为直播类的在线教学平台，如钉钉课堂、腾讯课堂等。此类教学平台提供的功能主要包括：教学直播、课堂回放、视频播放、师生互动（包括文字、语音、课堂测验、签到等）。

关少华与范爱玲[3]分析了线上教与学存在的问题，提出疫情期间网络授课存在过度讲解，角色刻板等屏障。上述屏障的出现，不仅由传统习惯引起，还由直播平台的特性决定。此类平台对实践教学造成的教学屏障更加突出，主要表现在：

（1）直播教学过程中是教师为主动方，而学生为被动方。尽管拥有师生互动的功能，但使用体验不佳。线上教学过程中，教师对师生互动较为谨慎，学生参与度较低，无法满足实践类课程的以学生为主的教学要求。

（2）通用线上教学平台所采用的教学课件为传统课件，多以单机文档为主，典型的文件格式包括Word、Powerpoint和PDF文档等形式，其主要缺陷包括：多媒体表现较弱;分享方式较为落后;内容散乱，功能不够友好。

（3）教学平台不统一，学生体验差。线上授课期间，教师选用的教学平台不尽相同。经作者调查发现，线上授课期间，学生至少需要安装3种以上线上教学平台的软件，以及2种以上辅助教学平台。软件工具、教学资源繁杂，反而成为学生的负担。

（4）线上教学与线下教学割裂，二者无法做到有机结合。对实践教学而言，最终目标还是从线上走向线下，以提高学生的实操能力为最终目标。线下实操过程中，学生難免需要查看各种教学资源。散乱的教学资源会大大降低学生学习过程中的体验，影响到学习效果。

3 线上线下混合实践教学课件平台的技术选择

针对实践教学特点，在面对线上线下混合学习以及课内课外教学活动，网络多媒体课件成为高校实践类课程教学中的必选项之一。相比于传统课件，在线的跨平台多媒体课件资源更加方便快捷，学生可以随时随地进行预习或复习，帮助学生快速消化吸收教学内容[4]。跨平台的实践类教学课件整合了各种多媒体资源，相比传统课件更加生动。此外，与通用教学平台相比，内容组织更加灵活，学生拥有更大的学习自主性，对提高教学效果有很大帮助。

3.1 系统架构

C/S（Client/Server）和B/S（Brower/Server）实现在线课件的两种基本框架。C/S结构虽然在交互性、易用性等方面表现优秀，但是为兼容性低、编程工作量大。因此，对于面向跨平台教学课件，C/S架构增加了建设成本。B/S架构的优点则是总体成本低、维护方便、分布性强、开发简单。随着相关技术的成熟，B/S框架在交互性和易用性方面得到长足的进步。而B/S架构在开发和维护方面的优势，是定制化实践教学课件的不二选择。

3.2 B/S相关技术

Ajax（Asynchronous Javascript And XML）是一种异步交互的Web应用技术，使Web应用的交互特性、反应的速度、柔性迈向了更高、更新的层次[5]。jQuery是基于Ajax技术的轻量级框架，通过封装实现Ajax的调用，使得Web开发更加简单、便捷。jQuery在兼容性、交互体验等方面有巨大的优势。鉴于jQuery的优点，技术人员在jQuery的基础上，针对不同的应用场景编写了大量的开源脚本库，使得开发基于jQuery框架的在线课件平台成为可能。

4 基于jQuery框架的在线课件

PDF（Portable Document Format）文档Adobe Systems公司开发的跨平台文件格式，使用了工业标准的压缩算法，具有文件小、易于传输与储存等特点。同时，PDF文件还支持包括图片、超文本链接、声音和动态影像在内的多种内容。上述特点使得PDF格式成为在线课件存储文本与图片的首选文件格式。因此，本文所用在线课件的静态内容以PDF文档为基础，并配合音频及实操视频等多媒体内容构成。在线课件平台的构架如图1所示，jQuery框架负责PDF文件的读取与显示、用户操作的响应以及音、视频播放操作。

TouchPDF是基于JQuery的PDF文件查看器，不仅能够在浏览器中显示PDF文档，而且支持滑动与缩放等移动端手势。同时，TouchPDF还具有简单易用，浏览器兼容性好等特点。TouchPDF的基本操作如下所示：

$（function（）{

$（"#myPDF"）.pdf（{

source："./instrument/d_ch2.pdf"，

tabs：[{title："基本操作"，page：1，color："orange"}，

{title："测量操作"，page：10，color："blue"}，

{title："进阶操作"，page：20，color："green"}，

{title："练习"，page：32，color："red"}，]

}）;

}）;

其中，source属性指定pdf文件的相对路径;title属性包含导航按钮对应的文字、页码以及颜色等信息。

课件的显示界面如图2所示。屏幕顶端为实操视频导航栏，视频导航栏下方为课件区。课件区的右上方为操作按钮区，可以通过点击对应的按钮进行向前与向后翻页操作。为支持移动端设备，翻页也支持滑动操作，左右滑动即可实现翻页。此外，为了适应移动设备（手机与平板）的显示需要，按钮区还包括了放大和缩小的操作按钮。课件区的左右两侧为章节导航按钮，点击相应的内容，即可跳转到指定章节，免去了频繁翻页的操作。

5 结语

本文通过分析疫情期间的线上授课经验与教训，提出了一种面向线上线下实践教学的网络版教学课件。本课件系统基于HTML与Ajax等浏览器技术实现跨平台的在线多媒体课件展示技术。该系统经过测试和使用，通过与传统的课件相比，具有效率高、操作简单等优点。因此，本文对于在线多媒体课件制作具有一定的价值和意义。未来，将进一步利用云计算技术，对课件进行优化，提高网络版课件的并发能力，为广大师生提供更好的教学服务。

参考文献：

[1]谷艳华，朱艳萍，杨得军，等.用于网络教学的虚拟仿真交互式课件研究[J].图学学报，2016，37（04）：545-549.

[2]郭庆，海莺，赵中华，等.打造线上线下大实践平台构建创新创业教育新模式[J].实验技术与管理，2016，33（5）：4-6.

[3]关少化，范爱玲.线上教学的教与学屏障及其突破[J].北京教育（高教），2020，（05）：55-57.

[4]杜凡凡.多媒体课件在线制作及管理[D].华中师范大学，2019.

[5]潘杰，周传生.基于jQuery框架的Web研究与实现[J].沈阳师范大学学报（自然科学版），2015，33（01）：96-99.

基金項目：2018年度广西高等教育本科教学改革工程项目（2018JGB184）

作者简介：张明（1979—），男，汉族，山东烟台人，工学硕士，高级实验师，研究方向：电子电路;李晓冬（1980—），男，汉族，广东东莞人，工学硕士，讲师，研究方向：电子电路。