IT民工的坐井观天

书接前文

6. 模式窗口（LightBox技术）

模式窗口技术，作为第二代弹出内容技术。模式窗口（LightBox技术介绍）能够很好的代替原来的Javascript弹出窗口，提供更加友好的用户体验，并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发，类似于传统的桌面应用。多数情况下，这些弹出窗口都带有深色半透明的背景和一个关闭按钮。

7. 多媒体模块

随着宽带的普及，现在的用户已经能够接受更多的内容，所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容（比如视频和屏幕录像）。这有助于迅速有效的让用户消化接受你想传递的信息。

这些视频能够很好的讲解你的网站的每一个步骤，不再需要多次点击，搜索，或者学习如何导航。通常这些视频长度都不会太长，但是内容要保持完整。

注意，绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分，毕竟不是所有的用户拥有良好的网络条件，抑或是有些用户并不希望这种形式，有可能他正在机器上收听音乐或其他视频。

阅读全文…

原文链接：http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

网页设计师是一群非常善变最新的人，总是希望尝试更新的设计理念。让我们来预测一下2009年的网页设计趋势。

1. Letterpress 凸版效果

在我们的观察中，一个意料之外的趋势是，凸版效果(Letterpress，也就是我们的篆刻中的阴文效果)。这样的趋势，可能是因为一个简单的原因，因为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上，多位在线服务网站。

2. Rich UI 交互式用户界面

令人感到欣喜，现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中，这些基于网页的应用有了惊人的进步，这些交互式用户界面越来越像传统的桌面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目，强大的网页应用。

更看到一些特别之处，这些年我们发现网页上有了更多的空白空间，页面元素间的间距也变得越来越大。我们也观察到，越来越多的站点开始在页面上提供直观的用户动作响应。比如，页面上的按钮会根据用户的动作，比如点击响应不同的状态表示“正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的响应。所以我们断言，自适应用户界面将会在2009年流行起来。

阅读全文…

SmashingMagazine今天给我们带来了一篇非常全面的汇总，介绍了50个超级有用的CSS开发工具，其中相当多的小工具都是让我觉得非常有帮助的，甚至有了做几个中文版的念头，虽然C2C(Copy to China)的习惯并不是那么好，但是有的时候真的觉得在每日奔波，与CPI抗争的局势下，要有点创新的主意真的很难。

闲言少叙，让我们开始惊艳之旅，要先说明一下，”Firebug” 和 “WebDeveloper” 两位同学将缺席本次颁奖活动，因为他们实在太出名了。

CSS and Typography

Hyphenator Hyphenator.js解决了西方语言断词的问题，给行尾换行的单词加上了“-”连字符。相信很多程序员都被QA报过这样的defect，新建一条数据，有个column是afsafdsafsadfsafsafafsafasfsa，然后说页面被撑破。总是被我无情的Won’t Fix。实在不行了word-break一把。中文不会遇到这个问题。有兴趣的你去看一下。

CSS Type Set 貌似被墙了，有兴趣的翻出去看看

Typechart 快速浏览，比较各种不同的文字排版样式，（如果可以通过上传css文件来快速预览，倒也是个不错的idea）

CSS-Typoset Matrix and code generator

快速生成最常用的一些Tag的字体大小设定，由Px转换到Em尺寸上，可以比较完美的做到文字缩放。

