响应式网页设计 | CSS | 前端观察

响应式网页设计

发表于 02. Nov, 2011, 分类: CSS, Front News, Tips , 25 条评论 »标签: & &

这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下。

上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT

移动互联网的现状和未来

在说到这个话题前,我们先看下网页设计和前端开发的现状:

  1. 全球有超过53亿手机用户(包括传统手机)
  2. 国内3G用户超过1亿
  3. iPhone4手机在2010年出货量超过3000万部;
  4. iPhone 4S上市前3天卖掉400万部;
  5. Android手机每天激活超过50万部;
  6. iPad出货量已经超过2.5亿部;
  7. 预计到2015年,移动互联网的数据流量将超越桌面端的流量
  8. 。。。

嗯,大家也许已经开始注意到,自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临,现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么,什么是响应式网页设计?

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的!

或许大家之前会注意到,有很多知名网站都推出了iPhone或针对智能手机的专门网站,比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗?来让网站在每个设备中得到相应的视觉风格和操作体验?

这样势必就要增加很多的工作量,而且很多还是重复的。

我们在做页面的时候,一般很强调模块化的概念,我们要求一个合格的模块要能够“可扩展、无侵染”,它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配,而不用为每个设备单独做个子网站!

但是,产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样,甚至要像素还原——WTF!不同的浏览器本身的功能、行为和处理方式都不一样,为什么要表现完全一样?!

let the browser flow…

怎么做?

其实响应式网页的实现很简单,都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的,而它们自带的浏览器都是基于webkit内核,所以我们可以完全使用viewport属性和media query技术实现网站的响应性:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放,maximum-scale表示最大缩放比例,1意味着不能进行缩放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

当然依靠屏幕宽度来进行适配是最简单的方法,media query有很多参数可以使用比如orientation、aspect-ratio等,不太了解的可以查看这篇详细的介绍

其实,media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格),前几年960.gs很流行,但是随着屏幕分辨率的普遍提升,它已经不太适合当前需求了,于是最近几年fluid grid开始逐渐多了起来,这种技术其实也很简单,只是将格栅的单位由px变成%,用百分比来控制页面每列的宽度,从而实现宽度的自适应。

使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度,从而保证页面的完整展现和基本功能。这也是一种不错的方法。

flex box

flex box是css3中的新技术,它很强大,可以实现很多我们之前无法想象的自适应布局。

有时我们希望网站能够以webapp的外观呈现给手机用户,flexbox是个不二的选择。

比如,要实现这样的简单结构:

它很像一个app的结构,头部和底部固定,中间高度自适应,用flexbox可以简单实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.flex_wrap{
	height:100%;
	display: box;  
	display: -moz-box;  
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.flex_bd{
	box-flex: 1;
	-moz-box-flex: 1; 
	-webkit-box-flex:1;
	background:#E7E7E7;
	overflow-y:auto;
}
.flex_hd{
	background:#16364C;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-weight:700;
	font-family:14px;
}
.flex_ft{
	background:green;
	height:30px;
	line-height:30px;
	text-align:right;
}

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="flex_wrap">
	<div class="flex_hd">前端观察</div>
	<div class="flex_bd">
		<p>这里是主内容区</p>
		<p>这里是主内容区</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="关于我们">关于我们</a>
		<a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a>
		<a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a>
	</div>
</div>

虽然这里还会有点儿问题,比如主内容区域内容太多会被隐藏掉,因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性,但是这个问题还是很好解决的,比如在里面嵌套一个子容器,用js来给定个高度并使用定位来实现滚动条从而完整展示内容,或者直接使用iscroll等js库来实现。好消息是,iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话,可能已经发现了一些问题:

  • 加载很多不需要的资源,比如多余的图片和样式内容
  • 带宽限制
  • 移动终端的内存和CPU限制
  • 图片大小和屏幕大小不匹配

嗯,任何一个方案都不是完美的,但也不会很糟糕。下面我们会提到一些可行的优化方案:

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器,我们可以将一些不常改动的静态资源存储到本地,比如css文件,css中用到的图片,以及一些js文件等:

1
2
3
4
5
6
7
8
9
10
CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后将文件保存为manifest格式,并在HTML标签中引入即可:

<html manifest="responsive.manifest">

这样,用户在第一次访问的时候会慢一点儿,但是后续访问会很快,3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是,先为移动设备设计界面,然后将PC端作为一个扩展。

这样做的好处是显而易见的,移动终端不会加载多余的资源,也不会因为PC端的样式而重绘页面,同时也不会影响PC端的表现。

流体图片(fluid image)

页面中的图片有时会比手机/平板的屏幕(viewport)宽,这样会将页面容器撑开,但是移动浏览器又不能scroll,结果图片被切掉一部分,然后还会有一部分内容被隐藏掉,用户看不到。

解决这个问题的方法很简单,将img的最大宽度设置成100%就可以了:

img{max-width:100%}

嗯,这里的前提是,没有给img标签设置宽度和高度,否则显示会有问题。另外不建议直接设置width=”100%”,因为会把小图拉大,模糊显示。

同理,video标签和iframe标签的宽度也可以这样做,而且最好不要使用iframe,宽度是个问题,性能也是一个方面吧。

CSS3 image

这个方法有些惊艳

我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情,而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中,而在CSS3中,任何元素都可以使用content属性了,这个方法就是结合css3 的attr属性和HTML自定义属性的功能:

<img src="image.jpg" 
	data-src-600px="image-600px.jpg" 
	data-src-800px="image-800px.jpg" alt="">

然后用media query来动态赋值:

1
2
3
4
5
6
7
8
9
10
@media (min-device-width:600px) { 
	img[data-src-600px] {
		content: attr(data-src-600px, url); 
	}
}
@media (min-device-width:800px) {
	img[data-src-800px] {
		content: attr(data-src-800px, url);
	}
}

当然,这种方法也有不足之处,比如PC端宽屏幕需要加载两个图片文件,然后我们也要为此准备多张图片文件等。

pre标签

有的网站,比如,像前端观察这样的技术博客,会用pre来显示源代码,而浏览器对pre标签默认设置white-space:pre,这样,代码就不会换行,从而撑开子容器,造成内容被隐藏的问题:

右边的文字被隐藏掉了。

解决方法很简单:

pre{
	white-space:pre-wrap
	word-wrap: break-word;
	word-break: break-all;/*如果要兼容IE,可以加上这句,连续字母断行的问题伤不起啊。。。。*/
}

当然,不只是pre标签,关键是white-space和word-break属性的值。

嗯,主要的技术和技巧其实就这些,大家不会陌生。下面是一些比较有用的工具什么的:

响应式网页设计工具与资源

国外在响应式网页设计上已经走的很远了,已经有很多工具和资源供我们参考和使用:

CSS 框架

实用工具

争论和总结

响应式网页设计被提出以来,争论就不断,其实核心问题只有两个个:太多的资源请求和有限的终端支持之间的矛盾、响应式的网页设计和移动终端在用户体验和视觉风格上的差异。前者不能容忍在弱小的手机/平板上通过龟速的3G/2G网络来加载一个笨重的PC端页面,而后者纠结响应式网站不像手机网站。

我的想法是,具体问题具体分析,比如,强内容的网站,完全可以尝试响应式网站,而重视觉和功能的网站,则可以尝试建立一个独立的移动网站。

另外,显然,响应式网页设计的大部分技术,是可以用在WebApp开发中的。

最后,欢迎各种吐槽、各种批评、各种建议、各种发散、以及各种新观点新技术~~欢迎发表评论~~

PS:如果你手上有android/iPhone,可以直接访问下前端观察。 🙂

参考文章:







作者: 神飞
爱好前端设计与开发,崇尚一目了然的设计。现居深圳。
Follow me on twitter @qianduan

如果你喜欢本文,欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢:

Zen Coding: 一种快速编写HTML/CSS代码的方法 | CSS | 前端观察

Zen Coding: 一种快速编写HTML/CSS代码的方法

发表于 14. Dec, 2009, 分类: CSS, Resource, Tips , 147 条评论 »标签: & & &

译自:Smashing Magazine

中文:Zen Coding: 一种快速编写HTML/CSS代码的方法

请尊重版权,转载请注明来源!

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。

你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。

在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用。JavaScript框架应运而生,它们同时引入了CSS选择器引擎。现在,你可以使用简单的CSS表达式来获取DOM元素,这相当酷。

但是,如果你不仅仅可以用CSS的选择器布局和定位元素,还能生成代码会怎么样?比如,如果你这样写:

div#content>h1+p

…然后就可以看到这样的输出:

<div id="content">
<h1></h1>
<p></p>
</div>

有些迷惑吧?今天,我将向你介绍Zen Coding,一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语),由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

