分类目录 ‘Website’

开了自己域名的博客,第一篇就得来个重磅一点的才对得起这4美金的域名。作为一个技术从业者十年,逛了十年发现有些知识东一榔头西一棒槌的得满世界看个遍才整理出个头绪,那咱就系统点的从头一步一步的说,一个从日几千访问的小小网站,到日访问一两百万的小网站,怎么才能让它平滑的度过这个阶段,别在技术上出现先天不足,写给一些技术人员,也写给不懂技术的创业者。

对互联网有了解的人都有自己的想法,有人就把想法付诸实现,做个网站然后开始运营。其实从纯网站技术上来说,因为开源模式的发 展,现在建一个小网站已经很简单也很便宜。当访问量到达一定数量级的时候成本就开始飙升了,问题也开始显现了。因为带宽的增加、硬件的扩展、人员的扩张所带来的成本提高是显而易见的,而还有相当大的一部分成本是因为代码重构、架构重构,甚至底层开发语言更换引起的,最惨的就是数据丢失,辛辛苦苦好几年,一夜回到创业前。

减少成本就是增加利润。很多事情,我们在一开始就可以避免,先打好基础,往后可以省很多精力,少操很多心。
(全文 …)

网站分析通过统计点击流数据及网站产生的其他各类数据,提供各种数据报表来监控网站的运营状态,为网站的优化和改进提供参考依据。但网站分析能提供的绝不仅有数据,其中点击热图(Heat Map)是对网站分析的一个很好的扩 充,目前网上介绍点击热图的文章也比较多,很多网站交互设计师用点击热图来评估用户与网站之间的交互状况从而改善用户体验。这里简单介绍几个点击热图的实 现工具以及用我的博客做的点击热图的实验。

几款点击热图工具

Sidney的博客中很早以前就介绍过一款点击热图的分析工具——Crazy Egg令人惊讶的优秀网站分析工具,文章是由Tenly写的。另外网上介绍比较多的点击热图工具还有ClickTabletealeaf,这些工具都是通过JS来实现 的,只要在相应的页面上嵌入JS代码,就能在这些工具的网站上查看该页面的点击效果图,实现机制跟Google Analytics较为类似。这些工具一般都需要收费,但会有1个月的免费试用期,有兴趣的可以去试试。

另外有一款开源的工具——ClickHeat,可以下载它的源代码部署到自己的服务器上,并在网站页面中嵌入相应的JS代码来生成点击热 图,然后通过调用相应的页面查看。要部署ClickHeat,服务器需要支持PHP,同时因为点击的日志和所有统计结果都保存到了部署的服务器上,所以对 服务器的空间和资源占用都比较高。

点击热图应用实例

前段时间用我的博客做了下网站点击热图的试用实验,我用的是Click Density,跟ClickTable和Crazy Egg类似,也是通过嵌入JS的方法来实现的,在结果的输出页面可以选择点击的时间段、浏览器类型等条件对结果进行筛选,下面的生成的几张点击效果图:

Heat Map

heat-map

因为我的博客访问量不大,所以热图的分布不是很明显,但还是能看出主要的点击集中在博客最新的文章上面;另外右侧的搜索、订阅和分类目录模块也占据 了一定的点击比例。一般网站的点击都会聚集在全局导航栏的下面那一块,并且呈“F”型分布,在需要下拉的页面部分点击一般就会剧减(对于需要下拉查看的内 容,除非用户找到了他们需要的信息,否则一般不会过多地进行点击)。

Click Map

click-map

这张是点击分布图,红叉代表无效的点击,绿叉代表有效点击。这个图似乎比上面单纯的显示点击分布或点击密度更有价值,因为它显示了页面的有效点击, 从图上可以看出用户在浏览我的博客时除了点击文章标题和搜索框外,订阅按钮上面也分布了大量的有效点击数,这个对于博客来说至关重要,因为博客类网站的一 个重要目标就是产生订阅,所以通过这个图可以查看有多少有效点击转化成了网站目标,占总的点击比例及占总的有效点击的比例。

另外可以看到图上的某些有效点击并非一定落在可点击的对象上,正是因为博客内容更新时导致页面元素(标题位置、内容摘要行数等)的偏移,而生成的点 击不会跟随页面元素移动,导致了生成图片显示上的误差。

Hover Map

hover-map

这个图其实相当与网页覆盖图(Overlay)或点击密度图(Click density),Google Analytics上面也提供了类似的功能。网页上可点击的位置会由虚线框圈起来,鼠标放到某个框上面就会显示该模块被点击的次数及点击转化率 (CTR);另外如果你为你的网站设定了目标,那么同时也会显示点击该模块的目标转化率,对于分析网站的重要页面是个不错的选择。

点击热图的价值及缺陷

