【翻译贴】上海市第八届星光计划（2019年）技能大赛网站设计（中职组）决赛题目

 

两年一度的上海市星光计划比赛被誉为职业技能大赛的奥林匹克，比赛分为中职组和高职组

随着若干年的发展，比赛的题目强度逐年提高，逐步向世界职业技能大赛的比赛强度靠拢

这次翻译的题目是上海市第八届星光计划（2019年）技能大赛网站设计（中职教师组）的决赛题目。全文是英文的，学生组的题目和教师组差不多，个别地方降低了要求。故这次翻译了教师组的题目。

 

决赛要求

 

模块 A：站点设计

一、竞赛时间 150 min

二、竞赛任务及要求

 

1. INTRODUCTION:

Frankfurt International Motor Show(IAA) was firstly established in 1897 in Berlin,known as Berlin Motor Show. As one of the biggest automobile exhibitions worldwide, IAA is famous as Olympics for Automobiles. The two-week IAA Motor Show has been held every two years in the middle of January.

 

1.简介：

法兰克福国际汽车展（IAA）于1897年在柏林首次成立，被称为柏林车展。 作为全球最大的汽车展览会之一，IAA以汽车届的奥运会而闻名。每两年的一月中旬举办一次为期两周的IAA车展。

 

 

The upcoming IAA event will be held on Jan.11-13, 2020 in Frankfurt. The organizer would like to establish a website to display the IAA related news, information, online-ticket application and advertisement of sponsors.

 

即将举行的IAA会展将于2020年1月11日至13日在法兰克福举行。 承办方希望建立一个网站，用来显示IAA相关的新闻、信息、在线票务和赞助商广告。

 

 

2. DESCRIPTION OF PROJECT AND MODULE

This module involves knowledge about website design.You should finish your design work in the morning. The design needs to be classy and modern to fit with the target audience for IAA 2020: Mainly young people with some knowledge of automobiles and pursuit high-quality life

 

2．项目和模块的描述

本单元涉及网站设计知识。您应该在早上完成设计工作。需要设计成优雅和现代的风格，以适应IAA 2020的目标受众——主要是对汽车有一定了解并追求高品质生活的年轻人

 

 

Website Design Details

Create a design for a responsive front page for the motor showevent ‘IAA 2020’.

Make a design for how the website will looks like at the following resolutions:

Desktop:1330px,

Tablet:768px,

Mobile: 480px.

In addition to the website design you need to design a style guide for future development of the website. You have to redesign the provided logos, not only make changes to the color of the logo.

 

网站设计细节

为会展“IAA 2020”设计响应式网页。

根据以下规格设计网站的外观：

桌面：1330px

平板：768px

移动设备：480px

此外，你需要为即将完成的网站设计样式指南。您必须重新设计提供的徽标（Logo），而不仅仅是更改徽标（Logo）的颜色。

 

 

The page template should include:

- Page title

- Banner

- Countdown timer (11th January,2020 18:00)

- News posts

- Event description (placeholder text)

- SponsorsOnline exhibition

- Tickets Service

- Location of the IAA（map）

- Button to open the hidden sidebar

- Footer with copyrights and social media links

 

页面模板应包括：

- 页面标题

- 横幅

- 倒数计时器（2020年1月11日18:00）

- 新闻发布

- 事件描述（占位符文本）

- 赞助商在线展示

- 门票服务

- IAA的位置（地图）

- 能打开隐藏的侧边栏的按钮

- 具有版权和社交媒体链接的页脚

 

 

*For the detail requirement of each section, your design work should be in line with the CMS details in the afternoon.

The sidebar is added (as a small tab) to all pages.

The footer is added to all pages. The footer contains copyrights and at least three social media platforms.

 

*对于每个部分的详细要求，您必须设计成和下午能在CMS中实现的细节保持一致。

侧边栏（作为小标签）添加到所有页面。

页脚将添加到所有页面。页脚包含版权和至少三个社交媒体平台。

 

 

Design your own vehicle model icon ：

-Saloon Car

-Sporty Car

-Pickup Truck

-Multi-Purpose Vehicles

 

设计您自己的车辆模型图标：

- 轿车

- 跑车

- 皮卡（敞蓬小型载货卡车）

- 多用途车辆

 

 

Logo Design

IAA wants you to redesign a logo for this event based on the old one, which should match the idea and target audience of the event.

 

徽标（Logo）设计

IAA希望您在原有徽标（Logo）的基础上重新设计一个与活动理念和目标受众相匹配的徽标（Logo）。

 

 

Style guide Details

Necessary elements for the style guide including colors, sizes and fonts

-Buttons

-Backgrounds

