<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>notes</title>
	<atom:link href="http://clearcapsule.com/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://clearcapsule.com/blog</link>
	<description>on design, cocoa, and mac</description>
	<lastBuildDate>Tue, 03 Nov 2009 07:39:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>What&#8217;s in a cursor? Part II</title>
		<link>http://clearcapsule.com/blog/2009/10/whats-in-a-cursor-part-ii/</link>
		<comments>http://clearcapsule.com/blog/2009/10/whats-in-a-cursor-part-ii/#comments</comments>
		<pubDate>Sat, 17 Oct 2009 04:12:10 +0000</pubDate>
		<dc:creator>nsobject</dc:creator>
				<category><![CDATA[cocoa]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://clearcapsule.com/blog/?p=79</guid>
		<description><![CDATA[In Part I, I discussed how to customize the link cursor of an NSTextView subclass to match that of WebKit. It is, by all means, a fairly straightforward task with seemingly harmless consequences; after all, all it does is to add a subtle shadow offset by a few pixels. While not exactly on the same [...]]]></description>
			<content:encoded><![CDATA[<p>In <a href="http://clearcapsule.com/blog/2009/10/whats-in-a-cursor-part-i/" target="_blank">Part I</a>, I discussed how to customize the link cursor of an <code>NSTextView</code> subclass to match that of <strong>WebKit</strong>. It is, by all means, a fairly straightforward task with seemingly harmless consequences; after all, all it does is to add a subtle shadow offset by a few pixels.</p>

<p>While not exactly on the same scale, I am reminded of similar situations in the past&mdash;making standard UI components &#8220;look better&#8221; to the eyes without regards to their use cases and contexts: When Apple first showed off Brushed Metal window appearance in iTunes, many developers went out of their way to emulate this appearance in their apps; later, when this option was made available as a checkbox in Interface Builder (on Mac OS X 10.2), there was a huge influx of 3rd-party applications with Textured (or Brushed Metal) windows and panels.</p>

<p><a href="http://interface.free.fr/Archives/AquaHIGuidelines.pdf" target="_blank">Aqua Human Interface Guidelines</a> (.pdf 7.8mb) during that time specifically states:</p>

<blockquote>
This window style has been designed specifically for use by&mdash;and is therefore best suited to&mdash;applications that provide an interface for a digital peripheral, such as a camera, or an interface for managing data shared with digital peripherals, such as the Address Book application.<br/><br/>

This appearance may also be appropriate for applications that strive to re-create a familiar physical device—the Calculator application, for example. Avoid using the textured window appearance in applications or utilities that are unrelated to digital peripherals or to the data associated with these devices.
</blockquote>

<p>It goes without saying that very few of these applications were <em>related to digital peripherals or to the data associated with these devices</em>.</p>

<p>Another such example is the HUD (or Transparent) window. The HUD looks so attractive it is almost a torture for a developer not to use it. Not surprisingly, you can find many examples of irregular HUD usage, despite what the <a href="http://developer.apple.com/mac/library/DOCUMENTATION/UserExperience/Conceptual/AppleHIGuidelines/XHIGWindows/XHIGWindows.html#//apple_ref/doc/uid/20000961-SW24" target="_blank">Human Interface Guidelines</a> states:</p>

<blockquote>
In general, therefore, you should use transparent panels only when at least one of the following statements is true:
<br/>
<ul>
<li>Your application is media-centric, that is, focused on movies, photos, or slides.</li>
<li>Users use your application in a dark environment or in an immersion mode.</li>
<li>A standard panel would distract users from the main window.</li>
<li>Users make only quick adjustments in the panel and dismiss it quickly.</li>
</ul>
</blockquote>

<p>And, because developers are not using it for its intended purpose&mdash;quick adjustments, for example&mdash;they <a href="http://www.macfanatic.net/blog/2007/11/29/hud-controls-in-leopard/" target="_blank">complain about</a> the dearth of HUD-compatible controls, or go so far as to develop 3rd-party frameworks such as <a href="http://www.binarymethod.com/bghudappkit/" target="_blank">BGHUD</a>, or <a href="http://shiira.jp/hmblkappkit/en.html" target="_blank">HMBlkAppKit</a>, to name a few.</p>

<p>Again, just because you can doesn&#8217;t mean you should. When should you, then, customize the link cursor for your <code>NSTextView</code> (or for any Cocoa view for that matter) to match that of WebKit?</p>

<p>Here&#8217;s my version of guidelines:</p>

<ul>
<li>In general, don&#8217;t.</li>
<li>If your <code>NSTextView</code> subclass is mainly used to display large amounts of arbitrarily formatted text, linking to other similar text, you may customize the link cursor.</li>
<li>If clicking on the link opens up the URL in the default browser, you may customize the link cursor.</li>
</ul>

<p>As you can see, however, in most cases you might want to consider using a <code>WebView</code> itself instead of an <code>NSTextView</code>.</p>
]]></content:encoded>
			<wfw:commentRss>http://clearcapsule.com/blog/2009/10/whats-in-a-cursor-part-ii/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What&#8217;s in a cursor? Part I</title>
		<link>http://clearcapsule.com/blog/2009/10/whats-in-a-cursor-part-i/</link>
		<comments>http://clearcapsule.com/blog/2009/10/whats-in-a-cursor-part-i/#comments</comments>
		<pubDate>Thu, 15 Oct 2009 09:42:27 +0000</pubDate>
		<dc:creator>nsobject</dc:creator>
				<category><![CDATA[cocoa]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[webkit]]></category>

		<guid isPermaLink="false">http://clearcapsule.com/blog/?p=17</guid>
		<description><![CDATA[NSTextView has a nice instance method: setAutomaticLinkDetectionEnabled:. When this is set to YES, the textview turns any properly formatted URL into a hyperlink in blue text with a single underline and the pointing hand cursor. It couldn&#8217;t be more straightforward. Query uses this extensively in its result views. With a little tweak here and there, [...]]]></description>
			<content:encoded><![CDATA[<p><code>NSTextView</code> has a nice instance method: <code>setAutomaticLinkDetectionEnabled:</code>. When this is set to <code>YES</code>, the textview turns any properly formatted URL into a hyperlink in blue text with a single underline and the pointing hand cursor. It couldn&#8217;t be more straightforward.</p>

<p><a href="http://clearcapsule.com/query/" target="_blank">Query</a> uses this extensively in its result views. With a little tweak here and there, it plays well with syntax coloring as well:
<img src="http://clearcapsule.com/blog/wp-content/uploads/2009/11/nstextview_cursor.png" alt="NSTextView link cursor" title="NSTextView link cursor" width="284" height="25" class="alignnone size-full wp-image-32" /></p>

<p>While it serves the purpose, it doesn&#8217;t feel quite alright. If you answer yes to any of the following:</p>

<ul>
  <li>Is your primary browser Safari?</li>
  <li>Do you use content readers such as <a href="http://www.newsgator.com/INDIVIDUALS/NETNEWSWIRE/" target="_blank">NetNewsWire</a>, <a href="newsfirerss" target="_blank">newsfire</a>, <a href="http://www.thinkmac.co.uk/newslife/" target="_blank">NewsLife</a>, etc.?</li>
  <li>Do you use site specific browsers such as <a href="http://fluidapp.com/" target="_blank">Fluid</a>, <a href="http://willmore.eu/software/gmailbrowser/" target="_blank">Gmail Browser</a>, <a href="http://mailplaneapp.com/" target="_blank">Mailplane</a>, etc.?</li>
</ul>

<p>you&#8217;re likely to find the default link cursor awkward, ever so slightly, because the same link will look like this in your favorite applications:
<img src="http://clearcapsule.com/blog/wp-content/uploads/2009/11/webkit_cursor.png" alt="WebKit link cursor" title="WebKit link cursor" width="285" height="27" class="alignnone size-full wp-image-35" /></p>

<p>It turns out that WebKit uses its own custom image for the pointing hand cursor: <code>/System/Library/Frameworks/WebKit.framework/WebCore.framework/Resources/linkCursor.png</code></p>

<p>If you are anything like me, you, too, can override the link cursor in your <code>NSTextView</code> subclass with <code>setLinkTextAttributes:</code> instance method.</p>

<p>Here&#8217;s a quick how-to:</p>

<ol>
  <li>Copy the custom cursor image into your project&#8217;s Resources folder.</li>
  <li>In the <code>awakeFromNib</code> method of your controller class, set this custom image as the link cursor:</li>
</ol>


<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span>awakeFromNib
<span style="color: #002200;">&#123;</span>
  <span style="color: #11740a; font-style: italic;">/* do standard awakeFromNib stuff */</span>
&nbsp;
  <span style="color: #11740a; font-style: italic;">// prepare attributes</span>
  <span style="color: #400080;">NSCursor</span> <span style="color: #002200;">*</span>customLinkCursor
    <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #400080;">NSCursor</span> alloc<span style="color: #002200;">&#93;</span> initWithImage<span style="color: #002200;">:</span><span style="color: #002200;">&#91;</span><span style="color: #400080;">NSImage</span> imageNamed<span style="color: #002200;">:</span><span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;linkCursor.png&quot;</span><span style="color: #002200;">&#93;</span> 
                                              withHotSpot<span style="color: #002200;">:</span>NSMakePoint<span style="color: #002200;">&#40;</span><span style="color: #2400d9;">0</span>, <span style="color: #2400d9;">0</span><span style="color: #002200;">&#41;</span><span style="color: #002200;">&#93;</span>;
  <span style="color: #400080;">NSDictionary</span> <span style="color: #002200;">*</span>customLinkTextAttributes
    <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #400080;">NSDictionary</span> dictionaryWithObject<span style="color: #002200;">:</span>customLinkCursor
                                  forKey<span style="color: #002200;">:</span>NSCursorAttributeName<span style="color: #002200;">&#93;</span>;
  <span style="color: #002200;">&#91;</span>cutomLinkCursor release<span style="color: #002200;">&#93;</span>;
  customLinkCursor <span style="color: #002200;">=</span> <span style="color: #a61390;">nil</span>;
&nbsp;
  <span style="color: #11740a; font-style: italic;">// myCustomTextView is an IBOutlet or an instance variable	</span>
  <span style="color: #002200;">&#91;</span>myCustomTextView setAutomaticLinkDetectionEnabled<span style="color: #002200;">:</span><span style="color: #a61390;">YES</span><span style="color: #002200;">&#93;</span>;
  <span style="color: #002200;">&#91;</span>myCustomTextView setLinkTextAttributes<span style="color: #002200;">:</span>customLinkTextAttributes<span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span></pre></div></div>


<p>Instead of copying the image file into your project, you could link to the local image in <code>WebCore.framework</code>. In my opinion, however, it would be a bit too much reliance on an unpublished feature.</p>
]]></content:encoded>
			<wfw:commentRss>http://clearcapsule.com/blog/2009/10/whats-in-a-cursor-part-i/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Favorite Snow Leopard Feature 1: Print</title>
		<link>http://clearcapsule.com/blog/2009/10/favorite-snow-leopard-feature-1-print/</link>
		<comments>http://clearcapsule.com/blog/2009/10/favorite-snow-leopard-feature-1-print/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 10:30:37 +0000</pubDate>
		<dc:creator>nsobject</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[mac]]></category>
		<category><![CDATA[snow leopard]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://clearcapsule.com/blog/?p=75</guid>
		<description><![CDATA[If you prefer to read on paper, Snow Leopard&#8217;s Print sheet will help you save many trees: What&#8217;s so nice about the new sheet, one may ask. If you&#8217;ve ever tried to print multiple logical pages on each physical page, you know how tedious it can be. Often, what starts out as an attempt to [...]]]></description>
			<content:encoded><![CDATA[<p>If you prefer to read on paper, Snow Leopard&#8217;s <em>Print</em> sheet will help you save many trees:
<a href="http://clearcapsule.com/blog/wp-content/uploads/2009/11/snow_leopard_print_sheet.png"><img src="http://clearcapsule.com/blog/wp-content/uploads/2009/11/snow_leopard_print_sheet-300x210.png" alt="Snow Leopard Print sheet" title="Snow Leopard Print sheet" width="300" height="210" class="aligncenter size-medium wp-image-73" /></a></p>

<p>What&#8217;s so nice about the new sheet, one may ask.</p>

<p>If you&#8217;ve ever tried to print multiple logical pages on each physical page, you know how tedious it can be. Often, what starts out as an attempt to save paper ends up being more wasteful through the trial-and-error to find that perfect scale factor. Snow Leopard now automatically optimizes the scaling factor on a per-page basis for n-UP printing. Also introduced is a nice little touch, where the total number of pages are re-calculated as you toggle <em>Two-Sided</em>, n-UP, etc.</p>
]]></content:encoded>
			<wfw:commentRss>http://clearcapsule.com/blog/2009/10/favorite-snow-leopard-feature-1-print/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fresh Fish Sold Here Today</title>
		<link>http://clearcapsule.com/blog/2009/09/fresh-fish-sold-here-today/</link>
		<comments>http://clearcapsule.com/blog/2009/09/fresh-fish-sold-here-today/#comments</comments>
		<pubDate>Thu, 03 Sep 2009 07:16:03 +0000</pubDate>
		<dc:creator>nsobject</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://clearcapsule.com/blog/?p=101</guid>
		<description><![CDATA[http://www.flickr.com/photos/rosino/ / CC BY-SA 2.0 There&#8217;s a parable that goes like this: A guy, walking past a street merchant,saw on the cart a sign that reads, &#8220;Fresh Fish Sold Here Today&#8221;. Guy: I see you have quite some fish there. Merchant: Yes, they are fresh from the dock early this morning. Would you like to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://clearcapsule.com/blog/wp-content/uploads/2009/09/138309105_24ad1eeda0_b.jpg"><img src="http://clearcapsule.com/blog/wp-content/uploads/2009/09/138309105_24ad1eeda0_b-300x300.jpg" alt="138309105_24ad1eeda0_b" title="138309105_24ad1eeda0_b" width="300" height="300" class="aligncenter size-medium wp-image-115" /></a></p>

<div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/rosino/138309105/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/rosino/">http://www.flickr.com/photos/rosino/</a> / <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a></div>

<p><br/></p>

<p>There&#8217;s a parable that goes like this:<br/></p>

<p>A guy, walking past a street merchant,saw on the cart a sign that reads,<br/></p>

<p><em>&#8220;Fresh Fish Sold Here Today&#8221;</em>.<br/></p>

<p><strong>Guy</strong>: I see you have quite some fish there.<br/>
<strong>Merchant</strong>: Yes, they are fresh from the dock early this morning. Would you like to buy some?<br/>
<strong>Guy</strong>: No, thank you, I&#8217;m just walking by, but I have some advice on your sign.<br/>
<strong>Merchant</strong>: Please share. I&#8217;d love to make it better.<br/>
<strong>Guy</strong>: Well, you don&#8217;t need to say &#8216;sold&#8217;. You&#8217;re not giving them away, are you?<br/>
<strong>Merchant</strong>: No, you&#8217;re right. (Erases the word).<br/>
<strong>Guy</strong>: Actually, I don&#8217;t think you are selling it tomorrow, so I&#8217;d erase &#8216;today&#8217;, too.<br/>
<strong>Merchant</strong>: That&#8217;s true. (Erases).<br/>
<strong>Guy</strong>: While you&#8217;re at it, I&#8217;d also erase &#8216;here&#8217; since you&#8217;re not selling it anywhere else, are you?<br/>
<strong>Merchant</strong>: Err&#8230; right. (Erases that too).<br/>
<strong>Guy</strong>: You wouldn&#8217;t sell non-fresh fish, either, so &#8216;fresh&#8217; has to go, too.<br/>
<strong>Merchant</strong>: Ok. (Erases).<br/>
<strong>Guy</strong>: Well, frankly, anyone can see that you&#8217;re selling fish, or are they fruit?<br/>
<strong>Merchant</strong>: (Erases). But wait&#8230;<br/></p>

<p>When I first read this story (in a children&#8217;s picture book), it made an impression on me. But as I grew older the story faded into memory, the way you think you&#8217;ve forgotten your childhood nursery rhymes.<br/></p>

<p>Fast forward many years and when I took my first design class, my teacher said,<br/></p>

<p><em>&#8220;No elements&mdash;no line, not even a single dot&mdash;should be in your design without reasons for their existence.&#8221;</em><br/></p>

<p>In a rather comical way, it all came back. And ever since then, the story&#8217;s been close to my heart. Whether I design UI, code, write, decorate the house, I think of <del datetime="2009-11-03T07:14:54+00:00">Fresh</del> <del datetime="2009-11-03T07:14:54+00:00">Fish</del> <del datetime="2009-11-03T07:14:54+00:00">Sold</del> <del datetime="2009-11-03T07:14:54+00:00">Here</del> <del datetime="2009-11-03T07:14:54+00:00">Today</del>.<br/></p>

<p>I recommend it.<br/></p>

<p>P.S. This blog is not meant to be a demonstration of the story&#8217;s lesson by any stretch of the imagination. <img src='http://clearcapsule.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://clearcapsule.com/blog/2009/09/fresh-fish-sold-here-today/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
