前端培训课

职业教育是国家教育体系和人力资源开发的重要组成部分，肩负着培养多样化人才、传承技术技能、促进就业创业的重要职责。日前，“Web前端开发”这门与实际工作密切相关、实践性很强的课程越来越受到人们的关注。互联网进入Web2.0时代以来，特别是近年来，随着物联网和大数据的发展，大量类似桌面软件的Web应用出现，网站前端发生了翻天覆地的变化。除了传统的文字和图片，视频、语音等媒体在网页上得到了广泛的应用，使得网页更加生动，给用户带来了更好的体验。同时，社会对网页开发人才的需求越来越大，使得网页开发课程的重要性日益凸显。因此，如何提高教学质量和学生的学习效果是教师必须认真思考的问题。

基于此，本文在认真分析高职院校课程教学信息化改革所面临问题的基础上，以高职院校计算机学院" Web前端框架应用"为例，从课前准备、课堂实施、课后拓展、期末考试、中职入学模拟技能测试平台、学习行为统计等六个方面阐述了基于微众云的课堂泛在化、个性化、精准化、理实一体化的全过程教学模式，并列举了具体的教学模式。

一，高职院校Web前端教学的现状

Web前端技术是一门新兴技术，很多职业院校都开设了这门课程。但是教学效果并不理想，培养出来的学生不能满足企业的需求。根据分析，问题可能有以下几种情况:

教学目标重理论轻实践:在教学目标的设计上，课程的教学目标多描述为“掌握、理解、明白”，强调对知识掌握的要求，弱化对学生能力培养的要求。在教学模式上，许多教师仍然按照传统的“填鸭式”方法进行教学，课堂仍然以教师为中心，注重教师教了多少而忽视学生学了多少，强调知识的传授和获取，忽视知识的加工和问题的思考。学生只有按部就班地“按葫芦画瓢”，才能完成相应的学习。

教学内容简单:课程主要包括HTML语言、CSS样式、Javascript等前端开发的基础知识，目前很少涉及主流的前端框架技术。

课程前后衔接不够，前后互动开发的教学案例少，导致前端页面设计和后端功能开发成“两张皮”。很多学生无法将Web的前端和后端开发技术有机的融合在一起。

考核方式陈旧:很多老师仍然采用“课堂教学-考前复习-笔试”的传统考核模式，考核标准以知识考核为主，缺乏对学生能力的考核。在这种模式下，80%的学生认为只要上课认真听讲，考前好好复习，最后笔试就能拿高分，导致很多学生专业课成绩很高，表面上是“优等生”，实际运用所学知识解决实际问题的能力较弱。

教学环境与行业企业差距较大，主要表现在以下几个方面:

①学校需要不断地为教师和学生配备合适的本地RD工具。这些设备可能很有价值，需要定期更新，所以学校需要更多的资金。

②新生在正式开始开发前，需要配置复杂的本地开发环境，安装特定的软件和插件，熟悉项目的RD流程和各种在线系统；因为网络配置等问题，项目第一次可能不会在本地启动，会耽误很多额外的配置和调试时间，增加教学难度。

③学校需要投入更多的人力资源，以构建与教学需求相匹配的安全管控系统环境。

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

云课堂是唯一在职业教学领域耕耘十余年，以“微服务、虚拟化、全栈云”三大核心技术为支撑，助力学校高水平专业建设的课堂。平台采用微服务架构，将平台服务精准划分为公共基础、公共应用和专业应用服务。基础服务包括字典、banner、用户权限、文件、认证、网关、订单、转码、平台运营、学校运营、日志、登录、搜索等。专业服务包括KVM虚拟化、容器虚拟化、代码评估、工具、资源、环境等。公共应用服务包括课程、考试服务、云盘、云优化、题库、活动、工具等。不同的微服务可以因材施教，按需施教，可以非常方便老师实施个性化的教学模式、具体的教学内容、针对性的教学过程，精细化赋能Web前端框架应用教学。

教师利用平台构建多层次、立体化的教学课程资源非常方便，拓宽了学习渠道，极大地调动了学生参与学习的积极性，提高了教学效率，实现了教师在家、在办公室、在课堂都能轻松地在无差别的环境中备课，实现了学生“课前”、“课中”、“课后”和校内外有机结合的在线学习和在线实践，逐步形成了课堂教学和云教学的混合体。该平台在教学中的应用打破了校园时间空限制和教学环境限制，可以实现学生远程学习和灵活自主学习、远程培训和灵活自主学习训练。魏云课堂充分利用KVM、容器等多种虚拟化技术，进行精准教学。根据不同的教学内容，选择不同的虚拟化技术和不同的硬件资源，如GPU、CPU、计算能力和不同的实验环境，在不同的软件开发语言和同一门课程的不同阶段进行精准教学。

