{ Hauy`s blog } Inpeck.com http://www.Inpeck.com/blog 专注于用户体验、交互设计、web前端技术和web标准化建设。 Tue, 10 Jun 2008 01:32:22 +0000 http://wordpress.org/?v=2.5.1 en Adobe Dreamweaver CS4 Beta 发布 http://www.Inpeck.com/blog/2008/05/28/adobe-dreamweaver-cs4-beta-released/ http://www.Inpeck.com/blog/2008/05/28/adobe-dreamweaver-cs4-beta-released/#comments Tue, 27 May 2008 16:56:30 +0000 hauy http://www.Inpeck.com/blog/?p=154 今天下载并试用了一下，发现变得很不一样了。略微有点不适应。

Adobe Dreamweaver CS4

界面截图：

Adobe Dreamweaver CS4 截图

新增的功能有：

Live View

内置了一个WebKit渲染引擎，用于以标准浏览器来预览网页文件的显示效果。
Live View边上还有一个按钮叫Live Code，激活以后能在Code View里面显示该网页在真实浏览器环境下的Source Code，比如SSI过来的文件都能直接显示其内容了。

Related Files (相关文件)

这个功能是在编辑窗口的顶部显示一系列和当前网页相关的一系列文件，比如css啦，js啦等等，点一下就能直接编辑这些文件了，不需要到文件堆里面去找了。

Code Navigator (代码导航)

这个功能还是比较有用的。
简单地说，按住Alt在页面上点击以后，DW会弹出一个小对话框，用来显示会影响当前所选内容的信息，比如定义某段文字的CSS，在上面一点就可以切换到修改对应CSS的地方，很方便。

CSS best practices

CSS 方面有很大的增强。

Code hinting for Ajax and JavaScript frameworks (Ajax和Javascript框架的语法提示)

增加了对jQuery、Prototype和Spry这些js框架的语法提示支持。

HTML data sets

这个我没啥兴趣，增加了Spry的一个Data Set功能。

Photoshop Smart Objects (Photoshop智能对象)

没什么特别的，就是把psd文件拖进dw的时候会弹出一个优化图片的对话框，优化完以后提示让你保存jpg或者gif，有改动的话以后可以继续优化，只要psd文件还在。

Subversion integration

增加了版本控制功能。

新界面

据说变得更加fast和smart。。。不过我没感觉到。。。

其他的变化

  1. 右上角增加了切换面板布局的按钮，可以在八种布局方式之间切换，还可以新建和保存布局模式；
  2. 设置文字的属性的时候会弹出设置样式的对话框；
  3. 增加了Split Code (分割代码)功能，可以在两个界面显示同一个文件的不同部分，有些时候特别方便，不用来回拖动滚动条了；
  4. 编辑窗口右下角增加的对文档编码类型的描述，比如是unicode还是gb2312；
  5. 属性面板有了很大的变化，少了很多东西；
  6. 把插件管理器单独在菜单上放一个按钮令我觉得很奇怪；

郁闷的是。。。开着DW CS4之后我的DW CS3打不开了。。。要关掉以后才能打开。

Firework CS4和 Soundbooth CS4我没有太大兴趣，就没有关注了。

相关信息：

Dreamweaver CS4 帮助文件：http://help.adobe.com/en_US/Dreamweaver/10.0_Using/
Dreamweaver CS4 在Adobe的主页：http://labs.adobe.com/technologies/dreamweavercs4/
安装文件下载：For Windows，For Mac

]]> http://www.Inpeck.com/blog/2008/05/28/adobe-dreamweaver-cs4-beta-released/feed/ 0字节的flv文件导致vista的explorer崩溃 http://www.Inpeck.com/blog/2008/05/14/flv-file-cause-vista-crash/ http://www.Inpeck.com/blog/2008/05/14/flv-file-cause-vista-crash/#comments Wed, 14 May 2008 06:42:24 +0000 hauy http://www.Inpeck.com/blog/?p=153 今天朋友让我帮忙下载一个flv的视频，于是我就去找来了ViDown。
结果一开始下载以后，vista的explorer就不停地崩溃。。。囧。。。
然后进安全模式。。。explorer依然不停地崩溃。。。
郁闷了，打开卡巴，把关键区域扫描了一遍，未发现病毒。
用任务管理器却可以进入其他目录包括控制面板等。
我到c盘下找到explorer.exe文件，发现并没有被修改。

这时我发现，我在资源管理器里一切换到桌面所在目录，资源管理器也会崩溃。
于是我注意到在桌面目录下有一个0字节的flv文件，遂进入cmd把它删了，问题解决。

原来我刚才使用ViDown的时候把下载目录设置在了桌面，
开始下载的时候ViDown就新建了一个0字节的flv文件
vista的explorer大概想去预览这个文件，于是就出错了。

问题解决，把下载目录设置到其他地方就可以了。
不知道vista下，其他0字节的视频文件会不会导致explorer崩溃？

Updated: 

经测试，是播放flv文件的解码器的问题，原先的解码器是FLV splitter (Gabest) [version 1.0.0.1]，
更新到1.0.0.4版本以后就没问题了。

]]> http://www.Inpeck.com/blog/2008/05/14/flv-file-cause-vista-crash/feed/ Email页面代码书写建议及规范 http://www.Inpeck.com/blog/2008/04/30/suggestions-of-email-document/ http://www.Inpeck.com/blog/2008/04/30/suggestions-of-email-document/#comments Wed, 30 Apr 2008 10:22:20 +0000 hauy http://www.Inpeck.com/blog/?p=149 前几天看到口碑网的朋友写了一篇《如何编写兼容各主流邮箱的HTML邮件》，很不错。
在这里，我也要把我的经验和大家分享一下。

众所周知，Email是一项最古老的互联网应用之一。
因此，不少邮件系统还是会采用一些比较古老的处理方式，导致前端方面很多新的技术、新的特性无法被支持。
而且各个邮箱系统以及客户端的差异，也会使email的最终呈现出现很大的偏差。

HTML细节

就目前来说，如果要做一个email页面，为了保证最大的兼容性，有以下几点需要注意：

对于纯文本邮件：

  1. 邮件标题不要超过18个字；
  2. 每行不要超过34个字。

对于HTML邮件：

  1. 邮件标题不要超过18个字；
  2. HTML代码和图片尽量不要超过50kb；
  3. 页面宽度推荐500px，最大不要超过600px；
  4. 避免使用边缘的、非主流的HTML技术；
  5. 不使用css来布局，应该使用表格来布局；
  6. 不使用外联的css样式，而使用font标签来定义样式，定义链接颜色时也是如此，写法如下： <font style="font-family:arial,helvetica; font-size:10pt; color:#000000">
    ...
    </font>
  7. 不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML ；
  8. body和meta之类的标签是可以无视的，因为在很多邮箱系统里它会被过滤；
  9. 如果整个邮件有用到背景色或背景图，建议用以下方式处理：<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr>
    <td width="100%" height="100%" bgcolor=".....">
    <!--- 邮件内容 -->
    </td>
    </tr>
    </table>
  10. 有背景图片的时候，我们要采用这种写法：<table background="background.gif" cellspacing="0" cellpadding="0">

图片屏蔽

由于图片可以用来侦测邮件的打开率和email地址的有效性。
不少邮件客户端都会默认把邮件中的图片屏蔽，用户需要再点一下才能显示图片。

Blocking Issue AOL v. 6.0-9.0 Gmail Hotmail Yahoo! Outlook 2000/XP Outlook 2003 Outlook Express w/SP2 Outlook Express w/o SP2
外链的图片是否默认被屏蔽 Yes Yes No No No Yes Yes No
用户能否设置是否屏蔽图片 Yes No Yes Yes Yes Yes Yes Yes
能不能让用户点击某个按钮就显示邮件中的图片 Yes Yes Yes No No Yes Yes N/A
当发件人在用户的联系人列表里时是否默认显示图片 Yes No Yes No Yes Yes Yes Yes
发件人在ISP白名单中时能不能默认显示图片(国内好像没这个概念) Yes N/A Yes No N/A N/A N/A N/A
图片被屏蔽时是否显示alt属性 No Yes No No No No No N/A
预览时显示windows的主题样式 No No No No Yes Yes Yes Yes

来源：EmailLabs, 2004。国内用户常用的Foxmail似乎没有屏蔽邮件内图片的功能，我也找不到相关设置的地方。

一旦图片被屏蔽，整个邮件就会变得面目全非，这里有以下一些建议：

  1. 重要内容尽量避免使用图片，比如标题、链接等；
  2. 制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”；
  3. 所有图片都要加上alt属性；
  4. 所有的图片都要定义高和宽；
  5. 通知收件人把你的发件地址加入白名单。

Outlook 2007的限制

由于outlook 2007使用了word的渲染引擎来展现邮件内容，所以很多HTML属性没法得到支持了，比如：

  • 背景图片
  • css浮动和定位(这个没啥用)
  • 自定义列表项的图像(这个也没啥用)
  • Flash(反正不放的)
  • GIF动画
  • 图片的alt属性
  • 表单

下载这个pdf查看详细介绍。这些细节还是应该注意一下。

附：Email客户端的CSS支持情况
本资料来自国外某邮件营销公司，所以缺乏国内邮件客户端的数据。

<style> 标签

  gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
<head>中的<style>标签 No No Yes Yes Yes Yes No Yes Yes Yes No
<body>中的<style>标签 No Yes Yes Yes Yes Yes No Yes Yes Yes No

<link> 标签

  gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
<head>中的<link>标签 N o No No No Yes Yes Yes Yes Yes Yes No
<body>中的<link>标签 No No No No Yes Yes Yes Yes Yes Yes No

CSS 选择器

  gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
* No No No No Yes Yes Yes Yes Yes Yes No
e No No No No Yes Yes Yes Yes Yes Yes No
e > f No No Yes No No No No Yes Yes Yes No
e:link No Yes Yes Yes Yes Yes No Yes Yes Yes No
e:active,
e:hover		 No Yes Yes Yes Yes Yes No Yes Yes Yes No
e:focus No No Yes No No No No Yes Yes Yes No
e + f No Yes Yes No No No No Yes Yes No No
e [foo] No Yes Yes No No No No Yes Yes No No
e.className No Yes Yes Yes Yes Yes No Yes Yes Yes No
e#id No Yes Yes Yes Yes Yes No Yes Yes Yes No
e:first-line No Yes Yes Yes Yes Yes No Yes Yes Yes No
e:first-letter No Yes Yes Yes Yes Yes No Yes Yes Yes No

CSS 属性

  gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
background-color Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
background-image No Yes, but Yes No Yes * Yes Yes Yes Yes Yes No
background-position No No No No Yes * Yes No Yes Yes Yes No
background-repeat No Yes Yes No Yes * Yes No Yes Yes Yes No
border Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
border-collapse Yes Yes Yes Yes Yes Yes No Yes Yes No No
border-spacing Yes No Yes No No No No Yes Yes No No
bottom No Yes Yes No Yes Yes No Yes Yes Yes No
caption-side Yes No Yes No No No No Yes No No No
clip No Yes Yes No Yes Yes No Yes Yes Yes No
color Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
cursor No Yes Yes Yes Yes Yes No Yes Yes No No
direction Yes Yes Yes Yes Yes Yes Yes Yes Yes No No
display No Yes Yes Yes Yes Yes Yes Yes Yes No No
empty-cells Yes No Yes No No No No Yes Yes No No
filter No No Yes Yes No No No No No No No
float No Yes Yes Yes Yes Yes No Yes Yes Yes No
font-family No Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-size Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-style Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
font-variant Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
font-weight Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
height No Yes Yes Yes Yes Yes No Yes Yes Yes No
left No Yes Yes Yes Yes Yes No Yes Yes Yes No
letter-spacing Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
line-height Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
list-style-image No Yes Yes No Yes Yes No Yes Yes Yes No
list-style-position Yes No No Yes Yes Yes No Yes Yes Yes No
list-style-type Yes No Yes Yes Yes Yes Yes Yes Yes Yes No
margin Yes No Yes No Yes Yes No Yes Yes Yes No
opacity No No Yes Yes No No No Yes Yes No No
overflow Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
padding Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
position No No No No Yes Yes No Yes Yes Yes No
right No Yes Yes No Yes Yes No Yes Yes Yes No
table-layout Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
text-align Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes No
text-indent Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
text-transform Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
top No Yes Yes No Yes Yes No Yes Yes Yes No
vertical-align Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
visibility No Yes Yes Yes Yes Yes No Yes Yes Yes No
white-space Yes Yes Yes No No No No Yes Yes Yes No
width Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
word-spacing Yes Yes Yes Yes Yes Yes No Yes Yes Yes No
z-index No Yes Yes No Yes Yes No Yes Yes Yes No

(*) 不被Microsoft Outlook 2007支持。

]]> http://www.Inpeck.com/blog/2008/04/30/suggestions-of-email-document/feed/ google的Sitelinks可能会采用旧的索引？ http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/ http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/#comments Wed, 27 Feb 2008 07:13:28 +0000 hauy http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/ 最近我在做理财易网站的SEO优化，
在我改了网站的标题之后很长一段时间，直接搜索“理财易”的话，SERP页面中的网站标题一直没有变。

请看截图：

google上搜索理财易google上搜索在线记账

我猜想可能google的Sitelinks会采用旧的索引文件？
不知道其他朋友有没有注意这个现象。

]]> http://www.Inpeck.com/blog/2008/02/27/googles-sitelinks-may-use-old-index-file/feed/ 网页的中文URL应该如何编码才能有利于SEO？ http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/ http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/#comments Tue, 26 Feb 2008 12:27:32 +0000 hauy http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/ 最近在关注SEO方面的技术，碰到了一个关于中文的URL编码方面的问题。

很多朋友表示百度无法识别经过utf-8编码后的url链接。
星箭认为，是百度故意不识别utf-8编码后的url链接。
但是我注意到，这个现象应该是Google和Baidu对于编码后的url链接采用了不同的解码方式导致。

我们来看赶集网的热门标签页和土豆网的标签频道在搜索引擎中的表现：


先看赶集网的，赶集网的url编码采用了gb2312的编码方式

这是百度下的搜索结果页

赶集网在百度下的搜索结果页

这是google下的搜索结果页面

赶集网在google下的搜索结果页

我们发现，baidu将赶集网的url编码转化为中文，而google则保留了原始链接。

再来看土豆网，土豆网采用了uft-8的url编码方式

这是在百度下的搜索结果页面

土豆网在百度下的搜索结果页面

这是在google下的搜索结果页面

土豆网在google下的搜索结果页面

土豆的url被百度解码以后变成了乱码，而在google下则能正确地还原为中文。

结论：

  1. google对url采用utf-8的解码方式，百度则采用gb2312的解码方式；
  2. 对于一个网站来说，如果从baidu过来的流量比较大，可以尝试使用gb2312的url编码方法；
  3. google能把纯中文的url转化为utf-8编码，而baidu则完全无法收录。

附：

推荐一个Encode/Decode工具：http://seohelper.cn/tools/urlencode

]]> http://www.Inpeck.com/blog/2008/02/26/how-encode-chinese-url-adapt-for-seo/feed/ 介绍一款原型设计工具 - iRise Studio http://www.Inpeck.com/blog/2007/05/20/about-irise-studio/ http://www.Inpeck.com/blog/2007/05/20/about-irise-studio/#comments Sat, 19 May 2007 18:43:01 +0000 hauy http://www.Inpeck.com/blog/2007/05/20/%e4%bb%8b%e7%bb%8d%e4%b8%80%e6%ac%be%e5%8e%9f%e5%9e%8b%e8%ae%be%e8%ae%a1%e5%b7%a5%e5%85%b7-irise-studio/ iRise Studio 是 iRise 公司推出的一款原型设计工具，木的 曾经介绍过这款软件。

iRise可以很方便地设计出与最终产品具有完全一致的交互功能的仿真模型，
使用户在开发之前便可以用真实的数据进行测试，大大提高了开发效率。

以下是软件的部分截图：

Detail Page Whiteboard
Detail Page Decisions

在接下来的时间里，我将详细介绍这款软件。

]]> http://www.Inpeck.com/blog/2007/05/20/about-irise-studio/feed/ 这是垃圾箱吗？ http://www.Inpeck.com/blog/2007/05/20/is-this-a-garbage-can/ http://www.Inpeck.com/blog/2007/05/20/is-this-a-garbage-can/#comments Sat, 19 May 2007 17:42:02 +0000 hauy http://www.Inpeck.com/blog/2007/05/20/%e8%bf%99%e6%98%af%e5%9e%83%e5%9c%be%e7%ae%b1%e5%90%97%ef%bc%9f/ 上周去杭州，在延安路上吃了根哈密瓜，突然发现我找不到垃圾箱了。。。
走了很久突然发现前面有个物体看上去虽然像块板，但是很有垃圾箱的嫌疑。

垃圾箱

走上前去绕了一圈，发现果然是个垃圾箱！

垃圾箱  垃圾箱

不过把垃圾箱做成这样子，似乎有误导游客的嫌疑啊。
会不会有游客因为觉得找不到垃圾箱而增加乱丢垃圾的几率呢？

说实话我还是更喜欢这种“传统”一点的垃圾箱：

垃圾箱

]]> http://www.Inpeck.com/blog/2007/05/20/is-this-a-garbage-can/feed/ 完整的CSS工具列表 http://www.Inpeck.com/blog/2006/11/01/css-tools-list/ http://www.Inpeck.com/blog/2006/11/01/css-tools-list/#comments Wed, 01 Nov 2006 02:16:25 +0000 hauy 用户界面

易用性检查

整理和优化

字体

表单

布局

酷站

帮助向导 / Hacks / 学习资源


  • Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input area. English, Spanish, German and Bulgarian versions are available.
  • Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
  • Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger Bug
    这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。
  • Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
  • Easy CSS hacks for IE7 — IE7下可以用的CSS Hacks。
  • 针对IE7, Firefox 1.5和Opera 8.5的Web浏览器CSS支持 一览表。
  • snook.ca on the “+ CSS hack which you can use to target IE6 and IE7 only.
  • On having layout
    提供了很多信息围绕IE其特有的“渲染概念：hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements: 

    • “Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

    这篇文章的中文翻译参见承志的SharkUI：On having layout

  • Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
  • IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
    • …Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.
  • Ten more CSS tricks you may not know
    包括少量的IE bug修复手段
  • The “Holly Hack — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
  • CSS tests
    很不错的一系列CSS测试页面
  • max-width in IE
    用IE的expression来模拟max-width
  • http://imfo.ru/csstest/css_hacks/import.php
    用@import来针对不同的浏览器隐藏CSS的一系列方法。
  • Essentials of CSS Hacking For Internet Explorer
    助你对付IE的一系列建议。
  • Web 浏览器标准支持
    用图表来比较IE 6, Firefox 1.0, 和Opera 8.
  • The perils of using XHTML properly
    正确使用XML申明和MIME类型。
  • IE Double Float Margin Bug.

小贴士

]]> http://www.Inpeck.com/blog/2006/11/01/css-tools-list/feed/ 去掉当鼠标放到图片上时，出现下载、保存提示的图形工具条 http://www.Inpeck.com/blog/2006/10/22/disable-ie-imagetoolbar/ http://www.Inpeck.com/blog/2006/10/22/disable-ie-imagetoolbar/#comments Sun, 22 Oct 2006 04:48:43 +0000 hauy IE真是莫名其妙。

我自己可以在浏览器里关闭这个功能，但是我做的网页别人来访问怎么办呢？

关闭这个工具条有这么几个方法：

方法一：
<META HTTP-EQUIV=”imagetoolbar” CONTENT=”no”>
方法二：
<img galleryimg=”no”>
方法三：定义CSS
<style>
img {nobar:expression(this.galleryImg=’no’)}
</style>

]]> http://www.Inpeck.com/blog/2006/10/22/disable-ie-imagetoolbar/feed/ 微软正式发布 Internet Explorer 7 (IE7) http://www.Inpeck.com/blog/2006/10/20/internet-explorer-7-is-issued/ http://www.Inpeck.com/blog/2006/10/20/internet-explorer-7-is-issued/#comments Fri, 20 Oct 2006 05:42:18 +0000 hauy 微软在19日公布了IE7的最终正式版，并预计于11月1日通过自动更新推送IE7。
同时，Yahoo版的IE7提取出来以后的数字签名和官方版完全相同。
不过这次IE7发布的英文版是英文版的，国内用户应该不会大规模地使用。
正好可以趁这段时间测试一下，对于一些问题可以有一些对策。

体验IE7
IE7视频

下载和安装

[url=http://download.microsoft.com/download/3/8/8/38889DC1-848C-4BF2-8335-86C573AD86D9/IE7-WindowsXP-x86-enu.exe]IE7 for SP2 英文版本直接下载[/url]

英文版的IE7官方下载连接

安装时需要验证是否正版操作系统

安装方法：

1，打开“文件夹选项”，“查看”选择“显示所有的文件和文件夹”
2，打开系统盘，找到Documents and Settings文件夹，打开all users文件夹内的Application Data子文件夹，继续选择打开ndows Genuine Advantage，将data文件夹里面的data.dat删除
3，设置all users文件夹为只读
4，断开网络安装IE7.0

体验与使用

  • 相对测试版的IE7，正式发布的版本更加稳定和流畅，占用的内存也没有以前那么夸张。
  • 由于ClearType功能的影响，测试版中12px的宋体字看上去也是糊的，现在在正式版里面12px的宋体字看上去就很锐利，还是和以前ie6下面的一样。

    • 不过这个又带出一个问题，中文和英文显示时的颜色浓度略有差异，平时应该注意尽量避免中英文混排。

  • Tab功能很不错。按住Ctrl点击链接是在新Tab中打开链接；按住鼠标中键关闭Tab，这个好像意义不大。

平台改进和操作性

这可能是我最关心的问题

CSS方面：

IE7重点解决了以下两个bug：Peek-a-boo Bug 和 Guillotine Bug

    正在解决中的问题有： 

  • Ability to hover on all elements
  • Fixed positioning
  • CSS 2 selectors
  • HTML 4.01 improvements
  • Windowless Select Element

另外一些改进：

  • PNG:IE7开始支持PNG文件的alpha通道，意味着PNG的256级透明效果在IE7上有了用武之地了。
  • Ajax:IE7内置了XMLHttpRequest对象而无需ActiveX的支持。提高了兼容性以及客户端可以自定义安全策略。
  • RSS Feed 订阅支持:不用
  • OpenSearch 平台:可以方便地设置google为默认搜索引擎了（刚安装完IE7默认是Live.com）。
]]> http://www.Inpeck.com/blog/2006/10/20/internet-explorer-7-is-issued/feed/ 转载：如何创建一个更好的规范 http://www.Inpeck.com/blog/2006/09/23/building-a-better-style-guide/ http://www.Inpeck.com/blog/2006/09/23/building-a-better-style-guide/#comments Sat, 23 Sep 2006 01:29:51 +0000 hauy 作者简介：Whitney Quesenbery 是一位用户界面设计者以及可用性专家。她与世界各地的公司合作获得了优胜网站，网站和软件应用等奖项。作为 UPA 评判和可用性项目的主管，她被任命为美国政府在评判系统标准问题上的顾问委员会的委员。 Whitney 还担任着美国 UPA 主席的职务。

1. Building a Better Style Guide

1.1. ABSTRACT（摘要）

Why are style guides so frequently created, but so rarely successful? All too often, businesses ask for a style guide as a means to create a common look and feel, in the belief that it will solve usability problems and establish consistency between applications – only to be disappointed in the results. Even if such a style guide is followed carefully, the resulting interfaces may not meet usability goals.. This paper explores strategies for creating a style guide that is more than a simplistic rules book. By making the style guide part of the process, it can be used to promote a shared vision, to help the product meet business and usability requirements for consistency and…it may actually be used.

为什么规范如此频繁的被创建，但却很少成功的？时常企业创建一个规范的目的是能够创建一致的样子和操作习惯，并且希望透过规范来解决易用性方面的问题并且能够建立不同产品之间的一致性，但结果却是让人失望。即使规范被严格的遵循，结果却是界面的样式与易用性的目标相违背。这篇文章讨论的就是如何让规范不仅仅是一个规范手册。让规范融入到开发过程中，用于提升可视的共享（a shared vision？），让产品与商业需求和易用性要求相结合等等。让它真正的被使用。

1.2. INTRODUCTION（简介）

All too many projects to improve the usability of a user interface start with a request to create a style guide. To many user-centered designers, a style guide is the documentation of a design – the end of a design process – not a starting point for usability. And yet, we continue to create them, despite that fact that they may do little to address real usability problems or create a common approach to interaction. This paper describes some tactics and techniques for creating style guides that present and organize the appropriate information in a usable structure.

很多项目为了提高用户界面的易用性从创建一个规范开始。太多以用户为中心的设计者把规范作为设计最后的设计的文档，而不是易用性的起点。我们不断地创建它，而不顾它实际上不能解决实际的易用性问题或是达成共同的交互方式。

1.3. WHAT’S IN A STYLE GUIDE?（规范中包含什么内容？）

Style guides can be classified as platform (or language) guide, general design guides, or corporate style guides for a specific application. Although they overlap in many ways, each has a different focus.

Style guides可以分为：开发语言规范（？）、通用设计规范或特殊应用程序通用样式规范。虽然他们通过许多的途径交迭，但有各自不同的焦点。

1.3.1. Platform Guides

The vast majority of publicly-available guides are in the first category. These style guides focus on rules for presentation elements, including visual design elements such as color, logos, fonts or icons; page or screen layouts including spacing, justification and common items; and the correct usage for standard controls such as buttons, drop-down selections, radio button or check boxes.

这种规范的焦点在于陈述基本原理，包括可视化控件的标准例如：按钮、下拉列表、单选框以及复选框。

This focus is understandable for style guides written for operating system platform or software languages. These guides must provide basic information for other groups using their tools to create software products, documenting the capabilities of the platform as well as providing guidance to designers. In Table 1, we see that the Java Look and Feel Guidelines and Macintosh Human Interface Guidelines have very similar tables of contents despite having been written in different eras (as computer eras go) and in different companies. The same general pattern is also followed in sections of the ISO 9241 Ergonomic Requirements for Office Work with Visual Display Terminals. Although this standard also includes guidance and requirements for physical interaction as well as two sections on task requirements and usability,most of the sections focus on visual display guidelines for dialogs, information, and user assistance.

这个焦点用于操作系统平台以及软件开发语言。这个规范同样需要提供基本的信息给那些利用这个开发语言创建其他软件的设计人员，描述系统平台的性能作为设计人员的指导。从表1，我们可以看到“Java Look and Feel Guideline”和“Macintosh Human Interface Guidelines”拥有许多相似的内容。这些常规规范也是遵循“ISO 9241 Ergonomic Requirements for Office Work with Visual Display Terminals”。

Java Look and Feel Guidelines Macintosh Human Interface Guidelines
1 - The Java Look and Feel
2 - The Java Foundation Classes		 Preface
3 - Design Considerations 1 - Human Interface Principles 2 - General Design Considerations
3 - Human Interface Design and the Development Process
4 – Visual Design 9 – Color
5 – Application Graphics 8 – Icons
6 – Behavior 10 – Behaviors
7 – Windows, Panes, and Frames 5 – Windows
8 – Dialog Boxes 6 – Dialog Boxes
9 – Menus and Toolbars 4 – Menus
10 – Basic Controls 7 – Controls
11 – Text Components 11 – Language
12 – Lists, Tables and Trees  

Table 1: Comparison of Tables of Contents for Two Style Guides

1.1.1. Design Guides(设计规范)

Design guides, especially those written for web interfaces, often take a broader view, looking at the overall structure of a site and how the user navigates through it as an important design element. They may also include a primary focus on the process for creating a usable interface design. For an example of each type of design guides compare the Web Style Guide (published on the web as the “Yale Style Manual”) and the IBM Web Design Guidelines.

设计规范特别是那些为网站而写的规范，一般给出常规界面，将描述网站的总体界面效果，以及用户如何导航作为主要的元素。当然也包括最基本的焦点，创建可用的界面设计。例如如下的两个网页规范。

Web Style Guide IBM Web Design Guidelines
Interface Design 

Basic Interface Design – Information Access –Navigation – Links and Navigation

Site Design

Site Structure – Site Elements – Intranet Design -Site Covers

Page Design

Graphic Design – Design Grids – Headers and Footers – Typography – Consistency – Tables –Page Length – Cross Platform Issues – Editorial Style – Frames

Web Graphics

Color Primer – Graphic File Formats – Illustrations – Optimizing Graphics – Tags – Backgrounds – Image Maps

Web Multimedia and Animation

Design and AudioVisual Elements – Digital Video –Digital Audio – GIF Animation

 Planning 

User AnalysisCompetitive and Market Analysis - Strategy - Content - Development Tools and Technology - Schedule of Time and Resources

Design

Structure - Navigation - Text - Visual Layout and Elements – Media

Production

Preparation - Browser Compatibility - Creating Images - Cascading Style Sheets - Final Testing – Rollout

Maintenance

Administration

e-Commerce Topics

Customer Support

Trust - Product Navigation - Product Information -Purchase Transaction

Table 2: Tables of Contents for Design-Type Style GuidesBoth of these examples offer excellent advice for a user-interface designer, but neither offers a definitive set of standards. Instead, they focus on establishing best-practices in design process and solutions for some common design problems.

这两个例子都为用户界面设计师们提供了极好的建议。但是都没有提供了最权威的标准。他们描述的重点都放在提出最好的设计过程，以及为常见的设计问题提供解决方案。

Neither the platform style guide nor the design guide provide a perfect model for creating a corporate application style guide. The first type is too detailed, and, for product teams working in a familiar environment, spends too much time on platform basics. The second is too general and usually fails to meet the need for definitive answers to basic design questions. The IBM Web Design Guidelines even states this explicitly:

无论是“platform style guide”还是“design guide”都没有提供一个创建公共应用程序规范的完美例子。第一个规范太详细，对于一个相同环境中工作的团队将会花费过多的时间在上面。第二个规范则太常规，通常不能满足为设计中的问题提供最权威的解决方法的要求。IBM的规范中提到：

“We developed these guidelines by studying a cross-section of users and sites, but there may be contexts that we did not examine. If you learn from your user feedback that a different solution works better in your situation than one we offer here, then of course you should do what works best in your situation. To provide the best Web solutions, always use these guidelines in conjunction with a usercentered design process.”

“我们通过a cross-section of users and sites创建这个规范，但是还有可能有内容我们没有调查道。如果你通过一个不同的解决方案来获取用户的反馈信息，并且能够更有效的完成，当然采用你自己的解决方案。为了提供最好的网站解决方案通常将本规范与用户为中心的设计过程相结合。”

1.1.1. Corporate Application Guides（公司程序规范）

Corporate style guides are a hybrid of platform guides and design guides. They need to provide look and feel guidelines to ensure basic consistency (or compatibility) across the applications they serve. In addition to providing reference material, a corporate style guide also serves an educational purpose, illustrating both the conceptual approach to the user interface and, often, a process to ensure that usability is built into the design from the beginning. (A sample table of contents for a corporate application style guide is included as an appendix to this document.)

公司程序规范提供公司软件的一致视觉效果以及使用感觉。另外它还起到教育的目的。例如：即达到概念上的用户界面一致，又让易用性设计不用再从头开始。

1.1.2. GOALS FOR A CORPORATE APPLICATIONS STYLE GUIDE（创建公司程序规范的目的）

This brings us face-to-face with a need to understand why a corporate style guide is created in the first place. Without knowing what problem the style guide is intended to solve, it is impossible to structure the information effectively, or to plan the process of creation, review and implementation. These scenarios illustrate three possible goals:

这给我们带来面对面的需求来了解为什么要在最初就创建公司程序规范。处了了解规范将要解决什么问题，就不可能将信息有效的组合，或如创建计划，回顾和执行。下面是可能一些目的：

Ø A senior manager says, “We need a style guide to ensure that all of our applications share a common look and feel.” The underlying business goal may be usability, but it may also be to save development time by supplying standard answers to difficult design questions. In this scenario, the style guide may be seen as the simplest executive order that can be given to solve a “problem with usability.”

一个高级管理员说：“我们创建一个规范的目的就是让我们的应用程序可以共享一个共同的外观和感觉。”潜在的商业目的就是可用性。通过提供疑难设计问题的解决权威方案来节省开发时间。从这一点看来，规范可以用作为易用性的为题提供简单的解决方案。

Ø A user-centered design group decides to publish a style guide to assist product groups in creating usable interfaces, saying, “We know a lot about what it takes to create a usable design and would like to communicate this to all of the design teams.” In this scenario, the style guide may be seen as a way to create a formal mechanism for enforcing best practices.

个以用户为中心的设计组织决定发布规范来帮助开发团队创建便于使用的用户界面。说到：“我知道许多关于它的信息，它可以开始创建一个可用的设计并且希望与所有的设计团队沟通”在这种情况，规范可能成为一种为强制执行，被用到开发实际中。

Ø A product team may wish to document their own work – “We need a way to keep track of the decisions we have made, and to communicate them within our team.” This goal is usually based on the demands of working in a large design team, or a need to hand the design work from one group to another, for example, from an outside consultant to an internal staff, or to new hires.

一个开发团队可能希望将他们的工作文档化。“我们需要一个途径使使我们已经作出的决定明了化，并能够就这些决定于我们的团队进行沟通”这个目的通常是对于一个大的工作团队的要求，或者将设计工作从一个团队传递到其他的团队中。例如：公司与顾问公司之间或给新来的员工。

These scenarios can be summarized in terms of usability goals for efficiency, effectiveness and satisfaction:

这些情节可以一归纳出团队对于易用性的目标是：有效、效率以及满意。

Usability Characteristic 

易用性的特征

 Goal 

目标
Efficient 

高效

 Improved Quality: The time required to design of the user interface will be reduced because basic guidelines are clearly documented, tools are shared, and best practice guidance is available for other decisions 

提高品质：用户界面设计所需要的时间将会减少，因为基本的指导方针已经制定，工具已经共享，基本的实践指导能够购被其他的决定所使用。
Effective 

有效

 improved Process: User interface will be able to work together better because shared design guidelines are available. Initial designs will be more effective, with less re-work to solve usability problems required 

过程得以改进：用户界面能够更好的一起工作，因为有共享的设计规范使用。最初的设计将会更加的有效，在解决易用性问题上可以减少反复。
Satisfying 

满意

 Improved Usability: The user experience will be improved, both for the designers and users. Designers will have the satisfaction of creating excellent interfaces, while users will benefit from increased usability. 

提高可用性：无论对于设计人员或是用户而言，用户体验将会被提升。设计人员满意于创建卓越的用户界面，对于用户来说将得益于易用性的提高。

Table 3: Usability Goals For Corporate StylesNone of these goals seem controversial, or unattainable, so the answer to why style guides don’t always meet their goals does not lie in the goals themselves. The problem lies in the rest of the ISO 9241 definition of usability – that is applies to specific users, in a specified context. In other words, who is expected to use the style guide and what is the cultural environment of the group for whom it is being created? Is the style guide being imposed on an unwilling audience or is it welcomed by the people who will have to use it? Is usability an accepted or novel concept? Do current products have a similar interface or are there many different approaches? Are the teams collegial or competitive (do they even know each other)?

这些目标并不是存在争议或是难以达到的，因此为什么规范与初始目的背道而驰的答案并不在目标（目的）本身，问题出在“ISO 9241”定义的易用性的其他方面——在一个指定的环境中应用于特殊用户。换句话说，谁期望使用规范？将要创建它的人所处的文化环境是什么？规范是否被其他人自愿的使用或受将要使用他们的人欢迎？易用性是已经被公认的还是只是一个想法？当前的产品是否拥有类似的界面风格或是个不相同？团队是否拥有相同的权利还是相互竞争的（他们是否互相了解）？

The answers to these questions may not change the information included in the style guide, but the process of creating, gaining approval and maintaining it must adjust to the context. Simply gaining high-level executive sponsorship is not enough. No matter how high the authority, guidelines imposed on an unconvinced audience are often followed just to the letter of the law – if not simply ignored. The worst-case outcome is a user interface design that follows all of the guidelines, but does not really work well. Its designers are likely to blame the style guide for dictating solutions which hampered the ‘brilliant design’ they wanted to create. Whether those designers are forced to live within the guidelines or allowed to make exceptions, the credibility of the work is damaged.

这些问题的大案可能并不能改变规范中所包含的内容，但创建的过程，讨论通过以及改进却依赖于这些问题的答案。简单的说只是创建一个高水准的执行任务是不够的。无论有多么的权威，对于不是很信服的人来说最多是逐条的执行，如果没有遗漏的话。最糟糕的是，结果遵循规范但实际上并不能正常工作。遇到这种情况，设计人员有必要将他们的设计向大家阐述。否则，这些设计人员就有可能不按照规范或是被允许制造特许情况，工作的可信度就有可能遭到破坏。

1.1. WHO USES A STYLE GUIDE?（谁使用规范）

In addition to clarifying the business goals for a style guide, it is also important to know who its users will be. The obvious answer is “user interface designers,” but the answer is not that simple. A more detailed analysis would include in the user group a variety of specialists, and would also take into account differences based on the stage of the project,as seen in the table below:

在澄清了企业创建规范的目的外，了解规范的使用者同样重要。最明显的答案就是“用户界面设计人员”，但是答案并不是那么简单。更多的细节分析参看下表：

User Group 

用户组

 Design Concept - Analysis Stages 

设计观念——分析阶段

 Detailed Design - QA Stages 

详细设计——质量检测
All 

所有

 What are the rules I must follow in my work? 

在我的工作中我必须遵循的规范是什么？

 Have I followed those rules? 

我是否遵循了这些规范？
UI Designers 

(Architecture or Concept)

UI设计人员

 How should the interface be structured, both for layout and navigation? 

界面将如何编排？包括界面效果以及导航？

 Does the interface fit any structural guidelines? 

界面是否遵循了结构方面的规范？
System Architects 

系统设计师

 What are the implications for the architecture of any UI decisions? 

任何一个UI的决定都有哪些含义？

 Can all of the UI requirements be met? 

所有的UI需求都实现了吗？
UI Designers 

(Detailed Functions)

UI设计人员（细节问题）

 How do individual functions fit into the 

program structure?

What screen/page or interaction templates are available?

如何让个别的功能融入到程序结构中？

哪些视觉或交互的模板可用？

 What are the rules for layout, color, etc. that the design must support? 

How should design elements be specified?

界面的颜色等方面的规范是什么？设计必要的支持是什么？

如何让设计的元素表达清楚？
Developers 

开发人员

 How should the UI code be structured to meet design requirements? 

What controls or widgets are needed?

如何让UI代码与设计的需求相融合？

需要什么样的控件或窗体部件？

 What color, styles, etc. are available to use? 

How can I match them to the design specifications?

什么颜色样式等等可以使用？

如何使他们与设计的规范相符？
User Assistance How will assistance be offered to users? 

What standard UI elements are used? How should they be documented?

什么UI元素被采用？

他们是如何被表达的？

 What assistance does a user need for this function/page/screen? 

What method should be used to include it?

哪些帮助用户需要？

采用什么样的方法来包含这些内容？
Quality Assurance 

质检人员

 Are there templates or standard approaches which can be tested globally? 

原型和标准可遵循，那些可以测试？

 Does the interface meet all standards? 

界面是否与所有的标准相符？

Table 4: Style Guide UsersFor each user group, use of the style guide shifts during the project. It starts out supplying a conceptual overview, but quickly moves into a role as a detailed reference guide. It is this mix of requirements that makes the contents of a style guide so difficult to structure.

对于任何一个用户组，都会在项目开发的过程中更替使用规范。开始与概念上的设计，但快速的移动到一个角色和详细的参考规范。正是这些混合的需求使得规范的结构难以确定。

There are two other user groups whose members often overlap with the groups listed above:

这儿有两组用户会与上述的用户交迭。

Ø Creators of the Style Guide. The group that creates the style guide needs to be able to manage this process. This includes a need to have a convenient way to review both individual sections and the entire guide, and a way to see an overview of the contents. The danger here is that because this group controls the guide, their needs will take precedence over the needs of the longer-term users.

规范的创建人员。规范的设计人需要能够对过程进行控制。包括有一个便捷的方式来回顾单独的选择以及全局的规范，以及一个察看整体内容的方法。风险是：这类用户控制着规范，他们的需求可能优先于其他的所有人员。

Ø Modifiers of the Style Guide. Any user may also fall into a group of people who want to request changes or extensions to the guidelines. To meet this need, there must be a plan for maintaining the guide over time. The danger here is that this need will be ignored entirely or only given lip service. This is especially true if the group creating the style guide feels embattled.

规范的修改人员：所有的人员都可以作为要求修改规范或扩充规范。对于这些需求，就需要将规范不断的修改。风险是：这些需求可能会忽视全局或一些无用的服务。当规范的创建人员感到困难重重的时候这种情况就很有可能发生。

1.1. CREATING AN EFFECTIVE STYLE GUIDE（创建一个有效的规范）

To be effective, a style guide must not only contain good guidelines, it must be used and accepted. The process in this case may be as important as the actual product.

要想有效，规范不仅仅包含一个好的指导方针，它同样要被使用并遵循。这个过程与实际的开发过程同样重要。

1.1.1. Process（过程）

It is impossible to prescribe a single process for all of the organizational and political contexts in which a style guide is created. There are, however, some general approaches that can be applied.

难以为如何创建规范规定唯一的处理过程。但可以采用一些常规的方法。

Ø Start early（尽早开始）

This is especially true if the style guide is supporting (or an outgrowth of) a current design effort. If you wait until the design is nearly complete to begin assembling the design guidelines, you miss the opportunity to have all design stakeholders invested in its creation and content.

如果你想在设计接近结束的时候才开始规范的编写，你将失去将所有的设计应用的机会。

Ø Make the emerging work widely available（？）

This is an important aspect of building broad supp