职业院校Web前端实训室这样建，让教学更简单！

职业教育是国民教育体系和人力资源开发的重要组成部分，肩负着培养多样化人才、传承技术技能、促进就业创业的重要职责。日前，“Web前端开发”这一门与实际工作岗位联系密切且实践性较强的课程愈加受到人们的重视。自互联网进入Web2.0时代以来，特别是近年来随着物联网与大数据的发展，各种类似桌面软件的Web应用大量涌现，网站的前端发生了翻天覆地的变化，除了传统的文字与图片，视频、语音等其他各类媒体也在网页上得到了大量的使用，使得网页更加生动形象，也让用户有了更好的使用体验。与此同时，社会对Web开发人才的需求不断增加，从而使得Web开发类课程的重要性日益突出。因此，如何提高课程教学质量和学生的学习效果是任课教师必须要认真思考的问题。基于此，本文在对目前职业院校课程教学信息化改革所面临的问题进行认真分析的基础上，以中高职院校计算机学院“Web前端框架应用”为例，从课前准备、课堂实施（课程教学+实验教学）、课后拓展、期末考核、中职升学模拟技能考试平台和学习行为统计等六个方面阐述基于灿云云课堂泛在化、个性化、精准化、理实一体化全流程教学，让课堂效率倍增教学模式，并列出具体的实施步骤，以期对其他兄弟院校课程教学信息化改革提供借鉴。

一、职业院校Web前端教学现状

Web前端技术是一门新兴技术，许多职业院校都开设了这门课程，然而教学效果不尽如人意，培养的学生无法满足企业的需求。据分析，问题可能有以下几种情况：

1.教学目标重理论轻实际：在教学目标设计上，课程教学目标多以“掌握、理解、了解”等进行描述，注重对知识掌握程度的要求，弱化了对学生能力培养的要求。在教学模式上，不少教师仍然按照传统“填鸭式”开展教学，课堂还是以教师为中心，注重教师教了多少而忽视学生学了多少，重知识的传授和获取，轻知识的加工和问题的思考，学生只需按部就班的“依葫芦画瓢”，就可以完成相应的学习。

2.教学内容简单：课程主要包含了HTML语言、CSS样式和JavaScript等前端开发基础知识，而目前主流的前端框架技术却很少涉及。

3.课程前后衔接不够，前后端交互开发的教学案例较少，导致前端页面设计和后端功能开发成了“两张皮”，不少学生不能将Web前后端开发技术进行有机整合。

4.考核方式陈旧：很多教师仍然采用“课堂授课—考前复习—试卷笔试”为主的传统考核模式，考核标准还是以知识考核为主，缺乏对学生能力达成的考核。在这样的模式下，80%的学生认为只要上课认真听、考前好好复习，期末笔试争取高分即可，从而导致很多学生专业课程得分很高，表面是个“优秀学生”，但是利用所学知识解决实际问题的能力较弱。

5.教学实践环境与行业企业有较大的差距，主要表现在以下方面：

①学校需要不断为师生配备合适的本地研发工具（如：多核高内存的计算机设备、Mac 笔记本电脑），这些设备可能价值不菲，而且需要定期的更新换代，学校需要更多经费投入。

②新加入的学生，在正式开始开发前，需要配置复杂的本地开发环境，安装特定的软件及插件，并熟悉项目的研发流程及各个线上系统；部分项目因为网络配置等问题，可能第一时间还无法在本地启动，还会耽误不少额外的配置及调试时间，增加了教学难度。

③学校需要投入较多的人力资源，才能构建起匹配教学需求的安全管控系统环境。

二、基于灿云云课堂的“Web前端框架应用”课程教学模式构建

