<?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>Kernel Web &#187; Usabilidad y Accesibilidad</title>
	<atom:link href="http://www.kernelweb.org/tag/usabilidad-y-accesibilidad/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kernelweb.org</link>
	<description>Blogging, WordPress y Desarrollo Web</description>
	<lastBuildDate>Tue, 03 Nov 2009 21:24:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>5 pequeños, grandes errores en el diseño de un blog</title>
		<link>http://www.kernelweb.org/5-pequenos-grandes-errores-en-el-diseno-de-un-blog/</link>
		<comments>http://www.kernelweb.org/5-pequenos-grandes-errores-en-el-diseno-de-un-blog/#comments</comments>
		<pubDate>Sat, 05 Sep 2009 19:13:07 +0000</pubDate>
		<dc:creator>Esteban Rojas</dc:creator>
				<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[Blogs]]></category>
		<category><![CDATA[Diseño]]></category>
		<category><![CDATA[optimizar]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Usabilidad y Accesibilidad]]></category>

		<guid isPermaLink="false">http://www.kernelweb.org/?p=2237</guid>
		<description><![CDATA[Dicen que la diferencia esta en los detalles, nada más cierto cuando se trata del diseño de un blog, a menudo veo grandes diseños, pero como todo en la vida nada es perfecto ni nunca lo será.

Pero siempre se puede mejorar y es por esta razón que me propuse listar al menos 7  pequeños, grandes errores que la mayoría de los bloggers cometemos al crear el diseño de nuestro blog; y creanme que hasta a los mejores les pasa.
Mostrar el Index como Posts Recientes

Hace un tiempo escribí como mostrar posts recientes en WordPress, pero no fue hasta hace poco que un comentario me hizó darme cuenta  que vimeo-sketch-wireframehay un pecado que todos comentemos cuando utilizamos este recurso en nuestro theme.

Incluimos los posts de la portada, en conclusión creamos una sección nada usable para el visitante, pues mostramos lo mismo que hay en nuestro Index.

Pero como en todo, hay una forma de corregirlo, usando el parametro offset, que se encargará de excluir el número de posts de nuestra portada de los artículos que tomará WordPress para mostrar, un ejemplo:

<ul>
<?php $lastposts = get_posts('numberposts=5&#038;offset=5');
foreach($lastposts as $post) : setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

¿Una nueva ventana para cada enlace?

Personalmente no me gusta el uso de target="_blank", la mayoría se va por el hecho de creer que si los usuarios abren una página por ventana no se irán del sitio.

Tremendo error, como webmaster tu controlaras el sitio pero no debes interferir en como el usuario interactua con él, siempre se debe dejar que el lector administre el destino de los links que abre.]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Dicen que <strong>la diferencia esta en los detalles</strong>, nada más cierto cuando se trata del <strong>diseño de un blog</strong>, a menudo veo grandes diseños, pero como todo en la vida nada es perfecto ni nunca lo será.</p>
<p style="text-align: justify;">Pero siempre se puede mejorar y es por esta razón que me propuse listar al menos 7  pequeños, grandes errores que la mayoría de los bloggers cometemos al crear el diseño de nuestro blog; y creanme que hasta a los mejores les pasa.</p>
<h2>Mostrar el Index como Posts Recientes</h2>
<p style="text-align: justify;">Hace un tiempo escribí <a href="http://www.kernelweb.org/mostrar-posts-recientes-en-wordpress/">como mostrar posts recientes en WordPress</a>, pero no fue hasta hace poco que un comentario me hizó darme cuenta  que <img class="alignright size-medium wp-image-2265" title="vimeo-sketch-wireframe" src="http://www.kernelweb.org/wp-content/uploads/2009/08/vimeo-sketch-wireframe-300x225.jpg" alt="vimeo-sketch-wireframe" width="265" height="199" />hay <strong>un pecado que todos comentemos cuando utilizamos este recurso en nuestro theme</strong>.</p>
<p style="text-align: justify;"><strong>Incluimos los posts de la portada</strong>, en conclusión creamos una sección nada usable para el visitante, pues mostramos lo mismo que hay en nuestro Index.</p>
<p style="text-align: justify;">Pero como en todo, hay una forma de corregirlo, usando el parametro <code>offset</code>, que se encargará de <strong>excluir el número de posts de nuestra portada de los artículos que tomará WordPress para mostrar</strong>, un ejemplo:</p>
<pre><code>&lt;ul&gt;
&lt;?php $lastposts = get_posts('numberposts=5&amp;offset=5');
foreach($lastposts as $post) : setup_postdata($post); ?&gt;
&lt;li&gt;
&lt;a href="&lt;?php the_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/li&gt;
&lt;?php endforeach; ?&gt;
&lt;/ul&gt;</code></pre>
<h2>¿Una nueva ventana para cada enlace?</h2>
<p style="text-align: justify;">Personalmente <strong>no me gusta el uso de target=&#8221;_blank&#8221;</strong>, la mayoría se va por el hecho de creer que si los usuarios abren una página por ventana no se irán del sitio.</p>
<p style="text-align: justify;"><strong>Tremendo error</strong>, como webmaster tu controlaras el sitio pero <strong>no debes interferir en como el usuario interactua con él</strong>, siempre se debe dejar que el lector administre el destino de los links que abre.<span id="more-2237"></span></p>
<h2>Usar bloques de texto extensos</h2>
<p style="text-align: justify;">Si la buena comunicación verbal es usando frases cortas, porque la escrita habría de ser diferente, si escribes en parrafos extensos la idea se pierde y asustas al lector, <strong>información dosificada es mejor aceptada que impactante y larga</strong>.</p>
<h2>Ocultar ú omitir datos</h2>
<p style="text-align: justify;">A veces creemos que es tan redundante poner datos como: la fecha, el autor o las etiquetas del post, que simplemente las eliminamos.</p>
<p style="text-align: justify;">Sin considerar que esos <strong>pequeños detalles influyen en la intectividad del usuario con el sitio</strong>, como en la decisión de comentar o el seguimiento de un topic mediante las tags.</p>
<h2>No aprovechar toda la anatomía del blog</h2>
<p style="text-align: justify;">Lugares como la sidebar, <strong>el footer o el header son mayormente discriminados</strong> <img src='http://www.kernelweb.org/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' />  colocando sólo las categorías, los créditos y el logo respectivamente.</p>
<p style="text-align: justify;">He aquí algunas tecnicas y consejos que pueden ayudarte a hacer mejor el diseño de esas secciones de tu blog:</p>
<p style="text-align: justify;">- <a href="http://www.kernelweb.org/3-tecnicas-para-hacer-tu-sidebar-wordpress-unica/">Tecnicas para mejor tu Sidebar si usas WordPress</a></p>
<p style="text-align: justify;">- <a href="http://www.kernelweb.org/coleccion-de-hacks-para-los-comentarios-de-wordpress/">Colección de hacks para los comentarios en WordPress</a></p>
<p style="text-align: justify;">Y ustedes,<strong> ¿que otros &#8220;pequeños, grandes errores en el diseño de un blog&#8221; consideran que hay o han visto?</strong> estoy deseoso de leer sus comentarios y si de paso quieren criticar el diseño de este su blog <img src='http://www.kernelweb.org/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  que mejor.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kernelweb.org/5-pequenos-grandes-errores-en-el-diseno-de-un-blog/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Accesibilidad y usabilidad total para una página web</title>
		<link>http://www.kernelweb.org/accesibilidad-y-usabilidad-total-para-una-pagina-web/</link>
		<comments>http://www.kernelweb.org/accesibilidad-y-usabilidad-total-para-una-pagina-web/#comments</comments>
		<pubDate>Thu, 21 May 2009 22:01:48 +0000</pubDate>
		<dc:creator>Esteban Rojas</dc:creator>
				<category><![CDATA[Especiales]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[Webmasters]]></category>
		<category><![CDATA[Desarrollo web]]></category>
		<category><![CDATA[Diseño]]></category>
		<category><![CDATA[optimizar]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Usabilidad y Accesibilidad]]></category>

		<guid isPermaLink="false">http://www.kernelweb.org/?p=1679</guid>
		<description><![CDATA[La capacidad de crear una página web que se pueda visualizar correctamente y sea accesible sin importar navegador o potencia de los recursos técnicos es algo que todo webmaster y desarrollador web deberia tener apuntado cada vez que trabaja en algún proyecto.

Incluso para los que no somos profesionales en este campo pero tenemos algún emprendimiento en internet es bastante correcto que nos esforzemos por crear un sitio con accesibilidad y usabilidad total, ¿cómo lograrlo?, a continuación algunos recursos y consejos.
1.  Sigue las reglas y los estandares

Lograr que un blog o sitio sea cross browser no es fácil, pero el seguir los estandares de la W3C ayuda bastante a cumplir el objetivo.

Usable y Accesible
    Usable y Accesible

2.  No uses hacks, mejor usa Fixes

Lo puedes hacer manualmente o usando IE6 CSS Fixer.
3.  Optimiza tus imágenes

No es secreto que el tiempo de carga influye mucho para los usuarios; y es que son las imágenes las que más demoran en mostrarse, por ello es bueno siempre bajarles unos bytes con algún software para optimizar imágenes o herramientas web como Smush.it.
4. No te olvides del iPhone

Furor que causo el 3G :D y el iPhone es ya uno de los medios de entrada a internet que más adeptos gana dia a dia, por eso no es bueno olvidarse de él, checa como se ve tu sitio en el iPhone y si tienes un blog corriendo con WordPress optimizalo para el juguete favorito de Apple.]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">La capacidad de crear una página web que se pueda visualizar correctamente y sea accesible sin importar navegador o potencia de los recursos técnicos es algo que todo webmaster y desarrollador web deberia tener apuntado cada vez que trabaja en algún proyecto.</p>
<p style="text-align: justify;">Incluso para los que no somos profesionales en este campo pero tenemos algún emprendimiento en internet es bastante correcto que nos esforzemos por crear un sitio con accesibilidad y usabilidad total, ¿cómo lograrlo?, a continuación algunos recursos y consejos.</p>
<h2 style="text-align: justify;">1.  Sigue las reglas y los estandares</h2>
<p style="text-align: justify;">Lograr que un blog o sitio sea cross browser no es fácil, pero el seguir los estandares de la <strong>W3C</strong> ayuda bastante a cumplir el objetivo.</p>
<div id="attachment_1779" class="wp-caption alignright" style="width: 262px"><img class="size-medium wp-image-1779" title="pruebasdeusabilidad" src="http://www.kernelweb.org/wp-content/uploads/2009/04/pruebasdeusabilidad-300x213.jpg" alt="Usable y Accesible" width="252" height="160" /><p class="wp-caption-text">Usable y Accesible</p></div>
<h2>2.  No uses hacks, mejor usa Fixes</h2>
<p>Lo puedes hacer <a href="http://www.512megas.com/2009/03/10-fixes-css-que-solucionan-problemas-con-ie6/">manualmente</a> o usando <a href="http://www.kernelweb.org/ie6-css-fixer-herramienta-para-corregir-errores-en-ie6/">IE6 CSS Fixer.</a></p>
<h2>3.  Optimiza tus imágenes</h2>
<p>No es secreto que el tiempo de carga influye mucho para los usuarios; y es que son las imágenes las que más demoran en mostrarse, por ello es bueno siempre bajarles unos bytes con algún<a href="http://www.kernelweb.org/riot-software-para-optimizacion-radical-de-imagenes/"> software para optimizar imágenes</a> o herramientas web como <a href="http://www.kernelweb.org/smushit-optimizar-reducir-bytes-de-imagenes/">Smush.it</a>.</p>
<h2>4. No te olvides del iPhone</h2>
<p>Furor que causo el 3G <img src='http://www.kernelweb.org/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />  y el iPhone es ya uno de los medios de entrada a internet que más adeptos gana dia a dia, por eso no es bueno olvidarse de él, <a href="http://www.webmasterlibre.com/2009/04/14/iphone-tester-comprueba-como-se-veran-tus-sitios-en-un-iphone/">checa como se ve tu sitio en el iPhone</a> y si tienes un blog corriendo con WordPress <a href="http://www.nometech.com/blog/how-to-create-an-iphone-version-of-your-blog/">optimizalo para el juguete favorito de Apple</a>.</p>
<p><span id="more-1679"></span></p>
<h2>5. No uses tanto Flash y JavaScript</h2>
<p>Dado que son lenguajes que para su interpretación y lectura son necesarios algunos reproductores y habilitación de opciones es recomendado usarlos sólo cuando es necesario, así se evita la falta de elementos en tu sitio web si el usuario no cuenta con tales cosas y se aligera un poco más el peso final de la página.</p>
<div id="attachment_1782" class="wp-caption aligncenter" style="width: 310px"><img class="size-medium wp-image-1782" title="iphonekernel" src="http://www.kernelweb.org/wp-content/uploads/2009/04/iphonekernel-300x164.jpg" alt="Kernel Web en el iPhone" width="300" height="164" /><p class="wp-caption-text">Kernel Web en el iPhone</p></div>
<h2>6. Describe tus elementos</h2>
<p>Imágenes con el atributo ALT, <a href="http://www.kernelweb.org/el-arte-de-linkear-cuando-y-como-enlazar/">enlaces con title y buen anchor text</a>, descripciones de videos y multimedia.</p>
<h2>7. Genera contenido legible, usable y escaneable</h2>
<p>El contenido lo es todo, más alla de si el diseño es bueno, el contenido es el rey, <a href="http://www.kernelweb.org/16-tips-para-generar-contenido-mas-usable/">hacer contenido usable y de calidad</a> es una directriz no escrita, pero que es bueno seguir para hacer de la web una herramienta optima y completa.</p>
<h2>8. Prueba y Comprueba</h2>
<p>Nada más sabio que el arreglar y romper, tanto para aprender, como para mantener una website en optimo estado, usa los recursos que la web de brinda para asegurarte de que tu trabajo esta bien hecho:</p>
<ul>
<li><a href="http://www.sidar.org/hera/index.php.es">Hera</a>, completa y muy buena herramienta que rescate de las entrañas de Webmaster Libre <img src='http://www.kernelweb.org/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  una suerte haberla visto.</li>
<li><a href="http://www.kernelweb.org/crossbrowsertesting-lo-mejor-para-testear-sitios-web/">CrossBrowserTesting</a>, visualiza tu website en tiempo real en todo navegador.</li>
<li><a href="http://www.anieto2k.com/2009/04/29/instala-todas-las-versiones-de-internet-explorer-en-tu-pc/http://www.anieto2k.com/2009/04/29/instala-todas-las-versiones-de-internet-explorer-en-tu-pc/">IE Collection</a>, todos los enemigos de los estandares (IE6,7 y 8 ) en uno sólo <img src='http://www.kernelweb.org/wp-includes/images/smilies/icon_cool.gif' alt='8)' class='wp-smiley' /> , para comprobar si se ve bien tu sitio y nada más.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.kernelweb.org/accesibilidad-y-usabilidad-total-para-una-pagina-web/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
