Tilt 是一个将页面按照文档树的结构3D化的Firefox插件。它基于WebGL,看起来非常的酷,今年七月当 tilt发布第一个alpha版 的时候,我就被它惊艳的效果吸引了。时隔3月之后,这个插件发布了新的更新,同时Mozilla也发了篇新文章 Debugging and editing webpages in 3D。
Photoshop 笔刷资源
虽然不搞PS和网页设计很久了,不过过往几年的各种有关PS的积累却还是在那里慢慢生锈。既然以后估计不会在用到,那么共享出来给有用的人最好不过了。本文主要是一些链接,关于PS的各种笔刷——在网页设计里,我觉得笔刷的重要程度仅次于灰度、渐变和阴影,不论是用以表现纹理,还是做必要的修饰,甚至仅仅只是浅到看不清的底纹,即使是细微之处都让设计看起来更浑然一体。
当然笔刷虽然强大,但实际上,可能平时收藏了很多,到时候基本自己也忘记自己有些什么,也就更加谈不上去用了。所以有一个分门别类的网站就显得更加重要。下面列举的这些网站是我以前经常查看的,其中任何一个的资源量都足够一个设计师长时间使用。很多笔刷都异常绚丽,有时候不仅仅是拿来用——比如拿来找些灵感也相当给力。
因为罗列资源网站并截图的做法在国外的文章里特别常见,为此我也特意模仿了那种截图的处理风格,并做了一个Action加快处理速度。很久不用PS的缘故所以还颇费了一些周折:-)
字符当先: HTML Entity
相信每个对性能有追求的前端,都潜在是一个字符控。对于形形色色的指示性图样总琢磨着以字符解决,诸如常见的左右箭头,引导阅读的双向指针,或者还可能是下拉菜单的一个向下的三角箭头…这些做法可能看起来有些极端和没有必要,但即使如此,这里面多少也透着极客的味道。
我是一个非常彻底的字符爱好者,能用字符、样式的,坚决不使用图片。很多时候,对内容的图片尺寸往往大手大脚,压缩的时候总是一再放宽,但是对于装饰性、引导性的图标等却异常吝啬。即使是自己的博客,主题也是纯CSS没有半张图片——RSS是CSS3绘制,IE7以下根本就不会出现;tab导航时box-shadow绘制,IE8以下全部都显示纯色;搜索按钮也是CSS定义,想必IE下会是相当丑陋…没有图片这一点其实并不能带来什么性能上的提升,这恐怕只是一种折腾的精神:-)
我们在哪里找到我们想要的字符?或者说,我们应该在哪里参考我们想要的字符?我给出我一般会去的地方:
页面Coding自动刷新利器——Live.js
前段时间在论坛看到有人写了一个检测文件变化并自动刷新页面的程序,如是,就可以不用一边编写页面代码一边还要alt-tab切换浏览器来查看页面效果。功能很简单,但是效果不俗,因为高速的页面编写不再因为切换和刷新而降低编写效率,如果拥有双屏显示,一边放编辑器,一边放浏览器,效率提升还是相当可观。
然而前端也早有类似的解决方案,不用写本地程序来监控文件的改动,也不用控制浏览器的刷新,仅仅只需要一个JS就能做到这一切了,只是很多人并不知道其存在而已,它就是——Live.js。
网页色彩记论
作为一个专业前端谈及网页设计的颜色似乎有些跑调,不过在没有成为一个前端之前毕竟也曾是个苦憋的菜鸟级设计师,所以对色彩多少也有些自己的看法。其实不论是大学期间所见所学的还是工作之后看到的各种文章里描述的色彩理论,最后只能沉淀成一种似有非无的东西。比如前些日子看的 Color Theory 101 和 The Psychology of Color,现在在脑子里只有非常模糊的印象。设计者最后仍然还是照着自己的方式创造着美,和一些独有的郁闷:)
网页设计,很大程度上就是布局和层次,前者用空间衡量,后者用光影表现。任何美的技术都有相通之处,所以色彩有的时候并不是必须的东西,黑白和灰度足以表现空间和层次。这之后才是色彩,一种我们与生俱来的分辨方式和暗示。而我写这篇文章的目的,并不是想讲述太多众所周知的理论,既然是记论,其实主要作用就是记录一些色值,这个页面最后会变成我的类似工具参考的页面一样。
iline主题的手持设备支持
写第一个wordpress主题,我用了约两天的时间,设计绘制PSD稿1天,前端代码1天,但那个主题我完全已经忘记是怎么回事了,显然已经成了豆腐渣工程。一个仅仅外观比较清爽的主题,没有任何额外的思考。于是,琢磨着各种各样的想法,就有了现在这个博客所使用的主题,名字叫iline,就是”爱线条”的意思。而这个主题从开始写到现在,悄然已经过去了半年了…
3个月时间构建结构,3个月时间构建功能,有空就改进一点点,慢慢打磨出来的自己的主题,不过离完成却仍然还有很长的路要走。
word-wrap导致的li额外间隙
有些问题可能很少有机会遇到,前段时间我就在工作中遇到一个由word-wrap引起的兼容问题。因为当 word-wrap:break-word 这种 rule被加到了全局CSS里后,出现问题就显得非常隐蔽,所以排查了不少时间才找到原因。不过这也不算大问题,因为造成这种情况是多种因素的巧合。
line-height导致的邮件图像间隙
众所周知,OutLook2007不是使用IE来渲染HTML邮件的。为了它所谓的安全性和扯淡的统一性,微软采用 office word 统一渲染,这就使得Outlook2007对HTML邮件支持非常有限。
不支持浮动和定位,那些属性统统会被过滤掉。还有糟糕的背景图片支持,使得我们开始重新使用table来布局,用图片拼接起促销的页面,为的可能只是那一点点兼容性。
上周就遇到了这个问题。
WordPress主题swordis
终于下决心挤个时间出来做个wordpress主题。但是即使做出来估计自己也不会用的囧,因为我是bito主题的铁杆fans!
用了半天时间出了个PSD设计稿,又用了半天时间HTML化。还好设计的时候就着眼于简单,所以虽然搞了一天有些头晕,但还算比较快。基于wp的default,总的来说除了comment以外的CSS都重写了。
当然,因为刚刚写好的关系,背景图还么有整合,CSS也没有优化,并且还有众多的bug。不过没关系,作为自己第一个wp主题,慢慢琢磨就行了~
已知的问题有:
- 虽然一开始写完测试环境是通过HTML5验证的,不过自己博客上的文章一加上就超多error。
只用IE6和chrome开发的,所以其他浏览器情况完全未知,尽管我都尽可能的按标准来。- 颜色问题还值得推敲,排版也有很多要微调下。
还有好几个小图标在绘制中,所以标签、分类、评论前面现在都还是空的。- 功能还不全,
比如搜索、RSS,还没来得及赶上去。
现在先拿出来用几天,过些时候总结出一堆问题后就可以着手改进。目标版本0.5,基本实现功能完整~
SQLite向MySQL的数据库迁移
这是我一份工作文档拷贝。
08/03/2009 created by iifksp。
SQLite向MySQL的迁移(migration)分为3步
- 将数据库从SQLite导出。
- 修改SQLite的.sql文件内容,使其兼容MySQL的sql语句格式。
- 将数据导入MySQL。
其中第二步最为关键。下面的兼容性修改,并不能100%保证迁移的成功,但这些是我所知的全部差异,并且在我工作中的案例中表现良好。