HTML5程序设计课程混合教学模式

摘要：新工科背景下，本研究针对传统HTML5程序设计课程中存在的知识点关联性不强、学生自主学习积极性不高、学生动手操作能力不强、学生创新能力弱等问题，设计出一种线上线下相结合的翻转课堂混合教学模式，并从课前准备、课中讨论、课后复盘、增加项目实践环节、课程考核评价等方面对该混合教学模式进行详细阐述。与传统平行班相比较，这种教学模式取得了一定成效，能为同类计算机应用开发课程的教学改革提供理论参考和实践路径。

关键词：HTML5程序设计；混合教学模式；翻转课堂；线上教学

为应对新一轮科技革命和产业变革、提升国家硬实力和国际竞争力，国家提出以互联网和工业智能为核心的新工科建设，旨在培养适应新兴产业和新经济形式、实践能力强、创新能力强的卓越工程技术人才。2017年，教育部为积极推进新工科建设，先后印发《教育部高等教育司关于开展新工科研究与实践的通知》《教育部办公厅关于推荐新工科研究与实践项目的通知》，积极探寻工程教育的中国模式。2018年4月，教育部印发《高等学校人工智能创新行动计划》，要求积极开展新工科研究与实践。2020年5月，为推进新工科建设再深化、再拓展，教育部决定在高等学校培育建设一批未来科技学院。在新工科建设背景下，HTML5程序设计课程作为周口师范学院软件工程专业的核心课程之一，仍存在一些不足。课题组结合该课程的特点，尝试对其教学模式进行探究。

一、HTML5程序设计课程的目标及地位

国家教育主管部门明确指出，地方高校要对区域经济发展和产业转型升级发挥支撑作用，充分利用地方资源特色，培养大批具有较强行业背景知识、工程实践能力、胜任行业发展需求的应用型和技术技能型人才。课题组所在学校的软件工程专业立足于学校“为区域和国家主导产业、新兴产业提供有力的人才与智力支持”的服务定位，着力培养具备科学思维能力、软件开发能力、软件工程实践应用能力和创新能力的应用型人才。移动应用开发是软件工程专业的研究方向之一，该方向旨在培养具有扎实移动应用开发理论基础和应用能力、较强的专业技能和职业素养的高素质技能型人才。围绕这一目标，该方向设置了一系列移动应用开发相关课程。HTML5程序设计课程是移动应用开发系列课程中的一门专业必修课，该课程开设于大二下学期，通过让学生学习HTML5标准的新特性，着重培养学生采用HTML5新技术设计、开发网站和移动APP前台的能力，为学生以后从事Web开发工作打下坚实的基础。该课程前接网页设计与制作和JavaScript等课程，后连HTML5移动应用开发、软件工程综合实践和组件化开发等课程，发挥着承上启下的重要作用。

二、HTML5程序设计课程内容及存在的问题

HTML5程序设计课程围绕培养学生HTML5新标准的理论知识和独立设计开发网站、移动APP前台能力的课程目标，设置了HTML5新增页面元素、Canvas绘图、多媒体元素、获取地理位置信息、离线Web应用、本地Web存储等课程知识内容。在实际教学过程中，课题组所在学校仍然采用“教师讲授为主，学生被动接受”的传统教学模式。由于该课程具有理论与实践并重的特点，这种传统的教学模式在实际应用中存在一些不足。

（一）知识点关联性不强，学生难以记忆

由于课程知识点比较多且相对零散，知识点之间缺乏内在逻辑，不同章节的知识点之间关联性较弱，学生在学习过程中容易出现顾此失彼的现象。传统的教学模式不便于学生对零碎内容进行理解和记忆，也间接导致学生学习兴趣不高。

（二）学生自主学习积极性不高

由于课程采用“教师讲授为主，学生被动接受”的传统教学模式，大部分学生习惯等教师讲完新知识后，再跟着教师的思路进行巩固练习，没有养成主动学习的良好习惯，无法有效激发自主学习动力。虽然教师也会经常强调预习的重要性，并督促学生进行课前预习，但实际效果欠佳，学生自主学习的意识和动力不足。

（三）学生动手操作能力不强

本课程可分为理论课和实验课，课时占比为1∶1。在理论课上，教师通过讲授法、案例法等教学方法对知识点进行讲解；在实验课上，教师根据教学内容设置一定的实验题目，学生利用实验课及课余时间完成实验作业。在做实验题目时，大部分学生通过参考书上的案例代码完成。然而，想要达到对理论知识熟练掌握并举一反三的程度，仅靠完成实验题目远远不够。学生在脱离课本后，自主编写代码能力明显减弱。

