随行没有携带笔记本电脑和相机，只带了Galaxy Tab 8.9平板和HTC Sensation手机。出乎意料的是，头一次拿HTC Sensation认真的拍照，效果大大超过我的预期，尤其是微距的表现。部分照片直接用HTC内置的相片特效简单处理下就OK了。

厦门大学

上次来厦门居然没来厦门大学，这次过来一定要补上。我只想说，厦大这哪是学府，整一地质公园。虽然学生公寓的条件貌似不咋滴，但是整体环境相当的贴近大自然。

七天酒店

住的七天位于思明北路，据说是旗舰店，位置非常的好，交通方便。关键是旁边就有85°C面包坊，每天的早餐基本都靠它了。

海、鼓浪屿

本来周五打算去鼓浪屿的，中午打车去海边吃了个饭，发现厦门的海滩人少，于是重点就变成了在海边转悠。

思明南路

周六本来是随同事去南普陀的，一路打的到南普陀门口发现人太多，再者我这人缺乏信仰。在的士上发现思明南路整条街都是古色古香的，遂决定自己一个人边沿路返回边拍拍照。

我有多久没认真听过歌了，iPad Nano已经被尘封N久，每天上下班途中靠着HTC Sensation上的虾米音乐随便听两首歌就把耳朵给喂饱了。但是作为Gadget狂，还是忍不住把大热的装逼之物Monster beats by dr.dre solo耳机给败了回来。

音质就不用抱太高期望了，bass很足，但是解析力不行，在iPod上听还行，拿HTC Sensation和MacBook Air听就明显觉得声音有点浊了。你要说这货值不值180美刀？肯定不值，音质比起BOSE, B&W这些殿堂级的自然差远了，比较同级别的Sennheiser、AKG这些也差了不止一个级别。好在我也不是金耳朵，不然我还得再花个几千买个好的音源。

Gallery

NEUVETICA

