开发者感兴趣的IE8 beta1的七大改进

2008年3月9日 没有评论

微软在MSDN IE blog上列举了开发者感兴趣的IE8 beta1的七大改进,其中包括CSS2.1的完整支持,HTML5的支持,内置开发工具等。beta1主要是提供给开发者体验使用的,普通用户更适合beta2。
文中还提到,稍后就会发布德文和简体中文版的IE8 beta1,但是没有公布具体日期。

1.我们的目标是在IE8正式版中提供完全,完整的CSS2.1支持.(还没完成,Beta2会有更多)
2.我们为W3C CSS工作组贡献了超过700个测试用例.
CSS的说明很好,但是有很多歧义的地方.我们认为一个广泛的验证测试套件对CSS很重要,对web开发者和设计者都有帮助.这些测试用例跟其他W3C的测试用例一样是基于BSD授权许可的.
3.我们提供了更好的脚本性能.
4.我们已经开始提供HTML5的支持.
5.我们提供了很棒的内置的开发工具(developer tools).(同样还没完成,会有更多)
6.我们提供了“Activities.”方式,可以让web服务更好的整合到用户的工作中.
基于微软的开放格式承诺,我们已经提供了OpenService的格式说明.
7.我们提供了“WebSlices.”方式,可以使web服务能够更容易让用户的注意力集中到网页中感兴趣的部分.

原文链接:http://blogs.msdn.com/ie/archive/2008/03/05/internet-explorer-8-beta-1-for-developers-now-available.aspx

IE8如何定义浏览器工作模式避免网页显示混乱

2008年3月9日 1 条评论

随着IE8 beta1的发布,发现连sina有显示问题,查了一下,在一位大大的blog上找到了原因,“由于 IE8 对标准的“良好”执行,当 XHTML 文档使用 Transitinal 类型时,会自动选择 Quirks 模式,即 IE5 的模式来解析,所以也就不难理解为何大多数站点会遭遇显示问题了”

 如何处理该问题呢?方法如下:

1. 将文档类型改成 Strict。也就是将

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

改成

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

2. 该完之后如果还没有解决问题,那么只好强制声明了,在 </head>结束之前加入

<META http-equiv=”X-UA-Compatible” content=”IE=8″ />

如果需要工作在 IE7 Strict 模式下,改成 IE=7.

这样一来,破相的问题就基本解决了。如何查看 IE8 的工作模式呢,在 IEBlog 的留言中有解答,执行 javascript:alert(document.documentMode);,返回 5,说明工作在 IE5 Quirks 模式下;返回 7,说明工作在 IE7 Strict 模式下;返回 8,说明工作在 IE8 Standards 模式下。

引用:http://www.wp-theme.cn/2008/03/07/ie8-layout-mode/
IE blog 原厂资料:http://blogs.msdn.com/ie/archive/2008/03/06/the-default-layout-mode.aspx

高效率网页设计的十大军规

2008年3月7日 没有评论

原文出处:http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

版权声明:本文版权归原作者所有 译文仅供国内读者参考

    决定一个网站成败有时候并不是样式设计,而是可用性和易用性。对于一个页面的访问者来说,他所做的只是点击然后决定下一步要做的事情,因此以用户为中心的设计思路已经成为了业界定义成功设计的事实标准。当然,如果没有任何提供给用户的功能,这个标准也不复存在了。

    我们不打算深入探讨关于可用性的实践细节(比如搜索框应该放置在页面的什么位置)因为已经有相当多的文章就此做了深入的阐述,我们将重点介绍一些核心法则、启示,合理的使用这些法则,能使你的网站更加成熟,展示的内容更容易让用户理解。

请注意:

    为了能够正确的使用这些法则,首先我们需要知道用户是如何和页面进行交互的,用户是如何思考的以及用户的常见行为是怎样的。

