河南省第一屆職業(yè)技能大賽-網(wǎng)站設計與開發(fā)項目-技術工作文件

河南省第一屆職業(yè)技能大賽網(wǎng)站設計與開發(fā)項目技術工作文件河南省第一屆職業(yè)技能大賽組委會技術工作組2021年10月目錄TOC\o"1-2"\h\z\u24443一、技術描述 24574（一）項目描述 226855（二）基本知識與能力要求 216869二、試題與評判標準 525232（一）基本內容及命題流程 527597（二）比賽時間及試題具體內容 6970（三）評判標準 7103三、競賽細則 924005（一）賽事日程安排 910555（二）裁判員的工作內容 1117561（三）競賽紀律 1216363（四）項目特別規(guī)定 1220903四、競賽場地、設施設備等安排 133471（一）場地布局圖 1320978（二）場地設備 1331269五、安全防護和應急預案制定 1318533（一）參賽選手發(fā)生意外受傷或急病等情況 1321577（二）現(xiàn)場突然非正常停電 1311039（三）現(xiàn)場出現(xiàn)人為意外情況處理 1423498（四）余震、暴雨洪災、火災等事故 1431797附件1網(wǎng)站設計與開車場地布局圖 1519934附件2：樣題 168600附件3：競賽場地、設施設備等安排 23技術描述（一）項目描述網(wǎng)站設計與開發(fā)項目是指根據(jù)項目需求進行站點整體風格與布局的設計，根據(jù)設計的頁面實現(xiàn)在各種終端上的頁面效果、交互效果以及后臺相應功能的競賽項目。 選手需要具備熟練的圖形圖像處理能力和頁面元素設計能力，能夠在各類頁面中應用所設計的元素和素材，同時還根據(jù)注站點的受眾群體，制作更受歡迎的設計和交互效果；使用HTML5及CSS3按設計稿實現(xiàn)頁面，并完成各種交互效果的開發(fā)。此外還要處理好代碼編寫過程中發(fā)生的異常。最終的作品同常用瀏覽器以及軟硬件之間的兼容性也是十分重要的，需要妥善處理。（二）基本知識與能力要求在實際工作中，要能理解網(wǎng)站業(yè)務制作的技術和藝術價值。技術的運用是為了將功能幫助網(wǎng)站經(jīng)營者和用戶更好更高效地工作（自動化）。網(wǎng)站的顏色、字體、圖形以及布局則需要富有創(chuàng)意的設計技巧。用戶界面要確保具有良好的可用性，也必須理解所制作項目的業(yè)務內容和網(wǎng)站管理的基礎知識。相關要求權重比例（%）1設計能力15基本知識個人需要知道和理解：●如何遵循設計原則和模式，以產(chǎn)生美觀和創(chuàng)造性的設計●同設計的認知、社會、文化、技術和經(jīng)濟背景有關的問題●如何凸顯站點的目標受眾群體●如何為Web創(chuàng)建和調整圖形●如何在網(wǎng)站中嵌入所創(chuàng)建的動畫、音頻和視頻●維護企業(yè)形象，品牌和風格指南的協(xié)議●互聯(lián)網(wǎng)設備和對應屏幕分辨率的約束工作能力個人應能夠：●導入并編輯圖像●為網(wǎng)頁優(yōu)化圖像●使用某種圖像處理軟件創(chuàng)作圖像●使用某種圖像處理軟件對圖片進行切片●選用可以增強設計效果的布局版式●為不同的屏幕分辨率進行設計；對給定的分辨率進行優(yōu)化并且頁面在不同分辨率的設備中良好工作●為各種自適應的站點頁面設計合適的效果●創(chuàng)建高效、直觀、易用的網(wǎng)站導航，將想法融入具有美觀和創(chuàng)意的設計●創(chuàng)建的頁面布局包含：流式頁面、網(wǎng)格頁面、頁面留白、均衡的文字圖像，清晰的層次●評判并選擇合適的草圖設計、顏色和原型2頁面重構25基本知識個人需要知道和理解：●萬維網(wǎng)聯(lián)盟（W3C）的HTML和CSS標準●定位和布局方法●可用性和交互設計●對有特殊需要的用戶的可訪問性和通信●瀏覽器兼容性●搜索引擎優(yōu)化（SEO）工作能力●創(chuàng)建符合并能通過W3C標準驗證的代碼（HTML5,CSS3）●為各種設備和屏幕分辨率創(chuàng)建可訪問和可用的網(wǎng)站●使用CSS或其他外部文件修改網(wǎng)站的外觀●為用戶創(chuàng)建和更新的網(wǎng)站，并協(xié)助提升搜索引擎性能在需要的地方嵌入和集成動畫，音頻和視頻3前端開發(fā)20基本知識個人需要知道和理解：●JavaScript●如何使用JavaScript來集成庫、框架和其他系統(tǒng)或功能工作能力個人應能夠：●創(chuàng)建網(wǎng)站的動畫和交互功能，幫助解釋頁面內容和增加視覺吸引力●創(chuàng)建和更新JavaScript代碼，增強網(wǎng)站功能性，可用性和美觀●使用JavaScript來操作數(shù)據(jù)和自定義媒體●創(chuàng)建模塊化和可重用的JavaScript代碼4后臺開發(fā)20基本知識個人需要知道和理解：●面向對象思想●面向對象的PHP●開源后端類庫和框架●如何使用MySQL來設計和實現(xiàn)數(shù)據(jù)庫●FTP服務器與客戶端的關聯(lián)以及軟件包●如何管理服務器和客戶端系統(tǒng)之間的數(shù)據(jù)交換●軟件設計模式（如MVC）●網(wǎng)頁應用程序的安全性工作能力個人應能夠：●使用編程技能來操作數(shù)據(jù)，包括本地儲存、數(shù)據(jù)庫和前后端通訊●使用php語言和常見框架開發(fā)后端邏輯功能●創(chuàng)建易讀、可維護、可重用的后端代碼模塊5可用性及可及性10基本知識個人需要知道和理解：●如何使用最新的設計技術和編碼技術制作遵循行業(yè)標準且具有良好持續(xù)性、一致性的網(wǎng)站工作能力個人應能夠：●使用CSS或其他的外部文件來對整個網(wǎng)站樣式進行修改●能在兩種不同的瀏覽器（最新、穩(wěn)定的版本）上優(yōu)化頁面，獲得較好的跨瀏覽器兼容性●所創(chuàng)建的網(wǎng)站內容在不同分辨率的屏幕上要保持一致且結構良好●對于自適應的頁面設計能使用合適的樣式和腳本代碼來實現(xiàn)頁面●所創(chuàng)建網(wǎng)站要符合當前的W3C標準(HTML5.0、CSS3.0)6工作組織管理10基本知識個人需要知道和理解：●在團隊工作中富有效益和實踐●有助于產(chǎn)品可持續(xù)性的方案和實踐●使用現(xiàn)有工具解決問題和需求●在多方案中選擇合適的方案，正確的時間預估和分配工作能力個人應能夠：●考慮功能限時和項目截止日期●調試和處理錯誤●使用計算機設備和軟件●根據(jù)行業(yè)發(fā)展，應用和研究新技術及技能●根據(jù)可用時間安排工作計劃●對工作文件進行歸檔●使用版本控制系統(tǒng)總分值100此表僅供參考，具體比重以試卷為準試題與評判標準（一）基本內容及命題流程競賽項目包含端頁面設計制作、前端功能和交互的2個模塊的內容，不單獨進行理論考試，采用個人現(xiàn)場獨立使用電腦進行設計。裁判長與裁判長助理根據(jù)《技術工作文件》編制試題；公布《技術工作文件》和樣題；裁判長結合賽場設施設備、材料狀況等實際，在賽前15天公布試題（具體時間，根據(jù)組委會指導確定）。在賽前準備會對已公布的試題進行不超過30%的修改，確定最終的四個比賽模塊的試題予以公布。（二）比賽時間及試題具體內容本項目比賽時間為兩天，正式比賽時間共計660分鐘。本項目共4個模塊，每個模塊獨立評分，總分為100分。具體的比賽時間安排如下所示：模塊編號模塊名稱比賽時間A頁設計制作部分2小時B后臺開發(fā)部分3小時C前端游戲設計3小時D前端游戲功能實現(xiàn)3小時合計11小時每個模塊都基于不同的網(wǎng)站設計與開發(fā)技能領域，相對其他模塊可獨立存在。1.模塊A：網(wǎng)頁設計制作部分比賽時間：120分鐘每位選手根據(jù)給定的素材進行創(chuàng)作,作品要求有完善統(tǒng)一的風格。模塊A的設計稿應該具有原創(chuàng)性，不應和其他選手有相同或者幾乎一致的布局、元素及色調。網(wǎng)頁重構部分須與設計部分保持一致，否則將被扣除相應分數(shù)。2.模塊B：后臺開發(fā)部分比賽時間：180分鐘使用規(guī)定的編程語言實現(xiàn)網(wǎng)站要求的功能，構建數(shù)據(jù)庫。提供前端模板，但任何改變或修改的部分需保持原始的UI風格。使用jQuery框架或原生js進行頁面交互。3.模塊C：前端游戲設計比賽時間：180分鐘前端頁面設計制作為一家游戲公司，完成一款游戲的頁面元素設計和前端頁面制作。選手需要使用有限的素材，對主題有針對性地設計優(yōu)美的界面和合理的操作邏輯，并在頁面中實現(xiàn)賽題中的需求。4.模塊D：前端游戲功能實現(xiàn)比賽時間：180分鐘在上午制作的前端頁面和設計風格之上，制作游戲功能邏輯和交互設計。選手需要在項目中充分體現(xiàn)交互友好性，完成賽題中對于游戲功能的描述。（三）評判標準各模塊分值分布，滿分為100分。本次評分分兩類，評價分（主觀）和測量分（客觀）。模塊編號模塊名稱競賽時間min分數(shù)評價分測量分合計A網(wǎng)頁設計部分12015520B后臺開發(fā)部分18015520C前端游戲設計180201030D前端游戲功能實現(xiàn)180201030總計66070301001.分數(shù)權重評價分（主觀）評價分（Judgement）打分方式：3名裁判為一組，各自單獨評分，計算出平均權重分，除以3后再乘以該子項的分值計算出實際得分。裁判相互間分差必須小于等于1分，否則需要給出確切理由并在裁判長（助理）的監(jiān)督下進行調分。權重表如下：權重分值要求描述0分各方面均低于行業(yè)標準，包括“未做嘗試”1分達到行業(yè)標準2分達到行業(yè)標準，且某些方面超過標準3分達到行業(yè)期待的優(yōu)秀水平權重分值要求描述0分更改現(xiàn)有CSS代碼極度困難，CSS代碼沒有組織結構。HTML沒有格式化1分更改現(xiàn)有CSS代碼較為困難，較難以定位需要的內容。HTML有基本格式2分更改現(xiàn)有CSS代碼比較容易，很方便就能定位需要的內容。HTML格式良好3分在2分基礎上，CSS還應用了一定的代碼分組技術并至少包含5條以上有用的注釋測量分（客觀）測量分（Measurement）打分方式：按模塊設置若干個評分組，每組由3名及以上裁判構成。每個組所有裁判一起商議，在對該選手在該項中的實際得分達成一致后最終只給出一個分值。若裁判數(shù)量較多，也可以另定分組模式。類型示例最高分值正確分值不正確分值滿分或零分網(wǎng)站地圖動態(tài)鏈接至菜單0.500.500從滿分中扣除CSS代碼能通過驗證[每種錯誤扣0.5分]2.002.000–1.5從零分開始加CSS代碼有注釋(0.5分)XHTML代碼有注釋(0.5分)1.01.00–0.52.評判方法裁判組：根據(jù)組委會審核后的裁判組名單構成。預期分組與分工方案：根據(jù)裁判推選數(shù)量和情況決定，評分項拆分為多個評分小組，每個評分組由3-5名裁判構成。3.成績并列處理當兩名選手總成績并列時，選手排名順序按照A模塊成績先后順序排序；若A模塊成績依舊相同，依次按照B、C、D順序比較模塊成績。競賽細則賽事日程安排賽前第2天（C-2）時間事項參與人員負責人地點9:00-11:30場地設備材料準備裁判長及助理場地經(jīng)理及助理項目聯(lián)絡員裁判長各項目競賽場地11:30-12:30午餐憑票就餐后勤保障部奧體中心14:00-15:00技術會議裁判長及助理各地市義務裁判員裁判長各項目競賽場地15:00-17:00比賽設備及賽前文件檢查確認封場裁判長及助理場地經(jīng)理及助理項目聯(lián)絡員技術保障人員裁判長賽前第1天（C-1）時間事項參與人員負責人地點14:30-15:30賽前準備會裁判長及助理各地市裁判員/領隊裁判長各項目競賽場地15:30-16:00比賽安全培訓裁判長及助理各地市裁判員/領隊/選手裁判長和場地經(jīng)理16:00-17:00選手熟悉場地設備裁判長及助理裁判員/選手/考務人員/場地經(jīng)理及助理/技術保障人員裁判長和場地經(jīng)理17:00-17:30封場裁判長及助理場地經(jīng)理及助理技術保障人員裁判長和場地經(jīng)理比賽第1天（C1）時間事項參與人員地點8:00-8:30進入賽場裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理各項目競賽場地8:30-9:00工位抽簽/選手檢錄/試機裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理9:00-11:00模塊A競賽裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理12:30-13:00工位抽簽/選手檢錄/試機裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理13:00-16:00模塊B競賽裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理各項目競賽場地13:00-16:00模塊A評分裁判長及助理各地市裁判員比賽第2天（C2）時間事項參與人員地點8:00-8:30進入賽場裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理各項目競賽場地8:30-9:00工位抽簽/選手檢錄/試機裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理9:00-12:00模塊C競賽裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理9:00-12:00模塊B評分裁判長及助理各地市裁判員13:00-13:30工位抽簽/選手檢錄/試機裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理13:30-16:30模塊D競賽裁判長及助理各地市裁判員/參賽選手/場地經(jīng)理及助理13:30-16:30模塊C評分裁判長及助理各地市裁判員16:30-21:30模塊D評分及匯總核分裁判長及助理各地市裁判員賽后第1天時間事項參與人員地點9:00-10:00賽后成績公布和總結會裁判長及助理各地市裁判員/領隊各項目競賽場地注意：競賽前5分鐘，監(jiān)考工作人員發(fā)試卷。（二）裁判員的工作內容裁判員根據(jù)賽務分為四項工作：1.技術保障根據(jù)競賽的技術要求，裁判員監(jiān)督指導IT專業(yè)技術人員，負責安排比賽場地、設施設備、材料工具、電腦硬件維護等，為比賽提供相應的技術保障。2.賽務裁判員負責監(jiān)督指導賽務工作人員在競賽現(xiàn)場的選手抽簽、檢錄、監(jiān)考工作，主要包括：核對選手證件、抽簽號；維護賽場紀律；控制競賽時間；記錄賽場情況，做好監(jiān)考記錄；糾正選手違規(guī)行為，并對情節(jié)嚴重者及時向裁判長報告；負責監(jiān)督技術保障組按程序要求存儲刻錄選手競賽原始文件；統(tǒng)計分數(shù)。3.后勤保障裁判員負責監(jiān)督后勤保障人員維護賽場公共秩序并提供賽場服務等，保障競賽安全有序進行。4.評分全體裁判員在裁判長的帶領下，負責比賽各環(huán)節(jié)的技術工作，對競賽試件作品質量進行評判、成績復核和匯總。裁判長、裁判長助理不參與評分，負責競賽的組織、監(jiān)督、仲裁工作。（三）競賽紀律參賽選手須憑競賽抽簽單、身份證和參賽證進入考場。進入賽場前，簽署誠信保證書，并將手機、U盤等考場違禁設備放到指定地點。參賽選手應準時參賽，遲到30分鐘以上者，將不得入場，按自動棄權處理。參賽選手在競賽期間可飲水、上洗手間，但其耗時一律計入競賽時間。監(jiān)考工作人員發(fā)出開始競賽的時間信號后，參賽選手方可進行操作。參賽選手不得提前離場。參賽選手必須獨立完成所有項目，除征得裁判長許可，否則嚴禁與其它選手或本單位裁判員交流接觸。競賽期間，參賽選手遇有問題應向監(jiān)考工作人員舉手示意，由監(jiān)考工作人員負責處理。監(jiān)考工作人員發(fā)出結束競賽的時間信號后，參賽選手應立即停止操作，依次有序地離開賽場。（四）項目特別規(guī)定1.本項目賽題和配套文件，包括軟件環(huán)境原則上為英語。2. 存在以下情況者，取消該模塊成績：（1）在提交的作品中帶有公司、個人或組織機構的標記（2）攜帶任何有記錄內容的紙張等用品到工位上（3）賽時間截止時不聽從裁判結束比賽口令，經(jīng)提醒后仍繼續(xù)操作電腦3. 存在以下情況者，取消該選手比賽成績：（1）考生在比賽過程中將禁止使用的設備帶到工位上（2）在比賽中存在有違誠信道德的事件，經(jīng)當值裁判記錄并提交裁判長確認4. 如果發(fā)生非本人因素引起的軟硬件故障且無法立即解決的，裁判將予以記錄并根據(jù)處理所花費的時間給予補時。5. 如選手在比賽中存在技術問題的爭議，以本技術說明與賽題規(guī)定為準，文件中未涉及的情況由裁判長組織商議決定。競賽場地、設施設備等安排（一）場地布局圖見附件1。（二）場地設備見附件2。安全防護和應急預案制定為有效預防和及時控制賽場突發(fā)事件，確保河南第一屆職業(yè)技能大賽“網(wǎng)站設計與開發(fā)項目”的順利進行，特制定賽場突發(fā)事件應急預案。本賽區(qū)將建立與行政、交通、司法、公安、消防、衛(wèi)生、食品、質檢等相關部門的協(xié)調機制，制定安全管理的相應規(guī)范、流程和突發(fā)事件應急預案，保證比賽籌備和實施全過程的安全。參賽選手發(fā)生意外受傷或急病等情況參賽選手發(fā)生意外受傷或急病等情況，應按下列步驟進行處理：（1）現(xiàn)場裁判及時聯(lián)系賽場醫(yī)療人員救治參賽選手，并向裁判長報告情況。（2）賽場醫(yī)療人員在進行必要的現(xiàn)場處理后，視傷病情況確定現(xiàn)場救治或送醫(yī)院進行救治。（3）參賽隊可派出替補隊員繼續(xù)參加比賽。現(xiàn)場突然非正常停電比賽現(xiàn)場如出現(xiàn)突然非正常停電，按下述步驟進行處理：（1）裁判人員第一時間啟動應急現(xiàn)場擴音設施，要求參賽選手及觀摩人員保持鎮(zhèn)靜，防止踩踏事件發(fā)生。（2）保衛(wèi)人員開啟安全通道，有序疏散觀摩人員離場。（3）裁判員提示參賽選手在電源保護裝置的有效時間內備份計算機操作數(shù)據(jù)，等候處理決定。（4）經(jīng)向執(zhí)委會匯報后，啟動備用電源或決定延遲比賽。現(xiàn)場出現(xiàn)人為意外情況處理比賽現(xiàn)場出現(xiàn)暴力、人員擁堵、急性傳染病人員進入等情況，按下述步驟進行處理：（1）裁判人員迅速向賽項執(zhí)委會匯報，并由賽項執(zhí)委會向大賽組委會匯報，由賽項執(zhí)委會及大賽組委會根據(jù)勢態(tài)發(fā)展情況確定是否報告公安、公共衛(wèi)生及醫(yī)療部門，在保證賽場內人員人身安全的原則下，盡量不擴大事態(tài)。（2）根據(jù)賽前制訂的現(xiàn)場保衛(wèi)人員的職責范圍，保衛(wèi)人員迅速就位，對賽場內隊參賽選手以外的其他人員進行有序疏散。（3）人員疏散后進行現(xiàn)場清理，如消毒、找出突發(fā)事件隱患并進行處理等。（4）進行處理后，在保證參賽選手人身安全的前提下，繼續(xù)組織比賽。余震、暴雨洪災、火災等事故（1）立即報告本賽項執(zhí)委會及大賽組委會，由其負責與公安、醫(yī)療、氣象、交通等部門取得聯(lián)系，并根據(jù)情況確定是否繼續(xù)競賽。（2）立即組織相關人員到現(xiàn)場，疏散人群，進行應急處理，如使用滅火裝置滅掉明火等，必要時封存競賽現(xiàn)場，停止競賽。（3）做好參賽選手及觀摩人員的思想工作，不擴張事態(tài)。附件1網(wǎng)站設計與開車場地布局圖網(wǎng)站設計與開發(fā)場地布局圖附件2：樣題樣題WebDesignandReconsitutionTIMETOTHECOMPETITOR120minREQUIERMENTSModuleAPart1(Design)INTRODUCTION：HenanisthebirthplaceofChineseculture.