body { font: normal 0,8764em/1.5em Arial,Verdana,sans-serif; }
html>body { font-size: 14px; }
p { margin: 1.5em  0; font-size: 1em; line-height: 1.5em; }
h1 { margin: 1.05em 0; font-size: 1.4286em; line-height: 1.05em; }
h2 { margin: 1.1667em 0; font-size: 1.2857em; line-height: 1.1667em; }
h3 { margin: 1.3125em 0; font-size: 1.1429em; line-height: 1.3125em; }
h4 { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h5 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
h6 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
类似这样

Em Calculator 楼上那个的图文加强版

真的是很好很强大，不单是觉得挺有用的，整个App的UI设计也非常让人满意，值得学习。

Facelift Image Replacement (FLIR) 快速创建图片替换的代码，FLIR技术，读作Fleer。

Vertical rhythm calculator 好多计算器，不得不说，欧美的设计师们更加注重这些细节。

typeface.js 总是感叹网页上文字能够使用的字体很有限，羡慕在PS或者Flash中可以随意挑选。typeface.js能帮你实现内嵌字体技术。

看到上面也许你会兴奋，但是对于老外的52个字母来说，这是很梦幻的效果，对于中文来说，没戏了，把几千个汉字打包到js中实在太可怕了，无论是可用性还是性能都不会让人接受。不过适当的将一些常用字做进去，可能会有不错的效果，好像是perl的build脚本，上次打包过一次，败了。

CSS Online Tools

PSD2CSS Online 在线的PSD文件到CSS的服务，没用过，也不想用，都有这个了，民工吃什么。

Conditional-CSS 根据你上传的CSS文件，检查其中一些css hack，用条件注释来保证浏览器兼容性。

说实话这是维护代码的噩梦开端。

MoreCSS CSS的js扩展，利用js来实现很多CSS中没有的特性，类似于那个著名的IE7.js，不过这种工具也算是双刃剑，怎么用看自己了。

px to em  速查表，我看到em都汗了。。

CSS Frame Generator 请看我以前的介绍文章 http://www.1×3x.net/blog/web-design/2008/04/css-frame-generator.html

CSS Redundancy Checker  检查你的CSS文件中那些是冗余的代码

CleverCSS

DSL编码风格的css扩展，又一个类似于MoreCSS的js类库，能让你用非常时髦的DSL风格去编写样式文件，我觉得更酷的是去看看这个js本身。

WordOff 被墙

Postable 帮你快速的escape一下内容

Kotatsu

Table HTML生成器，个人感觉没什么用，而且生成的TAG还是大写的，不喜欢。

阅读全文…

做设计的时候，选择合适的字体是非常重要的一个环节，当然有很多字体查看软件，但是说实话用了那么多，都大同小异，没有什么特别好的。也许是个人习惯的原因吧。偶然看到一篇文章，倒是个不错的办法。自己人肉动手做一些速查的字体cheatsheet，的确是比较直观，比单纯用软件去找来的好。有点按图索骥的味道。看来自己还是太懒，哈哈。

点击查看大图

原文：http://www.dogorgod.com/blog/font-in-design-of-the-skills-seek.html 还提供了字体打包下载

楔子：今天是去金茂上班的第一天，还从来没在42楼这样的高度工作过，还真有点不一样，坐电梯是还有些耳疼的感觉。虽然是办公室变了，但是不变的是需求永远在变。新改动，要给一些元素加mask，好吧，absolute，然后加个颜色盖住。

问题也引出了，Absolute, Relative, Fixed，这些position设置到底有那些不同，分别适合在什么样的场景之下。很多时候还是让人觉得很困惑的。看下定义，你会发现腾格尔是用最大的力气把歌唱轻，他们是用最简单的词把话说的无比晦涩。

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

还是换个方式解读一下这几个选项吧。

 Static 元素默认值，所有元素在没有显式设定Position的时候，都是Static，不过该属性值并没有什么特殊的意义，只是一个初始值。也就是说它并不代表元素具有那些特别的布局定位信息，当你显式去设定为Static时，唯一的作用就是覆盖之前你为Position设定的其他非默认值。
 Relative 相对于Absolute，Relative更让人困惑，经常有人会误用该定位属性。一句话概括就是，“相对于元素自身”，关键词在于自身二字，如果你只将一个元素设置为 {position : relative; } 的话，而不去设置其他offset值，比如top left等，该元素其实等价于{position : tatic;}，元素的位置和表现不会有任何改变。如果你设置了其他定位属性，比如 top:10px; 那该元素将相对自身原来的位置向下移动十个像素，这在用来对齐元素时很有效。

1点需要提及的，z-index，一个relative元素（允许我使用这样不是很严谨的说法）默认z-index高于其他所有static元素，即使你显式的为某个static元素设置高于relative元素的z-index为99999。

 Absolute 这是个强力选项，有点瑞士军刀的感觉，你可以将一个元素定位在页面上任何你希望他出现的地方。对于一个absolute元素，必须指定 left ， right ， top ， bottom 属性中的至少一个，而作为参照的顶点是什么呢？默认情况下是HTML元素，也就是页面的左上角，如果该元素具有一个relative的父节点，那顶点则变为该relative父节点。如果合并一下这句比较晦涩的话就是，包含在relative元素里的偏移值由relative元素左上角开始计算，否则都将以页面左上角计算。

关于absolute元素最重要的一点，就是设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。这点和float元素有些类似。

//==============================================

节译自：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

有些重新演绎之过，但也是为了能够更加适应中文的表达方式。

今天介绍一个网页辅助设计框架，960 Grid System。什么是960 Grid System，简单的来说，是用来辅助设计师快速的创建网页原型的辅助系统，960这里是网页的横向尺寸，960px，为什么是960这个数字，而不是1000或者900？

来温习下数学推演：

960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为：

N(960) = N(2^6 * 3 * 5) = 26

同理可以得到：

  N(480) = N(2^5 * 3 * 5) = 6 * 2 * 2 - 2 = 22 

  N(750) = N(2 * 3 * 5^3) = 2 * 2 * 4 - 2 = 14

  N(800) = N(2^5 * 5^2) = 6 * 3 - 2 = 16

  N(1000) = N(2^3 * 5^3) = 4 * 4 - 2 = 14

  N(1024) = N(2^10) = 11 - 2 = 9

  N(1920) = N(2^7 * 3 * 5) = 8 * 2 * 2 - 2 = 30

引用：http://lifesinger.org/blog/?p=375

960是1024之下，最灵活的尺寸，而且恰好是1024分辨率下最合适的尺寸，这些条件决定了960成了目前设计中最完美的尺寸。

基本知识介绍完毕，因为有不少人和我一样，乍看960 Grid System，都以为会是个CSS framework，但是它不是。他是一个非常精巧简单的草稿本。就像我们小时候练字用的米字簿一样。

（题外话，当初我挺烦练字的，现在总觉得练个半吊子，后悔了）

现在是不是好理解，什么是Grid System，作者提供给我们的是什么东西了吧。真的是非常巧思的一个东西，怪的有人说数学之美有的时候是那么神奇。就像黄金分隔那样，合适的比例，合适的间隔带来的是稳定而且非常不错的效果输出。

如果你也有兴趣的话，点这里下载。

 我也会后续写一些实际的usage和demo。大家少待。