【翻譯貼】上海市第八屆星光計劃(2019年)技能大賽網站設計(中職組)決賽題目

来源:https://www.cnblogs.com/grenet/archive/2019/03/13/10525103.html
-Advertisement-
Play Games

兩年一度的上海市星光計劃比賽被譽為職業技能大賽的奧林匹克,比賽分為中職組和高職組 隨著若幹年的發展,比賽的題目強度逐年提高,逐步向世界職業技能大賽的比賽強度靠攏 這次翻譯的題目是上海市第八屆星光計劃(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分鐘))完成,題量不小。能夠在指定時間內完成題目的,想必是高手內的高手。即便是中職生,也是不能輕看的,所蘊含的能量就是在職人員恐怕也是自愧不如。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2016年12月21日更新開發者中心鏈接https://developer.apple.com/news/?id=12212016b該鏈接是蘋果昨天剛在官網給的正式回覆 如下: App Transport Security (ATS), introduced in iOS 9 and OS X v1 ...
  • 一、圖片壓縮簡述 在我們開發過程中,有可能會遇到拍照、或者從相冊中選擇圖片,要麼單選或者多選,然後上傳圖片到伺服器,一般情況下一張圖片可能3-4M,如果類似微信朋友圈上傳9張圖片大約是 35M左右,如果我們上傳 35M左右的圖片到伺服器,可想而知後臺的壓力有多大,最主要的還是特別耗時,如果是在網速比 ...
  • 今天遇到一個問題,受不了了,來吐槽一下: Android Studio 裡面創建兩個工程:app, baselib。一個是App 一個是庫。編譯不過去。 targetSdkVersion 26 implementation 'com.android.support:appcompat-v7:26.0 ...
  • 【TabLayout】 ①TabLayout是選項卡,在屏幕空間有限的情況下,對不同的空間進行分組。屬於android support design,更多的用於新聞上,如果放在底部也可做底部導航欄 ②TabLayout的選項卡模式有兩種:fixed;scrollable; 🌂設置Tab頁的自定義V ...
  • Vue.js Day3 定義Vue組件 什麼是組件: 組件的出現,就是為了拆分Vue實例的代碼量的,能夠讓我們以不同的組件,來劃分不同的功能模塊,將來我們需要什麼樣的功能,就可以去調用對應的組件即可; 組件化和模塊化的不同: + 模塊化: 是從代碼邏輯的角度進行劃分的;方便代碼分層開發,保證每個功能 ...
  • 學習資料:http://how2j.cn/p/1036 周期:3天 總結:採用的都是html的知識,有過時的結束請忽略.初學者還是練一遍有個印象即可. 1.html中文問題 2.標簽 3.元素 4.屬性 5.註釋 6.標題 7.段落 8.粗體--斜體 9.預格式顯示Java代碼 10.刪除--下劃線 ...
  • 我們所看到的網頁,是一個有一個標簽搭建而成,就像蓋房子, 有地基(Ps.<html></html>): html標簽包裹所有的HTML代碼,不管是頁面搭建的body,還是連接樣式的head,統統都在。 有工程師(Ps.<head></head>): head標簽用於連接各種各樣的樣式,有CSS層疊樣 ...
  • 一、基本結構<!DOCTYPE html> //設置字元編碼集格式<html> //<head> //網頁頭部 <title></title></head><body> </body></html> 二、文本標記1.加粗 b2.傾斜 i3.下劃線 u4.刪除線 u5.上標 sup6.下標 sub三、 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...