点击热图的价值

  1. 通过点击热图发现用户经常点击的模块或聚焦的内容;
  2. 观察页面中的哪些模块具有较高的有效点击数,用户会尝试去点击哪些模块;
  3. 应用于A/B测试,比较不同页面的点击分布情况;
  4. 用于改进网站交互和用户体验。

点击热图的缺陷

  1. 网站点击热图虽然提供了一种很直观的网站分析途径,但其功能还需完善,因为实现机制一般都是根据页面的坐标来定位点击位置,所以不同的分辨率和网 站布局方式(居中等)都会导致结果的不准确;
  2. 在使用点击热图时需要记录用户每次点击的行为,所以会对网页的性能产生影响,导致网页的加载速度变慢;
  3. 当页面各元素的位置发生大范围变动时,点击热图的结果就失效了。

最后顺便提一下,我的博客之前的一篇文章——网站数据分析的基本流程中介绍了DMAIC模型,当时我是在查PDCA戴明环的相关资料的时候不经意间发现 的,感觉很适用于网站分析的流程。前几天在翻Avinash Kaushik的《 Analytics》,发现书中也介绍了DMAIC模型,所以感觉DMAIC确实是梳理网站分析流程的一个不错的选择。

每年读写网(ReadWriteWeb)都会从各个领域中评选出十佳产品或程序。今年,十大语义网产品和应用的评选拉开了2010“最佳”系列产品评选的 序幕。

今年,读写网从语义网的新创公司中选出了五个产品,从大公司里挑出了五项互联网应用。这些新创公司代表了语义网发展的前沿趋势。随着用户量 的增长及科技的创新,今年的语义网产品对互联网产生了一定的影响。读写网所挑选的公司为语义技术的大规模应用提供了最好的例证,其中包括 Facebook、谷歌及英国广播公司BBC等。

2010年十大语义网产品

Semantic — 语义网

虽然很多人认为Semantic Web(语义网)这个名词应仅用于已被W3C认可的技术(W3C全球万维网联盟),比如说RDF(资源描述框架,W3C提出的一组标记语言的技术标准)和 SPARQL(W3C的RDF数据工作组设计的一种查询语言和协议,用于RDF数据的查询),但是我们有时也会互换使用“Semantic Web”(语义网)和“Semantic technology”(语义技术)这两个术语。事实上,读写网所挑选出的十大应用技术中有相当一部分并没有获得W3C的认可,亦或已经在某种程度上得到 调整,例如Facebook对RDFa的应用。因此,我们选择了将“Semantic Web”这个术语应用于更宽泛、包容更广阔的意义中。简单来说,语义网产品是将意义与语境融入到数据中去的产品。
(全文 …)

译文:电商交互设计组

前言

自Google出现并改变了游戏规则之后,用户对于网页的关注时间一直在下降。对于任何一个时下话题,有千万条结果可以关注,可以抓住访问者注意力 的机会非常明显地下降了(2002年,BBC报告指出大约在9秒内)。想象一下你自己浏览网页时的时:你会阅读所有的文字和图片,尝试着彻底了解整个 网页内容是什么吗?最有可能的答案是:“不会。”伴随着充斥四周的信息轰炸,我们像被宠坏了的孩子那样,不会投入足够的的注意力去关注一个网页到底想告诉 我们什么。

我们快速决定是否关注一个网站时,取决于我们在几毫秒的时间里可以弄清楚多少东西。提供良好的第一印象是设计师和网站所有者的责任。说服访问者的机会非常 小,大部分设计(很可能也包括你)将这个作为次要工作,因为大家觉得设计师只关乎美学。然而,大多数的网站并不是是为了给访问者留下深刻印象,大部分的网 站是为了销售而存在的。无论它是为了让访问者去订阅博客还是下载一个试用版软件,每一个网站的存在最终都是为了销售某些东西。
(全文 …)

1、图书交换站——可换可买

在Titletreader,用户注册后提交自己闲置的图书到站上,当有人选择要阅读提交的书后,用户将书发给请求的一方,同时获得一个信 用点。用户可以消费这个信用点,去选一本自己喜欢的书,以此类推。发出的书越多,获得的信用点也越多,同时你也可以免费看到更多的书。这个站除了换以外, 每本书的旁边还有一个购买按键,如果想永久保留这本书,可以直接购买。
代表网站http://www.titletrader.com
 2010年国外比较热门的14种电子商务模式!
2、猜谜式的购物——时间就是金钱
这是一种非常有趣的互动式购物模式。美国的Midnightbox网站每周在美国东部时间的深夜推出一款产品,商品在上线时完全被遮盖,但 会给出一点线索,如商品包装的长、宽、高、重量、建议零售价、生产商等。这时候访客可以到论坛里讨论猜测,随着时间推移,网站将逐步给出更多的线索,商品 的价格也在逐步加高。在规定时间内猜到的人将赢得1000点的信用,同时可以以非常便宜的价格购买此商品,这时商品的真面目将展示在网站上,1000点的 信用还可用来兑换店里的一些商品。总之,猜中的越早,购买越便宜,还能赚积分,真可谓时间就是金钱。
(全文 …)

