透過digg.com和Reddit挖掘Mashup應用

marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog336280.html" frameborder="0" width="336" scrolling="no" height="280">
通過本篇文章,發掘組建現代新聞網站所需的用戶和開發人員特性。digg.com 和 Reddit 是兩個熱門站點,二者均可自行其道,也都可以作爲 mashup 的資源和爲用戶提供定製體驗的手段。 Reddit 定製的示例之一就是將 Greasemonkey 的擴展用在 Mozilla Firefox 瀏覽器上。

slashdot.org 是一個社會網站,用戶通過提交帶有簡要註釋的 URL 就可以在這家網站上找到任何感興趣的東西(URL 與註釋的組合以後再討論)。對於這類網站的很多用戶來說,雖然 Slashdot 的一些基本思路可追溯到網絡通信的初期,但它仍已久負盛名。像 Slashdot 這樣的網站,其特徵就是提供討論問題和突出顯示較爲有趣信息的機制。在本專欄中我曾討論過 del.icio.us 這個網站,該站點主要關注的是有趣鏈接的聚合和以用戶爲中心的鏈接管理。而 Slashdot 卻將目光集中在了組討論和鏈接的新聞價值上。諸如 Advogato、Kuro5hin 和 MetaFilter 這些類似的網站均引入了一些創新理念,其核心就是怎樣將網絡技術應用於討論組的社會生命力上。這些網站成爲了新一代以用戶爲中心、依託 Web 2.0 建立的新聞網站的模板,digg.com 和 Reddit 就是其中兩個典型的例子。在本篇文章中,我將分別從使用者和開發人員的視角對這些網站進行討論。

