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年流行起来。

阅读全文…

十三个你应该了解的免费Web应用，我相信其中肯定有你需要的，无论你是不是和我一样是一名程序员，或者只是一个普通的网民。其中包括免费的讨论版，免费的文件存储，免费的项目管理系统，还有在金融危机的背景下的理财系统。如果您有其他更好的，或者是国内类似的系统，希望您能留言和大家一起分享一下您的收藏。对于那些在国内可能用到机会很小的，我就只保留链接，不介绍了。

1 moneyio

钱包网 网络账本

个人理财系统，当然肯定是不太适合国内用户，推荐几个国内的记账类系统，开心网里就有这个功能。

http://www.qian8ao.com/

账本网 网络账本

http://www.zhangben.com/

2  Clikboard

最快捷的在线公告板

的确非常方便，如果有什么需要展示给朋友们的，不需要复杂的配置，当然也没有强大的功能，一切都是为了快捷。

3 Lighthouse

免费项目管理系统 ticket system

这个要重点推荐一下，像我这样“有经验”的IT民工，用过大多数tracking系统，大牌的JIRA，RationalClear系列，恶心到死的Notes，轻量的Redmine，trac等等，的确是工作项目中不可或缺的一个组成部分。LightHouse是一个风格很清新的管理系统，而且功能也不错。值得试试看。

P.S. 我恨Notes，特别是DB在大洋彼岸的Notes！

4   Senduit

免费文件在线存储分享

一个好用在线上传分享文件的站点，类似的可能很多，Senduit 的最大文件上传可达100MB，无需注册！用户可以自己选择文件的存储期限，从30分钟 到 1周 存储期限可供选择，所以Senduit只适合文件的临时存储，而不宜于永久存放。关键是没有满眼的广告，站长做广告无可厚非，关键是别像mofile那么恶心。

5   Web Valuer

算算你的网站值多少钱

这个很多人都推荐过了，算算你的网站值多少钱，算是个小widget，可以丰富下你的网站。可惜不能兑现。。。

6  Manymoon

任务关系系统

一个Task管理系统，可以和朋友share任务，并且一起合作，这个里面貌似有了Remember Milk，其他很难望其项背，而且本地还有更加强大的Outlook，可以试一下，说不定讨你喜欢。而且最近Gmail也支持Task了。
7  Nicetranslator

免费翻译网站

非常不错的翻译网站，可以同时翻译多国语言。

为了展示下他的实力，该段介绍完全由它自己翻译成中文。

NiceTranslator is a fast, easy to use online translator designed with simplicity and functionality in mind.

Chinese

NiceTranslator是一种快速，易于使用的在线翻译设计简洁，功能一点。

Dutch

NiceTranslator is een snel, eenvoudig te gebruiken online vertaler ontworpen met eenvoud en functionaliteit in het achterhoofd.

（唉，我最近2周都沉浸在无比恶心的程序多语言调试中）

8   Grapevine

在线语音分享

葡萄网，用你的声音去结实更多的朋友，英语好的同学可以去试试看。

9  LucidChart

在线Visio 流程图绘制

虽然国内的Office普及率是100%，但是Visio就不那么普及了，需要的时候可以派上用场，在线免费Visio绘图工具。

10 Panels

一款让你的Blog增色不少的widget，看上去蛮好用的，不知道适不适合国内的网络情况，明天要研究一下。

11 Typealyzer

通过你的Blog文字来判断作者的性格，不过显然中文不在被支持的语言里面。

12  Pixelpipe

分享你的音乐等内容，似乎最近的虾米网更适合我们。

13  Sitonomy

这是个挺有用的东西，能通过URL来分析这个网站的一些有用的信息，比如是采用什么开发语言啊，使用了那些网络服务，比如AdSense啊，使用哪家的网络统计。有点看人家身上装备的感觉。试试看吧。

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还是大写的，不喜欢。

阅读全文…