Compass,PapermakingandGunpowder,threeofthefourgreatinventionswereallinventedinHenan.

FromXiaDynastytoSongDynasty,Henanusedtobethecenterofchinesepolitics,economy,cultureandtransportation.Morethan20dynastiesusedtobuildormovethecapitaltoHenan.AmongtheeightancientcapitalsofChina,HenanhasLuoyangtheancientcapitalofthethirteenDynasties

,Kaifeng

theancientcapitaloftheeighteenDynasties

,AnyangtheancientcapitalofthesevenDynasties

.Also

ZhengzhoutheancientcapitalofXiaandShang

,Shangqiu

,

Nanyang

,

Xuchang

,

Puyang

fourancientcapitalsisinHenanwheretheplacewiththelargestnumberofancentcapitals,thelongesthistoryofcapitalbuildinginChina.

Henan,aprovincehas

profoundhistoryandculture,alsohasmany

culturalrelicsand

historicsitesis

rich

innatural

resources

.Thenumberof

undergroundculturalrelics

andcollectionsofculturalrelicsinHenanisthehighestinthecountry.DESCRIPTIONOFPROJECTANDMODULE：Please

makeacultural

tourism

website

withHenancharacteristics

basedonHenancultural

sites

:Aonedesignisawebpagewhereallthecontentisdisplayedononelongscrollablepageandthemainnavigationusesscrollingofthepageinsteadofseparatesubpages.Yourdesigncanbeaslongasyoulike,asyouscrolldown.Youhavebeenprovidedwithtextandimagesthatwillhelpyouinyourdesign.Youarenotrequiredtousealloftheimagesandtextthathavebeenprovidedbutyoushouldensurethatthereissufficienttextandimagesincludedinyourdesigntogiveagoodoverallfeelofhowthewebsitewilllookonceconstructed.DesignshouldfollowthegeneralregulationofEnglishwebsite.Youshouldmakerequiredinteractioneffectineachdesign.Youmayaddanextrafileorothertextandinformationinsidethedesigntodescribetheinteractioneffect.Thefinalonedesignmustincorporatethefollowingsections/columnsandfollowtheorderbelow:WebsitebasicelementsLOGO