-Main title

-Subpage title

-Section title

-Paragraphs

-Navigation.

-Vehicle model icon

*Add comments to the style guide to specify how to use the logo and the interactive elements.

 

样式指南详情

样式指南的必要元素包括颜色，大小和字体

- 按钮

- 背景

- 主标题

- 子页标题

- 章节标题

- 段落

- 导航

- 车辆模型图标

*在样式指南中添加注释，以指定如何使用徽标（Logo）和交互元素。

 

 

3. INSTRUCTIONS TO THE COMPETITOR

The designs should be saved as: Desktop_IAA.png, Tablet_IAA.png, Mobile_IAA.png, Logo_IAA.png and StyleGuide.png.

You can add extra files to explain your designs, and save them as:Desktop_IAA_1.png ......

In the morning, save your design, style guide in this location:

http://XX.star.com/CMS/design where XX is your workstation number.

 

3.参赛选手注意事项

设计稿保存为：Desktop_IAA.png, Tablet_IAA.png, Mobile_IAA.png, Logo_IAA.png 和 StyleGuide.png

您可以用额外的文件来详解您的设计，保存他们为：Desktop_IAA_1.png ......

上午，保存您的设计、样式指南在下面这个位置：

http://XX.star.com/CMS/design，XX是你的工位号

 

 

模块 B：站点重构，交互和功能

一、竞赛时间 180 min

二、竞赛任务及要求

 

1. INTRODUCTION:

This module involves knowledge about website layout techniques, client-side scripting, and server-side scripting, all combined in one CMS project. Implement all the design work into web pages and keep them identical with your design as much as you can. You will usethe most popular CMS-Wordpress to construct your site.

Develop your theme as a child-theme for the Blankslate Wordpress theme, called Blankslate_Child_IAA. For the fully functional website you will need to add and config some of the provided or self-developedplugins.

 

1.简介：

该模块涉及有关网站布局技术，客户端脚本和服务器端脚本的知识，所有这些都组合在一个CMS项目中。 将所有设计工作实施到网页中，并尽可能地将它们与您的设计保持一致。 您将使用最流行的CMS-Wordpress来构建您的站点。

将您的主题作为Blankslate Wordpress主题的子主题开发，名为Blankslate_Child_IAA。 对于功能齐全的网站，您需要添加和配置一些提供的或自行开发的插件。

 

 

2. DESCRIPTION OF PROJECT AND MODULE

The website layout should be developed with the ability to add menu items (up to 5 items each maximum 15 characters) through dashboardwithout damaging the design.

For future use, widgets will be placed in the sidebar. Make sure the content of the sidebar can easily be changed without damaging the design.

 

2.项目和模块的描述

开发网站布局，能够通过仪表板添加菜单项（最多5个项目，每个最多15个字符），而不会损坏设计。

为了将来的应用，小部件将放在侧边栏中。 确保可以轻松更改侧边栏的内容而不会损坏设计。

 

 

The layout of the website needs to be identical to your designs, but also needs to scale without damaging the design when scaling the browser window between 480px and 1330px. Make use of HTML and CSS by the W3C standards for proper SEO support.

 

网站的布局需要与您的设计相同，在将浏览器窗口缩放在480px和1330px之间时，不会有损坏设计的情况。 通过符合W3C标准的HTML和CSS来获得适当的SEO支持。

 

 

The banner should contain at least 3 images, user can change banner’s image through interaction effect.

 

横幅（Banner）应包含至少3个图像，用户可以通过交互效果更改横幅图像。

 

 

You are required to set a countdown timer in the certain area on the webpage to draw more attention from subscribers. The countdown timer should be real-time updated every second on the webpage, starting from 18:00, Jan 11, 2020.

 

您需要在网页的某个区域设置倒数计时器，以吸引订阅者的更多关注。 倒数计时器应该在网页上每秒实时更新一次，倒数计时器的时间设定为2020年1月11日18:00。

 

 

CMS Details

The Wordpress login page should have the logo of IAA.

The sidebar is hidden (as a small tab) by default. When clicking the tab, the sidebar slides or fades in.The sidebar needs to support adding search widget, images of sponsors and a calendar widget.

 

CMS详情

Wordpress登录页面应该有IAA的徽标（Logo）。

侧边栏默认隐藏（以小标签形式）。 单击小标签时，侧边栏会滑入或淡入。侧边栏需要支持添加搜索小部件，赞助商图像和日历小部件。

 

For safety reasons two user profiles needs to be created:

 The Admin user - access to the complete WordPress main dashboard.

 Username: admin

 Password: weareiaa

 The Client user - access to the main WordPress dashboard showing only pages, posts, media and relevant plugins (security, seo).

 Username: employee

 Password: allforiaa

 

