HTML5开发技术

       随着信息技术的发展,网站成为用户浏览信息的平台和展示企业形象和文化的重要窗口。浏览网页也成为了人们生活和工作中不可或缺的一部分。网页页面随着技术的发展越来越丰富、美观，HTML5语言作为网页设计的基础，自从HTML5和CSS3的出现后，有了质的飞跃，它使网页外观更炫、技术实现更简单。在HTML5平台上，视频、音频、图像、动画及用户与电脑的交互都被标准化。

      一.课程建设历程

     1.2016年我校软件技术专业首次开设本课程。

     2.2017年与行业企业合作开展课程建设，进行岗课赛证内容重构，建设为校级精品课程。

     3.2019年在智慧职教平台上线运行，进行线上线下混合式教学。并被推荐为省职业教育精品资源共享课，出版配套教材《HTML5+CSS3网页设计基础》。

     4.2020年我校成人高等教育函授计算机网络技术专业开设本课程。

     5.2021年获学校课程思政示范课，依托课程立项省职教学会“思政课程与课程思政”专项教改课题：课程思政融入专业教育的路径研究。

     6.2022年评为山东省职业教育在线精品课；获校级课程思政教学比赛二等奖，省课程思政研课会三等奖，校级在线精品课。

       二．课程定位

     《HTML5开发技术》课程主要面向计算机网络技术、软件技术、大数据技术、人工智能技术应用、计算机应用技术等相关专业学生，以及电子商务、计算机网络、人工智能、大数据、云计算等行业的从业者。依据培养高技术技能人才的需求，结合学习者的认知特点，以网站开发为主线，以案例为引导，把介绍知识与案例设计、制作、分析融为一体，设计的案例由小到大，由简到繁，使学习者循序渐进地掌握网站项目开发、网页设计制作的整个流程、前端页面编写技巧，具备从事基于互联网系统的前端开发平台工作岗位所需的基本知识和基本技能，达到 HTML5 开发工程师的要求。

       三．基于岗课赛证的课程内容重构

       依据职业岗位需求、职业教育国家教学标准、相关大赛要求、1+x职业资格认证等，基于实际工程项目，与企业专家共同进行岗课赛证融通的教学内容重构。把课程内容分成网页设计基础、网页元素设计、网页结构设计、网页动态设计四个教学项目。课程从HTML5和CSS3的基础知识入手，以企业网站前台设计为主线，对网页基本元素、网页布局、多媒体技术、CSS3变形、过渡和动画制作等课程内容进行了重构和整合，细化资源，以典型案例为教学载体，按照学习认知规律和职业能力形成特点，设计了12个学习任务，完成相关知识的学习和应用。课程中引入React和Vue框架、Bootstrap库等产业新技术、新标准，让学生了解行业新发展、掌握新技术、熟悉新规范，培养学生技术自信、提升学生职业认同感、激发学生终身学习的可持续发展意识，提高学生的就业竞争力。

