https://www.audiquattro.hk/

這是一個在維港海上的車展
展示最新的 S3 Sportback, RS6 Avant 和讓用戶可以分享他們最喜愛的駕駛路線

在桌面和手持裝置上，有活力的頁面設計和動畫過場都能將品牌的形象展現
在互動性的地圖上帶出享受的體驗，不論在船上或網站上

基本架構: PHP codeigniter, jQuery mobile,

Mobile site

這次沒有使用 responsive design 而使用一個獨立的手機版網頁 (https://www.audiquattro.hk/?device=mobile 直接在桌面看手機版)
然後在每一個頁面根據裝置跳轉
使用Mobile detect做裝置檢測
並使瀏覽器跳轉到正確的 URL

Google map 樣式客製

我們使用了自定義樣式的地圖
Google map 本身有提供一個強大的樣式功能 (https://developers.google.com/maps/documentation/javascript/styling?csw=1)
可修改道路，海面，公園等的顏色
令我們可以將地圖完美配合到網站的色調

Google map 路徑API

這個網站中一個互動的功能是用戶可以建立並分享他們覺得有趣和有挑戰的行車路線
我們使用自定的錨點和 Google directions API (https://developers.google.com/maps/documentation/directions/)
令用戶可以點擊兩個地點而劃出行車路線

也對應手機版本
我們使用手機上的 html5 geolocation API 令用戶可以使用用戶現在的位置設計路線

這一次我們深入地客製google maps 和使用它的數個週邊 API
是一個全新的挑戰
而且得出的效果也非常好，也體驗到 Google map API 的強大
我們可以在上面建立順暢的過場動畫，錨點，markers，overlays等等
就像是一個客製的地圖一樣

Video playing

每一個知名的車手都有4段視頻，車手們之間使用 slideshow 的形式表現
我們使用的是 html5 video plugin http://www.videojs.com/ 播放伺服器上的 mp4, ogg
所以 html 上會有12段視頻
但我們發覺 browser 是有一個 video 的緩存限制
令 video 的 buffer ready event, onload event 不會啟動
（我們只會在 4段 video 都 buffer 完成的時候才會播放）
但這個情況只會在一個頁面放多於 10 個 video 的時候出現
而我們又找不到 browser 相關的技術文件
所以我們只好在 slideshow event 後 insert/remove video tags 來處理「一個頁面不多於 10 個視頻」的限制