Yining.write()

I have enjoyed paper/white-board prototyping for a long time, even made it my teams’ one of first “rules of engagement”. I have also been a big fan of Balsamiq Mockups, and today I would like to introduce you another great quick prototyping tool: WireframeSketcher.

In a nutshell, WireframeSketcher is, as its home page says:

WireframeSketcher is an Eclipse plugin for creating wireframes, screen mockups and UI prototypes.

Having tried it out on two small projects in the last two weeks, I am impressed. It’s a neat, and pleasant tool to use and fits very well with both my personal and my team’s development process.

First, a screen-shot showing it in action:

Being an Eclipse plugin, it means

• developer friendly, as it’s right inside an environment already familiar to many developers (80% of my team uses eclipse on a daily basis), there is no extra software or framework or platform to install, and developers can just svn up project’s design mockup folder, then open the mockups in the same IDE, very neat and appealing experience compared to that of other prototype tools;
• cross platform;
• enjoys the benefits Eclipse plugin infrastructure brings, like update mechanism

Highlights I want to mention:

• The fastest and most responsive prototype tool I have tried and used;
• Mockups are stored as xml documents instead of image files, that means it’s friendly to scm tools like Subversion and diff;
• Has annotation support, good for asynchronous communication;
• Grouping of UI elements can be nested, i.e. I can group a label and an input box first, then group them with a button as another group, when ungrouping the latter, the first group of label and input box is still intact;
• Presentation of a mockup or a storyboard is handy, it’s right inside Eclipse. There is no need to export them to images first then pasted to a .ppt file in order to just show the mockups or the sequence of the mockups;

The most pleasant surprise to me is “Master Screen”, which allows me to pick any existing mockup as the base of a new mockup, this helps save time particularly when many of a site pages share the same header and footer. And there’s more. When I later make changes to the master screen, all screens that are “derived” from it automatically get updated without their xml files being modified (again, very friendly to Subversion and the like).

A close look of my sample mockups:

Storyboard example:

Some nitpicks or features I would like to see in the future WireframeSketcher:

• annotation does not provide link from notes to the annotated element
• I strongly believe url is an important element of user experience, but currently there is no way to specify the url on the browser control (I would suggest it takes two lines of input, the first being the page title, and the second line for the url);
• I couldn’t find a way to reuse a group of UI element, my idea is to allow user to have a collection of custom built (e.g. Paginator, Chinese version of “Loren Lpsum”) or assembled controls or control groups (e.g. a text input field always comes with a label and input box) as a separate category, this would help productivity among a project team at least;
• colors support in more controls (e.g. form validation error, and different colors in progress bar, red for slow progressed, and green for complete or near complete)
• One feature I particularly like about Balsamiq Mockups is the command line script to batch process (e.g. export to image files), I use it in my Ant build script to export mockup images. I hope this feature is coming to WireframeSketcher soon;
• Hopefully, a community could grow out of this tool, like what Balsamiq has achieved with Mockups To Go;

Conclusion? I would strongly encourage any developer or any development team that live and breathe in Eclipse to give WireframeSketcher a serious try.

Oh, did I mention a tiny problem with it being an eclipse plugin? RescueTime now can not tell if I am actually using a Dev Tool or a Design Tool … But heck, I sure can live with that given such a great prototype tool.

为什么说“又”呢？

Fenng 前阵子写了“绿色IT生活“，分享了一些心得和建议。

我已经做到或者基本做到的有:

• 无线网络，网线再见；这个基本做到了，除了特殊情况，比如速度、安全或者稳定要求高的特殊情况。
• 不用光盘，网上下载；
• 不换电话，少打电话；从手机更新频率（现在的手机是一年半前买的）和话费，都属于运营商定义的“垃圾用户”；
• 不写笔记，多写网志 ；这给我改成写在Wiki上（毕竟我写在网志上的东西不会写在纸上，笔记上的也多半不会放在网志上）；
• 买东西尽量买同类商品中品质好一点的那个；这个毛病/习惯我早就有了；
• 少弄一些劣质 T 恤。穿过一次就扔掉了，太浪费。牛仔裤也尽量少买，发扬”一条裤子穿三年”的革命朴素主义精神。－ 这里一定要赞一下自己，过去的365天里没买一件/双 衣服/袜子/鞋子（除了网志年会和厦门马拉松的T-shirt，那都已经算在报名费里的）；
• 不去领一些惠而不费的礼品。基本上都没什么实际用途的东西，尤其是一些展会上厂商分发的玩意儿。－ 恩，我也没这样的机会 :-D

我确定做不到或者有别的办法的有：