云课堂是灿云凭借十多年在职业教学领域耕耘，以“微服务、虚拟化、全栈云”三大核心技术为支撑，助力学校高水平专业建设。该平台采用微服务架构，将平台服务精准分为公共基础、公共应用、专业应用服务。公共基础服务精确为字典、banner、用户权限、文件、认证、网关、订单、转码、平台运营、学校运营、日志、登录、搜索等；专业应用服务精确为KVM虚拟化、容器虚拟化、代码评测、工具、资源、环境等；公共应用服务精确为课程、考试服务、云盘、云优选、题库、活动、工具等。不同的微服务进行因材施教和按需施教，可以非常方便教师实施个性化的教学模式、具体的教学内容、针对性的教学流程，精细赋能Ｗeb前端框架应用教学。老师利用平台非常方便构建多层次、立体化的教学课程资源，拓宽了学习渠道，极大地调动了学生参与学习的积极性，提高了教学效率，实现了老师在家、在办公室、在教室都可轻松进行无差异环境备课，实现了与学生的“课前”“课中”“课后”和校内校外有机结合的网络在线学习、在线实践操作，并逐步形成课堂教学与云教学相结合的混合式教学模式。该平台在教学中的应用，打破了校园时空限制、教学环境限制，可实现学生的远程学习和弹性自主学习，远程实训和弹性自主学训。灿云云课堂充分利用KVM和容器等多种虚拟化技术进行精准化教学，根据不同的教学内容选用不同的虚拟化技术、不同硬件资源，如GPU、CPU、算力、不同的实验环境，对不同软件开发语言（C、Java、Python、html等）、同一课程的不同阶段开展精细化教学。灿云云课堂还可根据教学的需求进行公有云、私有云、混合云等不同方式的部署，可以适应学校各种不同的复杂网络环境和资产入库需求而且性价比高、稳定性强。平台还将科研、技能大赛、1+X认证等全流程无缝衔接各种计算机网络、智能化安防、物联网、人工智能等前端应用场景，更加高效开展具有多种功能的开放式、全流程、理实一体化的Web前端教学平台。基于灿云云课堂的“6+6”互动教学流程如下图所示。

2.1课前准备

课前准备分为两个部分，教师备课与学生预习，是教学非常重要的一环，Web教学虽实践性较强，但在课前进行准备环节也必不可少，传统的课前准备一般是教师基于课本备课、布置预习任务，学生直接看课本预习，但课本的知识过于固定，不一定适合学生现阶段的学习程度等，导致预习效果非常不佳。灿云云课堂应用于课前准备，可以解决一系列问题。

（1）教师备课

灿云云课堂可以作为一个高效率备课平台，将不同属性的资源进行转化，还可以进行多源格式文件、资源融合。云课堂还是全能型的备课平台，备课内容可以是理论教学内容，也可以是实践教学内容，还可以是作业和考试。

①资源进行转化：如下图所示，教师用平台提供的课程制作工具，能够非常方便的将教师自有教学资源、平台共享课中内置Ｗeb前端的教学资源和云优选课中的教学资源以及互联网上优质的教学资源进行整合成我的课，教师也可以将“我的课”发布到“共享课”中方便其它老师使用。

②多源格式文件、资源融合：如下图所示，教师利用云课堂的课程制作工作，非常方便将视频、音频、超链接、编程代码、PPT、WORD、EXCEL、压缩文件、PDF等融合成一个新HTML文件中，从而构建“我的课”。

③全能型备课：云课堂除了非常方便老师进行日常理论教学备课，还可以对实验教学进行备课，如进行软件工具、安装环境、实验资源的提前准备。

（2）学生预习

教师可绑定一个至多个班级，针对不同班级开放不同章节点后，学生即可根据教师布置的不同章节点的预习任务进行预习。

平台还提供互动模块，课前教师可发布讨论活动，询问学生对于HTML的了解，通过师生之间、学生之间交流互动，吸引学生参与兴趣，主动进入课程学习状态，让学生在大脑里建立起HTML初步印象。

2.2课堂实施

课堂实施分为课程教学、实验教学、课堂活动，教师根据课程教学需要进行灵活安排。

（1）课程教学

云课堂提供面对面教学与远程教学，学生预习HTML章节点后，教师可随时预览当前章节内容，根据提前编辑好的内容进行理论讲授，让学生对HTML理论进行学习，并可随时发布章节测试、或发布任意形式任务（当堂发布或转发至学生群，学生扫码即可回答）了解学生学习情况，或转到实验教学进行理论与实验的结合，如下图所示。

（2）实验教学

对于Web前端的学习，需要让学生进行实践操作，培养学生综合素质。灿云云课堂共享课提供实验内容，呈现各类程序设计语言及Web前端技术开发、调试、运行环境，无需师生另外搭建，方便教学。能力较强的教师也可自行创建实训内容进行教学，在此以”HTML5简明教程“实验为例。

