Shark UI

拿Gimp整了三个小时了，只整出这么个样子，而且还没学会怎么画圆角矩形…-_-

但至少开了个好头，布局风格差不多已成形（Icon是Tango的）。

传个图片当作自我鼓励！

下了决心要尝试转到Gimp，虽然明白它从各方面来说都还比不上Photoshop，但我就是哈开源的软件，就是想在这河蟹糕黄的深秋做第一批吃螃蟹的人^_^

在使用Gimp的过程中，最不习惯的还不是它的多窗口界面，而是已经深入骨骸Photoshop快捷键。用了这么多年的Photoshop，现在基本上可以在没有菜单、没有工具列、没有面板的情况下对付大多数的操作。 因为太习惯了，所以在Gimp下总是按错键，这让人无比恼火。一气之下就试图自己来重新设置一遍它的快捷键（首选项>界面>快捷键），不过无奈工程实在有点浩大……

Google吧，嘿，还果然有！这位老兄提供了他修改过的快捷键配置文件，试试了还真是不错，大多数的常用功能都包括了，这下子就爽多了呀。

下载这个文件：ps-menurc.txt。

然后把它改名为“menurc”，注意没有扩展名。再拷贝到GIMP的文件夹中：

Linux：~/.gimp-2.2

Windows：C:\Documents and Settings\<user name>\.gimp-2.2

ps.这个文件是按Photoshop 6设置的，适用于Gimp2.2。新出的Gimp 2.4是不是能用，我就不知道了^_^

这位老兄还列了张大表，把Photopshop的功能和Gimp作了对比。真的要佩服老外的认真劲儿，我觉得工程浩大的事，他还是做得这么仔细认真。致敬！

刚好青云讲了些“007功能”，好像还挺有争议。有争议是好事，有争议才说明这些想法既不是人人皆知的常识，也不是明显没有价值的谬论，而是一个值得讨论、值得让我们换个角度看一些常见问题的机会。

文中也提到了搜索引擎，我个人倒不是很关注它们的首页怎么设计，我挺看中结果页面的设计和创新。之前我们中国雅虎的同 事搞了个非常有新意的一搜。它的创新除了亲切的手绘风格外，最重要的就是所谓的“Mashup”。我认为这是目前互联网技术发展中最重要的两个趋势之一（另一个就是类似facebook的平台化），通过一些简单（但强大）的技术手段，把各种信息资源智能地整合起来展示。到后来中国雅虎又推出了全能搜索，它融合了网页搜索、音乐搜索、图片搜索、人际关系搜索等等，算是一个Mashup的成功案例。

阅读全文

今年四五月微软MIX07大会上，IE的平台架构师Chris Wilson在IE专场中的演讲。在结束之前的最后一张PPT中，提到了一点点关于下一代IE的目标。除去对CSS更好的支持之外（这是大势），有一点比较有意思，就是为Ajax提供更多的API。特别是local storage比较让人有遐想。再联系到google的gears、Adobe的Flash Shared Object，以及Adobe扩展到桌面上的AIR，Web应用程序对本地数据的读写似乎也将成为一个趋势。只是希望这些厂商在抢地盘之前，能坐下来好好谈谈，至少把API的访问方式定得相似些，好歹让我们在将来还可以有机会写一些”Storage Hacks”来解决兼容性问题。

阅读全文

一直试图寻找用GreaseMonkey直接访问Linux Shell命令的办法，到目前为止还没发现实现的办法，但在寻找的过程中却找到了这么个好工具：User Script Compiler。

它可以把GreaseMonkey的脚本转换成Firefox扩展，也就是.xpi文件。这就使很多不会用GreaseMonkey的非技术用户有了利用GreaseMonkey上众多脚本资源的可能，也给了GreaseMonkey的开发人员更多发布方式。

我用它把前几天写的下载yobo mp3的脚本转换成了Firefox扩展，还真成了。您可以装上试试：）

YoboDownload.xpi

而且该软件是OpenSource的，所以我花了几分钟简单地将这个页面作了翻译，放在这里：

 http://www.sharkui.com/tool/script-compiler.php

按原作者的GPL协议，我的翻译版也是GPL的，如果你有时间在它的基础上再作一点点改进，那是再美妙不过的事了！OpenSource的精神不就是人人贡献一点力量么：）