Flash和HTML5都是目前WEB应用上最新的技术,不过HTML5的运用需要浏览器厂商们的支持,但是FLASH就不一样了。今天的分享:50个展示HTML5特性的演示。希望你可以从中体会到HTML5的力量。

1. Tunneler

Tunneler
(全文 …)

身边其他行业的朋友总是很不能理解网上为什么可以卖衣服卖鞋子,理由是“电子商务只能做标准产品吧,我就不会在网上买衣服,不合身怎么办呢”。这个 理由听起来非常理性,因为“不合身概率大”,所以“很可能会不合身,浪费钱”,所以“我不会在网上买衣服”。既然如此理性,我们就更理性的用数学来聊一 聊。

为什么会有人在网上买衣服买鞋子?

我们先考虑不能退货的情况。假如一件外套价值500元(假设一般来说线下同样质量的衣服是500元),顾客心中认为外套这个种类不合身的概率是 30%,消费者拿到货如果不合身不能退货也没法用其他渠道处理掉(简单起见,我们认为不合身就代表衣服完全没有价值,收益为0)。在这种情况下,消费者预 期的收益是500 x 70% + 0 x 30% = 350元。所以如果消费者理性的话,线上只要能够提供7折,他就应该在线上买。更一般的情况,假设商品价值为V,拿到货后不满意概率为D,网上标价为 P,P低于V x (1-D)就有吸引力。这也部分解释了为什么初期网购服饰大多是廉价的款式,因为很多人对于网购心存疑虑,心理预期的不满意概率(D)值很高,所以V x (1-D)就很小,价格就上不去。
(全文 …)

一淘网技术简介

作者: seasun

一淘网( www.etao.com )于2010年10月9日10:39正式上线,很多同学和同行对一淘的系统架构和面临的关键技术问题都很感兴趣,这篇短文希望能给予简要的介绍。

系统架构

一淘网技术简介 | iwanna.cn 我想网

一淘的系统架构如上图所示。可以看到,一淘有三个数据来源:互联网、外部合作方和淘宝主站。其中,互联 网数据通过crawl的方式获得,而后两者则通过feed的方式提供。

抓取系统的功能包括:网页抓取、抓取调度、域名解析、死链检测、JavaScript执行等。目前,一 淘的资讯、话题、问答combo中的大部分数据都是通过抓取系统从互联网获得的。它是一淘一个重要的“原料厂”。
(全文 …)

一、 何谓“可用性测试”

“可用性测试”也可称之为“用户体验测试”,是通过产品功能设计测试任务,让用户按照任务完成一些真实测试,检验产品的可用性,作为产品后 续改进和完善的重要参考依据。
二、 为什么要进行可用性测试
1. 存在如下疑问
在我们研发完成了新的产品功能或是创造了新的产品特性之后,总是有这样的疑问:
a.最新的版本是不是比以前的版本更好?
b. 我们的网站与竞争对手的网站使用起来一样容易吗?
c.用户是否能够按照我们设计的流程完成他们所要完成的工作?
d.我们的设计师是否按照 用户的操作习惯和产品的特性设计排版了?
(全文 …)

看别人的作品,不是为了记住很多的技巧和花招,以期待将来能“套用、借鉴”到自己工作中。真正的欣赏需要消耗“心力”去解读,揣摩变化背后的意图…

只要在网上无聊,我会固定在浏览器网址栏里敲入一些字母,组成网址进入到那些熟悉的网站。像老朋友打招呼一样,我总是希望对方能有些变化,这个习惯六年来没有变过。看别人的作品,不是为了记住很多的技巧和花招,以期待将来能“套用、借鉴”到自己工作中。真正的欣赏需要消耗“心力”去解读,揣摩变化背后的意图。

在积攒了很多截图和案例之后,我才猛然发现,其实关注太多很容易分散精力,经典往往永远走在最前边,只需要关注他们就够了。如下列表个人认为也许不一定完全代表当今Web 的巅峰水准,但长期不懈的努力的确创造了很多难忘瞬间。

ibm.com
企业网站的典 型,这个网站我看的时间最长,大概有六七年,以前主要学习Web标准化方面知识。前两天刚发现改版了,所以放第一个推荐。纵观这几年的发展,总的来说中规 中矩,符合IBM品牌踏实可靠的特质。这个2010的新版突破了老爷车式的科技感,难得“亮眼”了一回,以至于用1600的显示器打开吓一跳。
(全文 …)