项目化新形态Web前端开发类教材建设与探索

摘要：为提高Web前端开发专业学生的学习效率，提出了开发项目化新形态Web前端开发类教材，点明了此类教材特色，配合省级精品在线开放课程助力开展以学生为中心的混合式教学。此类教材适合采用项目化模式组织内容，培养学生的项目实践能力和创新精神，并体现育人功能，建立立体丰富的配套资源，方便教师教学和学生学习。

关键词：项目化;新形态教材;Web前端开发;混合式教学

中图分类号：G642        文献标识码：A

文章编号：1009-3044（2021）32-0257-02

项目化新形态教材，是项目化的纸质教材与精品在线开放课程有机融合的新型教材。通过项目化的纸质教材内容与数字资源、在线开放课程同步规划，实现教材与数字资源、在线开放课程的有效联结。纸质教材提供项目化教学实现路径，内容体系相对完整，并利用二维码等技术，将优质数字资源与纸质教材上相关知识点链接，实现优质数字资源即扫即得与良好互动[1]。我们对其具体的实施方案及科学性和可操作性进行一系列的研究与实践。课前教师引导学生通过在线课程对相关知识点进行预习，课堂上进行综合项目实施，带领学生逐步攻克重难点，给学生职业实践与体验、学习思路与方法引领[2]，用项目来带动理论的学习，在项目实施的基础上通过“学-仿-创”[3]达到理论与实践统一、知识的内化与应用的教学目的。线上资源随时更新丰富，没有传统纸质教材的局限性，根据技术的不断更新，及时补充更新知识点和相关案例的应用，满足学生个性化发展需求[4-5]，融入思政和工匠精神，强化了育人功能，适合采用注重过程性的综合学生评价[6]。

1 项目化新形态教材建设流程

课程教学改革的过程中迈出的每一步都应以科研为基础，配套的在线课程开发也是如此。教师应积极开发线上资源，包括微课、技术文档、题库、讨论等，并发布到网上，形成系统性的在线课程，供线上线下混合教学使用。

教材建设遵循“一体化设计、结构化课程、颗粒化资源”[7]的建设理念。实现以“学生为中心”的个性化学习方案，调动学生的学习积极性，多维度综合评价学生。教材难度遵从“螺旋上升”规律，方便分层教学和学生进阶。配套的在线开放课程可以不断地根据师生的需求来完善和修改，以实现活页效果，有效地拓展课程的深度和广度，推动混合教学改革，提高课堂教学效果，提升人才培养质量。

2 项目化新形态教材建设思路

在教材编写过程中，时刻以学生的学习特点分析为出发点，在强调基础理论学习的基础上，结合Web前端技术的不断发展，通过相关案例详细介绍Web前端技术的实践运用，既实现理论学习的体系化，又与实践应用进行了结合，强化对相关知识的理解。

教材设计以任务驱动，以行动为导向，突出能力目标，教材内容以符合课程要求的项目为载体，课堂教学是领着学生完成项目，把支撑实践的理论知识融入项目任务中，精心设计能力的训练过程。教学过程以学生为主体，评价标准以学生的能力提高为主要衡量尺度，实现教、学、做一体化。课前和课后通过在线课程进行预习和复习，课中进行知识的内化，综合项目实践，增强学生的职业体验感。混合式教学有效实施。

项目化新形态教材系统化设计、碎片化资源生成、多样化资源、便捷化平台架构、项目化驱动。针对性适用性强，同时精心设计教学内容与精品在线开放课程有机整合。设计思路如图1所示，项目化新形态教材是纸质项目化教程、精品在线开放课程以及配套的数字资源的一体化。

3 项目化新形态教材建设特色

3.1 教材紧跟岗位需求与1+X证书

深入推进Web前端开发人才的培养，将真才实学发挥在工作岗位中。教材内容贴近1+X实战，注重案例的趣味性和实用性，让学生备考不再枯燥。为促进“课证融通”人才培养和教学改革提供了便捷条件。教材融合当前Web前端开发新技术，综合实战项目体现挑战性，培训学生的团队合作意识和创新能力。

