CSS,JS文件压缩工具

js/css文件常见的压缩工具有：

• YUIcompressor ^{GUI TBcompressor}
• ESC(ECMAScript cruncher)
• JSmin ^GUI:JsMinGUI
• Dojo ShrinkSafe
• 在线Js压缩
• Google Closure compiler ^{Closure Tools}
• 打包下载地址

Yuicompressor的用法

java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar 
--charset UTF-8 D:\my.js -o D:\my-min.js
	
java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar 
--charset UTF-8 D:\my.css -o D:\my-min.css 

具体语法和其他参数参考：julienlecomte Yuicompressor。 也可以写一个批处理文件具体格式，同时处理多个文件，例如:将D盘中的WEBsite文件夹下的所有.CSS , .JS文件进行压缩

@echo off
::设置YUI Compressor启动目录
SET YUIFOLDER=D:\yuicompressor-2.4.2\build
::设置你的JS和CSS根目录，脚本会自动按树层次查找和压缩所有的JS和CSS
SET JSFOLDER=D:\WEBsite
echo look for JavaScript, CSS ...
chdir /d %JSFOLDER%
for /r . %%a in (*.js *.css) do (
@echo It's compressing  %%~a ...
@java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar --charset UTF-8 %%~fa -o %%~fa
 )
@echo OK!
pause & exit

ESC(ECMAScript cruncher)

这个工具只能在Windows下使用,ESC.wsf提供5种压缩级别，从0到4：
Level 0 :: No compression 不对JS文件进行压缩
Level 1 :: Comment removal 移除JS文件中的注释
Level 2 :: Whitespace removal 移除JS文件中的注释及空行（默认，一般选择此级别就足够了）
Level 3 :: Newline removal 移除JS文件中的注释，将所有代码合并为一行
Level 4 :: Variable substitution 提供最新的压缩率，移除JS文件中的注释，将所有代码合并为一行，并且修改JS文件中的变量名。例如：将"big.js"按照压缩级别2来压缩（ESC.wsf默认压缩级别为2）为"min.js"

cscript ESC.wsf -ow min.js big.js 

Google Closure Tools 包含三大块

1. Closure Compiler：这是个JavaScript优化器，可以将JavaScript编译成压缩的、高性能代码。它除了能移除无效代码，重写代码使其最小化且运行更快，还能检查语法、变量引用和类型，并对一些常见JavaScript错误提出警告。同时，它还提供了Closure Inspector（一个Firefox插件）用于调试编译后的代码。FireFox插件
2. Closure Library：这是个广泛的、经过良好测试、模块化且跨浏览器的JavaScript库。在例子中可以看到，Google Docs就是用这个库写的。
3. Closure Templates：这是一个为Java和JavaScript实现的模板系统，可在服务器和客户端使用相同的模板。值得一提的是，JavaScript模板会进行预编译处理，以提高其性能。此外，Gmail和Google Docs也是使用该模板系统。

手机里的世界

刚过完生日，有大家的陪伴，真是高兴，喝的一塌糊涂，感谢身边的人：小时候的老同学，高中时候的老同学，大学时候的新同学，和工作室以及里面的师兄师弟们。

这是我用手机（30万像素）拍下的我一段生活的画面，调了一下对比度和亮度，勉强还能看清，特此纪念一段难忘的时光，祝福我们大家一切都好。

让IE支持HTML5的两种方案

HTML5 最主要的特性就是加入了更加具有语义的标签比如：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档，和页面元素，比如 header, section, footer, figure等。更详细的介绍可以看下面几篇文章的介绍:
A Preview of HTML 5
Yes, You Can Use HTML 5 Today!
W3C HTML5

但IE不支持HTML5这些有用的标签，HTML5,有两种方法让IE支持HTML5.

1.用 Google Chrome Frame插件

这中方法没什么好说的，参见Google Chrome Frame的说明。

2.用JS将HTML5增加的标签创建出来

<script>
var html5Tags=['header' ,'footer','article','nav' ,'section','aside']
for(var i=0;i<html5Tags.length;i++){
    document.createElement(html5Tags[i]);
}
</script>

查看演示

今天才发现这个方法早就有人这样实施了:Moving markup towards HTML5

小窗口的的浏览体验

小窗口的的浏览体验是必须的，在保证页面内容的完整性的前提下，满足多终端设备的访问，细小部分的处理更能体现一个企业的水准。出现小窗口浏览的情形有很多，比如和女朋友抢电脑用的时候，女朋友要看电影，用户要看新闻，在难分高下的时候只能“AA”，因此浏览新闻就只能缩小窗口了：）
看了一下国内网站（满屏自适应部分）基本上没有考虑这点 再看Yahoo最上面的提示条满屏的时候是100%，占据整个宽度 缩小的时候页面内容完整，布局没有错乱

