基于独立学院SPOC的实践教学改革研究——以《Web UI设计（HTML5）》课程为例

白丽瑞 天津大学仁爱学院 宋琛 思问科技（天津）有限公司

引言

对于Web的开发主要分为前端和后端两部分，后端的开发包括逻辑处理、数据库连接以及服务器层面的处理等，而前端则主要包括与用户直接接触的网页（包括页面的样式、交互、特效等）。前端开发的主要职责是用HTML来制作页面，用CSS进行样式和布局的设计，用JavaScript脚本语言来实现页面上的互动逻辑。

HTML5作为众多前端技术中的新一代Web开发技术，已经有越来越多的开发者关注和使用。HTML5使Web开发标准产生了质的飞跃，使原来比较死板并且保守的Web应用变得功能更加强大，形式更加绚丽多彩。HTML5提供了功能非常丰富的标签，可以更好地实现Web应用多元化的目标，开发人员也可以更加轻松地在实现在网页中嵌入视频、音频，输入信息自动验证、图形渐变以及动画效果等。它的可用性和移植性也表现更好，并且可以实现跨平台，所以程序开发更方便，用户体验也更好，除此之外，HTML5更适用于移动应用和手机游戏研发，这也是移动互联网的发展趋势。

我校开设Web UI设计（HTML5）课程，作为计算机系专业选修课。主要用于讲授如何使用HTML5技术对Web用户界面进行设计与开发。课程通过对HTML5新语法结构、页面架构和新的表单、多媒体、元素拖拽、图像、动画、数据存储、离线应用以及常用API的简要介绍，又增加一部分CSS3和JavaScript基础知识的内容，希望使学生能够对Web前端开发技术能更好的理解、掌握和运用。

1 SPOC方式引入

SPOC是将MOOC的一些教学资源比如学习资料、微视频、测验、自动评分、站内论坛等功能应用到比较小规模的实体校园的一种新型教育教学模式，它将优质的MOOC课程资源与课堂教学有机地融合起来，这样既优化课程教学的流程和教学的结构，从而提升教学质量和教学的效果，又能实现对教学重构和创新。

国内外有一些学校也在做课程SPOC实验，比如已有一些研究将SPOC应用于虚拟现实技术试验，VB程序设计，C语言程序设计等课程的教学改革中。但是对于作为我校特色的Web UI设计（HTML5）课程，因为相对开设的学校比较少，因此使用SPOC进行教学改革的就更少。

从事Web前端开发是计算机专业学生毕业后一个很重要的就业方向，如果在学校教授的内容能够紧跟企业的需求和行业的发展标准，那么一方面可以提高学生的积极性和学习兴趣，另一方面也可以为企业、为社会输出更合适、更有用的人才。Web UI设计（HTML5）课程本身就是针对当前的形势开设的，并且目的就是为了应用，因此教学方式应当更偏重实践。该课程使用SPOC的方式，教师将教学内容分成多个知识点，每个知识点录制成一段视频，或者某些小案例开发过程也录成视频，课前让学生学习，课上的时间布置课堂练习及作业，学生们上机实际操作，遇到问题及时引导和帮助。

2 实践教学模式

实践教学除了可以巩固理论，加深对理论知识的理解和认识之外，还是培养具有理论联系实际、动手能力强、创新意识高的工程技术人才的一个重要环节。对于Web UI设计（HTML5）课程，还可以将一些优秀项目案例补充到教学中，使实践教学与项目案例相融合。

因为Web UI设计（HTML5）课程开设初衷更侧重学生的实际动手操作能力，而非理论本身，因此使用传统的教学方式已难以很好的满足教学预期，希望有一些新的教学方式和方法的补充，从而最终提高教学质量和效果。Web UI设计（HTML5）课程面向的主要工作岗位是Web 前端开发，因此在学习中实践部分要加大，案例引用要增加是必然要考虑的问题。但是如果纯实践操作的话，又容易漏掉很多知识点，毕竟课程有时间限制，不能面面俱到，因此还考虑引入SPOC模式，来对实际操作之外的知识进行补充。