①添加实验：准备环节结束后教师可编辑HTML实验文档，介绍HTTP相关概念，发布第一个网页示范代码，向学生展示实验要求。

②开始实验：师生根据教学要求，选取实验，然后点击“开始实验”就进入实验页面，实验页面采用双屏展示，左侧为实验文档区，右侧为web前端开发实践操作区。平台提供提供在线VSCode编辑器和开发环境，集成了代码编写、分析、编译、调试等一整套工具能智能实现代码自动补全，学生可以在线提交实验内容，老师可以在线查看编程结果，让老师教学过程更高效，管理运维更方便，初学者更容易，入门更简单，快速进行最佳的学习状态。

③点击预览，学生即可看到自己编写的第一个HTML页面。

④在线问答：HTML简明教程虽对学生来说比较简单，但仍有些基础较差的学生可能会有问题，可采用在线问答向老师寻求帮助，实现实验教学中的师生互动。

⑤实验反馈：实验中学生记录实验笔记、实验报告，实验结束后教师可查看学生实验完成情况以及对实验的记录，以便后续有针对性进行指导。

（3）课堂活动

教师可通过签到、主题讨论、提问、分组任务、投票、问卷、计时器等课堂活动绑定“HTML简介”教学课堂，配合教师讲授，发挥课堂中教师主导地位、学生主体地位，实现教学双边活动，提高教学效果。如教师发布签到活动，了解学生“HTML简介”课堂到课情况。

2.3课后拓展

知识的学习离不开任务（作业）的巩固，云课堂提供标准形式任务（作业）、任意形式任务（作业）两种形式。

（1）布置任务（作业）

如下图所示，教师可选择平台提供的标准形式任务（作业），包含单选题、多选题、判断题、填空题、主观题，从题库选择或自行创建，创建完成的题目自动进入题库；也可自行创建任意形式（作业），包含音频、视频、压缩文件、文档等多种形式题目。

如完成“HTML简介”章节学习后，教师可发布”HTML简介“章节练习题，设置提交时间，对学生学习HTML成果进行检验，并可自行对”隐藏答案“按钮进行开关设置，选择合适的节点让学生核对自己的答案，也可在平时通过作业模块在题库选题或创建题检验学生对所学知识是否融会贯通。对于任意形式任务（作业），不限形式，不限地点（可转发至群里），学生扫码即可作答，实现多维度检验。

（2）检查任务（作业）

任务（作业）完成后，教师可看到完成学生数量，并对学生任务（作业）进行批阅，HTML简介是Web教学中的基础章节，针对学生的对错情况，对后续章节进行有目的的教学。

2.4期末考核

本学期的Web课程告一段落后，学生已基本掌握相关知识，教师可进行期末考试对学生学习成果进行检验，通过对学生考试情况的整体分析，为升学做好准备。考试流程如下图所示，教师采用手动或自动两种方式之一创建试卷，选取题目，创建完成的试卷自动进入试卷库后，教师从试卷库中发布试卷。

（1）考卷设置

教师选择手动创建新试卷或随机从题库中抽取试题组卷，简化教师教学过程，减少不必要的时间浪费，具体的“HTML5+CSS3网页设计与制作“试卷主观题展示图如下所示。

（2）发布试卷

创建完成试卷后，教师可从试卷库中找到“Web前端框架应用”试卷并发布，发布过程中教师可绑定班级，设置开卷交卷时间、限制进入时间，并可设置题目乱序、切屏监控、允许监考教师强制交卷、系统自动提交作弊试卷、作弊试卷是否计分，提高考核有效性。

2.5中职升学模拟技能考试平台

平台还提供中职升学模拟技能考试平台，切实模仿中职升学环境，在整个中职阶段技能学习差不多后，可设置仿真模拟卷，既能让学生通过模考明确考试流程，适应考试题型，熟悉考试环境，又能让学习对考试不会的内容进行查漏补缺，有效的对Web相关课程进行复习，达到“以考促教”、“以考促学”。

2.6学习行为统计

有的学生不熟悉框架属性，有的同学不熟悉电子邮件链接，平台对考试学生错题情况进行统计，统计结果汇报教师，做到教师对学生了然于心，及时更改教学方式。

整个教学过程中各环节可自由切换，实现平台一体化教学，使教学过程化繁为简。

