十一月, 2009

未分类 — 2 Comments
29
十一 09

Websites On Speed


via Websites On Speed

未分类 — 1 Comment
26
十一 09

[招聘]口碑网

转发秦歌兄的一则招聘信息：

感谢您收看我们的招聘职位，此次职位全国各大以及比较大的招聘网站同步放出~~

招聘不煽情，现状需描述：

我们现在有12位成员。每天有快餐（谈不上美味却也实在，管饱），也会有加餐（楼下城管菜或者部门女人们的私房菜）。时常快乐，偶尔烦恼（人手不够哇。神啊！再赐予几棵油菜吧）

我们招人的5个基本要求：

有才（油菜），有缘，有计划，有执行，不骄躁。

各位大油菜，小油菜们，想成为口碑UED Team的四有新人嘛？点击在线投简历链接吧。 投了简历即送08新款诱惑礼包（期盼的眼神、杭州的星光、扎实的猪脑、愉悦的2日游、一个让你施展才华的舞台）
开放的口碑UED欢迎您！

前端开发工程师

岗位职责：

负责口碑网前端的开发

任职要求：

  1. 仔细看过《如何做好一份前端工程师的简历？》知道我们想找什么样的人
  2. 对前端兴趣盎然，耐住寂寞，前端已是职业发展的方向
  3. 精通JavaScript或ActionScript，有成功的商业案例和研究成果
  4. 理解 Web 标准，对可用性、可访问性等相关知识有实际的了解和实践经验
  5. 任何有利于前端开发的技能和兴趣都会给你加分，比如精通后端语言（PHP、Java等）、比如开发过浏览器插件等等
  6. 工作地点：杭州


前端开发工程师 实习生

要求：

  1. 仔细看过《如何做好一份前端工程师的简历？》
  2. 对前端有兴趣，耐住寂寞，并计划以此为今后的职业发展方向
  3. 理解HTML和CSS，并有实际应用经验
  4. 了解JavaScript或ActionScript，并有实际应用经验
  5. 任何有利于前端开发的技能和兴趣都会给你加分
  6. 工作地点：杭州

回报：

  1. 有专业的导师指引你在前端上的前进方向
  2. 在一个存在前端开发高手和务实新锐的团队中工作
  3. 给你足够的空间和机会，让你通过努力去改进整个产品开发流程，并定位前端在其中的角色
  4. 公司规定实习生薪酬
  5. 表现优秀会得到公司的offer或者向整个阿里集团推荐


交互设计师

岗位职责：

  1. 优化产品的易用性，改善用户体验；
  2. 参与产品的规划构思和创意过程，整理网站的交互需求；
  3. 与工作上下游合作设计信息架构，用户交互流程，设计先框图或纸面原型；
  4. 跟踪和利用数据，持续改善产品体验；

任职要求：

  1. 设计或计算机类专业本科以上学历，英语阅读能力良好；
  2. 熟悉互联网项目的相关流程，包括网站功能分析、用户角色分析、原型设计、界面开发、易用性测试等；
  3. 有丰富的网站交互设计经验，有成功案例；
  4. 逻辑分析能力强，善于沟通和协调，需要有文档归纳能力；
  5. 了解数据分析方法和工具使用，能完成日常数据统计分析报告
  6. 有大型互联网企业相关工作经验优先考虑；


视觉设计师

岗位职责：

  1. 负责为网站产品和服务推广设计视觉交互界面设计，跟踪产品效果，提出设计改善方案。
  2. 负责制定视觉设计规范，为快速设计提供科学的验证和尝试。
  3. 负责对视觉设计成果进行评估和研究，进行视觉元素的优化设计。

任职要求：

  1. 计算机、设计、美术或相关专业；
  2. 1年以上相关工作经验，能熟练使用Photoshop,CorelDraw,Dreamweaver等软件；
  3. 具有优秀的团队合作精神，善于思考。


用户研究员

职位要求：

  1. 人机交互、认知心理学、工业设计、或相关专业本科以上学历，硕士优先。2年以上相关工作经验（含实习）。
  2. 熟悉研究方法论和研究步骤，了解各种研究方法，有统计和数据分析基础，熟悉大范围定性和定量用户研究方法学和工具。
  3. 具有较强的逻辑思维分析能力，能独立撰写研究方案和报告并能提供有说服力的解决方案。
  4. 有良好的沟通能力和推动能力，能与其他研究员，不同职能的团队协作并能推动用户研究工作在公司内部的发展以及和外部团队的交流。
  5. 对国内外互联网产品有强烈的好奇心，了解互联网产品和用户研究动态的最新发展。
  6. 请在简历中附上详细研究案列至少2个。