顾名思义，这个主题用的主字体是大名鼎鼎的Helvetica（其实第二字体是Arial），主色换成了明黄色(#FEF200)。此配色灵感完全是因为最近买了双Native Fitzsimmons的潮鞋，于是乎今年特粉这颜色，连新买的卫衣都特意选了明黄色。

主题还是一如既往地完全用HTML5和CSS3写的，支持基本的Vimperator操作。所以IE依旧被无情地忽略了，但是加入了手持设备支持，在HTC Sensation和Galaxy Tab 8.9这两款手机和平板设备上分别测试优化过了。尤其是平板设备上阅读，个人觉得比在电脑上看更舒服 :D

另外，主题完全去除了Tag, Category, Trackback/Pingback这些过时的2.0玩意儿，完完全全的集中于内容本身。评论启用了豆瓣和新浪微博支持。

主题是3天时间做出来的，细节上的小问题还是以后慢慢改好了。

顺带介绍下之前随大流弄的个人mini主页，请移步至http://i.punkid.org，一天一配色，Android上支持滑动切换配色。

工作

2011年总算是工作上定性的一年，稳定下来之后收入也有了增长，幸得领导重视，赋予了我很大的自由在金融业这个无聊约束的圈子里去实践我的理念。同仁基本都是同龄人，做起事来比较齐心，工作一年多以后才领悟到当初在简历上瞎编的“团队精神”是什么。

至于2012年，还是希望能在事业上有更大的突破，因为今年考虑要买个代步工具了，莫非这就叫野心？

城市

因为工作缘故，一年下来出差无数，深圳、广州、厦门、福州、杭州、重庆、北京都留下了脚步。虽然每次都抱怨出差无非就是路上、车上、会上、床上。但是出差毕竟还是件长见识的事儿。

厦门是值得去休养的地方，城市既干净又安静，马路上没有扬起的灰尘，没有拥堵的车辆，太适合去休假了。当然鼓浪屿太坑爹了，千万别去！

深圳、北京无感，都是已经去过的城市了。

福州的鱼丸还是比较地道的。

杭州的自行车文化深得吾爱。

广州真不愧是美食城市，我对粤菜无限好感。叉烧、白切鸡、烧鹅这些都是大爱的菜啊，真是羡慕老广州人一边饮茶一边食菜一眨眼一天就过去了的生活。

要感受重庆的山城地貌最好就是打个的士到处逛一下，话说成都的哥都是跑山道赛的啊！

收获

收入上有了基础就开始狂买自己想要的东西。一年下来，收了Acer Aspire R3700, Seagate GoFlex Desk 2TB, HTC Sensation，Galaxy Tab 8.9，还有最重要的Macbook Air 13′。用了Mac之后就再也用不惯PC本了，虽然现在有了Ultrabook，但是Mac的触摸板体验是无法比拟的。

Mac系统也比我预想中上手多了，因为其unix本质，我之前在Gentoo上写的一些小脚本可以直接移植到Mac上继续用。我依然在Mac上用着VIM, awk/sed, Python这些开源利器。

HTC手机是早就想买的了，我确实对iOS无好感，但是Android原生系统在可用性上明显不如iOS，而HTC自家的Sense UI补足了Android的缺陷。为什么不买Samsung的手机？Sense UI就是最重要的原因。我好生后悔买的Samsung Galaxy Tab 8.9，Samsung的TouchWiz UI实在是太差了。

2011年的支付宝年度账单无情地暴露了我败家本性，今年真要存钱，争取入手代步工具！

END

祝各位春节快乐，2012年愿更进一步。

因此，我最终在硬件上选择了Acer Aspire R3700，基于Ion平台的超小型主机，配置如下：

• CPU：Intel Atom™ D525
• 内存：2G DDR3 800Mhz
• 硬盘：320G Sata
• 显卡：Nvidia G320
• 网络：WLAN 802.11b/g/n
• 接口：USB接口6个、HDMI输出、多合一读卡槽
• …

除了买的主机自带了鼠标键盘之外，我还选购了HDMI高清线以及MCE遥控器。

系统方面选择了安装配置简便的Ubuntu 10.10系统（我开始是打算使用Gentoo的，但是编译着编译着我就崩溃鸟）。使用Ubuntu要实现的功能如下：

1. 实现XBMC完全管理影音库，并通过HDMI输出到家里46吋的电视机
2. 通过无线网络连接家庭路由器，尽量摆脱网线的束缚
3. 开启sshd，通过其他电脑或者手机ssh到家庭媒体主机进行系统维护操作
4. 开启transmission-daemon，利用该主机进行高清下载，并可远程控制Bittorrent下载
5. 实现开机自动进入媒体中心，用遥控器进行媒体播放操作，避免使用键鼠的可能

系统安装

因为Acer Aspire R3700本身不内置光驱，安装系统可以通过制作LiveUSB进行U盘引导安装。我制作了LiveUSB到一张SD卡上，直接放入机器的内置读卡器进行引导安装的。具体如何制作LiveUSB以及安装Ubuntu系统就不冗述了，可参考Ubuntu的LiveUSB制作教程：Installation From USB Stick Quick。

注：我在系统设置时添加了一个名为xbmc的普通账户，系统主机名为HAL。下文均使用此用户名和主机名代替。

分区上我新建了一个220G的空白分区挂载在/library目录下，用于存放高清电影文件，文件格式上采用了xfs，采用如下命令进行格式化：

sudo mkfs.xfs -l size=64m -d agcount=4 -i attr=2,maxpct=5 -L library /dev/sdx

在/etc/fstab中添加/library分区挂载行：

/dev/sdb5	/library	xfs	noatime,nodiratime,allocsize=512m	0	2

其中allocsize=512m的作用是每次写入文件时xfs分区会预先分配512Mb的空间供一次写入，以减少文件碎片。对于动辄数G的高清文件来说，512Mb不算大支。

系统调试

删除冗余组件

安装好系统之后首先运行sudo apt-get update更新源。然后删除一些不必要的自带软件，如Openoffice, Evolution Mail, Brasero等。具体看个人需要删除，例如要删除Openoffice，运行sudo apt-get autoclean openoffice.org进行完全清理。

解决RaLink RT3090网卡驱动问题

Ubuntu 10.10自带的无线网卡RaLink RT3090驱动存在不能正常关机的问题，需要安装第三方源的编译包，运行如下命令：

## 添加第三方驱动源
sudo add-apt-repository ppa:markus-tisoft/rt3090

## 更新源信息并安装第三方无线网卡驱动
sudo apt-get update
sudo apt-get install rt3090-dkms

编辑/etc/modprobe.d/blacklist.conf文件，添加如下几行，将系统自带驱动模块加入黑名单：

# blacklist other Ralink modules in favour of 3090 DKMS mod
blacklist rt2860sta
blacklist rt2870sta
blacklist rt2800pci
blacklist rt2800usb
blacklist rt2x00lib
blacklist rt2x00pci
blacklist rt2x00usb

安装NVidia驱动

为了充分发挥Ion平台的高清硬解效能，安装NVidia的私有驱动是必须的。运行sudo apt-get install nvidia-current安装好驱动程序。安装好的XBMC会出现明显的CPU占用率过高的问题，解决的办法时安装好NVidia的驱动之后，编辑/etc/X11/xorg.conf文件，加入NoFlip设置：

Section "Device"
	Identifier		"Device0"
	Driver			"nvidia"
	VendorName	"NVIDIA Corporation"
	BoardName		"ION"
	Option		"NoFlip" "1" # 加入此行
EndSection

调试HDMI的音频输出

Ubuntu下调试音频的HDMI输出有点复杂，具体我参考了HOW-TO set up HDMI audio on nVidia GeForce G210, GT220, or GT240进行调试，这里简述下我的调试过程：

1. 运行alsamixer，F6切换到HDA NVidia声卡输出，打开Master, PCM, Front, Mic, S/PDIF, S/PDIF Def。
2. 编辑/etc/modprobe.d/sound.conf，加入以下这行:

   options snd-hda-intel enable_msi=0 probe_mask=0xffff,0xfff2
   

3. 编辑/etc/pulse/default.pa，加入以下这行:

   load-module module-alsa-sink device=hw:1,3
   

4. 编辑/etc/asound.conf，加入以下几行:

   #pcm.!default hdmi:Nvidia
   
   pcm.dmixer {
   	type dmix
   	ipc_key 1024
   	ipc_key_add_uid false
   	ipc_perm 0660
   	slave {
   		pcm "hw:1,3"
   		rate 48000
   		channels 2
   		period_time 0
   		period_size 1024
   		buffer_time 0
   		buffer_size 4096
   	}
   }
   
   pcm.!default {
   	type plug
   	slave.pcm "dmixer"
   }
   

开启iptables+ssh

由于本机是通过无线路由连接，最好先在路由器上映射好相应端口并绑定一个固定IP以方便维护，在此不再冗述。既然系统已经搭建好了，可以去掉键鼠通过开启sshd服务进行远程操作维护。为了更安全的系统，iptables+sshguard也是不可或缺的。

运行命令安装iptables, ssh和sshguard：

sudo apt-get install iptables openssh-server sshguard

修改/etc/ssh/sshd_config：

Port 2727 # 将默认的22端口修改为任意其他端口，例如2727。

然后是设置iptables规则，编辑/etc/iptables （没有可新建）：

# Generated by iptables-save v1.4.7 on Sat May 22 20:03:22 2010
*raw
:PREROUTING ACCEPT [21639:19095836]
:OUTPUT ACCEPT [22904:4573912]
COMMIT
# Completed on Sat May 22 20:03:22 2010
# Generated by iptables-save v1.4.7 on Sat May 22 20:03:22 2010
*filter
:INPUT DROP [7:2223]
:FORWARD DROP [0:0]
:OUTPUT ACCEPT [9409:1846937]
:sshguard - [0:0]

-A INPUT -s 127.0.0.1/32 -j ACCEPT
-A INPUT -m state --state RELATED,ESTABLISHED -j ACCEPT 

# 设置内网IP权限访问，默认允许
-A INPUT -s 192.168.1.100/32 -j ACCEPT
-A INPUT -s 192.168.1.101/32 -j ACCEPT

# 打开transmission-daemon端口6666，其中9091是transmission web的端口
-A INPUT -p tcp -m tcp --dport 6666 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 9091 -j ACCEPT

# 允许路由器的UPnP
#-A INPUT -s 192.168.1.1 -j ACCEPT

# 设置sshd端口号（2727）的访问，先经sshguard判断访问是否异常
-A INPUT -p tcp -m tcp --dport 2727 -j sshguard
-A INPUT -p tcp -m tcp --dport 2727 -j ACCEPT
-A INPUT -p tcp -m tcp --tcp-flags RST RST -j DROP

COMMIT
# Completed on Sat May 22 20:03:22 2010

然后直接运行sudo iptables-restore < /etc/iptables导入iptables设置。悲剧的是，Ubuntu不会自动保存iptables设置，所以必须在开机时载入设置，编辑/etc/network/interfaces文件，在末尾加入以下两行：

pre-up iptables-restore < /etc/iptables
post-down iptables-save > /etc/iptables

运行sudo apt-get install rcconf并通过rcconf将ssh加入系统启动自运行进程。然后重启电脑，就可以通过其他主机来进行操作、维护了。

安装XBMC及相关组件

安装XBMC

要获得XBMC之前，我们先需要添加第三方源，运行如下命令完成XBMC安装：

sudo add-apt-repository ppa:team-xbmc
sudo apt-get update
sudo apt-get install xbmc xbmc-standalone

首次运行XBMC会发现中文无法识别的问题，需要做的是拷贝一个中文字体进来，例如我喜欢使用Google制造的Droid Sans Fallback字体，运行:

sudo cp DroidSansFallback.ttf /usr/share/xbmc/media/Fonts/arial.ttf
sed -e "s/language>english<\/language/language>Chinese (Simple)<\/language/" -i ~/.xbmc/userdata/guisettings.xml
sed -e "s/font>Default<\/font/font>Arial<\/font/" -i ~/.xbmc/userdata/guisettings.xml

安装Lirc实现遥控播放XBMC

作为HTPC的一部分，脱离键鼠使用遥控器进行影院播放控制自然是必不可少，我使用的是Microsoft Media Center的遥控器，通过USB外接一个红外线接收器就可以了。

要让遥控器工作，首先得安装lirc，运行sudo apt-get install lirc完成安装，首次安装完成会弹出遥控器的终端配置界面：

• 在Remote Control Configuration中选择Windows Media Center Transceivers/Remotes (all)
• 在IR transmitter, if present中均选择Microsoft Windows Media Center V2 (usb) : Direct TV Receiver

然后将lircd加入系统自启动进程，重启计算机，在终端中运行irw，摁遥控器的方向键进行测试，如果终端内能正确识别遥控器操作说明遥控器准备就绪了。如果无法识别的话，需要sudo dpkg-reconfigure lirc重启进行配置，或者就是遥控器的电池电力不足（我就是因为这个傻逼原因瞎折腾了系统两个多小时）。

安装Transmission-daemon

作为高清下载机，实现Bittorrent下载的远程管理是必不可少的，首选Transmission这个跨平台的Bittorrent下载利器，尤其是它的daemon模式，支持web远程操作，而且web端的操作针对iPhone等手持设备做了UI优化。运行sudo apt-get install transmission-daemon安装。按照网站上的设置说明更改settings.json文件配置。

由于transmission-daemon默认使用的是debian-transmission用户名运行，需要将其改为我的用户名xbmc进行更好的管理。修改/etc/init.d/transmission-daemon文件：

#USER=debian-transmission #注释此行，修改为自定义的用户名
USER=xbmc

安装XBMC插件

XBMC的强大之处在于可以通过插件进行无限扩展，我安装了Getlib, 7176, TheMovieDb几个电影类的削刮器以根据文件名自动获取电影的封面和制作信息。剧集方面安装了TheTVDb的削刮器，另外还可以安装xbmc-addons-chinese里的扩展，添加Youku等在线视频播放，更好地扩展网络电视功能。

此外，在XBMC下可安装Transmission的插件，便可通过XBMC监控Transmission下载，例图：

安装XBMC皮肤: Aeon Nox

XBMC下最漂亮的皮肤莫过于Aeon系列，Aeon下面有Aeon65, Aeon MQ2和Aeon Nox三个mod。个人更偏向于使用Aeon Nox，系统资源占用少于前二者且皮肤功能异常强大，整个UI也非常漂亮（见下文“截图欣赏”）。

安装方法很简单，去XBMC的扩展库里找到Aeon Nox安装就行了，下载过程可能有点慢，毕竟这个皮肤解压后的体积高达60MB。不过皮肤安装后的问题是缺少中文字体支持，解决方法是:

复制一个中文字体到~/.xbmc/addons/skin.aeon.nox/fonts目录，并重命名为Arial.ttf（简单起见）。

然后修改~/.xbmc/addons/skin.aeon.nox/720p/Font.xml文件，将filename中的字体全部替换为Arial.ttf。

优化系统设置

为了更好地实现HTPC的流畅体验，还需要对安装后的系统进行一些优化。

1. 设置开机免密码自动登录XBMC账户
   在System -> Administration -> Login Screen Settings中点击Unlock，设置XBMC账户为自动登录。
2. 设置XBMC关机功能
   在XBMC的系统设置中的省电模式里，将自动关机功能中的选项设置为关机，这样既可通过摁遥控器上的关机键实现关机。

整个系统优化完之后，就可以在GDM中选择默认登录xbmc-standalone环境，而不进入Gnome桌面环境，以节省不必要的系统资源占用。

截图欣赏

参考:

1. HOW-TO perform a miminal Ubuntu and XBMC install on a Asus EeeBox PC EB1501
2. HOW-TO set up HDMI audio on nVidia GeForce G210, GT220, or GT240
3. Setting up Ubuntu 10.10 on Revo 3700
4. XBMC 10.04 ＋ 高清硬解的中文设置

End

写在最后，我已经为我的HTPC新添置了一块Seagate的GoFlex Desk 2TB移动硬盘以满足我下高清的需求，Acer的R3700主机连续运行几天既不会有噪音也没有发热的现象。电脑之间，电脑与手机之间通过无线网络进行互联，一定要用上801.11n的无线路由器才能满足无线网络之间的数据高速传输。

既然MPD是纯粹的C/S理念，为MPD找个手机client端也应该不难。于是找到了Remuco这款软件，它能够通过蓝牙或者Wifi的方式遥控Linux下的大部分媒体播放器，包括Amarok, Audacious, Banshee, Exaile, MPD, MPlayer, Rhythmbox, Songbird, Totem, TVtime, VLC和XMMS2。而且由于本身基于java，理论上支持java且有蓝牙或者Wifi设备的手机都能安装并使用它，从它的List of client devices successfully used with Remuco上看，实验成功的手机还是蛮多的。我在我的诺记非阉割版的E71上也成功实现了，下面是我在Gentoo Linux和E71上的实现过程：

（P.S: 这绝对是我最后一台诺记，别在BS我们这种没文化的弱鸡鸭用户了。我们都知道，有钱有文化的才用iPhone，Android手机。）

首先是保证你装了MPD，并且能够顺利运行，MPD默认使用的端口是6600，没有特殊需求的话，最好还是不要改。

然后是去Remuco的Googlecode上下载源码包。源码包包含两个部分，一个是主机上的server实现，另一个是手机用的客户端。一般来说我们都可以找到已经编译好的Remuco二进制包，在Gentoo下Sunrise overlay里也有ebuild，或者直接下载ebuild文件放到自己的本地overlay里吧，最近的版本是remuco-0.9.3-r2.ebuild。

因为我只需要开启remuco对MPD的支持，所以我只启用了mpd一个USE:

# echo "net-wireless/remuco mpd" >> /etc/portage/package.use
# emerge remuco

然后运行remuco-mpd, 如果你发现运行失败的话（请查看~/.cache/remuco/mpd.log），很有可能是和我一样，主机没有蓝牙设备，我们要做的是关闭remuco-mpd的蓝牙支持。找到~/.config/remuco/remuco.cfg文件，将如下一句键值替换:

[DEFAULT]
bluetooth-enabled = 0 #把1改为0
...

重新运行remuco-mpd，如果~/.cache/remuco/mpd.log里有提示: [ manager.py ... ] player adapter started则表示成功运行。

接下来是手机客户端，解压缩的源码包有个client/midp/app目录下有个remuco.jad和remuco.jar安装文件，不需要BT的话就安装no-bluetooth子目录下的安装包吧。

运行手机上的Remuco客户端，一般来说设置Host or IP项就行了，我通过路由器已经绑定了主机的固定IP为192.168.1.100，默认wifi的连接端口是34271，启用了iptables的话还得对端口放行，因为我同样固定了手机的IP为192.168.1.101，所以之前就通过iptables对来自手机的全部访问都放行了。

# iptables -A INPUT -s 192.168.1.101 -j ACCEPT

没什么问题的话，手机就能顺利控制MPD啦，这是主机上运行的ncmpcpp，显示正在播放Mono的Follow the Map。

来看下手机端的显示，同样是Mono的Follow the Map。

还可以用手机查看播放列表及MPD上的音乐库，并通过手机进行遥控操作。

另外，录制了一小段演示视频，视频内演示了通过手机快捷键n/p实现歌曲的切换，以及添加歌曲到播放列表，整个操作都是手机端和主机同步的。拍的有点抖，实在不是当AV男的料啊 -_-|||（注：此视频基于HTML5的video技术，采用开源的ogv格式，只支持h.264的Safari…忽略你！）

第三部的重要角色草莓熊Lotso (Lots-’O-Huggin’ Bear) 曾经在Pixar上一部动画Up （飞屋环游记）中有过Cameo appearance，Karl老爷爷的屋子拔地而起飞过一个婴儿房的玻璃窗前时，草莓熊正安静地躺在画面左边的床脚边上。

看过3的观众普遍认为第三部中听着摇滚乐的垃圾清理工是第一部中喜欢破坏玩具的小孩Sid，因为他们都有穿一件印有骷髅头的T-shirt。

3中的玩具婴儿Big Baby在月光下荡秋天，忽然180度扭头那一幕俨然恐怖片The Exorcist （驱魔人）中被附体的女孩。

第二部中出现的反派玩具Emperor Zurg在电梯上和Buzz Lightyear对决那一幕，Zurg对只手抓住电梯边的Buzz Lightyear说: I am your father。和Star Wars II中天行者Luke和Darth Vader的父子对决如出一辙。

另外，2中玩具恐龙Rex在玩具城里追着玩具车跑的那一段，从玩具车的后视镜中看Rex追赶过来的镜头像极了Jurassic Park （侏罗纪公园）中恐龙追逐吉普车的那一幕。

在第二部的片尾花絮中矿工老爷爷Stinking Pete在他的玩具包装盒中对着两个Barbie娃娃说：我可以让你们出演下一部电影。潜规则？结果其中一个Barbie娃娃真的在第三部中出现了，并且找到了她的另一半Ken。现实中，芭比男娃娃确实是叫Ken。

第二部中出现的为Woody修手臂的老人曾经在Pixar的动画短片Geri’s Game（棋逢敌手）中演那个自己和自己下棋的孤独老人。

第三部中试图从Sunnyside幼儿园里逃出去的那只玩具兔子莫非是Pixar的动画短片Presto（魔术师和兔子）里的那只兔子 ?

在Pixar的第二部全长动画A Bug’s Life（虫虫危机）的片尾花絮中主角Flik撑起蒲公英准备飞越山谷时，他喊了一句Buzz Lightyear的经典台词: To Infinity and Beyond ! 此外，花絮中Woody也现身为虫虫们的拍摄工作打场记板。

作为呼应，Toy Story 2的片尾花絮中，A Bug’s Life中的Flik和毛毛虫Heimlich出现了，他们听说要出A Bug’s Life 2了，结果发现事实上他们只不过为Toy Story 2中Buzz Lightyear拯救Woody的那段跑了个龙套。

在另一部Pixar动画Cars（汽车总动员）的片尾花絮中，汽车城的影院里正在上映汽车版的Toy Story，然后是汽车版的Monsters Inc.（怪物电力工厂）还有汽车版的A Bug’s Life，“演员”都是原版人马…

在Monsters Inc.（怪物电力工厂）中Sulley把Boo（阿步）送回家中，阿步的桌子上躺着Toy Story里的女牛仔Jessie。

3中有过Cameo appearance的玩具包括Finding Nemo（海底总动员）中的负责接送小鱼们上下课的Mr. Ray，Cars中的主角Lightning McQueen和那个一鸣喇叭就倒的拖车，还有宫崎峻的龙猫也在Bonnie家跑了个龙套。

自从那辆叫Pizza Planet在Toy Story中出现过后，Pixar的每部全长动画都能看到这辆车了，连WALL-E（机器人瓦力）中都能看到废弃的Pizza Planet。此外，1中出现的那个Dinoco加油站成了Cars中Lightning McQueen的赛事主要赞助商。

除了Pizza Planet，还有A113，BNL，Luxo Ball这些Pixar里的常客。

在1中，Woody的主人男孩Andy的书柜上摆放着的一堆书，书名全部源自Pixar的系列短片，例如: Tin Toy, Red’s Dream, Knick Knack …

著名的Linux发行版Debian的版本命名号全部源自Toy Story里玩具的名字，如最早的1.1叫Buzz，1.2叫Rex（恐龙），2.0叫Hamm（猪排博士，存钱罐），09年的5.0叫Lenny（望远镜），最近的稳定版6.0叫Squeeze（三只眼的绿色外星人），下一个版本会不会叫Lotso呢？

参考:

1. A special “Where’s WALL-E” edition of Why For?
2. Toy Story 3 Trailer Easter Eggs Revealed
3. List of Pixar film references

软文就此打住，我这篇文章的内容是解剖Google Buzz移动版的CSS应用。由于时间有限，加上Google复杂的页面代码压缩以及毫无规律的DOM class/id命名，很多东西难免有疏忽和纰漏，望斧正。

注: 以下测试及截图均来自桌面版的Mozilla Firefox和Google Chrome。（对Mozilla Firefox下的显示稍微做了点CSS Hack [via Stylish]）

首先来看Google Buzz移动版的完整截图，很标准的iPhone UI设计。

使用data URI scheme减少HTTP Request

众所周知，过多的HTTP Request对页面的载入速度有极大的负面作用。为了尽量减少CSS中图片载入的HTTP Request，出现了CSS Sprites技术。而data URI scheme则直接将文件用base64编码方式译为字符串，直接以inline形式嵌入到HTML/CSS文本中，计算机在获取HTML/CSS后，将base64过的字符串进行解码，生成原文件，而不是以传统的地址获取方式再发送一次HTTP Request来得到原始文件，相应的就减少了一次HTTP Request。不过这样做的坏处是，base64转译过的一大串字符串不利于HTML/CSS维护，代码的可读性也大大降低。

Google Buzz Mobile的UI图片几乎全部使用了data URI scheme技术，整个页面的HTTP Request大大减少。至于代码的维护…如同那些杂乱无章的class/id一样，只有Google的工程师才看得懂的天书。

该不该全面使用data URI scheme ?

为了减少访问数据下载量，我对blog启用了gzip压缩，包括javascript，css甚至@font-face里用到的字体也可以压缩（via Gzip your @font-face files）。启用gzip的压缩结果是客观的，一个Graublau Web.otf字体从41.464k压缩到了31.528k，压缩率为76.04%。然而用上data URI scheme，即使对CSS开启gzip压缩，由于经过base64转译后字符串本身大大增加了CSS文件的体积，压缩效果大大折扣。

再者，由于@font-face里用到的字体不会被修改，还可以启用cache来阻止下次访问重新下载，而HTML/CSS则是经常会被修改的，开启了cache也会经常要重新下载更新。

所以，什么时候使用data URI scheme呢？像jpg，png这些图片本身的压缩率就几乎到极限了，即使再gzip也是事倍功半。Data URI scheme配合CSS Sprites技术来定义CSS里简单的背景图片是个不错的选择，至于那些体积较大，图形比较复杂的图片（例如摄影照片）还是直接定义backgroud:url(…/filename.jpg)吧。

P.S: 分享下我使用的gzip及缓存优化代码，把以下代码添加到.htaccess文件里。

<ifmodule mod_deflate.c>
Addtype font/opentype .otf
Addtype font/truetype .ttf
Addtype text/javascript .js
AddOutputFilterByType DEFLATE text/css font/opentype font/truetype text/javascript application/javascript application/x-javascript
</ifmodule>

ExpiresActive On
ExpiresByType font/opentype "access plus 2 years"
ExpiresByType font/truetype "access plus 2 years"
ExpiresByType text/css "modification plus 1 month"
ExpiresByType text/javascript "modification plus 1 month"

使用border-image定义背景图片

为了适应各类屏幕尺寸的掌上设备，Google Buzz里的UI控件没有简单地使用固定尺寸的图片来定义背景，也没有通过层层div来定义每个边角。因为CSS3已经带来了border-image属性！

如图所示，Google Buzz Mobile顶端的一排按钮以及下面的输入栏（蓝色框显示）仅仅用了三张简单的小图片（红色框显示）即实现了整个UI设计。

以图片中Following按钮为例，简要说下border-image的使用。

border-image实际上是将一张图片切割为9宫格，用以分别显示一个元素的topleft, top, topright, right, bottomright, bottom, bottomleft, left和center九个区域，其中top, right, bottom, left以及center区域在无法填满元素时会默认进行图片水平/垂直重复。例如这个Following按钮的CSS代码为:

.FtX31c {
    -webkit-border-image: url(data:image/png;base64,...) 4 1 5 4 stretch stretch;
    border-width: 4px 1px 5px 4px;
    ...
}

除了前面说到的应用了data URI scheme，-webkit-border-image中的4 1 5 4分别代表了从上，右，下，左顺时针方向切割图片的像素值，其中top切块的像素值为4px，right切块为1px，bottom切块为5px，left切块为4px。这与下面的border-width是相对应的。而stretch则是自动水平/垂直拉伸以填满元素区域，但不进行图片重复。

另外，目前Gecko, Presto, Webkit三大引擎都支持border-image了。

利用text-overflow隐藏文字

Text-overflow是CSS3中新加入的一个属性，用来控制溢出盒模型的文字显示方式。在Google Buzz Mobile中Google使用了text-overflow: ellipsis属性来控制文字的显示方式，溢出盒模型的文字将会自动以…代替显示。

如下图，支持text-overflow: ellipsis属性的溢出文字自动压缩为…，而在不支持text-overflow: ellipsis的Firefox下测试，单词只显示了一半。

End

如果你跟我一样，用Mozilla Firefox访问Google Buzz Mobile的话，可以使用我修改过的CSS代码，添加到Stylish插件里。

点击下载: Google Buzz Userstyles

善用@Media规则

Opera Mini/Mobile, Chrome Lite, iPhone Safari都支持@media规则，所以下面这行代码基本上就能搞定这些主流的移动设备浏览器了。

@import url(css/handheld.css) only screen and (max-device-width:480px)

如果你希望为iPhone Safari/Chrome Lite添加独立的样式表的话，加上-webkit prefix就可以了。

@import url(css/handheld_iphone.css) only screen and (-webkit-max-device-width:480px)

Viewport的重要性

由于Opera Mobile的默认screen width是850px，而iPhone Safari则是980px。如果你跟我一样，不设定body的宽度，而是让它自适应屏幕宽度的话，你会发现在移动浏览器上你的网页宽度可能远远超过了480px。添加viewport的META到HTML head里能有效避免这个问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

通过width=device-width将网页默认宽度设置为设备屏幕尺寸。

Float and Fixed Positioning

float能不用尽量不用，但不等于说float就不能用，至少iPhone Safari，Chrome Lite以及Opera Mini/Mobile对浮动的处理都是很准确的。

真正需要避免的是fixed定位，一是浪费了原本就不大的屏幕空间，二是滚动页面时容易导致花屏。

使用Max-Width

如果你的图片动辄500px的宽度，在移动设备的浏览器上显示肯定会溢出屏幕，最好的办法是给img加上max-width属性:

img {max-width:100%; height:auto;}

充分利用好HTML5 input

HTML5为input加入了很多激动人心的新属性，包括新的type，placeholder以及autofocus。

新的Input类别

新加入的input type包括email, url, search…使用这些type准确定义你的输入框，不仅让代码更语义化，而且在iPhone Safari上也能获得更大的输入便捷。

例如，如果你的input定义为email type:

<input type="email">

在iPhone Safari上点击输入框，弹出的虚拟键盘是这样的:

图片来自Dive into HTML5: A Form of Madness

最下面的一排按钮包括了email地址常用的@, .符号。

而如果你的input定义为url type的话:

<input type="url">

在iPhone Safari上弹出的虚拟键盘则自动包括了常用的.，/，.com符号。

图片来自Dive into HTML5: A Form of Madness

长摁.com的话还能在com, org, net中切换，不得不赞叹Apple的工程师对iPhone的细节把握，可惜的是Google Android就没这么聪明了。

Placeholder属性

placeholder这个新加入的属性可以在input中加入提示性文字，当点击input时该提示性文字则自动隐藏。以往这样的功能是需要依赖于javascript才能实现的。

如上图，加入以下代码，在输入框内会出现(Required, will not be published)的提示性文字。

<input type="email" id="email" value="" placeholder="(Required, will not be published)" required />

经测试，iPhone Safari和Chrome Lite都支持该属性。

Autofocus

另一个新增加的input是autofocus，目的是在页面加载完后自动聚焦到指定输入框内，这个效果经常在网页账号登陆页面上使用，例如Gmail, WordPress的登陆页面等等。同样，iPhone Safari，Chrome Lite以及Opera Mobile都支持它。

<input id="login" autofocus>

No Font-Face

font-face虽然在iPhone Safari，Chrome Lite以及Opera Mobile下都支持，但是以我的blog为例，即使开启了gzip压缩，一个Graublau Web字体还是有38kb。最好还是为移动样式表重新定义下font-family，去掉自定义字体。

以下是快捷键一览表，更多的会陆续添加进来。另外，用CSS3来style表格很有趣。

域名购买

打死我也不在国内域名商那买域名了，除了某些因素不说，光是续费就够麻烦的，你得找原注册商那续费，而且想要进行域名转移的话，还要提交身份证信息等纸质凭证给原域名商进行核实。买域名还是老老实实的选家国外的注册机构吧，千万别贪国内那些域名商给你的小恩小惠。我是godaddy注册的，然后google了下coupon codes，从48美元打折到了36美元左右，缴费方式支持paypal以及国内的支付宝，所以没有双币信用卡进行美元支付的话也没关系。

另外，godaddy很多域名是第一年便宜，但是之后的年费比较贵，像.me结尾的域名首年才8美元，但是之后每年要支付20美元，我索性选择了传统的.org域名，每年老老实实交个15美元得了。

备份，修改WP数据库

WP后台就有数据库的备份选项，一定要时常备份，以备不测。因为域名修改了，我要把数据库里的原域名地址全部更换为新域名地址，简单的办法是利用*unix的sed工具替换，它非常的快，而且不用打开文本编辑器等待庞大的数据库文件全部读取完。

$ sed -i 's/blog\.punkid\.cn/blog\.punkid\.org/gi' databasename.sql

然后利用phpmyadmin导入进去就可以了。

搬动Wordpress文件夹

很简单，我是直接cp -r blog.punkid.cn/* blog.punkid.cn/.* blog.punkid.org/搞定的，复制完之后最好确认下那些隐藏文件是否都复制过去了，例如.htaccess

利用301重定向旧域名到新域名

更改域名最怕的是原在旧域名下被google, yahoo, bing索引的地址不能立刻转移到新域名下，除了重建sitemap通知google爬虫来重新抓取之外，利用到301永久重定向也是很重要的。我的目标自然是把旧域名下的链接全部自动重定向到新域名下面，例如我的这篇文件Ultimate Guide to Manage Your iPod under Linux : Revised，每个月都有很大程度的浏览量来自于google的索引。如何保证访问者即使输入旧的地址http://blog.punkid.cn/2008/01/06/ultimate-guide-to-manage-your-ipod-under-linux也能自动重定向到http://blog.punkid.org/2008/01/06/ultimate-guide-to-manage-your-ipod-under-linux呢？

在原域名(blog.punkid.cn)的目录下添加.htaccess文件，里面写入:

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteRule ^(.*)$ http://blog.punkid.org/$1 [R=301,NC]
</IfModule>

搞定，剩下的让google来完成吧。

迁移awstat访问统计数据

我一直都在用awstat的访问统计，现在迁移到新的域名下，除了修改awstat的conf文件，还要把就域名下的访问统计数据移到新域名下。好在awstat的访问统计数据都是文本形式保存在awstats/awdata目录下，而且每月数据都是以诸如awstats112007.blog.punkid.cn.txt的文件名存在的，不用多解释了，把这么多文件全部替换为新域名blog.punkid.org就行了，不需要文件名批处理软件，*unix下一个rename命令就搞定了。

$ rename -v 's/punkid\.cn/punkid\.org/' *.txt

End

暂时就这么多，目前来看搬迁后还没出现什么问题。另外，本站在Going HTML5，Going Mobile后对theme进行了更激进式的CSS3升级，目前来看Firefox 3.6, Google Chrome Dev和Opera 10.50下的表现各有千秋吧。