2008-4-22
UCDChina 产品设计工坊
上周六参与了白鸦和 Angela 组织的 UCDChina 设计工坊，第一次参加，完全是学习的心态。
一天的时间，上午是白鸦和 Angela 在讲产品设计的流程，信息量很大，收获很大，需要消化的东西很多。下午是项目模拟。
我说一下我的感受：
- 流程与分工的混乱
- 这是目前业内的现状，在模拟过程中很明显。尤其是先期市场研究，用户定位等环节，固然跟小组中没有经验丰富的用户研究人员有关，但整个过程确实不甚漂亮。流程混乱，过早的跑到细节讨论的误区。出现这些问题并不可怕，毕竟我们从错误中学到了经验，在以后的实战中终会受益的。关于分工合作的关系，白鸦 Keynote 中的一张图表现的很形象。
- 面对分歧
- 经验不足导致分歧严重，对待分歧也没有很好的处理，是快速消除分歧，还是放到下一环节，还是不了了之？
- 用户需求不等于产品功能
- 单独说出这句话来都能达成共识，但是在真正的模拟过程中，概念上还是混淆了。过早的用功能来描述需求，只会在后续的产品开发中禁锢住头脑，Angela 提到的一个文字游戏的说法很有说服力。
- 概念图/流程图的绘制
- 以前接触的少，这次白鸦现场演示了一个简单的概念图的绘制，很受教育，一会儿在电脑上画个。
- 用户访谈
- 与用户交流的确是一门艺术，Angela 深谙此道。两个小组的互相访谈很有趣，没看到的只能说很遗憾。
白鸦也提到了一些界面设计中的观点，一些印象比较深刻的：
- 在决定一个功能在界面上的显示方式时，可参考有多少人使用，以及其被使用的频率；
- 每个功能由不同的工程师来开发，每个工程师都认为自己开发的那个功能极其重要，都想在显赫的位置得到体现；
- 对于一些成功案例，应该考虑该案例在其演变过程中的实际情况，有时是不可复制的，白鸦举了一个 IM 的例子；
非常感谢白鸦和 Angela 的工作，在整个活动中，Angela 非常关注各位的接受程度，可谓用心良苦。感谢叽歪提供场地，叽歪的办公环境不错。
活动中认识了思域、Mason、Redfall 等朋友，以及其他暂时还叫不上名字的牛人们，对 Tony 提出批评，一块吃过饭了还不知道我的名字，虽然那次饭是他请客，也理当该诛。
2008-4-3
2008-3-25
IE 的 text-indent Bug
今天遇到的一个 Bug，主要表现为：当容器的第一个子元素为 inline 属性，并且为该子元素定义了 text-indent 的话，IE 渲染出错。阅读全文...
例子 1：
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="background: #FF0; color: red; text-indent: 50px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误：
错在 text-indent 只在 block 级别的元素中体现，在本例中的 span 元素中，应予忽略。
例子 2：
给 span 加个浮动，让它自动成为 block 元素看看。
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="float: left; background: #FF0; color: red; text-indent: 50px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误：
错在 span 将自身的 text-indent 属性传递给了它的父元素 div。
例子 3：
负值的 text-indent 会是怎样呢？
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="background: #FF0; color: red; text-indent: -9999px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，错误，我们什么也看不到了：
错在 span 不但将自身的 text-indent 属性传递给了它的父元素 div，而且还将超出的内容隐藏了，在没有定义 overflow 属性时，元素的默认 overflow 属性应该是 visible。
例子 4：
既浮动，又负值的 text-indent 呢？（事实上我正是在这种情况下遭遇了这个 Bug）：
<div style="margin: 10px auto; padding: 10px; width: 400px; border: 3px solid #EEE;">
<span style="float: right; margin-left: 5px; width: 40px; background: #FF0; color: red; text-indent: -9999px;">Indent</span>
正文
</div>
在 Firefox 中，渲染正常：
在 IE6 中，仍然是错误：
依然是 span 将自身的 text-indent 属性传递给了它的父元素，并将超出的内容隐藏了。
以上的 Bug 在 IE8 的“IE7 mode”中得到了部分修正，当 span 为浮动时基本是正常的，但默认情况下仍然错误。其他版本未测试。
标签： browser-bugs, css, ie, web
2007-8-2
浏览器与 Web 开发工具
面对 Mozilla、MS IE、Webkit（Safari）、Opera 这四大家族的浏览器，不管你正在调教哪款，总有与之相对应的一款 Web Developer Tool 正在等着你。阅读全文...
Mozilla Firefox
作为一款以强大的可扩展性著称的浏览器，用于 Web 开发的插件自然不胜枚举，我想这也正是伊为众多 Web 工作者所钟爱的原因之一吧。Web Developer、JSView、HTML Validator 等插件都能为我们的工作带来很多方便。本人重点推荐的是 FireBug，这款插件经过作者孜孜不倦的开发，在查看 DOM 结构，实时修改 CSS，调试 Javascript，甚至提升网站的访问速度等方面都堪称上品，可谓一×在手，别无所求。
Microsoft Internet Explorer
作为目前市场占有率最高的浏览器，伊使所有的 Web 工作者都不敢小觑。这款由微软开发的 Internet Explorer Developer Toolbar，使我们在解决 IE 下各种稀奇古怪的问题时，不再如同盲人摸象般手足无措。
Webkit（Safari）
所有 Mac 用户都不忍心将如此优秀的浏览器打入冷宫，随着 Safari 进驻 Windows 平台，伊的用户数量相必会逐渐攀升。万事俱备，只欠一款 Web Developer Tool ？Webkit 已经把它带来了，Web Inspector，这不是 Plugin，也不是 Add-on，而是包含在 Webkit Nightly 版本中的一个功能，下载最新的 Webkit Nightly Build，安装之后，在终端中开启 Inspector：
defaults write com.apple.Safari \
WebKitDeveloperExtras -bool true
启动 Webkit 之后，右键菜单中的 “Inspect Element” 就是了，只是你需要用 Webkit 来代替 Safari，问题……不是很大吧？
Opera
这款速度迅猛的浏览器，就如同乱世中的哲人一般，精巧而专心地做着自己。伊不乏铁杆 Fans，而且其中的 Web 工作者不算少数，因此 Opera 下的 Web Developer Tools 也颇有几款，例如 Web Accessibility Toolbar、Web Developer Toolbar & Menu，而 Opera 官方出品的 Opera developer tools，实为其中集大成者。
怎么样，您今天来哪款 :D
标签： Software, web, Web-developer-tools
2007-6-15
Somthing about HTML 5
- 一个元素中的 block 元素与 inline 元素不能并列共存?
- 新引入了不少用户布局的标签，诸如 header、footer、nav、article，我们现在习惯使用的 <div id="header"> 就可以用一个 <header> 来代替了，这方面应该是最迫切需要浏览器来支持的；
- 还有一堆新标签，例如 time、datagrid、datalist ……
- input 标签拥有了一堆新的 type：
- datetime
- datetime-local
- date
- month
- week
- time
- number
- range
- url
- 表单元素的新属性：required、autofocus 等，将有效提升表单验证的友好度，只是到时候又要忍受不同浏览器的解释方式了；
- target 属性仍然可用，无论是针对 base 还是 a 标签。
2007-4-21
坦然面对浏览器的多样化
对于Web工作者来说，不需要抱怨，要坦然面对，标准迟早会建立并执行，而浏览器多样化的状况一定会存在。任何一种产品，都不会任由一个品牌垄断。
日本的光学设备够出色，产品线够全面，但我们还是可以选择血统纯正的Leica，适合家用的Kodak，甚至HP、Sansung、GE都能分得一杯羹，因为消费者能够接受，也正享受着这个行业产品的多样性。
我们需要一个标准，一如我们毫不怀疑Philips的光盘能够放进Lite-On的光驱中，Michelin的轮胎能够装在Jeep汽车上。这不是，也不应该是某一个企业独立完成的事情。
微软在这几年的时间里占有了浏览器市场的大部分份额，但几年的时间对于一个行业来说只不过是须臾。
对于用户来说，不需要抱怨，坦然面对自己的选择。选择IE，保证在网络上大部分时间的畅通无阻；选择Firefox，享受其众多附加软件带来的便利；或者选择Opera、Safari等任何你想选择的浏览器。不能坐在麦当劳里面抱怨没有老北京鸡肉卷，也不能坐在肯德基里面抱怨没有巨无霸。
2007-3-25
利用CSS按比例缩小图片
当然，生成缩略图这个工作如果交给程序来完成，效果会好很多，但是有时出于某种因素，例如服务器不支持GD之类的，难免就要请CSS代劳。
把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。阅读全文...
对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
<img src="..." alt="..." onload="resizeImage(this)" />
<script type="text/javascript">
function resizeImage(obj) {
obj.width = obj.width > 50 && obj.width > obj.height ? 50 : auto;
obj.height = obj.height > 50 ? 50 : auto;
}
</script>
这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。
最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：
.thumbImage {
max-width: 50px;
max-height: 50px;
}
* html .thumbImage {
width: expression(this.width > 50 && this.width > this.height ? 50 : true);
height: expresion(this.height > 50 ? 50 : true);
}
至于图片是如何保持其高宽比例的，这张图片可以解释：
标签： css, Expression, max-width, web
2007-2-13
100款最佳英文字体评选结果
这个网站评选出了100款最佳字体，前10名分别是：
- Helvetica
- Garamond
- Frutiger
- Bodoni
- Futura
- Times
- Akzidenz Grotesk
- Officina
- Gill Sans
- Univers
有意思的是前100款字体中仅有两款是衬线字体。
虽然Arial、Verdana、Tahoma都非常出色，我想我们的视野应该更开阔，去尝试使用一些新鲜的字体，在网页设计中，Trebuchet MS、Lucida Sans以及Georgia等字体都会给页面带来不同的感觉。
2006-11-27
用百分比进行背景图片定位
大部分人应该习惯于使用描述性词语（left、top、center…）或者数值（20px、1em…）对背景图片定位，百分比可能比较少用，常见的有50%、100%等数值。例如希望背景图片水平居中，距离容器顶部20px，可以使用
background-position: 50% 20px;
之所以不使用
background-position: center 20px;
是因为类似这种描述性词语和数值混用的形式不被W3C推荐。（单纯的描述性词语组合使用是没有问题的，例如：background-position: right bottom;）阅读全文...
使用百分比进行定位的好处是可以利用CSS的计算功能，达到px定位所难以完成的任务。例如在一个宽高均为300px的容器中，使用
background-position: 150px 150px;
可以看到背景图片的左上角顶点（坐标0,0）定位到了齐容器的中心点（坐标150px,150px）。
而把150px替换为50%，使用
background-position: 50% 50%;
看到的并不是如下的效果
而是这样
可见，CSS计算出了背景图片的中心点。这也可以解释为什么我们在使用
background-position: 100% 100%;
定位的时候，图片被放置在容器的右下角，而并没有跑出容器。（如果使用 background-position: 300px 300px; 的话，背景图片会被移出容器）
同样，如果使用
background-position: 20% 20%;
会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。
2006-11-9
利用outline以及IE的button背景图Bug制作双线边框的按钮
首先声明一下，这篇文章中所讲的实例使用到了浏览器的Bug，这是不被推荐的，仅供大家参考一下。或者在确认这个方案对整个网站的整体效果影响不大的时候，可以小用一下。
我们都知道，在CSS默认的边框属性中，有double这个选项，代表双线，但是在实际运用中，这个属性的效果并不理想，两层边框只能使用一种颜色，而且各个浏览器的解释也略有差异。
在一次工作实例中，我本想给<button>添加一个背景图片，做一个好看点的按钮，却发现IE在显示<button>的背景图片时，存在一个Bug：IE总是在<button>的边框和背景图之间，显示1px宽的间隙，间隙的颜色由<button>的背景颜色决定。
这个发现非常好玩，本来<button>只有一层边框，现在看起来就像是内外两层边框了。这样不就可以做出双层边框效果的按钮了吗。不过说到底，这只是IE的Bug，其他的现代浏览器在显示<button>的背景图片时，还是非常标准的，不存在这1px的间隙。好在CSS 2有另外一个属性：outline，这个属性理所当然的不被IE支持，Firefox，Opera，Safari等浏览器的当前版本都可以正常显示它。这样，我们就可以有一个方案了：
- 对于IE，使用border做外边框，使用Bug中提到的1px间隙做内边框
- 对于现代浏览器，使用outline做外边框，使用border做内边框
完整的方案如下图所示：
经过美化后的CSS方案：
button {
line-height: 40px;
color: #1e3182;
background: #FFF url(button_bg.png) repeat-x 0 0;
padding: 0 1.5em 0 2em;
letter-spacing: 0.5em;
cursor: pointer;
}
*>button { /*for modern browser*/
height: 40px;
outline: 1px solid #9DAAE2;
border: 1px solid #FFF !important;
}
* html button { /* for IE 6.0/IE 5.* */
border: 1px solid #9DAAE2;
}
*+html button { /* for IE 7 */
border: 1px solid #9DAAE2 !important;
}
这个方案的优点是：
- 可以随意变换双层边框的颜色，内外边框可以不同
- 按钮的宽度不用定死，由其内部的文字多少来决定
- 按钮所用到的图片只是很窄的一幅背景图
当然缺点就是双线边框中的内边框在IE下只能是1px，而且由因IE修补Bug而导致方案失效的危险。
您可以在这个页面看到实例，虽然由于浏览器的其他原因，显示的效果略有差异：IE 6高出了3px，IE 7.0又矮了两个象素，而且IE显示的宽度都比实际定义的宽出一些，但双线的效果总算都还可以接受。
标签： browser-bugs, css, ie, web
2006-11-7
Opera下max-width与display:table-cell的显示bug
max-width和disply:table-cell是非常好用的两个CSS属性。利用max-width和max-height，可以非常方便的将网页中的图片缩小到一定尺寸，而且保证较小的图片不会被放大，图片的宽高比例也不会被强行改变。而disply:table-cell和其他的disply:table等属性结合，可以用div等标签模拟出table的结构，对于页面的排版也非常有用。
但是现在看来，Opera(9.00)对max-width的解释有些跟其他浏览器不一致。如果一个图片的原始宽度是300px，在CSS中定义它的max-width为100px，Opera确实能够按照max-width的值显示，但是这个图片在页面中所占据的实际位置却仍然按照原始宽度300px来计算。这点在普通情况下不太明显，一旦把图片放置在一个disply为table-cell的元素中，例如常规的td，或者是disply定义为table-cell的div或其他元素，问题就出来了。Opera会依照图片的原始宽度，把table-cell撑开到300px，虽然显示的图片只有100px宽。而高度却显示正常。阅读全文...
下图说明了Firefox对这种情况的显示方式，这也正式我们希望的：
而Opeera却是这样显示的：
这里有一个实例，您可以在不同的浏览器中查看本页的显示结果，当然，不要对IE抱有太大的希望。
这是一张原始图片，尺寸为300px/300px，我们把它max-width和max-height都定义为100px：
img {
max-width: 100px;
max-height: 100px;
}
把它放置在一个宽度和高度均为200px的单元格td中：
td {
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
|
|
把它放置在一个disply为table-cell，宽度和高度均为200px的span标签中，之所以选择span标签，是为了更能体现出IE的显示效果，另外，span之外需要有一个display为table的元素，我们选用一个div：
span {
disply: table-cell;
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
标签： browser-bugs, css, max-width, opera, web