工作职责：

  1. 协助部门进行新产品设计、产品原型评测。
  2. 协助部门进行现有产品的改版设计和为各部门提供用户特征行为分析指引。
  3. 完成日常产品数据分析并进行相关用户观察、深访、焦点小组等可用性相关测试。
  4. 设计可用性测试，完成计划，进行测试工作和撰写报告，给出产品改进建议。
  5. 制定用户研究规范，参与完善用户体验设计标准流程。
  6. 推广用户研究方法，创新用户研究方法，对公司内部人员进行传播。


未分类 — 1 Comment
21
十一 09

Pixel Perfect – Hack

比较常用的是只对IE进行hack，常见的写法有以下几种：

1. IE条件注释

<!-- [ if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

还可只对某一IE版本或以下版本hack

2. html/body标签中写class hook

比如使用jQuery Browser Plugin后通过firefox浏览页面html被附加上这样的class

<html class="win firefox firefox3 gecko gecko1">

之后针对不同的浏览器（及版本）写hack

Google的某些产品使用的是此方法，比如Google Reader，只不过hook的对象为body标签而非html标签，详见http://www.99css.com/?p=19

通过前后台生成hook皆可

CSS Hack

比如：

div{
    color: black; /* all browsers */
    color: red\9; /* IE8 and below */
    #color: green; /* IE7 and below */
    .color: yellow; /* IE7 */
    _color: blue; /* IE6 and below */
}

在实际项目中使用较多的是此方法，原因详见http://www.99css.com/?p=65#hack。当然，也可以第一种和第三种方法配合，方便通过验证

后记

如果不是为了pixel perfect，平时也用不到太多hack，hack多了非常令人恶心(think, there was an old lady who swallowed a fly)。

这是pixel perfect系列的最后一篇，面对“不可能完成的任务”，至少我们努力过了…

——————– 2010-3-22 补充 ——————–

最近在15+ Techniques And Tools For Cross Browser CSS Coding看到针对IE7 hack的.写法，补充一下:)

未分类 — 1 Comment
21
十一 09

Pixel Perfect – 工具

之前使用最多的工具是QQ/TM的截图（快捷键CTRL+ALT+A）和肉眼估算，追求pixel perfect的话还是要专业的工具才好

FastStone Capture

身为一款截图软件却带了一把邪恶的屏幕标尺，不幸落入设计师手中成为测量偶们页面的万恶之源！

Pixel Perfect

一款基于firebug的扩展，官网为http://www.pixelperfectplugin.com，效果不错，不过只支持Firefox

Microsoft Expression Web

通过工具栏的视图-描摹图像菜单来进行设置或调出

之后配合设计视图进行调试。用起来也没那么爽，设计视图的显示效果和浏览器始终会有差异

打造自己的Pixel Perfect

Pixel Perfect扩展和EW的描摹图像功能原理类似，将效果图叠在页面下方并设置一定的透明度之后偶们再用肉眼比对。知道了原理我们自己就可以开始DIY了，代码如下：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Pixel Perfect - 99css.com</title>
<!-- Pixel Perfect -->
<style>
img.pixel-perfect{position:absolute;left:0;top:0;-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";#filter:alpha(opacity=50);}
#pg{position:relative;z-index:1;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<img class="pixel-perfect" src="设计/填写资料页副本.jpg" />').appendTo('body');
})
</script>
</head>

<body>

<div id="pg">
    <div id="hd">head</div>
    <div id="bd">body</div>
    <div id="ft">foot</div>
</div>

</body>

</html>

一个跨浏览器的Pixel Perfect就这样诞生了，使用时只需调整图片路径、top/left值、透明度即可（有时页面很长，js写在head中方便后期删除，暂时去除只需将整段注释掉；追求性能放在页面底部，不过本地调试就不用这么龟毛了吧）

Next

剩下的就是配合firebug/IE developer toolbar进行微调，体力活开始了…

未分类 — 7 Comments
14
十一 09

自适应圆角

前言

有时候我们不得不面对圆角，也很傻很天真的认为利用 CSS3 的新特性对浏览器分级支持是最好解决方案，但现实≠理想…

需求

  1. 3px 圆角
  2. 宽度自适应（随着文字字数扩展宽度并自动换行）
  3. 换肤
  4. 不使用图片（对可维护性/性能均有影响）

困惑

经典的解决方案看起来像这样：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>传统方案及bug</title>
<style>
body{margin:100px;background-color:red;}
div, p, b{margin:0;padding:0;}
b{display:block;}
.rc{display:inline-block;#display:inline;#zoom:1;}
/* float 效果相同
.rc{float:left;} */
.rc1, .rc2, .rc .bd{border-style:solid;border-color:black;background-color:yellow;}
.rc1, .rc2{height:1px;overflow:hidden;}
.rc2, .rc .bd{border-width:0 1px;}
.rc1{margin:0 2px;height:0;border-width:1px 0 0;}
.rc2{margin:0 1px;}
.rc .bd{padding:0 6px;line-height:1.5;}
</style>
</head>

<body>

<div class="rc">
    <b class="top"><b class="rc1"></b><b class="rc2"></b></b>
    <div class="bd">
        <p>FML!!!</p>
    </div>
    <b class="bottom"><b class="rc2"></b><b class="rc1"></b></b>
</div>

</body>

</html>

使 rc float: left 或 display: inline-block 或许能满足需求，不过 IE 6&7 出现 bug：IE6中依然显示为dispaly:block，而IE7中top 和 bottom缩成一坨，不肯扩展开来，而在 rc1/rc2/rc3 中插入文字

<b class="rc1">XXX</b>

则只能扩展到文字XXX的宽度，无法与 bd 对齐！
如果你能搞定，麻烦留言告诉我一下 :)