注意:该视频原版位于Vimeo,但是要看的话需要翻[和谐]墙先,地址在这里:http://vimeo.com/7405114,上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的,上传后质量竟被大打折扣了,囧。youtube上也有一份视频,是基于Aptana的演示,一样很精彩:http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些,不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南,请看一下演示页面并立刻下载你适用的插件:

Demo

下载(完全支持)

下载(部分支持,只支持“展开缩写”)

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器”意为选择一些东西,但是在这里我们事实上是生成 一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的CSS选择器语法的一个小的子集,并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表:

  • E

    元素名称(div, p);

  • E#id

    使用id的元素(div#content, p#intro, span#error);

  • E.class

    使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;

  • E>N

    子代元素(div>p, div#footer>p>span);

  • E+N

    兄弟元素(h1+p, div#header+div#content+div#footer);

  • E*N

    元素倍增(ul#nav>li*5>a);

  • E$*N

    条目编号 (ul#nav>li.item-$*5);

正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿CSS选择器(呃,“缩写”抱歉),就像这样…

div#header>img.logo+ul#nav>li*4>a

…然后调用”展开缩写”行为。

这里有两个新增的操作符:元素倍增和条目编号。比如,如果你想生成5个<li>元素,你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素,每个里面都有一个<a>标签,你就可以简单的写为li*4>a,这样会生成以下HTML代码:

1
2
3
4
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写,div.item$*3:

1
2
3
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可,而且想要多少都可以。那么,这样…

 div#i$-test.class$$$*5

会被转换成为:

1
2
3
4
5
<div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>

你会看到,当你写a的缩写的时候,输出是<a href=”"></a>。或者,如果你写img,输出就是<img src=”" alt=”" />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的?有一个专门的文件,名为zen_settings.js描述了输出元素。这是一个简单的JSON文件,描述每种语言的缩写(是的,你可以为不同的句法定义缩写,比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样:

1
2
3
4
5
6
7
'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
			...
			},
			  'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
			...
			}
			}

元素类型

Zen Coding有两个主要的元素类型:“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片,而缩写是标签定义。通过片段,你可以写出你想要的任何代码,它也会照你写的格式输出;但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方,就像这样:cc:ie6>style。如果你不使用${child}变量,子元素将会输出于代码片段的后面

有了缩写,您必须编写标记定义,而且语法是非常重要的。通常,你必须写一个简单的带有所有默认的属性的标签,比如: <a href=”"></a>。当Zen Coding被加载后,它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以,如果你写<img src=”" alt=”" />,你会告诉Zen Coding这个标签必须是空的,然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写,你可以添加一个管道符号,它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的,Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么,这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先,它将一个完整的缩写分开为独立的元素:这样div>a 会被分成div 和a 元素,当然也会维持他们的关系。然后,每个元素,解析器先在代码片段内而后在缩写中寻找定义。如果它找不到,将会使用元素的名字作为新的标签,并为其添加缩写中定义的id和class。比如,如果你写mytag#example,解析器在片段或缩写中找不到mytag定义,它就会输出<mytag id=”example”><mytag>。

我们制作了很多默认的CSSHTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是,很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题,但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做法),它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关:它甚至可以用于这段JavaScript代码片段

1
2
3
4
5
6
7
var table = '<table>'; for (var i = 0; i < 3; i++) {
	table += '<tr>'; for (var j = 0; j < 5; j++) {
		table += '<td>' + j + '</td>';
	}
	table += '</tr>';
}
table += '</table>';

使用缩写包裹

这真的是一个很酷的特性,它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug?或者你需要添加一个装饰,比如一个背景图片或者边框到一个块级内容?你必须写开始标签,临时打断你的代码,找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能相当简单:它要求你输入缩写,然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本,它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置:标签的内容里面或者是开始和关闭标签中间。依赖于它的位置,它会包裹标签的内容或标签本身。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字,比如:ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候,它会将它作为一个重复元素:你的章节中有多少行,它就会输出多少次,并将每行的内容放到重复元素的最后一个子元素里面。

如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:

1
2
3
4
5
About Us
Products
News
Blog
Contact Up

你将会得到以下结果:

1
2
3
4
5
6
7
8
9
<div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

你可以看到,Zen Coding是一个强大的文本处理工具。

快捷键

  • Ctrl+,

    展开缩写

  • Ctrl+M

    匹配对

  • Ctrl+H

    使用缩写包括

  • Shift+Ctrl+M

    合并行

  • Ctrl+Shift+?

    上一个编辑点

  • Ctrl+Shift+?

    下一个编辑点

  • Ctrl+Shift+?

    定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢?因为Zen Coding是用纯JavaScript开发并迁移到Python,它甚至可以用于浏览器内部,这令它成为引入到CMS的首选。

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件:它获取文本、做一些处理并放回新的文本(或索引,用于标签匹配)。Zen Coding由JavaScript和Python编写,所以它实际上可以运行于任何平台。在Windows,你可以运行JavaScript版本,而Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding,你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如,TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能,但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

部分支持(只支持“展开缩写”)

Aptana是我主要的开发环境,它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具,所以任何一个新的Zen Coding版本都将会首先对Aptana可用,然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持,由Ian Beck开发。原始的源代码在GitHub上,但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做,还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档 以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附:Zen coding的具体用法

遗憾的是, 本文原作者并没有说明zen coding的具体用法,神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例,其它编辑器平台暂不描述,如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的,所以,Zen Coding也是支持Eclipse的,只是需要一个EclipseMonkey插件的支持,Aptana已经封装了这个插件,所以如果你使用Aptana,下面的第一步可以跳过。

  1. 通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana,可跳过这一步)
  2. 在你的当前工作去创建一个顶级的项目,给它命名,比如,就叫zencoding
  3. 在新创建的项目中创建scripts文件夹
  4. 解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:

  5. 安装之后,Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项:

  • Aptana版的官方插件是基于MAC机的,如果你用的是Windows,需要手动更改快捷键(在每个文件头部的注释片段中更改)
  • 官方的文件编码有点儿乱,修改官方js的时候,请注意编码问题,修改不当会造成相关功能的丢失;

DreamWeaver

好消息是,现在已经有了Zen coding for DreamWeaver插件,坏消息是,该插件支持的功能很少,只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外,没有测试该插件是不是只支持CS4版本。不过比较好的是,作者将本插件的源码也放出了,你可以自定义一个Dreamweaver的插件。

PS:官方的DW插件已经更新,推荐到官方去下载。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009

特别推荐:豪情同学将缩写给实践了一番,总结出了很多很棒的用例,推荐大家前去学习

原作者介绍:

Sergey Chikuyonok是一位俄罗斯的前端开发工程师和作者,他在优化方面有很大的热情:从图片、JavaScript效果到工作流程和节省时间的编码。访问他的主页他的Twitter







作者: 神飞
爱好前端设计与开发,崇尚一目了然的设计。现居深圳。
Follow me on twitter @qianduan

如果你喜欢本文,欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢:

AJAX页面浏览器前进后退按钮失效和地址书签的解决方案 | 阿辛的网志

AJAX页面浏览器前进后退按钮失效和地址书签的解决方案

on Thursday, January 20th, 2011 at 1:06 am by 阿辛, 2,410 views

最近在做一个AJAX整站的项目,主要遇到的几个问题为:
1. 局部刷新了页面,如何将url地址分享或者保存为书签?
2. 浏览器后退/前进按钮失效?
3. 搜索引擎不收录?

先说第3个问题,因为我们这个项目另有其他推广方案,所以并不对搜索引擎那么依赖,加上google是可以主动提交js内容的,相信百度日后也会支持,所以这问题并不是我要讨论的。而且我们选择使用整站AJAX是为了追求更好的用户体验。

问题1很关键,比如看某个文章,某个好友,想分享给其他人,可是AJAX局部刷新页面就好像曾经使用框架一样(某些网站管理后台),地址栏url并不改变,直接发给朋友,打开成了首页;或者看到好的内容想收藏,结果发现也只是收藏了首页。