对于块级元素,宽度默认会继承父级的宽度也就是100%（内联元素没有宽度，即使定义了也无效），而最外层元素HTML的宽度一般是随窗口的改变而改变的(改变窗口大小再点击下面代码)

alert(document.body.offsetWidth + "px")

YAHOO的做法是为满屏的元素（顶部提示条）加上min-width ,IE6不支持此属性不知道是YAHOO是怎么解决的，但是让IE6支持min-width实现方法可以用执行表达式 Expression:

width:expression((documentElement.clientWidth < 400) ? "400px" : "auto" )

另一种方法是用border-width来模拟

* html .minwidth { 
	border-left:600px solid #fff; float:left
}
* html .container { 
	margin-left:-600px; float:left;	 position:relative;
}

查看演示

Marking up content with RDFa

上图左边是代理对页面的理解，右边是人的理解，代理可读的和人类可读的数据之间的关联是相当少的，结果就是现在的浏览器在解析和处理web数据上的能力很差，因为浏览器更多的功能是负责展示这些信息。因此为了耦合人类和机器的理解可以通过为一些可视化的数据提供一系列的XHML属性而使得这些数据可以被机器所理解，让页面更有语意RDFa就是一种解决办法,（还有微格式-Microformats）

RDFa “Resource Description Framework in attributes” 即资源描述框架，其应用格式可以参见W3C。例如为了表明h2代表页面的标题而h3代表作者可以用RDFa这样描述：

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
   <h2 property="dc:title">Marking up content with RDFa</h2>
   <h3 property="dc:creator">Lefter</h3>
</div>

为什么要用dc:creator和dc:title而不简单地用creator和title呢？这是因为XHTML并没有为这两个概念保留关键词；而xmlns:dc="http://purl.org/dc/elements/1.1/ 个人理解有点类似XML的命名空间,RDFa还提供了@property 来自定义属性因此也可以简写为：

<h2 property="title">RDFa: Now everyone can have an API</h2>
<h3 property="creator">Lefter</h3>

可以看出其优势为

• 增强的搜索功能
• 用户自定义，可扩展性
• 数据再利用性
• 自我控制
• 模块化架构
• 更具可访问性

推荐阅读

• W3C RDFa in XHTML
• W3C xhtml rdfa primer
• RDFa for HTML Authors
• alistapart introduction tordfa
• XML introduction tordfa
• Google About RDFa
• wikipedia

D630安装MAC成功

我选的是.iatkos V7(10.5.7)现已升级到了10.5.8;安装有很多种方式,USB,虚拟机,光盘,硬盘安装,我选的是光盘安装.
PC装MAC对CPU的要求是，必须支持SSE3/SSE3指令集，可以到osx86Project.org查看支持情况.

我的D630配置:cpu:Intel Core2 Duo(Merom) T7250(2.0GHz);主板芯片组:Intel PM965+ICH8M;独立,NVIDIA Quadro NVS 135M;无线网卡：Dell Wireless 1395 WLAN Mini-Card;有线网卡：Broadcom NetXtreme 57xx Gigabit Controller.这里有篇比较详细的图文教程,我只是回忆一下我安装的过程:

将BIOS硬盘模式选为ACHI;第一次安装没有自定义选项就直接一路NEXT过来,结果提示找不到keyboard(键盘)进不了系统.当时旁边没的USB键盘,于是重装,再次装的时候，我把所有选项都选上,心里想这么多的驱动总有一个能用,结果大错特错了,MAC不像WINDOWS,驱动一般都是需要部署的.这次安装成功之后出现了开机界面(灰苹果)下面有个风火轮在转,就是进不了系统,等了很长时间风火轮不转了,系统也就此卡死了。

第三次选我看了一下网上的说明，根据自己配置选了一下.安装成功了,进入系统的第一步就是填写一些个人信息，比如你的使用环境等等,键盘还是不能用，用了一个USB外置键盘,不知道什么原因键盘会自动输入,特别是输入密码的时候,好像有一个什么键被按下了一样,后来我知道了输入的是”7″,原因是我在选项的时候把PS/2和VOODOOPS/2都选了.解决方法是在BIOS里面把MOUSE/TOUCHPAD改成PS/2,进入系统删除其中一项,当时我不知道怎么卸载驱动,直接找到VOODOOPS/2.kext删除了。

再下一步是修复VISTA并建立一个MAC引导,方法比较多，如拷贝TOOB到C:\,我用的是安装了一个小软件:EasyBCD;进了系统安装显卡驱动,Nvinstallerv.41,和其他一大堆.关于D630很详细的帖子.启动的时候发现又停留在灰色苹果界面那里,没有风火轮.用单用户模式进入发现几行skipping…,后面的我内容不是很清楚了,解决方法是删除驱动缓存文件,这里有两个方法:1:

