<?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>Jepser Bernardino &#187; showcase</title>
	<atom:link href="http://jepserbernardino.com/tag/showcase/feed/" rel="self" type="application/rss+xml" />
	<link>http://jepserbernardino.com</link>
	<description>diseño y desarrollo negocios en internet</description>
	<lastBuildDate>Tue, 08 May 2012 05:35:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Showcase sitios web de partidos políticos</title>
		<link>http://jepserbernardino.com/idea/showcase-sitios-web-de-partidos-politicos/</link>
		<comments>http://jepserbernardino.com/idea/showcase-sitios-web-de-partidos-politicos/#comments</comments>
		<pubDate>Sat, 19 Feb 2011 00:59:05 +0000</pubDate>
		<dc:creator>Jepser</dc:creator>
				<category><![CDATA[idea]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://jepserbernardino.com/?p=855</guid>
		<description><![CDATA[Ya para el año electoral de mi país me detuve a ver los sitios web de cada uno de los partidos más importantes. Hago esto por que es tan importante fijarse en los detalles, pues un candidato que ni de su imagen pública (que es la que gana votos) es buena, imaginemos cuando tenga una [...]]]></description>
			<content:encoded><![CDATA[<p>Ya para el año electoral de mi país me detuve a ver los sitios web de cada uno de los partidos más importantes. Hago esto por que es tan importante fijarse en los detalles, pues un candidato que ni de su imagen pública (que es la que gana votos) es buena, imaginemos cuando tenga una N cantidad de tareas más que desempeñar. Empecemos&#8230;<span id="more-855"></span></p>
<h2>Puntos importantes a tomar</h2>
<p>En este tipo de sitios web, las características que puedo evaluar para la creación de las mismas son las siguientes:</p>
<ul>
<li>Reflejo de identidad</li>
<li>Objetivo específico (ganar más aliados, promocionar a un nuevo candidato, voluntariado, información del partido)</li>
<li>Cuidado en el grupo objetivo y el alcance que se debe tener con ellos</li>
<li>2 Acciones indispensables, llamado a afiliación y mostar en primer plano el plan de trabajo</li>
<li>Tener uso de redes sociales para divulgación de contenidos</li>
<li>Contenidos media para poder facilitar la digestión de contenidos tan serio</li>
</ul>
<h3>Partido Unionista</h3>
<p style="text-align: center;"><a href="http://unionistas.org/" target="_blank"><img class="size-medium wp-image-856 aligncenter" title="2011-02-18_1704" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1704-406x350.png" alt="" width="406" height="350" /></a></p>
<p>Empiezan bien, ya que utilizan un CMS (WordPress). Urls intuitivas, buen uso de espacio, no hay saturación de elementos. Estoy chequeando que se pueden accesar con facebook para que los comentarios sean linkeados a los perfiles, está bien. Sin embargo me parece que es un tema modificado y más que eso no refleja una imagen profesional. Más bien una imagen genérica de una plantilla, no se tenía un objetivo claro de que se quería con el sitio. A mi no me llaman a ninguna acción, parece un tipo periódico en línea con noticias.</p>
<h3>Partido Patriota</h3>
<p style="text-align: center;"><a href="http://www.partidopatriota.com.gt/2010/" target="_blank"><img class="size-medium wp-image-857 aligncenter" title="2011-02-18_1704_001" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1704_001-418x350.png" alt="" width="418" height="350" /></a></p>
<p>Ya escuchamos un par de cosas no muy agradables que descubrió Oscar Mota sobre el <a href="http://desdeguate.com/blog/2011/02/14/elecciones-guatemala-2011-patriota-facebook/">Partido Patriota y su campaña de social media</a>. Fuera de eso vemos que utilizan Joomla! para su plataforma de contenidos, cosa que estoy en desacuerdo ya que no pudieron modificar las url&#8217;s a amigables para un mejor SEO. El sitio tiene un orden, sin embargo como el anterior, no tiene un objetivo propuesto. Es un sitio informativo que no llama a la acción. Las secciones son las que se necesitan, nada fuera de lo común.</p>
<h3>Partido Gana</h3>
<p style="text-align: center;"><a href="http://www.gana.com.gt/" target="_blank"><img class="size-medium wp-image-858 aligncenter" title="2011-02-18_1705" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1705-442x350.png" alt="" width="442" height="350" /></a></p>
<p>Primer GRAN ERROR, ¿una animación flash? Para que queremos un logotipo de un Partido Político volando por todos lados. Tienen un manejador de contenidos propio o al menos no conocido, además de un diseño con un estilo de los 90&#8242; no pasan de tener banners flash por todos lados. Hay errores en el html pues si pongo el puntero sobre el link no me acepta, pero si le doy a sus alrededores si me manda al sitio. Tiene un código realmente sucio. Si bien tiene una organización de menús más ordenada y banners a secciones de interés, no tengo nada más que decir referente al sitio.</p>
<h3>Partido Viva</h3>
<p><a href="http://www.visionconvalores.com/index.php" target="_blank"><img class="aligncenter size-medium wp-image-860" title="2011-02-18_1705_002" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1705_002-414x350.png" alt="" width="414" height="350" /></a></p>
<p>Este es uno de los sitios que mejor me pareció ya que tiene colores que son frescos y no la típica paleta. La organización de los links está bien, tienen más o menos el objetivo del sitio. Me gusta la estructura de la página de inicio. Pero creo que perdieron esfuerzos en el link de &#8220;Fuerza Viva&#8221; porque no encuentro nada de fuerza ni vida en esa sección.</p>
<h3>Encuentro por Guatemala</h3>
<p><a href="http://www.encuentroporguatemala.org/index.html" target="_blank"><img class="aligncenter size-medium wp-image-861" title="2011-02-18_1706" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1706-375x350.png" alt="" width="375" height="350" /></a></p>
<p>Primero, es una plantilla de CSS. Segundo, está feo. Tercero, no utiliza manejador de contenidos. Trataron de hacer unos call-to-action buttons de afíliate y plan de trabajo, puntos a favor. A este sitio le falta dinamismo y si el sitio es redondo, no entiendo por que tanta geometría cuadrada.</p>
<h3>Frente Republicano Guatemalteco</h3>
<p><a href="http://www.frg.org.gt/" target="_blank"><img class="aligncenter size-medium wp-image-862" title="2011-02-18_1706_001" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1706_001-391x350.png" alt="" width="391" height="350" /></a></p>
<p>Empezamos bien, CMS (WordPress) sin embargo no tomaron en cuenta lo fácil que es hacer que las url&#8217;s sean amigables. FRG utilizó un tema llamado <a href="http://www.pagelines.com/demos/whitehousepro/">White House</a> en su versión gratuita. No pudieron ni invertir US $ 79 por su proyección en internet, MUY MAL. Creo que caemos en lo mismo que encuentro por Guatemala, solo que con un CMS. Además de tener secciones vacías.</p>
<h3>Partido Creo</h3>
<p><a href="http://creo.org.gt" target="_blank"><img class="aligncenter size-medium wp-image-864" title="2011-02-18_1759" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1759-464x350.png" alt="" width="464" height="350" /></a></p>
<p>Un sitio web hecho nuevamente en WordPress, bien por el CMS. Con un diseño bastante sutil y podría decirse moderno, sin embargo estoy casi seguro que es un plantilla. No tienen un objetivo en el sitio, más que informativo y ese es uno de los errores más grandes a la hora de crear un sitio web para una organización. Pese a eso, creo que está bien la división de los menús, no tengo más que decir.</p>
<h3>Partido de Avanzada Nacional</h3>
<p><a href="http://www.pan-gt.com/" target="_blank"><img class="aligncenter size-medium wp-image-863" title="2011-02-18_1706_002" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1706_002-400x350.png" alt="" width="400" height="350" /></a></p>
<p>Bueno, bueno&#8230; Detengámonos un poco, un sitio web así me daña la vista. Está bien que sean sus colores oficiales pero hay que tener buen uso de ellos. El sitio me parece como de esos que regalan y que son plantillas para hacer tu sitio web. No me llama la atención pues parece un blog mal hecho con un estilo, sin estilo.</p>
<h3>Doctor Manuel Valdizón</h3>
<p><a href="http://www.manuelbaldizon.com/index.html" target="_blank"><img class="aligncenter size-medium wp-image-859" title="2011-02-18_1705_001" src="http://jepserbernardino.com/wp-content/uploads/2011/02/2011-02-18_1705_001-475x350.png" alt="" width="475" height="350" /></a></p>
<p>Deje a este de último por 2 motivos: su sitio web y la publicidad que tiene por todos lados. Es un sitio web del candidato que a la vez es de su partido. Donde está la estética, al entrar una canción robada (supongo que no compró los derechos para modificarla) que no se puede parar, es totalmente intrusivo y un insulto a los desarrolladores web. Además de crear un sitio web con el estilo de los años 80&#8242;, el sitio tiene imágenes desproporcionadas y unos íconos que no tienen ni un poco de diseño. Realmente este es el peor sitio de los que he visto en mi vida, lo siento por ser tan cruel pero es la verdad.</p>
<p>Por favor, no contratar a el sobrino o hijo pequeño para hacer trabajos tan importantes como este. Solo me queda decir que, en el tiempo donde la tecnología está adelantandose y penetrando en los usuarios con mayor impacto, no podemos dejar que pseudo-asesores pongan en riesgo la credibilidad de una organización por prostituir el mercado web.</p>
<p>Es como un doctor, creo que nadie se iría con uno que su consultorio tengan como bisturí un cuchillo de cocina oxidado. Solo nos queda tratar de mejorar el mercado, pensar como los usuarios, estudiar el caso y sobre todo asesorar a nuestro cliente.</p>
]]></content:encoded>
			<wfw:commentRss>http://jepserbernardino.com/idea/showcase-sitios-web-de-partidos-politicos/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Showcase — Sitios web de universidades de Guatemala</title>
		<link>http://jepserbernardino.com/proyectos/showcase-sitios-web-de-universidades-de-guatemala/</link>
		<comments>http://jepserbernardino.com/proyectos/showcase-sitios-web-de-universidades-de-guatemala/#comments</comments>
		<pubDate>Wed, 25 Nov 2009 01:12:29 +0000</pubDate>
		<dc:creator>Jepser</dc:creator>
				<category><![CDATA[proyectos]]></category>
		<category><![CDATA[diseño web]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://jepserbernardino.com/?p=645</guid>
		<description><![CDATA[La idea de hacer este showcase es mostrar los pro's y contra's de los sitios web de distintas instituciones educativas de nivel superior. Y cada sitio tiene una prueba que le hago para saber, a parte del diseño; como están en desarrollo ]]></description>
			<content:encoded><![CDATA[<p>Y todo esto empieza por que un día me encontré con el <a href="http://www.noupe.com/showcases/the-ultimate-ugly-showcase-of-current-government-websites.html">showcase de sitios web gubernamentales feos</a>, donde Guatemala estaba listada junto a la mayoría de países. Y eso me decepciona pues hay mucho talento tanto en Guatemala como en otro países que aparecen, no se realmente que puede ser pero bueno, la prueba consiste en diseño, validación de código y desarrollo.<span id="more-645"></span></p>
<h3>Universidad de San Carlos de Guatemala</h3>
<p><a href="http://usac.edu.gt"><img class="alignnone size-full wp-image-650" title="usac-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/usac-thumb.jpg" alt="usac-thumb" width="580" height="465" /></a></p>
<p><a href="http://usac.edu.gt"></a>Validación de <a href="http://validator.w3.org/check?uri=http://www.usac.edu.gt/">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.usac.edu.gt/">css</a> | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fwww.usac.edu.gt%2F">accesibilidad</a></p>
<p>A mi parecer, el ancho del sitio está bien, sin embargo está hecho con tablas. Solo le quita muchos puntos, sabemos que tablas = tabular datos. Es interesante que el menú principal está hecho con flash, no entiendo ¿por qué? Normalmente al menos hay una animación por algún lado, lo que veo es <em>hover</em> que se puede hacer fácilmente con css.</p>
<p>Tiene breadcrums, eso es bueno; lastimosamente el buscador es un <em>custom search</em> de Google que me saca a otra ventana.  Eso sí, tienen ordenado el sitio pues encontré un mapa de sitio que me muestra la estructura del mismo.</p>
<h3>Universidad Galileo</h3>
<p><a href="http://galileo.edu"><img class="alignnone size-full wp-image-653" title="galileo-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/galileo-thumb.jpg" alt="galileo-thumb" width="580" height="470" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=http://www.galileo.edu/">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.galileo.edu/">css</a> | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fwww.galileo.edu%2F">accesibilidad</a></p>
<p>Aquí empiezo por darme cuenta que no tiene <em>DOCTYPE</em>, y también define una codificación <em>UTF-8</em> en el header y luego en el meta la define como <em>ISO-8859-1</em>, esto puede causar un poco de problemillas con los exploradores.</p>
<p>Fuera de eso el sitio también está hecho en tablas. Lo bueno es que el menú no es flash y aún que las imágenes no tienen alt, ya es poco probable encontrar exploradores que no lean imágenes. A pesar que el búscador tiene problemas, la información del contenido la presentan de forma ordenada, eso es bueno y también tienen un sidebar con información relevante. El diseño está muy cuadrado, se pueden jugar con las figuras geométricas sin perder la seriedad de la institución. Además utliza url&#8217;s amigables con los búscadores.</p>
<p>Lo bueno es que utilizan RSS para mantener actualizados a sus suscriptores en diferentes áreas.</p>
<h3>Universidad Rafael Landívar</h3>
<p><a href="http://www.url.edu.gt"><img class="alignnone size-full wp-image-658" title="url-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/url-thumb.jpg" alt="url-thumb" width="580" height="470" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=http://www.url.edu.gt/PortalURL/">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.url.edu.gt/PortalURL/Noticias/">css</a> | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fwww.url.edu.gt%2FPortalurl%2F">accesibilidad</a></p>
<p>Veo en la URL, un diseño de los 90&#8242; cuando todo lo cuadrado estaba de moda, si embargo ya utilizan javascript para un acordeón para el menú. Además utilizan divs (aunque no tableless). Me gusta mucho que utilicen thumbnails para mostrar las noticias y también la imagen principal. ¡También utilizan twitter!</p>
<p>También  tienen breadcrumbs, un punto a favor por ser sitios con mucha información. La verdad no está tan mal trabajo, pues también en las páginas internas utilizan una imagen principal que le da una mejor cara.</p>
<h3>Universidad Rural</h3>
<p><a href="http://urural.edu.gt"><img class="alignnone size-full wp-image-654" title="rural-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/rural-thumb.jpg" alt="rural-thumb" width="580" height="470" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=http://www.urural.edu.gt/">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.urural.edu.gt/">css</a> | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fwww.urural.edu.gt%2Findex.html">accesibilidad</a></p>
<p>No tengo mucho que decir con este sitio, pues están con el concepto de la web, donde un logotipo volando y un contador eran la moda. Pienso que deberían re-organizar su menú y también chequear su compatibilidad en firefox y luego en internet explorer. Además de maquetar el sitio con div&#8217;s y no tablas.</p>
<h3>Universidad San Pablo de Guatemala</h3>
<p><a href="http://www.uspg.edu.gt"><img class="alignnone size-full wp-image-655" title="sp-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/sp-thumb.jpg" alt="sp-thumb" width="580" height="470" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=http://uspg.edu.gt/">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fuspg.edu.gt%2F&amp;profile=css3&amp;usermedium=all&amp;warning=1&amp;lang=es">css</a> | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fuspg.edu.gt%2F">accesibilidad</a></p>
<p>Es increíble que aunque nunca haya escuchado de esta universidad (que no existe físicamente) aprobó las 2 validaciones; de markup y css. Además de un bonito diseño, ya está utilizando tecnologías open-source, pues utiliza Joomla!. A mi parece tiene un diseño coherente y despliega la información de una forma ordenada.</p>
<h3>Universidad del Valle de Guatemala</h3>
<p><a href="http://www.uvg.edu.gt"><img class="alignnone size-full wp-image-660" title="uvg-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/uvg-thumb.jpg" alt="uvg-thumb" width="580" height="470" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=http://www.uvg.edu.gt/">markup</a> | css (no aplica) | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fuvg.edu.gt%2F">accesibilidad</a></p>
<p>Primero aclararé que la UVG no aplica a el validado de css puesto que no tiene alguna hoja de estilos; en pocas palabras, malo. Al ver este sitio se me viene una ironía pues, siendo ellos los representantes ante la ICANN, tienen un sitio feo y además es prácticamente solo imágenes. Pienso el webmaster debería empeñarse un poco más en mostrar una buena cara para esta institución. El RSS no sirve, un rediseño total sería bueno.</p>
<h3>Universidad Mariano Gálvez de Guatemala</h3>
<p><a href="http://www.umg.edu.gt"><img class="alignnone size-full wp-image-663" title="umg-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/umg-thumb.jpg" alt="umg-thumb" width="580" height="470" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.umg.edu.gt&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.654">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.umg.edu.gt/">css</a> | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fwww.umg.edu.gt%2F">accesibilidad</a></p>
<p>A decir verdad, el sitio de la UMG es uno de los mejores en los que he visto, sin embargo no veo un diseño inteligente. No se si su prioridad sea informar a los estudiantes o captar. Supongo que están enfocados a los estudiantes matriculados, no pienso que sea una buena idea tener el menú principal como menú de pie. El banner hace bien mostrando la información relevante. En general es sitio cumple con lo necesario.</p>
<h3>Universidad Francisco Marroquin</h3>
<p><a href="http://www.ufm.edu.gt"><img class="alignnone size-full wp-image-656" title="ufm-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/ufm-thumb.jpg" alt="ufm-thumb" width="580" height="470" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=https://www.ufm.edu/">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=https://www.ufm.edu/">css</a> | <a href="http://wave.webaim.org/report?url=https%3A%2F%2Fwww.ufm.edu%2F">accesibilidad</a></p>
<p>Debo decir que es el mejor sitio entre las universidades. Me agrada el espacio entre los objetos y las tres columnas para la página principal.  Tiene breadcrumbs, además de un menú facil y a pesar que casi todas las secciones están en sub-dominios me agrada el minimalista.</p>
<h3>Universidad del Istmo</h3>
<p><a href="http://www.unis.edu.gt"><img class="alignnone size-full wp-image-657" title="unis-thumb" src="http://jepserbernardino.com/wp-content/uploads/2009/11/unis-thumb.jpg" alt="unis-thumb" width="580" height="415" /></a></p>
<p>Validación de <a href="http://validator.w3.org/check?uri=http://www2.unis.edu.gt/">markup</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www2.unis.edu.gt/">css</a> | <a href="http://wave.webaim.org/report?url=http%3A%2F%2Fwww2.unis.edu.gt%2F">accesibilidad</a></p>
<p>La Unis es otra universidad que no tiene un mal diseño, está bien utilizado el buscador personalizado de Google (con iframe). Un gran error, es el menú; pues son imágenes con un texto con Lucida Sans, una fuente que casi todas las máquinas tienen. El contenido está distribuido de forma ordenada y a pesar que hay un problema con los márgenes y paddings, el sitio esta bien.</p>
<hr />Un aspecto positivo que veo es que la mayoría utiliza una <em>url</em> fácil de recordar y con una terminación adecuada (.edu.gt). Insto a que si conocen al creador, diseñador o director de proyecto de las universidades; comenten un rediseño para estar a la vanguardia y mostrar porque las casas de estudio son llamadas educación superior.</p>
]]></content:encoded>
			<wfw:commentRss>http://jepserbernardino.com/proyectos/showcase-sitios-web-de-universidades-de-guatemala/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Showcase: Malas practicas web que debemos mejorar</title>
		<link>http://jepserbernardino.com/idea/showcase-malas-practicas-web-que-debemos-mejorar/</link>
		<comments>http://jepserbernardino.com/idea/showcase-malas-practicas-web-que-debemos-mejorar/#comments</comments>
		<pubDate>Mon, 25 May 2009 07:00:41 +0000</pubDate>
		<dc:creator>Jepser</dc:creator>
				<category><![CDATA[idea]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[sitio web]]></category>

		<guid isPermaLink="false">http://jepserbernardino.com/?p=389</guid>
		<description><![CDATA[Ideas y malas practicas de sitios web hechos en Guatemala y como mejorarlas.]]></description>
			<content:encoded><![CDATA[<p>En mi país, como en todo el mundo, las compañias que ofrecen servicios web están creciendo. Encontrando un nicho de oportunidades en esta clase de servicios, sin embargo muchas de ellas no están realmente capacitadas o comprometidas con brindar un servicio que muestre lo que realmente deben. Para ello he creado un showcase para mostrar los errores comunes que no tenemos que cometer.<span id="more-389"></span></p>
<p>Antes de todo quiero aclarar la diferencia entre una página web y un sitio web. Ya que casi cada empresa web que visito, encuentro &#8220;hacemos <em>páginas web</em>&#8220;.  Es una palabra la gran diferencia, como lo mencioné en <a href="bernardino.com/2009/03/5-cosas-que-debe-saber-al-adquirir-tu-sitio-web/">&#8220;5 cosas que debes saber antes de adquirir tu sitio web&#8221;</a>, un detalle muy imporante:</p>
<ul>
<li><a title="Según google, página web" href="http://www.google.com/search?hl=es&amp;q=define%3Apagina+web&amp;btnG=Buscar+con+Google&amp;lr=&amp;aq=f&amp;oq=">Página web</a>: en resumen es <strong>un </strong>archivo donde se muestra contenido en un formato para que pueda ser leído por un explorador web&#8230;</li>
<li><a title="Según google, sitio web" href="http://www.google.com/search?hl=es&amp;q=define%3Asitio+web&amp;btnG=Buscar&amp;lr=">Sitio web</a>: <strong>conjunto</strong> de páginas web que hace referencia a una empresa, institución o información; con un mismo tema en común&#8230;</li>
</ul>
<p>Tenemos que tener en cuenta que, como lo he escrito antes, el saber crear un sitio web no es saber utilizar un editor de etiquetas HTML o saber manejar un programa de edición de imágenes, como comprar un dominio,  etc. Es más que aspectos técnicos, es todo un arte :D.</p>
<h2>Como te veo te trato, el diseño</h2>
<h5>Y esto que és, colores</h5>
<div id="attachment_392" class="wp-caption aligncenter" style="width: 490px"><a href="http://recursoshumanos21.info"><img class="size-medium wp-image-392" title="design-rh" src="http://jepserbernardino.com/wp-content/uploads/2009/05/design-rh-500x245.jpg" alt="design-rh" width="480" height="235" /></a><p class="wp-caption-text">Creemos un layout con un concepto de color y diseño</p></div>
<p>Al crear un sitio tienes que conocer el <a title="Entendiendo el diseño web" href="http://www.alistapart.com/articles/understandingwebdesign/">concepto de diseño web</a>. No literamente o técnicamente como un diseñador gráfico o algo a fín. Sino algo más espacial y usable, un diseño acorde a las necesidades de la empresa que nos contrata, no voy a colocar un diseño super dinámico con brushes e ilustraciones a un sitio que vende farmacéuticos, sería más acorde un diseño con colores consitentes y no contrastantes, fotografías de los productos con su titulo, etc.</p>
<p>Con un buen layout puedes brindarle a tu posible cliente las herramientas que necesita  y la información de una forma amena para la vista y que invita a contrarte. Recuerda pensar como el cliente quiere a tu empresa, y no como empresa que quiere clientes. Recuerda que una imagen hablas más que mil palabras.</p>
<h5>¿Qué había aquí?, imágenes rotas</h5>
<p>Cuando desarrolles un sitio web, verifica que todos los objetos (imágenes, API&#8217;s, videos) funcionen a la perfección y que tus visitantes no lidien con los cuadritos con imágenes que no aparecen, encabezados que faltan y no saben de que trata el contenido, menús hechos con imágenes que no cargaron.</p>
<h5>La página no existe, error 404</h5>
<p>El típico error que da la cara cuando nosotros no verificamos los links o las secciones que borramos, mucho cuidado con tener este tipo de errores, la mayoría de gente no tiene la paciencia para buscar tu página principal y buscar si por alli tienes el contenido que buscas.</p>
<p>Y como puede que se te vaya alguna vez uno de estos errorsitos, ten una <a title="Buenas error 404" href="http://www.smashingmagazine.com/2009/01/29/404-error-pages-one-more-time/">buena página &#8220;error 404&#8243;</a> que mostrar, así el usuario no se sentirá como que está fuera del sitio, simplemente está en el lugar equivocado, pero puede regresar a tu sección pricipal para buscar desde allí.</p>
<h2>Flash, flash y más flash&#8230;</h2>
<h5>El sitio full-flash</h5>
<div id="attachment_377" class="wp-caption aligncenter" style="width: 490px"><a href="http://designwebtwin.com"><img class="size-full wp-image-377" title="mal-design4" src="http://jepserbernardino.com/wp-content/uploads/2009/05/mal-design4.jpg" alt="mal-design4" width="480" height="235" /></a><p class="wp-caption-text">No usar flash para crear sitios con información plana</p></div>
<p>Esta es una historia conocida por todos, diganme ¿Quién no se ha topado con un sitio totalmente flash? Tu, si tienes pensado un sitio hecho totalmente en flash, por favor, quítate esa idea de la cabeza. A pesar que ya hay métodos para que Google indexe flash, no es la gracia. Sabes que flash está hecho para crear animaciones y aplicaciones interactivas, y he visto muy buenos sitios hechos con flash. Sitios que si han de necesitarlo ya que lo utilizan como debe ser, no solo por los movimientos. Además, gasta muchos recursos si no utilizas el actionscript como medio de desarrollo.</p>
<p>No es en forma de enojarme ;) es simplemente que se pierden muchos clientes potenciales, al hacer esperar para cargar solo texto y una que otra imagen.</p>
<h5>La animación de la intro</h5>
<div id="attachment_404" class="wp-caption aligncenter" style="width: 490px"><a href="http://www.papelespremium.com/catalogo/index.htm"><img class="size-medium wp-image-404" title="intro-flash" src="http://jepserbernardino.com/wp-content/uploads/2009/05/intro-flash-500x269.jpg" alt="intro-flash" width="480" height="258" /></a><p class="wp-caption-text">Las introducciones flash no son buenas :(</p></div>
<p>Este caso me da mucha gracia :D, me he topado con sitios que colocan el &#8220;skip intro&#8221; al final de la introducción. A las personas que me han preguntado por que no utilizo introducciones flash les respondo:</p>
<ul>
<li>Para mi, es un gasto de recursos. Yo visito un sitio para ver su contenido, no para ver imágenes volando de un lado para otro y un logotipo que da vueltas.</li>
<li>Es un golpe bajo a la usabilidad y accesibilidad, estamos haciendo que el usuario espere por algo que posiblemente no le interese y otra es que tiene que hacer más clicks para llegar a la información que necesita, y el visitante tiene que encontrar la información que busca en 3 clicks como máximo.</li>
</ul>
<h2>Y donde estoy, cuida la navegación</h2>
<h5>No recuerdo en donde era, menús</h5>
<div id="attachment_391" class="wp-caption aligncenter" style="width: 490px"><a href="http://www.sabro.net"><img class="size-medium wp-image-391" title="menu-largo" src="http://jepserbernardino.com/wp-content/uploads/2009/05/menu-largo-500x245.jpg" alt="menu-largo" width="480" height="235" /></a><p class="wp-caption-text">Crear menús cortos y con titulos fáciles de recordar</p></div>
<p>La mente no guarda más de 8 elementos al mismo tiempo, como pueden leer el <a href="http://jepserbernardino.com/2009/05/como-crear-un-buen-sitio-web-escribiendo-el-contenido/">tercer artículo de Tannel</a>, agrupen sus secciónes en grupos pequeños. Una detalle muy importante es hacerlo de manera ordenada, hay métodos muy efectivos para poder hacerlo como el de <a href="http://www.usability.gov/design/cardsort.html">casificación por tarjetas</a>, por puntos, por hits, como ejemplos. También los titulos de los menús hazlos cortos. Lo repito una y otra vez, piensa como tus clientes, usa tu imaginación para desplegarle a tu visitante un menú intuitivo y fácil de utilizar.</p>
<h5>¿Flash en menús?</h5>
<div id="attachment_386" class="wp-caption aligncenter" style="width: 490px"><a href="http://compuweb.com.gt"><img class="size-medium wp-image-386" title="guatecompu" src="http://jepserbernardino.com/wp-content/uploads/2009/05/guatecompu-500x245.jpg" alt="guatecompu" width="480" height="235" /></a><p class="wp-caption-text">No crear menús flash y utilizar una buena diagramación</p></div>
<p>No utilices flash para tu navegación es una mala práctica web, de hecho de las más comunes, imagina que tu visitante no tiene flash instalado o tiene un versión obsoleta, no podrá navegar en tu sitio. Los soniditos pueden ser interesantes pero después de eso no les encuentro función; ahora con los efectos visuales (aparte que son mi trauma) puedes crearlos con javascript, hay formas <a title="tutorial CSS menu" href="http://www.sitepoint.com/article/build-site-navigation-css/">semánticamente correctas</a>, que podrás <a title="Estilos para tu menu" href="http://www.instantshift.com/2009/01/11/30-excellent-css-based-navigation-and-buttons-tutorial/">estilizar a tu manera</a>.</p>
<h2>No me preguntes tanto, formularios</h2>
<div id="attachment_394" class="wp-caption aligncenter" style="width: 490px"><a href="http://tacoinn.com.gt"><img class="size-medium wp-image-394" title="formulario-largo" src="http://jepserbernardino.com/wp-content/uploads/2009/05/formulario-largo-500x245.jpg" alt="formulario-largo" width="480" height="235" /></a><p class="wp-caption-text">Los formularios cortos son mejores, cuidemos los títulos de páginas también</p></div>
<p>Una parte muy importante de los sitios y deben de tener como requisito, es un formulario de contacto. NO tener secciones de contacto donde solo haya un link <em>mailto:micorreo@miempresa.com</em>, debemos crear formularios de contacto accesibles y sin complicaciones. Entre los puntos que debes de tomar en cuenta están los siguientes:</p>
<ul>
<li>pregunta solo lo necesario, los demás datos podrás conocerlos en el proceso</li>
<li>se claro en los campos que pides</li>
<li>valida tu formulario con php o <a title="validador con jquery" href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">javascript</a>, y no utilices pop-ups para los mismos</li>
<li>no mandes a tus visitantes a otras direcciones que no tienen correlación con la tuya</li>
<li>No utilices redirects para redireccionar el mensaje de &#8220;enviado&#8221; y tampoco pop-ups, sabes que la gente los odia</li>
</ul>
<h2>El contenido manda, diagramación</h2>
<p>Al mencionar diagramación me refiero a todas esas cosas que se despliengan como contenido: texto, imágenes, video. Debes hacer que tu layout contenga la información que queremos, pero no saturar la vista del usuario con mucho marketing o gifs animados, de hecho eso daña la vista, molesta. Deja suficiente <a href="http://www.alistapart.com/articles/whitespace/">espacio entre parráfos y elementos</a> para que el contenido &#8220;respire&#8221;. No dejes mucho para que se mire vacio.</p>
<p>También complementa tu información con imágenes o videos, recuerda mucho cuidar los encabezados; los visitantes ojean el contenido en busca de información relevante, por eso también puedes utilizar <a title="Iconos para contenido" href="http://www.smashingmagazine.com/2009/03/03/how-to-use-icons-to-support-content-in-web-design/">iconos para resaltar la información</a> y hacerla más llamativa.</p>
<p>Juega con la colocación de los elementos, hazlo de forma que los que tengan más relevancia sean más grandes y entre menor relevancia, menor tamaño. Una buena forma de saber que es lo que más interesa es hacerlo por puntajes, imagina que la<em> página de un producto es de 14 puntos</em> entonces:</p>
<ul>
<li>noticias 2 puntos</li>
<li>artículos relacionados 2 puntos</li>
<li>descripción y fotografía 7 puntos</li>
<li>beneficios o valor agregado 3 puntos</li>
</ul>
<div id="attachment_402" class="wp-caption aligncenter" style="width: 416px"><img class="size-medium wp-image-402" title="diagramacion" src="http://jepserbernardino.com/wp-content/uploads/2009/05/diagramacion-406x300.jpg" alt="diagramacion" width="406" height="300" /><p class="wp-caption-text">Hay varios metodos de diagramación, este es por puntaje</p></div>
<p>Toma en cuenta en que, el ojo humano se parece mucho a un motor de búsqueda, ambos empiezan a leer de la esquina superior izquierda y terminan en la esquina inferior derecha, de este modo es bueno que coloques tanto los textos de relevancia como las palabras clave en esas partes.</p>
<p>Cuida las faltas de ortografía, revisa tu contenido antes de publicarlo y si tienes alguna, no dudes, corrígela inmediatamente. Una buena redacción y una buena ortografía te dan muchos puntos a favor. Si te pones a pensar, las decisiones de compra se toman en tu sitio web, no más. Por eso, cuida mucho mucho, lee con atención mucho; el contenido, sé breve y consciso.</p>
<h2>Da lo que los otros no, el valor agregado</h2>
<p>Rompe el paradigma de dar lo que las demás empresas dan. Una característica que busca cualquier cliente potencial en el producto o servicio que necesitan, es ese &#8220;plus&#8221;, un beneficio; te aseguro que tu lo haces cuando quieres adquirir algo. Entonces, ¿Por qué no ser tú? Brinda ese beneficio que la competencia se resguarda y defiende como que es una política de empresa. No por eso tienes que reestructurar tu negocio, solo se más flexible.</p>
<p>Dar el beneficio no siempre es producto gratis o promociones. Eso es puro marketing, la ventaja de la web es que puedes enganchar a tus clientes con herramientas funcionales; que hagan más clara y accesible la navegación, así ellos encontrarán lo que buscan, rápido.</p>
<h5>Dale libertad de escribir, utiliza CMS</h5>
<p>Primero defino que es <em>CMS</em>: Es simplemente un sistema manejador de contenidos, y como su nombre lo dice; maneja la información de tu sitio. Hay personas que pueden ir en contra de esto, por que dicen que recarga más el servidor entre otras cosas.</p>
<p>Yo respondo a eso que hay métodos y plugins para poder crear html plano para sean servidas en vez de hacer siempre un request al servidor. Hablando ya propiamente de los CMS puedo citar los principales beneficios:</p>
<ul>
<li>Si eres el desarrollador, una de dos: te quitas el peso de encima de estar actualizando contenidos, que a pesar de ser un ingreso económico; no es significativo. Es decir, le das ese valor agregado que hablo a tu cliente. O se te es más fácil actualizar los contenidos, no más el tedioso editor de texto → ftp → corroborar.</li>
<li>Crear secciones y subsecciones a tu antojo, no teniendo que duplicar el html una y otra vez</li>
<li>Te puedes concentrar más en un buen desarrollo ya que se manejan temas</li>
<li>Hay plugins y complementos de todo tipo para que puedas adaptarle a tu sitio</li>
</ul>
<p>En la web encontrarás muchos tipos de CMS, te voy a citar los principales y porque los utilizo.</p>
<ul>
<li><a title="Wordpress" href="http://wordpress.org">WordPress</a>, inicialmente fue creado como plataforma para blogs, pero ha ido evolucionando al punto que (también para mí) es el CMS default para muchos desarrolladores. WordPress tiene una versatilidad inmesa, además que hay plugins de todo, es muy divertido desarrollar para este CMS ( lo es para mí). WordPress está disponible en Inglés y Español, esta característica es muy importante ya que otros CMS no tienen traducción o es muy mala.</li>
<li><a title="Drupal" href="http://www.joomla.org/">Drupal</a>, una plataforma muy facil de utilizar tanto para el usuario (administrador) como para el desarrollador. Ya que puedes crear bloques a tu antojo donde puedes ir colocando módulos condicionales dependiendo en que sección del sitio estás, yo lo utilizo con sitios que necesitan de más opciones y el cliente necesitas más libertad para admnistarlo, digamos para el tráfico pesado.</li>
<li><a title="Joomla!" href="http://www.joomla.org/">Joomla!</a>, otro CMS muy poderoso y de los más antiguos. Este CMS se caracteriza ya que tiene una comunidad muy grande brindando soporte, y al igual que WP, tiene plugins casi para todo. El defecto que le miro a este es que es muy difícil administralo (al menos para mi lo fue), ya que maneja una forma que tardarás un poco en familiarizarte. Esto no le quita lo poderoso y lo versátil.</li>
<li><a title="Edicy" href="http://edicy.com">Edicy♥</a>, caso especial. Como se dice en mi país: &#8220;Se salió del canasto&#8221;, aparte de ser el CMS más fácil de utilizar que he conocido, es un servicio completo de publicación y creación de sitios web. El servicio tiene consigo hosting y CMS.El CMS posee las características que la demanda necesita: formularios de contacto, blog, galería de imágenes, creación de secciones y subsecciones. La edición de contenido es lo que revoluciona en la web, ya que es a tiempo real, ya no tienes que guardar o previsualizar el contenido. Todo es a tiempo real y drag-n-drop. <em>Por si deseas más información me <a title="Soporte edicy" href="http://jepserbernardino.com/contacto">puedes contactar</a>, brindo soporte en español.</em></li>
</ul>
<h5>A un click de lo que busco, formulario de búsqueda</h5>
<p>Esta es una de las herramientas que más me gusta utilizar :p, y la ironía es que la que menos utilizan los desarrolladores. Los CMS que he mencionado traen un buen motor interno de búsqueda. Imagina que creas un sitio de farmacéuticos, el visitante busca un producto en específico. Tiene que tener un búscador entre tanto producto que ofreces.</p>
<p>Ten en cuenta que, como lo escribí arriba, tienes que tener saber que el usuario va por información, nada más.</p>
<h5>Quiero algo fresco, Blog</h5>
<p>En estos tiempos hasta el más perdido tiene su blog, una vitácora donde escribes de lo que quieres. Un blog te da muchos puntos a favor, ya que para que un sitio tenga visitas reales, tienes que brindarle información fresca y actualizada. Puedes utilizarlo como medio para dar noticias de lo que está pasando con tu empresa, para publicar promociones o tips de algún tema en específico.</p>
<p>Ahora con los CMS, especiamente WordPress, puedes integrar el sitio y el blog en uno. Un ejemplo muy claro es que estes leyendo este artículo, si no lo hubiera creado, seguro estarías en otro sitio que brinde información parecida :p.</p>
<h5>Únete a mi grupo, redes sociales y bookmarks</h5>
<div id="attachment_403" class="wp-caption aligncenter" style="width: 485px"><img class="size-medium wp-image-403" title="redes-sociales" src="http://jepserbernardino.com/wp-content/uploads/2009/05/redes-sociales-500x294.jpg" alt="redes-sociales" width="475" height="279" /><p class="wp-caption-text">Una buena y pensada presencia en las redes sociales puede ser muy útil y beneficiosa</p></div>
<p>En la <em>&#8220;web 2.0&#8243;</em>, como le llaman a este movimiento (no es ninguna tecnología) o nuevo trend de la web, es muy común ver empresas que tienen presencia en redes sociales como Twitter, Facebook, Digg, entre otras. Que lo que hacen es (en la medida que sepas utilizarlo) incrementar tus visitas con personas que les interesa tu producto, servicio o lo que estés ofreciendo.</p>
<p>Y una vez tengas tu blog :), se tienes un gran responsabilidad de actualizarlo, no tomes la excusa de no tener tiempo, no vas a decirle a tu cliente, mire no tengo tiempo de atender un contenido e informale que es lo que acontece en relación a nuestra empresa. Si no actualizas con buen contenido tu blog es como que si no lo tuvieras, ten mucho en cuenta esto.</p>
<h5>Y donde estoy, breadcrumbs</h5>
<p>Más que un valor agregado, es un obligación tener <a title="Breadcrumbs" href="http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/">breadcrumbs</a>, que son una ayuda que te muestra la ruta que tomaste para llegar a donde estás, es una herramienta muy importante cuando creas sitios muy grandes o con subsecciones. Hay muchas formas de mostrar los breadcrumbs, solo es de usar tu imaginación. Creeme que con esto, aliviaras a tus usuarios de perderse en un punto ciego y de utilizar el botón de anterior.</p>
<h2>Entre otras cosas, lo que te digo a tí</h2>
<h5>Dale al rey lo que es del rey, no te hagas bolas</h5>
<p>No encuentro razones por las cuales no puedas brindarle a tu cliente potencial más información de la que tu crees es suficiente, en la mayoría de los casos un título, una descripción y una foto no bastan; piensa como el usuario (sí, lo repito, así te refresco esto), él necesita saber los beneficios, el <strong>precio</strong>, donde encontrarlo, si hay existencias, que colores hay, etc. Crea las herramientas que satisfagan los deseos de comprar de tus clientes, con esto te aseguras que se queden contigo.</p>
<p>No te vayas con la vieja escuela, que hace que el visitiante se registre con un formulario de contacto enorme donde le pides su nombre, apellidos, teléfono, mail, dirección, estado civil, alergias, número de tarjeta de crédito, cédula, tipo de sangre y un sin fín de cosas solo para poder ver tu producto.</p>
<p>¿Porqué no hacerlo por pasos? Dejas que conozca de una tu producto, mostrandole lo que te he dicho antes, y lo invites de una forma sutil pero atractiva a registrarse para que pueda saber las actualizaciones o nuevos productos por ejemplo. Entonces cuando ya están registrados (no más que nombre, mail, país por ejemplo), le das la opción que compren en tu sitio con un carrito de compras, una vez tiene su carrito elige lo que desea y ¡allí llegas con lo demás! Le pides su tarjeta de crédito, su dirección, y lo que necesites; pero ya tienes enganchado a tu cliente, le brindaste una forma fácil de adquirir tu producto y le &#8220;confiaste&#8221; tu información, por tanto el te confiará la de él.</p>
<h5>La pirateria es mala, sé original</h5>
<p>Teniendo una mente tan grande, por qué vas a hacer dos sitios web con un layout muy parecido, o por qué le copias una idea a alguien. Yo visito las <a title="CSS gallery" href="http://thecssgallerylist.com">galerías de css</a>, porque tomo inspiración y guía de otros sitios web, pero no los copio. Creeme que se mira muy mal, me he topado con un par de casos y me siento tan mal. Por que lo que pienso, es que se te acabó la creatividad para desarrollar una idea fresca.</p>
<p>Consulta sitios que se enfocan en brindar recursos para desarrollo web (muchos pensarán, hey estos links son míos, si los doy me pueden quitar mi trabajo por que ya saben de donde saco todo, y no es así; el conocimiento se comparte):</p>
<ul>
<li><a href="http://smashingmagazine.com">Smashing Magazine</a></li>
<li><a href="http://tutsplus.com/">Tuts+ Network</a></li>
<li><a href="http://www.alistapart.com/">A list apart</a></li>
<li><a href="http://www.w3schools.com">W3C School</a></li>
<li><a href="http://www.ajaxrain.com/">Ajax Rain</a></li>
</ul>
<p>Utilizo más pero con estos creo que son suficientes y tienen lo que necesitan. Los demás son más específicos en cuanto a temas.</p>
<p>Con esto termino mi artículo, espero que sea de su ayuda y si se me olvida algo ¡Díganmelo! Será un gusto poder extender este artículo.</p>
<h2>Se viene:</h2>
<p><strong>Tutorial → Como crear un layout en photoshop para usar en grid 960</strong></p>
<p><strong>Tutorial → Como crear un buen sitio web, el diseño</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://jepserbernardino.com/idea/showcase-malas-practicas-web-que-debemos-mejorar/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

