2019年9月18日 星期三

「錯動後的重生 ──集集大地震 20 年──」專題網頁

最近幫公共電視處理的 921 專題網站上線囉。
錯動後的重生 ──集集大地震 20 年──

其實一直滿想做像這樣有資訊圖表配合許多資料的專題網站,剛好這次有機會跟公視合作,結合他們本身就很專業的資料整理及影像能力,要做這樣的網站本身就有很好的內容基底。

這次也因為他們希望能夠有比較特別的瀏覽體驗,所以用了比較特殊的捲動瀏覽方式,但也因此在手機上踩到雷,所以手機就用比較傳統的瀏覽方式,但互動上還是有保留下來。

進入網頁一開始會有一個倒數計時,從你觀看的時間一直回推到發生 921 的那一刻,在震動一下後就進入專題內容介紹。

錯動後的重生 ──集集大地震 20 年──

錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──

接著顯示 921 大地震各地的震度以及接下來的餘震資料。

錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──

接下來的是當時的電力復原狀況,可以點選切換每個時段的各地電力狀態或是用播放看動態的資訊,接著就是為避免當時的狀況又發生而重新拉設的目前電力網配置圖。

錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──


當時的各地人員及建築物損失資訊。
錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──


過去與未來。
錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──


目前的校舍狀況。
錯動後的重生 ──集集大地震 20 年──


測試警急訊息。
錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──


20 年後的現在。
錯動後的重生 ──集集大地震 20 年──錯動後的重生 ──集集大地震 20 年──

這次的互動圖表都是用 svg 做的,有想把它模組化這樣之後要做這種資訊就會快速很多。
Read more

2019年9月17日 星期二

2019年9月4日 星期三

AMP 網頁開發介紹與基本設定



AMP 是 google 提出的行動裝置網頁開發的方法,全名為 Accelerated Mobile Pages,照字面意思可以知道是用來加速行動裝置的網頁開啟速度,由於目前網頁設計越來越複雜,若使用 RWD 的方法製作行動裝置版並無法加速網頁的開發速度,反而大多數狀況是會讓開啟的速度變慢,如果想要讓使用者有更好的體驗,就可以使用 AMP 的方式。

要使用 AMP 的網頁可以參考 google AMP 的文件,如同前面提到 AMP 頁面其實是另外製作一個頁面,所以我們可以先使用 google 的 AMP 樣板來開始製作。

  
    
    
    Hello, AMPs
    
    
    
    
  
  
    

Welcome to the mobile web


其中注意 html 的標籤要加上 amp,另外 amp 的 js 可以使用的非常有限,也必須先讀入其設計的 library。
 

另外由於內容跟電腦版的分開,必須在 amp 頁面指定相對應頁面的網址。


而在電腦版的頁面也需要寫對應的 amp 頁面網址


要讀入圖片的話也需要用 amp 的標籤



設定樣式:



Read more

2019年9月3日 星期二

基拉祈任務完成

三個世代的幻之寶可夢我都好愛,而且會感受到 N 社在設計捕捉時候的用心,在解完《千年的沈睡》之後,就可以進入捕捉基拉祈的畫面,我特意選在晚上,不過這次跟之前不同是不會強制進入 AR 畫面,而且是也不能進入 AR 畫面,應該是 AR 相機開放後就可以讓使用者自己叫出來照相了,之前我都還要特意找個比較適合的地方拍照呢。

進入捕捉畫面後會看到後面好幾隻跟唱歌有關的寶可夢,真不知道是要把基拉祈叫醒還是要讓他繼續睡。


醒來進入捕捉畫面。


由於最後一個任務是要轉七天補給站,我過 12 點就跑出去轉了,也因為他是許願星,所以晚上拍照正好。


Read more
Related Posts Plugin for WordPress, Blogger...