用户如何思考?


    基本上,一个网站的用户习惯和一个商店的顾客用户习惯没什么区别。用户快速地浏览每个新页面,从页面文字中找出第一个使他们感兴趣的或者和他们正在寻找的东西类似的链接并点击。因此,事实上页面的大部分内容,用户根本没有注意过。    用户总是在那些看上去可能的链接中寻找他们感兴趣并能点击的链接,然后点击。如果内容不是他们想要的,他们会立刻点击“后退”按钮并继续搜寻他们想要的内容。

  • 用户偏好质量和可靠性 如果一个页面提供给用户以高质量的内容,用户将能够接受页面上的广告和站点的设计。这就是为什么有些站点内容质量很高,但是设计的很糟糕,依然有着很高的流量的原因。内容远比支持它的设计来的重要。切记。
  • 用户并不会细读,他们是浏览 分析一个站点,用户始终在寻找一些锚记(译注 fixed point 内容节点)来作为页面内容的导航员。scan.jpg 

                      (图1 图上的热点标示了用户的阅读集中在句子的前半部分)

  • 网站用户是急切并强烈要求迅速满足需求的 非常简单的法则:如果一个站点不能满足用户的期望,那这个网站的设计师就是不称职,这个公司也将失去很多挣钱的机会。认知负载越高,直观导向越少,用户越是会放弃该站点来选择另一个网站来代替。
  • 用户并不会做最佳的选择  用户不会为了搜索他们想要的东西而去寻找最快速的方法。他们不会从上至下的一段段看下去来寻找他们想要的东西。取而代之的是能够满足他们需求的第一个选择。当他们看到第一个看上去能够满足他们需求的链接,他们就会在第一时间点击。所以,从全部内容中找出最优的链接耗时太多,也太累,寻找满足需求的看上去更有效率。[video] froogle.pngscanpath.jpg 

                    (图2 图3  这两幅图片展示了线性阅读在网页浏览中是不适用的)

  • 用户跟从的是他们的直觉 大多数情况下,用户不会认真去看设计师提供的内容,根据Steve Krug(Don’t make me think 作者)的说法,主要原因是用户根本不在乎这些。
  • 用户希望拥有对浏览器的控制 用户希望能够控制他们的浏览器,并且信赖从始至终提供一直内容展现形式的网站。比如,他们不希望自动弹出的窗口,和随时能够通过“后退”按钮回到他们先前浏览过的网页,所以,一个非常重要的准则就是“不要在新窗口打开网页”。(译注:这点上,中国的用户的操作习惯恰恰相反,比如谷歌就不得不改成在新窗口打开,另外,在web标准中<a>标记的target属性是被废弃的,也是基于这个原因。

  

1. 别让我思考


     根据Krug的可用性第一军规,网页必须是清晰且自说明的。当你开始创建一个站点是,你的首要职责就是让网站摆脱“问号”—— 用户的决定应该是在赞成,反对以及替代者中自觉地做出的选择。         如果一个站点的导航和站点架构不够直观,那这个网站中的“问号”将会越来越多,并且会让用户很难理解这个网站如何工作和如何才能够A点到B点(即功能的导向很模糊)。一个拥有适当的可视化导向线索和很容易理解的链接的网站结构,将能有效的帮助用户找到达到他们目标的路径。

beyondis.png   

    让我们来看一个例子 Beyondis.co.uk 的口号是”beyond channels, beyond products, beyond distribution”。 这是什么意思呢?因为用户多数情况下采用“F”-pattern 来浏览一个网页,这3句话将是用户在这个页面上第一眼看到的内容。尽管该设计本身非常的简洁而且直观,但是这个页面的主题是什么,用户必须去网页中寻找答案。这是一个完全没有必要的“问号”。对于设计师来说,必须让这样的问号数量为0。将左右页面的内容互换一下,将大大提高可用性。ee.png   

     ExpressionEngine 这个网站使用了和Beyondis类似的页面结构,但是避免了前者存在的“问号”。而且,网站的标语本身具备了功能性,用户可以直接在这里尝试提供的服务和下载试用版本。    通过让用户很容易就能理解系统提供的内容,将有效降低用户的认知负载。当你有过一次成功经历后,你可以和用户沟通,看看系统给用户提供了什么,是什么让他们受益。如果用户不能在你的网站找到他们想要的内容,他们是不会使用你的网站的。

阅读全文…

Lighttpd下的Wordpress FriendlyUrl(友好链接 永久链接)配置

2008年3月3日 没有评论

WordPress本身有着非常出色Friendly Url功能,能够让文章的URL变得非常友好,也非常漂亮,甚至可以变得非常Rest。但这只是针对最为流行的Apache Server而言的。

 友好链接的实现无外乎是url_rewrite,对于apache来说,它会自动生成.htaccess文件来配置规则,非常的方便。但是恰好我选择的Lighttpd作为我的web server,主要是考虑RoR的应用部署起来效果会更好一点。简单整理了一下需要重定向的URL,可能会有遗漏,如果您发现了,不吝告我一声。

url.rewrite = (

“^/blog/feed/(feed|rdf|rss|rss2|atom)/?$” => “/blog/index.php?&feed=$1″,

“^/blog/(feed|rdf|rss|rss2|atom)/?$” => “/blog/index.php?&feed=$1″,

“^/blog/page/?([0-9]{1,})/?$” => “/blog/index.php?&paged=$1″,

“^/blog/([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/([0-9]+)/\?image=([0-9|a-f]+)$” => “/blog/index.php?image=$5″,

“^/blog/(.*)/([0-9]{4})/([0-9]{2})/(.*)\.html$” => “/blog/?name=$4″,

“^/blog/tag/(.*)$” => “/blog/index.php?tag=$1″,

“^/blog/([0-9]{4})/([0-9]{2})/([0-9]{2})$” => “/blog/index.php?m=$1$2$3″,

“^/blog/([0-9]{4})/([0-9]{2})$” => “/blog/index.php?m=$1$2″,

“^/blog/category/(.*)$” => “/blog/index.php?cat=$1″,

“^/blog/about$” => “/blog/index.php?pagename=about”

)

参考:http://blog.kangkang.org/wordpress/index.php/archives/15

Vista系统安装优化备忘

2008年2月14日 1 条评论

我们的Vista装机手册 (thinkpad)

  1. 装vista (切记一定要在BIOS里面把ATA的设置改为AHCI后再装, 否则讯盘安装会有问题)
  2. disable UAC
  3. relocate my document, desktop,temp folder,vitural memory to non-system driver,
  4. 关闭所有分区的系统还原
  5. 关闭Volume Shadow Copy服务
  6. 关闭所有分区的 磁盘清理 计划任务
  7. 关闭Windows Search服务 Windows Definder
  8. 更改安全中心通知方法(不通知)
  9. 打Windows patch(Windows Update)
  10. 装IBM System Update 装软件 打patch
  11. Enable ReadyBoost  ReadyDrive
  12. 优化系统 (待细化) 回收站确认关闭,资源管理器显示扩展名…
  13. Enable Vista Aero,破解主题,换主题
  14. 装常用软件
  15. 用Upiea免疫流氓插件
  16. 选择性删除备份驱动: C:\Windows\System32\DriverStore\FileRepository 大约1G (略过)
  17. 删除电视录制实例文件: C:\Users\Public\Recorded TV\Sample Media
  18. Tortoise SVN Setting: Look and Feel -> Icon Overlays -> status cache -> Choose Shell
  19. 修改电源属性,盖上盖子不做任何事情
  20. 装好launchy后隐藏桌面鼠标 

阅读全文…

CSS Float 基本概念汇总

2008年2月9日 没有评论

The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers.

Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的。
Still, if you take a closer look at the float theory, you’ll find out out that it isn’t that complex as it appears to be. Most related problems are caused by the older versions of (take a guess) Internet Explorer. If you know the bugs, you can control the way information is presented in a more sophisticated, profound way.

如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的(我只是猜想^_^)。如果你知道这些bug,你就能避免这些问题。

Let’s try to tackle the issue and clarify some usual misunderstandings, which always appear once floats are being used. We’ve browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats.

让我们尝试去解决这些问题并澄清一些以前使用浮动的误解。我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的问题。 Update (01.05.2007): our comment form returns some strange mistakes. We’re working on it. Sorry for inconvenience.

What You Should Know About Floats

你需要了解的关于浮动的一些概念


“The practice of flowing text around an image goes back a long, long time. That’s why the ability was added to the Web starting with Netscape 1.1, and why CSS makes it possible using the property float. The term “float” refers to the way in which an element floats to one side and down, as described in the original “Additions to HTML 2.0″ document that accompanied the release of Netscape 1.1.”“关于图文围绕的实践可以追溯到很久很久以前。这也就是为什么从Netscape1.1开始这个功能被引入浏览器,以及为什么CSS使用浮动属性来实现它。‘Float(浮动)’这个术语引用自伴随Netscape1.1一同发布的‘Additions to HTML 2.0’文档,描述一个元素浮动至某一侧并停下的表现方式。”[Containing Floats]

“A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. […] When a box is taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it.”

“浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。” [Float Positioning]

阅读全文…