「錯動後的重生 ──集集大地震 20 年──」專題網頁
最近幫公共電視處理的 921 專題網站上線囉。
錯動後的重生 ──集集大地震 20 年──
其實一直滿想做像這樣有資訊圖表配合許多資料的專題網站,剛好這次有機會跟公視合作,結合他們本身就很專業的資料整理及影像能力,要做這樣的網站本身就有很好的內容基底。
這次也因為他們希望能夠有比較特別的瀏覽體驗,所以用了比較特殊的捲動瀏覽方式,但也因此在手機上踩到雷,所以手機就用比較傳統的瀏覽方式,但互動上還是有保留下來。
進入網頁一開始會有一個倒數計時,從你觀看的時間一直回推到發生 921 的那一刻,在震動一下後就進入專題內容介紹。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751824127_d02664c552_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823927_6e41a2ef26_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823912_e02b99c34f_c.jpg)
接著顯示 921 大地震各地的震度以及接下來的餘震資料。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308828_6e97649606_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823812_ceb73cf5e9_c.jpg)
接下來的是當時的電力復原狀況,可以點選切換每個時段的各地電力狀態或是用播放看動態的資訊,接著就是為避免當時的狀況又發生而重新拉設的目前電力網配置圖。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308768_7a39547886_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751630786_86dc161f6b_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308528_45f5f96d9c_c.jpg)
當時的各地人員及建築物損失資訊。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823372_82ac4ecd04_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751630381_e5811e794d_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308118_641af8100d_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823047_faa6524cc9_c.jpg)
過去與未來。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751630161_eb5c262581_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751822827_e7f7107a5b_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751822557_4edd5d278a_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751307173_4db56b4a0f_c.jpg)
目前的校舍狀況。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751306948_25b8f3e40d_c.jpg)
測試警急訊息。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751306748_699a453d18_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751628886_218758803c_c.jpg)
20 年後的現在。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751821582_8b94fbfa0e_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751628501_678c03d78c_c.jpg)
這次的互動圖表都是用 svg 做的,有想把它模組化這樣之後要做這種資訊就會快速很多。
錯動後的重生 ──集集大地震 20 年──
其實一直滿想做像這樣有資訊圖表配合許多資料的專題網站,剛好這次有機會跟公視合作,結合他們本身就很專業的資料整理及影像能力,要做這樣的網站本身就有很好的內容基底。
這次也因為他們希望能夠有比較特別的瀏覽體驗,所以用了比較特殊的捲動瀏覽方式,但也因此在手機上踩到雷,所以手機就用比較傳統的瀏覽方式,但互動上還是有保留下來。
進入網頁一開始會有一個倒數計時,從你觀看的時間一直回推到發生 921 的那一刻,在震動一下後就進入專題內容介紹。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751824127_d02664c552_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823927_6e41a2ef26_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823912_e02b99c34f_c.jpg)
接著顯示 921 大地震各地的震度以及接下來的餘震資料。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308828_6e97649606_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823812_ceb73cf5e9_c.jpg)
接下來的是當時的電力復原狀況,可以點選切換每個時段的各地電力狀態或是用播放看動態的資訊,接著就是為避免當時的狀況又發生而重新拉設的目前電力網配置圖。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308768_7a39547886_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751630786_86dc161f6b_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308528_45f5f96d9c_c.jpg)
當時的各地人員及建築物損失資訊。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823372_82ac4ecd04_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751630381_e5811e794d_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751308118_641af8100d_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751823047_faa6524cc9_c.jpg)
過去與未來。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751630161_eb5c262581_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751822827_e7f7107a5b_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751822557_4edd5d278a_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751307173_4db56b4a0f_c.jpg)
目前的校舍狀況。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751306948_25b8f3e40d_c.jpg)
測試警急訊息。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751306748_699a453d18_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751628886_218758803c_c.jpg)
20 年後的現在。
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751821582_8b94fbfa0e_c.jpg)
![錯動後的重生 ──集集大地震 20 年──](https://farm66.static.flickr.com/65535/48751628501_678c03d78c_c.jpg)
這次的互動圖表都是用 svg 做的,有想把它模組化這樣之後要做這種資訊就會快速很多。
留言