<?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>Angel Custodio &#187; Diseño y Maquetación</title>
	<atom:link href="http://angelcustodio.net/categoria/diseno-maquetacion/feed/" rel="self" type="application/rss+xml" />
	<link>http://angelcustodio.net</link>
	<description>Este es el lugar en el que iré escribiendo todo aquello que pienso, siento y creo, sin tapujos ni adornos... a veces incluso obviando la diplomacia, pero siempre con respeto e intentando aportar algo útil a todo aquello a lo que me refiera.</description>
	<lastBuildDate>Wed, 16 Jun 2010 19:37:34 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Usabilidad: 10 crímenes que no debes cometer</title>
		<link>http://angelcustodio.net/usabilidad-10-crimenes-que-no-debes-cometer/</link>
		<comments>http://angelcustodio.net/usabilidad-10-crimenes-que-no-debes-cometer/#comments</comments>
		<pubDate>Thu, 03 Dec 2009 23:55:17 +0000</pubDate>
		<dc:creator>Angel Custodio</dc:creator>
				<category><![CDATA[Diseño y Maquetación]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Usabilidad]]></category>
		<category><![CDATA[Websites]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://angelcustodio.net/?p=529</guid>
		<description><![CDATA[
Crimen #1: Labels que no están relacionadas con su input en un formulario
Crimen #2: Logo que no enlaza con la página principal de la web
Crimen #3: No especificar un color para enlaces visitados
Crimen #4: No indicar el campo activo de un formulario
Crimen #5: Dejar una imagen sin descripción alternativa
Crimen #6: Dejar una imagen de fondo [...]]]></description>
			<content:encoded><![CDATA[<ul>
<li>Crimen #1: Labels que no están relacionadas con su input en un formulario</li>
<li>Crimen #2: Logo que no enlaza con la página principal de la web</li>
<li>Crimen #3: No especificar un color para enlaces visitados</li>
<li>Crimen #4: No indicar el campo activo de un formulario</li>
<li>Crimen #5: Dejar una imagen sin descripción alternativa</li>
<li>Crimen #6: Dejar una imagen de fondo sin color de fondo</li>
<li>Crimen #7: Utilizar párrafos de texto demasiado extensos</li>
<li>Crimen #8: Subrayar texto que no es un enlace</li>
<li>Crimen #9: &#8220;Haz click aquí&#8221;</li>
<li>Crimen #10: Utilizar texto justificado</li>
</ul>
<p>Esto es lo que <a href="http://line25.com/articles/10-usability-crimes-you-really-shouldnt-commit">señala</a> Chris Spooner en <a href="http://line25.com">Line25</a> y que pasaré a comentar seguidamente ya que no estoy del todo de acuerdo, algunos puntos (creo) necesitan matizarse.</p>
<p>El punto <strong>#2</strong> ya es relativo de por sí.<br />
Quizá tenemos el logotipo en la página, casi seguro, pero si indicamos específicamente que hay un enlace que sirve para volver a la página principal, el logotipo no tiene por qué servir también como enlace para esa misma acción. Nunca estará de más, obviamente.</p>
<p><span id="more-529"></span>En el punto <strong>#3</strong> estamos todavía en mayor desacuerdo.<br />
Marear al usuario con demasiados colores es contraproducente. Un color para enlaces, otro color para cuando hacemos click, si estos están subrayados o no, al pasar por encima&#8230; El usuario suele saber lo que visita y a no ser que seamos un poco &#8220;tramposos&#8221; y no utilicemos nuestros enlaces de una manera descriptivamente adecuada, no tendríamos por qué hacer uso de un color distinto para enlaces visitados. De nuevo, tampoco está de más hacerlo, pese a que muchas veces pueda entrar en conflicto con el propio diseño de la web.</p>
<p>Sobre el <strong>#4</strong> poco hay que decir.<br />
De nuevo, volveríamos a marear al usuario sin ser absolutamente necesario. En un formulario suelen o pueden haber varios campos de texto. No está de más indicar cual es el activo, pero normalmente, el cursor ejecuta esta tarea perfectamente.</p>
<p>Llegamos al punto <strong>#5</strong> y aquí no puedo más que agachar la cabeza.<br />
La mayoría de maquetadores (y también administradores de websites) pasamos normalmente por alto la posibilidad de incluir un texto alternativo a la imagen. No sólo sirve para indicar qué debería ir ahí si la imagen no carga, también ayuda a posicionar contenido en buscadores.</p>
<p>El punto <strong>#6</strong> es otro que admite cierta matización.<br />
Es correcto utilizar un color de fondo para algo que lleve de fondo una imagen sin posibilidad de transparencia. Si no se da el caso y estamos por ejemplo utilizando PNGs en todo su explendor, el uso de color de fondo vendrá determinado por nuestra necesidad y no por la obligatoriedad de hacer una web más usable.</p>
<p>Y el punto en el que más estoy en desacuerdo, el <strong>#10</strong>.<br />
El texto justificado debe usarse cuando queremos transmitir solidez y entereza. Una web con el texto justificado gana en elegancia (por norma general)  aunque pierde en facilidad de lectura. No lo incluiría como &#8220;crimen&#8221; pero obviamente hay que saber utilizar el justificado con mesura.</p>
<p><small>PD: Estoy totalmente de acuerdo con los puntos que no he comentado.</small><br />
<small>PD2: Todo esto no es más que una opinión personal, en absoluto pretende ser una verdad absoluta e irrefutable.</small></p>
]]></content:encoded>
			<wfw:commentRss>http://angelcustodio.net/usabilidad-10-crimenes-que-no-debes-cometer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10 mitos y falacias sobre Accesibilidad Web</title>
		<link>http://angelcustodio.net/10-mitos-y-falacias-sobre-accesibilidad-web/</link>
		<comments>http://angelcustodio.net/10-mitos-y-falacias-sobre-accesibilidad-web/#comments</comments>
		<pubDate>Tue, 29 Sep 2009 09:57:22 +0000</pubDate>
		<dc:creator>Angel Custodio</dc:creator>
				<category><![CDATA[Diseño y Maquetación]]></category>
		<category><![CDATA[Accesibilidad Web]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Mario Carvajal]]></category>
		<category><![CDATA[Slideshare]]></category>
		<category><![CDATA[Sonia García]]></category>

		<guid isPermaLink="false">http://angelcustodio.net/?p=450</guid>
		<description><![CDATA[
Accesibilidad significa tener dos versiones de un sitio web
La accesibilidad web es asunto de diseñadores y programadores
Las páginas web accesibles son feas y aburridas
Los usuarios deben visualizar el sitio tal y como lo diseñó su autor
La accesibilidad web es solo para ciegos
La accesibilidad web significa no usar Flash
Las herramientas automáticas determinan el nivel de accesibilidad
Las [...]]]></description>
			<content:encoded><![CDATA[<ol>
<li>Accesibilidad significa tener dos versiones de un sitio web</li>
<li>La accesibilidad web es asunto de diseñadores y programadores</li>
<li>Las páginas web accesibles son feas y aburridas</li>
<li>Los usuarios deben visualizar el sitio tal y como lo diseñó su autor</li>
<li>La accesibilidad web es solo para ciegos</li>
<li>La accesibilidad web significa no usar Flash</li>
<li>Las herramientas automáticas determinan el nivel de accesibilidad</li>
<li>Las versiones de solo-texto son suficientes para garantizar la accesibilidad</li>
<li>Para qué hacer un sitio web accesible si las personas con discapacidad no son mi target</li>
<li>Hacer un sitio web accesible es costoso</li>
</ol>
<p><a href="http://www.slideshare.net/astromario/10-mitos-y-falacias-sobre-accesibilidad-web">Enlace directo (Slideshare)</a><br />
Autor | Mario Carvajal <a href="http://twitter.com/astromario">@astromario</a> <a href="http://www.astrolabio.com.co">www.astrolabio.com.co</a><br />
Vía | <a href="http://twitter.com/soniagarcia">Sonia García</a></p>
]]></content:encoded>
			<wfw:commentRss>http://angelcustodio.net/10-mitos-y-falacias-sobre-accesibilidad-web/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Una de CSS hacks para IE8, por favor</title>
		<link>http://angelcustodio.net/una-de-css-hacks-para-ie8-por-favor/</link>
		<comments>http://angelcustodio.net/una-de-css-hacks-para-ie8-por-favor/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 15:00:14 +0000</pubDate>
		<dc:creator>Angel Custodio</dc:creator>
				<category><![CDATA[Diseño y Maquetación]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Hacks]]></category>
		<category><![CDATA[IE7]]></category>
		<category><![CDATA[IE8]]></category>
		<category><![CDATA[Meta]]></category>
		<category><![CDATA[Navegadores]]></category>

		<guid isPermaLink="false">http://angelcustodio.net/?p=446</guid>
		<description><![CDATA[Como todo buen maquetador sabe, hay ciertos programas que se pasan los estándares por el forro el pito del sereno. En consecuencia, nos obligan a utilizar esas líneas de código que hacen milagros donde había imposibles llamadas hacks.
Un hack no es más que una manera de introducir código de algún tipo (CSS en este caso), [...]]]></description>
			<content:encoded><![CDATA[<p>Como todo buen maquetador sabe, hay <em>ciertos programas</em> que se pasan los estándares por <strike>el forro</strike> el pito del sereno. En consecuencia, nos obligan a utilizar esas líneas de código que hacen milagros donde había imposibles llamadas <strong>hacks</strong>.</p>
<p>Un hack no es más que una manera de introducir código de algún tipo (CSS en este caso), de tal manera que <strong>se consigue su carga en un determinado programa</strong>, en este caso, en un determinado navegador.</p>
<p>Es por todos conocidos que la familia Internet Explorer interpreta con bastante <em>ligereza</em> lo que una web debe mostrar en realidad; que si yo interpreto los paddings y margins como me da la gana, que si el border también suma para el ancho total, que si esta propiedad no la conozco&#8230; etc. Multitudes de fallos por una estrategia errónea de Microsoft que ha ido arrastrando durante años, pero eso es otro tema.</p>
<p>Al grano.<br />
<strong>IE8 es un buen navegador</strong> en comparación con su predecesor IE7 y exageradamente superior a su ancestro IE6. Respeta bastante bien la mayoría de estándares, pero también tiene &#8220;sus cosas&#8221;, las cuales vamos a solucionar con las siguientes líneas de código en el CSS.</p>
<blockquote><p>
1) *:first-child+html elemento { propiedad: valor; }<br />
2) elemento { propiedad /*\**/: valor\9 }
</p></blockquote>
<p><strong>¿Qué estamos haciendo con esas líneas?</strong><br />
Si buscamos por Google, veremos que el 2º hack corre por internet como el <em>milagro antigrasa</em> de IE8, pero no es así. Ese código lo interpreta también IE7, por lo que habrá que re-hackear de tal manera que IE7 interprete &#8220;otra cosa&#8221;.</p>
<p>La solución está en el <strong>first-child</strong>. Lo pongamos donde lo pongamos será lo que interprete IE7 sin tener el cuenta <em>el hack de los asteriscos</em>. Digamos que actúa como un <em>!important</em>.</p>
<p>Obviamente, esto no valida ni de broma, pero es otra solución si como a mí no os gusta nada llenar el código de condicionales comprobando la versión de IE.</p>
<p>Aunque existe otra forma más la cual no he podido comprobar si valida.<br />
El código que os pongo a continuación no va sobre el CSS si no directamente sobre el archivo XHTML que estéis maquetando y hace algo más &#8220;bestia&#8221; pero bastante efectivo y que ahorra tiempo, sudor y lágrimas.</p>
<blockquote><p>&lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=7&#8243; /&gt;</p></blockquote>
<p>Con ese <em>meta</em> que pondremos dentro del <em>head</em>, haremos que IE8 entre en el Compatibility Mode y renderice la web como IE7. Con esto conseguiremos poder reducir el número de hacks ya que no hará falta tener en cuenta a IE8 a la hora de maquetar. De todas formas, no es la vía más recomendable por ser algo <em>drástica</em>. Sólo debería usarse en el supuesto de que tengamos la web perfectamente adaptada a IE7 y suponga demasiado tiempo su arreglo.</p>
<p>La mejor solución; utilizar <a href="http://www.mozilla-europe.org/es/firefox/">Firefox</a>, <a href="http://www.apple.com/es/safari/">Safari</a>, <a href="http://www.opera.com/browser/">Opera</a> o <a href="http://www.google.es/chrome/">Chrome</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://angelcustodio.net/una-de-css-hacks-para-ie8-por-favor/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>La realidad del diseñador frente a los usuarios</title>
		<link>http://angelcustodio.net/la-realidad-del-disenador-frente-a-los-usuarios/</link>
		<comments>http://angelcustodio.net/la-realidad-del-disenador-frente-a-los-usuarios/#comments</comments>
		<pubDate>Mon, 20 Apr 2009 05:48:09 +0000</pubDate>
		<dc:creator>Angel Custodio</dc:creator>
				<category><![CDATA[Diseño y Maquetación]]></category>
		<category><![CDATA[Cómic]]></category>
		<category><![CDATA[Designer]]></category>
		<category><![CDATA[Dibujo]]></category>
		<category><![CDATA[Kopozy]]></category>
		<category><![CDATA[Realidad]]></category>
		<category><![CDATA[Tira Cómica]]></category>
		<category><![CDATA[User]]></category>

		<guid isPermaLink="false">http://angelcustodio.net/?p=240</guid>
		<description><![CDATA[
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.kopozky.net/" target="_blank"><img src="http://angelcustodio.net/wp-content/uploads/2009/04/kopozy-designers-560x553.gif" alt="Kopozy - Designers vs Users" title="Kopozy - Designers vs Users" width="560" height="553" class="alignnone size-large wp-image-241" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://angelcustodio.net/la-realidad-del-disenador-frente-a-los-usuarios/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