rm -rf /System/Library/Extensions.kextcache
rm -rf /System/Library/Extensions.mkext
参数－rf 表示递归和强制

2:在windows下安装一个磁盘共享文件，由于自定义选项的时候选择了对NTFS的支持，MAC下能访问Window下的资源，但不能修改，但反过来不行，可以安装一个小软件-Macdrive ,然后就像删除WINDOWS文件一样，对文件进行管理了。
建议最好把Extensions里的驱动文件全部备份,以便恢复

升级到10.5.8的时候很顺利(点击右上角苹果图标选择软件更新,一切系统自动帮你搞定),只是wifi网卡要重新安装一次,现在的一个小问题就是关机不断电,其他的都不错。很简介，用起来很流畅

推荐一些不错的资源

• insanelymac(国外很专业的讨论网站)
• 啃苹果
• 啃苹果新手必看帖子索引
• 远景论坛
• weiphone
• 关于D630很详细的帖子
• macuknow

用XBL实现FireFox连续字符自动换行

一般来讲，在排版中,中文及一些亚洲国家的文字标点不会在每行的起始位置显示，一个完整的英文单词不会出现在两行中，因此当连续的文字过长是会破坏所在区域的布局；IE下有word-break和word-warp来解决这个方法，但是Firefox不支持这两属性，用XBL能让Firefox达到相应的效果

XBLeXtensible Bindings Language也即是可扩展绑定语言,有点类似IE的HTC,HTC在CSS中的引用格式为：

p{behavior:url(test.htc)}

主要作用就是用来定义XUL组件的行为模式,XBL语法结构为：

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- content, property, method and event descriptions go here -->
  </binding>
  <binding id="binding2">
    <!-- content, property, method and event descriptions go here -->
  </binding>
</bindings>

然后就可以通过Firefox的私有属性-moz-binding 将一个元素关联到一个XBL文件中的指定项上:

p {
    -moz-binding:(url('lefter.net/demo/wordwrap.xml.xml#wordwrap');
}

Firefox演示效果
推荐阅读

1. FireFox私有属性
2. Firefox XBL
3. Emulating CSS word-wrap for Mozilla/Firefox
4. Cross Browser Word Breaker
5. 连续字体换行的解决方案

回家在自己的电脑上升级Firefox到Firefox/3.5.2，发现Firefox/3.5.2已经对word-breakz支持了，对text-shadow也已经支持了。

两种解决IE6不支持固定定位的方法

有两种让IE6支持position:fixed

1.用CSS执行表达式

*{margin:0;padding:0;}
* html,* html body{ 
	background-image:url(about:blank);
 	background-attachment:fixed;
}
* html .fixed{
    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.offsetHeight-
    (parseInt(this.currentStyle.marginTop,10)||0)-
    (parseInt(this.currentStyle.marginBottom,10)||0)));
}      
.fixed{
    position:fixed;
    bottom:0px;
    top:auto;
}   

查看演示

2.让body保持其原有高度，让html只有一个窗口那么高

*{margin:0;padding:0}
*html{overflow:hidden;}
*html body{height:100%;overflow:auto;}        
.fixed{
    position:fixed; _position:absolute;
    left:0;
    bottom:0;
}

查看演示

推荐阅读
http://tagsoup.com/cookbook/css/fixed/
http://subtlegradient.com/

翻墙的又一方法-荷兰免费VPN

GWF把国外很多优秀的服务都封了，像twitter youtube friendfeed picasa。我的相册是基于picasa搭建的，包括BLOG中的很多外链图片，现在都不能显示了。

网上讲翻墙的方法很多，今天发现了一个比较简单的方法：ItsHidden-荷兰免费VPN，主机放置在荷兰阿姆斯特丹，公司注册在塞舌尔，申请简单，填写名字、用户名、密码、邮箱即可免费注册为会员。ItsHidden免费VPN代理无需下载安装客户端软件，只要在操作系统中设置一下VPN网络连接就行了，非常方便。ItsHidden免费VPN代理总计拥有5G带宽，支持128位SSL安全连接。

免费账户注册
VPN设置方法

上图是我的相册的预览效果

如何提高交互设计效率

对之前做过的一些东西的总结

• 尽可能把旧产品的交互、行为分析透，并且形成交互架构文档，作为自己的改进基础
• 对行为的了理解可以让你真正懂得交互是什么
• 一定要把客户的需求理解透，这样会少走弯路
• 对好的交互原则和案例，最好直接引用，因为这是成功的经验
• 不妨先打乱常规思维，乱了再收摊，总比一点没动要好
• 信息层的架构设计是客户关注的一个环节，可以在此多下功夫
• 不能小看交互，它也是创意。好的交互点子可以让产品容光焕发
• 用户需求；内容需求；信息构架；导航设计；可视化设计，每一阶段充分理解，做充足的准备。