样式之美 - 正在消失

Safari显示网页字体为超级无敌难看的宋体的原因

aoao — Sat, 19 Apr 2008 19:58:17 +0800

这两天终于忍不住的去实验了一下，为什么网页的字体有时会显示成超级无敌难看的宋体呢？其实宋体不难看，难看的只是把它放在Leopard下，没有点阵的效果，12px的宋体真的让人受不了。
Safar for mac中文版显示网页字体为宋体的原因：“Serif”字族，当下面几种情况都出导致出现神奇的宋体（自己改过浏览器的默认字体的同学不算）

样式没定义到font-family（浏览器默认是Times，属于Serif）
定义的字体系统没有，而用Serif标明字族 -_-b
第一个中文字体是宋体()-_-b

更神奇的地方是当定义到的英文字体不属于Serif的话，也会用华文细黑。
原因找出来了，解决的办法自己就有了，

写邮件跟XX网站的管理员教他们修改，见一次写一次，希望下次打开时可以不用看到宋体，这样可以造福苹果教徒。（怎听起来那样不靠谱呢！挖哈哈）
打开Safari偏好设置 » 外观 » 标准字体重新选一个自己喜欢的。

顺便介绍一下网页上常见的字体族科：

Serif（如Times、Georgia、New Century Schoolbook等）：不等宽，边角和笔画结尾处有衬线修饰；
Sans-serif（如Helvetica、Geneva、Verdana、 Arial、Univers等）：不等宽，边角和笔画结尾没有修饰；
Monospace（如Courier、Courier New、Andale Mono等）：等宽字体，可以有修饰也可以没有；
Cursive（如Zapf Chancery、Author、Comic Sans等）：花体字；
Fantasy（如Western、Woodblock、Klingon等）：其他类

类型为search的input及相关属性

aoao — Sat, 05 Apr 2008 17:34:21 +0800

其实在很久很久之前就发现search类型的input，该属性值是WebKit私有，不过一直没去查相关的属性，介于XXX原因，我找出其属性，回头考虑在其他浏览器上也实现这样的效果。表扬一下Yupoo，他们上次改版就使用上介个。

如果你使用的是Safari(iphone上的不一样，不过会Go按钮会变成Search)或者是其他WebKit引擎的浏览器的话，你就可以看出下面这个input与其他的不同了。

看不到的朋友可以看一下图片：

看一下相关的代码：

<input type="search" placeholder="测试搜索" autosave="aoao.org.cn" results="8" >

相关的说明，就几个属性的介绍，比较简单，没有译了中文，大家看看就是，其实不用看也要以猜得出。

The incremental attribute can be used to control whether or not the search is performed as you type.

The placeholder attribute can be used to set the greyed placeholder text in the control.

The autosave attribute allows you to specify an autosave name for your search results in the dropdown. What’s cool about the autosave is that it’s global, which means that two Web sites could put up a search field with an autosave name of google and then they would share the search results. (Since the actual result values are not accessible to the page there is no privacy violation.)

The results attribute allows you to specify how many results should be displayed in the dropdown.

The search DOM event fires at the precise time the search should be performed and obeys the heuristic for the control, so you don’t have to trap key and click events at all. You can use the onsearch attribute on the control to respond when the search happens.

BTW：CSS Naked Day差不多到了，今年改在9号，有兴趣的朋友凑凑热闹。

IE8的WebSlices

aoao — Sat, 08 Mar 2008 03:36:19 +0800

这两天M$出了个IE8beta1版~害得我的Google Reader里全是IE8的信息，可惜有用的信息太少了，在翻M$的网站时，倒是发现了一个比较帅的功能：“WebSlices”。

简单的来说，它的功能就是把网页的某一块“剪”出来放收藏夹里。这个功能与Mac OS上的Web Clip Widget性质不大一样，Web Clip是由用户自由剪网页，而WebSlices是要网页输出特定的格式可以“剪”的。如果你已经装了IE8的话，来我的站上逛下，应该可以看到这图片里的效果：

是不是感觉很无聊滴样子，当然，是在blog上是没什么特别的效果。M$介绍了个应用：ebay的IE8特别版，比如把某个正在拍卖的商品剪出来就有意义了。实现的方式其实很简单，只要指定HTML的class与ID就行，看一下列子：

<div class="hslice" id="testWebSlice">
<p class="entry-title">传说中滴标题</p>
<div class="entry-content">传说中滴可以被剪的内容</div>
</div>

是不是看到entry-title和entry-content感觉有点熟悉呢？嗯，就是Microformats的hAtom，那些差点给人忘记的东西给M$翻出来用了。其实我的Blog一直渗着hAtom的约定，只是所有渗着hAtom的内容却不适合WebSlices，要注意的一点点就是，ID不能少。-_-b 介于M$IE比较强的特点，ID可以用数字，人家官方的例子就是用数字当ID。

测试传说中滴标题

可以用IE8来测试一下能不能把这传说中滴内容剪出来

除了设置要剪的内容话，还可以设置过期的时间，比如：

<p>End time:<abbr class="endtime" title="2008-02-28T17:00:00">1 day 18 hours</abbr></p>

跟Microformats一样的用法，不过选的class是endtime而不是dtend。当浏览器发现过期时会显示过期的标记。

同时也可以用跟RSS一样作用的ttl来定最长缓存时间，比如：

<p>This clip updates every <span class="ttl">15</span> minutes </p>

你甚至可以用Feed来重定向被剪的内容，只要在entry-content中加上：

<a rel="feedurl"href="auction.microsoft.com/item.xml">Subscribe to WebSlice</a>

M$的白皮书少了个“h”，href跟ref是两回事，完全就是在欺骗我的感情。白皮书中说到要在Feed中加上一些特定的元素来指定ttl endtime等属性，不想再复制代码了，有兴趣的同学查书去。

同时可以指定默认的WebSlices，只要在head里加上：

<link rel="default-slice" type="application/x-hatom" href="www.example.com/#auction" />

也可以控制WebSlices在网页里不出现剪切的提示，在head加上：

<meta name="slice" scheme="IE" content="off" />