出于安全原因，需要创建两个用户配置文件：

Admin用户 - 访问完整的WordPress仪表板。

用户名：admin

密码：weareiaa

客户端用户 - 访问WordPress部分仪表板，包括页面，帖子，媒体和相关插件（安全性，seo）。

用户名：employee

密码：allforiaa

 

 

News

News section should at least include 4 graphic news and each news includes the elements of title, description and published date.

Clicking news title can go to news-details page, which includes:

-Title

-View times

-Published date

-Author

-Description

-Image

Admin can create or delete news through dashboard. If amountof news more than the mainpage‘s capacity, the latest news should at the top of the list.

 

新闻

新闻部分至少应包括4个图片新闻，每个新闻包括标题，描述和发布日期。

点击新闻标题可以转到新闻详情页面，其中包括：

- 标题

- 查看时间

- 出版日期

- 作者

- 描述

- 图片

Admin帐号可以通过仪表板创建或删除新闻。 如果新闻的数量超过主页的容量，则最新消息应该在列表的顶部。

 

 

Sponsors Online exhibition（Plugin）

Organizer would also like to display the latest products from sponsors on the webpage. The display area could be separated with 2 portions. One is special release and another is special display. There only can display one portion at the same time, user can hide or display a portion through interaction effect.

Each portion includes:

-Vehicle name

-Display type (special release / special display)

-Company name

-Vehicle model

-Image（less than 200px*200px）

In order to ensure all the sponsors’ products could be displayed fairly, any picture larger than 200*200 cannot be uploaded and published. Plugin could manage at least 10 products and be displayed on main page. If the plugin is disabled, the related contents will not be displayed and other functions should not be affected.

 

赞助商在线展示(插件)

主办方亦希望在网页上展示赞助商的最新产品。显示区域可分为两部分。一种是简版，另一种是详版。同时只能显示一部分，用户可以通过交互隐藏或显示一部分。

每个部分包括:

- 车的名字

- 显示类型(简版/详版)

- 公司名称

- 汽车模型

- 图像(少于200 px * 200 px)

为了保证所有赞助商的产品都能得到公平的展示，任何大于200*200的图片都不能上传和发布。插件可以管理至少10个产品，并显示在主页上。如果插件被禁用，相关内容将不会显示，其他功能也不会受到影响。

 

注：恕我愚笨，不知道该如何翻译special release / special display，只是感觉是两种不同的板式，于是用简版和详版来区分了。

 

 

Ticketsservice（Plugin）

In order to ensure the quality of exhibition, organizer would like to provide tickets with reservation. Applicants could first submit an order with applicant name, visiting date (Jan.12, Jan 13 or Jan.14), Contact information, numbers of attendees (at most 5 people), and then after submit the application, they could collect their paper tickets onsite with their contact information left on reservation

IAA expect admin account could search applicant information in the database and remark if the tickets have been collected.

Here is several information should be displayed on dashboard:

-Order Number (starting from 1, automatically)

-Applicant name

-Visiting date

-Contact information

-Attendees number

-Application time

*Admin could sort ascending / descending on order numbers / visiting dates in dashboard.

 

在线票务(插件)

为保证展览的质量，主办方愿意提供有预约的门票。申请人可以先提交一份包含申请人姓名、参观日期(1月12日、1月13日或1月14日)、联系方式、参会人数(最多5人)的订单，然后提交申请后，在保留联系方式的情况下，现场领取纸质门票

IAA希望Admin帐号可以在数据库中搜索申请人信息，并对收集到的门票后进行备注。

这里有几个信息应该显示在仪表板上:

- 订单号(自动从1开始)

- 申请人的名字

- 访问日期

- 联络信息

- 与会者数量

- 下单时间

*Admin帐号可以在仪表板上按订单号/访问日期进行升序/降序排序。

 

 

3. INSTRUCTIONS TO THE COMPETITOR

You should make proper use of the provided plugins like SEO, social media support and security.

Publish the finished website at the end of the day on:

http://XX.star.com/CMSWhere XX is your workstation number.

 

3.参赛选手注意事项

您应该正确使用提供的插件，如SEO，社交媒体支持和安全性。

在一天结束时发布完成的网站：

http://XX.star.com/CMS ，XX是您的工位号。

 

 

 

后记：

从已公开的题目来看，要在一天内（上午2个半小时（150分钟），下午3小时（180分钟））完成，题量不小。能够在指定时间内完成题目的，想必是高手内的高手。即便是中职生，也是不能轻看的，所蕴含的能量就是在职人员恐怕也是自愧不如。