Facebook的弹出框

很喜欢facebook的弹出框样式,官网是用table实现的,可以看克军抓取的demo页面:pop-dialog-facebook.html

一直想用非table方式实现,晚上尝试了一把:facebook_dialog_test.html

facebook dialog

花了一个多小时,仅针对Firefox3,IE8,Safari4,Chrome2和Opera9做了测试。没时间去理IE7和IE6了,有兴趣的可进一步尝试。
2009-05-17:修改了写法,已经支持IE7和IE6. IE6下直接降级为直角,圆角半透明太难折腾了。

一点想法:

  1. facebook的table实现方案,看起来多了不少标签,而且语义化不太好,但用table实现,思路非常清晰,兼容性也很好。大量采用table实现界面元素的公司,还有google.
  2. 在背景图尚未下载完全时,对话框的样式满足“优雅降级”。
  3. 在禁用CSS后,两种实现方案呈现出来的样式差不多。就是标题是h2还是h4的区别。(个人觉得h2更佳,但习惯性写成了h4,囧)
  4. 我的实现方案在Firefox3等高级浏览器中,一次编码全部通过。只考虑高级浏览器的话,工作量和table方式差不多。
  5. 在IE6等老旧浏览器下,两种方案表现得都不是很完美。相比而言,table方案工作量少点。
  6. 或许,我们应该更坦然的去接受table方案?对于这种小模块的布局,table真的很好用,实现的技术门槛很低。

语义,也许就如诗歌一样,努力去做,可以很优雅很美。但绝大部分世人更喜欢通俗小说,诗歌在现实面前是种奢侈品。

Tags: ,

图片的HTTP请求(续)

上一篇中,很多朋友在回复中提到了一些更有意思的现象,忍不住继续挖掘一番:

10. IE6下的背景闪烁bug

这个bug久闻其名,但我自己从来没遇到过。纳闷了许久,后来才发现,这是一个非典型性甚至可以忽略的bug. 因为它的触发条件离普通用户很远:

The cause of flickering is choosing “Every visit to page” in Tools » Internet Options… » Temporary Internet Files » Settings…

Selecting anything other than “Every visit to page” will fix all flickering. Fortunately, the means that the flicker problem plagues developers far more than your common user.

只有IE的缓存选项设置为“Every visit to page”时,才会触发。普通用户的默认设置是“Automatically”, 不会遇到此问题。因此继续往下阅读之前 阅读全文 »

Tags: , , , ,

图片的HTTP请求

请在主流浏览器中打开测试页面,在Fiddler里查看http请求。

1. 隐藏图片

<img src="1.jpg" style="display: none" />

测试:test_1.html
结论:只有Opera不产生请求。
注意:用visibility: hidden隐藏图片时,在Opera下也会产生请求。

2. 重复图片

<img src="1.jpg" />
<img src="1.jpg" />

测试:test_2.html
结论:所有浏览器都只产生一次请求 阅读全文 »

Tags: , ,

呼唤前端交互师

现状

目前淘宝UED部有四大职位:用户研究、视觉设计、交互设计和前端开发。还有一个和UED独立的产品经理PD部。

一个典型的简化工作流程是:PD输出PRD(产品需求文档)-> 交互输出prototype(交互原型)-> 视觉输出mockup(视觉模拟图)-> 前端输出demo -> 后台根据demo实现开发。注意:这仅是简化流程,实际上还有用研的参与,流程上也不是简单的瀑布。

在PRD经过prototype, mockup到demo实现,经常需要大量的沟通成本。

设想

我设想的一种分工是:

  1. 用户研究:专业的用户测试调查和数据分析能力。
  2. 视觉设计:专业的视觉设计能力。
  3. 前端交互:a. 专业的交互设计能力;b. 基本的前端开发技能。
  4. 前端架构:a. 专业的前端开发技能;b. 基本的交互设计能力;c. 基本的后台编程经验。

最大的不同就是前端交互师的出现 阅读全文 »

Tags:

Firefox扩展更新的解决办法

最近Firefox升级老是报 download error -228. 这是升级服务器的中国镜像挂掉了引起的。

解决办法很简单,到镜像列表页面 http://www.mozilla.org/mirrors.html 找一个可以访问的服务器,ping出ip后,在hosts里绑定到releases.mozilla.org. 比如我的:

# mozilla update
204.152.184.113    releases.mozilla.org

推荐使用Primary Mirrors, 稳定可靠。

Tags:

Page 21 of 38« First...10192021222330...Last »