教学内容突出实践性与应用型，兼顾先进性。既注重基础知识学习和基本技能培养，又兼顾当前网站开发领域的最新技术，具有知识性、实践性、系统性、前瞻性、育人性等特点。着重培养学生的Web前端编程能力、网站建设能力和HTML5App跨平台开发能力。为以后从事计算机网络、软件技术、人工智能、大数据、云计算等行业的相关工作打下良好的基础。对于非专业从业人员，也可以通过本课程的学习，了解HTML5和CSS3等网站开发相关知识，拓宽视野，增长学识！

      四．课程教学目标

     依据专业教学标准，人才培养方案、课程标准，对接1+X职业技能等级标准、结合学情分析，提炼本课程的素质、知识、能力三维教学目标。

     1、知识目标：

     掌握HTML5、CSS3等使用方法；熟悉网站建设国家规范和行业标准；了解网站建设相关法律法规。

     2、能力目标：

     综合运用HTML5和CSS3进行网页设计与制作、网站规划、开发、测试与运维。

     3、素质目标：

      微观：培养学生的服务意识、版权意识、艺术修养、团队精神等职业素养和追求创新、精益求精、细致严谨、一丝不苟的工匠精神；

      宏观：培养学生守网络信息安全、传递网络正能量、促网络文明建设、建设网络强国的社会责任感。

       五．课程思政融入教学

       教学团队始终坚持以立德树人为根本进行课程建设，深挖思政元素、精心设计教学内容。结合学生重程序设计轻法律意识和审美修养，重开发流程轻创新意识和工匠精神，重网页呈现轻信息安全和网络文明等现状，确定“育修养、筑匠心、守文明”为课程思政建设方向和重点。将“精软件开发技能、重知识产权意识、育艺术美学修养、强沟通协作能力”作为思政主线，主要培养学生网站架构追求创新、网页设计精益求精、代码编写细致严谨、运行调试一丝不苟等工匠精神，提升学生服务意识、版权意识等；将“守网络信息安全、传递网络正能量、促网络文明建设”作为思政辅线，培养学生建设网络强国的社会责任感。将技术自信、网络强国、专业认同、工匠精神、创新精神、劳动精神、信息安全、规范标准意识等思政教育和职业素养有机融入专业知识和技能中。

       并以“形式与内容”双线并行的方法将思政元素融入到教学中，将思政主线和辅线有机融合。形式指的是知识点所蕴含的思政元素，主要包含设计规范、艺术审美等。内容指的是网页承载的信息所包含的思政元素，主要包含信息安全、网络文明等。

       针对四个教学项目，选取中华传统文化、和谐社会、中国力量、自媒体时代4种不同主题的网页，在传授知识的同时进行价值引领。

       六．依据目标达成需要，制定教学策略

       采用“一体两翼五阶递进”全方位人才培养模式。以课堂教学为主体，以实践教学和社会服务为支撑，通过探新知-做网页-析代码-评效果-拓思路五个阶段，开展线上线下混合式教学。

       1.课堂实施

       注重继续教育教学的实效性，遵循“教师主导，学生主体，促进师生共同发展”的教学原则，线下授课我们采用任务驱动、启发式教学、翻转课堂等教学方法，借助网络教学平台、在线考试系统、HBuilder开发软件等信息化手段，通过分组教学等教学形式，以实际工作过程：项目需求分析-网页设计-代码编写-运行调试-功能优化为主线，通过探新知-做网页-析代码-评效果-拓思路五个阶段，组织线上线下、课前课中课后混合式教学。

      ①课前探新知：老师通过智慧职教、钉钉群等发布学习任务，学生搜集不同主题风格的网站,了解相关网页的设计布局，进行需求分析，培养学生服务意识、沟通协作能力。

      ②课中做网页-析代码-评效果：学生通过编写代码、运行调试，培养编码规范和网页设计能力；通过网页功能板块规划、页面设计美化培养学生的艺术修养；通过网页作品展示和评价，满足用户需求，提高学生客户至上、以人为本的职业素养。

       ③课后拓思路：老师通过网络教学平台分享开发技巧，学生进一步优化网页设计方案，创新交互设计，提升网页设计能力和创新能力。

      2.实践教学

      通过考取“Web前端1+X证书”“高级网页设计师证书”，让学生掌握网页设计新技术和新理念，了解网页设计岗位新要求、HTML5应用新方向、融媒体发展新趋势。提升学生规范意识和信息安全意识，强化网页设计能力。通过参加相关行业企业举办的职业技能大赛、技能比武等，培养学生团队协作能力和创新能力，激发学生的自信心。

      3.社会服务

      针对继续教育学生时间自主等特点，组织开展网络文明公益活动、网络安全宣传活动，引导学生参与“微公益”，传播“微文明”，汇聚“微力量”，提升网络安全意识，共筑网络安全防线，传播正能量、引领新风尚。用所学知识回馈社会，培养学生的社会责任感。

       4.多平台支持的线上教学

       遵循继续教育人才培养特点，自学与面授相结合，理论与实践相结合。本课程实践性强，针对学生线下上课时间短、以线上自主学习为主的特点，依托智慧职教在线开放课程《HTML5-Web前端技术》、课程思政示范课等网络教学平台，教学案例和资源丰富，能够满足来自不同学历、年龄、职业的成人学习者各不相同的需求，内容与专业知识和技能结合紧密，为线上课程教学提供了有力支持。课程平台提供的在线测试、在线反馈、作业提交和批改、交流讨论等功能突破了时空限制，进而了解学习者学习中存在的问题和学习实效，极大地促进了师生之间、生生之间进行资源共享、问题交流和协作学习。

      七．创建多维度、全方位、全过程的综合评价体系

       针对成人教育教学中以线下面授和线上自学相结合的特点，教学评价采用线下教师和企业评价、线上教学平台学习数据记录为主的评价方式。其中，线下面授通过教师、企业等评价主体，在课前课中课后对学生的出勤率、任务完成情况、课堂表现、单元测试等进行过程性评价；线上自学通过观看视频、学习进度、线上测试、参与讨论等数据进行评价。面向继续教育学生的文化背景、知识水平差异，注重学生个体的进步和变化，对学生进行增值评价；并将增值评价、考取证书、大赛获奖等相关内容纳入综合评价。

      课程成绩计算:

      期末总评成绩=平台线上成绩*60%+线下面授成绩*40%;

      平台线上成绩=视频*40%+测验*10%+讨论*10%+作业*30%+访问*10%;

      线下面授成绩=平时成绩*10%+期末测试*50%+项目成绩*40%;

      项目成绩=师生评价*50%+企业评价*50%;

      八.课程资源建设及应用情况

      1.资源建设情况

       本课程在智慧职教线上资源包括12个任务、50多个子任务、130个知识技能点，包含授课视频、动画、演示文稿、电子讲义、测验、作业、拓展阅读、课程思政等形式。其中，资源总数248个，PPT52个，视频总时长873分钟，测试题280道，视频、动画等资源153个，占资源总数的62%。

