三月的蚁穴

刚在Ajaxian上看见的，一个展示了CSS 改变网页表现的Gif动画，挺有意思。

今天突然想到Google Reader的另一种玩法，就是合 烧。原理很简单，就是因为Google Reader提供把Starred、Shared以及某一Tag的文章生成单独的RSS，所以这个RSS地址就可以作为合烧后的RSS地址啦，如果想来个 永久的，可以再用Feedburner烧一次！那我的ajax tag举例，具体方法如下：

订阅Ajaxian、AjaxBlog到Google Reader
给这两个feeds都标上名为“ajax”的tag
在Settings > Tags里把ajax设为public
复制“view public page”里的链接，这个链接就是你合烧后的RSS地址啦！！
这一步是可选的，即把这个地址在Feedburner里再烧一遍，生成一个永久地址。

今天在看Google Reader的代码时发现有这么一段：
<!–[if IE]>
<link href=”/reader/ui/1353527812-scrollIE.css” type=”text/css” rel=”stylesheet” />
<![endif]–>
<!–[if IE 6]>
<link href=”/reader/ui/3030724210-scrollIE6.css” type=”text/css” rel=”stylesheet” />
<![endif]–>
一开始还以为是HTML注释，后来仔细一看不是，于是google了一下，找到了quirksmode.org的一个页面。
原 来此物是一种叫“条件注释”（Conditional Comments）的东东，这是一种只在Windows下的IE上被识别的注释，从IE5开始支持。这就是说，被定义于其中的东西只在IE下被识别，这就 成为了一个很好的跨浏览器样式一致解决方案。下面是其详细的语法：
<!–[if IE]>
在IE下显示
<![endif]–>
<!–[if IE 5]>
在IE 5下显示
<![endif]–>
<!–[if IE 5.0]>
在IE 5.0下显示
<![endif]–>
<!–[if IE 5.5]>
在IE 5.5下显示
<![endif]–>
<!–[if IE 6]>
在IE 6下显示
<![endif]–>
<!–[if IE 7]>
在IE 7下显示
<![endif]–>
<!–[if gte IE 5]>
在IE 5及更高版本下显示
<![endif]–>
<!–[if lt IE 6]>
在IE 6一下版本中显示
<![endif]–>
<!–[if lte IE 5.5]>
在IE 5.5及一下版本显示
<![endif]–>
<!–[if gt IE 6]>
在IE 6以上显示
<![endif]–>
此外，还提供了另外一种方法——注释标签（Comment Tag）。即在Windows和Mac的IE中支持一种非标准的标签：<comment>，包含于这个标签内的内容在IE下将被解释为注释从而无效，而在非IE浏览器中会将comment标签忽略从而使里面的内容有效。

没有找到在那里可以注册Beta用户，不过还是先来看看这个扩展（extension）吧！
Firebug是一个能极大提高web开发和设计人员的Firefox扩展，可以查看和临时修改HTML源代码、查看CSS定义、调试JavaScript脚本以及查看DOM和Event等等，目前版本是0.4.1。经过好几个月的沉默，前一阵他的作者Joe Hewitt终于说要开始下一个版本的开发了，并且说这将会改变我们开发网页的方式。
今天，他的Blog上贴出了对Firebug 1.0的介绍，还弄了新网站：http://www.getfirebug.com。 看了一下介绍和截图，感觉确实很爽！那个Monitor network activity功能好像很不错，还有对每个模块的改进都很大，看来有了这个，针对web设计开发的Firefox插件就可以减少到两个了，一个这个，一 个是Web Developer。但是还不确定这个是否能取代Venkman。
好了，感兴趣的就快去看看吧！还有一个Firebug的Google Group。

JavaScript中提供获取HTML元素位置的属性：

HTMLElement.offsetLeft
HTMLElement.offsetHeight

但 是需要注意的是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢，前一阵找到的一个比较好的函数，分享一下：
//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
其原理就是利用HTMLElement.offsetParent属性，如果当前元素的父元素不是空（null），则在原本的offsetTop基础上加上当前的offsetTop，然后继续获取父元素的父元素的offsetTop，再将其加之，最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。

Jesse James Garrett将Web分成了两个层面：超文本内容的载体（hypertextual information space）和网络应用的用户界面（remote software interface）。其实几乎每个网站或多或少都会兼有这两个层面的部分，只是比重不同罢了。工具类网站，比如Gmail、LinkedIn，它们更多地是以网络应用的用户界面形式出现的；而内容性网站，比如新浪、Microsoft.com，更多以内容载体的形式出现。而还有一些介于中间的网站，比如FaceBook、豆瓣等等，他们自身是一个网络应用工具，但却也是内容的载体，而这些内容并不是由网站创作，是用户通过使用网站创建出来的。
其 实这两个层面在一个网站中所占比重不同，会对网站界面的风格产生很大影响。越工具化的网站界面应该越干净，就是说非功能性的内容以及和当前操作无关的东西 应该尽量地少。而内容性地网站却应该尽量在一个页面中把所有用户当前需要了解的信息全部呈现出来，因为页面跳转是有成本的。
前一阵因为工 作关系一直在尝试FaceBook，对它的交互设计着实佩服！很多细节设计使得用户在使用是感觉很舒服，而且还很有意思，特别喜欢它的Poke功能以及 Poke的icon。但是，作为一个有社区性质的网站，FaceBook过于个人化的设计可能会使用户无法得知外界发生着什么。
比较来说，更喜欢豆瓣的设计，和FaceBook类似，用户界面也很简洁，能第一时间把需要的信息呈现给用户，没有旁枝杂叶，不需要为不相干的事情去分心。而与此同时，又能够感受到整个社区其他用户的存在和活动，对于一个沟通导向的网站来说这一点对用户体验很重要。
说到底，用户界面的设计也好，信息架构的设计也罢，最重要的是给用户需要的，把不需要的暂时先藏起来，当需要时，再拿出来。

