作者:idd.chiang
发布时间:February 10, 2010
分类:前端观察
网页前端设计到今天已经比较成熟,我们现在不会再去比较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
这两个软件的介绍就不罗嗦了。直接看压缩图标后的效果:

压缩效果是比较明显的。
阅读剩余部分...
作者:idd.chiang
发布时间:February 6, 2010
分类:前端观察
设计师们在网页设计、web程序设计时,必须考虑客户端浏览器分辨率大小,然后确定在某一分辨率尺寸下设计程序界面。此时大家都会按下PrintScreen键,然后再粘贴到Photoshop中。有时还要考虑浏览器工具栏、边框、下拉菜单等因素,网上很难找到一个标准的web设计模板呢,发现junglejar提供了一个原始模板,如下图所示,

为了减少设计师们拖动参考线,量尺寸费力,已将参考线校准,以下是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编码转换表:
阅读剩余部分...
作者:idd.chiang
发布时间:February 5, 2010
分类:前端观察
一、选择服务器放在哪个区域
对于Google而言,不同的区域,搜索结果的就不同.一些英文关键词, 你在中国用Google搜索,发现你网站的排名非产靠前,但是如果你在国外用Google, 你可能翻十页都找不到你的网站.
我们做Google排名的排名效果不是让我们自己看的, 而是让我们的潜在客户看的. 所以服务器的区域选择应选择潜在客户群体所在的区域。
二、检查服务器的IP是否被Google处罚过
1、检查一下这台服务器上放了多少网站呢? 如何查呢?这里我们给你大家一个工具,可以很轻松的查出来有多少域名共同指向一个IP:(http://whois.webhosting.info/ip/)
例如: 如果你要查219.235.226.75 这个IP你只要在IT地址栏入:
http://whois.webhosting.info/219.235.226.75/
点击回车, 以后就可以看到这个有多少域名指向了这个IP
2、选择几个www.###.com然后你在Google中输入:site:www.###.com然后看一看Google收录了这个网站多少页面。如果发现Google还没有收录它,就多查几个,如果大部分都是没有被Google收录的话,那么很有可能这台服务器是被Google处罚过的。为了保险期间,最好别用。
一般而言,被google处罚的域名比较多,被Google处罚的服务器相对比较少!
三、服务器运行一定要稳定
四、选择好的域名,合理设计网站路径和文件名
域名/路径/文件名的设计原则:
1、那就是要包含关键词。排英文关键词的话,你可以选择与关键词相关的域名.排中文关键词的话,可以用汉语拼音域名,中文网站别人用中文路径和文件名
2、静态的路径比动态的路径有利于排名
3、顶级域名比二级域名有路径排名(知名网站,权威网站的二级域名除外)
4、abc.web.com比www.web.com/abc/有排名优势
5、www.web.com/abc/比www.web.com/abc.html这样的路径有排名优势.
阅读剩余部分...
作者:idd.chiang
发布时间:February 5, 2010
分类:前端观察
常用的前端IDE基本都尝试过,最轻巧的莫过于EP,一直使用2.0的版本,但是经常会因自动完成导致奔溃,不得不寻找更好的编辑器,有人推荐 Notepad++,但是这玩意儿,我配置了一天之后,代码效率依然很低,尤其是他的自动完成设置,需要每次敲击enter键,这个方式个人不是特别喜欢,也许用傻瓜式的EP久了的缘故。终于有一天,彻底重装了一次EP3.0,奔溃的问题居然没有了,满是欢喜。:),最满意的是自己特别喜欢的一款配色,如下图:

这款配色的配置文件:configs
自动完成和语法在编写前端代码时特别高效和有用的,常用的CSS语法和HTML语法,以及自动完成文件等:
点击下载:acpctl
- «
- 1
- 2