Timeline 是一個 JavaScript 程式庫, 它並不是 jQuery 套件, 所以無需載入 jQuery 主程式。要如何解釋 Timeline 的功用, 這實在有點難; 但如果你是噗浪的愛用者, 那麼你馬上就可以心領神會。因為它使用起來幾乎跟噗浪一模一樣(只差不能留言跟按讚而已)...
Timeline 是一個 JavaScript 程式庫, 它並不是 jQuery 套件, 所以無需載入 jQuery 主程式。要如何解釋 Timeline 的功用, 這實在有點難; 但如果你是噗浪的愛用者, 那麼你馬上就可以心領神會。因為它使用起來幾乎跟噗浪一模一樣(只差不能留言跟按讚而已)!
基本上, 這個套件可以做出一個可以由左而右捲動的捲軸(以噗浪的術語稱為「河道」, 我以下也將稱之為河道), 並在其中顯示從你所給定的資料來源。當你選取一個資料時, 河道上方就會顯示較詳細的資料。不過它的時間軸方向跟噗浪相反。
使用時機
Timeline 其實有一個很重要的功能, 就是它可以整合來自 Twitter、YouTube、Flickr、Vimeo、Google Maps 和 SoundCloud 等等各種來源的媒體並且顯示在河道上方。你在觀賞 Timeline 的公開範例時應該會注意到這一點。很可惜, 經我測試, 這個功能只適用於單純的環境, 例如你在你的網頁中只使用 Timeline 提供的功能, 並沒有載入各式各樣的服務, 如此 Timeline 的這個功能就可以運作得很好。然而, 如果你打算把它嵌入你的部落格, 或者說你的網頁已經額外載入其它的 JavaScript 程式庫的話, 那麼很抱歉, 你可能會遇到各種千奇百怪的問題。
在我的測試過程中, 發現的相容性問題很多, 包括無法顯示外框之外的任何東西, 這發生在重導向的網址 (使用了 frame)。最慘的則是載入時間過長(超過五分鐘), 然後引發 Frash 當機, 順便把瀏覽器(尤其是 Chrome)也當掉。不然就是永遠顯示為載入中(尤其是 IE)。
因此, 如果你希望 Timeline 能正確的運作, 除了多測試, 沒有其它辦法。而最大的問題是出在 Media 這個地方, 所以在這篇文章裡面我會把這個功能略過。
那麼 Timeline 能拿來做什麼呢?
如果你有什麼東西是想要依照日期時間來排列展示的, 那麼 Timeline 是最適合的。當然, 它並不提供方便的搜尋功能, 所以我說它適合用來「展示」。
例如, 我在下面利用 Timeline 做了一個我的部落格文章列表的河道, 如此讀者們(包括我自己)就可以方便的依照發布日期瀏覽各個文章。由於 Timeline 使用一個 <div> 來展示許多資料, 而且它可以左右捲動瀏覽, 它的最大好處就是它並不會佔用太大的空間。
或許你不同意我的說法; 它不是需要左右捲動, 才能看到所有內容嗎? 如此跟上下捲動有什麼不同?
有很大的不同。而且這跟大家習慣的網頁組版方式息息相關。由於我們都已經習慣在網頁上各個地方擺上各具功能模組或 gadgets, 所以通常我們往上下捲動時, 這些模組或 gadget 的位置就會上下跑。或許有些人會把需要瀏覽的資料放進可以上下捲動的 <div> (這樣做更簡單, 甚至不需要使用什麼程式庫); 然而由於文字走向的關係, 你並不會希望讓標題和詳細內容以水平並列的方式呈現。
當然啦, 喜歡不喜歡、習慣不習慣, 這些都是主觀的認定, 本來就不能強求。或許等你看到 Timeline 的實際範例, 或者我列在下面的實際範例之後, 你能體會 Timeline 的優點。
方便的資料來源設定
有了方便的展示工具, 那麼資料來源又該如何設定?
這就是 Timeline 另一個令人稱讚的地方。Timeline 可以接受兩種資料來源, 其中之是 JSON, 另一個就是 Google Spreadsheet。你沒有看錯, 就是 Google 文件裡的試算表!
先說 JSON 好了。JSON 是一種簡化的資料格式, 你可以使用文字編輯軟體自己製作, 做出來樣子如下:
{
"timeline":
{
"headline":"The Main Timeline Headline Goes here",
"type":"default",
"startDate":"1888",
"text":"Intro body text goes here, some HTML is ok",
"asset":
{
"media":"http://yourdomain_or_socialmedialink_goes_here.jpg",
"credit":"Credit Name Goes Here",
"caption":"Caption text goes here"
},
"date": [
{
"startDate":"2011,12,10",
"endDate":"2011,12,11",
"headline":"Headline Goes Here",
"text":"Body text goes here, some HTML is OK",
"asset":
{
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416",
"credit":"Credit Name Goes Here",
"caption":"Caption text goes here"
}
}
]
}
}不過 JSON 本身有嚴格的格式規則, 你只要少寫一個逗號、冒號、引號, 甚至括號, 它就不能用了。所以除非你另外使用工具來編輯, 否則你可以考慮使用 Google 試算表。
以下我假設你已經很熟悉 Google Docs, 所以許多細節我都不會談到。
首先, 你必須使用 Timeline 可以接受的格式。其實別擔心, 你並不需要小心翼翼遵守什麼撰寫規則, 因為 Timeline 已經幫你把範本準備好了!
你只需要在 Timeline 網頁上找到 File Formats 這一段, 按左邊中間的 Google Doc Template 按鈕(確定你已登入你的 Google 帳號), 按下「繼續」按鈕, 它就會自動幫你把文件製作出來。接著, 你可以把原有的內容通通刪掉(標題不能刪), 然後把你自己的內容打進去。你最好自己給這個檔案另外取一個名字(從「檔案」選單中執行「重新命名...」), 未來才不會忘記這個文件的目的。請參考我的文件寫法:
文件中 Media 這一欄原本應該填入網址, 但是由於如前所述的原因, 我建議你若非完整測試過, 否則就讓它保留空白就可以了。不過這樣會使得原來的鏈結無法使用, 所以有一個變通的方法, 就像我在第一個項目中所加上去的技巧, 即在 Headline 這一欄中的文字裡, 把 <a> 標籤加上去, 如此在瀏覽時仍然可以連到你希望的網址。
接著, 有一件非常重要的事情必須完成, 否則你就算把這個 Google 試算表做好, 你的 Timeline 還是空空如也。
如上所述, 在 File Formats 這一段中有講到, 你必須額外做一個「發佈到網路」的動作(選擇「檔案」、「發佈到網路」), 如下圖所示:
如上圖之指示, 當你按下「開始發佈」按鈕之後, 下方會出現該試算表的公開網址, 把它複製起來, 這就是我們要的。
鑲嵌於網頁中
到這裡為止, 我們所需要的東西已經都齊全了。以下就是把 Timeline 嵌進網頁中的全部網址:
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "800px",
height: "400px",
source: 'https://docs.google.com/spreadsheet/pub?key=0AsBkiWeaT6pEdENSTE81eXpnZGVKT3AzdEktS3VjV0E&output=html',
maptype: 'watercolor'
}
</script>
<script type="text/javascript" src="http://veritetimeline.appspot.com/latest/timeline-embed.js"></script>
</div>請使用剛才複製的網址, 把程式碼中 source 的既有網址置換掉。如果你沒有置換掉的話, 那麼你就只會看到我的試算表內容, 而不是你的。
或許你也需畏把 width 和 height 兩個值略作修改, 以符合你的網頁版型。
由於前述的某些原因, Timeline 也許不能在每個瀏覽器上面都正確執行。如果你打算把它用在商業網站中, 或許你最好做完整的測試。
Timeline 無法嵌入點部落, 在 ASP.NET @ Blogger 可以看到 Demo