大概6年前在变形金刚中国联盟上看见的。后来自己机子格盘了，变盟上也没了。昨天终于在百度图片上给搜到了（Google Images上没找到）。当时还有一张Q版博派全家福，是未上色版的，彻底找不到了。如果哪位好心人有存着，麻烦发我一份吧，多谢啦！！

现在Podcast真是越来越流行了，而且很多blogger自己也开始了自己的podcast。一直以来都用Google Reader来阅读RSS，每天上网最先打开的一定是Gmail和Google Reader，但对于Podcast，因为自己在用iPod，所以必须打开iTunes才能开始下载pods，真希望Google Reader也加入Podcast功能，直接订阅到Reader里，而且可以在Reader里直接播放，那就方便多了！
音频podcast可以用Gmail里用的那种mp3播放技术，视频podcast可以用Google Video的技术，嗯，还不错。
此外就是真希望可以直接在Gmail阅读Reader，其实Gmail对Google产品的整合空间很大，比如Reader、Notebook、Blogger。不过可能会造成应用负担过重。呵呵，留着Google去权衡吧。

在编写JavaScript时候，无论项目大小，都应该对所有*.js文件就行管理，尤其是面向对象的项目中。应该如Java一样，将每个类独立出来。但有个问题是JavaScript不支持脚本导入，这使得这个工作变得非常麻烦。
目前我找到了两种方式来做这个工作，即在JavaScript中模拟出import指令的功能。

XMLHTTPRequest对象 + eval();
创建<script>标签以及src属性

两种方式各有千秋。dojo中实现了两个方法：

模拟import的dojo.require();
模拟package的dojo.provide();

研究了一下代码，不过还是没弄明白它是怎么来实现这个dojo.require()的，不过应该可以肯定的是它没有使用创建<script>的方法，因为在生成的页面中没有额外的<script>。
前一阵把神奇一刻的JavaScript都规整了一下，建了个DisneyBox类和众多的子类，脚本的导入使用了创建<script>的方法。那么现在就分别介绍一下两中方法吧，其实都是很简单的一些技巧。
XMLHTTPRequest对象 + eval()函数
这种方法的原理如下：

利用XMLHTTPRequest对象把*.js文件以文本方式加载进来，并保存在responseText中
使用eval()函数将responseText中的文本转换成JavaScript脚本

这样做的好处是载入的脚本立即可以执行，但有可能会遇到很多eval()函数的问题，并且不能跨域引用。
创建<script>标签
原理如下：

用document.createElement(’script’)方法创建一个script元素
设置script元素的type和src属性
将此script元素用appendChild()方法添加到HTML文档中

这种方法的好处是能够比较安全的导入脚本，不需要再利用eval()来解析，但这样会在HTML中引入过多的文件，而且会有其他一些问题。
这里还有一篇很值得看的文章：Qomolangma实现篇(一)：内核载入模块system.js的实现。对这两种方法做了更详细的叙述。
在JavaScript 2.0的提案中引入了package的概念，而且提供了package和import指令，拭目以待它的实现吧。

前几天在弄公司的统一线上规范，其实就是用户界面元素的统一。感觉这个东西对于一个拥有自己网站的企业 ，尤其是对于互联网公司来说太重要了。

首先，用户界面元素要符合企业的整体视觉识别（VI），是企业VI以及企业文化的体现。就拿英国石油（BP or bp）的www.bp.com来说，它的用户界面元素都强烈渗透着企业VI，而且完全统一：

所有链接都用了和logo最外层的绿色（#009D32）很接近的安全色（#009900）；
按钮背景色同样使用了这种绿色；
二级标题都采用了和logo第二层颜色（#B0C512）很接近的安全色（#99CC00）；
当航元素的背景采用了和logo第二层比较接近的安全色；
需要突出的部分，背景使用了和logo第三层颜色（#FEEA11）非常接近的安全色（#FFFF00）。

其他地方还有很多类似的，使得整个bp.com虽然没有用过多的icon之类的来修饰，但是整个网站仍然显得很丰富，而且感觉很清新，和bp清洁能源、重视环境宣传都非常吻合。
其次，用户界面元素要有统一的规范，即完成相同任务的元素应该用相同的表现方式，这样使得用户只需要一次学习时间。这个表现方式应该包括三个方面：

视觉设计，即用户不通过任何操作，直接从元素的颜色、修饰、图标等等方面就可以看出其作用。比如Google把其所有的Tags（或者叫Labels）都使用了相同字号、相同字体和相同颜色；
交互设计，即用户在激活该元素时会得到的来自计算机的反馈。比如很多网站的链接都使用了鼠标滑过时链接文字加下划线、Flickr统一的直接点击文字来编辑的交互方式；
信息设计， 即对功能的文字描述，使得用户更容易的去理解。这一点在很多网站按钮文字的定义上表现得很明显，比如“提交”这个功能就会跟随着其具体功能发生不同变化， 但有些变化的确时不必要的，例如在按钮上加上“马上加入俱乐部”，倒不如只用“创建俱乐部”或者干脆就是“提交”，因为用户在填写表单时已经很明确自己是 在创建俱乐部了，除非创建一个俱乐部需要两步以上，否则最好不要增加用户的思考。

用户界面元素统一在实际的执行过程中会遇见很多问题，比如人员的调动、文档不够清晰、项目进度的调整、版本的更新、公司策略的调整等等。不过还是有很多成功的案例，比如Google的Rich Text Eidtor，包括Gmail、Docs & Spreadsheets等都在统一；www.bp.com也是一个成功的例子。