最近每天沉醉在那堆垃圾代码中改着无穷无尽的Defect，也算是为了对岸几百万移动用户的福祉做出应有的贡献了。

非常有名的CSS Framework – Blueprint在更换了项目leader之后，最近发布了一个新的版本，Blueprint(Css Framework) version0.8。新的leader将这一版本称为新的里程碑版本。并且看的出来，作者对于1.0的正式release有着很高的期待。

简单介绍一下Blueprint这个CSS Framework，翻译自Blueprint的Quick Start Tutorial，如果需要原文在官方网站上都有。我只是节选了一些：

源文件:

• blueprint/src/reset.css: 基本已经总结出最佳实践的reset.css，为页面元素重置默认值。
• blueprint/src/grid.css: 之前我也介绍960gs这个Framework，grid原型设计现在是很流行的原型设计方法了，Blueprint也提供了很多方便的class来帮助你快速建立grid布局。
• blueprint/src/typography.css: 关于排版的css，包含了一些非常精妙的文字排版样式。
• blueprint/src/forms.css: 包含了一些表单样式。
• blueprint/src/print.css: 很多时候我们没有考虑到用户的打印样式，很多无用的图片，广告都是用户所不希望打印，所以需要重新设置打印样式。
• blueprint/src/ie.css: 包含了ie6和ie7的许多css hack。

再来简单看看到底该如何使用grid.css，之前写[960是个神奇的数字 - 960 Grid System介绍]，就有人问到底该如何使用960gs这样的框架，还有人说其实我也讲不出该如何使用。我看下来，可能是很多人对原型辅助css的期望过高了，他并不会帮我们做什么事情，只是帮助我们更好的去做一些事情，来看下例子：

<div class="container showgrid">
    <div class="span-24">
        头部页眉
    </div>
    <div class="span-4">
        左边侧栏
    </div>

    <div class="span-16">
        <div class="span-8">
            居中行1-1
        </div>
        <div class="span-4">
            居中行1-2
        </div>
        <div class="span-4 last">
            居中行1-3
        </div>
        <div class="span-16 last">
            正文内容
        </div>
    </div>

    <div class="span-4 last">
        右边侧栏
    </div>
    <div class="span-24">
        页脚
    </div>
</div>

效果图：

通过这些预置的class，能够很快的排版，我想通过这个例子大家应该能理解类似于blueprint 960gs这样的framework该如何使用。

如果感兴趣的话，去下载使用吧 http://blueprintcss.org/

萬聖夜（Halloween）在每年的10月31日，是西方世界的傳統節日，主要流行於北美、不列顛群島、澳洲和紐西蘭。當晚小孩會穿上化妝服，戴上面具，挨家挨戶收集榶果。華語地區常將萬聖夜誤稱為萬聖節。萬聖夜英文稱之「Halloween」，為「All Hallow Eve」的縮寫，是指萬聖節（All Hallow’s Day）的前夜，類似於聖誕夜被稱為「Christmas Eve」。「Hallow」來源於中古英語halwen，與holy詞源很接近，在蘇格蘭和加拿大的某些區域，萬聖節仍然被稱為「All Hallow Mas」，意思是在紀念所有的聖人（Hallow）那一天，要舉行的彌撒儀式（Mass）。

萬聖夜通常與靈異的事物聯繫起來。歐洲傳統上認為萬聖節是鬼魂世界最接近人間的時間，這傳說與中國的盂蘭節類似。美國明尼蘇達州的阿諾卡（Anoka）號稱是「世界萬聖節之都」，每年都舉行大型的巡遊慶祝。

摘自wiki http://zh.wikipedia.org/wiki/%E8%90%AC%E8%81%96%E5%A4%9C

 //—–

//——-

//—–

//——

想更加原汁原味的领略万圣节的氛围，请移步：

http://www.smashingmagazine.com/2008/10/27/halloween-desktop-wallpapers-and-diy-tutorials/

祝各位小南瓜节日快乐，让我想到了本。