• 少买图书，不买杂志；这点对我来说，那是相当的难啊。的确，图书杂志浪费纸张，不环保，在家里还占地方。但又不能不买，解决办法是可以跟朋友同好共享，比如互相借阅或者交换，跟Fenng在线上曾经讨论过，他说异地借书需要快递，可快递也浪费资源。可那至少减少浪费纸张了，再不行就本地朋友之间借阅吧。对了，家里占地方的旧杂志可以废物利用，比如：Craft a Table Using Old Magazines，省了买家具；
• 抛弃鼠标，这点确实做不到，买个好点的鼠标和鼠标垫（参见前面“买东西尽量买同类商品中品质好一点的那个”一项 :-D）；至于尽量熟悉键盘快捷键，减少鼠标操作对阅读造成的中断，这点我赞成并要不断提高；

自己再补充几条：

• 关于读书，多读电子书，并继续订阅O’Reilly的Safari在线图书馆，昨天看到O’Reilly也裁员了，继续订阅也算是继续支持他们；
• 使用白板，不仅办公室里用，家里房间里也摆一块，页面设计，程序设计，To-Do-List都可以用。尽量用环保的马克笔，实在不行可以争取废品回收；
• 使用dopplr.com来记录自己的每一次旅行，dopplr会提供每次和一年里旅行所产生的C2O值，这也算保持对环保的意识和对自己的监督吧；
• 使用小软件来控制和优化电脑的电源使用，比如：Local Cooling和省省看；
• 重复利用硬件，废品回收。看看今年有没有机会做个硬件复用的项目，到时候汇报；
• 去咖啡屋买咖啡争取带自己的杯子，据说这样会被人说是213，213就213吧，比那什么还少37不是？
• 少抽烟到不抽烟，现在每天在线汇报并记录，自我监控；

最后，对作为写代码的（SA和DBA也需要写代码的）来说，也是最重要的：

写高效率的代码，减少和优化CPU和硬盘使用；

先记这些，年底的时候再回头看看自己做得怎么样。

问题：假设有n个城市C1,C2,…Cn，每个城市里有Mi(1<i<n)个人，他们互相信任并愿意交换和借阅各自拥有的图书，每两个城市(x,y)之间的快递所需耗费的能源已知是Exy，且已知每个人拥有并愿意借出的书(Bi1,Bi2,… )和想看的书；设计一个算法能够：1）让他们所有人能够借阅到自己想看的书，且；2）因快递图书而导致的能源消耗最少。

这要是延伸做个豆瓣App应该很赞吧？

平时工作中在界面设计的时候，我总是要求工程师先在纸上画图，初步确定后，仅仅用HTML+CSS做出静态的界面再次与用户（主要是其他业务部门）确认后，再动手写实际的代码。

纸上的原型设计是经常使用（至少我自己）的初期设计方式，办公室里用白板（空间大，而且环保些）和马克笔。这种办法不仅快，能尽早发现在文字和口头的沟通上理解不一致的地方，同时也尽可能减少开发成本和因为理解不一致导致返工的情况。纸上的原型设计在可用性上能起到很大作用，也有专门一本书介绍和探讨，这就不多说了。

但是这也有它们本身的不足。首先是没法很好地保留设计和讨论的内容，我曾经尝试用数码相机把白板上的内容拍下来，但仅仅是为了保留，没法有效地在后续的讨论和工作中继续使用。

几年前发现过一个做网站的设计草图的工具软件，Denim，这是一个大学的项目，学术性和尝试性的味道强了些，界面设计上有很多新颖的地方，但毕竟不是从每天蹲在“战壕”中的工程师的角度出发，玩玩可以，实际工作上还是不大可能用上。（附：Denim的截图）。

前阵子发现了一个新软件：Balsamiq Mockups，用下来发现它真正抓住了原型设计的核心与平衡点，既能快速设计草图，又能比较好地进入到平时团队工作的流程和工具中，可以说是击中了原型设计的Sweet Spot，强烈推荐。

先看看截图：

再说说功能和亮点：

1. 操作方面，拖拽，控件分组，甚至元素之间的对齐都做得很贴心；
2. 预制了很多界面元素，从简单的输入框，下拉框，浏览器主要元素，到经常用得到的导航条，日历，表格，到复杂的Tag Cloud，Cover Flow, 地图，WYSWYG的格式工具栏等，有了这些不用从头画起，往往比用白板都快；
3. 界面元素的修改很简单，比如导航条的几个标签页的label，就是用逗号分隔的文字，下拉框的选项就是分行的文字；
4. 使用xml语言来记录和保存界面元素和布局，
   1. 这使得每个设计都能被很好得放进SVN，Git，和CVS等工具中进行管理和跟踪；
   2. 可以设计复杂的界面元素，保存后，以后可以重复使用（包括修改）；