再次推荐，用好GreaseMonkey（+ 这个编译器）和Firebug，会给前端开发人员打开完全不一样的一片天空。

昨天居然失眠了。没喝咖啡，没喝酒，没吃错药，没什么压力，也没看鬼片，总之就是睡不着。到后半夜实在是困得受不了，可还是睡不着，一直闹腾得像得了偏头痛一样。

既然不能倒头就睡（这是我一贯的优良传统），那就不睡吧！索性起床，尝试用Inkscape来重绘SharkUI.com的Logo。

Inkscape就是Linux世界的Illustrator，和Gimp一起组成了一支乙级队（暂时还没有甲级队，而且目前也就它俩有机会升一级）。在Ubuntu下安装很容易，源里面就有：

sudo apt-get install inkscape

和Illustrator比起来，用户界面简单（不包括某些对话框），图标的意思清楚。只是操作上还不太习惯 ，光把轮廓钩出来就花了我十多分钟时间。

此外，我还给自己一个要求，就是依照Tango的图标设计规范来做，既然投入了开源的怀抱，那就开得彻底一些。Tango的图标有一个明显的特征，就是“双描边”。外面是深色线，里面是高光线。用Photoshop的话，只要在图层属性里随便找两个属性配合就能实现了。可是在Inkscape里死活没找到类似的功能，也没有设置“外边框”“内边框”一类的功能。

实在没办法，只好复制一份做高光线，然后手工把它调整到合适的大小。后来找到一个视频教程，居然也是这么做的。寒-_-|||

下面是完成稿，比我想像的还是要好一些^_^

去年淘宝做了个“胖子”项目，就是把网页的默认宽度从780提升到了950。也就是说，基本放弃了800×600的用户（没有完全放弃，如果你仔细研究一下淘宝的布局，我们还是为800用户做了些优化的）。后来又有很多网站变胖了，当然他们不是跟着淘宝做的，而是显示器市场上，大分辨率显示器占有率持续上升迫使大家做了改变。

说“迫使”也许有点过了，我相信大多数设计师在做“胖子”项目的时候，都是非常哈屁的：“爽！终于不用管800了！”至少我是这样的。从97年开始做网页，一直在640和800、640/800和1024、800和1024之间不断地痛苦决择。能够在一个单一稳定地环境下做设计是一种真心的期望，除了伟大的浏览器们，分辨率是另一个让无数设计师头痛的设计约束。

不过这种期望注定是一种奢望，看看下面的“甜甜圈”吧（来自于ued.taobao.com 2007年10月9日的数据）。

着实有一种“五代十国”、“群雄逐鹿”之感。1280及以上分辨率正在迅速上升，而且由于液晶面板和CRT显像管在工艺和成本控制上的差别，以及宽屏的流行，液晶显示器呈现出“分辨率混乱”的情况。可以预见几年之内，Web设计师将要面对的怎样的复杂局面（说到这里，又让我不由地再次想到伟大的浏览器们）。

除去PC，手机等移动平台在3G的催动之下，也一定会慢慢扩大它们的领地。虽然对大多数设计师来说，这还是件比较遥远的事情，但是早晚有一天，每个单子的需求上都会写着“（包括适用于移动设备的Mini Site）”。手机上的情况就更复杂了，目前几大智能手机系列，都有着各不相同的分辨率，我大致地把它们整理如下：

真实的情况要比上面复杂得多，我只是挑了一些比较典型的系统和机型。总而言之，言而总之，以后的日子更不好过了（我又一次又一次地想到，伟大的浏览器们，特别是伟大的手机浏览器们）。

噢，别忘了，还有IPTV，如果三网合一搞起来了。咱还得考虑电视机，那可是一个从640×480到1920×1080，让人无比敬畏的市场呀！：）

家里的机器换上Ubuntu已经三四个月了。到目前为止除了两件事还没办法搞定，其它的应用都可以在Ubuntu上顺利地实现，某些地方比用windows还顺手不少。

这两件事，一件和钱相关，一件和赚钱相关。和钱相关的就是网银、支付宝。在目前全民巴菲特的时节，没有网银是很痛苦的。同时作为一个淘宝小二，不能用支付宝就更加痛苦了……不过这件事情还得暂且放一边吧，不是那么容易解决的。这第二件和赚钱的相关的，就是俺的吃饭家伙，网页设计软件了。