design

Navigationdesign

Banner

(Carousel)Userloginregistration

backgroundmusicplayerFooter/bottominformationContentareaHenanculture

(atleasttwoitemsinthepreviewlist)Localopera(atleasttwoitemsinthepreviewlist)

Placesofinterest

(atleasttwointhepreviewlist)Theintangibleculturalheritageofhenan

(atleasttwointhepreviewlist)INSTRUCTIONSTOTHECOMPETITOR:Saveyourfilesinthe"XX_ModuleA_Part1"folderonthedesktop,XXisyourcomputernumber.

Theworkyousubmitforthisprojectshouldinclude3PNGfilesand3PSDsourcefiles.NamingofFile:xx_logo.png、xx_homepage.pngSaveanysourcefilesofimagestoafoldercalled"XX_source_files"inside"XX_ModuleA_Part1"folder.Sourcefilesarethefilescontainingthelayers,developmentfiles,i.e..psd/.ai/.jpg/.svg/……ModuleBPart2(Reconsitution)180minINTRODUCTION:Implementyourpreviousdesignworkintoonehtmlfile,throughwhichusercanbrowsethesitecorrectly.ThatisuseHTML5&CSS3todoaresponsivepageimplementation.DESCRIPTIONOFPROJECTANDMODULE:Youneedtopayattentiontothefollowingrequirements:YourcodecanpassHTML5validation(W3.org)YourcodecanpassCSS3validation(W3.org)UsecorrectprefixtomodifyyourCSScodeinordertomakeyourwebsitecross-browser.PropercommentinyourHTML&CSScodeandyourcodeshouldbereadableandeasymaintain.MainlyuseChrometomarkthismodule.Usethesamefont-familyasinyourdesign.Allthetextinthepageshouldbeindexablebysearchengine.Implementallrequiredinteractioneffectinthedesignmodule.Theimplementedpageshouldbeassameaspossiblewithyourdesign.Thecontentandmainelementsshouldbeindexablebythesearchengine.INSTRUCTIONSTOTHECOMPETITOR:Namethemainhtmlfile“index.html”andputitintherootofthefolder"XX_ModuleA_Part2"Saveanysourcefilesofimagestoafoldercalled"XX_source_files"inside"XX_ModuleB_Part2"folder.WebGameDesignCONTENTSThisTestProjectproposalconsistsofthefollowingdocumentation/files:WebGameDesign_EN.docxClient_Side_MEDIA.ZIP–MediaFilesINTRODUCTIONInrecentyears,theInternethasbecomeanintegralpartofourdailylives,enablingthedisseminationofinformationinaninexhaustiblesourceofcontentandinteraction.Gamingplaysaprominentroleinourdailylives,allowingmillionsofpeopletogetaccesstofunandentertainmentquicklyandfree.Reflectingontheseconcepts,youdecidedtodevelopasmallgamethatworksinthemostcommonwebbrowsersandshowcasesyourtalentintheskillofwebdesignanddevelopment.ThegamewillbecalledSkyAngel.ThedevelopmentofthegamewillinvolveusingHTMLandCSSforthedesignofthelayoutandclient-sideprogramming(JavaScriptandopensourcelibraries)forthegamefunctionalities.Afewmediafileswillbeprovidedinazipfile.Youcancreatenewmediaandmodifyanythingprovidedtoyouforthegame.Yourgamewillbedevelopedinatabletresolutionwith1024x768pixels(widthxheight).Ifgameisopenedinalargerscreen,thegamemustbeinthecenterofthescreen(horizontallyandvertically).DESCRIPTIONOFPROJECTANDTASKSThismoduleistobecompletedin6hours.Thefirst3hoursmustbeusedtocreatethedesignofthegameinthreePNGimagesandthelayoutusingHTML/CSS.YourHTML/CSSlayoutshouldfollowthedesign(PNG)thatyoucreated.Thefinal3hoursyouwillcreatethefunctionalityofgameusingJavaScriptensuringthegameworkscorrectlyindifferentwebbrowsers（ChromeandFireFox.）,followingtherequirementsdescribedbelow.SKYAngelgameuseselementsdescribedbelow:Airplane:Elementthatiscontrolledbytheuser.Clouds:Elementsthatmovefromrighttolefttogivetheimpressionofmovementoftheairplaneinthesky.Birds:Elementsthatairplaneneedstododge.Stars:Elementsthatairplaneneedstogettoincrementstar’scounter.Parachutes:Elementsthatairplaneneedstogettoincrementthefuellevel.FuelCounter:Elementsthatshowshowmuchfuelisavailable.StarCounter:Elementsthatshowshowmanystarstheairplanegot.Timer:Elementsthatshowshowmuchtimetheairplanehasbeenflying.SoundButton:EnableandDisablethesoundinthegame.FontSizeButtons:UpandDowntoincreaseanddecreasethefontsize.Pause/continuebutton:Buttontopause/continuethegame.Logo:Addtheprovidedlogointhegame. FIRST3HOURS–DESIGNANDLAYOUTModuleCDeliveratleast3PNGimagefilesthatpresent:Gameboardlayout:Thisdesignmustpresentallelementsdescribedabove:logo,airplane,clouds,birds,stars,parachutes,fuelcounter,starcounter,timer,soundbutton,fontsizebuttonsandpause/continuebutton.RankingTablepresentation:Thisdesignmustpresentthelogoofthegameandrankingwiththefollowingcolumns:position,name,starsandtimeinthisorder,withthetableispresentedthe“StartGame”button.Gameinstructions:screenofthegamepresentstheinstructionstotheuserandthe“StartGame”button.Theinstructionsforthegameareincludedinthemediafiles.instructionsandthebutton“StartGame”.Theinstructionsmustbepresentedinananimatedway.Allbuttonsmusthaveactivehovereffects.Thebackgroundofthebuttonsinhoverstatemustbe:#f39c12.Theactivestatemustfollowtheexamplecalledripplewhichisprovidedinthemediafiles.TheHTMLandCSScodemustbevalidintheW3CstandardsforHTML5andCSS3rules.FINAL3HOURS–GAMEFUNCTIONALITIESModuleDPressingthe“StartGame”buttonintheinitialscreen,thegamestarts,theaircraftstartstoflyinananimatedwayandcloudsshouldmovefromrighttolefttogiveimpressionofmovementoftheaircraftinthesky.Thetimerisstartedanddisplaysthetimethattheaircraftisinmovement.Thefuelcounter,startstodecrease,onepointpersecond.Whenthegamestarts,thereare10pointsoffuelgivingtheplayer10secondstofly.Themaxcapacityoffuelis30points(30secondsofflight).Theusercanusethearrowkeystomovetheaircraft.Theleftarrowmovestheaircrafttotheleft.Therightarrowmovestheaircrafttotheright.Theuparrowmovestheaircraftup.Thedownaircraftmovestheaircraftdown.Itisnotpossibleflytheaircraftunlessitisvisibleonthescreen.Theaircraftcannotflyoffthescreeninanydirection.Duringflight,theaircraftneedstoavoidbirdsthatarepresentedinthesky.Iftheaircrafthitsabird,thefuelmustdecreaseby10pointsandthebirdswillfalldownwithanimation.Thebirdsneedtobepresentedinrandompositionandinananimatedway,flyingfromrighttoleft.Itshouldalwaysbepossiblefortheaircraftdodgethebirds(forexample,thereisnosolidwallofbirdswhichcouldnotbeflownthrough).Duringtheflight,theaircraftneedstocollectparachutesandstarsdroppingfromthesky.Foreachparachuteiconcollected,thefuelcounterisincreasedin10points(10seconds).Eachcollectedstarincreasethestar’scounterin1point.Thestar’scounterstartswith0points.Theparachutesandstarsarepresentedinananimatedwaydropping(fromthetopofthescreen)intheskyrandomly.Duringtheflighttheusercanpausethegameclickingthepausebutton,orbypressingthespacebar.Whenthegameispaused,allinteractionsandsoundsmustbestopped.Iftheuserclicksthepausebuttonagain,orpressesthespacebaragain,thegamecontinuesfromthemomentthatitwaspaused.Thecloudsinbackgroundneedtopresentananimationtogivethesensationofmovement.Ifthefuelcounterreacheszero,thegameisover.Whenthegameisover,theanimationsstopandthetimercounterstops,thegamewillcollectthenameoftheuserinaformfield.Theuserfillsthefieldandclickthebutton“Continue”.Thebuttonwillbedisableduntiltheuserfillsthatfield.Theusername,thetimeofflightandthenumberofcollectedstarsneedtoberegisteredinthebrowserlocalstorage.AnexampleoftheJSONstructureispresentedbelow:

