WEB颜色选取工具（组件）和颜色格式转换

作者：idd.chiang 发布时间：February 28, 2010 分类：HTML/CSS,Javascript/AS,前端观察

经常会使用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下图片缩小失真的解决办法

作者：idd.chiang 发布时间：February 24, 2010 分类：HTML/CSS,前端观察

一张大图在尺寸小于原始尺寸时，ie7下会表现的很糟糕，画面失真呈锯齿状，如下图，美女脸上起了毛刺：
ie-interpolation-mode.jpg

别着急，强大的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 Explorer7.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布局切换

作者：idd.chiang 发布时间：February 23, 2010 分类：HTML/CSS,Javascript/AS

经常碰到图文列表的排列，怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计，总结出一点小经验和技巧。

pailie.jpg

列表的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，如下图：
letter-spacing-bug.png
解决方法是通过将排列元素（例子中是li）的父层（例中ul）设置letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;

常用Vim操作命令集合

作者：idd.chiang 发布时间：February 10, 2010 分类：Apache/Linux

Vim常用操作命令

-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入门图解说明

阅读剩余部分...

让PNG-8图像在网页中完美演绎

作者：idd.chiang 发布时间：February 10, 2010 分类：前端观察

网页前端设计到今天已经比较成熟，我们现在不会再去比较GIF和PNG孰对孰错，一种惯性会让大家优先选择PNG。W3C组织制定了PNG的规范 Portable Network Graphics，有兴趣的同学可以深入了解。

下面来说说我们常用的PNG-8。网页设计时，对于减少网页中图像数据大小，降低带宽，我们已逐渐使用8位PNG代替GIF，但是我们还缺以下几步就更加完美了：

一、避免PNG 在IE下的色差问题附解决方案：

IE下PNG色差主要是由于 浏览器对于PNG属性中Gamma项的解释不同。具体表现如图：
bug.png

问题详细描述： 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”两项，如下图：
tweak.png

我们已经知道标准数据块必须的四个chunk之后，tExt、tRNS 完全可以优化去除，看看去掉之后图片大小变化

pngsaveas.png

三、使用PNG压缩软件优化PNG图像数据大小

推荐使用： PNG Gauntlet 或 PNG Monster

这两个软件的介绍就不罗嗦了。直接看压缩图标后的效果：
pngcomposser.png

压缩效果是比较明显的。

阅读剩余部分...

YUI3仿苹果风格图标滑出导航菜单

作者：idd.chiang 发布时间：February 8, 2010 分类：Javascript/AS,YUI/Jquery/mootool

Apple-Style Slide Out Navigation Menu by YUI
IE7、FF3.5、safari、opera、chrome下测试通过，IE8无环境未测。

苹果风格的导航是比较炫酷的，用YUI3模仿这种导航风格。当鼠标移至菜单上，图标上移至顶部，然后滑动至展示区；鼠标移出时，图标移至导航下方，滑动至菜单后隐藏。

Tutorial:示例

» 首先我们来看看HTML：

<div class="navigation">
    <ul class="menu fl" id="menu">
        <li><span class="game"><br/></span><a href="#" class="first">Game</a></li> 
        <li><span class="water"><br/></span><a href="#">Water</a></li> 
        <li><span class="code"><br/></span><a href="#">Coding</a></li> 
        <li><span class="tools"><br/></span><a href="#">ToolsBox</a></li> 
        <li><span class="curve"><br/></span><a href="#">Curve</a></li> 
        <li><span class="options"><br/></span><a href="#" class="last">Options</a></li> 
    </ul>
</div>

span是icon图标，用作动画使用。当鼠标移上A标签时，触发动画。这里不能用Event.addListener 和 Event.on方式去侦听事件，因为icon动画时会移至A标签上层，导致监听对象发生变化，用relatedTarget判断span标签也会触发多次mouseover和mouseout。
所以，将鼠标事件的触发给LI是最好的办法，li内的元素仅用作动画展示，不绑定如何事件。这里用到delegate，将事件指派给#menu下的li

» 导航的CSS

.navigation{
    position:relative; /*IE hidden need*/
    overflow:hidden;/*Hiding*/
    padding-bottom:100px;/*Icon Showcase*/
    _zoom:1; /*For Ie6 hack*/
}
ul.menu{
    border:1px solid #b0b0b0; 
    border-width:0 1px 0;
    position:relative; /*zIndex need*/
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
ul.menu li{
    float:left;
    position:relative; 
}

阅读剩余部分...

常用分辨率下IE、Firefox设计模板

作者：idd.chiang 发布时间：February 6, 2010 分类：前端观察

设计师们在网页设计、web程序设计时，必须考虑客户端浏览器分辨率大小，然后确定在某一分辨率尺寸下设计程序界面。此时大家都会按下PrintScreen键，然后再粘贴到Photoshop中。有时还要考虑浏览器工具栏、边框、下拉菜单等因素，网上很难找到一个标准的web设计模板呢，发现junglejar提供了一个原始模板，如下图所示，

firefoxwin.png

为了减少设计师们拖动参考线，量尺寸费力，已将参考线校准，以下是PSD源文件：

下载：BrowserTemplates.zip

正确选择字符编码避免网页乱码

作者：idd.chiang 发布时间：February 6, 2010 分类：前端观察

web开发中，怎么选择字符编码，针对编码对汉字收录情况，我们应合理设置charset的编码。

关于GB2312、GBK到GB18030：
GB2312(1980年)一共收录了7445个字符，包括6763个汉字和682个其它符号。GB2312支持的汉字太少。1995年的汉字扩展规范GBK1.0收录了21886个符号，它分为汉字区和图形符号区。汉字区包括21003个字符。 2000年的GB18030是取代GBK1.0的正式国家标准。该标准收录了27484个汉字，同时还收录了藏文、蒙文、维吾尔文等主要的少数民族文字。从汉字字汇上说，GB18030在GB13000.1的20902个汉字的基础上增加了CJK扩展A的6582个汉字（Unicode码0x3400-0x4db5），一共收录了27484个汉字。

关于Unicode、UTF-8：
Unicode 是常见的字符编码方法，可容纳全世界所有语言文字的编码方案。目前Windows的内核已经支持Unicode字符集，这样在内核上可以支持全世界所有的语言文字。但是由于现有的大量程序和文档都采用了某种特定语言的编码，例如GBK，Windows 不可能不支持现有的编码，而全部改用Unicode。UTF-8就是以8位为单元对UCS进行编码

Windows的内码是Unicode，它在技术上可以同时支持多个代码页。只要文件能说明自己使用什么编码，用户又安装了对应的代码页，Windows就能正确显示，例如在HTML文件中就可以指定charset，所以在开发过程中，为了避免乱码产生，统一charset编码方式至关重要。

在未指定页面编码类型时，IE会默认使用Unicode方式来解读，所以乱码因此产生，下面列出web开发中常遇到的CSS中文字体对应unicode编码转换表：

阅读剩余部分...

  1. 1
  2. 2
Copyright © 不名一格 Powered by Typecho 登录 京ICP备05013217号