解决

试了几个方法均不通，也搜索不到这个 bug，这时想到了 Google 系产品的 1px 圆角按钮：

这是前 Google 视觉设计师 Doug Bowman 的功劳，后转会到Twitter（AD一下：@ytzong），Doug Bowman 为此写过一篇博文《Recreating the button》 demo在此。不过demo 也仅仅是 demo，产品中使用的还是某对天才工程师夫妇的神作，他们有足够的时间来做这项工作：

The magical inline-block solved everything, except in IE. That’s where the genius of Google engineers came in. They knew how to get tricks working in all browsers, and this technique interested a couple of them enough that they dedicated the time to make it work.

打开 Gmail，用 firebug 艹艹看了一下，心里暗骂一句：天才就是天才！
写了个简单的 demo（为了演示方便这里采用了盒谐的颜色）：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>自适应圆角</title>
<style>
body{margin:100px;background-color:red;}
div, p{margin:0;padding:0;}
.div1, .div2, .div3{display:inline-block;#display:inline;#zoom:1;position:relative;border-style:solid;border-color:black;}
.div1{border-width:1px;}
.div2, .div3{#left:-2px;border-width:0 1px;background-color:yellow;}
.div2{margin:0 -2px;}
.div3{margin:1px -2px;padding:0 6px;line-height:1.5;}
.arrow1, .arrow2{position:absolute;top:7px;width:0;height:0;overflow:hidden;border-top:6px transparent dotted;border-bottom:6px transparent dotted;}
.arrow1{left:-9px;border-right:6px black solid;}
.arrow2{left:-8px;border-right:6px yellow solid;}
</style>
</head>

<body>

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>FML!!!</p>
        </div>
    </div>
    <div class="arrow1"></div>
    <div class="arrow2"></div>
</div>

</body>

</html>

效果如下：

不仅满足了需求，代码量及结构嵌套也很少。

代码说明

  1. div1 实现上下两条边，div2 实现 2px 圆角处的 4个点（一般人只有3点），div3 实现左右两条边，div1 设置左右边框的原因是避免IE 6&7 中的一个盒模型的小 bug，有兴趣研究的话可去掉左右边框看下效果
  2. arrow1 实现小三角的边框，arrow2 实现小三角的背景，此处利用了 border 来模拟小三角，这其中会遇到IE 6 的边框不透明 bug。另外，你也可以看看oocss的写法
  3. 宽度自适应利用的是 display: inline-block，注意IE 6&7 中的处理方式
  4. #left:-2px 之前的 # 为 IE 6&7 hack，多写为*，这里用#一是表明偶的与众不同，二是微软的 Expression Web格式化 CSS 的时候若{}中出现*则会把代码搞乱，此处 IE 6&7 中出现了 margin-left 负值无效的 bug ，通过 position:relative 加 left: -2px 实现

可以看出：IE 6&7 bug 众多的特点在此例中表现的淋漓尽致！

最后的话

阮一峰老师也写过一篇《制作Gmail式按钮》，配合强大的 jquery 来实现按钮各种状态，最后的总结也很精彩，修改一下下：

虽然这种按钮（圆角）的视觉效果比较理想，有很多设计上的优点，但是局限性也很大。一方面，它需要大量的冗余代码，与语义网的原则相违背…

完美方案还是利用浏览器的自身特性提供对不同的浏览器分级支持，渐进增强（比如 IE 下显示为直角，对CSS 3支持较好的浏览器显示为圆角），这才是开发效率、可维护性、语义、性能的最佳平衡。

未分类 — 1 Comment
11
十一 09

What Beautiful HTML Code Looks Like

via What Beautiful HTML Code Looks Like

未分类 — 9 Comments
1
十一 09

Pixel Perfect – 中文字体2

如果你以为世界就此清净那就错鸟，在WIN7下有另外结果（VISTA应该接近，木有条件测试），如图：


点击图片看大图

结论：

WIN7/Arail 12px 14px文字
ie8 高12px占20px
上3px下5px
下划线在14px处		 高14px占20px
上2px下4px
下划线在16px处
ff3.5 字12px高20px
上5px下3px
下划线在18px处		 高14px占20px
上3px下3px
下划线在18px处

看到此，偶内牛满面，偶这就去公司加班…