<![CDATA[PuterJam's Blog - Web Design]]> http://www.pjhome.net/ zh-cn PBlog2 v2.4 PuterJam's Blog http://www.pjhome.net/images/logos.gif http://www.pjhome.net/ PuterJam's Blog http://www.pjhome.net/article/Web/Qzone_No_IE6.htm <![CDATA[Qzone 即将推用户更新IE6]]> puterjam@gmail.com(puterjam) Wed,23 Jun 2010 15:10:07 +0800 http://www.pjhome.net/default.asp?id=1025  

Qzone 即将推用户更新IE6,积极推动IE6在中国的灭亡。 希望能给更多用户和前端开发出一份勉力。

更多消息可以关注Qzone的微薄 http://t.qq.com/qzone

]]> http://www.pjhome.net/article/Web/chrome_vs_IE9_PNG.htm <![CDATA[深入分析IE9的图片性能测试实例]]> puterjam@gmail.com(puterjam) Wed,17 Mar 2010 17:56:42 +0800 http://www.pjhome.net/default.asp?id=1021

 微软发布了IE9的技术预览版，也放出了不少测试的实例，整体来看给大家带来一支镇定剂。不过舜子这里对其中一个演示案例很感兴趣。

 

我们先来看看这个实例：点击打开

 

最让我好奇的是chrome在这个实例中几乎是所有浏览器中最慢的，令人大跌眼镜。

 

深入分析了这个实例的实现，里面包含其实两部分功能会影响性能，动画的JS算法和图片的渲染。

测试单纯的动画的算法，把所有图片都block掉。测试得出的结果是，chrome处理256张图片，平均44FPS。而其他浏览器IE7(应为没装IE9,暂时用IE7测试一下)，firefox3.6，opera 10.50平均20~22 左右。这说明chrome在纯算法上都是非常有优势的。

 

这里动画的JS算法并不是最主要的问题了，最大的问题看来是来自对图片的渲染上。仔细看了每一张图片，每张图片都是以一个540x540包括alpha透明的浏览器logo。 看来chrome在渲染大尺寸PNG的时候吃了很大的亏。期待下一个版本的chrome能修复对PNG处理的问题，毕竟这个也是主流的图片格式。

 

 

（微软故意挑战chrome的PNG图片）

这里舜子还没有针对IE9进行完整的测试。不过在同事的电脑上测试这个实例时，无疑IE9在渲染上是目前所有浏览器中最快的。而且还有D2D对图片渲染图片在放大和缩小都有抗锯齿表现。

 

我把这个测试实例down了下来，有兴趣的朋友可以自己测试一下

 点击下载此文件

]]> http://www.pjhome.net/article/Web/how-ie8-determines-document-mode.htm <![CDATA[IE8 如何判断文档模型]]> puterjam@gmail.com(puterjam) Wed,03 Mar 2010 10:29:43 +0800 http://www.pjhome.net/default.asp?id=1020 首先给出一组数据
 
这组数据说明了目前IE8在渲染模式下的一些比例（微软偷偷统计的?）。

      ● 有19% 的站点用了严格型的标准来设计(非常好的数据，得感谢默默无闻在前线工作的页面重构同学们)

      ● 有 14% 的站点用了http头和 X-UA-Compatible 把IE打回IE7的模式

      ● 有 41% 的站点用了Doctype让IE8使用标准模式（这里指的是，大家常用的过渡型）

      ● 很不幸还有 26% 的站点使用了Quirks 模式....



下面的图详细得给出了IE8内部对渲染模型的判断流程
 
 
 
更多信息请跳转这里：
http://blogs.msdn.com/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

 

]]> http://www.pjhome.net/article/Web/I_Can_t_Believe_It_s_Not_Flash.htm <![CDATA[我不相信这不是Flash]]> puterjam@gmail.com(puterjam) Mon,22 Feb 2010 10:33:15 +0800 http://www.pjhome.net/default.asp?id=1019 在Ajaxian上看到了一个有意思的ppt，这个ppt给我们介绍了一些web的效果和特性不需要使用flash来实现。

I Can't Believe It's Not Flash

View more presentations from Thomas Fuchs.

 

]]> http://www.pjhome.net/article/Web/Mockingbird_visual_mockup_tool.htm <![CDATA[Mockingbird 在线的原型设计工具]]> puterjam@gmail.com(puterjam) Sun,08 Nov 2009 00:57:05 +0800 http://www.pjhome.net/default.asp?id=1014 Mockingbird 是基于 Cappuccino 开发的一个在线原型设计工具。

比较喜欢它自动对齐的体验:P 不考虑ie的web app 可以让开发者更加大胆了。

No Flash, No IE, All in Canvas, Apple Style

]]> http://www.pjhome.net/article/Web/css3_reference_manual.htm <![CDATA[CSS 3.0 参考手册 (中文版)]]> puterjam@gmail.com(puterjam) Mon,24 Aug 2009 12:11:38 +0800 http://www.pjhome.net/default.asp?id=1011  

公司的页面同学们，利用业余时间整理出了一份比较完整的CSS 3.0 参考手册，非常不容易。手册是根据W3C的CSS3草案翻译，并且结合实际的示范结合而成。每一页都倾注了每一个同学的心血。

 

预览页面：