白皮书中还有一些关于样式的有效范围和一些认证跟其他一些东东，有兴趣的朋友可以看一下：Internet Explorer 8 Beta 1 Whitepapers - Release:WebSlices

常见系统中文字体的英文名

aoao — Sat, 01 Mar 2008 03:59:57 +0800

因为神奇的中文有时也是会遇到国外同学都不知道原因导致一些神奇滴问题，所以要用更神奇的英文来解决问题。

Mac OS的一些：

华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light

Windows的一些：

新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei

装Office会生出来的一些：

隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

参考资料：[chinese mac] Fants

Silverlight讲座的一些记录

aoao — Fri, 25 Jan 2008 02:51:26 +0800

前两天有幸去听了一个关于Silverlight讲座，了解了一些Silverlight相关的东东，记录一下。

Silverlight相比flash的一些优点：

视频更优秀，演示的基本全是视频
事件可以传到浏览器的DOM
不是浏览器级的支持，而是操作系统级的支持
动画实现物理特性更简单一点

缺点呢？他在浏览器里做的东西Flash多数都能完成，而且很东西都没有Flash成熟，找不到一个比较合适的理由来用它，再说，Silverlight对很多人来说是个陌生的东西。

讲座还带给我们半个好消息跟半个坏消息：Vista Sp1不捆绑Silverlight发布，但是，这两天的Silverlight将通过Microsoft Update安装的Windows却没包括Vista让我感觉这消息不靠谱，或者他们还没想好。

又据说，Silverlight以后会支持手持设备，不过时间保密。不知道到时能不能支持手持设备里的浏览器，T_T 我居然忘记问这样重要的问题。

又又据说，Silverlight在三个月后将大占市场，可是我怎感觉听起来那样不靠谱呢？个人感觉现在Silverlight太不成熟了，现在是1.0，就算1.1改成2.0距离beta还有段时间，而flash呢，毕竟已经走了这样久的路了。而且，我不认为createSilverlight()（Silverlight是用JS创建的）会比用Object更友善。

演示的一个例子http://tvdeep.mnet.com/　＝．＝刚进去是flash，只有点进去的的视频播放（例如这个）才是Silverlight做的，我一开始还以为全是Silverlight -_-b 这个说明了什么呢？

当然，现场还演示了几个不错的视频应用，比如NBC要用来转播奥运虽然未完工的作品。

附讲座一些我问的问题：
问：我看了刚才的演示，感觉浏览器比较卡，是不是Silverlight比较占用资源呢？
答：因为我用的是Silverlight的测试版跟IE8测试版，所有效果可能比较有点问题（好像据说演示的机子2G内存，跑Vista开Aero一点也不卡的样子，顺便挖一下，终于见到IE8，真想上去摸它一下。我这两天试用了Silverlight1.0 1.1的一些例子，复杂动画好像还是比较占用资源，并不比flash低）
问：刚才演示的都是一些视频的例子，不知道在音频处理上是怎样的？
答：你是说解码吗？我也不是很清楚。
问：不知道有没有音频的演示，直接让我们听一下效果。
答：不好意思，刚好没带相关的例子，你可以在网上看一下，或者我回头发邮件给你。（好像又据说是某公司的音乐频道邀请来介绍Silverlight）

Silverlight相关资源：

CSS Frameworks的概念

aoao — Mon, 21 Jan 2008 01:45:35 +0800

最近看到N多介绍CSS框架，前些天我说过一句话：“在我有限的视野里，还没见到可以真正可以称得上css框架的东东~”，当然也可能是我的视野太小了，或者是说世界太大了，我自己还是感觉还有一大堆我看不到的东西。

先来看一下一个我比较认同的概念：

框架可分为白盒(White-Box)与黑盒(Black-Box)两种框架。

基于继承的框架被称为白盒框架。所谓白盒即具备可视性，被继承的父类的内部实现细节对子类而言都是可知的。利用白盒框架的应用开发者通过衍生子类或重写父类的成员方法来开发系统。子类的实现很大程度上依赖于父类的实现，这种依赖性限制了重用的灵活性和完全性。但解决这种局限性的方法可以是只继承抽象父类，因为抽象类基本上不提供具体的实现。白盒框架是一个程序骨架，而用户衍生出的子类是这个骨架上的附属品。

基于对象构件组装的框架就是黑盒框架。应用开发者通过整理、组装对象来获得系统的实现。用户只须了解构件的外部接口，无须了解内部的具体实现。另外，组装比继承更为灵活，它能动态地改变，继承只是一个静态编译时的概念。

在理想情况下，任何所需的功能都可通过组装已有的构件得到，事实上可获得的构件远远不能满足需求，有时通过继承获得新的构件比利用已有构件组装新构件更容易，因此白盒和黑盒将同时应用于系统的开发中。不过白盒框架趋向于向黑盒框架发展，黑盒框架也是系统开发希望达到的理想目标。

再回头看一下现在网上那样多CSS框架（YUI是叫“YUI Library CSS Tools” 并非是“YUI CSS Frameworks”），有多少是真正以框架的概念在写，有多少只是定义样式基类的。当然，每个人对框架的理解不一定，你可能不认同我的说法。

再谈一下CSS 框架，并不非我不认可这个东西的存在，我从一两年前也就一直在尝试这样的东西。对于大型网站，前端的开发需要一个解决方案。框架自然是首选的。可惜距离我太远了，我太弱了T_T，我只要要求两点：

管理下面的内容的东西
类/组件

很明显，第一点，CSS做不到，第二点，相对其它语言很弱的说。

大约在一年前做一个中型网站时，我为了偷懒，我想到内容模块化，让程序员拼页面。大约方向也就是封装了一个又一个的功能块，程序员在要用到哪一块内容时就只要使用相应的HTML与CSS，大家都方便，我不要拼页面，他不用重复套代码，大家好才是真的好。

在同一个网站，差不多的内容块，多次使用是很正常的事，这也是就让模块化成为可能，比如一个图片列表，可能是用户头像列表，或者群组的图标列表，这时你会怎样写呢？相同的用这样吗？

.photoListUesr,.photoListGroup{ /*_*/ }

这样不是说不行，但如果突然说要再加一个相似的呢？这时可能就要调整样式。而我呢？尝试过这样的使用方式：