教学采用案例驱动的方法，案例可以通过书籍资源、网络甚至与一些相关企业合作来获取。课堂教学以学生实践为主。教师更多的是充当技术支持的角色，课上或课下帮助学生解决bug。

根据Web UI设计（HTML5）课程内容，将案例教学法运用到以下几个专题中得到如图1所示知识讲授图。

3 基于独立学院SPOC的实践教学改革探索

3.1 SPOC+实践教学模式的使用

SPOC课程开设主要有两种方式：一种是直接复制已有资源，通过高校之间的相互协作，实现教学视频等资源的共享；另一种就是根据教学内容和学生的具体情况整合各高校的相关MOOC资源、选用的教材，以及结合教师自身的项目经验等，来建立自己的课程资源库。针对实际情况，我们选用第二种方式，因为授课学时、面向群体和授课条件的不同，自建课程资源库将更有针对性，更具实用性。但是此种方式对教师也提出了更高的要求，并且势必花费更大的精力，来需要参考和学习大量的MOOC视频，网络资源，企业项目案例等。多位教师可以打破课程限制结成课程组，相互协作，相互学习，多讨论交流，最终形成适用性更高的整套学习视频等教学资料。

3.2 辅助教学工具的使用（雨课堂、FSCapture、XMind 8等）

课程教学中充分利用一些辅助教学工具，更能提高学生学习的兴趣、积极性、自主学习和创新能力。

雨课堂是一款主要通过在PowerPoint上加载插件的方法并且实现与微信关联，，可以将带有MOOC视频、语音课件、习题等直接推送到学生手机端，并且可以实现课堂上实时答题、弹幕互动等等功能的软件。课堂派功能与雨课堂相似，这两种软件是当前创新教学方式中使用最多的。本课程选择使用“雨课堂”与“课堂派”结合的方式，课件中加入视频、语音，甚至随堂测试选用“雨课堂（”因为本人感觉“雨课堂”线下使用更方便）、其他常用的功能比如简便快捷的考勤签到，测试、弹幕，互动、话题、公告、资料和作业的推送及批改等功能选用“课堂派”来完成（因为这类功能很多要求学生课上使用手机端来操作，因此使用“课堂派”更为方便，并且我校其他课程选用也较多）。

FSCapture是一款抓屏工具，体积小巧、功能强大。本课程用的最多的是它录制视频的功能，该软件录制视频分辨率、音量等都可以自主设置，还能对视频进行剪辑（补充视频对应的文字说明，裁剪不必要内容等），而且录制后无水印。

XMind是一款非常实用的商业思维导图软件，它易用、高效的特点非常明显。本课程主要将该软件用于对课程知识体系脉络的梳理和整合，使知识以更有序并且结构的方式组织和呈现，也可以使学生更清晰形象的了解各知识点之间的关系和层次。教师还将该软件推荐给学生，希望学生在分析问题时用于对思路、灵感的记录以及对知识的学习和记忆。

UMU是一款相对雨课堂用途更广泛的软件，功能也近似，但是在做微课、短视频、教学直播等方面更方便。该课程主要用其来对课程作业进行讲解视频的录制，录制完成后，生成二维码发送给学生，学生扫描就可以查看作业讲解视频等资源。

3.3 实际应用案例与先进开发框架的补充

此部分在本文实践教学模式部分给出了一部分说明。Web UI设计（HTML5）课程中的应用案例除了从教材和网络上搜索一部分外，教师还实地去一些企业学习交流，获取了一些企业实际项目案例。通过对案例的加工处理，提取可以应用到课堂实践教学中的资源，它们一部分可以作为某些知识点的应用，一部分可以作为课堂练习作业。此外，结合我系一些教师的工作经历，简单介绍国外Web前端工作模式，以及一些框架技术的使用，比如React+ Redux，Gtm等。

4 总结

Web UI设计（HTML5）课程是一门偏向就业的很重要的专业课程，也是我校比较有特色的课程之一，希望使用SPOC方式，以及实践教学等方法，进行课程教学，改变传统的课堂教学模式，从而使课程教学更高效率，更有效果，更贴近以后实际工作，并且潜移默化中提高学生的自主学习能力、团队协作能力和创新能力。