纯云课堂还可以根据教学需要，采用公有云、私有云、混合云等不同方式部署。能适应各种复杂的网络环境和学校的资产仓储需求，性价比高，稳定。平台还将把科研、技能大赛、1+X认证的全过程与计算机网络、智能安防、物联网、人工智能等各种前端应用场景无缝对接。，更高效地开发一个开放的、全流程的、理论实践一体化的、多功能的Web前端教学平台。基于微众云课堂的“6+6”互动教学流程如下图所示。

2.1课前准备

课前准备分为两部分，教师的备课和学生的预习，是教学中非常重要的一部分。Web教学虽然实用，但课前准备也是必要的。传统的课前准备一般是根据课本和老师布置预习任务，学生直接看课本预习。而课本的知识过于固定，可能不适合学生目前的学习水平，等等，导致预习效果非常差。纯云课堂应用于课前备课可以解决一系列问题。

教师备课

纯云课堂可以作为高效的备课平台，转化不同属性的资源，整合多源格式文件和资源。课堂也是一个全方位的备课平台。备课内容可以是理论教学内容、实践教学内容、作业和考试。

资源的转化:如下图所示，教师可以利用平台提供的课程制作工具，轻松地将自己的教学资源、平台上共享课程中内置web前端的教学资源、云优化课程中的教学资源以及互联网上的优质教学资源整合到我的课程中。教师还可以将“我的课程”发布到“共享课程”，方便其他教师使用。

2.多源格式文件，资源整合:如下图所示，教师整合视频、音频、超链接、编程代码、PPT、WORD、EXCEL、压缩文件、PDF等非常方便。到一个新的HTML文件中，从而构造“我的类”。

3.全方位备课:除了非常方便老师为日常理论教学备课，云课堂还可以为实验教学备课，比如提前准备软件工具、安装环境、实验资源等。

学生预习

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

章节要点的开头

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

图“谈谈你的HTML知识”主题讨论

2.2课堂实施

课堂实施分为课程教学、实验教学和课堂活动，教师可以根据课程教学的需要灵活安排。

课程教学

课堂提供面对面教学和远程教学。学生预习完HTML章节后，教师可以随时预习当前章节内容，根据事先编辑好的内容进行理论讲座，让学生学习HTML理论，并随时发布章节测试或任何形式的任务，了解学生的学习情况，或前往实验教学，将理论与实验相结合，如下图所示。

实验教学

对于Web前端学习，需要学生进行实践，培养学生的综合素质。纯云课堂分享课提供实验内容，呈现各种编程语言和Web前端技术开发、调试和运行环境，不需要师生搭建，方便教学。能力强的老师也可以自己创作训练内容进行教学，以“HTML5简明教程”实验为例。

添加实验:备课结束后，老师可以编辑HTML实验文档，介绍HTTP的相关概念，发布第一个网页演示代码，向学生展示实验需求。

图HTML5简明教程实验文档

2.开始实验:师生根据教学要求选择实验，然后点击“开始实验”进入实验页面。实验页面分两屏显示，左边是实验文档区，右边是web前端开发实践操作区。该平台提供在线VSCode编辑器和开发环境，集成了代码编写、分析、编译、调试等一整套工具。，可以智能完成代码。学生可以在线提交实验内容，老师可以在线查看编程结果，让老师的教学过程更高效，管理和运维更方便，初学者更轻松，入门更简单，快速学习到最佳状态。

3.单击预览，学生可以看到他们编写的第一个HTML页面。

4.在线问答:虽然HTML简明教程对学生来说比较简单，但还是有一部分基础不好的学生可能会有问题。在线答疑可以用来寻求老师的帮助，实现实验教学中的师生互动。

图《HTML简明教程》在线问答

5.实验反馈:学生在实验中记录实验笔记和报告。实验结束后，教师可以查看学生的实验完成情况和实验的记录，以便在后续给予针对性的指导。

图学生的“HTML表单和DIV应用”实验笔记

课堂活动

教师可以通过签到、话题讨论、提问、小组任务、投票、问卷、计时器等课堂活动绑定“HTML导论”的教学课堂。，配合教师进行教学，发挥教师的主导地位和学生在课堂上的主导地位，实现双边教学活动，提高教学效果。比如老师宣布签到活动，了解学生的“HTML入门”课堂出勤情况。

图片“HTML简介”类签到

2.3课后发展

知识学习离不开任务的巩固。云课堂提供两种形式:标准形式任务和任意形式任务。

分配任务

如下图所示，教师可以选择平台提供的标准形式的任务，包括单项选择题、多项选择题、判断题、填充空题和主观题。他们可以从题库中选择，也可以自己创建，创建的题目会自动进入题库。你也可以以任何形式创建自己的标题，包括音频、视频、压缩文件、文档和其他形式。

