第 43 届世界技能大赛上海地区选拔赛 暨 2014 年市级一类技能竞赛 网站设计 竞赛方案 上海市职业技能竞赛活动组织委员会竞赛办公室 二 一四年三月
目 录 1. 简介... 1 1.1 项目名称与项目介绍... 1 1.1.1 项目名称... 1 1.1.2 项目介绍... 1 1.2 相关文件... 1 2. 能力要求和工作范围... 2 2.1 能力要求细则... 2 2.2 理论知识... 4 2.2.1 必须具备的理论知识, 但不直接进行测试... 4 2.2.2 必须了解的标准和法规, 但不直接进行测试... 4 2.3 实践操作... 4 3. 竞赛项目... 4 3.1 竞赛项目的模式和结构... 4 下面会给出每个模块的赛题要求和评分标准 3.2 竞赛项目要求... 5 4. 评分... 7 4.1 评分标准... 7 4.2 主观评分... 8 4.3 技能评分细则... 8 5. 安全规定... 9 6. 材料与设备... 9 6.1 基本设施清单... 9 6.2 竞赛选手自备的材料 设备和工具... 10 6.3 技能竞赛场地禁止使用的材料和设备... 10
1. 简介 1.1 项目名称与项目介绍 1.1.1 项目名称 网站设计 1.1.2 项目介绍 网站设计是一门较新的行业, 包含站点的设计和建设 网站设计者使用计算机程序工具生成网页, 包括同其他页面的链接 图形元素 文字和图片 这些元素的布局设计可以用软件绘制的设计稿原画或者手绘的故事板 脚本图等方式来表达 ( 对于手绘本项目不做要求 ) 集成的站点开发工具 开放源码库以及代码框架则被用于站点的技术实现 在工作中, 设计者和构建者要注意版权以及相关职业规范和道德问题 网页设计者能够理解网页制作的技术和艺术价值 在网站上, 技术的运用是为了将功能自动化并帮助网站经营者更好地工作 网站的颜色 字体 图形以及布局则需要富有创意的设计技巧 用户界面要确保具有良好的可用性 网站制作者也必须理解项目工作 内容制作和网站管理的基础知识 最终的作品同常用浏览器以及软硬件之间的兼容性也是十分重要的, 需要妥善处理 本竞赛是对该技能的展示和评估 主要测试各个网站设计和实施技能在操作层面的能力 参赛选手要按照赛题中网站设计的标准 ( 或要求 ) 展示其网站设计技能 1.2 相关文件 本技术说明只包含与技能相关的特定信息, 因此还需要遵守 2014 年上海 第 1 页
市职业技能竞赛暨第 43 届世界技能大赛上海地区选拔赛竞赛规则 2. 能力要求和工作范围 本竞赛是对该技能的展示和评估 仅测试技能操作方面的能力 参赛选手需 要按照网站设计标准 ( 或要求 ) 展示网站设计之技能 2.1 能力要求细则 网站多媒体创作和集成 选手必须知道并理解 : 如何为网站创建交互式动画 如何在网站中嵌入和整合所创建动画 音频及视频 选手必须能够 : 创建网页动画来展示内容和提升视觉效果 嵌入音 视频元素和动画 计划和设计站点 选手必须知道并理解 : 如何为站点创建图形元素 如何根据要求有效使用提供的素材进行设计 如何遵守设计原则 在设计网站颜色 排版和图像时所需要的创意和技巧 如何确定并使用一个设计来满足站点的目标受众群体 选手必须能够 : 创建 编辑及优化站点图像 维护一个企业标识和品牌 选用可以增强设计效果的布局版式 为不同的分辨率或者设备进行站点设计 创建高效的 直观 易用的网站导航 使用网格 留白 平衡的文字 - 图像, 清晰的层次来创建布局 编写服务器端应用 选手必须知道并理解 : 如何进行服务器端编程 (PHP) 第 2 页
如何设计 创建以及使用数据库 (MySQL) 如何使用设计模式 选手必须能够 : 创建 修改服务器端应用程序 ( 如 CMS 系统 网络数据库 ) 使用 MySQL 同数据库进行交互 使用设计模式来设计服务器端应用 ( 例如 MVC 模式 ) 客户端及表现层实现 选手必须知道并理解 : 如何使用最新的设计技术和编码技术制作遵循行业标准且具有良好持续性 一致性的网站 如何使用开放源码库和框架来编码 如何实现一个已经提供的页面设计 选手必须能够 : 通过开源库和框架制作客户端 使用 XML JavaScript Action Script XHTML 等工具来实现页面各部分内容 使用 CSS 或其他的外部文件来对整个网站样式进行修改 能在两种不同的浏览器 ( 最新 稳定的版本 ) 上优化页面, 获得较好跨浏览器兼容性 所创建的网站内容在不同分辨率的屏幕上要保持一致且结构良好 对于自适应的页面设计能使用合适的样式和脚本代码来实现页面 所创建网站要符合当前的 W3C 标准 (HTML5.0 CSS3.0) 可用性及可及性 选手必须知道并理解 : 网络可及性, 让不同类型的残疾人士也能使用网络 如何使不同年龄层次的群体均能受益 能帮助人们方便地在整个网站中导航以及交互 选手必须能够 : 保持网站的统一和一致性 创建易于使用的导航系统 使得网站内的信息易于被检索 增加网站的可及性 ( 例如对视障人士 ) 第 3 页
2.2 理论知识 2.2.1 必须具备的理论知识, 但不直接进行测试 色彩构成理论 图片制作 加工 处理的要素 动画制作 加工 处理的要素 HTML XHTML XML javascript Action Script php mysql CSS 等语言和工具的语法和使用规则 使用 MVC 框架结构来对网站服务器端进行编码 开源代码库的使用 站点设计和受众分析 所有需要使用的软件的操作知识 2.2.2 必须了解的标准和法规, 但不直接进行测试 网页的 W3C 标准 网站版权法规 2.3 实践操作 网站创建往往通过以下顺序进行 : 设计和规划 为站点收集和创建素材 客户端编码 服务器端编程 整合并调试 3. 竞赛项目 3.1 竞赛项目的模式和结构 本项目分两天进行比赛, 共四个模块, 每天上下午各一模块 每个模块都是着眼于不同的网页设计技能领域的, 是相对其他模块独立存在的 每个模块都有自己的配套制作素材, 会在每天比赛开始前发给选手 每天的第一部分需要在早上 ( 午餐前 ) 完成, 另外一个则在当天下午结束前完成 一旦你正在做的这部分 第 4 页
内容到了规定的结束时间, 你的模块就将被评分, 且不能再修改这部分的内容 每天都会有一个选手需要遵守的时间表 当选手完成了上午部分的工作, 就可以继续完成下午的模块 将最终的网站保存到如下标签的文件夹中 : day1_part1_xx day1_part2_xx day2_part1_xx day2_part2_xx 上面的 xx 是你的抽签号, 具体存储路径要求将在赛题文件选手要求中体现 在每天的文件夹中, 保存下所有选手创建的 编辑过的或者使用过的源文件, 例如 psd fla 文件等等 将他们存到一个名为 source_files_xx 的文件夹中 下面会给出每个模块的赛题要求和评分标准 3.2 竞赛项目要求模块一 : 重设计模块 参考下图完成设计 : 美国知名服装品牌 Nautica 为了顺应移动互联网时代的购物需求, 需要对其原有主页进行重设计 选手要提供电脑端 平板端和手机端的三个主页设计文档 ( 使用 ps 或 fw) 电脑和平板端设计文件需要预留出主页 banner 动画的空间 模块二 : 设计页面自适应实现模块 第 5 页
将上午设计的三个页面实现在一个网页文件中, 使用 CSS+JS 脚本技术来进行自适应网页制作, 使得在三种设备的分辨率下 (1440*900 768*1024 480*960) 可以对该网站进行正确的浏览 对于 1440*900 1024*768 两个分辨率下还要进行站点 banner 动画的设计和制作 模块三 : 汽车销售模块 ( 前台脚本技术 ) 一个德国汽车产品的销售商需要开发一个 web 应用来模拟以及管理一家新店的汽车销售工作 你的任务是开发这个 web 应用, 按照规定的特性来模拟 论证这个新店的组织方式以及操作流程 使用开源功能库 (JQuery 或 Mootools 或 Prototype) 来完成本模块 ( 此客户被提供了一些事先已经开发好的初始文件和可用的源码库 ) 按照客户到达的顺序来对等待队列进行服务 将客户分配到一辆他们感兴趣的车辆上 (Porsche, Volkswagen, Audi or BMW) 客户能到收银台进行结账和购买一辆车 客户能到出口区域以便离开商店 有本在线商店的统计信息 简单的任务运行样例如下图 ( 功能不全, 没有美化和优化布局 ): 模块四 : 分数统计模块 ( 后台 php 编码技术 ) 第 6 页
世界技能组织想要从以前的比赛中分析和比较竞赛结果 他们有数据并且想要将分析的结果放到一个交互式的网站应用中去, 以便于让有兴趣的浏览者能从不同的角度去观察数据 样例如下图 1 和 2, 使用 php 代码完成数据获取以及页面动态功能的实现 图 1 图 2 4. 评分 本部分主要说明评分专家 / 裁判评估竞赛项目 / 模块的方法, 同时明确评分细 则框架和评分要求 4.1 评分标准 市级一类竞赛模块 : 本部分确定了评分标准及得分项目 ( 主观和客观 ), 满 分为 100 分 模块 评分标准 分数主观分客观分合计 A 重设计 25 25 50 B 设计页面自适应实现 15 35 50 总分 = 40 60 100 第 7 页
第 43 届世界技能大赛上海地区选拔赛模块 : 本部分确定了评分标准及得分 项目 ( 主观和客观 ), 满分为 100 分 模块 评分标准 分数主观分客观分合计 C 汽车销售 10 40 50 D 分数统计 10 40 50 总分 = 20 80 100 4.2 主观评分 采用 10 分制打分, 默认 5 名裁判各自单独评分, 采用类体育竞技的亮分制, 去掉最高和最低分后计算出平均权重, 再乘以满分分值来计算单项得分 10 分 制的权重表如下 : 分值 要求描述 分值 要求描述 1 分 该项目没有做 6 分 该项目做的好 2 分 该项目有尝试过的痕迹 7 分 该项目做的很好 3 分 没有达到该项应该完成的要求 8 分 该项目做的非常好 4 分 该项目刚好完成 9 分 该项目做的极好 5 分 该项目完成情况可以 10 分 该项目做的完美 4.3 技能评分细则 将有三个评分组, 每组将确定一个模块的评分标准以及客观评分表中的偏 差 在一个模块中将有最少 10 个最多 24 个评分标准项 在每个模块比赛开始前, 选手们将得到一切必需的素材 选手有责任检查该模块所提供的材料是否完整可 用, 这些材料之前已由两位专家检查并签名 客观分的标准 ( 具体评分表, 请查看样题或赛题配套的评分表文件 ) 类型 示例 最高分值 正确分值 不正确分值 满分或零分 网站地图动态链接至菜单 0.50 0.50 0 从满分中扣除 验证码严格至 XHTML 1.0 [ 每种错 2.00 2.00 0 1.5 误扣 0.5 分 ] 从零分开始加 CSS 文档 (0.5 分 ) XHTML 文档 (0.5 分 ) 1.0 1.0 0 0.5 第 8 页
5. 安全规定 本项目没有特别完全规定, 请注意赛场的用电安全 非赛场管理人员未经允许, 不能随意拉接电源和用电设备 如选手发生紧急的身体状况, 将由赛场管理人员进行紧急处理 除非有集体性意外事件, 否则本次比赛没有补时和重赛 6. 材料与设备 6.1 基本设施清单 选手比赛机软件清单 ( 各比赛单元需使用的程序代码库都包含在下发比赛 素材中 ) 操作系统 :WIN 7 Prof 64bit ( 根据机器配置情况可选 ) Adobe Creative suite 6 Master Collection (without AE&Primere) MS Office Prof Version 2010 XAMPP 1.8.1 浏览器 : Firefox 20 or upper Firefox Add On = Firebug 1.11.2 or upper Firefox Add On = Web developer 1.2.4 or upper Chrome 26.0 or upper Internet Explorer 10 (64bit) 浏览器插件 : JRE 7 Up. 21 Flash player Version 11.7.700.169 Edit plus / Notepad++ 6.3.2 / Namo Web Editor Version 9 / php Designer 8.1.0 / Net beans for PHP 7.3 / Eclipse PHP incl. JAVA RT 11.7.700.169 辅助软件 : Filezilla Client 3.6.0.2 第 9 页
win RAR or 7 ZIP new ver. jdk 7 update 21 ( 供 Net beans 等软件安装使用 ) 选手用机硬件配置 ( 供参考的最低配置, 实际比赛时可能会高于此配置 ): CPU 内存硬盘显卡 酷睿 i3 530 2.93GHz 2G DDR3 1333MHz 选手可用的临时文件容量 5G ATI HD4350 256M 显存 显示器 19" 宽屏 1440*768 键盘鼠标 光驱 标准光电 标准美式键盘 DVD-ROM 比赛题附带的素材包在比赛前安装到机器中并封场 上下午比赛休息间隙需进行收卷工作 6.2 竞赛选手自备的材料 设备和工具 本项目无选手需自备的材料 工具 赛场将提供统一的标准键盘和鼠标 6.3 技能竞赛场地禁止使用的材料和设备 额外的软件 移动电话 掌上电脑 存储盘 ( 数据存储设备 ) 不能使用任何非赛方提供的内置存储功能的设备 赛场专家有权禁止在比赛中智能穿戴设备的使用 第 10 页