有人會問是什麼使 digg.com 和 Reddit 如此具有 Web 2.0 的特徵?是因爲它們擁有一些 Slashdot 和其公司所不具備的東西嗎? 事實上,他們的成功並不像我們認爲的那樣是依靠某些技術上的優勢。有關這些技術概念從何而來的爭論幾乎是無法平息的。有人說這些網站只不過是類似 Usenet、電子布告欄、或 WELL (Whole Earth 'Lectronic Link) 這樣的最傳統的社會型網站的更新版而已,而 WELL 則早在 1985 就已出現,從中可以很容易看到諸如 Slashdot、digg.com 或 Reddit 這類網站的痕跡。在本專欄,我無意過多介紹 Ajax 的各種美妙的用法,而是會着重於 Web 2.0 站點的開放數據和社會生命力特性。無論您從何處開始接觸 Web 2.0,digg.com 和 Reddit 都是值得您研究和學習的對象。

門面

我討論過 del.icio.us,曾指出對於大多用戶來說,他們更看重網站的特性,比如 Web 提要,而非網站首頁(其門面)的設計,經常訪問這個網站的用戶不會過多關注首頁。但 digg.com 和 Reddit 二者的主頁卻與之大相徑庭。它們的主頁是大多數用戶的主界面,就像是報紙上的頭版。在這裏,用戶不但可以通過單擊標題閱讀感興趣的新聞故事,還可以選擇使用網上投票和評論系統對新聞發表意見。 圖 1 顯示的就是 digg.com 首頁的一部分。

圖 1. Digg 的主頁

 您可以在頁面的左邊看到 digg.com 網站的簡介,並且可以找到您所感興趣的特定內容。訪問者的負面或正面投票的總計(稱爲 “digg”)決定了哪些新聞故事會被突出顯示,訪問者可以通過單擊查看新聞故事的詳細內容,包括 digg 和評論。此外,您還可以看到 “Upcoming Stories” 選項卡,裏面收錄的是那些正面(“digg”)或負面(“bury”)投票數還不足以決定其是否值得突出顯示的新聞故事。您也可以感受到在這樣一個熱點網站中,它的某些社會特性的力量是多麼地強大。網上隨時都有近 4000 個備選新聞故事可供瀏覽,但大多數訪問者只會根據其標記,關注其中的一部分新聞故事。

圖 2. Reddit 的主頁

與 digg.com 相比,Reddit 的界面簡單得多(您可能會說這個界面太過 “實際”,但這並非壞事),由於摘要更爲簡短,因此就能列出更多的頭條新聞故事。 默認視圖顯示的是 “熱點” 新聞故事 ,即最新的、投票(“點數”)數超過一定限值的那些新聞故事。而 “new” 視圖則類似於 digg.com 的 “Upcoming Stories” 視圖,之所以這麼說是因爲其中的新聞故事都是按發佈的時間先後(而不是按所收到的投票數量的多少)而選中的。

mashup

mashup 是一個 Web 2.0 站點的數據與另一個站點數據的綜合,對這種新風格舉足輕重,因爲它們展示了這類站點是如何將靈活性賦予網站用戶及網站所有者的,而且它們也消除了引入那些立足於成型的想法之上的新思路的障礙。mashup 是一種綜合了多種資源的 Web 站點。有時,這些資源的數據類別不同;mashup 可以將來自一個站點的當前的運動比賽分數疊加在來自與之相匹配的 Web 服務的運動事件的地圖之上。Web 2.0 站點的特點之一就是它們試圖充當類似美聯社或路透社的角色,旨在爲其他網站或信息服務商提供信息來源。

這種新風格的一個典型例子就是 Doggdot.us,這個網站以前叫做 diggdot.us(在 digg.com 的律師對其提出警告,要求不得使用含有 “digg” 名稱後,改成了現在這個名字)。doggdot 是一種 mashup,其 Web 提要來自於 digg.com、Slashdot 和 del.icio.us 的 “熱點” 標記,doggdot 的創立是由於它的開發人員青睞這三家網站的信息資源,但卻厭倦了疲於應對在站點間複製那些新聞故事。 digglicious.com 則錦上添花,它是 digg.com 和 del.icio.us 上新聞故事的實時體現,可在不需要瀏覽器更新的情況下在動態顯示中呈現用戶的動作。此外,它還通過其自身的綜合評分系統提供了 “what's hot” 提要。

當提到聚合網絡新聞報紙站點時,我們必須要提到的一個典型例子是 popurls.com。該網站提供 15 個不同新聞媒體網站上現在最流行的的熱點文字、圖片、聲音及視頻的鏈接。 這個網站也證明,要與社會 Web 站點向衆人開放的信息量保持一致並非易事。當每個人、每個公司都可以提供廣播服務時,電視廣播就會變得異常擁擠,但 mashup 卻 仍是源自這種新風格的靈活性的重要部分,它的存在至少可以讓您能按照自已的喜好來管理寵雜的網上信息。

控制新聞的使用

與 del.icio.us 相比,digg.com 和 Reddit 更側重於自己的頁面設計,但用戶仍可對其站點進行定製和控制。您所要做的就是對界面稍做處理。也許您不喜歡它的視覺設計,也許您想增強它功能的某一方面。可用於對網站體驗稍做處理的一種爲人熟知的工具是針對 Firefox 的 Greasemonkey 擴展。 Greasemonkey 允許爲特定的 Web 站點安裝腳本,每當加載該站點時,都會調用這些腳本。由於腳本用 JavaScript 編寫,因此您對錶示的所有方面都能進行大量的控制。

Reddit 腳本編寫

有些人喜歡 Reddit 顯示關於新聞故事的評論時所採用的模式,因爲它綜合考慮了新聞故事評定的方法及其時間順序這兩個要素。但另一方面,喜歡討論的人往往在 Reddit 上比在 digg.com 或 Slashdot 上更文明些,但他們也發現怪異的評論顯示順序會使對評論思路的跟蹤變得有些棘手。Mike Purvis 曾創建過一個 Greasemonkey 腳本,叫 Reddit Highlighter,它的貢獻就是使用戶跟蹤自己曾做過貢獻的那些對話變得更爲容易。也許在 Reddit 對話中,您還會遇到那些偶然到訪的用戶,而這些用戶往往會製造很多麻煩。這時您可以使用 RedditKillfile(一種 Greasemonkey 腳本)創建希望從瀏覽器視圖中隱藏其評論的那些 Reddit 用戶的 “killfile”。最後,由於鍵盤更適合用來在用戶界面中導航,所以您可以運行 Paul Duncan 編寫的 Greasemonkey 腳本來在 Reddit 或 digg.com 內增加對導航訪問鍵(NAK)的支持。

Greasemonkey 腳本分析

爲了顯示定製像 Digg 或 Reddit 這樣的 Web 站點是多麼容易,我在清單 1 中給出了 Reddit Highlighter 腳本的一部分:


清單 1. Reddit Highlighter Greasemonkey 腳本摘要

                // ==UserScript==// @name          Highlight My Comments (partial)// @namespace     http://uwmike.com// @description   Highlights comments by the current user on Reddit// @include       http://reddit.com/info/*// @include       http://*.reddit.com/info/*// @include       http://reddit.com/user/*// @include       http://*.reddit.com/user/*// ==/UserScript==//From: http://uwmike.com/articles/2006/08/16/reddit-greasemonkey/var userURL, allLinks, thisURL;userURL = document.getElementById('topbar').getElementsByTagName('a')[0].href;allLinks = document.getElementById('main').getElementsByTagName('a')thisURL = String(window.location);if (thisURL.indexOf('reddit.com/user')){    // user page    for (var i = 0; i < allLinks.length; i++) {        if (allLinks[i].innerHTML == 'permalink')        {            var newLink = document.createElement('a');            newLink.innerHTML = 'context';            urlParts = String(allLinks[i].href).split('/');            last = urlParts.pop();            newLink.href = urlParts.join('/') + '#' + last;            newLink.className = 'bylink';            allLinks[i].parentNode.appendChild(newLink);        }    }}

開頭的註釋部分是一個標準 Greasemonkey 腳本塊。它指定基本的元數據,更重要的是,通過 @include 行指定此腳本可以應用到的那些 URL。 其餘的就是頁面加載後應用到此頁面的 JavaScript 語句。可把它視爲特定於用戶的 onload 屬性調用。腳本將檢查此 HTML 以尋找它能向其插入所需更改的特定結構。 這意味着網站開發人員在更改設計時,會將腳本破壞,但許多 Web 2.0 網站甚至對能執行 screen-scrape HTML 操作的工具都保持儘量友好。Google 就曾因爲對郵箱界面所做的一個小的改動破壞了 Greasemonkey 腳本從而一度引起了不小的混亂

結束語

digg.com 和 Reddit 對開發人員和用戶而言都非常有用,因爲它們針對的都是靈活性和個性化。它們簡單的 Web 界面能吸引更多用戶到訪。它們對 Web 提要的本地支持打開了通過 mashup 進行共享定製之門,它們對 Web 腳本的友好性則方便了通過 Greasemonkey 腳本進行個人定製。從這些網站的成功案例中,我們可以總結出:簡單的界面、開放的數據以及豐富的元數據是拓寬現代 Web 站點效用的重要因素。





發佈了3285 篇原創文章 · 獲贊 1 · 訪問量 121萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章