平时收集的一些有关UED的团队和个人博客

前端团队
阿里巴巴 UED — 我们设计的界面,并没有几十亿的流量,但每天来自上百个国家的百万商人在使用着。
阿里巴巴中国站UED — 阿里巴巴中国站UED成立于1999年,全称是用户体验设计部(User Experience Design Department),是阿里巴巴集团最资深的部门之一。
支付宝前端开发 — 支付宝前端开发车间。
淘宝UED — 淘宝网用户体验团队。
淘宝MED — MED(Marketing Experience Design). 是淘宝营销体验设计部门,为淘宝网的营销产品做体验设计。
口碑UED — UED(User Experience Design) 中文意思就是用户体验设计。
百度MUX — MUX(Mobile User Experience) 百度无线用户体验部。
百度泛用户体验 — 泛用户体验平台,是以’用户体验’为核心的跨专业分享平台。
盛大游戏UED — 专注用户体验,改变生活,让互动娱乐更精彩。
携程旅游UED — 这是一个血液中流淌着创意和活力的团队,在越来越关注严谨和灵活的过程中成长起来,我们对前端的需求如此强烈
腾讯CDC — 全称是Customer Research & User Experience Design Center(即用户研究与体验设计中心)作为腾讯的核心部门之一.
腾讯ISD — ISD Webteam是一个设计团队,即腾讯互联网业务系统网站组。
腾讯ISUX — 腾讯 ISUX 全称腾讯互联网用户体验设计部 (Internet Service User Experience),于2011年3月8日正式成立,前身为 ISD Webteam 网站组。
腾讯WSD — 腾讯用户体验设计团队. 设计无线,快乐无限。
腾讯Flash Team — 这里有一群可爱的Flash娃,他们热爱ActionScript开发~
腾讯soso团队博客 — soso更懂你。
财付通TID — Tenpay Innovation Design, 财付通设计中心。
5173 UED — 5173用户体验设计团队(User Experience Design),简称UED,成立于2009年。
19楼UED — 19楼 UED团队。
人人FED — 我们来自人人网,FED是”Front End Develop and Design”的缩写。
网易邮箱UI团队 — 网易邮箱UI团队。
网易UED — 我们的团队博客,关注用户体验设计、关注web前端开发。
网易UEDC — 网易用户体验设计中心(User Experience Design Center),简称”设计中心(UEDC)”,成立于2008年底。
搜狐UED — Sohu UED Team就聚集着这样一群人,执着于为用户提供更好的产品和体验,哪怕是对一点点小细节的精益求精。
新浪UED — 一个关注用户体验、关注工作流、关注作品质量的有爱团队。
爱词霸UED — 爱词霸用户体验团队博客,有关用户体验设计和研究的经验分享。

其它团队
淘宝搜索 — 淘宝搜索技术blog
Alibaba DBA Team — 这里记录着阿里巴巴数据库团队成员的点点滴滴
淘宝Data — 淘宝数据平台与产品部,是淘宝核心的数据平台技术和数据产品研发团队
淘宝DBA Team — 淘宝数据库技术团队
淘宝JAVA中间件团队 — 我们是淘宝JAVA中间件团队。我们为淘宝网构建JAVA底层架构和基础服务。
Taobao QA Team — 做测试的行业标准
淘宝核心系统团队 — 淘宝核心系统团队隶属于淘宝产品技术部,负责淘宝应用基础平台的研发和搭建
阿里巴巴Data Warehouse — 阿里巴巴数据仓库部门主要收集公司内外部所有数据
腾讯TGideas — TGideas是腾讯游戏的专业设计团队
腾讯GDC — GDC的前身叫GDT(QQGAME DESIGN TEAM),QQ游戏产品设计中心

