样式之美 正在消失

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

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

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

1. 写邮件跟XX网站的管理员教他们修改，见一次写一次，希望下次打开时可以不用看到宋体，这样可以造福苹果教徒。（怎听起来那样不靠谱呢！挖哈哈）
2. 打开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，该属性值是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号，有兴趣的朋友凑凑热闹。

这两天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。

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

<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

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

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的一些： 阅读常见系统中文字体的英文名全文

前两天有幸去听了一个关于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相关资源：

• Silverlight官方 Samples
• Silverlight中文社区
• MSDN Silverlight 开发中心
• 经典论坛Silverlight专版
• Silverlight 1.0 SDK 下载
• Silverlight 1.1 SDK下载

最近看到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地震最近震完了，虽然我并不在意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能面向对象。。太阳应该从北边升起了。但是，凡事都应该带着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的应用。

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

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

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

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

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

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

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

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

那用侧栏有什么好处呢？侧栏是独立的窗口，可以多赚点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还有很多作用滴。