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

There are 4 separate videos for each celebrity, placed as a Gallery
We use html5 video plugin to play video from same server: http://www.videojs.com/
But as we had 12 videos on one page,
Sometime we will reach the html5 video buffering on browser, and the video cannot play,
video onload events do not trigger (we only show the play button after all 4 video are buffered)
That will only happens if we put more than 10 videos in one page.
but there is not much browser's internal video buffering documents online,
So in the end, we need to insert/remove video tags on gallery events to overcome this problem.