随着课程资源的不断完善，线下新增课程思政课程设计、案例、素材等100多个。资源全部为课程团队自主设计开发，包括Web前端开发1+X中级和HTML5交互融媒体技能大赛相关内容。结合行业发展，课程引入Motion UI方法、加速移动页面 (AMP)等产业新技术、新方法，内容完整，结构合理，能够很好地满足线上线下混合式教学的需求。

      2.资源应用情况

       截止目前，本课程在智慧职教平台线上开课11次，面向其他院校学生、企业员工和社会学习者开放学习。1093所院校32549人选课，其中，MOOC累计选课人数15355人，选课单位997个，互动次数109112次，日志总数3486476次；校内SPOC累计开课人数17194人，使用单位96个。选课人数最多一期高达4331人，活跃用户占课程注册人数的比例平均为20.5%，最高达68.3%。教学资源库已在十多所学校推广应用，课程应用效果好，社会影响力大，起到示范引领作用。

      3.课程学习其他资源

      使用教材建议选用“十三五”职业教育国家规划教材《HTML5+CSS3网页设计与制作实战》（主编：颜珍平 陈承欢，出版社：人民邮电出版社），其它参考书籍有：《HTML5+CSS3网页设计基础》（课程团队主编，网站有电子版，清华大学出版社）、《HTML+CSS+JavaScript网页制作》（刘瑞新主编，机械工业出版社）、《网页设计与网站规划》（曾海主编，清华大学出版社出版）、《HTML5+CSS3网站设计基础教程》（传智播客研发部主编，人民邮电出版社出版）、《网页设计与制作项目化教程》（胡平、李知菲主编，电子工业出版社）、《网页设计》（王维主编，人民邮电出版社）、《网页设计与布局项目化教程》（温谦、周建国主编，人民邮电出版社）。

       另外，也可以结合如下网站资源进行课程学习：DIVCSS5学习平台，http://www.divcss5.com/；菜鸟教程，https://www.runoob.com/；w3school 在线教程，https://www.w3school.com.cn/；山东省职业教育精品资源共享课，http://www.sdjpzy.com/；智慧职教慕课《HTML5-Web前端技术》（每学期开课），https://mooc.icve.com.cn/。