<div class="photoList UesrCt" />
<div class="photoList GroupCt" />

这样的话，我们一开始就分离出共同表现的东西，把.photoList当成原型，通处额外的class再去处理细节。前些天，我写了面向对象的XHTML与CSS编程，其实只写了一半，另一半是详细的例子，不过介于要做太多的例子跟核心已经写出来就没写完，^^ 当然，这样也存在一定的问题，就是最初的原型的定义要很慎重，要尽量做到以后就算是改版也可能不用修改。CSS这东西，基本上一个框架最多只能适合一个站，当然，如果这个站足够大的话，这样使用才是有意义滴。

HTML与CSS越是模块化，文件越分散这个问题就越严重。HTML倒是好办，反正是应用程序最终要合并输出一份，但CSS一般会给抛弃直接使用。如果在刚才的例子中，在网页导入CSS的方式是这样的话：

@import url(/xxx/photoList.css);
@import url(/xxx/UserCt.css);
@import url(/xxx/GroupCt.css);

那甚至可以考虑用程序来拼页面，但是使用方便，请求数也成正比，一般情况大家都会选择手动合并文件。虽然人脑比电脑更智能，但很多时候，人脑的计算能力是比不上电脑滴。我曾经有这样的想法，就是使用服务端程序来处理CSS的发布机制，大约方向就是通过网站访问日志来分析出整个站各种页面的使用量，通过程序来计算哪些公共使用的要合并，合并的顺序（CSS的文件顺序会影响到优先权），等等各种计算并压缩输出。

可惜的是，这样一套复杂的程序可能只适合一个站，或者同系列的站群。虽然说做起来有点折腾，但我相信门户级别网站使用这样的方式是有必要滴，当然前提还要整个团队都要使用相同的设计模式。

PS:以上CSS发布程序，只是我的幻想，还没尝试过，有兴趣的朋友可以尝试一下，如有意外，概不负责。^_^~

当然，就以上这些还是不能称得上CSS Frameworks，或许只能叫成一个系统级解决方案，毕竟，CSS只是描述性语言。

前晚跟月影一起吃烤鸭时，有聊到这个，他问我有没有前端一体化的解决方案。JS组件化时也会面临同样的问题，差不多的发布机制应该也可以适用JS。不过完全的一体化解决方案我还没想好，也许月影多请我吃几次烤鸭我就能想好。

广告一下：Ucren-widgets，国内一个不错的JS组件。

扩展阅读：CSS Frameworks + CSS Reset: Design From Scratch

PR终于地震了~总结一下一些影响因素

aoao — Mon, 14 Jan 2008 01:17:20 +0800

三月一次的PR地震最近震完了，虽然我并不在意PR，但做前端的，多少也得了解这东东。

我首页的PR从三个月前的没有跳到了5，首先感谢所有把PR分给我的朋友，T_T 虽然没有达到预期的6，不过好像也有很多人给震到5了。革命尚未成功，嗷嗷仍须努力。已经赏脸链接我的却指向我旧域名的朋友帮忙改一下。这次还发现一些比较奇怪的问题，就是我的blog的仍然是PR是0，pr的0跟没有完全是两回事，0是评价为0，没有是还没评价。这个0三个月前就有的，不知道是我倒霉还是辛运，刚换域名就赶上PR评定，而且好像就是变更PR那几天。

总结一下一些影响因素

301跳转可以跳转PR，不过可能要等三个月。
我的about 基本没有外链，这次却是4，自己站内的页面在这次更新前基本都没有PR，就算按更新后的pr来分，也不足够分到4，唯一的解释就是从旧米的5跳过来。
同时另一个就是首页，虽然不少高PR的站链到我这，不过估计超来一半的还是链着旧域名，T_T大家快换。
301跳的PR并非100%，也可能是0。
同一域名的301跳的pr 原地址还在，不同域名的会跳没。
我原玉米的6已经跳光了，虽然现在还有不少高PR的链向那，但现在是0。刚才抽样查了本站现在几个有pr的，有www跟没www都是一样的。
外链的PR算法并非网上流传的那个公式那样。或者说还有一些影响的因素。
比如：一个做得不错的网站或者blog程序，很多PR高的站用，几乎每个页面会链回自己，如果按那公式算，说不定会有PR20的。
内页链接有分PR，但不知道怎样算。
有人说LBS的blog的PR一般都比较高，那是因为LBS的评论的作者都链向自己的站（我猜的，因为我没用过）。我现在的首页链接的页面有一个是0的，不是没有，反正还是不懂。
PR更新前半个月的内容不分配PR。
这是本站的，但上次新域名在PR更新那几天出来却有分配到。不知道其他站的是什么样的情况。
重复内容特别处理。
我新米的blog目录可能就刚好赶上这事，之前因为要测试东西分在两台服务器上。
页面链接的对象也有关系
Google网站管理员指南第XX条：请不要参与旨在提高您的网站排名或 PageRank 的链接方案。尤其要避免链接到违禁的网站或”恶邻”，因为您自身的排名会受到这些链接的负面影响。前段时间不是有些买卖PR的站给处理了。
^^ 我的Blog可能给处理过，大家链我可要小心点。

以上为个人看法，也是本站更换过一次url之后又更换过一次域名经历过两次pr地震的一些记录，总的来说。pr的算法一直在变，为了防止大家作弊拉，这些信息也许在下次地震可能就没用了。不过我可以很负责地跟大家说一个绝对增加PR的方法：坚持原创内容，别刻意为了提高PR搞小动作。顺便说一下，别拿自己的PR去卖，好像最近有不少人真的把自己的站的PR给卖掉了。

如果你能看到这里还不知道PR是什么的话，那太好了，别去查了，现在的PR已经变质了，没有很大的意义。我的PR研究决定告一段落了，毕竟我不是专业从事SEO的人，知道大约是怎样一回事就行，过多的研究对我意义不大，还不如多记下点有意义的资料。

这个故事还告诉我一个道理，有事没事都别写什么blog拉，做个首页就行了，挖哈哈。

面向对象的XHTML与CSS编程

aoao — Fri, 11 Jan 2008 02:41:03 +0800