三、灿云云课堂的内置丰富的教学资源

平台内置丰富的教学资源，涵盖课程教学和实验教学两方面。

1.在课程教学方面，平台提供共享课和云优选课两个模块。

（1）共享课由平台工程师根据教学的需要、学生的认知发展水平和已有的经验为基础，创建分层次的Web前端应用课程，作为公有资源课由学校购买供教师使用；另一种共享课则是由优秀教师创建，共享学校自有资源课供其他教师使用。共享课作为一种优效资源有效共享的实现途径，能够减少教学区资源的浪费，有效提高课程利用率，一定程度上减轻教师负担，增加各种课程种类，更多的培养复合型、技能型人才，提高了高校的教育质量、教学质量。

（2）云优选课则由平台工程师精心从互联网上搜集、甄别相关课程的第三方资源，如B站上的优秀教学课程，并进行整合梳理为不同类别的教学资源，方便教师搜索关键字，择取符合当堂课程的教学的优质资源。

（3）针对Web前端开发的教学，灿云云课堂基于“1+X”证书制度下的专业课程体系，创建阶梯式共享课程，目的是使学生由浅入深地对Web前端开发进行学习，培养适应不同级别需求的Web前端开发人才。为此，平台设置计算机公共基础课、Web专业基础课、专业核心课、专业拓展课，学生能够逐步接触作为Web前端开发师所要掌握的内容。

公共基础课包括思想政治理论、党史国史教育、健康教育、职业素养等，力求培养具有职业道德、合作意识、质量意识、服务意识、学习意识的Web前端开发就业者。

专业基础课程包括计算机应用基础、静态网页设计与制作、HTML5+CSS3 Web前端开发技术等。

专业核心课程则是加强Web基础知识与其他相关应用知识的联系，培养掌握 Web 前后端数据交互、响应式开发等知识，具备动态网页设计、开发、调试、维护等能力，能从事 Web 前端软件编程、软件测试、软件技术服务、智能终端界面开发等工作的中级技术技能人才。具体的Web专业核心课程教学内容如下表所示。

为使学生更容易的构建Web前端教学完整的知识体系框架，平台工程师在Web共享课中内置了优质的云优选资源，穿插在课程的不同环节，方便串联起课程之间的内在联系。

2.在实验教学方面，针对不同的专业，平台提供软件开发平台、网络仿真、大数据、数据媒体等板块共享实训课，创造实训环境，依托虚拟仿真、人机交互技术建立起来的虚拟仿真实训系统，可以逼真的模拟操作的流程，实现java、Web、大数据等多种互联网新兴技术的学习。

同时，平台结合职校学生技能的需要，以基础实验项目为导引，完成对Web编程知识技能的学习，重点培养学生的综合设计能力。在此基础上，通过对工程实践项目的开发，培养学生的基本项目管理能力。项目实施过程中，项目组成员协作、配合、团结，逐步具备较好的团队协作能力；引导学生阅读与项目相关的科研资料,，并对学科相关的科技前沿进行初步探索，培育初步的科研创新能力。基础实验项目涉及的内容主要包括互联网和Web基础、HTML、CSS、JavaScript、数据库、Cookie和Session、Web安全等，但在具体内容的组织上，并不像传统模式那样先练习基本知识技能，再进行某单元的综合训练，而是遵循项目驱动理念，在某单元开始先推出一个项目，即基础实验项目，明确项目需求，然后让学生根据项目需求了解与学习相关知识，最终目的是通过实验完成项目的所有要求。此部分共设计了6个基础实验项目，具体的项目实验安排见下表。

四、小结

职业院校专业教育的缺失，确实是目前亟待关注的问题，针对Web专业教学，教师可有充分利用用互联网资源、企业教学资源进行特色备课，借助云平台开展泛在化、个性化、精准化的教学，有效使用理实一体教学平台实现实验课程与理论课程并重的教学方式，并且可以做到教学全流程师生互动教学，极大的降低了教师进行Web教学的难度，激发学生的学习兴趣、培养学生的创新思维、扩宽学生的视野，提升课堂教学效率，提高了Web人才培养的有效性，为职业院校与企业之间建立人才输送的稳定桥梁。

————

西安杰灿电子科技有限公司

服务热线：029-85793818