下载地址： http://webteam.tencent.com/css3/

 

]]> http://www.pjhome.net/article/Web/xhtml2_html5.htm <![CDATA[漫画：混乱的标记语言XHTML2/HTML5]]> puterjam@gmail.com(puterjam) Fri,31 Jul 2009 01:00:28 +0800 http://www.pjhome.net/default.asp?id=1007 单击图片打开看更好看哟 :P

转自 : http://bit.ly/kL7BC

]]> http://www.pjhome.net/article/Web/20-tools-to-make-the-life-of-a-web-developer-easie.htm <![CDATA[20个让Web Developer开发生涯更加轻松的工具]]> puterjam@gmail.com(puterjam) Thu,11 Jun 2009 10:48:37 +0800 http://www.pjhome.net/default.asp?id=998 源文:  http://net.tutsplus.com/articles/web-roundups/20-tools-to-make-the-life-of-a-web-developer-easier/

简译:  PuterJam

 

Typetester

一个在线对比字体的工具，可以很直观得看到不同字体的差异

 

pForm

创建HTML表单的工具，能在瞬间创建很美观的表单，并输出html代码

 

ColourLovers

在线的调色板工具，你能够搜索到很多配色方案或提交你的配色方案

 

Firebug

无所不能的firebug，不多介绍了

 

HTML Entity Character Lookup

HTML 实体 查询工具

 

960 Grid System

960 是个神奇的数字，960 是横向尺寸，960 网格系统是能够让设计师快速创建网页原型的辅助系统。可以比喻成网页的黄金分割线

pfvyzisv.jpg

 

 

Em Calculator

EM换算器～ ，可以把像素换算成 em 单位。

 

Browser Shots

多浏览器截屏工具，可以提供多个平台，不同浏览器的页面截屏效果

 

Icon Finder

还在为找图标发愁么，一个不错的图片搜索工具。

 

WhatTheFont

当你图片里看到一个好看的文字而不知道字体名称时，可以用它来帮你分析字体类型

 

MeasureIt

firefox插件，可以在页面上显示一个尺子

 

ColorZilla

同样是firefox插件，可以在页面上取色，前端开发必备

 

Pingdom

一个在线的抓包工具

 

Test Everything

Test Everything 提供了很多测试工具来测试你的站点。从css html 到seo ，从网络工具到优化应有尽有。

 

CSS Sprite Generator

样式精灵，这类工具很多了，就是把图片分割并且输出成css

 

Web Developer Toolbar

也是一个非常强大的web开发工具。

 

Domainr

域名查询工具，很方面查询域名的使用情况，并且给出未注册域名的建议。（需要翻墙）

 

Font Burner

字体查询工具，并且提供在线的字体解决方案。仅限英文。

 

Smush.It

图片优化工具，能够优化你的图片尺寸

 

Load Impact

可以模拟不同地区的用户访问你的站点的情况。并且以图表的情况反馈结果。

]]> http://www.pjhome.net/article/Web/996.htm <![CDATA[safari 4.0 正式版发布]]> puterjam@gmail.com(puterjam) Tue,09 Jun 2009 10:31:57 +0800 http://www.pjhome.net/default.asp?id=996 200906091017.jpg昨晚苹果WWDC上展示了safari 4.0，把ie8鄙视了一把。今天来公司就发现苹果马上推送了Safari 4.0的更新（该死的IE什么时候能够有一个好的自动更新体验？？？）。

更新完成后，不需要再找什么汉化补丁了，界面直接汉化了。不过4.0正式版取消了Chrome方式的tab栏，有回到了以前3.0方式的tab，找不到切换的设置。


苹果中国 - Safari.jpg

另外设置里可以设置数据库的存储空间（舜子不记得beta版有没有这个设置了），数据库默认是5M，最大是500M。和flash的shareObject一样，超过了是要向用户申请的。

安全.jpg

显示数据库可以看到每个域名的数据库使用情况

Safari.jpg

另外，开发者工具也进行了本地化，看起来是不是很体贴？：P

Web 检查器 — http___www.apple.com.cn_.jpg

]]> http://www.pjhome.net/article/Web/qzone_work_in_maxthon3.htm <![CDATA[终于找到QQ空间无法在Maxthon3打开的问题]]> puterjam@gmail.com(puterjam) Fri,22 May 2009 00:07:19 +0800 http://www.pjhome.net/default.asp?id=992 Maxthon3 使用了webkit 引擎，给中国低迷的浏览器兼容之路打了一个强心剂。我也专门测试了Qzone 在Maxthon3下的问题。

 

今天过一个晚上的测试，终于发现了问题所在，这个和Chrome刚发布时Qzone无法打开问题是一样的。在我们的脚本里出现了一些UTF-8的BOM签名。 这个签名是不应该出现在数据传输过程的。早期Chrome刚采用的webkit引擎也出现过同样的问题，后来在某个版本Chrome很好得兼容了这个问题。而这个签名的16进制是

    EF BB BF

同样是webkit，这个同样的问题出现在了Maxthon3上面，呵呵。

 

这个 BOM 就是导致一些webkit引擎出现异常的问题所在。

 

其实这个问题也比较好解决，保存文件的时候不要选择保存带UTF-8签名的文件。貌似DW会自动加上签名。。。

 

删除BOM多余的签名信息后，Qzone在Maxthon3下和正常的Webkit一样正常打开了。

]]>