時間軸網站大集合與網頁製做元件

(圖為 Timekiwi 網站的使用者個人頁面,能夠將 Facebook、Twitter、Instagram 等服務上的訊息整合在同一個時間軸上)css

若是有在使用 facebook 的朋友,最近應該已經漸漸開始有機會使用到新版的時間軸介面了,儘管網友對於時間軸的介面褒貶不一,但實際來看,時間軸的瀏覽介面有幾個好處:html

  • 迅速看到男友與前女朋友多年前的親密對話與照片你與朋友的美好回憶
  • 迅速認識一位新的朋友在過去五年分享過的訊息並挖出他作過的蠢事在下次碰面製造話題
  • 看起來比較厲害,尤爲使用者能夠選擇性的放大某些訊息
  • 時間軸瀏覽介面能夠方便的讓你新增過去發生過的人生大事

其實時間軸介面不是創舉,以國人愛用的服務 Plurk 噗浪來說,很早就有橫向捲軸的時間軸頁面了。html5

(圖為已經關閉的 Nifty Timeline)jquery

日本前 25 大、全球前 300 大的入口網站 Nifty 在幾年前也有很棒的時間軸服務,使用者能夠在線上創建各式各樣的時間軸表格,例如幫政治人物寫編年史、把本身交過的女友都放到時間軸上,不過後來或許是因為 Nifty 找不到獲利模式,或是使用率過低,目前這個服務已經GG了,惟一能看到的剩下網站的線上說明頁面web

(有讀者表示 GG 是宅男用語,我特別說明一下,GG 是線上遊戲玩家用來表示「這場打得真好!」,也就是「Good game!」的縮寫,有點類似 good job,後來反正無論是贏是輸,總之快結束了就能夠喊 GG 了,也有玩家表示,GG 是 「Good bye, Garbage」 的縮寫)app

扯遠了,其實目前還有不少與時間軸有關的網站,讓我來一一介紹這幾個網站與相關的開發資源,或許你也能夠開發出一個不錯的時間軸應用,記得要上來 Inside 分享一下呀~ :pide

TimeKiwi

(圖為個人 Twitter + Instagram 串在一塊兒之後的時間軸)工具

TimeKiwi 是最近幾天才推出的新服務,很顯然的是在向 Facebook 致敬,使用者除了能夠將 facebook 上的訊息呈現在 Timekiwi 以外,還能夠將 Twitter、Instagram、Tumblr、Flickr、Foursquare 等當紅網站的資料拉進來一併在同一個時間軸呈現,我個人認為這個概念挺不錯的,早期的 FriendFeed 提供的功能就是單一介面整合來自多個服務的訊息,現在光是加個時間軸,好像就是另一個不錯的服務了。(微創新,Micro innovation)google

Google Timeline

 

Google Timeline 不是一個服務,而是 Google 公司簡介的其中一個頁面,網頁上以橫向時間軸的方式呈現了 Google 公司從創辦以來的關鍵里程碑。點擊畫面上的連結會出現的則是事件的簡介,這算是相當陽春的時間軸應用。htm

Preceden

Preceden的時間軸功能看起來是相對單純的,作起來其實很像通常的甘特圖,並且看起來簡簡單單的功能,竟然是要收費的(儘管看起來不貴)。

TimeToast

TimeToast 的服務看起來稍微炫一點,除了依時間序列呈現資料以外,直接就能夠看到各個時間點的資訊內容,惋惜的是時間軸的繪製使用的是 Flash 的技術,在這個 HTML5 當道的年代,要趕快跟著用,省得被人家發現我們不懂加上越來越多人使用行動裝置瀏覽網站,已經宣稱不繼續發展的行動版 Flash 勢必會逐漸式微,這是網站經營者必須面對的議題。

(圖:看起來彷佛有學生利用 TimeToast 作了臺灣貿易史的 Timeline)

Tiki-Toki

Tiki-Toki的時間軸看起來很炫,製做出來的時間軸圖表不僅能夠包含多媒體的內容,還能自定樣式、背景圖片,若是好好設計確定能夠作出很棒的時間軸圖表。

此外,Tiki-Toki 的時間軸是以 HTML5 技術製做的,所以使用者不須要額外安裝軟體,只要有支援 HTML5 便可瀏覽(當然,HTML5 目前還是個還沒有定案的標準 :p),換句話說你也能夠很輕易的嵌入本身的網站,不須要強迫你的使用者裝 Flash 當閃電俠。

dipity

dipity目前首頁的時間軸是剛過世不久的蘋果電腦創辦人 Steve Jobs 的平生年表。

Timeline Reader of Associated Press(美國聯合通訊社)

Timeline Reader是美國聯合通訊社的實驗室產品,利用時間軸介面讓使用者瀏覽、閱讀新聞。

Hiiir 好時光

Hiiir 好時光,這是國人自製的時間軸部落格外掛,早期是用來讓部落客、網站經營者能夠利用他們提供的時間軸外掛來呈現網站上的文章、資料,並且將時間軸外掛做為廣告嵌入的工具,協助網站創造另外一種獲利的可能。

SIMILE Widgets: Timeline

SIMILI Widgets相當特別,這是由麻省理工學院(MIT)某個實驗室的專案計畫獨立出來的一個開放原始碼專案,提供了幾個網站開發人員可能有機會用到的資料視覺化元件。其中我覺得 Timeline 是最棒的(其餘的應該都有更好的替代品)

其餘開發資源

  • jQuery Timelinr 網頁上的 demo 效果不錯,不過這看起來比較適合拿來接案XD
  • Pure CSS Timeline 很不錯的一個範例,單純利用 CSS 的技巧將列表(也就是 HTML 中的 li 標籤)以時間軸的方式呈現。
  • TimeGlider 自己是一個製做時間軸圖表的網站,同時也提供了一個 jQuery 的外掛:(timeglider.js)[http://timeglider.com/jquery/]

Evolution of Web(網際網路的演變)

最後再補充一個時間軸圖表的運用,Evolution of Web不是讓網友製做時間軸圖表的工具,而是以時間軸來呈現 HTTP 通訊協定、Web 與各家主流瀏覽器自 1990 年以來的演進。當然,這個網站是利用 HTML5 技術製做的。

相關文章
相關標籤/搜索