个人博客
Kejun — 就职于豆瓣
Donkey(倔倔) — 就职于豆瓣
蒙晨(波希米亚) — 就职于豆瓣
greengnn(老卡) — 就职于豆瓣
糖伴西红柿 — 就职于豆瓣
Fenng — 曾就职于支付宝
sofish — 就职于支付宝
白鸦 — 就职于支付宝
62mm — 就职于支付宝
伯约(老鱼) — 就职于支付宝
怿飞(圆心,Blank) — 就职于淘宝
玉伯(lifesinger) — 就职于淘宝
明城(mingcheng) — 就职于淘宝
Der(崇志) — 就职于淘宝
黑妞HAHA — 就职于淘宝
Vilic — 曾实习于淘宝(很有前途的90后)
秦歌(Kaven) — 就职于口碑网
Emu(Stone) — 就职于腾讯
Ghost — 就职于腾讯
Yuguo — 就职于腾讯
臭鱼 — 曾就职于腾讯
艾文王 — 就职于腾讯
Danger — 就职于腾讯
神飞 — 就职于腾讯
pufen(飘飘) — 就职于腾讯
屈超 — 就职于腾讯
米随随 — 就职于腾讯
大猫 — 就职于腾讯
AVENIR(郑焕义) — 就职于腾讯
李振文 — 就职于腾讯
OnLing — 就职于腾讯
Xiaoxiao — 就职于腾讯
Seven — 就职于腾讯
Lerroy — 就职于腾讯
小李刀刀 — 就职于腾讯
愚人码头 — 就职于搜道网
子鼠,秀才 — 就职于百姓网
Adam Lu — 就职于新浪
林小志 — 就职于携程旅游
小灰灰 — 就职于携程旅游
小JOE — 就职于腾讯
彬Go — 就职于人人
Rokey — 曾就职于微软,网易,金山软件
Evance(布拉格) — 就职于阿里巴巴日本
深空 — 就职于腾讯
代码人(tomie) — 就职于腾讯
小爝(龙啸) — 就职于淘宝
Aether — 就职于土豆网
一葉千鳥 — 曾就职于盛大
7月 — 就职于Adobe
周裕波 — 就职于盛大创新院
崔凯 — 就职于傲游
勾三股四 — 就职于傲游
welefen — 就职于百度
kent.zhu — 就职于百度
aoao(嗷嗷) — 就职于百度
JerryQu — 就职于百度
胡晓 — 就职于网易
5key — 就职于阿里巴巴
Adam — 就职于Yahoo
slj(申力军) — 就职于赶集

未完待续….
以上内容如有涉及到隐私, 请联系我删除.

给普通按钮添加超链接

很多时候,前端工程师们需要将普通按钮做成超链接的形式,以方便重用 CSS 样式,如下代码就是将普通按钮通过 onClick 事件写成了超链接形式并且点击该按钮后在同一个窗口中转到另一个页面。

<input type="button"
onClick="window.location.href='http://www.google.com.hk'"
value="Google" />

CSS opacity 透明属性详解

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的 CSS 透明属性代码:

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

上面的几个属性分别是指:

opacity: 0.5; 这是最重要的,因为它是 CSS 标准.该属性支持 firefox ,Safari 和 Opera 。
filter:alpha(opacity=50); 这个是为 IE6 设的,可取值在 0-100,其它三个 0-1。
-moz-opacity: 0.5; 这个是为了支持一些老版本的 Mozilla 浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的 Safari 浏览器。

JavaScript 解决 IE6 不支持 li:hover 的方法

网页上的任何一个元素都可以带鼠标悬浮效果。firefox 和 IE7 以上版本都可以直接加上 div:hover, li:hover 就可以让鼠标悬浮出效果了,但 IE6 不行,这时需要一段 JavaScript 代码来搞定。