5. 可以将设计导出成PNG格式的图片；
   
6. 可以用命令行进行导出操作，这样就能让我写个脚本，从svn里checkout某个目录下的所有设计文件后，导出图片，打包后用邮件发到项目经理，工程师甚至客户那；
7. 跨平台，Balsamiq Mokups是用Flex和Air实现的，所以在Mac OS, Linux和Windows下都能使用；
8. 不仅仅有桌面版本，还有能集成在Confluence，JIRA，和XWiki中的版本，使得异地在线协作更方便有效；

据作者说，现在这款软件的设计就是用它自己来设计的，经典的“吃自己的狗粮”，这也让我对其更有信心，因为它是开发者为开发者写的软件。

更多信息，大家可以到它的网站上了解。

还有值得一提的是Balsamiq Mokups的在GetSatisfaction上的用户支持和服务，作者Peldi对问题报告，新需求的回应很积极和及时。而且根据这个讨论上看，到月底就会有一个专门用来分享界面控件设计的社区网站了，很期待。

再要说的一点是这款软件是要付费的，79美元（也可以免费，具体如何免费，请看网站上的说明），相对于它能节省下来的时间和提高的效率，是很值得的。Peldi说在2008年，这款软件就从1,322位付费用户那获得了162,302美元的收入（其中仅12月份就有39,000美元），这令人鼓舞地证明了只要是提供真正价值的服务和软件，就能够创造很好的收入，即使在经济萧条的寒冬里。

另外说一句, GetSatisfaction也是一个很不错的服务。

先报告成绩吧，4小时35分多，还是没能跑进4小时30分，遗憾。

再看我的Polar S625X上的记录，先是心跳和速度在距离上的变化：

这是心跳和速度在时间上的变化：

除了最后的冲刺，全程心跳保持在每分钟150到160之间，前两年后半程心跳都提高到了160以上，这很大提高了我继续提高成绩的信心。

这次最大的进步就是全程是一路跑下来，中途没走路，这要归功于之前训练中有过三次32公里的长距离跑；

跑得保守了些，如果积极些胆子大点儿，跑进4小时30分应该没问题，回去应该增加速度和路跑的训练。

插播两张图片：

演武大桥下来，看起来和自我感觉都比前两年轻松多了。

前面这两位也是福州来的跑友，右边这位很风趣也很有经验，一路上和路边的啦啦队互动，同时也不断叮嘱一起跑的朋友要控制速度不要太早加速。我从20公里左右后10公里都在他们后面跟随，速度保持在每公里6分半左右。

跑完这次马拉松，完成之前预定的跑完全程和4小时45分内的前两个目标，但是没能完成4个半小时的第三个目标。但也算完成了今年”跑一次马拉松“的目标，可以准备”争取跑两个马拉松“了，扬州是四月份，杭州好像是10月11月间，上海是12月。

就先写这么多吧。

Best wishes to you all.

Hope we all will have done something good/meaningful/great/interesting/fun/profitable in the next 365 days, and most of all, have no regrets.

眼看年底了，又可以开始回顾总结，写些东西放到blog上充数了。

Thunderbird又继续用了一整年，工作，个人和Gmai上的邮件l都用它来收发，Gmail的web界面只有偶尔需要搜索的时候用到，所以gmail最近推出theme的功能对我来说没什么用。以下是我使用的扩展中最常用和认为值得推荐的。

• Enigmail 0.95.7

  签名和加密

• Auto Zip Attachments 0.6.2

  自动压缩附件，省去手动做压缩包的麻烦，而且它能根据文件类型和大小(可自己设置)来判断是否要压缩

• Lightning 0.9

  提供日历的基本功能，另见Provider for Google Calendar

• Provider for Google Calendar 0.5.1

  不需要打开浏览器访问，可直接在Thunderbird里对Google日历进行操作

• Colored Diffs 0.4.2

  如果邮件内容是diff的结果，能够用颜色标记方便阅读 (我把项目svn的每次提交的diff都发给自己)

• Mouse Gestures Redox 2.0.3

  鼠标手势，读邮件列表时很方便

• Quote Colors 0.2.8

  设置引用内容的字体颜色，方便阅读邮件列表

• Display Mail User Agent 1.6.2

  用图标显示邮件是用什么客户端发出的。没什么实际用处，但是满足了Geek的八卦欲

• Delete Junk Context Menu 0.3.2.1

  删除标记为垃圾的邮件