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

2019年8月31日 星期六

2019年8月30日 星期五

[黏土人] 洛克人 X(素身)

P1200611

黏土人這次洛克人系列推出的是素組的艾克斯(X),黏土人就單純的比例很可愛,其他就隨意了。

P1200596P1200598P1200599

同樣是素身,艾克斯的造型只有到 X8 才有變化,這款造型就是經典版本的造型。

P1200600P1200601P1200602P1200603P1200604

黏土人的可動性其實很差,可以靠替換零件來擺動作,但由於手腳都短短的其實也看不大出來換了零件後可以變怎樣,要換姿勢拍照都要多試幾次才能試出想要的動作。


P1200605P1200606

洛克飛彈。

有附小飛彈跟集氣飛彈。

P1200607P1200608

一樣是靠小腳架可以擺出發射的狀態。

P1200609P1200610P1200611

我黏土人大概也只收洛克人的系列,目前還是許願七種系列或是 X 的所有裝甲都能夠出完,或出多少我就買多少囉。
Read more

2019年8月28日 星期三

javascript 陣列條件搜尋: filter

我們要在 js 的一個陣列裡面去篩選我們想要的資料,可以使用 filter 的方式,首先我們先準備一個原始資料如下:

var people = [
  {
    name: 'Jason',
    school: '建國中學',
    age: 18
  },
  {
    name: 'Sarah',
    school: '北一女中',
    age: 24
  },
  {
    name: 'Tony',
    school: '成功高中',
    age: 32
  },
  {
    name: 'Susan',
    school: '松山高中',
    age: 16
  }
];

要過濾的話用法如下,我們這邊可以再過濾後生成一個新的 array:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback
此函式為一個斷言,用於測試陣列中的每個元素。回傳值為 true 時將當前的元素保留至新陣列中,若為 false 則不保留。可傳入三個參數:

element
原陣列目前所迭代處理中的元素。

index(選擇)
原陣列目前所迭代處理中的元素之索引。

array(選擇)
呼叫 filter 方法的陣列。

thisArg(選擇)
執行 callback 回呼函式的 this 值。


要取得年齡大於 20 歲的話
var ageThan20 = people.filter(function(item, index, array){
  return item.age > 20;       // 取得大於 20 歲的
});
console.log(ageThan20); // Tony, Sarah

改成用 function
function isOrderThan(value) {
  return value.age >= 20;
}
var ageThan = people.filter(isOrderThan);

像這樣可以取得特定學校
var school = people.filter(function(item, index, array){
  return item.school == "成功高中"; 
});
console.log(school)

這個熟悉的話對於要再處理物件是很方便的事情。
Read more

[NXEDGE STYLE] EVA 13 號機

P1200588

NXEDGE STYLE 在福音戰士系列出的還滿多的,除了之前的零號一號二號外,13 號機也推出了,其他還有 6 號機跟舊劇場版 5 號機等。

P1200581P1200582

這隻出自《福音戰士新劇場版:Q》,看起來很像初號機但有些細節不大一樣,最大的差別就是有四隻手。

P1200583P1200584P1200585P1200586

原作是真嗣跟薰駕駛的,新劇場版後面的初號機衍生機設計上都有點像神的感覺了。



使用的武器其中有一個是這個兩把朗基努斯之槍。

P1200587P1200588P1200589P1200590
看起來很嚇人可是很難戰鬥的感覺。

P1200591P1200592P1200593P1200594P1200595

似乎明年就會是新劇場版最後一集了,不知道庵野秀明又會給我們什麼驚喜。

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