KanSea
KanSea Studio
Web 设计师的 50 个超便利工具（下）
七 1st
作为一个 Web 设计师并不容易，不仅考虑设计与架构，还要时刻注意各种小细节，设计师的工作被各种各样的问题包围，你需要一套超级便利的工具帮你解决各种消耗时间和精力 的问题。本文介绍了50个非常强大的工具，你会发现，其中的一些工具会让你感到惊艳，这是第二部分。
Kaleido
为你的代码创建视觉化标识。来自麻省理工。
Sketchpad
一个强大的在线图像编辑器。难能可贵的是，这是基于 HTML5 的。
Unicode code converter
虽然界面有些乱，但这个工具能把一段文字转换成各种编码形式。
Grid System Generator
另一个网格设计生成器。
ud.com namecheck （强烈推荐）
这个看似简单的工具，可以帮你查询某个名字是否还可以注册域名，商标，已经社会媒体网络入口。
Typograph — Scale & Rhythm
这个工具可以帮你即时预览各种不同的 Web 排版效果，并生成代码。
ColorBrewer Intro – Selecting Good Color Schemes for Maps
适用于地图的配色工具。
CSS Inliner Tool （推荐）
将独立的 CSS 定义转换为 Inline CSS。假如你使用电子邮件进行营销，会发现这种工具非常实用，因为邮件客户端常常会将你独立的 CSS 代码过滤掉，而 Inline CSS 不会被过滤。
HTML Purifier – Filter your HTML the standards-compliant way!
这个使用 PHP 设计的工具，可以对你的 HTML 代码进行过滤，去除其中的恶意代码，并按 W3C 标准对代码进行净化。
Rendera
在线编写 HTML5 和 CSS 代码，现场看到效果。
RegExr
又一个在线学习，体验，测试正则表单式的地方。
try ruby! (in your browser)
Ruby 在线体验。
Google Command Line
使用命令符访问 Google 的一些产品和服务。
Tiny Fluid Grid
又一个网格设计工具，很小巧。
Fonolo.com
这个很别致的站点，可以帮你快速接通那些大公司的免费技术电话，不过目前只能用于美国和加拿大。
Producteev: Creating To-Do Lists with Emails （推荐）
把重要的工作安排发到 task@producteev.com，他们会帮你生成一个任务列表，以便安排你的日程。
AddUse – User research made easy
一个在线用户测试或调查管理工具。
bookwhen （推荐）
帮助你的用户在线预订你的展会，课程等服务，免费版支持150个项目以及每月300个预订。
味创意的404错误页面
七 1st
错误页面往往是很多设计师遗漏的地方，因为他们很少看到的，或者至少按计划是这样（如果经常看到那就头大了）。但我们都知道的会发生这样的事情。访客可能会输入错误网址，或试图在你网站上找不存在的东西。404页面一般都会收到几次访问，但访问一个错误页面，一定不是愉快的用户体验的一部分。这就是现在许多设计师花一些额外的时间和精力去制作有创意的404页面的原因。这样做可以减少用户使用时的挫折感，并显示了网站对细节关注。在这篇文章里，我收集40个有创意的404错误页面，希望可以激发你灵感。
“貌似页面丢失”， 好可怜的宇航员。（以下所有的图片说明，引号里面是图片中文字的翻译，括号为是译者的评析。）
Abduzeedo
“宇宙迷失”
Tobias Ahlin
“成功人士将受益于错误，并尝试其他途径”。（成功人士，是说太平洋电脑网那个手拿诺基亚的孔乙己么？）
Chris Jennings
“p.s.等会见”，（等会见鬼。）
Mark Dijkstra
“我去那个Mark Dijkstra网站，看到的都是这个恶心的404页面”
futureofwebdesign.com
“休斯敦，我们遇到一个问题”，（休斯顿是干嘛的？不解析。）
twurn
左边那个鸟说：“出毛病了”，右边那个鸟说：“这次轮到你丫去整了。”
IAMWW
“国道404：找不到”，（国道是我瞎掰的，不过也是路。）
amyherndonphotography.com
（我总感觉过一会这小样会笑。）
designzillas.com
“你迷路了！”
xhtml kitchen
Christopher Meeks
“别在意窗帘后的那家伙”
Drexler
“哇！你出界啦”
Oroza
“哎呀！我们搞丢页面了……”
Sandand Starfish
“靠，别！”
Imaginaria Creative
“你遇到了一个大大的404错误”
The Little Cake Parlour
“好像少了一块（蛋糕）”
Carsonified
“我们找不到你想要的”
publicitweet
“抱歉，发生了错误”，（Twitter衍生了不少“鸟”站。）
Salt of the Earth
“我们很抱歉，你所需找的内容这里没有，也许你要到主页去看看。”
Doorstep Dairy
At First Sigth
“哎呀，404错误”，（图片模仿Twitter的错误鲸）
Joyent
dm11sto.com
Veerle
tix02
Fuelly
getdropbox.com
（这个不可能图像本身诠释了错误本身，又转移了人对404错误本身的注意力。）
“一个忍者偷走了本页面”，（这是忍者么，这头戴斗笠的人怎么让我想起功夫熊猫？）
turbomilk
“派对玩完了！”
theesthetik.com
“看来这里有问题了。”
Pixel Thread
hdqt.co.uk
Product Planner
黑板风格。
chrisglass.com
（这图片风格跟我们国家某个年代的宣传画有点像。）
gadies.com
Sofa
“404页面不存在。可能你打开的是过期的书签，或者输入了错误的地址”
Project Fedena
（可爱的猫头鹰。）
David Hellmann
“哇，错误，就在这里！” ，（熟悉的雪花画面——也许现在的孩子不熟悉了）。
Web 设计师的 50 个超便利工具（上）
七 1st
作为一个 Web 设计师并不容易，不仅考虑设计与架构，还要时刻注意各种小细节，设计师的工作被各种各样的问题包围，你需要一套超级便利的工具帮你解决各种消耗时间和精力 的问题。本文介绍了50个非常强大的工具，你会发现，其中的一些工具会让你感到惊艳在，这是第一部分。
LaunchList
站点发布前的工作清单，预设了28个需要检查的事项，也可以自定义。同类工具： Ultimate Website Launch Checklist 以及 The Ultimate Website Prelaunch Checklist。
Pencil Project: Sketching and Prototyping with Firefox
一个开源 GUI 原型设计工具。
Zootool
一个非常漂亮的书签工具，可以将你收集的各种素材，图片，文档，链接，视频等在线组织到一起。
Bounce （推荐）
输入一个站点地址，该程序会给该站点截图，然后，你可以在上面批注，加评论，并和朋友分享。非常适合用来和您的客户在线就某个站点的设计进行讨论。
Ninite Batch Installer
这个站点可以将很多免费的流行软件（最好的版本）打包在一起，一次性安装到你的机器，支持 Windows7，Vista 和 XP。
Support Details （强烈推荐）
假如你想让你的用户提供他/她所使用的浏览器环境，比如 Flash 版本，操作系统，屏幕分辨率，Cookie，JavaScript 状态等，可以让他/她访问一下这个站点，这个站点或自动将这些内容探测出来，并允许用户现场通过邮件将报告发送给你。
MugTug’s Darkroom
一个在线图片处理程序，可以调整对比度，白平衡，曝光，饱和度等，可以从 Picasa 及 Flickr 上传图片，同类产品：Pixlr 及 Sumo Paint。
Visual Website Optimizer （强烈推荐）
Visual Website Optimizer 绝对是你所能见到的最好的 A/B 测试工具。
Keyonary
这个简单的在线工具可以帮你列出 Mac OS X， Photoshop 等工具的快捷键清单。
gridr buildrrr
一个在线网格设计工具，选择你希望使用的网格布局，帮你预览并生成 CSS 代码。
Instant Blueprint – Create a web project framework in seconds.
帮你瞬间生成一个 Web 项目框架，基于合法 HTML/XHTML 和 CSS。
Hummingbird
一个实时的（真正的实时，每秒刷新20次）站点流量分析工具，基于 Node.js.
jsFiddle
在线 Web 编辑器，支持 JavaScript, MooTools, jQuery, Prototype, YUI, Glow, Dojo, HTML 以及 CSS。
String: create a multi-language website or app
帮你创建多语种 Web 应用的资源文件，
Titanpad
可以多人同时编辑同一个文档，别的改动会实时以不同颜色标识，可以是同一个办公室的多个用户，也可以是地球另一边的多个用户。
Pixelnovel Timeline: Version Control for Adobe Photoshop
该工具通过插件方式集成 Subversion 客户端，可以在 Photoshop 中实现版本控制。非免费工具。
0to255
给出一种颜色，会帮你列出这种颜色由浅入深的各种颜色变化，并特别针对 Web 做了优化。
Load Impact: Website load/stress test
一个在线压力测试工具，模拟多用户同时访问你的站点，并出具报告以分析你的站点可以支撑的访问者数量。
Ideone: Online IDE & Debugging Tool
一个在线 IDE 和调试工具，支持多达40种语言，包括 C++, Java, JavaScript, Perl, PHP, Python and Ruby，同类产品：PHP Anywhere 以及 CodeRun 。
Online Dummy Image Generator
快速帮你生成一个在线虚拟图片，以便您进行某些测试。
HiFi RegExp Tool
在线正则表达式工具。
Tableizer （推荐）
将你 Excel 表格中的内容复制粘贴到这个站点，它会帮你生成 HTML 格式的表格（HTML Table）。
FollowUpThen: Easy Email Reminder
-假如你希望有人提醒你什么时候该做什么事，你可以给比如 1day@followupthen.com 一类的地址发个邮件，1day 表示一天后，这样，一天后，你会收到他们的提醒邮件，1day 可以改成人和别的时间间隔。
Divine: Conversion tool from PSD to HTML
这个工具是一个 Photoshop 插件，可以将你的 PSD 转换成 WordPress 主题。（译者：有待验证）
Tutorials:Multiple File Upload Magic
六 22nd
CONTENTS |
[edit]
ACCESSIBILITY FIRST
I’ve gone back to the drawing board on this tutorial a couple times, but finally I’ve created a way to create a similar effect unobtrusively… so that if a user decides to visit with JavaScript turned off, he’ll be able to use the form too. I consider this to be really important, as it will make sure that the maximum number of users will be able to use this form.
[edit]
TWO TUTORIALS FOR THE PRICE OF ONE
Goal #1: To permit multiple file uploads using one file input element… and to make the whole interaction sexy.
Goal #2: To make multiple file uploads sexy… without sacrificing usability. The focus here is to use Unobtrusive JavaScript to shape a form with multiple file input fields.
[edit]
THE DEMOS
Demonstration one – only one file input element, but with the addition of jQuery and some custom code that you’re about to see it becomes a user-friendly multiple file upload script.
Multiple file upload with one file input
Demonstration two – multiple file input elements in the (X)HTML source of the form but jQuery modifies what the visitor sees and gives a similar feel to the first demonstration. The advantage to this method is that it is unobtrusive… with JavaScript turned off the visitor can still upload multiple files.
Multiple file upload with several file inputs
[edit]
EXPLANATION
[edit]
Single file input
The jQuery $(document).ready() function does two things:
Creates a div where the maximum files allowed is shown to the visitor. Finds the file upload field (assuming there is only one) and attaches an onChange event to it.
$("input[@type=file]").change(function(){
doIt(this, fileMax);
});
The doIt() function (nice name, huh?) checks to see if the maximum file limit has been reached, and if not, it hides the file input field, adds a new one inside the containing div, puts the name of the file chosen inside the div with id “files_list”, and adds a Delete button on the end.
To navigate the DOM tree I use jQuery’s parent() function and then remove elements using the remove() function. I also make use of append() and prepend() to add in the file names and new input fields respectively.
Two key points:
1) You determine the maximum number of files allowed with this line
var fileMax = 3;
2) The file input fields must be named appropriately
<input type="file" name="fileX[]" />
I do this so that the fields can be added and removed by the visitor without any concern for keeping track of id’s or names. When the form is submitted to a server side script, the information is sent in an array that can be easily traversed.
[edit]
Multiple file input
This was trickier to pull off.
First, the number of files allowed is determined by the number of file input fields in your (x)html. Second, you should still name them in a way that stacks the field information into an array.
<input type="file" name="fileX[]"/>
The big difference in this second version is that I loop through each file input field and apply the doIt() function when the field value changes. By looping through each one, I can send an additional piece of information that’s critical to my code: the order of the field in the “stack”.
In other words, as the code executes, it’s specifically targeting the first input field, or the second, or the third.
The code for this is found here:
$("input[@type=file]:nth(" + n +")")
jQuery’s flexibility allows me to use CSS and XPath descriptions to target specific elements.
You’ll notice that as each file is chosen, the file input field is replaced by the name of the file. Clicking on the name of the file allows you to choose a different file.
美公司发明3D生物打印机可打印活体器官
六 6th
器官移植拯救了很多人的生命，但这项技术也存在器官来源不足、排异反应难以避免等弊端。不过，随着未来“生物打印 机”的问世，这些问题将迎刃而解。或许，医生有朝一日可以“按需打印”活体器官，包括血管和完整的器官。
目前，等待器官移植的患者在得到合适的器官以前，通常要等待几个月甚至数年之久。由美国Organovo公司研制的3D生物打印机如今已经可以制造 动脉，开发者称由这种设备“打印”的动脉最早有望在5年内用于心脏搭桥手术。而心脏、牙齿和骨骼等更为复杂的器官则应该可以在10年内被“打印”出来。
3D生物打印机基于现有技术发明，这些技术当前被用以制造工业零部件的3D模型。生物打印机的不同之处在于，它不是利用一层层的塑料，而是利用 一层层的生物构造块，去制造真正的活体组织。这一技术尚处于初级阶段，不过第一台3D生物打印机的原型机已在2009年底制造出来，并用以测试。
3D生物打印机有两个打印头，一个放置最多达8万个人体细胞，被称为“生物墨”；另一个可打印“生物纸”。所谓生物纸其实是主要成分是水的凝 胶，可用作细胞生长的支架。3D生物打印机使用来自患者自己身体的细胞，所以不会产生排异反应。据介绍，这种机器首先“打印”器官或动脉的3D模型，接着 将一层细胞置于另一层细胞之上。打印完一圈“生物墨”细胞以后，接着打印一张“生物纸”凝胶。
不断重复这一过程，直至打印完成新器官。随后，自然生成的细胞开始重新组织、熔合，形成新的血管。每个血管大约需要一小时形成，而熔合在一起需 要数天时间。Organovo公司首席执行官基思-墨菲在接受《工程师》杂志采访时指出，最终有一天，只需轻轻按下按钮，就能让3D生物打印机制造出我们 所需要的器官。
Mac系统快捷键大全
五 29th
最近想用快捷键但是都不知道,用鼠标速度太慢.搜索了一下.
系统启动
在启动时按下 X: 强制使用 Mac OS X 启动电脑
在启动时按下 Option-Command-Shift-Delete: 不使用主要启动硬盘，并寻找使用外接磁盘与 CD
在启动时按下 C: 由具有系统文件夹的 CD 光盘启动
在启动时按下 N: 试图由兼容的网络服务器 (NetBoot) 启动
在启动时按下 T: 以火线目标磁盘方式启动
在启动时按下 Shift: Mac OS X 10.2 后，在「安全启动状态」启动，一切启动项目及不必要运行的核心扩展文件皆不运行
在启动时按下 Command-V: 以 Verbose 状态启动，将临时进入 UNIX 界面，短时不可使用鼠标
在启动时按下 Command-S: 以单一用户状态启动，将进入 UNIX 界面，不可使用鼠标
Finder 窗口
Command-W: 关闭窗口
Option-Command-W: 关闭一切窗口
Command-右方向箭头: 在列表中扩展文件夹内容
Option-Command-右方向箭头: 在列表中扩展此文件夹及一切下属文件夹内容
Command-左方向箭头: 在列表中缩闭文件夹内容
Option-Command-上方向箭头: 打开所述文件夹，并关闭现在窗口
菜单指令
Shift-Command-Q (苹果菜单): 登出用户
Shift-Option-Command-Q (苹果菜单): 立即登出用户
Shift-Command-Delete (Finder 菜单): 倾倒废纸篓
Option-Shift-Command-Delete (Finder 菜单): 倾倒废纸篓，而不需要经由确认对话框确定
Command-H (Finder 菜单): 菜单隐藏 Finder
Option-Command-H (Finder 菜单): 隐藏其他应用程序
Command-N: 在 Finder 中由文件菜单开启新 Finder 窗口
Shift-Command-N: 在 Finder 中由文件菜单创建新文件夹
Command-O (文件菜单): 打开文件
Command-S (文件菜单): 保存资料
Shift-Command-S (文件菜单): 保存资料，名称由用户输入
Command-P (文件菜单): 打印
Command-W (文件菜单): 关闭窗口
Option-Command-W (文件菜单): 关闭一切窗口
Command-I (文件菜单): 打开项目简介
Option-Command-I (文件菜单): 显示属性窗口
Command-D (文件菜单): 复制
Command-L (文件菜单): 在 Finder 中创建替身
Command-R (文件菜单): 显示原身
Command-T (文件菜单): 在 Finder 中，Mac OS X v10.2.8 或者更早操作系统软件版本将所选项目添加至喜好项目内，在 Mac OS X v10.3 及更新版本将所选项目添加至左侧工具条内；如果需要增加至喜好项目内，则须用 Shift-Command-T
Command-Delete (文件菜单): 在 Finder 中，移除至废纸篓
Command-E (文件菜单): 在 Finder 中，推出设备
Command-F (文件菜单): 查寻
Command-Z (编辑菜单): 还原
Command-X (编辑菜单): 剪切
Command-C (编辑菜单): 拷贝
Command-V (编辑菜单): 粘贴
Command-A (编辑菜单): 选定一切
Command-1 (显示菜单): 在 Finder 中，将显示方式设定为图标
Command-2 (显示菜单): 在 Finder 中，将显示方式设定为列表
Command-3 (显示菜单): 在 Finder 中，将显示方式设定为分栏
Command-B (显示菜单): 在 Finder 中隐藏工具栏
Command-J (显示菜单): 在 Finder 中查看显示
Command-[ (转到菜单): 在 Finder 中向最近查看的一个窗口显示内容后退
Command-] (转到菜单): 在 Finder 中向最近查看的一个窗口显示内容前进
Shift-Command-C (转到菜单): 在 Finder 中显示「电脑」窗口
Shift-Command-H (转到菜单): 在 Finder 中显示「个人」窗口
Shift-Command-I (转到菜单): 在 Finder 中显示 iDisk 内容
Shift-Command-A (转到菜单): 在 Finder 中显示应用程序文件夹
Shift-Command-F (转到菜单): 在 Finder 中显示「喜好项目」
Shift-Command-G (转到菜单): 在 Finder 中转至文件夹
Command-K (转到菜单): 在 Finder 中连接至服务器
Command-M (转到菜单): 缩小窗口至 Dock
Option-Command-M (转到菜单): 缩小一切窗口至 Dock
Command-? (帮助菜单): 打开帮助资料
Command-Space (Spotlight 菜单): 激活并使用 Spotlight (限 Mac OS X v10.4 及更新版本的操作系统软件)
万能辅助与 VoiceOver
Option-Command-8: 开启放大功能
Option-Command-+ (加号): 放大
Option-Command– (减号): 缩小
Control-Option-Command-8: 开启白底黑字
Control-F1: 开启全键盘控制 (可以使用再下列表的快捷键)
Control-F2: 全键盘控制: 选定菜单
Control-F3: 全键盘控制: 选定 Dock
Control-F4: 全键盘控制: 选定现在窗口或在其后面的下一个窗口
Control-F5: 全键盘控制: 选定工具栏
Control-F6: 全键盘控制: 选定辅助工具窗口
Command-F5 或 fn-Command-F5: 在 Mac OS X v10.4 或更新操作系统软件，开启或关闭 VoiceOver
Control-Option-F8 或 fn-Control-Option-F8: 在 Mac OS X v10.4 或更新版本，开启 VoiceOver 实用程序
Control-Option-F7 或 fn-Control-Option-F7: 在 Mac OS X v10.4 或更新版本，显示 VoiceOver 菜单
Control-Option-; 或 fn-Control-option-;: 在 Mac OS X v10.4 或更新版本，激活或关闭 VoiceOver Control-Option 锁定
当全键盘控制功能开启，可使用下列数码键盘按钮；如果无此键盘，则应同时按下 Fn 功能键:
8: 向上移动
2: 向下移动
4: 向左移动
6: 向右移动
1、3、7 与 9: 斜行方向移动
5: 点按鼠标按钮一次
0: 点按鼠标按钮一次，而保留按下
. (句号): 0 按下后，按此键解开鼠标按钮按下锁定
其他指令
Option-Command-D: 显示或隐藏 Dock
Command-Tab: 更换应用程序
Tab: 选定下一个项目
Command-上方向箭头: 转入向上的文件夹
Command-下方向箭头: 转入向下的文件夹
Page Up 或 Control-上方向箭头: 往上移动一页
Page Down 或 Control-下方向箭头: 往下移动一页
鼠标按键按下并拖项目时按下 Option: 在新位置中创建复件
鼠标按键按下并拖项目时按下 Option-Command: 在新位置中创建替身
鼠标按键按下并拖项目时按下 Command: 移至新位置，而不创建复件
Shift-Command-C: 在应用程序中显示彩色选项小窗口
Command-T: 在应用程序中显示字体选项小窗口
Command-Shift-3: 拍摄显示屏内容
Command-Shift-3 并选定时按下 Control: 拍摄显示屏内容，并将其图像内容置于夹纸板内 (此快捷键未出现在苹果英文原文内，由北麦自行所发现)
Command-Shift-4: 拍摄所选定的显示屏部分内容
Command-Shift-4 并选定时按下 Control: 拍摄所选定的显示屏部分内容，并将其图像内容置于夹纸板内
Command-Shift-4 并按下空格按键: 拍摄所选定的窗口的显示屏内容
Option-Command-esc: 强制退出
Control-Eject: 显示可以选定重新开启系统、睡眠与关机的选择对话框，在笔记本中按下 Power Button 电源开关按钮起同样作用
Control-Command-Eject: 关闭一切应用程序，并重新开启系统
Option-Command-Eject 或 Option-Command-电源开关按钮: 进入睡眠状态，在笔记本中关上盒子可起同样作用
在点按窗口工具栏按钮时按下 Command: 循环选定此窗口所提供的不同显示方式，根据 Finder 或应用程序可出现不同显示方式
Command-`: 在开启一个窗口以上的应用程序或 Finder 中，循环选定窗口
Function-Delete (限笔记本电脑即 PowerBook、iBook、MacBook 与 MacBook Pro): 前进删除字符，即删除在文字输入处以右而非以左的字符
leopard快捷键
快速浏览：选中文件command-Y或者空格键space启动，按command-Y或者空格键space或esc退出
全屏快速浏览：选中文件command-option-Y启动，按command-option-Y或esc退出