HTML/CSS/JavaScript编辑好说，在Web标准盛行的年代，我们都用“手”code了。用来code的软件linux下好多，vim和gEdit都是非常非常好的工具。

头大的还是图像编辑，用了N种自称可挑战photoshop的软件（包括windows平台的）后，我就根本不抱希望能找到一个有photoshop五成功力的软件。说来说去，开源软件里也还是只有Gimp可以给我一些信心。

我对Gimp的信心来自于开源社区里的一些设计师和设计项目（比如tango），我就不信他们给开源软件做的设计都是用Photoshop。Gimp一定还是有它的两把刷子，只是我还不会用罢了。

另外，还有一个小工具很不错，叫Gimpshop。它会把Gimp改装得尽可能接近Photoshop，对我这样企图从Photoshop转过来的用户，不装它对不起党啊……

这是我装好Gimpshop，再稍加设置后的效果：

我决定，本blog的所有设计、再开发工作，统统要在开源环境下实现。请广大人民群众用雪亮的眼睛监督我，谢谢！^_^

yobo是目前我最喜欢的歌曲在线播放分享网站。它上线之初的卖点是“音乐DNA”，也就是通过心理测试来为你自动推荐歌曲。虽然现在已经不可避免地走向“传统”特性：大而全的歌曲分类、用户小组、系统榜单等等。但总的来说还是相当优秀，除了不提供下载链接。

该脚本就是用于解决这个问题，下图是运行后的效果：

// ==UserScript==
// @name           Yobo_Download
// @namespace      com.yobo.www
// @description    Add "Download" Link to Yobo
// @include        http://www.yobo.com/*
// ==/UserScript==
 
 
 
var songs = []
var divs = document.getElementsByTagName('DIV');
var dc = divs.length;
 
for(var i=0;i<dc;i++){
    if(divs[i].className == 'sp_container'){
        songs.push(getSongInfo(divs[i]));
        showDownloadLink(songs[songs.length-1]);
    }
    if(divs[i].className == 'block_submenu'){
        if(divs[i].getElementsByTagName('A')[0].className='b13em_black_hblack'){
        	var defaultSinger = divs[i].getElementsByTagName('A')[0].innerHTML;
        	defaultSinger = defaultSinger.substr(0,defaultSinger.length - 2);
        }
    }
}
 
function getSongInfo(div){
 
	var as = div.getElementsByTagName('A');
 
	//获得歌曲名
	var n = as[1].innerHTML;
 
	//获得歌手名
 
	var s = 'unkown';
 
	if(as[2]){
		s = as[2].title;
	}else{
		if(defaultSinger) s = defaultSinger;
	}
 
	//获得MP3地址
	var u = as[0].getAttribute('onclick').substr(16);
	u = u.substr(0,u.indexOf("'"));
	if(u.toUpperCase().substr(u.length-4) != '.MP3') u+='.mp3';
 
 
 
 
	return {name:n,singer:s,url:u,ele:div};
}
 
function showDownloadLink(song){
	var link = ' <a href="'+song.url+'" singer="'+song.singer+'" song="'+song.name;
	link += '" style="font-weight:bold;text-decoration:none;color:#999">Donwload</a>';
	song.ele.getElementsByTagName('DIV')[0].style.width = '100px';
	song.ele.getElementsByTagName('DIV')[0].innerHTML += link;
}

首先用ssh登录到Dreamhost的服务器上，执行以下命令：

cd $HOME
mkdir .ssh
cd .ssh
touch authorized_keys
chmod go-w $HOME $HOME/.ssh $HOME/.ssh/authorized_keys

在本地终端中执行：

ssh-keygen -t rsa

连续三次回车

rsync -avrz  --progress "/home/shark/.ssh/id_rsa.pub" sharkui@www.sharkui.com:/home/sharkui/.ssh/authorized_keys

注意替换其中的shark、sharkui、www.sharkui.com为你自己的本地用户名、Dreamhost用户名、Dreamhost主机名。

然后执行发布命令：

rsync -avzP --delete --exclude=wp-config.php /var/www/ sharkui@www.sharkui.com:/home/sharkui/sharkui.com/

同样请注意替换其中的用户名和主机名。

/var/www是我的本地测试路径， –exclude=wp-config.php表示不发布wp-config.php文件，因为两边的数据库配置是不一样的，发上去就麻烦了。