3.2 加强意识形态，融入工匠精神

教材中的专业知识与意识形态教育、工匠精神培养有机结合。引导他们在专业发展道路上立下鸿鹄之志。Web前端开发类的工作，要有精益求精的精神，程序出问题，往往是细节太大意，刚入门的学生大都是输入性错误，到了一定的代码量就要考虑如何更快更高效实现类似应用，如何让用户的体验感更好，就要从细节认真的思考和反复的琢磨，边实践边进行各方面的测试，并进行反思和总结，避免类似问题重复出现。

3.3 教材内容设计模块清晰，体例新颖

教材以丰富的案例为载体，精心设计教学内容，设计由易到难、层层递进的教学项目，有实战项目贯穿知识体系，让读者学以致用。

为了让学习者更快地上手，教材应特别设计适合初学者的学习方式，用准确的语言总结概念;用直观的图示演示效果;用详细的注释解释代码。每章先简述学习目标，然后描述任务，激发学生的学习兴趣，再开始知识点介绍，让零基础的读者了解相关概念和知识点应用，顺利入门后就可以进行任务实施，通过综合项目实践，提高学生系统的运用知识的能力，课后根据任务训练部分的内容巩固和拓展实现相关的一些应用。

3.4 针对性适用性强，教学内容安排遵循学生职业能力培养基本规律

教材针对学生，设计精美、随扫随学，自学中享受升华过程;针对教师，素材丰富、资源立体，备课中不断创造。教材滿足生源多样化学生学习需求，在认真分析高职学生学习规律和认知规律的基础上，采用项目化模式组织教学内容，增强职业体验感和学习动力;教材内容精炼，通俗易懂，既便于教学，又适合自学，培养学生的学习自信心、自主性与自学能力，从而提高学生Web前端开发的综合能力。

3.5 新形态一体化设计，省级在线开放课程辅助学习

丰富的数字化资源与纸质教材形成一体化的设计，教学中实现翻转，满足高职学生线上线下学习需求，微课等资源配有二维码索引功能，与纸质教材形成一体化的设计，能有效解决教学中的重点和难点。形成新型活页式教材，实现“因材施教”，有利于个性化教学和Web前端开发人才培养。教材还配套课件、课程整体设计、课程单元设计、教学计划、考核单、习题解答、试卷、教案等，配套资源丰富，方便教师教学和学生学习。有效弥补纸质教材不能承载的内容，及时更新扩展，有效拓展了教学内容的广度和深度。

3.6 明确目标与方向，突出学习重点与难点

每章开始有明确知识目标和技能目标，内容选择不仅注重学生知识与技能的培养，同时关注学生未来职业发展所需的方法与社会能力。教材涉猎面广，并及时通过在线开放课程补充最新内容，比如考虑到部分同学基础不牢，在线上课程上补充了HTML5和CSS3相关的微课、技术文档和相关练习，同时考虑到学得快的同学需要拓展，可以及时补充更多主流框架的应用，除了jQuery、jQuery UI，还增加MUI移动端布局及交互实现、Bootstrap响应式布局及交互实现，而且使用的是当前的最新版本进行讲解，并突出学习重点与难点。

3.7 项目驱动理论学习，难度遵从“螺旋上升”规律

教材内容编写满足学生知识与技能反复学习与应用的需求。通过任务、项目情境等将知识与技能进行结合，通过基础性练习与拓展性活动，让学生在知识习得与技能训练“反复推演”的过程中获得建构式的成长[8]。以项目驱动理论学习，难度遵从“螺旋上升”规律，方便分层教学。教材以培养职业能力为核心，以工作实践为主线，以项目为导向，兼顾界面布局样式与交互性，增加课程内容的视觉冲击力，以创建出更富交互性、更有趣、對用户更友好的前端应用。

3.8 根据应用领域不同和不同框架支撑，打造系列教材

