高粒度模块化的前端开发
View more presentations from iddcn
SVG格式 中国分省市地图导航（基于Raphaël）
1 Reply前不久帮朋友做一个分省地图引导，由于地图引导要出现在Apple系列设备上，所以flash方案被否决。转而投向js方案。因为很早前了解过Raphaël 这个矢量图形的js库，所以借此机会制作了SVG格式的中国地图，并使用Raphaël和Jquery让这个地图动了起来。
开始之前，我寄希望于在“广博”的互联网上寻找分省市的中国地图矢量文件，经过半天的搜索查找，以失败告终，找到的许多中国地图都不符合要求，因为这里的路径必须是有曲线性质的闭合回路。由于时间的关系，我放弃了寻找，毅然在illustrator上画线。最后保存为我需要从中获取的path路径（M开头的坐标)。SVG矢量图形可以用firefox、chrome等直接打开，查看源码就能获取path路径信息。
下载 Chinamap.svg
接下来初始化地图展示容器
var R = Raphael("ChinaMap", 560,470);
var attr = {
"fill": "#f5f5f5",
"stroke": "#ddd",
"stroke-width": 1,
"stroke-linejoin": "round"
};
路径的每一个形状使用R.path(path).attr(attr);来初始化每一个path区域。为了便于对省市识别和操作，省市的信息用json格式存储。
var china = {
'aomen' : {
name : '澳门特区',
path : R.path('M413.032 .........省略若干......... 414.183z').attr(attr),
url : 'http://xxx.xxx.com/?aomen'
},
...
'beijing' : {
//同上格式
}
}
想让省市区域颜色有所区分，可以使用Raphaël内置的一个getColor(value)这个方法，参数value是 HSB颜色格式中的B，即亮度。
让path动起来的方式很多，实例中的动画使用了简单的换色，更多效果有兴趣的同学可以猛击 Raphaël Demo
Y.Postip基于YUI3的相对提示组件(ToolTip)
4 Replies鼠标事件触发隐藏tip显示经常遇到，表现形式多种多样，无外乎都是鼠标触碰或点击一个元素（给他个名字：触发者），弹出或新建一个元素，类似Tooltip一样，暂称新元素为“被激活元素”，被激活元素的出现位置绝大部分都是以相对于触发者位置出现，所以，在Y.Postip的实例化中，放出相对于触发者的25个位置可以设置，并允许对默认位置进行自定义距离的设置。
纠结了一下被激活元素的内容该如何展现，为了使用途广泛一些，可以设置被激活元素是自定义内容，也可以是某个dom对象，同时为了能让被激活元素的UI能灵活设置，又放出className能自定义。
Continue reading
经典的水平垂直居中盒子模型
5 Replies上一篇： CSS 垂直居中的实现 没有详细描述这种垂直居中的模型，相对垂直居中在很多时候还是很有用的。
直接查看例子： 绝对垂直水平居中
居中的盒子是相对于绝对盒子的，个人认为绝对居中这个名字比较符合它特性，这时绝对有“肯定”的意思。所以，这个CSS模型兼容性可想而知。居中的盒子必须有宽(W)高(H)，垂直居中和水平居中用到left(right)、top(bottom) 50%的偏移量，为了使盒子中心点（对角线交点），必须有溢出，这个溢出量就是盒子宽度的一半，即margin-left(margin-right) -w/2、margin-top(margin-bottom) -H/2。
css代码：
.colorbox{
border:3px solid #2A6FA8;
background-color:#6FA5D1;
width:100px;
height:100px;
/*important*/
position:absolute;
top:50%;
left:50%;
/*Margin Overflow*/
margin-left:-50px; /*half of width*/
margin-top:-50px; /*half of height*/
}
.tmiddle{
border:1px solid #586650;
background-color:#ABB0A7;
position:relative;
height:300px;
}
WEB颜色选取工具（组件）和颜色格式转换
1 Reply经常会使用Photoshop去取自己想要的颜色,选色还得等待PS的长时间loading，费时费力。抽空整理了两个互联网开源的颜色拾取器，加了转化、拷贝，方便使用。
1.颜色拾取器（Canvas） Color Picker 2.0
这个工具有点像illustrator里的颜色选择器，有HSV，RGB两种颜色设置，CSS3现在已经广泛支持这两种颜色属性，如：hsl(240,100%,50%) 和 rgba(255,0,100,0.8)；对于获得颜色的值，如果我们使用PS，还得打开颜色管理器，这个工具可以有效增加前端工程师颜色选择的效率。工具栏中颜色渐变条是对Canvas Dom的getContext() 方法返回线性颜色渐变的一个 CanvasGradient 对象在Canvas画布上。
2.颜色拾取器 Color Picker 1.0
两个工具都用到了一个开源颜色转换脚本 (Color_Conversion_Library)，这样我们很容易互相换算各种WEB颜色格式,第三个转换就是一个简单尝试。
直接去感受下在线颜色拾取器：在线颜色拾取器
IE7下图片缩小失真的解决办法
Leave a reply一张大图在尺寸小于原始尺寸时，ie7下会表现的很糟糕，画面失真呈锯齿状，如下图，美女脸上起了毛刺：
别着急，强大的MS有解决方案，微软提供的私有属性 -ms-interpolation-mode，请参看：msInterpolationMode Property
img {
-ms-interpolation-mode: bicubic; /* Internet Explorer 7.0+ */
}
Firefox在3.6版本新增了一个css属性：image-rendering，他的用途更加广泛，用于：
- * images
- * background-images of any element
- * HTML5 <video> Element
- * HTML5 <canvas> Element
image-rendering用法：
img {
image-rendering: optimizeQuality; /* Firefox 3.6 */
}
详细介绍：image-rendering
对比一下各浏览器对图片失真处理方法：
| 浏览器 | 版本号 | 提供CSS属性 |
|---|---|---|
| Internet Explorer | 7.0 | -ms-interpolation-mode: bicubic | nearest-neighbor仅支持非透明图像格式 (如JPG, GIF, PNG); 无继承属性 |
| Firefox (Gecko) | 3.6 (1.9.2) | image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges |
| Opera | — | — |
| Safari (WebKit) | — | — |
更多的测试可以到可以到MSDN 做的例子看一下效果，或者到血 統の森-web実験小屋看一下效果。
推荐图文列表以及CSS布局切换
3 Replies经常碰到图文列表的排列，怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计，总结出一点小经验和技巧。
列表的HTML构成：
<div class="box">
<ul>
<li>
<div class="item">
<a href="url"><img src="src" alt=""/></a>
<h3><a href="url">TITLE</a></h3>
<p>Description</p>
</div>
</li>
... items ...
</ul>
</div>
在列表布局中，我们经常会选用float属性来实现横向排列，要实现每一行都整齐排列，我们必须固定列表项的高度，否则会发生意想不到的混乱表现。但实际应用中，图片不一定都同尺寸，按比例来表现势必会与我们固定列表高度或宽度相驳，也许还有图片底边对齐的要求。为了实现这种效果，这里用到了ie6不支持的display:inline-block；ie通过使用“display:inline;zoom:1”来hack。
下面直接上例子：
Demo 值得推荐的图文列表以及CSS布局类型切换
不得不提到一点，如果使用display:inline-block做排列的话，标签换行在Firefox下会引起letter-spacing的bug，如下图：
解决方法是通过将排列元素（例子中是li）的父层（例中ul）设置letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;
常用Vim操作命令集合
Leave a replyVim常用操作命令
-1-移动：
h/j/k/l: 左/下/上/右 移一格
w : 向后词移动 （前面加数字移动多少个词）
b : 向前词移动 （前面加数字移动多少个词）
e : 向后移到词末
ge : 向前移到词末
$ : 行末
0 : 行首
tx : 向右查找本行的x并移到那儿（大写时向左）
33G : 移到文件的第33行 *G = shift+g
gg : 文件首行
G : 文件尾行
33% : 文件的33%处
H/M/L : 屏幕的首/中/尾行
zt/zz/zb : 当前行移到屏幕的首/中/底部
-2-跳转：
” : 回到跳转来的地方
CTRL-O : 跳到一个 “较老” 的地方
CTRL-I : 则跳到一个 “较新” 的地方
-3-查找：
/ : 向下查找（后加关键字）
? : 向上查找（后加关键字）
n : 下一条符合的记录
-4-编辑：
i : 转换到插入模式
x : 删除当前字符
. : 重复最后一次的修改操作(同PS里ctrl+f执行滤镜)
u : 撤销操作
CTRL-R : 重做
p : 将删除的字符插入到当前位置(put)
-5-保持退出操作：
:q : 退出
:q! : 不保存退出
ZZ : 保存后退出
:e! : 放弃修改重新编辑
Vim命令壁纸两张
适合于初学者的VIM命令图解：原文：给程式设计师的Vim入门图解说明
Continue reading
让PNG-8图像在网页中完美演绎
Leave a reply网页前端设计到今天已经比较成熟，我们现在不会再去比较GIF和PNG孰对孰错，一种惯性会让大家优先选择PNG。W3C组织制定了PNG的规范 Portable Network Graphics，有兴趣的同学可以深入了解。
下面来说说我们常用的PNG-8。网页设计时，对于减少网页中图像数据大小，降低带宽，我们已逐渐使用8位PNG代替GIF，但是我们还缺以下几步就更加完美了：
一、避免PNG 在IE下的色差问题附解决方案：
IE下PNG色差主要是由于 浏览器对于PNG属性中Gamma项的解释不同。具体表现如图：
问题详细描述： CSS/PNG Gamma Consistency
这里能找到很详细的测试页面———— Browser Gamma-Consistency Test
测试结果———— CSS/PNG Gamma Consistency Test Results
最简单的解决方法是使用一些PNG属性检测的软件，将PNG图像中gamma属性删掉即可解决 PNG检测工具：TweakPNG，
解决办法：Fixing the PNG Color Problem in IE。
其实这个问题在我们使用PS CS3后的版本后已经解决，即将“颜色设置”中RGB设置为：sRGB IEC61966-2.1。并且在另存为Web格式时，弹出对话框中默认勾选了“转化为sRGB”，另存的图片中已经丢掉了gAMA chunk这项属性，所以大可放心。
二、压缩PNG，去掉不必要的数据块(chunk)
从任何 一个对PNG介绍的地方，我们可以找到如下资料：
关键数据块中有4个标准数据块：
* 文件头数据块IHDR(header chunk)：包含有图像基本信息，作为第一个数据块出现并只出现一次。
* 调色板数据块PLTE(palette chunk)：必须放在图像数据块之前。
* 图像数据块IDAT(image data chunk)：存储实际图像数据。PNG数据允许包含多个连续的图像数据块。
* 图像结束数据IEND(image trailer chunk)：放在文件尾部，表示PNG数据流结束。
参考资料：维基：Portable Network Graphics
通过TweakPNG对我们用PS存储的PNG图像进行检查，发现其中有“tExt Chunk，tRNS Chunk”两项，如下图：
我们已经知道标准数据块必须的四个chunk之后，tExt、tRNS 完全可以优化去除，看看去掉之后图片大小变化
三、使用PNG压缩软件优化PNG图像数据大小
推荐使用： PNG Gauntlet 或 PNG Monster
这两个软件的介绍就不罗嗦了。直接看压缩图标后的效果：
压缩效果是比较明显的。
Continue reading
常用分辨率下IE、Firefox设计模板
Leave a reply设计师们在网页设计、web程序设计时，必须考虑客户端浏览器分辨率大小，然后确定在某一分辨率尺寸下设计程序界面。此时大家都会按下PrintScreen键，然后再粘贴到Photoshop中。有时还要考虑浏览器工具栏、边框、下拉菜单等因素，网上很难找到一个标准的web设计模板呢，发现junglejar提供了一个原始模板，如下图所示，
为了减少设计师们拖动参考线，量尺寸费力，已将参考线校准，以下是PSD源文件：