要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是，凡事都应该带着OO的思想来看问题，也勉强可以凑数拉。其实，早在零几年就有人提出了OO-style，不过已找不到。

那要怎样OO呢？现在大家都知道CSS是可以介样写滴：

.G_G { /* xxxxxx */ }

我们可以把它大约看一个原型，或者说成类，-__-b 好像本来就是类的样子，然后要在HTML里“实例化”一个对象，例如：

<div class="G_G">笨蛋嗷嗷</div>

该元素会使用上CSS相应的定义，但仅仅对应的class还是不够的，因为我们页面可能会多处应用到这个class，为了处理好“私有”的关系，把刚才的代码改成：

<div id="aoao" class="G_G">笨蛋嗷嗷</div>

这样的话，这个ID为aoao的元素就会应用.G_G这个类的定义，而且可以用#aoao{}这样的选择符来进去私有效果的定义，这样也不会影响到公共用的.G_G这个类，同时，#aoao定义的优先权会比.G_G高，符合私有定义比公共定义优先高的常理^^。

由于我使用了ID这个具有唯一性的东东，对这种私有定义后的东西复用就成了问题（一个ID只能在一个页面上出现一次，不知道谁说的，反正是真理）。如果我们要实现多个相同私有化的东东怎办呢？那我们就必须来实现“多态”。挖哈哈。再改一下代码：

<div class="G_G o_O">笨蛋嗷嗷</div>

一个是“G_G”，另一个是“o_O”，但是我们如果使用上.o_O{}也是可以定义到元素，假如CSS是这样的话：