针对不同应用领域和框架支撑，课程组编写了多部相关的项目化新形态教材，满足各方面的需求，我校有“十三五”江苏省高等学校重点教材《JavaScript程序设计实例教程（第2版）》，移动端MUI框架教程《JavaScript移动开发项目教程》，Bootstrap响应式开发教程《HTML5跨平台开发基础与实战》（“十三五”江苏省高等学校重点教材），原生JavaScript及jQuery框架应用教程《JavaScript与jQuery案例教程》等。这些成果不仅让本校学生获益，也为全国高校Web前端教学做出贡献，让越来越多的学生很方便地获得更优质的教学资源、更高的学习效率，更好的学习效果。

4 结语

我校Web前端开发课程组不断地丰富和完善在线课程资源，于2019年《JavaScript及框架应用》立项为江苏省精品在线开放课程，其中有微课资源获江苏省高等学校微课教学比赛二等奖。课程面向社会学习者、高职学生、专接本学生及应用型本科学生开放，用户覆盖全国31个省、自治区和直辖市。

项目化新形态教材《JavaScript与jQuery案例教程》由高等教育出版社出版，教材内容与江苏省精品在线开放课程配套，将项目化新形态教材与在线开放课程深度融合，有效服务于课程的混合式教学，内容贴近1+X实战，遵循职业能力培养规律，课程中的专业知识与意识形态教育、工匠精神培养有机结合。培训学生的团队合作意识和创新能力。帮助学生收获学术知识、理解研究方法、熟练掌握开发技巧。通过实验班和非实验班教学效果的比较研究，发现实验班学生对学习资源的主动利用率、项目综合效果均好于非实验班学生。教材对提高学生的学习积极性、培养学生自信、提高学习能力等方面都达到了预期效果。

定期收集部分师生的学习反馈，学生普遍反映“实战性强，可以学到前端新知识和实用技术”。使用了本教材教学的教师反馈“课件精美，案例和素材相当丰富，学生能顺利入门，还能仿改挑战性的综合项目，课后还能线上复习和预习，很实用的教材。”对应的线上资源根据技术的发展，不断地完善和扩充中，充分体现出新形态的优势。

参考文献：

[1] 张尕琳.新形态一体化教材建设的教学适用性探索：以“机械制图”课程教材为例[J].中国职业技术教育，2019（17）：50-53.

[2] 杜德昌.教材改革：新时代职业院校高质量发展的基本保障[J].中国职业技术教育，2019（29）：11-14.

[3] 高伟明，刘青昆.创客教育理念下技能类课程教学模式研究：以“Flash动画制作”为例[J].软件， 2020，41（5）：271-274.

[4] 蒋寒宇.“互联网 +”背景下高职教育的学习需求与学情分析[J].才智，2019（15）：100.

[5] 王云凤.“三教”改革背景下职业院校教材建设的实践探索与策略[J].中国职业技术教育，2020（35）：93-96.

[6] 黄涛.可用于软件开发类课程过程性评价的信息化工具研究[J].电脑知识与技术，2021，17（5）：32-33.

[7] 赵清梅.“互联网+”背景下职业教育教材新形态一体化建设[J].中国职业技术教育，2018（20）：76-79.

[8] 兰金林，石伟平.职业教育教材内容的选择与组织：职业知识的工作逻辑[J].职业技术教育，2019，40（31）： 30-35.

【通联编辑：王力】

收稿日期：2021-03-18

基金项目：2019年江苏省精品在线开放课程立项项目，课程名称：JavaScript及框架应用（苏教高函[2019]23号），主持人：郑丽萍;2018年省级骨干专业建设子项目：项目化课程建设与改革（PP-610205-K-06），主持人：郑丽萍;2021年中国高等教育学会“数字化课程资源研究”专项课题：“中国高等教育学科专业类金课建设实践及评价”研究（项目编号：21SZYB20），主持人：郑丽萍;2021年江苏省社科应用研究精品工程课题（项目编号：21SYC-148），主持人：郑丽萍;2021年中国通信工业协会：职业教育改革创新课题，主持人：郑丽萍

作者简介：郑丽萍（1980—），女，河南开封人，讲师，工程师，硕士，研究方向：高等职业教育、软件技术等。