這幾天在試解2014年第13屆全國身障技能競賽的網頁設計題目,這題目是我收集的三屆題目中算比較有難度的,全國競賽通常會有現場30% 的題目變化,我並不知道當年的30%變化是什麼,只能就目前從競賽網站下載的資料來做解題;
這題要做的是一個旅遊資訊網站,主要的難度第一個是檔案匯入及整理的工作,這部份一般的網頁設計程式教學並不一定會教到,由於題目是賽前一個月公佈的,所以如果賽前知道會有這個內容,預做準備的話也還算可以從容應對;首頁動畫的部份,當年的題目大多是要求做一個flash動畫出來,但這時代flash已經確認退流行了,所以這部份我改用jQuery來做動畫;最麻煩的是篩選資料的功能部份,這一頁中除了資料的撈取條件外,還有一堆的CSS要處理,版面的安排需要從無到有自建構出來,而左方的排名部份會使用到比較麻煩的sql語法,我在解題上也幾乎能用的技巧都用上了。

首頁動畫
資料匯入存在著一些陷阱,由於題目提供的檔案格式及編碼並不是當今通用的規範,所以花了點時間研究資料檔案的問題,再加上,資料的欄位格式其實也很怪,像是類別這個欄位有用逗號分開的,也有用斜線分開的,到底那一種才是正確的格式令人疑惑,而這問題到了篩選資料時也變成麻煩的問題,比如同樣一個type,有的資料前面有加了一個空白,這在做比較時會變成兩個不同的類別,所以得在撈取資料時再去處理一下空白的問題,另外,資料中有些欄位資料是有單引號或雙引號的,這在程式或sql語法的判讀上會造成問題,也得處理。

資料匯入
篩選資料的功能主要是在版面安排上會花費比較多的時間,由於題目並沒有要求得在1024×768的範圍內來做,所以這邊我採用的是全版面及RWD的方式來處理,不過我也只是做到能看的程度而已,畫面尺寸變化太大時還是會有版面跑掉的狀況。

景點篩選
留言