您的位置:知识库 » Web前端

了解 digg.com 和 Reddit 这两个 Slashdot 的后继者

作者: Uche Ogbuji  来源: IBM中国  发布时间: 2010-09-04 10:12  阅读: 1500 次  推荐: 0   原文链接   [收藏]  
摘要:通过本篇文章,发掘组建现代新闻网站所需的用户和开发人员特性。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 站点效用的重要因素。

0
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