The Iceberg Secret: Napkin Look & Feel!

Intended Audience:
If you've ever had to develop a GUI mock-up or prototype for someone in "management" before... this one's for you!



The Secret:
Let me introduce you to "The Iceberg Secret" of UI development. From Joel on Software:

You know how an iceberg is 90% underwater? Well, most software is like that too -- there's a pretty user interface that takes about 10% of the work, and then 90% of the programming work is under the covers. And if you take into account the fact that about half of your time is spent fixing bugs, the UI only takes 5% of the work. And if you limit yourself to the visual part of the UI, the pixels, what you would see in PowerPoint, now we're talking less than 1%.

That's not the secret. The secret is that People Who Aren't Programmers Do Not Understand This.

The Solution: (but only if you're a Java Swing developer)

The solution to your prototype woes is called the "Napkin" Look & Feel. It makes your GUI reflect the current state of its development: as if it was all written on a napkin during lunch and then magically scanned into a mock-up.



Some of the underwhelming (sarcasm) features:

• Crinkled paper background.
• Randomly rendered lines (aka hand-drawn with a pen) for outlines, borders, boxes, etc.
• Disabled == erased... even images get erased!
• Hand-written fonts.
• Menus and pop-ups... sticky notes!!!
  

(My favourite part is the "sticky notes" theming for menus and pop-up menus. It makes me feel warm and fuzzy inside.)


So, the next time the word "prototype" comes to mind... just think "Napkin"!


About the author: When the word "prototype" comes to Ethan's mind... he thinks "Napkin"!

Rave: Firebug extension for Firefox

I'm something of a web-development "purist". Many of my recent web-development sessions have boiled down to manually editing code--whether it be HTML, CSS, Javascript, PHP or SQL--using nano (like notepad for Linux). These sessions typically go something like:

code... code... code... open in web-browser... dang! ... code... refresh browser... code... code... aha! ... code [etc.]

When you're manually debugging PHP, I'd recommend the print_r function for starters. When you're manually debugging CSS... it's another story. (There's a reason it was named "Cascading".) In everything but the simplest HTML+CSS layout, there are usually conflicting styles and it never fails but that an unwanted style manifests itself. You can easily spend more time trying to fix CSS "bugs" than doing actual development because none of your inspector tools 'splain what's going on thoroughly.


The good news:
... Well, tracking down those pesky stylesheet issues has never been easier. I'd like you to meet my newest best friend¹: the Firebug extension for Firefox! It's an all-in-one browser plugin to make whatever you're doing on the web--from scripting to CSS hacking--that much easier.


In addition to awesome features like a content/connection profiler, it has the best CSS inspector/editor/debugger/whatever I've seen:

1. A "Click an element in the page to inspect" button that lets you take the problem right to the point of conflict. (No more endless DOM tree-navigation with DOM Inspector.)
2. A hierarchical view of active styles (by inline/external stylesheet) as well as listing inactive styles. When I figured out what I was looking at... well, my wife heard me shouting from the other room; it's that awesome.
   
3. Interactive style editing: to make sure it looks the right way before coding the styles, or to see how well your minor style "tweaks" look.
4. Layout guide: Click on a DOM element to see what the current padding, border, margin, and positioning are. Killer.
   

The real beauty of it is that the friend who recommended Firebug is even more keen on the Javascript features than the CSS inspector/editor--let the good times roll!


Images:

1. Firebug Layout Inspector:

2. Firebug Style Hierarchy:

Notes:
1. My previous new best friend was (and still is) jQuery.

VR Baby

I apologize if this article seems bit... light-hearted; I feel like taking a (small) break this weekend.

My daughter Isabella was born Nov. 10th, 2008. She's only 7 months old, but she's already got a head start on Virtual Reality...





Augmented Reality... labor time!

About a week before my wife was due, I placed her under house arrest—thinking that her taking things slowly would speed things up. It didn't help. When she was a week overdue, I tried to work from home "just in case". When she was a week and a half overdue, I found out about an Augmented Reality guest lecture by Steven Feiner being hosted at UF that evening...

Being a big fan of AR, I told my wife that I really wanted to go, but didn't want to leave her at home alone. She said she felt up to going with me to the seminar...

It was a great seminar. He talked about some of the uses of Augmented Reality and gave some examples of how it's currently being employed. Very cool—I'm glad I went. But as my wife and I were walking back to the car, she mentioned that she was having mild contractions. Needless to say, I started freaking out.

During the lecture, I had thought she was squirming because the wooden seats were uncomfortable (I thought so). But no, it was our precious little one trying to watch the guest lecture in person...


Virtual Reality

The next semester, I took the Virtual Experiences class at UF. The syllabus included 4 projects, each followed by a presentation to the class. Isabella came to see two of them.

The above picture shows Isabella wearing the V8 stereo 3D head-mounted display after I demoed a 3D space walk trainer/simulator.

I wonder what she'll get into now that I'm working at the Virtual Experiences Research Group at UF... ?




Other VR family members...

You can see my wife (Sherrie) in the video that Joon shot for our wheelchair simulator — she's the "manual wheelchair" driver. (We all thought it was ironic how a "virtual amputee" could have their legs crossed.)


About the author:
Ethan Blackwelder started working for the Virtual Experiences Research Group at UF in May 2009. He has NOT had a "Vasectomy Reversal"...