JavaScript Code:

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i = 0; i < sfEls.length; i++) {
        sfEls[i].onmouseover = function() {
            this.className += " sfhover"
        }
        sfEls[i].onmouseout = function() {
            this.className = this.className.replace(new RegExp(" sfhover\\b"), "")
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

xhtml Code:

<ul id="nav">
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
</ul>

CSS Code:

#nav li:hover, #nav li.sfhover {
    font-weight:700
}

用jQuery、MooTools或Dojo创建类似Twitter按钮的Ajax请求

有效地运用网站上的一些小工具来实现增强用户体验是一件很棒的事情。当然,这样的一些小工具需要花费个把小时去完善,但是相对于用户的反馈与回报还是相当值得。我个人很喜欢Twitter的“follow”按钮,这里我来展示如何用三种不同的库赖实现这样一个功能:jQuery、MooTools、Dojo。

提示:这篇教程只展示客户端处理表单的提交,没有任何PHP/MySQL服务端的任何处理。

HTML结构

<form class="follow-form" method="post" action="twitter-follow.php">
	<input type="hidden" name="followID" value="123456">
	<button type="submit" value="Actions" class="btn follow" title="123456">
		<i></i><span>follow</span>
	</button>
</form>

这个小工具的HTML代码非常简单,结构上只是简单的一个button标签包含了一个i标签和span标签。

CSS样式

/* twitter button and its children */
button.btn {
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  background-attachment:scroll;
  background-color:#ddd;
  background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
  background-position:0 0;
  background-repeat:repeat-x;
  border:1px solid #ddd;
  border-bottom:1px solid #ccc;
  color:#333;
  cursor:pointer;
  font-family:"Lucida Grande",sans-serif;
  font-size:11px;
  line-height:14px;
  padding:4px 8px 5px 8px;
  text-shadow:1px 1px 0 #fff;
  vertical-align:top;
}
button.btn:hover {
  border:1px solid #999;
  border-bottom-color:#888;
  color:#000;
  background-color:#d5d5d5;
  background-position:0 -6px;
}
button.btn:active {
  background-image:none !important;
  text-shadow:none !important;
}

button.btn i {
  background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
  background-position:-176px -32px;
  background-repeat:no-repeat;
  display:inline-block;
  height:13px;
  margin-right:5px;
  width:15px;
}
button.btn i.active { background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }

/* properties for the element that is generated *after* following */
span.following  {  background:#ffd; padding:5px 10px; }
span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat;}

这个按钮的大部分样式都包含在button元素里,你会注意到每个属性名都是围绕button的,根据按钮的不同状态(初始、hover、active)修改button的样式,Twitter使用了css sprites。

Mootools 脚本

/* with mootools */
window.addEvent('domready',function() {
	/* fetch elements */
	$$('form.follow-form').each(function(form) {
		/* stop form event */
		form.addEvent('submit',function(e) {
			/* stop event */
			if(e) e.stop();
			/* send ajax request */
			var i = form.getElement('i');
			new Request({
				url: 'twitter-follow.php',
				method: 'post',
				data: {
					followID: form.getElement('input').value
				},
				onRequest: function() {
					i.addClass('active');
				},
				onSuccess: function() {
					var button = form.getElement('button');
					button.setStyle('display','none');
					new Element('span',{
						html: '<span></span>Following!',
						'class': 'following'
					}).inject(button,'after');
				},
				onComplete: function() {
					i.removeClass('active');
				}
			}).send();
		});
	});
});

首先组织默认的表单提交行为,绑定一个Ajax请求,并使用INPUT的id值作为url的后缀。当请求发送的过程中,I元素的背景图就设为ajax请求图片,请求完成以后,那个图片隐藏,然后创建一个新的SPAN元素,告知用户已经following成功!

jQuery脚本

// Idiomatic jQuery by Doug Neiner
jQuery(function ($) {
	/* fetch elements and stop form event */
	$("form.follow-form").submit(function (e) {
		/* stop event */
		e.preventDefault();
		/* "on request" */
		$(this).find('i').addClass('active');
		/* send ajax request */
		$.post('twitter-follow.php', {
			followID: $(this).find('input').val()
		}, function () {
			/* find and hide button, create element */
			$(e.currentTarget)
			  .find('button').hide()
			  .after('<span class="following"><span></span>Following!</span>');
		});
	});
});

Dojo脚本

* when the DOM is ready */
dojo.ready(function() {
	/* fetch elements */
	dojo.query('form.follow-form').forEach(function(form) {
		/* stop form event */
		dojo.connect(form,'onsubmit',function(e) {
			/* stop event */
			dojo.stopEvent(e);
			/* active class */
			dojo.query('i',form).addClass('active');
			/* get button */
			var button = dojo.query('button',form)[0];
			/* ajax request */
			dojo.xhrPost({
				form: form,
				load: function() {
					dojo.style(button,'display','none');
					dojo.create('span',{
						innerHTML: '<span></span>Following',
						className: 'following'
					},button,'after');
				}
			});
		});
	});
});

上述两个库的代码修改自mootools的源代码,工作原理是一样的。

MooTools DEMO
Dojo DEMO
jQuery DEMO
“follow”图片只是改善用户体验中一个很小的细节,在大型网站上更多的使用这种交互性强的小工具能大大改善网站的用户体验!
翻译:narco
翻译自:http://davidwalsh.name/twitter-button

正确配置 jQuery Tools .slideshow() 插件

jQuery Tools 是我最喜欢的 jQuery 插件,小巧,轻量,高度语义化。

对一个幻灯插件来说,最讨厌的莫过于生成一堆无意义的 HTML 代码,比如之前用到的 Coin Slider,而 jQuery Tools 的 Tabs 包含的 .slideshow() 却非常友好,只是配置起来容易犯晕。

比如,官方 API 指南上说加上 autoplay: true 即可让幻灯自动播放,所以想当然地就写:

$(".slidetabs").tabs(".images > div", {
    effect: 'fade',
    fadeOutSpeed: "slow",
    autoplay: true,
    rotate: true,
    interval: 50,
    clickable: false
  }).slideshow();

但其实不然,因为 jQuery Tools 的插件包含关系是这样的:jQuery > jQuery Tools > Tabs > Slideshow,比如 effect, fadeOutSpeed 这些参数都是属于 Tabs 插件的,而 autoplay, interval, clickable 则是 Slideshow 的,所以要写成这个样子:

$(".slidetabs").tabs(".images > div", {
    effect: 'fade',
    fadeOutSpeed: "slow",
    rotate: true
  }).slideshow({
    autoplay: true,
    interval: 5000,
    clickable: false
  });

搜了下,看到官方论坛里很多人对这些参数的使用表示混乱不已,可能官方 API 写得不够清楚吧。

保证可用性的 after 图片替换技术

a {
  display: block;
  width: 100px;
  height: 40px;
  background: url(home.png);
  text-indent: -999em;
  overflow: hidden;
}

负缩进是最常用的 CSS 图片替换文字技术,这个方法的缺点是如果图片加载失败,元素就会变成空白的,原有文字也无法显示。

所以后来又发展出另一种技术,在要替换图片的元素里加入一个空元素,给这个空元素添加背景,然后再用绝对定位覆盖到原有文字上。

<div>HTML<span></span></div>
a,
a span {
  display: block;
  width: 100px;
  height: 40px;
}
a {
  position: relative;
}
a span {
  background: url(home.png);
  position: absolute;
  top: 0;
  left: 0;
}

这个方法解决了第一个方法的缺点,但缺点是需要在 html 中添加冗余代码。

受 after 清除浮动技术的启发,我使用 :after 替换第二种方法中的空元素,这样就不需要在 html 中添加冗余元素了。

a,
a:after{
  display: block;
  width: 100px;
  height: 40px;
}
a {
  position: relative;
}
a:after {
  content: '';
  background: url(home.png);
  position: absolute;
  top: 0;
  left: 0;
}

这种方法很好的解决了前两种方法的缺点,可惜不支持 IE6 和 IE7(IE6 和 IE7 不支持 after 选择器)。本着平稳退化的原则,可以让 IE6 和 IE7 继续使用第一种方法。

<!--[if lt IE 8]>
<style type="text/css">
a {
  text-indent: -999em;
  background: url(home.png);
}
</style>
<![endif]-->

优雅的 IE 条件注释新用法

<link rel="stylesheet" href="css/style.css" />
<!--[if IE]><link rel="stylesheet" href="css/ie.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="css/ie6.css" /><![endif]-->

以上代码大家应该都了解,对蛋疼的 IE 使用额外的样式表解决蛋疼的 IE 兼容性问题。
这种方案有2个缺点:

对 IE 用户会增加请求数量,影响访问速度;
一个元素的样式存放在几个地方,不便于维护,容易出错。
所以大型网站都不会使用这个方案,要么一个通用样式表搞定,要么注释不会产生请求的内嵌样式表。

那么还有更好的方法么?以下这种写法是我在 W3C HTML5 Loge 上发现的:

<!--[if lt IE 7 ]> <html lang="zh-cn" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="zh-cn" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="zh-cn" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="zh-cn"> <!--<![endif]-->

这样我们就可以 easy 的在 CSS 里写:.ie6 body { /* Go to Hell! */ }。

然后 jQuery 里可以这么写:if ($(‘.ie6′).length) { /* Go to Hell! */ }。

很好很强大是吧?

你是一个职业的页面重构工作者吗?

做为一个专职的页面重构者,我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不理会下面的内容。

单纯的页面重构,所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”,虽然看起来很少,但要做好这份工作,绝非所想的那么容易。原因很简单:工作内容单一,在时间和工作量上必会很苛刻,往往跟设计师的工作时间是3:1,即设计师给三天的时间,制作只给一天的时间完成;在这种工作强度下,很多人都是靠着对这份工作的喜爱在维持着,一旦工作热情消失,很容易就会变得枯燥,保持热情也成了重构工作者(也许是所有参加工作的人)应该具备的能力。

跟“前端工程师”所要求的有所不同,“页面重构”虽然也是“前端工程师”的一个范畴,在职业化中,对专职的页面重构者,要求当然也更高。不单是做出页面,而是做出好页面。又引出另一个话题,“何为好页面?”,一般包括下面几点:

结构完整,可通过标准验证
标签语义化,结构合理
充分考虑到页面在站点中的“作用和重要性”,并对其进行有针对性的优化
很多同学多少都遇到过方向不明,不知道自己应该提高些什么,我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容,针对每一点提出一些要求,以方便我们分析自己的能力水平,为继续提高确定个方向:

一,设计稿的分析
设计稿的分析是指对设计稿如何制作成页面的分析,即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段:

能分清设计稿中的公共与私有的部分
在1的基础上对各部分的实现方式有一个初步的方案(包括如何切图、写结构、写样式)
在1的基础上,准确的给出各部分的实现方案(包括如何切图、写结构、写样式)
在3的基础上,能同时考虑方案的扩展性、复用性及页面性能(包括如何切图、写结构、写样式)
在4的基础上,考虑整站的结构分布(包括文件分布、目录结构)
上面这些都是在还没开始动手制作之前所要做的。

二,切图
切图是指将设计稿切成便于制作成页面的图片。都有个误区,觉得切图就是把图片切出来,其实并不完全是这样,还包括把切出来的图片合并到一起,怎么切、从哪切才能将性能最大化,说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段:

切成所需要的图片(如何将需要的部分切出来)
在1的基础上,对切出来的图片进行一些优化(包括压缩文件大小、选择图片类型)
在2的基础上,规划切出来的图片(包括文件分布)
在3的基础上,考虑整体的性能(包括合并图片、压缩文件大小)
HTML和CSS的编写
HTML和CSS的编写是指将上面完成的内容,通过HTML和CSS的编写,将设计稿转换成WEB页面最重要的一块,也是我们所要重点掌握的内容,把它们放在一起,是因为它们相互的关联性太强,HTML的写法会影响到CSS的写法,它又可以划分成下面几个阶段:

还原设计稿视觉效果,并通过标准验证(HTML)
在1的基础上,实现多浏览器的兼容(HTML)
在2的基础上,标签语义化(HTML)
在3的基础上,选择较优的实现方式(包括模块化结构,方便程序脚本使用,HTML和CSS)
在4的基础上,考虑到扩展性、复用性和可维护性(HTML和CSS)
在5的基础上,考虑到整站的样式分布(包括如何实现分布)
在6的基础上,样式写法的优化(包括技巧的应用)
是对所遇到问题的解决能力,这一点在不同的阶段都可能会遇到,所以没有写到上面。

如果你已经达到或超过3、4、5,恭喜你,你已经是一个职业的“页面重构工作者”了。为了我们自身的发展,关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等,也是十分必要的。大家一起进步吧。

针对不同浏览器定义CSS样式的方法

针对不同浏览器分别定义CSS样式的方法,可以这样写

#test{
	width:960px;
	margin:0 auto;
	margin-top:10px!important;/*针对IE7以上*/
	margin-top:10px;#/*针对谷歌*/
	margin-top:10px;/*针对IE6*/
    }