问题2很棘手,连我自己开发的时候也感觉很不爽,页面点击多了习惯性的想后退看看,结果发现浏览器的前进/后退和javascript里面的history.go(-1)神马都是浮云……

在项目还没变的庞大的时候,我想我必须得早点解决这个问题。开始的思路是想是否能绑定事件到前进/后退按钮,没找到好办法。后来想到了定位锚,深入研究发现,确实是解决问题的关键点。

问题1和2是可以一并解决的:

解决思路:通过定位锚的变化来实现不同内容的载入。例如twitter和pip.io等都是使用此种方法。原因很简单,点击定位锚链接页面不会刷新,但是地址栏url会变化,并且可以很方便的通过javascript的location.hash获取值。同时,也顺便解决了前进/后退按钮一半的问题:因为url改变,所以至少前进/后退按钮有历史记录,可惜的是点击之后只是地址栏url改变,页面并不刷新。

这样的话,url可以进行分享和收藏到收藏夹,问题1解决,前进/后退有记录了,点击后url会改变问题2基本解决(只需要再使用一些js来处理hash)。

下面是实施技术流程思路:
首次打开页面,获取location.hash也就是定位锚的值例如#/user/xinple,值的形式可以自己定(像urlrewrite那样)。获取之后处理分析,我这里是分成 user 和 xinple 作为两个参数通过ajax传递给php程序处理返回结果,然后修改到网页上。如果值为空就显示首页数据。

这样需要分享和被收藏的页面,可以正常的直接使用url了。

然后就是点击,我原先是每个a链接都要使用onclick事件,很麻烦,很不方便,后来在解决前进/后退按钮的时候,发现一起解决了。

前进/后退按钮点击之后,url是变化了,可惜定位锚的变化浏览器不会刷新页面,那么这时候,只需要绑定hashchange事件就行了,也就是说每当定位锚变化的时候就触发一个事件这样不就解决问题了吗?

于是我兴奋之余,想开始着手写这个方法,但是总感觉自己写不出比较好的,然后就google了下发现原来已经有很多非常好的解决方案,甚至有的js文件gzip之后只有0.8k的大小,我自叹自己无法写出更好的,就不重复发明轮子,直接使用了。

我反复对比和测试了四五个jQuery插件(我们项目使用了jQuery,所以优先考虑插件的形式),最后下面三个脱颖而出:

jQuery hashchange event: 直接绑定事件到window.onhashchange,并支持首次载入可以手动加载。使用简单。(目前我正在使用的就是这个。)

jQuery History: 和上面的一样也是绑定事件到window.onhashchange,而且多了几个方法,比如修改url的定位锚,修改href里面的定位锚值等等。(注意,jQuery官网也有一个叫做jQuery history但是不一样的插件,注意区分)。(我没选择这个是因为其js文件比上面的大了一点)

jQuery History Plugin:注意区分,比上面名称多了一个plugin。这款插件,其实是另外一种用法:比如人间网虽然也是AJAX网站,也支持前进/后退,但是它url不改变。所以对于那些url不改变,但是需要支持前进/后退按钮的话,这款插件是不错的选择。其原理和上面不同,把操作放入堆栈,并且通过一个隐藏的iframe页面来产生前进/后退历史(url不改变的话,按钮是没历史记录的),加入了一个iframe隐藏页面之后,相同url也能产生记录了,具体原理可以去看作者说明。

最后,因为每次定位锚改变就能触发事件,所以<a href="#/user/xinple">阿辛</a>不需要再使用onclick事件了,点击之后url定位锚变化了,自然就触发了上面hashchange事件,然后我把数据调用在这里面完成就搞定了。从此可以和普通网站那样写链接做页面了。另外,由于定位锚被当成不同页面链接用了,其原来用来定位的功能我们可以通过自行修改其偏移值来实现,上下滚动反而更柔滑,方法见我以前的文章《定位锚平滑滚动jQuery代码》

至此,问题解决,记录下来,希望多少能给人一点帮助,至少也花了我一天多时间来研究和实践。

«

»

日志所属分类: 2.Web程序开发 |
本文地址: http://xinple.org/?p=410
打印此文:
|
TrackBack: http://xinple.org/wp-trackback.php?p=410

JavaScript 颜色梯度和渐变效果 – cloudgamer – 博客园

JavaScript 颜色梯度和渐变效果

序二(09/11/1)

近来看了Dean的“Convert any colour value to hex in MSIE”,终于解决了根据关键字获取颜色rgb值的问题。顺便把程序也重新整理一番,并使用了最近整理的工具库

序一(09/03/11)

很久没写blog,太忙了。没什么时间写复杂的东西,重新把颜色渐变效果写一遍。关于颜色的效果一般就两个,颜色梯度变化和颜色动态渐变,前者在ie中一般用滤镜实现。

效果预览

颜色梯度变化演示:

简单的颜色拾取器(点击修改梯度演示颜色):

                                                                颜色渐变菜单:

                                                                Cropper Tween Slider Resize Drag Tooltips

                                                                点击随机颜色渐变:

                                                                点击随机颜色渐变

                                                                 

                                                                程序说明

                                                                【ColorGrads颜色梯度】

                                                                程序ColorGrads的作用是根据颜色集合和渐变级数生成颜色梯度集合。渐变级数的意思是分多少步完成渐变。

                                                                网页设计中的颜色是用RGB色彩模式呈现的。在这个模式中每种颜色可以用三个代表红(r)、绿(g)、蓝(b)的颜色值(0到255)来表示。

                                                                w3c的Colors部分看到标准中颜色的表示形式包括:关键字形式:em { color: red }RGB形式:em { color: #f00 }em { color: #ff0000 }em { color: rgb(255, 0, 0) }em { color: rgb(100%, 0%, 0%) }以上都是表示同一种颜色(红色)。关键字形式就是用关键字代表颜色值。而RGB形式,前两种用的比较多,都是一个"#"后面带16进制表示的颜色值,第三种是用十进制的颜色值,第四种是实际值跟255的百分比形式。

                                                                各个浏览器对各种颜色表示形式的获取并不相同:

                                                                "color: red"形式:
                                                                  ie opera ff chrome/safari
                                                                style red red #ff0000 red
                                                                currentStyle red "red"    
                                                                getComputedStyle   #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
                                                                "color: #ff0000"/"color: #f00"形式:
                                                                  ie opera ff chrome/safari
                                                                style #ff0000/#f00 #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
                                                                currentStyle #ff0000/#f00 #ff0000    
                                                                getComputedStyle   #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
                                                                "color: rgb(255, 0, 0)"/"color: rgb(100%, 0%, 0%)"形式:
                                                                  ie opera ff chrome/safari
                                                                style rgb(255,0,0) #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)
                                                                currentStyle rgb(255,0,0) #ff0000    
                                                                getComputedStyle   #ff0000 rgb(255, 0, 0) rgb(255, 0, 0)

                                                                基本上得到的值还是按标准的形式显示的,只是有些会自动转换形式。不过ie的rgb形式跟ff/chrome/safari的不同,数值之间并没有空格。要特别注意的是opera用currentStyle获取关键字形式得到的颜色值是带双引号的,十分奇怪,要尽量避免使用。

                                                                要获取两种颜色的渐变梯度,先要把颜色转化成能用来计算的数值。GetColor和GetData程序就是用来把符合w3c标准表示的颜色值转化成组合该颜色的红(r)、绿(g)、蓝(b)的颜色数值。RGB形式的值本身就已经带了rgb的具体数值,只要用正则把值提取出来再转化就可以了。这个过程在GetData中进行:

                                                                Code

                                                                注意#rrggbb/#rgb形式得到的是16进制的数值字符,把parseInt的第二个参数设为16就可以指定用16进制来处理字符串转换。对于rgb(n,n,n)/rgb(n%,n%,n%)的形式,直接取得数值,如果有%就根据百分比计算对应数值就行了。使用这种形式设置颜色时也要注意,ie6和ie7允许数字百分比混用,其他不可以(包括ie8);ie6和ie7可以用空格或逗号分隔数值,其他必须用逗号(包括ie8);当然我们使用时也应该是按照w3c的标准来设置了。ps:那个DHTML 手册上写的 EM { color: rgb 1.0 0.0 0.0 } 是不能用的,不要被误导了。

                                                                如果是关键字形式那就要另外想方法了,可以用一个字典对象来匹配颜色值,但这样程序会变得很庞大。ps:可以到这里看所有颜色名对应的数值。近来dean发表了“Convert any colour value to hex in MSIE”,终于解决了这个难题。其中的关键是利用queryCommandValue("ForeColor")来获取颜色值(或许做过编辑器的会比较熟悉)。queryCommandValue的作用是返回document、range或current selection对于给定命令的当前值。而ForeColor命令是设置或获取文本时的前景色。

                                                                具体的做法是先创建一个textarea: 

                                                                if (!frag) {    frag = document.createElement("textarea");    frag.style.display = "none";    document.body.insertBefore(frag, document.body.childNodes[0]);};

                                                                ps:由于ie的document.body.appendChild()导致IE已终止操作bug,所以要用insertBefore。

                                                                然后设置color为要取值的颜色:

                                                                try { frag.style.color = color; } catch(e) { return [000]; }

                                                                ps:在ie如果设置错误的颜色值会报错,所以这里用try…catch来保证能返回值。

                                                                能使用queryCommandValue方法的对象包括document、range和current selection。用createTextRange就可以建立一个range:

                                                                color = frag.createTextRange().queryCommandValue("ForeColor");

                                                                createTextRange可以用在Body,Button,Input和TextArea。dean是用createPopup().document.body的,好处是不用插入元素到dom。但createPopup是ie的方法,而TextArea还可以用于getComputedStyle,后面会用到。

                                                                这样得到的颜色值是一个数值,这个数字跟颜色的关系是这样的:例如红色的16进制rgb是ff0000,先转成bgr,即0000ff,然后转成10进制,得到255。同样粉红色pink是FFC0CB,转成bgr是CBC0FF,10进制是13353215。ps:使用时要注意,跟一般不同,queryCommandValue("ForeColor")得到的颜色是bgr排列的。

                                                                要得到rgb的值可以把转换过程倒过来获取,不过参考dean的文章有更巧妙的方法:

                                                                ret = [ color & 0x0000ff, (color & 0x00ff00>>> 8, (color & 0xff0000>>> 16 ];

                                                                先用与操作(&)把对应位的数值取出来,再用右移运算符(>>>)把数值移到正确的位置上。

                                                                例如粉红色FFC0CB要取得绿(g)的颜色值,用与操作(&)取得对应值,FFC0CB & 0x00ff00得到C000,然后右移8个数位得到C0(16进制的一位相当于二进制的4位),即192。

                                                                其他支持document.defaultView的可以直接用getComputedStyle获取color。从上面各个浏览器获取颜色值的结果可知获取的值都是RGB形式的值,所以可以直接用GetData转换:

                                                                ret = GetData(document.defaultView.getComputedStyle(frag, null).color);

                                                                注意除了ff,如果元素没有插入dom,用getComputedStyle是获取不了color的,所以元素创建时要顺便插入到body中。

                                                                在GetStep用GetColor获得颜色值之后,再根据step就可以获得步长了:

                                                                var colors = [], start = GetColor(start), end = GetColor(end),    stepR = (end[0 start[0]) / step,    stepG = (end[1 start[1]) / step,    stepB = (end[2 start[2]) / step;

                                                                再根据步长生成集合:

                                                                for(var i = 0, r = start[0], g = start[1], b = start[2]; i < step; i++){    colors[i] = [r, g, b]; r += stepR; g += stepG; b += stepB;}colors[i] = end;

                                                                正确的颜色值是在0到255之间的,而且是不带小数的,需要修正一下:

                                                                return $$A.map(colors, function(x){ return $$A.map(x, function(x){    return Math.min(Math.max(0, Math.floor(x)), 255);});});

                                                                 

                                                                程序支持设置多个颜色的连续变换:

                                                                for(var i = 0, n = len  1; i < n; i++){    var steps = GetStep( colors[i], colors[i+1], step );    i < n  1 && steps.pop();    ret = ret.concat(steps);}

                                                                要注意的是要去掉各次变换之间重复的颜色组合(steps.pop())。

                                                                【ColorTrans颜色渐变】

                                                                有了颜色梯度集合,只需要设个定时器把颜色集合的元素依次显示就是一个渐变效果了。这个渐变有两种效果:颜色渐入(transIn)和颜色渐出(transOut)。原理就是通过改变_index集合索引属性,渐入时逐渐变大,渐出时逐渐变小:

                                                                Code

                                                                在_set设置样式程序中修改样式:

                                                                var color = this._colors[Math.min(Math.max(0this._index), this._colors.length  1)];this._elem.style[this.style] = "rgb(" + color.join(","+ ")";

                                                                其中style属性是要修改的样式属性名,例如颜色是"color",背景色是"backgroundColor"。

                                                                由于颜色集合是根据开始颜色、结束颜色和步数生成的,所以如果要修改这些属性必须重新生成过集合。reset程序就是用来重新生成集合的,同时索引也会设回0:

                                                                this._options = options = $$.extend(this._options, options || {});this._colors = ColorGrads( [options.from, options.to], options.step );this._index = 0;

                                                                程序初始化的时候也会reset一次:

                                                                this.reset({    from: this.options.from || $$D.getStyle(this._elem, this.style),    to: this.options.to,    step: Math.abs(this.options.step)});

                                                                如果没有自定义from颜色的话会自动获取当前颜色。

                                                                使用技巧

                                                                链接标签a的伪类的颜色暂时没有办法直接用dom来修改(除非改class)。所以在颜色渐变菜单中用了个小技巧,把a的内容和跳转换到td的innerHTML和onclick上实现:

                                                                var a = x.getElementsByTagName("a")[0], href = a.href, txt = a.innerHTML;x.onclick = function(){ location.href = href; }x.innerHTML = txt;

                                                                这样就可以实现效果的同时保持可访问性。

                                                                在测试过程中还发现一个数组的问题,运行alert([,,].length),在ie会返回3,其他会返回2。在mozilla的Array_Literals部分查到:If you include a trailing comma at the end of the list of elements, the comma is ignored. 即如果数组字面量元素集合的最后是逗号,逗号会被忽略掉。 

                                                                使用说明

                                                                ColorGrads的第一个参数是颜色集合,第二个参数是渐变级数。

                                                                ColorTrans只要一个参数,要实现渐变的对象,可设置以下属性:from: "",//开始颜色to:  "#000",//结束颜色step: 20,//渐变级数speed: 20,//渐变速度style: "color"//设置属性(Scripting属性)from默认是空值,方便判断自动获取。其中from、to和step在实例化后要修改的话需要用reset来设置。具体使用请参考实例。

                                                                程序代码

                                                                ColorGrads部分:

                                                                Code

                                                                  

                                                                ColorTrans部分:

                                                                Code

                                                                  

                                                                下载完整实例

                                                                转载请注明出处:http://www.cnblogs.com/cloudgamer/

                                                                如有任何建议或疑问,欢迎留言讨论。

                                                                如果觉得文章不错的话,欢迎点一下右下角的推荐。

                                                                程序中包含的js工具库CJL.0.1.min.js,原文在这里

                                                                分类: Javascript

                                                                标签: JavaScript, 渐变, 颜色, color, 梯度, Grads, 拾色器

                                                                jQuery Templates Plugin筆記1 – 黑暗執行緒

                                                                jQuery Templates Plugin筆記1

                                                                2008年9月,微軟宣告將jQuery納入ASP.NET解決方案,之後更以社群成員的身分參與jQuery開發,今年3月,微軟則提出將jQuery Templates(範本)概念納入jQuery核心的提議。所謂jQuery Templates,指在Javascript中實作如同ASP/ASP.NET、PHP在HTML中參雜程式標記,讓資料、變數與HTML標籤自動結合產生網頁的概念。

                                                                2010年10月,微軟與jQuery開發團隊、開發社群攜手開發的jQuery Templates、jQuery Data Link、jQuery Globalization三個Plugin被官方採納,成為正式的jQuery官方Plugin,目前在jQuery API文件裡,已經可以看到jQuery Templates plugin beta 1jQuery Data Link plugin beta的說明。

                                                                重新檢視jQuery Templates的設計,發現一件有趣的事: 早在轉向jQuery前,微軟已有自己的Javascript範本解決方案–ASP.NET Client Templates,當時使用的資料內嵌標籤語法是{{變數名稱}}。而在2010年3月剛提出jQuery Templates構想時,當時使用的語法變成{%= 變數名稱%},很有<%= … %> ASP語法的fu。而現在看到的jQuery Templates資料語法又做了大幅修改,變成: ${變數名稱},而一些特殊標籤如{{each …}}、{{html …}},則又再度展現ASP.NET Client Templates的風味,頗有意思。

                                                                在Client端透過範本概念簡化程式的哲學一向深得我心,所以ASP.NET Client Templates、jQuery Templates等解決方案特別能吸引我的注意。幾個月前得知jQuery Templates正式列入官方Plugin的消息,前陣子因為工作繁忙Lag了一陣子,最近才開始補進度,好好檢視了jQuery Templates plugin。

                                                                一邊研讀,順手整理了一系列程式筆記,以實際程式示範相關函數、語法,當作學習的註腳(其實是為了自己無可救藥的爛記性),一併跟大家分享。

                                                                先從第一個基本應用範例開始。以<script type=”text/x-query-tmpl” id=”xxx”>包夾範本的內容,要替換成資料內容的部分,使用${變數名稱}的語法。用$("#xxx”).tmpl(資料物件陣列)方式,就可以將資料套進範本裡,對於資料陣列來說,.tmpl()會一一針對陣列中的每個資料物件產生一個HTML DOM元素,而.tmpl()傳回的就是這些DOM元素的集合(在程式中我用for迴圈加alert驗證這一點),最後,用.appendTo()之類的方法將它於安插進網頁DOM中就大功告成了。

                                                                除了用<script type=”text/x-jquery-tmpl”>方式放置範本,也可選擇將其放在HTML DOM裡(但必須要藏起來),或是直接傳入HTML標籤字串(需要外套一個容器元素),相形之下,我想用<script>的方式還是上選。

                                                                程式範例如下:

                                                                排版顯示純文字

                                                                <html xmlns="http://www.w3.org/1999/xhtml">
                                                                <head>
                                                                    <title>jQuery Templates Lab 1 - tmpl()基本示範</title>
                                                                    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js" 
                                                                        type="text/javascript"></script> 
                                                                    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"
                                                                        type="text/javascript"></script>
                                                                    <script type="text/x-jquery-tmpl" id="tmplItem">
                                                                        <tr><td>${No}</td><td>${Name}</td><td>${Score}</td></tr>
                                                                    </script>
                                                                    <script type="text/javascript">
                                                                        $(function () {
                                                                            //宣告簡單的資料物件陣列
                                                                            var data = [
                                                                                { No: 1, Name: "Jeffrey", Score: 59 },
                                                                                { No: 2, Name: "Darkthread", Score: 75 },
                                                                                { No: 3, Name: "Linda", Score: 96 }
                                                                            ];
                                                                            //傳入data為Array時,傳回結果是個集合
                                                                            $("#tmplItem").tmpl(data).each(function () {
                                                                                alert(this.innerHTML);
                                                                            });
                                                                            //將結果附加到DOM顯示出來
                                                                            $("#tmplItem").tmpl(data).appendTo("#tb");
                                                                            //不另外宣告<script>區塊放樣版,直接內嵌範本HTML也是可行的
                                                                            //但由於內嵌HTML的.html()才算真正範本的部分,所以外面要加一個容器
                                                                            //一般<li> <span> <div>,外曾層再用一個<div>或<span>包起來就可以
                                                                            //本例中因為是<tr>,要用<tbody>才算嚴謹,再不然用<script>包夾也可以
                                                                            $("<tbody><tr><td colspan='3'>${No}.${Name} => ${Score}</td></tr></tbody>")
                                                                            .tmpl(data).appendTo("#tb");
                                                                            //或者,我們也可以將範本HTML藏在網頁中,一樣用selector去找到它,
                                                                            //但是必須用display:none或其他方法藏起來
                                                                            //相較之下,我認為還是<script type="text/x-jquery-template">最方便
                                                                            $("#hiddenTemplateDOM").tmpl(data).appendTo("#tb");
                                                                        });
                                                                    </script>
                                                                </head>
                                                                <body>
                                                                 
                                                                <!-- 資料套用範本後,附加到<tbody id="tb">顯示出來 -->
                                                                <table><tbody id="tb"></tbody></table>
                                                                 
                                                                <!-- 以下示範Template藏在網頁內部 -->
                                                                <table style="display:none"><tbody id="hiddenTemplateDOM">
                                                                <tr style="background-color:#cccccc">
                                                                <td>${No}</td><td colspan="2">${Name} - ${Score}</td>
                                                                </tr>
                                                                </tbody></table>
                                                                 
                                                                </body>
                                                                </html>

                                                                谈谈对 jQuery Templates 的管理 | Frully.org

                                                                谈谈对 jQuery Templates 的管理

                                                                jQuery Templates 是一个 jQuery 的官方插件,中文叫 jQuery 模板,用途是简化 data to html 操作。说明不如演示,看下例:

                                                                <ul id="movieList"></ul>
                                                                <script id="movieTemplate" type="text/x-jquery-tmpl">
                                                                    <li><b>${Name}</b> (${ReleaseYear})</li>
                                                                </script>
                                                                <script type="text/javascript">
                                                                    var movies = [
                                                                        { Name: "The Red Violin", ReleaseYear: "1998" },
                                                                        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
                                                                        { Name: "The Inheritance", ReleaseYear: "1976" }
                                                                    ];
                                                                    // Render the template with the movies data and insert
                                                                    // the rendered HTML under the "movieList" element
                                                                    $( "#movieTemplate" ).tmpl( movies )
                                                                        .appendTo( "#movieList" );
                                                                </script>

                                                                发现端倪没?有个 script 的 type 居然是 text/x-jquery-tmpl,恩,这就是模板了。

                                                                这不是一篇关于  jQuery Templates 介绍文章,更多基础内容可以看官方 API黑暗執行緒 blog 的相关文章

                                                                本文想探讨的是对于一个比较复杂的站点,应该如何管理 jQuery 模板。

                                                                jQuery 模板有3种储存方式:

                                                                1. 像上例一样,直接放在 <script type=”text/x-jquery-tmpl”> 中;
                                                                2. 直接放到 HTML DOM 中隐藏起来;
                                                                3. 保存在字符串中。

                                                                其中3是下下之选,因为保存在字符串中很多字符需要转义、不能换行、难以阅读和修改,有违模板简化 data to html 的初衷,而且如果需要多处代码使用一个模板,会不够灵活。

                                                                2会将无意义的模板写入 DOM 中,可能会被搜索引擎抓取,而且还要多一步解除隐藏的操作,不如直接用1。

                                                                1也有自身的问题,模板是和特定 js 操作关联在一起的,如果分离两者,后台得判断页面需要输出哪些模板,这多少会增加后台复杂度。当然也可以不做判断直接输出所有模板,这会无谓的增加文件大小,如果模板很多,这样也不可取。

                                                                其实可以把模板单独放到一个文件中,需要时才用 ajax 获取然后插入 dom。如果模板很多也可以拆分成多个文件按需加载。这样有2个好处,1是模板不占用 html 的字节,2是像 css 和 js 一样,浏览器可以缓存起来。

                                                                然后我们可以写一个简单的插件来管理模板获取。

                                                                //jQuery.getTmpl.js by Frully
                                                                (function ($) {
                                                                    var _tmpls = {}; //保存已获取模板的信息  url: deferred
                                                                    $.getTmpl = function (url) {
                                                                        var tmpls = _tmpls,
                                                                            tmpl = tmpls[url];
                                                                        if (!tmpl) { //如果模板不存在,获取并插入 DOM
                                                                            tmpls[url] = tmpl = $.get(url).done(function (data) {
                                                                                $(data).appendTo('body');
                                                                            });
                                                                        }
                                                                        return tmpl; //返回 deferred 对象
                                                                    };
                                                                }(jQuery));

                                                                调用方法:

                                                                $.getTmpl('temp1.tpl').done(function () { //载入成功时调用
                                                                    //do something
                                                                }).fail(function () { //载入失败时调用
                                                                    //do something
                                                                }).always(function () { //无论成功失败与否都调用(jQuery1.6 新增)
                                                                    //do something
                                                                });
                                                                $.when($.getTmpl('temp2.tpl'), $.getTmpl('temp3.tpl')).done(function () {
                                                                    //当两个模板均载入成功时调用
                                                                    //do something
                                                                });

                                                                有几个方法看起来有些奇怪?这是 jQuery 1.5 的新特性 Deferred(其中 .always() 是1.6 新增)。网上有不少相关资料,欲知详细请自行搜索。使用 Deferred 能书写出很优雅的代码,如果你无法使用 jQuery 1.5+,只能修改插件以参数传入回调函数了。

                                                                This work is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported.

                                                                标签:

                                                                Posted on 2011-05-14

                                                                Apache的 rewrite 和 .htaccess 不起作用,还和 Options 设置有关系 | 无影的博客

                                                                要启用 rewrite 和 .htaccess 设置,除了开启 mod_rewrite.so、AllowOverride All 配置外
                                                                LoadModule rewrite_module modules/mod_rewrite.so
                                                                AllowOverride All

                                                                还需要注意 Options 的设置

                                                                默认设置是:Options Indexes FollowSymLinks

                                                                如果改成以下设置后,就会出错
                                                                Options Indexes FollowSymLinks MultiViews Includes    (出错)

                                                                如果要启用

                                                                目录浏览 MultiViews
                                                                服务器端包含 Includes (<!–#include virtual=”top.htm” –>)

                                                                可以考虑使用
                                                                Options All

                                                                为什么ifttt不会出现在中国 | 耗子吴

                                                                耗子吴 撰写
                                                                 http://ratwu.com/2011/07/ifttt/

                                                                最近最火的应用要数ifttt了,这里不做介绍,不了解的请移步望月博客的《ifttt用法集锦》。

                                                                我曾非常疑惑为什么最新的创新应用总是最先出现在国外,过去的情况是,如果在国外火了,国内才会出现模仿者,现在的情况是,一个创新应用在国外出现,刚刚有发展的苗头,国内就迅速有山寨了,也反映出国内的创业者的嗅觉更加灵敏。但是完全来自国人创意的网站几乎没有。

                                                                为什么国内不会出现革命性的创新网站,从ifttt的成功中就能管中窥豹。

                                                                ifttt目前为止提供了33种服务的检测和通知,我常用和了解的,delicious,evernote,facebook,flickr,foursquare,gtalk,google日历,gmail,twitter,wordpress,youtube,当中的网站几乎都无法访问,能访问的也几乎都是龟速。放在国内的环境,国内的哪些网站可以同步和通知呢?

                                                                • flickr:国内的相册服务很多,几乎是各个网站的标配,但是支持api的有几个?据我所知没有。
                                                                • dropbox:国内dropbox的服务也很多,快盘,everbox,115网盘,模仿的形象而神不像,想通过url上传文件?做梦吧。
                                                                • google日历:国内还没有类似可替代的产品吧。
                                                                • delicious:百度搜藏,QQ书签,新浪书签什么的,很多年前流行起来的,现在更是不瘟不火,更是不支持api。
                                                                • evernote:国内的有盛大麦库,为知知识管理,同样没有开放的api。
                                                                • twitter:还好,国内的微博几乎都支持api了,但是像新浪微博这样只能同步进去,无法同步出去的微博也只能说是伪开放。
                                                                • facebook:人人网,开心网学的也不错。

                                                                如此看来,即使山寨一个ifttt出来,实现难度讲更大,应用数量上也会极度匮乏。国内已经有如果就了,目前为止还没上线。

                                                                ifttt使用了亚马逊提供的云主机,dropbox、Quora很多新兴创业型的网站亦是如此。如果有想法,有技术,通过租用便宜的亚马逊的云主机,网络上有那么多开放api的如twitter,flickr,delicious基础设施网站来发挥和实现创意。同时宽松的监管,让一个创业网站实现起来倍加轻松。

                                                                在国内,没有云技术服务提供商,各种类似相册、书签微博的基础设施网站不成熟,没有开放api,同时有各种各样的监管,网站备案等繁琐手续。在国内开发一个ifttt这样的网站需要自己租用或购买服务器,对没开放api的网站需要联系合作…最重要的是,即使这样一个中国版的ifttt开发出来,国内的网民大多是初级上网用户,会有多少用呢,即使火起来,如果防止和避归想腾讯这样的公司模仿呢?以上任何一条理由,都足以扼杀大批的想法和创意。

                                                                随机日志

                                                                这篇文章由耗子吴发表于 2011/07/04 at 10:25 am, 归档在IT and tagged , .

                                                                发表评论 或者复制引用通告地址: 引用通告 URL.

                                                                6 条评论

                                                                1. Probe

                                                                  发表了 2011/07/23 在 10:29 am | 永久链接 | Reply

                                                                  是的,国内的山寨们要面对监管、用户无需求、API不完善…,都是很大的问题。

                                                                  另外从国内外全局考虑,有关ifttt和“如果云”,“如果就”…,我也觉得自己以前太乐观了。它们的实质是建立通用的信息传递标准,把所有应用都连接起来。但早就有的RSS可算是通用信息的原型,为何一直没能实现这样的理想?因为产品们依据自身需要,未必都愿意接入全局的公开标准。他们当时能禁RSS,现在就可以禁如果云。

                                                                2. alt a141f3a71

                                                                  发表了 2011/07/21 在 10:30 am | 永久链接 | Reply

                                                                  http://ratwu.com/ 交换链接不 我的http://hack520.co.kr/ 看看能不能跟贵站换链接.

                                                                3. alt yesvpn

                                                                  发表了 2011/07/20 在 10:06 am | 永久链接 | Reply

                                                                  你好,我们是YESVPN
                                                                  我们可以提供一些免费的VPN帐号给你的读者。
                                                                  VPN可以帮助上twitter,youtube,
                                                                  不知道有没有兴趣
                                                                  我们是 http://www.ipadvpn.org 我们的email yesvpn#gmail.com

                                                                4. alt 深处的记忆

                                                                  发表了 2011/07/06 在 5:20 pm | 永久链接 | Reply

                                                                  山寨都出了中文版了啊!如果云 http://ruguoyun.com

                                                                  • 耗子吴

                                                                    发表了 2011/07/06 在 10:08 pm | 永久链接 | Reply

                                                                    有邀请码没,看起来连接的服务很单一,全是社区和微博

                                                                5. alt 根号三

                                                                  发表了 2011/07/06 在 11:00 am | 永久链接 | Reply

                                                                  拆哪是好网站的噩梦呐!!!

                                                                发表评论

                                                                Your email is never shared. 标记为 * 的为必填项目

                                                                昵称 *

                                                                电邮 *

                                                                网站

                                                                评论

                                                                老帖再说——Hacker News和Reddit的排行算法_orinbai_新浪博客

                                                                  
                                                                 这个话题应该是很古老了,之所以又被提起是因为邮件群里有人再次推荐了某人的博文。有人管这个东西叫推荐,有人管这个叫排行,最近我倾向管这个叫评价系统(广义的荣誉系统)。多说两句,广义的荣誉系统可以被用来做太多的东西。博客目前就有博客等级——对应对于博主的荣誉评价,对于博文的荣誉评价很少,主要是推荐博文的标识。有了对于博主、博文的评价,那么推荐似乎就简单多了,所以一套好的推荐系统如果有一套好的荣誉系统作为基础应该是会事半功倍……打住废话,继续正题。

                                                                    Hacker
                                                                News 采用公式 (p
                                                                – 1) / (t +
                                                                2)^1.5 做为排行依据,其中P是投票数量(类似digg数量),t是发表以来的时间,小时计。后来AMIX.DK 给出公式 Score
                                                                = (P-1) / (T+2)^G
                                                                 推广了上面的公式,Hacker
                                                                News的公式变成了一个特例,其在G=1.5时的应用。

                                                                  
                                                                 这个公式中实际上有两个问题需要思考:

                                                                • 为什么是P-1。

                                                                  
                                                                 网络上给出的解释是,要减去文章作者的一票。那是否所有的投票系统都要减去作者的一票?肯定不是,因为比如Reddit就没有。所以,这不是一个普遍规律,也就是说只有这种类型的公式才需要减去自投的票。究其原因,其实很简单——初期票数的权重(也就是对于最终排名的影响)太过巨大。

                                                                  
                                                                 我想,在Hacker
                                                                News的实际模型制定过程中一定观察到了我们经常看到的现象——文章的提交者在第一时间为自己的文章投票(digg)。这样,根据公式计算,他(score=0.35)要优于4小时前获得了4个投票的文章(score=0.27),显然这是不合理的。
                                                                其分布如图,能够看到,12小时前的文章需要获得大约20个投票才能在排行上超过这篇文章!

                                                                  
                                                                 如果,用户的第一个投票是在当前,1小时,2小时获得时,这个曲线的变化是什么呢?如下图,曲线斜率从大到小分别是当前、1小时、2小时。可以看到第一个投票的作用不断弱化,其权重不断降低。


                                                                  
                                                                 两个图解释了为什么需要P-n,公式中n=1,我想应该源于内部数据的观察,刷票行为基本仅限作者一人。如果象国内网络环境如此糟糕,估计n=1就不太合适了。

                                                                • 为什么G=1.5

                                                                  
                                                                 首先,G是干嘛的。毫无疑问,G这个数字既非时间,也非评价,其实它的主要目的是控制更新频率。G的值越大,score的衰减速度越快,排行的更新越频繁。所以,确定G值需要观察系统内部投票数在时间上的分布,然后根据需要的更新频次确定G的合理取值。越火爆、用户互动越频繁的社区,为了保证排行的稳定性(不要频繁大量的刷新),G值趋向于比较低。

                                                                  
                                                                 Reddit的公式如下,抱歉太多了就不写啦,直接抄了

                                                                Ts
                                                                是文章发布日期距离特定时点的秒数,这个表示文章的新旧。X是正反投票的差值,代表浏览者的意见(对于文章的评价)。Y是文章评价的一种定性表达,0表示没有倾向,大于0表示正面评价,小于0表示负面评价,Z是具体的评价值。

                                                                • 公式当中,假设我们设A=logZ, 正如很多文章中所言A
                                                                  降低了起始阶段投票的影响力,具体解释与P-1的部分类似,不赘述。因为是以10为底,所以Z每增加10倍A增加1。
                                                                • 我们设B=YTs/45000,其中,Y是倾向,具有颠覆作用,Ts是秒,如果我们视45000为秒的话,大约是半天的时间。T0=2005/12/8
                                                                  7:46:43am,T1=发布时间,Ts=T1-T0就是距离T0的秒数。Ts/(2*45000)大约就是天数了。换句话说,不考虑Y的变号能力(正负零),B大约等于发布时间距离初始时间天数的2倍。所以,发布时间晚半天,B增加1。
                                                                • Score=A+B,所以,一篇文章M时点发布,对比
                                                                  如果他早半天发布,相当于获得了10倍投票的效果。例如,一篇文章在0点发布,23:59:59获得了10个投票,score1 =
                                                                  log10+(m/45000)=1+m/45000;这个文章在当天12点发布(晚半天),23:59:59秒获得了1个投票,score2
                                                                  = log1+(m+43200)/45000 = log1 + m/45000 + 43200/45000 =
                                                                  1+m/45000!
                                                                • Reddit实际上达到了3个目的:

                                                                    
                                                                 1. 只有相同时段的文章才有可比性。晚半天,投票就要翻10倍,只能同时段的文章相比。

                                                                    
                                                                 2. 弱化初期投票的作用。初期投票有很大的目的性,见Hacker
                                                                News的分析。而且可以看出Reddit应该有    
                                                                  很多的刷票行为,呵呵。

                                                                    
                                                                 3. 投票对于总分的贡献不大,但是当投票的意见倾向发生变化时(由正面评价转向负面评价),投票对
                                                                     
                                                                于总分的作用却是决定性(Y的取值)。

                                                                Reddit敢于如此削弱投票的作用——取对数值——究其原因估计还是因为其海量流量和频繁的用户意见表达。从评价公式也能看出,Reddit的流量应该远高于Hacker
                                                                News。

                                                                alexa的流量图印证了我们的猜测:

                                                                  
                                                                 所以,一套好的评价体系需要根据实际的情况出发,但是有几个基本的重点需要兼顾:

                                                                    1.
                                                                要注意初期的评价。初期评价对于整体的影响有两个:

                                                                    
                                                                 a. 影响整体评分。文中已有解释
                                                                    
                                                                 b.
                                                                影响后续评价。由于后续用户的从众心理,将会导致初期评价可能影响后续用户跟随其评价方向。

                                                                    2.
                                                                要注意自己的实际情况,比如流量不同的Reddit和Hacker News的不同处理规则

                                                                    3.
                                                                数学不重要,重要的是实际效果。

                                                                    4.
                                                                注意系统负载能力。 Hacker News流量小基本可以随时计算,所以其公式也是需要经常运算的模式(时
                                                                   
                                                                间、投票);而Reddit则基本上投票不变就不需要计算。

                                                                    5.
                                                                注意其应用场景,不要生搬硬套。这两个评价体系的目的都是提供又新又好的内容,而我们的项目有可
                                                                    能要提供好的,比如年终的回顾。

                                                                Hacker News与Reddit的算法比较 – 旁观者 – 博客园

                                                                旁观者

                                                                参与软件开发这些年来,不断地遇到新领域新知识点,屡屡感受到新进入者的迷惑和彷徨,所以对遇到的每一个问题都详细记录问题现象、解决思路以及解决方案,并在blog中留下印迹,以备他日有心人google之而知之。
                                                                你们的新手之痛,你们的新业务发展之初的思路混沌,我都感同身受,所以欢迎和我一起探讨这些话题,诸如Semantic/NLP/Mashup/J2ME/IVR/SMS/WAP/Python等,知无不言言无不尽。

                                                                posts – 544, comments – 965, trackbacks – 39, articles – 1

                                                                 
                                                                 ::
                                                                 ::
                                                                 ::
                                                                 ::
                                                                订阅
                                                                 ::
                                                                管理

                                                                公告

                                                                现任窝窝团研发副总裁。历任明天高软、神州泰岳等公司的技术总监。曾任玩聚网CEO&创始人。中国语义应用探索者。智能语义聚合应用框架的提出者和实践者。活跃于移动业务、语义、聚合和本地生活消费领域。查看我的中文简历
                                                                郑昀的Wealink档案

                                                                昵称:旁观者园龄:6年7个月荣誉:推荐博客粉丝:83关注:0

                                                                +加关注

                                                                搜索

                                                                 

                                                                最新随笔

                                                                随笔分类(654)

                                                                Web3.0

                                                                最新评论

                                                                推荐排行榜

                                                                Hacker News与Reddit的算法比较

                                                                Posted on 2010-12-15 02:01 旁观者 阅读(6932) 评论(0) 编辑 收藏

                                                                Hacker News与Reddit的算法比较

                                                                郑昀 20101213

                                                                Hacker News是Y Combinator旗下的一个新闻频道,属于digg类产品,

                                                                SEOmoz曾经在2008年7月隆重推出Reddit、Stumbleupon、Del.icio.us和Hacker News算法全揭秘。由此,这些知名Web2.0网站的算法浮出水面。谷文栋曾在2009年时如下讲述了Hacker News的Ranking算法

                                                                (p – 1) / (t + 2)^1.5

                                                                其中,1)p 表示文章得到的投票数,之所以要使用 (p – 1),应该是想去掉文章提交者的那一票。2)(t + 2)^1.5, 这个是时间因子。t 表示当前时间与文章提交时间间隔的小时数。但为什么要加 2 之后再取 1.5 的幂,似乎就没什么道理可言了,也许是个 trial-and-error 的结果吧。

                                                                他对“1.5”这个参数也没有做出解释。

                                                                Amir Salihefendic(他是PlurkTodoist的Co-Founder)在今年10月份撰文《How Hacker News ranking algorithm works 》完整地解释了Hacker News的Ranking算法,从中我们才得以知道那个神秘的“1.5”是什么。稍后我们还会拿这个排序规则与Reddit的排序规则做对比。

                                                                 

                                                                一、Hacker News的ranking算法

                                                                Hacker News是用Arc编写的(Arc是Lisp的一个“方言”)开源项目,源代码可以从 http://ycombinator.com/arc/arc3.tar 获取。Ranking算法就写在这个包的news.arc文件里。鉴于这种语言是未来的语言,不容易看懂,所以代码就不贴了,光把注释贴出来:

                                                                ; Ranking

                                                                ; Votes divided by the age in hours to the gravityth power.; Would be interesting to scale gravity in a slider.

                                                                努力领会这段神谕的同时,Amir说其实本质上执行的ranking规则是:

                                                                Score = (P-1) / (T+2)^Gwhere,P = points of an item (and -1 is to negate submitters vote)T = time since submission (in hours)G = Gravity, defaults to 1.8 in news.arc

                                                                也就是说,前文所谓的莫名其妙的“1.5”,其实就是“Gravity(万有引力)”参数,默认是1.8。p之所以减去1,就是要去掉文章提交者的那一票。

                                                                1.1.Gravity(G)和Time(T)的作用

                                                                Gravity和time对于一篇文章(即一个item)的得分有着重要影响。一般来说:

                                                                • 随着T的增加(即时间的流逝),得分将下降,意味着更早被提交进来的文章将会得到越来越低的分数;
                                                                • 对于更早的文章,如果gravity增加,得分将会下降得更快。

                                                                (在这里要说明一下,著名的搜索引擎网站wolframalpha的plot语法能帮你根据公式(代入参数)画图,方便编纂文档随时举例或者调整算法,超赞。)

                                                                ·得分是如何取决于time的

                                                                Amir利用wolframalpha绘制了公式代入参数后的趋势变化图,如下所示(下图访问链接http://goo.gl/ddYe):

                                                                How score is behaving over time

                                                                上图中,定参Gravity为默认值1.8,随着时间的流逝,文章得分都会迅速下降。你还能看出来,24小时后(即t=24时)无论你的文章得到多少投票,它依然会得到一个非常低的得分。

                                                                ·得分是如何取决于gravity的

                                                                当固定投票数,改变gravity又会如何呢?(下图访问链接http://is.gd/iJSbT):

                                                                 

                                                                How gravity parameter behaves

                                                                可以看到gravity越大,得分下降趋势就越快。

                                                                ·Ranking规则的Python实现

                                                                这个得分函数就是这么简单:

                                                                def calculate_score(votes, item_hour_age, gravity=1.8):    return (votes - 1) / pow((item_hour_age+2), gravity)

                                                                Amir最后说道:“最关键的是你要理解这个算法如何起作用,以及你如何为自己的应用定制这个算法。”

                                                                 

                                                                相对于下面要讲述的Reddit排序算法,Hacker News的Ranking算法主要区别在于引入了time since submission这个参数,这个参数是不断变化的,从而导致一篇文章的得分不断变化。而Reddit下的一篇文章得分(Rank)是不变的,越新的文章得分越高,所以排序自然可能排在最前面。

                                                                 

                                                                二、Reddit的ranking算法

                                                                Reddit 是Digg类型网站,曾经在Digg 4改版引发用户众怒时被用户刻意追捧,独立访问数暴涨50%,并刻意将reddit链接分享至digg,使得digg主页充斥着对手reddit的链接。

                                                                谷文栋也曾于2008年12月发表过《Social Media Algorithm: Reddit》详细地解释了Reddit的公式及其参数构成。2010年11月,Amir也对此作了图文并茂的阐述:《How Reddit ranking algorithms work》。

                                                                它的公式如SEOmoz所描述的:

                                                                reddit formula

                                                                具体参数定义我就不再赘述了,可参考谷文栋或SEOmoz的文章。

                                                                Reddit也是开源的,其Python代码可从 http://code.reddit.com/ 寻到。他们的排序算法则因为性能问题改由Pyrex实现(Pyrex 是一种专门设计用来编写 Python 扩展模块的语言。根据 Pyrex Web 站点的介绍,“它被设计用来在友好易用的高级 Python 世界和凌乱的低级 C 世界之间搭建一个桥梁。”据说,“使用 Python like 的语法来编写 Python 的 C Module ,自动翻译成C语言代码,进而编译获取C代码的高效率。而且配合 Python 的 Distutils ,使得构建过程简单到了只需要 setup.py 的程度”)。

                                                                你可以点击链接 http://code.reddit.com/browser/r2/r2/lib/db/sorts.py?rev=4778b17e939e119417cc5ec25b82c4e9a65621b2 查看这个“hot ranking”算法被翻译为Python后的代码。

                                                                reddit很强调submission time(文章提交时间)。

                                                                2.1.提交时间的作用

                                                                提交时间对于文章评级有如下作用:

                                                                • 提交时间对ranking有很大影响,新文章肯定比老文章rank值高;
                                                                • 这个得分将不会随着时间流逝而递减,但新文章会得到更高的得分。这与Hacker News的算法有着显著区别。

                                                                下图显示了,固定Up和Down投票数的情况下,不同的提交时间,rank分值的变化:

                                                                从上图可以看出,同样的,随着时间的推移,新文章的得分会逐渐超越高同样投票数的老文章。

                                                                2.2.log函数的作用

                                                                这个“hot ranking”算法用了logarithm函数来确保最前面的投票权重大于接下来的投票。它的弯弯绕说法是这样的:

                                                                The first 10 upvotes have the same weight as the next 100 upvotes which have the same weight as the next 1000 etc…

                                                                谷文栋是这么解释的:

                                                                前 10 票获得的权重,与 11 到 101 票所获得的权重是一样的。

                                                                图形化的阐释是:

                                                                 

                                                                如果不用logarithm函数,那么情况就会是这样:

                                                                还是图解看上去直观吧?

                                                                2.3.反对票的作用

                                                                Reddit是少数几个允许有反对票的Digg类型新闻聚合网站,Hacker News就没有投反对票一说。

                                                                它的公式中有这么一个因子:

                                                                up_votes – down_votes

                                                                它的作用可以图形化为:

                                                                也就是说,那些有争议性话题的文章,得分将会比只得到赞同票的文章更低。

                                                                2.4.总结

                                                                Amir总结了一下Reddit的算法:

                                                                • Submission time(提交时间)是一个非常重要的参数,玩聚SR和RT就都是参照Reddit重视文章或热门消息的发布时间的。
                                                                • 前10票的得分,和接下来的100票,是一样的。这样,得了10票的文章,就可能和得了50票的文章得分相似。
                                                                • 争议性话题(得了很多反对票的)得分会很低。

                                                                (Amir还讲了Reddit的comment ranking,有兴趣可以自己去看看)

                                                                 

                                                                三、小结

                                                                就我在玩聚SR上使用Reddit排序算法的经验:

                                                                Hacker News的算法能够让老文章消失得更快,比如24小时之前的文章,基本就不会在榜单上存留。

                                                                Reddit的算法则能够让众望所归的那些优秀文章能够停留相当长时间,然后随着时间流逝,一点一点地被新的、好的文章挤下去。

                                                                Reddit的算法还有一个好处就是,当投票数变化了,才需要去重新计算一次文章的Rank,不用管时间的流逝。

                                                                 

                                                                参考资源:

                                                                1、Amir 2010年 《How Hacker News ranking algorithm works》;

                                                                2、谷文栋 2009年 《Social Media Algorithm: Hacker News》;

                                                                3、谷文栋 2008年 《Social Media Algorithm: Reddit》;

                                                                4、SEOmoz 2008年 《Reddit, Stumbleupon, Del.icio.us and Hacker News Algorithms Exposed!》。

                                                                分类: Python, Social

                                                                绿色通道:好文要顶关注我收藏该文与我联系

                                                                旁观者关注 – 0粉丝 – 83

                                                                荣誉:推荐博客

                                                                +加关注

                                                                4

                                                                0

                                                                (请您对文章做出评价)

                                                                « 博主前一篇:传播即真相吗?» 博主后一篇:支付宝吃利息?

                                                                注册用户登录后才能发表评论,请 登录注册返回博客园首页

                                                                简洁阅读版式

                                                                新版博问上线,帮您解决IT难题

                                                                首页博问闪存新闻园子招聘知识库

                                                                最新IT新闻:

                                                                · 古永锵对用户习惯很无奈:99%用户不肯付费

                                                                · 给程序员推荐:一些文章资源和趣闻

                                                                · Decide结合评论推新站 提供电子产品购买时机

                                                                · 分众危情48小时

                                                                · 苹果电视机2012年2月投产 将于年中推出

                                                                » 更多新闻…

                                                                最新知识库文章:

                                                                · 解依赖与接缝

                                                                · 如何成为一个C++高级程序员

                                                                · 【译文】Web Farm和Web Garden的区别?

                                                                · .NET 4.5 中只读集合接口的故事

                                                                · 函数式编程思想:不变性

                                                                » 更多知识库文章…

                                                                历史上的今天:2009-12-15 转世2009-12-15 才知道系列之五[耳环|TMD]2005-12-15 Nokia真机测试程序自动退出现象搜集[1][javaME]


                                                                China-pub 2011秋季教材巡展
                                                                China-Pub 计算机绝版图书按需印刷服务

                                                                Powered by:

                                                                博客园

                                                                Copyright © 旁观者