<![CDATA[PuterJam's Blog - Diary]]> 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/Diary/PJHome_In_Iphone_Preview.htm <![CDATA[PJHome In Iphone Preview]]> puterjam@gmail.com(puterjam) Thu,08 Apr 2010 13:15:15 +0800 http://www.pjhome.net/default.asp?id=1023  

同样是个实验性作品，还在开发中，暂时直接读取RSS，还没正在读取日志内容。

不过在 iphone 上开发web产品的确很过瘾。 浏览器支持程度给开发更大的开发空间。完善的HTML5和CSS3特性，某个角度上讲iphone的确没啥必要需要Flash。

]]> http://www.pjhome.net/article/Diary/PJHome_3_new_style.htm <![CDATA[PJHome新风格上线]]> puterjam@gmail.com(puterjam) Tue,06 Apr 2010 13:58:06 +0800 http://www.pjhome.net/default.asp?id=1022

经过三天放假时间，把PJHome的首页的样式进行了一次彻底的改版。之前就打算尝试用CSS3来做一个新的主页，现在总算完成了。

新版主页，设计出过两版，因为家里的显示器差异问题，第一版被我否决了。原因是不同显示器上差异太大（眼睛被欺骗了）。

在这个版本的风格中，样式的编写是基于Chrome的环境下编写的。所以这个风格也只有在safari和chrome下能还原完整的效果。firefox和IE8其次，Opera下还有一些小问题，不过问题不大。 IE7和IE6细节上的差异就很多。本来打算放弃IE6的，不过当我调整好IE7后，又不忍心hack了一下IE6至少算能看了，但是不支持IE6的决心没变。

在做这个风格的时候，也发现了自己在写PJBlog的皮肤框架的很多不足，所以为了实现这个风格的部分效果，没办法改动了一些程序的模版，所以就不提供下载了。整个风格还是实验性阶段，样式很凌乱没有系统得整理好，一些细节还有问题。

 

1）新风格的特点：

      很多页面的实现采用了CSS3来完成。减少了很多不必要的图片开支（当然还没做得和彻底）。

      在Chrome和Safari下 能够100%还原页面， firefox 和 IE8 Opera能够还原80%左右，IE6 IE7会再损失 10%的特性。 

      如果装了雅黑字体，浏览会更加完美

      960样式布局，这真是一个神奇的数字。

      更加简洁的页面布局

 

2）CSS3 差异？

 

(顶部登陆框，用到的rgba和圆角，以及text-shadow)

 

(文字渐变色，用到了webkit的mask image和渐变色填充)

 

(日期，用了文字投影，1px的白色底)

 

 

(最复杂的一部分，用了:after 伪类填充文字，然后过渡渐变，最后鼠标移动的时候把伪类填充出来的文字过渡到白色)

 

(tag的效果，只用了圆角)

 

(图片框，用了圆角和box-shadow)

 

(动画转动的翻页，只有chrome下能看到。当然还有投影)

 

(这个很简单，投影和圆角)

 

3）初稿截图，最初的稿件，只上线了一天，被我否掉了。。。

]]> http://www.pjhome.net/article/Diary/diary20091016.htm <![CDATA[发现自己写日志频率又再次降低]]> puterjam@gmail.com(puterjam) Fri,16 Oct 2009 13:08:29 +0800 http://www.pjhome.net/default.asp?id=1012
学生时代，用写日志记录心情，工作时代，用写心情记录日志。退休后会怎样呢？]]> http://www.pjhome.net/article/Diary/1010.htm <![CDATA[参加webrebuild.ORG第三周年座谈会]]> puterjam@gmail.com(puterjam) Sat,22 Aug 2009 10:34:50 +0800 http://www.pjhome.net/default.asp?id=1010

彪叔发起的webrebuild已经三周年了，应邀请在会上做一个PPT分享。


/**@fileoverview webrebuild.ORG第三周年座谈会 */
时间：2009-08-22 14:00 – 2009-08-22 18:00
地点：深圳-华侨城生态广场-午后浓香咖啡厅
说明：webrebuild.ORG的成立日为2007年8月18日，今年为第三年年会，因为本年的8月18日为工作日所以延迟至22号举行。
座谈会内容：相互见面、交流、探讨webrebuild的发展路向；其间有业界大牛分享如下：
          腾讯－陈子舜（PJBlog作者）《第一现场》
          迅雷－黄疑凝（迅雷在线主重构设计师）《暂定：仓促中的页面构建》
          迅雷－汪洋（迅雷网游页面重构师）《暂定：居中背景图片显示问题》
          网易－鲁齐 《公用模板的重构》
          腾讯－梁璟彪（重构纹身佬）《一专多长》
          便利中国－何传烽
          珍爱网－胡玉柱，纪海丹等
          腾讯－辛春红《前瞻性研究-RDFa》
座谈会费用：AA制、预计100元/人。
预定人数：30人以上。
参与条件：将预约信件发送到herman.zhang@gmail.com，抄送到twinsenliang@gmail.com。
主办方：http://www.webrebuild.org

 

附上我的PPT的第一页, 会后再给大家分享出来:P

]]> http://www.pjhome.net/article/Diary/ie6_go_home.htm <![CDATA[一副漫画：IE6滚回你老家去]]> puterjam@gmail.com(puterjam) Wed,17 Jun 2009 13:05:44 +0800 http://www.pjhome.net/default.asp?id=1000  

 

摘抄一段翻译:

IE6：喂! 你们! 为什么总不让我一起玩!
SAFARI：滚回家去，IE6!
OPERA：对啊，你经常把我们最酷的玩意儿弄坏!
FIREFOX：我都不敢相信你和那厮有瓜葛，IE7!
IE7：我靠，别哪壶不开提哪壶!

 

 

]]> http://www.pjhome.net/article/Diary/ghost_css_sprites.htm <![CDATA[温习~~ 帮鬼鬼同学的软件设计的icon]]> puterjam@gmail.com(puterjam) Tue,02 Jun 2009 00:30:27 +0800 http://www.pjhome.net/default.asp?id=993

 

阿鬼同学写了一个样式的精灵（被我恶心地翻译了一下）工具， 答应帮他设计一个icon。 也顺便温习一下自己的设计能力。不过个人水平有限，不会画图，就用程序员的方式来制作吧(图片直接用 webdings 字体 -.-)。

这个图标分三个部分，中间的大括号，代表CSS里经典的符号。 通过这个括号，我们可以用代码（左边）来把一张图片（右边）分割成很多小块。 图片的颜色采用紫色和天蓝色。两种波长很短的颜色, 可以在安稳中表现出不安分的活泼。

代码部分灰色其实是很枯燥的成分，但是通过我们的页面重构同学能够把枯燥的代码变得很活泼可爱。 - -！ 想得有点多了。。。

]]> http://www.pjhome.net/article/Diary/pjhome_favicon.htm <![CDATA[更新站点的favicon]]> puterjam@gmail.com(puterjam) Sat,09 May 2009 13:53:18 +0800 http://www.pjhome.net/default.asp?id=986 俺的部落格的favicon基本上已经百年未更新了。 今天找了一些时间绘制了一个新的icon。

icon的设计基本上是使用iphone图标的原型，圆角的图标。

 

这种图标的绘制比较简单，几个层就可以搞定，我使用的工具是firework。╮(╯▽╰)╭没有PS的天份没办法了。

 

做了几种尺寸的icon. 当然最后还做一个动画版本的16x16的icon.主要是firefox支持动画的gif作为favicons

修改的了一下代码，让浏览器更好得支持icons

 

    <link rel="icon" href="/icons/pjhome_logo_32.png" sizes="32x32">
    <link rel="icon" href="/icons/pjhome_logo_48.png" sizes="48x48">
    <link rel="icon" href="/icons/pjhome_logo_64.png" sizes="64x64">
   
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/icons/pjhome_logo_gif.gif" type="image/gif" />

 

最上面三句，其实不会对浏览器起作用。但是它会对一些 web To App 程序起作用，例如 Prism，可以告诉转换程序站点提供了更大的图标作为桌面应用的图标。

最后两句，顺序不要相反咯，要不firefox不会显示出动画图标咯。 :P

 

 

]]> http://www.pjhome.net/article/Diary/qzone_do_not_use_ie.htm <![CDATA[提高Qzone访问速度的最简单办法]]> puterjam@gmail.com(puterjam) Fri,08 May 2009 18:14:18 +0800 http://www.pjhome.net/default.asp?id=983 请使用非IE浏览器访问QQ空间

总所周知，Qzone 是一个很庞大的系统(我已经不敢称她是网站了)。在一个普通的浏览器上承载了大量的信息，从文字到图像到动画。 基本上都是对ie的一个很大的挑战。

 

浏览器兼容我们一直都在很努力改善，到本文为止， 最大的浏览器问题只出现在 留言板和Club上，我们还在不断努力修复这些破旧不堪的模块。其他的模块均已经在各大浏览器下很好地工作。当然还有很多朋友觉得Qzone是浏览器不兼容的代名词，着不怪大家（以前我也是这样认为的）。 但是只要我们努力了，还是有信心颠覆这个庞大的系统，使其走上正常的轨道，少走弯路。

 

在我们的测试中 windows 下 firefox 是最好的选择，而mac下的safari是目前效果最棒的。当然还有google的浏览器(强烈推荐)也是一个非常棒的选择(当然这里不包括ie引擎的第三方浏览器，例如遨游，TT；他们都是ie的受害者)

 

往后的考虑，希望给Qzone增加更多非IE的优惠，让她在非IE浏览器下得到更多的速度提升和优化方案。

 

 

 

]]> http://www.pjhome.net/article/Diary/opera_15_BDay.htm <![CDATA[opera 15岁了]]> puterjam@gmail.com(puterjam) Wed,29 Apr 2009 01:04:31 +0800 http://www.pjhome.net/default.asp?id=980 Opera 15th Birthday banner

 

今天，你可以打开 opera 官网看到一个很奇怪的页面

不仔细看还以为 opera 被黑了，其实不是。今天是Opera的15岁生日。

http://www.opera.com/portal/15/

 

Comic strip

]]> http://www.pjhome.net/article/Diary/2009_CSS_Naked_Day.htm <![CDATA[2009 CSS Naked Day - 2009网页裸奔节]]> puterjam@gmail.com(puterjam) Thu,09 Apr 2009 06:39:38 +0800 http://www.pjhome.net/default.asp?id=974
CSS Naked Day 2009

CSS Naked Day 的来历

CSS Naked Day，也称CSS裸奔节或CSS裸奔日，

在裸奔节这天，参加裸奔节的Blog 将会去除页面上所有的 CSS 样式和广告裸奔整整一天,通过这个节日来重视CSS的重要性.当然你的网站如果是用table来布局的话这个节日对你来说并不是很合适.在2006年有将近800个国际知名网站参与这个节日.

CSS Naked Day 的目的

推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。暂时把页面设计抛弃，直接展示<body>内容！

历届CSS Naked Day的举办时间

第一届CSS裸奔节：2006年4月5日

第二届CSS裸奔节：2007年4月5日

第三届CSS裸奔节：2008年4月9日

第四届CSS裸奔节：2009年4月9日

]]>