2006年11月 的归档:

LOST的50大未解之谜

热播的美剧LOST再次告一段落了,下一集,也就是第三季第7集要到明年2月份再播出。从第一季到现在未完的第三季,LOST已经给观众留下了太多的悬疑。著名娱乐网站IGN.com上贴出了一篇文章,IGN’s Top 50 Lost Loose Ends,列举了50个LOST给我们留下的最大谜团。看看和你的迷惑有多少相重呢?

CSS的力量

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

用Google Reader做合烧

今天突然想到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里再烧一遍,生成一个永久地址。

另一种针对IE下的CSS解决方案

今天在看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标签忽略从而使里面的内容有效。

Firebug 1.0开始Beta了

没有找到在那里可以注册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获取元素在浏览器画布中的绝对位置

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类似,用户界面也很简洁,能第一时间把需要的信息呈现给用户,没有旁枝杂叶,不需要为不相干的事情去分心。而与此同时,又能够感受到整个社区其他用户的存在和活动,对于一个沟通导向的网站来说这一点对用户体验很重要。
说到底,用户界面的设计也好,信息架构的设计也罢,最重要的是给用户需要的,把不需要的暂时先藏起来,当需要时,再拿出来。

一张很久以前的变形金刚Q版狂派全家福

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

觉得Google Reader应该加入Podcast功能

现在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中实现脚本import指令

在编写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指令,拭目以待它的实现吧。