1、 1 2019 年 江苏 省 高等 职业院校技能 大 赛 HTML5 交互融媒体内容设计与制作 赛项 竞赛 规程 一、 赛项名称 HTML5 交互融媒体内容设计与制作 二、 竞赛目的 移 动融媒体时代，能够支持多种媒体形式的 HTML5（下称 H5）已经成为最主流的网页技术标准，围绕 H5 交互融媒体内容，特别是结合移动端特有属性（多点触控、陀螺仪、定位、拍照、录音等功能）的内容创新，成为全产业以及教育行业关注的热点，与此相关的产业需求、人才需求、投资额度增速迅猛。 随着移动互联网的迅猛发展，智能手机等移动设备已成为人们获取信息的最主要渠道。为了 更好地在移动端支持多媒体形式以及真正赋予用户和
2、移动端页面的交互功能，万维网联盟经过数年努力，终于在 2014 年发布了 H5 标准规范。 H5丰富的特性更加符合用户对高质量内容的需求，为移动平台带来交互融媒体内容的同时，也加速了移动端内容创作的深度变革。这其中 ，将 多种 媒体形式 、 媒介渠道 、与移动端特有的 交互形式融合在一起的融媒体 内容 ， 以其 丰富的表现形式和高效的传播效率 正在成为 移动互联网 发展 的主流媒体形式之一。 2015 年以来，新华社、人民日报等媒体机构陆续搭建了 H5 可视化新闻制作平台，精品 H5 融媒体新闻频出，深受大众热 捧；中央党校、人教社、黄冈中学等教育出版行业标杆亦或已搭建 H5 移动学习内容制作
3、平台，或已制作一大批 H5融媒体互动学习内容与数字资源；此外，广大政府机关、企事业单位、广告业企业对于 H5 融媒体宣传内容的需求更是与日俱增， 2017、 2018 年两会，总理政府工作报告上印上二维码的 H5 内容，成为 H5 交互融媒体内容设计与制作在融媒体政务宣传领域的标志性应用。 从国家“十三五”年规划纲领以及战略性新兴产业重点产品和服务导向来看，国家鼓励发展移动互联技术，鼓励支持数字文化创意内容、媒体融合以及数字文化创意软件技术、基于云计 算的 SaaS 服务的发展， H5 交互融媒体内容将会是移动互联时代数字内容、媒体融合的重要组成部分，基于云计算的数字文化处理软件也将成为内容创
4、新的重要助推器。 2 H5 支持图文、表单、音视频、动画、网页、幻灯片、全景等多种媒体形式，支持移动端多点触控、相机、录音、定位、陀螺仪、微信应用等功能，具有跨平台兼容、数据库连接等丰富特性，在实时渲染图像、动画效果和移动交互等方面具有显著优势，这也让移动端网页内容的形式更多、互动更强。随着 H5 内容创作技术的发展以及移动端 H5 内容的迅速传播，新闻出版单位、教育机构等企事业单位、政 府部门以及个人都加大了对 H5 内容的投入，人才需求激增，全国绝大多数省份均有高职院校及专业培训机构开设有 H5 内容设计与制作相关课程，包括工信部、工商总局、最高人民法院等政府机关所属下级机构、行业协会以及
5、企事业单位等已组织超过千场以上的 H5 交互融媒体内容设计与制作相关培训，H5 内容的质量已显著提高。尽管如此，相关的人才特别是实用型操作型人才依然严重不足。 为了更好地向广大职业院校师生传递市场对 H5 内容创作人才迫切需求，实现用人单位需求与人才培养方向的有效衔接，因此，希望借助全国职业院校技能大赛平台举办 H5 交互融 媒体内容设计与制作赛项，鼓励高职院校师生尽快完成新老技术迭代，通过精心设计 H5 交互融媒体内容创作命题，让参赛选手真实体会 H5 交互融媒体内容创作的场景与工作流程，提高实操能力。 根据高等职业学校教育教学特点、教育部职业学校专业教学指导方案、全国职业院校技能大赛的要求
6、，大赛将根据国家相关政策，以市场需求为导向，在工业和信息化职业教育教学指导委员会的指导下，引领和帮助提升职业教育教学能力和师生 H5 交互融媒体内容设计与制作技能，通过竞赛促进实验室、实训平台建设、人才培养方案实施、教材和教学资源建设、师资队伍建设 等，推动H5 交互融媒体内容设计与制作专业建设和教学改革，提升学生职业技能水平和专业综合能力，通过产学研合作，服务学生就业和“双创”，促进 H5 交互融媒体内容产业大发展。此外，通过大赛可以促进校企合作平台的搭建，推动高职院校专业建设，对相关专业的课程设计、教学模式、师资建设及资源配置等进行充分的优化，切实提高学生职业技能与市场需求的吻合度，提高就
7、业率的同时，帮助学生更好满足工作岗位的要求。 综上，本赛项的设立符合经济、社会与产业发展要求，特别是国家战略性新兴产业的发展需要。 三、 竞赛内容与时间 3 （一）赛项内容 1. 赛项内容分为两部分，第一部分按竞赛任务书中任务一根据提供的分镜图文脚本和 HTML5（以下简称“ H5”）作品，使用 HTML5 交互融媒体内容设计与制作实训 平台制作 H5 作品；第二部分按竞赛任务书任务二要求及所给定的资料，使用编译器 Hbuilder 完成指定 H5 融媒体内容开发，利用 html5+css3 及原生javaScript 语言编程完成指定 H5 融媒体内容的制作。 2. 围绕 H5 交互融媒体内
8、容设计与制作赛项的命题要求，考察选手对于 H5作品内容制作的技能和素质，包括：对竞赛题目分析能力、创意设计能力、素材资源整理 能力、 H5 场景素材的编辑处理能力、 H5 作品的动画效果制作能力、移动端交互制作能力、作品音效搭配等能力等。 竞赛知识与技能点见表 1。 表 1 竞赛知识与技能点 考试模块 考查点 描述 H5 内容制作软件制作 H5 作品 （ 35%） 动画制作 根据策划文档从资源库中选择合适的素材资源，按要求进行动画制作，生成运行流畅、符合要求的动画功能。 交互制作 根据策划文档添加交互功能，使之符合逻辑要求。 添加声音 根据文档要求添加声音，并控制声音播放的时间节点及声音播放的
9、效果。 作品设置 根据文档要求，调整作品的适 配，使之符合移动端设备需求。 运行效果 根据文档要求，作品运行流畅，不出现卡顿现象。 H5 融媒体页面开发 （ 60%） 静态布局 根据给定的资源和界面原型，自行设计 /编写布局代码，实现与原型相一致的界面布局功能 动画制作 根据策划文档从资源库中选择合适的素材资源，按要求进行动画制作，生成运行流畅、符合要求的动画功能。 交互制作 根据策划文档添加交互功能，使之符合逻辑要求。 添加声音 根据文档要求添加声音，并控制声音播放的时间节点及声音播放的效果。 作品设置 根据文档要求，调整作品的适配， 使之符合移动端设备需求。 运行功能 根据文档要求，作品运
10、行流畅，不出现卡顿现象。 职业素养 （ 5%） 违纪扣分 考核选手在职业规范、团队合作、组织管理、工作计划、团队风貌等方面的职业素养。 （二）竞赛时长 4 竞赛时间为 4 个小时，比赛过程连续进行 。 四、 竞赛方式 1.本赛项为团体赛，每支参赛队由 3 名选手（设场上队长 1 名）和不超过 2名指导教师组成。每参赛队指派领队 1 名（可由指导教师兼任），负责竞赛的协调工作。 2.选手在现场根据给定的竞赛任务书，在规定时间内，相互配合完成比赛任务。 3.赛题以任务书的形 式发放，竞赛使用的软件在赛前植入选手的计算机上，竞赛素材赛前存入 U 盘与赛题一起发放， 参赛队根据任务书的要求完成竞赛任务
11、。 任务一制作完成后，在平台端以座位号 +任务一命名直接提交。 任务二制作完成后，将作品以座位号 +任务二命名拷到 U 盘中提交 。 五、 竞赛 流程 表 2 竞赛日程安排 日期 时间 内容 比赛日 前一天 10:00-11:00 工作人员（含比赛监督）培训会 12:00-17:00 竞赛设备运行检测 15:00 之前 各参赛队报到 15:30-16:00 领队会（抽签） 16:00-16:30 参赛队熟悉比赛场地路线 17:00-18:00 裁判长、现场裁判赛前检查，封闭赛场 比赛日 06:30-07:00 参赛队集合前往比赛现场 07:00 启封赛场 : 在裁判长、现场裁判的监督下工作人员
12、启封赛场 07:00-07:45 竞赛入场检录：参赛选手凭顺序号接受入场检录确认没有携带竞赛禁止的工具和材料； 一次加密、二次加密 5 07:45-08:00 参赛选手根据赛位号由工作人员引导进入竞赛工位、领取竞赛任务（密封），裁判宣读竞赛规则及赛场规则等必要说明 08:00 竞 赛开始 12:00 竞赛结束 , 选手提交竞赛成果 14:00-17:00 评分裁判组对竞赛的各参赛队进行成绩评定与复核 20:00-21:00 闭幕式 六、 竞赛 赛卷 竞赛采用公开样题的方式，专家组编制完成样题后，由大赛执委会于正式比赛前 30 天以上在省赛平台正式发布。 正式比赛时，由省教育厅选派的大赛督查员从
13、 3 套试题中随机任意抽取一套试题作为比赛用题，每套试题的重复率不可超过 30%。 本赛项的命题工作由大赛执委会指定的命题专家组负责，按照竞赛规程的内容要求，在方向和难度上依据教育部颁发的职业院校 相关专业人才培养标准和国家职业标准，结合高职 H5 内容设计与制作 人才培养要求以及相关企业岗位需要进行设计。 七、 竞赛规则 1.参赛资格：参赛选手必须是符合有关规定要求的高职院校在校生，详见第四条 -竞赛方式。如发现参赛选手资格不符，比赛组委会将取消其参赛资格，对赛后发现者将取消其获奖荣誉并追回奖品和证书，同时对相关责任人员及单位进行通报批评。 2.参赛选手应严格遵守赛场纪律，服从指挥，着装整洁
14、，仪表端庄，讲文明礼貌。各地代表队之间应团结、友好、协作，避免各种矛盾发生。 3.选手按规定时间检录入场，一次加密时 ，凭 抽签号 抽取 一次加密号； 二次加密时，凭 一次加密号 抽取工位号，并对号入座参加比赛。不得携带任何通讯工具、电子存储设备及参考资料进入赛场。迟到超过 30 分钟不得入场。 4.赛题以 任务书的形式发放，竞赛素材 在赛前 存入 U 盘与任务书一并发放，参赛队根据任务书的要求完成竞赛任务。选手按工位号入座后，检查比赛所需竞6 赛设备齐全后 ,签工位号后按照裁判长指令开始比赛。选手在比赛中应注意随时存盘，不按要求存储数据导致数据丢失者按成绩无效处理。 5.竞赛过程中，参赛队成
15、员 之间 可以互相沟通，但不得与任何其它人员讨论问题，也不得向裁判 、巡视和其他必须进入考场的工作人员询问与竞赛项目的操作流程和操作方法的相关问题 。如有竞赛题目文字不清、软硬件环境故障的问题时，可向裁判员询问， 成员间的沟通谈话不得影响到其他竞赛队伍。 6.竞赛过程中，选手若需休息、饮水或去洗手间，一律计算在竞赛时间内。 7.比赛过程中，选手须严格遵守操作规程操作，并接受裁判员的监督和警示；因选手个人原因造成设备故障，裁判长有权中止比赛；因非个人原因造成设备故障，由裁判长视具体情况做出裁决。 8.参赛队须按照题目要求及程序提交竞赛结果及相关文档，禁止在竞赛结果上做任何与竞赛无 关的标记。 9
16、.竞赛结束（或提前完成）后，参赛队要确认成功提交竞赛要求的文件，裁判员与参赛队队长一起签工位号确认，在确认后不得再进行任何操作。 10.其它未尽事宜，将在赛前向各领队做详细说明。 八、 竞赛环境 （一）赛项环境 1.竞赛场地。竞赛现场设置竞赛区、裁判区、服务区、技术支持区。现场保证良好的采光、照明和通风；提供稳定的水、电和供电应急设备；同时提供所有指导教师休息室 1 间。 2.竞赛设备。所有竞赛设备由组委会负责提供和保障，竞赛区按照参赛队数量准备比赛所需的软硬件平台，为参赛队提供标准竞赛设备。 3.竞赛工位。竞赛现场各个工作区配备单相 220V/3A 以上交流电源。每个比赛工位上标明编号。每个
17、比赛间配有工作台，用于摆放计算机和其它工具等并配备 3 把工作椅（凳）。 4.技术支持区为参赛选手提供竞赛相关设备备件。 5.服务区提供医疗等服务保障。 九、 技术规范 竞赛项目的命题结合行业及其职业岗位对人才培养的需求，参照表 3 中相关7 国家 行业 职业标准制定。 表 3 赛项技术标准 序号 标准号 中文标准名称 1 GB21671-2008 基于以太网技术的局域网系统验收测评规范 2 LD/T81.1-2006 职业技能 实训和鉴定设备技术规范 3 ISO/IEC14496-5-2001/Amd 36-2015 信息技术音频可视对象的编码 4 ISO 15076-1-2010 图象技术
18、色彩管理 -架构、文件格式和数据结构 5 ISO/IEC 15445:2000 信息技术、文件描述和处理语言、超文本置标 语言 (HTML) 6 ECMA-262 5th Edition: ECMAScript 脚本语言规范 7 W3C.REC-HTML5-20141028 W3C HTML5 推荐标准 8 REC-CSS2-20110607: W3C 层叠样式表第二版第一次修订 十、 技术平台 1.硬件配置：大赛为每个参赛队伍配备三台计算机（配耳机）及一部智能手机（配耳机），配置如表 4 所示。 表 4 设备配置参数 序号 设备参数 计算机 操作系统： 64 位 Windows 7 及以上系
19、统 CPU：英特尔 i5 及以上，主频 3.2 GHz 及以上 内存容量： 4GB DDR3 硬盘： 50GB 以上 液晶显示器： 19 英寸及以上 分辨： 1600*900 及以上 系统软件：安装 Google Chrome 浏览器 智能手机 手机型号 :红米 系列 （去除 SIM 卡槽） 操作系统： Android 7.1.2 及以上 屏幕分辨率： 1280x720 及以上 系统软件：安装 Google Chrome 浏览器 8 手机扫码功能：智能手机具备在无线局域网环境下扫描并识别二维码的功能 2.软件配置 软件类型 软件名称 软件版本 软件选择 操作系统 Windows 64 位 Wi
20、n7 必选 浏览器 Google Chrome 2017 必选 H5 内容融合 设计软件 HTML5 交互融媒体内容设计与制作实训平台 2017 必选 H5 融媒体页面 开发软件 Hbuilder 编译器 2017 8.8.0 必选 支撑软件 Microsoft Office 2017 必选 Photoshop CC 2017 必选 3.相关软件 浏览器：赛项提供 Google Chrome 浏览器，该浏览器支持 W3C 最新 WEB 协议H5，与 Win7 及以上系统兼容，可以较好支持 H5 交互融媒体内容的设计、制作、预览。 H5 交互融媒体内容设计与制作实训平台： 本实训平台由北京北测教
21、育科技发展有限公司 生产 ， 平台支持图文、音视频、全景、数据图表等多种媒体形式，支持触控、陀螺仪、定位、表单、拍照等交互行为，支持基于时间 轴的关键帧、滤镜、进度、变形、关联等专业动画模式，支持智能渲染、自动适配技术，加载快，跨平台兼容好，参赛者可用它自由创建丰富的交互内容和动画特效。平台可有效模拟比赛环境，支持账号间协同制作、素材共享、作品管理、脚本设计等功能。 4.网络环境 承办院校为竞赛提供基于以太网技术的局域网环境，保证大赛环境的安全性和稳定性。 十一、 成绩 认定 竞赛评分本着公平公正公开的原则，评分标准注重对参赛选手价值观与态度、 HTML5 交互融媒体内容 设计与制作能力、团队
22、协作与沟通及组织与管理能力9 的考察。以技能考核为主，兼顾团队 协作精神和职业道德素养综合评定。 （一）赛项分值 竞赛总分满分为 100 分，实际得分采取分项得分、累计总分的计分方式。 （ 二 ）评分细则 竞赛评分将采用定性与定量结合的方法，客观公正地评出各赛项任务的分数，由赛项内容的特点决定，在视觉美感、体验性、动画效果、交互性等多方面进行评价，根据评分标准精确打分。 表 5 竞赛评分标准 序号 考核内容 配分 评分项目 备注 1. HTML5 交互融媒体内容设计与制作实训系统制作 H5 作品 （ 35 分） 1.1 动画制作 16 分 动画功能 1.不能正确使用素材，有模糊现象，出现 1
23、次 扣 0.5 分； 2.没有完整使用素材，有遗漏，每遗漏一个素材，扣 1 分； 3.每遗漏一个动画，扣 1 分； 4.每出现一次动画效果与任务要求不一致，扣 2 分； 5.动画不流畅，每出现一次卡顿现象扣 1 分； 6、本项分数扣完即止。 1.2 交互制作 10 分 交互功能 1.每出现一次交互方式遗漏，扣 1分； 2.每出现一次交互效果与任务要求不一致，扣 1 分； 3.每出现一次逻辑结构与任务要求不一致，扣 1 分； 4.本项分数扣完即止。 1.3 声音效果 3 分 音效与背景 音乐 1.未按任务书要求添加音乐（音乐是否准确和音乐效果 ）的扣 1 分； 2. 本项分数扣完即止。 1.4
24、作品设置 3 分 适配设置 1. 未按任务书要求进行适配设置的扣 1 分； 2. 本项分数扣完即止。 1.5 运行效果 3 分 作品运行结果 1.运行效果：整体运行效果好的（ 80%，不扣分），整体效果中等的（ 50%，扣 1 分），整体效果较差的（ 30%，扣 2 分） 裁判按参赛队比例扣分，裁判将从素材、交互、环境表现以及任务书所要求的运行效10 果等方面进行评判； 2未按规定命名项目的，扣 1 分； 3未在指定位置存放项目目录的，扣 1 分； 4本项分数扣完即止。 2.H5 融媒体页面开发 （ 60 分） 2.1 静态布局 8 分 自行设计 /编写布局代码，实现与原型一致的界面布局功能
25、1、每遗漏一个素材，扣 1 分； 2、未按任务书要求设置素材位置或角度，扣 1 分； 3、添加的文字出现错别字或描述不清等情况的，每出现 1 次，扣 0.5分； 4、本项分数扣完即止。 2.2 动画制作 25 分 动画功能 1.每遗漏一个动画，扣 1 分； 2.每出现一次动画效果与任务要求不一致，扣 2 分； 3.动画不流畅，每出现一次卡顿现象扣 1 分； 4本项分数扣完即止。 2.3 交互制作 16 分 交互功能 1.每出现一次交互方式遗 漏，扣 1分； 2.每出现一次交互效果与任务要求不一致，扣 1 分； 3.每出现一次逻辑结构与任务要求不一致，扣 1 分； 4.本项分数扣完即止。 2.4
26、 声音效果 3 分 音效与背景 音乐 1.未按任务书要求添加音乐（音乐是否准确和音乐效果）的扣 1 分； 2. 本项分数扣完即止。 2.5 作品设置 3 分 适配设置 3. 未按任务书要求进行适配设置的扣 1 分； 4. 本项分数扣完即止。 2.6 运行效果 5 分 作品运行结果 1.运行效果：整体运行效果好的（ 80%，不扣分），整体效果中等的（ 50%，扣 1 分），整体效果较差的（ 30%，扣 2 分） 裁判按参赛队比例扣分，裁判将从素材、交互、环境表现以及任务书所要求的运行效果等方面进行评判； 2未按规定命名项目的，扣 1 分； 3未在指定位置存放项目目录的，扣 1 分； 4本项分数扣完即止。 3. 职业素养（ 5 分）