（四）学生创新能力弱

HTML5程序设计课程是一门非常注重实践的课程，不仅要求学生掌握课本上的核心理论知识，更希望学生在遇到一些需要综合知识或创新思维解决的实际问题时，能够灵活运用所学知识处理各种棘手问题，把课本中的理论知识真正应用到实际项目中。然而，大部分学生的创新能力较弱。鉴于实际教学过程中存在的以上问题，课题组尝试采用一种新的教学模式来改变教学现状，促使学生更好地完成课程学习。

三、线上线下相结合的翻转课堂混合教学模式

翻转课堂教学模式源于美国迈阿密大学，是指重新整合各个教学环节，将教学过程中的“以教师为主”转变为“以学生为主”。这种教学模式强调以学生为主体，教师只起到引导作用。翻转课堂教学模式把教学过程分为课前、课中和课后三个阶段。在课前阶段，教师全方位把控教学内容，通过录制短视频对教学核心内容进行提炼，学生通过自主观看短视频完成对课程内容的初步理解和吸收。在此过程中，教师可以适当进行督促和引导，从而满足学生的个性化学习需求。在课中阶段，教师和学生同时参与并在线下课堂中完成教学。此阶段主要由教师有针对性地对学生在课前学习中遇到的疑问进行解答，学生通过集体讨论、分小组学习等形式进一步深化学习。在课后阶段，教师可以适当给学生留一些作业，学生借此对学习成果进行巩固。最后，教师通过多种评价手段检验学生的学习效果，进而合理安排接下来的课程内容。

四、混合教学模式在HTML5程序设计课程中的应用

鉴于线上线下相结合的翻转课堂混合教学模式具有教学信息明确、视频短小精悍、便于学生复习等特点，可以弥补一些常规教学中的不足，课题组尝试把线上线下相结合的翻转课堂混合教学应用于HTML5程序设计课程教学中，分为课前、课中、课后等阶段进行阐述。为增强学生的动手编码能力和创新能力，课题组在实际教学中还引入了项目实践环节。

（一）课前阶段

在课前阶段，教师需要为学生准备好课程章节必需的预习资料。学习资料应尽可能丰富，包括但不限于微课视频、在线学习文档、练习题等。考虑到现在的学生平时喜欢使用移动平台，因此，可以把微课视频作为课前学习的主要方式。微课视频不应简单罗列知识点，还应尽可能增加知识的趣味性。每个微课视频时长尽量控制在15分钟以内，以免引起学生的视觉疲劳。为了充分吸引学生的注意力并调动学生的学习自主性，课题组还在视频播放过程中设置1~2道必答题目，学生只有答题后才可以继续观看视频。在上课前一周，教师通过网络平台把微课视频等相关学习资料推送给学生。由于时间比较充裕，学生可以充分利用课余时间进行自主学习和探索，对有疑问的地方进行标记。考虑到部分学生的学习主动性不强，教师可以在课前进行多次提醒。学生在看完视频后，可以通过在线平台上的自测题目对预习成果进行检验。这些均依托超星学习通教学平台完成，该平台能够对学生的学习全过程进行监测，并生成统计数据。微课视频除了帮助学生完成初步学习，还可以用于学生的课后复习。便捷的移动平台能保证学生随时随地利用碎片时间开展学习活动。

（二）课中阶段

课中阶段由学生和教师共同在线下课堂完成，学生仍然是学习的主体，教师起到引导作用。首先，教师主要对学生在微课视频、自测题中遇到的疑惑进行解答。其次，为了加深学生对知识的理解，教师可以对知识点进行适当扩展，并通过小组讨论、分组学习等形式启发学生，帮助学生对知识进行内化吸收，拓宽知识的广度和深度，并最终达到厚积薄发的效果。在此阶段，教师要特别注意，在组织学生进行讨论时，可以适当对学生进行引导和鼓励，始终围绕完成课程目标的暗线来开展课堂活动。有效的课堂讨论环节能够增强学生的表达能力、逻辑思维能力和发散思维能力。

（三）课后阶段