.G_G {width:100%}
.o_O {color:#123456}

元素将都被定义到，而且由于定义不层叠，都会给应用。再假如代码是这样的话，不知道会不会更好理解。

<div class="layout color">不是笨蛋嗷嗷鸟</div>

.layout{width:100%}
.color{color:#123456}

接着，要来实现“封装”。子级选择符大家应该常常用吧，换代码：

<div class="G_G"><span class="bendan">笨蛋</span>嗷嗷</div>

虽然.bendan{}跟.G_G .bendan{}都可以定义，但是后者只能应用在class为“G_G”的元素，我们可以简单把.bendan{}理解成全局定义，把.G_G .bendan{}理解成局部定义，这样的话就有利于我们XHTML与CSS的模块化。^^传说中的“封装”出现了，再接着。

<div id="aoao" class="G_G o_O"><span class="bendan">笨蛋</span>嗷嗷</div>

这样的代码就可以产生无数的变化了，还不明白的从头看起。^^

其实，这些跟真正的面向对象还有很大一段距离，我只是在学标题党，不过可以用它来理解ID与class的应用。

JavaScript分层的概念与本地存贮

aoao — Tue, 08 Jan 2008 22:42:09 +0800

以前学了一个月的asp.net算没学，把三层结构的概念改改就套在JS上。^^，那JS要怎样分层呢？其实主要是多了一个页面级的数据库

表现层：处理UI呈现
业务逻辑层：除了上面跟下面的都算在这个里面。当然我不介意你再细分^_^
数据与数据维护层：JS存数据也不是一天两天的事。可有多少人在网页维护JS数据库呢？

为什么要给自己找麻烦呢，把本来简单的东西复杂化，要数据找服务器要，自己干啥还得维护多一份数据，多无聊。主要的原因是：

页面缓存数据，减少与服务端之间的交互。
页面缓存数据有什么意义，比如在不稳定的无线网络里，不是每个操作都去访问网络，也就不会有因为不稳定网络引起的一大堆乱七八糟的问题。
实现预加载，加快访问速度。
Gmail的新版本号称邮件一点就开，其实是在网络空闲的时候，把数据先当下来。我没去看Google那些恶心的代码。估计也是用JS构建一个页面级的数据库。
方便数据二次呈现。
变更数据呈现有个“本地数据库”来查询自然方便多了。挖哈哈

当然也有一些负面的作用。比如性价比没那样高，以前，我们从服务器要到数据后一般就直接或者转换一下innerHTML到界面，如果按这种方式就一定要多存份到“数据库”。去掉某些东西时也要去通知“数据库”。由于JS的受限，我们折腾了半天的“数据库”在刷新一下就干掉了。这不是折腾吗? 看看Gmail是怎样做的，虽然它也是一刷新就干掉，但它已经养成用户一种习惯了GMail是不用刷新滴，挖哈哈。

当然，我们还是比较贪心的。如果能再加上本地存贮的话，折腾就少了点。现在离线比较出名的算是google的Gears，不过我对它没兴趣，估计我做的产品的用户们没人听说过它，再别说会使用，好像最近也给GFW的样子。本地存贮如果要用的话，应该尽可能使用浏览器的原生技术。比如IE有userData、Firefox有sessionStorage，怎样用呢？石头老大写过一篇关于怎样操作的。当然也有人用flash来存东西，100K哦。

综合来说页面级的数据库并非适合所有的产品，个人认为最适合邮箱，或者某些后台管理、QZone等那些一个页面搞定一切的网站。当然这也不是空口说白话的，我已经在项目中一个模块尝试过。一点就开的感觉很爽滴~

使用浏览器侧栏的方式

aoao — Sat, 29 Dec 2007 03:16:26 +0800

现在的显示器是越来越宽，但是，一个页面能显示的内容并不非越宽越好，所以把浏览器的侧栏（这里的所说的侧栏并非指页面布局中的侧栏）也拿来用。

那用侧栏有什么好处呢？侧栏是独立的窗口，可以多赚点PV ^_^ ，如果是用IE或者Firefox的朋友点一下Music For Bloggers看一下效果。有没有用大家就自己衡量了，不同的应用的不同的价值，就看应用在哪里。

那怎样实现呢？

<a target="_search" href="http://labs.aoao.org.cn/bloggingmusic/" title="Music For Bloggers">Music For Bloggers</a>

注意到target="_search"没，在Web标准流行的今天target早就给人抛弃了，其实还是很有作用滴。不过支持的只是IE跟Firefox，虽然Opera也有侧栏，但我还没找在页面里把它打开的方式。Safari好像没有侧栏，也许有，不过我没见过，因为Safari会自动把页面的宽度当成窗体的宽度。

我记得以前IE还支持target="_mdiea"，可是。现在的测试却没效果。不管了，反正firefox也不支持。那么，怎样使用Opera的侧栏呢？只能用收藏的方式。

<a rel="sidebar" href="http://labs.aoao.org.cn/bloggingmusic/" title="Music For Bloggers">Music For Bloggers</a>

这回关键的是rel="sidebar"，不用写什么鬼脚本了，浏览器会自动识别，点击就添加收藏，试一下，Firefox也支持这种方式，^_^ 很好~很强大。不过需要用户来收藏再使用意义已经变了。注意，rel不是用来给JS识别然后打开新窗口的，rel还有很多作用滴。

嵌入Flash应该考虑不支持Flash的浏览器

aoao — Thu, 20 Dec 2007 02:40:29 +0800

为什么要用flash呢？

动画流畅，视觉效果好
缓存能力强

那使用flash有什么问题呢？

需要Flash播放器
在M$的补丁打遍天下之前IE有那神奇的虚线框

基本上现在大家都用JS来输出Flash，估计用得比较多的是SWFObject（AW译的中文版），主要解决的问题是干掉虚线框与检查版本，甚至自动升级。但是，好像多数人只用它的so.write("xxx");，这样用有个缺点，不支持JS或者没开JS就全挂了。

不知道大家有没有注意到。swfobject的例子里面那个ID为flashcontent里面内容。如果在使用时把换成更有用的信息时（比如一个关键的链接），就可以解决noscript的问题，也解决了搜索引擎的问题。

电脑上的一般都没有noscript的问题，但是手持设备呢？不过现在手持设备也开始支持javascript，可是flash还没。。还好，swfobject可以检查版本，比如：

var version = deconcept.SWFObjectUtil.getPlayerVersion();
if (document.getElementById && version["major"] > n) {/*_*/}
else {/*_*/}

这样的话我们就可以处理好有js却没flash的情况。

如果M$的补丁打遍天下时，再也没有虚线框的烦恼的话。我们可以用更简单的方法。-__- 02年的方法，Flash satay

<object type="application/x-shockwave-flash" data="xx.swf" width="12" height="34">
<param name="movie" value="xx.swf" />
<a href="http://www.aoao.org.cn" title="^_^"><img src="xx.jpg"  width="12" height="34" alt="xx" /></a>
</object>

这种方式的的好处就是。没有flash支持时显示图片，没有图片时显示替换文字（alt），但少了个js，也少了版本检查的功能。当然还有其他问题，比如一帧的flash =.= 还据说一些屏幕阅读器会忽略swf内容（这是05年的人家说的）。

如果单从PC的角度，用JS的方式更优秀，但如果考虑手持设备。Flash satay更兼容。比如Opera mini就跑不起SWFObject。当然iPhone里的Safari是跑得起，可是它还是不支持flash。可能你会说：手持设备应该有专属的页面。没错，就算想在手机里跑flash，那也是Flash Lite。但是像使用Opera mini、Safari@iPhone这样的浏览器的话，考虑的就是能不能看到内容跟多少流量了，国内的GPRS还是比较贵的。

iPhone版网站相关

aoao — Sat, 08 Dec 2007 00:57:00 +0800

iPhone已经快成街机了~T_T~网站要是没个iPhone版感觉有点怪怪，没iPhone赶快跟老大说，我们应该做个iPhone版，买两台来测试用^^。

开发时要注意的几点就是：

指定页面的宽度及缩放，head里加上：

<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

可以用window.scrollTo(0, 0);移到适合的位置。
没有hover，a的点击范围尽量大一点，不然很难点。两个a不要放得太近。^^或者直接在元素的onclick加跳转。
label居然不能关联input.
css支持并没有像乔布斯说的跟电脑上的Safari一样，不能直接用Safari代替调试。

iPhone的头跟Google的Android的基本一样：

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3

iPhone版网站还可以跑在Google的Android，也许以后可以代替WAP。我也在练习中，http://iphone.aoao.org.cn，欢迎点击，一个光明正大的小偷网站，首页一直没时间做T_T。先看一下别人是怎样做滴。

Google: http://yidong.google.com/m yidong？移动？真奇怪，在国内直接访问并没有看到新版，但域名却。。，挖哈哈。
Facebook: http://iphone.facebook.com 很明显，由于面向的人群不一样，设计也就不一样。。
Leaflets：http://app.getleaflets.com/ 一个搜索Search，Feeds，Flickr中转，del.icio.us中转及iphone版的网站列表的综合服务，^^
Pocket Tweets：http://pockettweets.com/，Twitter的iphone版。挖哈哈，设计做得精美无比，功能呢，好像跟Twitter的差不多，除了设置
Solomodels ：http://www.solomodels.com/iphone/ 其实，我是上去看MM滴，很明显，摄影师是男滴，模特是女滴~同门还有Shockfolio http://www.shockfolio.com/iphone/，两个站风格一样，不过MM不一样。^^
beejive：http://iphone.beejive.com 可以上MSN，GoogleTalk，细节做得不错，看截图不知道有没有人去做可以上QQ滴。
插播广告(MT)Media Temple：http://ac.mediatemple.net/iphone 没帐号的可以到这里看一下界面截图，我的空间商，不过给的iphone版后台少了最重要的的地方－－看GPU。 (MT)很好~很强大~当机补了两个月的月租给我^^ 现在就天天盼着当机。
6间房：http://iphone.6.cn 应该是国内第一个iphone版的应用。^^ 可以看视频哦。而且这里还推荐了一些iPhone版的网站
ZCOM电子杂志：http://zcom.com/iphone/ 很明显，风格就是抄6间房滴，不过做的还不错。这里有ZCOM的iPhone的专页制作过程，好像少了重点。挖哈哈。

其实iPhone版的网站已经有一大堆了。可以到iPhone™ Application List有没有适合你的应用，不过好像多数设计得不怎样。

再其实，网站可以不用针对iPhone做开发，当然，有时间跟精力去做更好。别说我小气不贴图，看张图，然后打开http://www.apple.com/mac/跟下面的图片对比一下：

当然，细节部分还是要处理的。截图推荐使用Dock ^^ 注意上面的图右下角处，多帅。

分类与标签的关系与呈现

aoao — Mon, 03 Dec 2007 02:09:18 +0800

最近在改blog主题，分类与标签一直让我很头疼。。两者关系过于复杂，最后我决定把标签抽些在分类下显示，效果可以看分类，例如：Web开发。

多数情况下，文章基于分类，标签基于文章内容生成，也常说的分类 » 内容 » 标签。我并没有把分类分得N细，过于精准的分类会导致内容受限于一个小分类，或者出现内容跨了几个分类。

而我又不喜欢把一份内容归在N个同层的分类下，便把标签来当成子级分类来解决问题。虽然在A分类与B分类下出现C分类的机会比较少，但却比较有可能都出现D标签，这就是区别，这也算是标签的基本功能。

接下来就是呈现的问题了，我的分类比较笼统，找起来内容比较麻烦，而标签一般都是标签云，因为标签没有父子级，再怎样归也只是排出来。为了把两者关联起来，抽取了部分标签直接显示分类下，相当于子分类下，当然，每个分类手动整理出标签质量会更好，我是用程序读取用得最多的前几个，＝。＝猫是还没实现过滤显示到某标签只在某个分类下的文章。

扩展阅读：内容、标签和分类

附Wordpress实现方式（需要Simple Tags插件）

<?php
if (is_category()) {
foreach((get_the_category()) as $cat) {
$cat_id= $cat->cat_ID . ' ';
} ?>
<p class="tags">该分类相关标签：<?php st_tag_cloud('category='. $cat_id); ?></p>
<?php } ?>

st_tag_cloud()的其他参数自己选，想怎样排就怎样排。

如何减少网页的内存与CPU占用

aoao — Wed, 21 Nov 2007 02:02:29 +0800

有的网页看起来并不大但打开会很卡，有的网页虽然很长但使用流畅，占用用户电脑的内存与CPU就影响这些。

浏览器问题，有各自的浏览器处理内存问题会影响到，但几乎没办法控制得了，Windows上的：

IE系列，刷新回收的量不大，但最小化会释放内存，。
Firefox2据说也会在最小化回收，可我从没见过最垃圾，用多少是多少，基本不回收。据说prototype的ajax还会引起内存一直增加。
Opera最好。一直控制得很好。不存在什么问题。。

Linux的内存分配机制与Win的不一样，有多少用多少，如果浏览器占光时说不定会干掉系统。

页面问题，浏览器渲染页面会消耗内存和CPU，能减少一点就减少点。

结构上

使用DocType，告诉浏览器你在用什么，html4也有DTD。也许Transitional更适合你
如果使用的是XHTML并能保持良好结构的话，记得输出相应的MIME跟XML头¹，可以减少浏览器的代码检查，
保持结构的完整，不要让浏览器帮你补全代码。
控制页面的文件大小，可以通过程序把为了看代码比较舒服的缩进去掉。2~3K也是大小。
iframe会产生新的页面，其实有很多方式可以代替iframe
引入的JS与CSS可以适当合并，同样背景图片也可以合并，甚至有人连Flash都合并
给已知宽高的内容图片/Object加上宽度的属性可以减少页面的局部重渲染

表现上

质量99跟70的jpg在大多数情况下只有文件有大小不一样。gif的也一样，特别是小图标，256色跟128色的差别是文件大小．
flash动得太快吃CPU很大，控制每秒的帧数及动画的效果可以减少一些，如果把品质用中低显示会省很多资源，但这样却牺牲了效果。。quality属性有时选择Autolow² 或者Autohigh会更适合，没必要一直low 或者best，
flash使用矢量图会节省文件大小，但计算复杂的图形跟动画时花的是CPU。复杂的太多滤镜，则会占用大量内存，模糊滤镜有减少些³。
IE的滤镜也是比较占用内存，同时也有兼容性问题。全屏的半透明很吃资源的。
2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。
gif动画同样有帧的概念，别把gif当成flash来玩就行。

行为上

别为了使用一个$()引入整个prototype或jQuery，它们有更多的作用。
AJAX很帅。但是用xml会用上XML解析器，有人推荐用JSON，可是这样要eval数据，其实可以直接import已经是对象的script来用。只是要多传个对象名，或者把对象名写死，或者像flickr那样jsonFlickrApi({"xxx":"xxx"})，直接当函数用，挖哈哈。
实现某些效果时能用visibility:hidden解决时就别用display:none来玩。
在这里强调js变量要注全局跟局部等等的意义并不大，JS复杂的地方也不是一两句能说得清的，关注大家关注月影的正在出版的新书吧。^^

其实这里有的内容有不少跟如何快速的呈现我们的网页相近，不过那篇是以处理服务端为主，但在很多时候，节省服务端资源消耗的同时也会节省客户端的资源消耗。

再其实，这篇已经蹲在草稿箱里好久了，一直没有时间去整理。现在给的也不是完整的，因为没有完整，慢慢补充吧。

产生问题：虽然会引起浏览器的模式问题，但问题是可以解决滴。参考Serving up XHTML with the correct MIME type，派送XML头浏览器不会容错显示，出现错误结构会导致整个页面无法显法。
Autolow: 优先考虑速度，但是也会尽可能改善外观。回放开始时，消除锯齿功能处于关闭状态。如果 Flash Player 检测到处理器可以处理消除锯齿功能，就会打开该功能。
Autohigh:开始时回放速度和外观两者并重，必要时会牺牲外观来保证回放速度。回放开始时，消除锯齿功能处于打开状态。如果实际帧频降到指定帧频之下，就会关闭消除锯齿功能以提高回放速度。使用此设置可模拟“消除锯齿”命令（“视图”>“预览模式”>“消除锯齿”）。
模糊滤镜:使用模糊滤镜时，如果用于 blurX 和 blurY 的值是 2 的整数次幂（例如 2、4、8、16 和 32），则可以加快计算速度，并且可以使性能提高 20% 到 30%（flash的帮助是介样说滴）。

window.open被浏览器拦截后的自定义提示

aoao — Sat, 17 Nov 2007 01:48:59 +0800

现在越来越多的浏览器有拦截弹出窗口的功能。广告弹出来给拦掉了就无所谓，要是客户在付款时给拦掉了可就不能乱算了。

Gmail的“哎呀”算是经典，可是，前天心云给出了更帅的提示＝。＝记得打开浏览器拦截后测试一下，在线阅读器里不知道代码会不会给过滤。。代码在下边，其实没什么技术含量滴。挖哈哈。。。

window._open=window.open;
window.open=function(sURL,sName,sFeatures,bReplace){
  if(sName==undefined){sName="_blank"};
  if(sFeatures==undefined){sFeatures=""};
  if(bReplace==undefined){bReplace=false};
  var win=window._open(sURL,sName,sFeatures,bReplace);
  if(!win){
    alert('天啦！你的机器上竟然有软件拦截弹出窗口耶，好讨厌哦，人家不来了啦！快去掉嘛~~555~');
    return false;
  }
  return true;
}

＝。＝重写window.open写了两天都没有想到更好的办法，参数要一个一个加，第四个参数，似乎只是为了不被back回去，例如：

window.open("a.html","a");
window.open("b.html","a","",true);

打开的b.html是没有后退可以按滴，MSDN有说明。

Optional. Boolean that specifies whether the sURL creates a new entry or replaces the current entry in the window’s history list. This parameter only takes effect if the sURL is loaded into the same window.

true sURL replaces the current document in the history list

false sURL creates a new entry in the history list.

Google的Android模拟器及一些移动版产品

aoao — Tue, 13 Nov 2007 23:30:53 +0800

GPhone没出来。。倒是出来了个Android，只能说Google太有才了，先出个系统来让大家把程序写好后，GPhone出来就有一大堆应用，官方已经出了SDK，不过那些不适合我们，Google手机模拟器Android Emulator v1.0才是适合我们的东东。。下载后直接可运行。^^绿色滴。

Android Emulator是一款功能非常齐全的模拟器，电话本、通话等功能都可正常使用（当然你没办法真的从这里打电话）。甚至其内置的浏览器和Google Maps都可以联网。用户可以使用键盘输入，鼠标点击模拟器按键输入，甚至还可以使用鼠标点击、拖动屏幕进行操纵。

当然，我最关心的是浏览器。。用程序得到的是Mozilla/5.0 (Linux;U;Android 0.5;en-us) AppleWebKit/522+ (KHTML, like Gecko) Safari/419.3看一下效果，我的小站在里面的效果。。

它跟Opera Mini 有类似的缩放机制，不过Android的更优秀。。

测试了一下xsl，＝。＝不支持。看到xml+xslt拿到手上是没人理的。哎。坚持HTML。

其实Google一直在发展手持设备相关的。。。比如提供比如提供移动页面生成给弱功能的浏览器用。。还有本身一大堆产品推出移动版：

移动版搜索（XHTML），移动版搜索（WML），个性化主页也好像也有移动版的，我用手机访问过，不知道那个算不算是。
GMail 移动版
Google Docs & Spreadsheets 移动版，基本HTML模式
Google Reader 移动版
Google Notebook 移动版

好像还有一些移动产品，理论如果有的话直接在产品原地址后面加个m就行。^^

经典论坛~ 再见理想~

aoao — Tue, 13 Nov 2007 01:26:22 +0800

今天，你蓝色了吗？即使在忙碌的日子，我也要去泡泡论坛。。。。哎。。这个世界有很多说不清的问题。引用POPO无奈的公告关于蓝色理想经典论坛无法访问的声明

亲爱的蓝色理想网站及经典论坛的会员朋友们，我们在这里非常遗憾地通知大家，在未来的一段时间里，我们将不能保证经典论坛的正常访问，由于来自外部的不可抗力，论坛服务器所在的机房已对我们进行封网处理，原因是相关监管部门接到举报，在我们的服务器上发现了有害内容，这已经是六天来的第二次封网了。

经过和主管部门的积极沟通后，获知这次的举报信息中没有涉及到具体的 URL 和内容，只提交了 IP 地址，从这点来看，无论我们如何迁移设备，都始终无法从根本上解决问题，排除人为因素，依靠我们卑微的智商实在想不出有什么原因会造成这样的结果。所以我们决定在没有得出行之有效的解决方案前，暂时关闭论坛的访问，请相信我们做出这样的决定也是万分无奈和十分痛心的，在此请允许我们致以最诚挚的歉意。

众所周知，蓝色理想是一个纯技术的网站，一直低调务实地为网友服务，为中国互联网做基础技术的普及工作，是广大网站开发设计同行在互联网上温馨的家，这也是这些年我们坚持下来的动力。希望了解我们网站的会员朋友，如有一定相关知识或公安关系资源的，与我们取得联系，协商解决方案，万分感谢！联系方式: blueidea[at]gmail[dot]com

突然听起一首巨老的歌，是Beyond 的再见理想

独坐在路边街角冷风吹醒
默默地伴着我的孤影
只想将结他紧抱诉出辛酸
就在这刻想起往事
心中一股冲劲勇闯
抛开那现实没有顾虑
彷佛身边拥有一切
看似与别人筑起隔膜
几许将烈酒斟满那空杯中
借着那酒洗去悲伤
旧日的知心好友何日再会
但愿共聚互诉往事
一起高呼blue i dea

用书的概念理解小网站结构

aoao — Tue, 30 Oct 2007 01:05:02 +0800

博客就像一本书这话其实几个月前深圳FB时就有扯到，这也不是什么新概念，也许本身就应该是这样。

打个比方，当你拿到一本未看过的书时，理论上你会翻翻目录、翻翻前言，通过目录寻找感兴趣的内容，或者从头翻起。那博客呢？当你来到一个未访问过的博客时，也许你会翻翻导航、翻翻关于，通过导航寻找感兴趣的内容，或者从头看起。^^是不是有点像呢？假如你知道书的某一页有感兴趣的内容，你可能就直接翻到第N页，有点像网站url一样的功能。你可能给书的某一页折角或者夹书签，是不是有点像收藏夹的功能^^，书的内容可能存在引用，指向另一本呢，是不是有点像博客文章里有个引用指向另一个网站呢?

但在大多时候，新网站的发现时，你可能是通过url访问网站某一部分的内容，而新书的发现你是从头看起，获取信息的顺序不一样。事实上，网站也不是书，详细区别就不用我讲了，换回书的概念。

当你不了解一本书时，你会先翻里面某一页的内容来看吗？当然，像有人跟你说第XX页能解决你的问题你去看就明白这种情况就例外了。当你在看书的某节或者某一页内容时，你会希望翻到这一页就是先看到目录呢？我想这样的书一定不喜欢。

那网站结构呢?在网站首页时，是否应该导航优先存在于结构呢?＝。＝好像全世界都是这样的；那在详细内容页面，是否应该内容优先存在于结构呢？＝。＝好像大家都不是这样滴。最多在前面加上跳过导航跳过内容。。

Web标准常说的一个优势就是一个页适合多种终端访问，假如你用手持设备来访问时，结构的先后存在的优势更加明显，如果打开某一页内容时，第一屏基本是导航好还是直接看到内容好。当然，如果是首页更期望是导航。事实上，对于手持设备，我更倾向使用对应的版本（关于手持设备使用的结构等我网站的mobile结构写得差不多再跟大家讨论），适合的内容给适合的浏览器显示。

除去正常的浏览器，手持设备，还存在各种可用于访问网站的终端。比如我用手机自带的浏览器访问，我得到的USER-AGENT为空，以前有说过media=”handheld” 为手持设备添加样式，不过也不是很理想。在还没处理每个相应浏览器的版本时，一个页适合多种终端访问这种勉强的作法还是可行的。

当然，如果你认为网站只是在电脑上的浏览器显示的，不需要这样无聊的结构也是可行滴。那这样做还有什么好处呢？利于SEO ^^，搜索引擎据说比较喜欢结构前面的文字，详细内容页导航是次要滴,也是放在后面。^^悄悄说下google搜索aoao已经可以看到我的新米排到了第一页，虽然aoao不是什么关键词，当然对于搜索引擎，域名也是一种策略，不过不这里讨论。

对于这种结构，排版也是一种问题，＝。＝，还好CSS能解决这个问题。现在我的网站就使用这种结构，有兴趣的朋友关掉样式或者查看代码看一下。当然，复杂结构的网站使用这样概念来做，就有点勉强了，但办法总会是有滴，只是我还没想到，哎，技术没跟上。。也许是书架，也许是图书馆，也许什么都不是。

推荐阅读：Web内容可访问性指南1.0(WCAG 1.0)

是时候该更换网页字体了

aoao — Sat, 27 Oct 2007 00:44:00 +0800

还在用Arial、Verdana吗？先看下新闻：

微软在Vista中更新了标准网页核心字体（Web Core Fonts）。微软在90年代捐赠了这些字体，后来广泛应用于今日的浏览器，直到现在未发生变化。但随着Windows Vista的发布，微软几乎完全更新其中一部分字体——新增6种C类字体：Cambria，Calibri，Candara，Consolas，Constantia和Corbel。Vista包含的这6种新网页核心字体，Windows用户可免费获得（方法，下载PowerPoint Viewer 2007，软件会自行安装新字体）。网页开发者如果不使用Vista，那就最好去下载新字体，以便让设计的网页与Vista上显示的效果相同。这里有一个视觉对比新旧字体的PDF文档。

当然，现在Vista不是人人都玩滴，我们还是应该用上这样的写法，让适合的系统显示适合的字体：

font-family: Calibri, Arial, Helvetica, sans-serif;

其实挺好看滴。如果加上MAC可以凑成这张表：via

Windows Vista	Windows	Apple
Calibri	Arial	Arial
	Arial Black	Arial Black
	Comic Sans MS	Comic Sans MS
Consolas	Courier New	Courier New
Cambria	Georgia	Georgia
	Impact	Impact
Consolas	Lucida Console	Monaco
	Lucida Sans Unicode	Lucida Grande
Constantia	Palatino Linotype / Book Antiqua	Palatino
	Tahoma	Geneva
Cambria	Times New Roman	Times
Candara	Trebuchet MS	Helvetica
Corbel	Verdana	Verdana

都是英文的，而且居然没有代替万恶的Tahoma，Tahoma在IE6下划线贴中文的问题很严重滴。其实中文也“有”，微软雅黑（microsoft yahei），现在随处可见^^ ，不过还是建议大家不要把正文定义成雅黑，想想Vista网页里还是用宋体，只是Viata的v5的，比起XP的v3.03肥了点，字怀大一点，看着舒服点。在XP下ClearType 没开或者没调好，雅黑只能用难看来形容。

当然，关于字体还有更好玩的方式： Web Fonts，代码如下：

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

有兴趣可以看下 CSS @ Ten: The Next Big Thing，web-kit已经支持这东东了。不过OOO说剛剛測試過後中文也支援，繪圖速度比較慢，另外字型下載完之前字都不會畫出來，而中文字型檔案果然大，我的螢幕黑掉一次才抓完，目前看來在有漢字的語系還是不實用。

虽然以前有font-face，可是后来给CSS2.1干掉了，干对滴，平衡了国人的心理^^ 现在又出这东东，摆明就是来打击大家。

换域名：aoao.org.cn

aoao — Wed, 24 Oct 2007 21:22:43 +0800

好域名都在米虫那．T_T 哎不再期待aoao.cn．这个凑合着用，有人跟我说org是组织机构，^^嗷嗷帮。传说换玉米这档事对SEO不利，不过我还是不在意，以前pr6的米都扔了，更别说这个只有5的。^^现在PR不更新鸟，可以扮老鼠吃猫了。

麻烦有链接到这里的朋友抽空改一下地址　http://www.aoao.org.cn/　＝。＝

feed的地址也改了。。http://feed.aoao.org.cn，是烧feedsky滴。不过感觉抓更新有点慢。喜欢feedburner还是原来的http://feeds.feedburner.com/aoao。

哎！网站一直没改完，公司又忙，北京又鬼冷，人变懒懒的。贴北京PP一张^^