例如，在完成“HTML导论”章节的学习后，老师可以发布“HTML导论”章节的练习，设置提交时间，测试学生学习HTML的结果。他也可以自己切换“隐藏答案”按钮，选择合适的节点让学生查看答案。他平时还可以通过作业模块，在题库中选择题目或创建题目，检查学生是否掌握了知识。对于任何形式的任务，无形式、无地点，学生都可以扫码作答，实现多维度考试。

图HTML章节练习介绍

图 任意形式任务

检查任务

任务完成后，老师可以看到学生完成的数量，并对学生的任务进行审核。HTML入门是Web教学中的基础章节，后续章节根据学生对错情况有目的地讲授。

图形检查任务

2.4最终评估

本学期的网络课程结束后，学生基本掌握了相关知识，教师可以通过期末考试来检验学生的学习成绩，通过对学生考试情况的整体分析，为进一步学习做准备。考试流程如下图所示。教师手动或自动创建试卷，并选择问题。生成的试卷自动进入试卷库后，教师从试卷库中发放试卷。

试卷设置

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

图《HTML5+CSS3网页设计与制作》主观题试卷

发放试卷

试卷生成后，老师可以从试卷库中找到“Web前端框架应用”试卷并发布。在出题过程中，老师可以绑定班级，设置开卷和交卷时间，限制入场时间，以及设置出题顺序，截屏监控，允许监考老师强制交卷，自动提交作弊试卷，给作弊试卷打分，提高考试的有效性。

图“Web前端框架应用”试卷设置

2.5中等职业学校入学模拟技能测试平台

该平台还提供了一个中职入学模拟技能测试平台，有效地模拟了中职入学的环境。在整个中等职业学校阶段几乎学完技能后，可以设置一个模拟卷，既可以让学生通过模考明确考试流程、适应试题、熟悉考试环境，又可以让学生对不能考的内容进行查漏补缺，有效复习Web相关课程，做到“以考促教”、“以考促学”。

图“Web前端框架应用程序”模型测试

2.6学习行为统计

有些学生不熟悉框架属性，有些学生不熟悉电子邮件链接。平台对学生的考试错误进行统计，并将统计结果上报给老师，让老师清楚了解学生，及时改变教学方法。

“Web前端框架应用”模考中某同学错题的图形统计

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

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

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

在课程教学方面，平台提供了分享课程和云优化课程两大模块。

平台工程师根据教学需要、学生认知发展水平和已有经验，打造分层次的Web前端应用课程，由学校购买作为公共资源课程，供教师使用。另一种共享类是由优秀的老师创建，作为资源类共享给其他老师。共享课程作为实现优势有效资源有效共享的一种方式，可以减少教学区域资源浪费，有效提高课程利用率，在一定程度上减轻教师负担，增加课程种类，培养更多复合型、技能型人才，提高高校教育教学质量。

云优化课程是由平台工程师通过相关课程的第三方资源，如哔哩哔哩优秀教学课程，从互联网上精心收集筛选，整合成不同类型的教学资源，方便老师搜索关键词，选择符合当前课程教学的优质资源。

微众云课堂针对Web前端开发的教学，在“1+X”证书制度下的专业课程体系基础上，打造了阶梯式的共享课程，旨在让学生由浅入深，培养能够满足不同层次需求的Web前端开发人才。为此平台配备了计算机公共基础课、Web专业基础课、专业核心课、专业开发课，让学生逐步接触Web前端开发人员需要掌握的内容。

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

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

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

表Web前端教学专业核心课程及教学内容

表 Web前端教学专业核心课及教学内容

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

2.实验教学方面，针对不同专业，平台提供软件开发平台、网络仿真、大数据、数据媒体等共享实训课程。，营造培训环境。基于虚拟仿真和人机交互技术的虚拟仿真培训系统，可以逼真地模拟操作过程，实现对java、Web、大数据等新兴互联网技术的学习。同时，平台结合职业学校学生的技能需求，以基础实验项目为导向。在此基础上，通过开发工程实践项目，培养学生基本的项目管理能力。项目实施过程中，项目组成员合作、配合、团结，逐渐具备良好的团队协作能力；引导学生阅读与项目相关的科研资料，对学科相关的科技前沿进行初步探索，培养初步的科研创新能力。

基础实验项目主要包括互联网与Web基础、HTML、CSS、Javascript、数据库、cookie与会话、Web安全等。但在具体内容的组织上，并不像传统模式那样先练好基础知识和技能，再进行某个单元的综合训练。而是遵循项目驱动的理念，在某个单元的开头启动一个项目。即基础实验项目，明确项目要求，然后让学生根据项目要求去理解和学习相关知识。最终目的是通过实验完成项目的所有要求。本部分设计了6个基础实验项目。具体实验安排见下表。

表基本实验项目的实验安排

表 基础实验项目实验安排

四。摘要

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