课后阶段主要在线上和线下完成。在此阶段，教师通过在线学习平台给学生布置一些不同难度的练习题目，包含常规练习题和拓展练习题。学生通过答常规练习题对课程内容进行巩固，通过答拓展练习题对所学知识进行综合运用和创新。不同难度的练习题目能满足不同学习程度的学生需求，让不同层次的学生获得学习的满足感和成就感，进而激发他们自主学习的动力。为能够及时了解学生在学习过程中遇到的难点，课题组在超星学习通平台设置了自由讨论板块，学生可以及时在上面发帖求助或分享经验。最后，借助超星学习通平台，课题组可以及时对学生的学习测评结果进行总结分析，并根据测评结果改进教学设计、调整教学进度，从而形成良性循环的学习模式。

（四）增加项目实践环节

本课程属于应用开发类课程，课程目标除了要求学生理解并掌握基本的理论知识，更注重培养学生动手编码的能力。为解决常规教学中学生动手操作能力弱的问题，课题组在原有课堂基础上精简课程内容，在学期结束前一周为学生安排项目实践环节，以项目形式激励学生动手编写代码，让学生在自主编写代码的过程中提升创新能力。在一周的项目实践中，课题组要求学生自由分组完成实践题目，每组不超过5人。本课程的教学内容和网站开发相关性大，实践题目均为网站开发项目，以教师命题为主，学生也可以自拟题目。实践项目要求学生至少完成10个网页的代码编写，并能把本课程所学知识应用到项目中。学生完成实践项目后，要以小组形式答辩并撰写项目报告。通过一周的项目实践，学生的软件开发能力、代码调试能力、团队协作能力得到显著提升。

（五）考核评价

传统的考核一般只包含期末考试和平时出勤、作业等，容易出现“一刀切”的情况，在评价学生学习成效方面存在一定的局限性。期末成绩应该是对学生的学习过程和学习结果的综合评价。超星学习通平台能对学生各个学习阶段的学习情况进行监测，包括视频学习个数、章节学习次数、出勤情况、章节测验情况、观看直播情况、分组完成任务情况、完成作业情况、参与讨论情况等，并能生成统计数据。课题组在教学实践中采用了一种新的综合考核评价方式：把学生在超星学习通中的课程学习数据作为期末考核成绩的一部分，将本课程的期末成绩细分为平时成绩、期末考试成绩、项目实践成绩三部分，平时成绩占40%，期末考试成绩占40%，项目实践成绩占20%。其中，平时成绩中平时作业占30%，签到占10%，课程视频学习占30%，参与讨论占15%，分组完成任务占15%；期末考试主要以学生上机完成编程题为主，重点考查学生的代码编写能力和代码调试能力；项目实践成绩中项目完整度占50%，文档编写能力占20%，表达能力占15%，创新能力占15%。采用多维度数据对学生的学习情况进行评价，能更客观、全面地反映学生的学习过程和学习效果。

五、混合教学模式成效

课题组负责周口师范学院2019级软件工程专业2班和3班的HTML5程序设计课程教学。为检验上述教学模式的效果，课题组在初次使用混合教学模式时，只应用于2019级软件工程专业3班。2019级软件工程专业2班作为对照班，仍采用传统教学模式。初期，混合教学模式的教学效果并不明显，随着课程的推进，2019级软件工程专业3班的学生上课更加主动，能够积极参与教学讨论。通过项目实践，2019级软件工程专业3班学生的动手操作能力、自主分析问题能力和解决问题能力明显优于2班，线上线下相结合的翻转课堂混合教学模式效果开始显现。HTML5程序设计是一门理论和实践并重的课程，具有知识点零散、不利于学生理解和记忆的特点。面对新工科建设对计算机相关专业提出的新要求，针对教学过程中存在的学生编码能力、创新能力不足等问题，课题组通过线上线下相结合的翻转课堂混合教学模式改善了传统教学中教师“满堂灌”的情况，在一定程度上避免了传统教学模式下课堂活力不足的情况。通过课前向学生推送微课视频等自学资料帮助学生初步理解并掌握知识点，通过在视频中增设问题激发学生的学习兴趣和学习自主性，引导学生积极参与教学过程；通过课中讨论环节加强学生对知识的深层理解，培养学生的表达能力和发散思维；通过课后巩固增强学生举一反三的能力；通过项目实践增强学生的动手实践能力、团队协作能力，激发学生的创新能力，最终提升学生解决问题的能力和计算机素养。这种教学模式也可以应用到同类计算机应用开发课程中。

作者：郭丽萍 卢欣欣 林新然 单位：周口师范学院计算机科学与技术学院