[{"name":"Player1","time":"20","stars":"10"},{"name":"Player2","time":"14","stars":"8"}]Thegamepresentstherankingtotheuserwiththebutton“StartGame”thatpermitsrestartingthegame.Therankingneedstobeorderedbythenumberofcollectedstarsandfortimeelapsedindecreasingorder.Ifmorethanoneuserhasthesamequantityofcollectedstarsandthesametime,theyreceivethesamepositionintheranking.Toincreasethegameinteraction,somesoundeffectsneedtobeused:background.mp3:usedduringtheflight;hit.mp3:playedwhentheflighthitabird(gameisover);star.mp3:playedwhentheaircraftgetastar;finish.mp3:playedwhenthefuelisout(gameisover).Useyourtalenttoincreasetheusabilityofthegameasmuchaspossibletopermitabetterexperiencefortheuser.Toimprovetheaccessibilityyourgamemusthaveoptionstoincrease/decreasethesizeoffontinthescreen(timer,star’scounter,fuelandranking).Theremustbeanoptiontodisable/enablegamesounds.Ifthesoundisdisabled,nosoundsshouldbeplayed.Ifsoundisenabledallsoundsmustbeplayed.YourgameshouldworkwithoutJavaScripterrorsormessagesshowninthebrowserconsole.MaintainyourHTML/CSSandJavaScriptcodeorganizedandcleantofacilitythefuturemaintenance,usecorrectindentationandcomments.Thegameneedstoworkscorrectlyinbothbrowsers(GoogleChromeandMozillaFirefox).ThegamerequirementswillbecheckedinGoogleChromeandcompatibilitywillbecheckedinMozillaFirefox.INSTRUCTIONSTOTHECOMPETITORThemediafilesareavailableintheZIPfile.Youcanmodifythesuppliedfilesandcreatenewmediafilestoensurethecorrectfunctionalityandimprovetheapplication.YoucanusejQueryandjQueryUIifyoufinditnecessary.Saveyourdesignfilesinafoldercall"XX_Module_C/XX_design"whereXXisyourworkstationnumber.Filesnames:Gameboard:XX_game_board.pngRanking:XX_ranking.pngGameinstructions:XX_game_instructions.pngYoushouldcreateadditionalimagesforeachoftherequ