<?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>Pablo Formoso &#187; UI</title>
	<atom:link href="http://blog.pabloformoso.com/category/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.pabloformoso.com</link>
	<description>Ruby, Rails, iOS y otros desbarajustes mentales.</description>
	<lastBuildDate>Thu, 15 Sep 2011 22:39:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Personalizar el componente UISwitch en el iPhone</title>
		<link>http://blog.pabloformoso.com/2010/04/personalizar-el-componente-uiswitch-en-el-iphone/</link>
		<comments>http://blog.pabloformoso.com/2010/04/personalizar-el-componente-uiswitch-en-el-iphone/#comments</comments>
		<pubDate>Tue, 13 Apr 2010 19:33:27 +0000</pubDate>
		<dc:creator>Pablo Formoso Estrada</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[guide]]></category>

		<guid isPermaLink="false">http://blog.pabloformoso.com/?p=122</guid>
		<description><![CDATA[En uno de los proyectos en los que estoy trabajando ahora me tocó meterle mano a el componente UISwitch de la SDK del iPhone. Según la documentación oficial de Apple este componente no es customizable, pero nada más lejos de la realidad. Por suerte en uno de los libros que tengo de desarrollo para el [...]]]></description>
			<content:encoded><![CDATA[<p>En uno de los proyectos en los que estoy trabajando ahora me tocó meterle mano a el componente UISwitch de la SDK del iPhone. Según la documentación oficial de Apple este componente no es customizable, pero nada más lejos de la realidad. Por suerte en uno de los libros que tengo de desarrollo para el iPhone (el Developers Cookbook de Erica Sadun) viene una primera aproximación de como crear la clase UICustomSwitch con los métodos necesarios para modificar las dos etiquetas.</p>
<p>En una primera lectura en libro pone tanto las partes de implementación como las de definición de clase en el main.h, cosa que no me gusta mucho. Además esto nos obliga a picar todo el código y nos capa la posibilidad de usar la clase dentro de otras vistas.</p>
<p>Así que dejaré mi aportación y estructuración del UICustomSwitch para poder usarlo en el InterfaceBuilder también.</p>
<p>Como todo me gusta tener el código siempre bien ordenado, así que siempre tengo mi grupo de Categories donde meter los objetos que extienden a otros:</p>
<p><a href="http://blog.pabloformoso.com/wp-content/uploads/2010/04/Captura-de-pantalla-2010-04-13-a-las-20.48.18.jpg"><img class="aligncenter size-full wp-image-126" title="Captura de pantalla 2010-04-13 a las 20.48.18" src="http://blog.pabloformoso.com/wp-content/uploads/2010/04/Captura-de-pantalla-2010-04-13-a-las-20.48.18.jpg" alt="XCode Groups" width="189" height="102" /></a>Para que quede un poco más claro el código la estructura interna de objetos de un UISwitch es la siguiente:</p>
<ul>
<li>UISwitch
<ul>
<li>UISwitchSlider
<ul>
<li>UIImageView</li>
<li>UIImageView</li>
<li>UIView
<ul>
<li>UILabel</li>
<li>UILabel</li>
</ul>
</li>
<li>UIImageView</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Claramente tenemos que atacar en nuestro UICustomSwitch a los UILabels, pero con mucho cuidado. Por alguna extraña razón el SDK se comporta de forma diferente dependiendo del idioma en el que tengas configurado el teléfono. Mientras tenía este post con los borradores, cargue la aplicación por primera vez en el teléfono donde para mi sorpresa fallaba al arrancar. Vamos a ver el código y después explico la jugada.</p>

<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p122code3'); return false;">View Code</a> OBJC</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p1223"><td class="code" id="p122code3"><pre class="objc" style="font-family:monospace;"><span style="color: #6e371a;">#import </span>
&nbsp;
<span style="color: #a61390;">@interface</span> UICustomSwitch <span style="color: #002200;">:</span> UISwitch
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span> setLeftLabelText<span style="color: #002200;">:</span> <span style="color: #002200;">&#40;</span><a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/"><span style="color: #400080;">NSString</span></a> <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> labelText;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span> setRightLabelText<span style="color: #002200;">:</span> <span style="color: #002200;">&#40;</span><a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/"><span style="color: #400080;">NSString</span></a> <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> labelText;
<span style="color: #a61390;">@end</span></pre></td></tr></table></div>


<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p122code4'); return false;">View Code</a> OBJC</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p1224"><td class="code" id="p122code4"><pre class="objc" style="font-family:monospace;"><span style="color: #6e371a;">#import &quot;UICustomSwitch.h&quot;</span>
&nbsp;
<span style="color: #a61390;">@interface</span> _UISwitchSlider <span style="color: #002200;">:</span> UIView
<span style="color: #a61390;">@end</span>
&nbsp;
<span style="color: #a61390;">@implementation</span> UICustomSwitch
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span>_UISwitchSlider <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> slider <span style="color: #002200;">&#123;</span>
	<span style="color: #a61390;">return</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>self subviews<span style="color: #002200;">&#93;</span> lastObject<span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span>UIView <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> textHolder <span style="color: #002200;">&#123;</span>
	<span style="color: #a61390;">return</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>self slider<span style="color: #002200;">&#93;</span> subviews<span style="color: #002200;">&#93;</span> objectAtIndex<span style="color: #002200;">:</span><span style="color: #2400d9;">2</span><span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span>UILabel <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> leftLabel <span style="color: #002200;">&#123;</span>
	<span style="color: #a61390;">return</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>self textHolder<span style="color: #002200;">&#93;</span> subviews<span style="color: #002200;">&#93;</span> objectAtIndex<span style="color: #002200;">:</span><span style="color: #2400d9;">0</span><span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span>UILabel <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> rightLabel <span style="color: #002200;">&#123;</span>
	<span style="color: #a61390;">return</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>self textHolder<span style="color: #002200;">&#93;</span> subviews<span style="color: #002200;">&#93;</span> objectAtIndex<span style="color: #002200;">:</span><span style="color: #2400d9;">1</span><span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span> setLeftLabelText<span style="color: #002200;">:</span> <span style="color: #002200;">&#40;</span><a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/"><span style="color: #400080;">NSString</span></a> <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> labelText <span style="color: #002200;">&#123;</span>
	<a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSLocale_Class/"><span style="color: #400080;">NSLocale</span></a> <span style="color: #002200;">*</span>currentUsersLocale <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSLocale_Class/"><span style="color: #400080;">NSLocale</span></a> currentLocale<span style="color: #002200;">&#93;</span>;
	<span style="color: #a61390;">if</span> <span style="color: #002200;">&#40;</span><span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>currentUsersLocale localeIdentifier<span style="color: #002200;">&#93;</span> isEqualToString<span style="color: #002200;">:</span><span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;en_US&quot;</span><span style="color: #002200;">&#93;</span><span style="color: #002200;">&#41;</span> <span style="color: #002200;">&#123;</span>
		<span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>self leftLabel<span style="color: #002200;">&#93;</span> setText<span style="color: #002200;">:</span>labelText<span style="color: #002200;">&#93;</span>;
	<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span> setRightLabelText<span style="color: #002200;">:</span> <span style="color: #002200;">&#40;</span><a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/"><span style="color: #400080;">NSString</span></a> <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span> labelText <span style="color: #002200;">&#123;</span>
	<a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSLocale_Class/"><span style="color: #400080;">NSLocale</span></a> <span style="color: #002200;">*</span>currentUsersLocale <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><a href="http://developer.apple.com/documentation/Cocoa/Reference/Foundation/Classes/NSLocale_Class/"><span style="color: #400080;">NSLocale</span></a> currentLocale<span style="color: #002200;">&#93;</span>;
	<span style="color: #a61390;">if</span> <span style="color: #002200;">&#40;</span><span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>currentUsersLocale localeIdentifier<span style="color: #002200;">&#93;</span> isEqualToString<span style="color: #002200;">:</span><span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;en_US&quot;</span><span style="color: #002200;">&#93;</span><span style="color: #002200;">&#41;</span> <span style="color: #002200;">&#123;</span>
		<span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>self rightLabel<span style="color: #002200;">&#93;</span> setText<span style="color: #002200;">:</span>labelText<span style="color: #002200;">&#93;</span>;
	<span style="color: #002200;">&#125;</span>
<span style="color: #002200;">&#125;</span>
<span style="color: #a61390;">@end</span></pre></td></tr></table></div>

<p>Como podéis ver en el código nos sacamos la clase _UISwitchSlider (que no viene documentada en la SDK para entrar en las tripas del Switch. El problema que os comentaba antes es que las subvistas que nos devuelve el slider, al cambiar de idioma (que no sea en_US), devuelve un UIImageView de los primeros. Por lo que habría que afinar un poco esta clase para que reciba texto e imagen y use una u otra dependiendo de la situación.</p>
<p>Agregando estas clases al proyecto podréis usar el componente también en el IB sin ningún problema. Espero os sirva de ayuda.</p>
<pre style="text-align: right;">Fuentes: "The iPhone Developer's Cookbook de Erica Sadun"</pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.pabloformoso.com/2010/04/personalizar-el-componente-uiswitch-en-el-iphone/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tap vs Click: Interfaces de usuario táctiles</title>
		<link>http://blog.pabloformoso.com/2010/03/tap-vs-click-interfaces-de-usuario-tactiles/</link>
		<comments>http://blog.pabloformoso.com/2010/03/tap-vs-click-interfaces-de-usuario-tactiles/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 16:26:34 +0000</pubDate>
		<dc:creator>Pablo Formoso Estrada</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[click]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[tap]]></category>

		<guid isPermaLink="false">http://blog.pabloformoso.com/?p=106</guid>
		<description><![CDATA[Después de varios experimentos con el iPhone de haber terminado la primera aplicación para un cliente (Vandal.net) me he dado cuenta de algunos aspectos en el diseño de las interfaces de usuarios en dispositivos táctiles (no solo iPhone para que no me tachen de fanboy xDD). A lo largo de estos dos últimos meses me [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.pabloformoso.com/wp-content/uploads/2010/03/normal_lg-km900-arena-ui-details-2.jpg"><img class="alignleft size-medium wp-image-108" style="margin-left: 10px; margin-right: 10px;" title="tap vs click" src="http://blog.pabloformoso.com/wp-content/uploads/2010/03/normal_lg-km900-arena-ui-details-2-247x300.jpg" alt="ui táctiles" width="247" height="300" /></a>Después de varios experimentos con el iPhone de haber terminado la primera aplicación para un cliente (Vandal.net) me he dado cuenta de algunos aspectos en el diseño de las interfaces de usuarios en dispositivos táctiles (no solo iPhone para que no me tachen de fanboy xDD). A lo largo de estos dos últimos meses me he fijo mucho en el tema del desarrollo de la interfaz de usuario, no en que tenga un gradiente perfecto o que sea &#8220;súper cool&#8221;; más desde el punto de vista de número de tap para llegar a tal sitio o hacer tal cosa, que espera que haga el usuario al poner la el dedo encima de cualquier parte de la pantalla y aspectos similares. Mi primera intención era reducir al mínimo el número de <strong>taps </strong>a en la navegación por la aplicación, pero ahora veremos como el <strong>precio de un tap es más barato que el de un click </strong>y podemos invertir nuestros esfuerzos en otras cosas.</p>
<p>Una de las primeras cosas que aprendí fue el <strong><em>el precio de un tap</em><span style="font-weight: normal;">, que aun que parezca absurdo cabe reflexionar un poco sobre el proceso de aprendizaje de un usuario en una interfaz táctil frente a tener un ratón en la mano.</span></strong></p>
<p><strong><span style="font-weight: normal;">El proceso de manejo del ratón se base en tres acciones que pasan por la mente del usuario (hablamos de usuarios normales, no enfermos que medimos nuestro clicks con aplicaciones chorras :P), identificación, posicionamiento y acción. La identificación es el proceso de reconocimiento de donde queremos cliquear, el posicionamiento es el tiempo en el que localizamos nuestro puntero del ratón en la pantalla y la acción mide el tiempo de desplazamiento del ratón hasta el punto identificado para hacer el click. Si cabe este proceso se torna un poco más largo en el tiempo si el usuario no tiene mucha experiencia con el uso del ratón (que si el un click, el doble click, se pasa por la aceleración el punto, no llega e tengo que darle dos toques, hay más variables de la que los usuarios habituales pensamos).</span></strong></p>
<p>Sin embargo con la interfaces táctiles podemos resumir el proceso en dos partes, identificación y posicionamiento y acción de forma conjunta. Esto es lógico ya que el usuario identifica el botón en la pantalla y lleva su dedo exactamente a la posición que la interfaz le incita a tocar. Fruto de esto el tiempo desde la identificación hasta el desencadenamiento del evento es mucho más corto que con el ratón.</p>
<p>Vistas las dos formas a la hora de navegar está claro que usando el tiempo como unidad de tiempo <strong>un tap es mucho más barato que un click</strong> lo que hace que esa búsqueda por reducir el número de tabs sea al final un poco absurda y podamos primar más la claridad en la interfaz y mostrar diferentes vistas en la que la información que se escriba o se lea sea mucho más clara para el usuario ya que llegará a esta en menos tiempo con una UI táctil. </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pabloformoso.com/2010/03/tap-vs-click-interfaces-de-usuario-tactiles/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

