¿Has tenido alguna vez ese sentimiento terrible cuando te das cuenta – sólo un fragmento de segundo demasiado tarde – de que no deberías haber cliqueado “OK” en el diálogo “¿Está seguro de que desea terminar?”?

¿Sí? Bueno, estás en buena compañía – todo el mundo ha tenido una experiencia similar así que no hay necesidad de sentirse avergonzado por ello. No es tu culpa: es culpa de tu software.

¿Por qué? Porque el software debería “saber” que formamos hábitos. El software debería saber que después de hacer clic en “OK” incontables veces en respuesta a una pregunta, probablemente también haremos clic en “OK” esta vez, incluso si no queríamos hacerlo. El software debería saber que no tendremos la oportunidad de pensar antes de desechar nuestro trabajo en forma accidental.

¿Por qué debería saber estas cosas? Porque los diseñadores de software deberían saber que formamos hábitos, querámoslo o no.

La formación de hábitos es realmente algo bueno: nos ahorra el problema de tener que pensar cuando nos enfrentamos a banalidades de interfaz y disminuye la probabilidad de que nuestro tren de pensamiento se descarrile. En el caso del diálogo “¿Está seguro de que desea terminar?”, nuestras manos han memorizado cerrar-y-hacer-clic como un gesto continuo individual. Eso es bueno, porque la mayoría de las veces no queremos pensar en la pregunta – sólo queremos hacer lo correcto. Desafortunadamente, nuestros hábitos a veces nos hacen hacer lo incorrecto: ni siquiera tenemos tiempo de darnos cuenta de nuestro error hasta después de haberlo cometido.

Así que, como diseñadores somos llevados a un principio general de interfaz: Si una interfaz va a ser humana, debe respetar la habituación.

Soluciones posibles

¿Qué tal si se hace la advertencia más difícil de ignorar? Una advertencia sutil no será tomada en cuenta, así que usaremos todas las trabas: haremos pestañear la pantalla y que suene un fuerte sonido estridente para asegurarnos de que el usuario está prestando atención. Y aunque lo intentemos, eso todavía no funcionará. A medida que la advertencia esté más en nuestras narices, más rápido querremos alejarnos de ella (al hacer clic en “OK”) y más errores cometeremos. La cosa es, no importa qué tan en nuestras narices nos presente el computador la advertencia, aún cometeremos el mismo error – hacer clic en “OK” cuando no queríamos. Pero sigue sin ser nuestra culpa: mientras sea posible habituarse a ignorar el mensaje, nos habituaremos, y entonces cometeremos errores.

Leer más…

Si tratas con FLASH seguro que alguna vez te has topado con esta “característica”. Si no usas archivos externos no hay ningún problema, pero si haces uso de archivos de configuración externos en formato txt, carga de imágenes externas, te habrás dado cuenta de que no importa donde hayas puesto tu SWF en el arbol de directorios, la ruta relativa a esos archivos externos siempre se hace desde el HTML donde se carga.

Por ejemplo tienes un SFW visor.swf y una imagen arbol.jpg que están dentro de la carpeta MULTIMEDIA colgando de la raiz que es donde está tu index.html.

Al editar el flash lo lígico es que pongas que la ruta de la imagen sea “arbol.jpg“, ya que está en la misma carpeta que la imagen, y si abrimos el SWF a pelo comprobarás que la carga correctamente. El problema viene cuando cargamos el SWF en el index.html, cosa bastante normal. El flash por defecto tomará la ruta actual de carga, no donde se encuentra el archivo SWF realmente, con lo que buscará en este caso en el raiz el archivo arbol.jpg y no lo encontrará.

Una solución es que si sabemos que el flash se va a cargar en el index.html que está en raiz, cambiar la ruta de carga del flash a “multimedia/arbol.jpg” y funcionará. Para sitios sencillos esto funciona bien, pero ¿que pasa cuando queremos cargar ese flash en otro HTML que no está en raiz?, no funcionará, y por lo tanto no podemos usar el mismo SWF para 2 lugares (o 3, 7, 200) siendo que el visor es el mismo. También surgen problemas cuando usamos gestores de contenido con URL dinamicas, tipo permalinks, etc, donde una dirección como www.nerv.es/blog/titulo-del-articulo dará error al cargar el visor ya que el flash se cree que está en una estructura de directorios “/blog/titulo-del-articulo” que no existe físicamente.

La mejor solución es usar un atributo que no es muy conocido llamado base.

Si en el código de carga del flash usamos:

<param name=”base” value=”.”>

para <object> y para <embed>:

base=”.”

No importa desde donde se cargue el archivo SWF que la ruta base para él será donde esté ubicado realmente dentro del arbol de directorios. Con esto conseguimos que funciones siempre sin importar desde donde ser carge. ( dentro del mismo dominio al menos )

Trabajar con CSS puede parecer una batalla constante. Los navegadores siempre están cambiando la manera en que leen el código (*cof* Internet Explorer *cof*), y parece que hay un montón de pequeñas “pillerías” en CSS. Aunque es un lenguaje increíblemente poderoso, puede ser utilizado de forma incorrecta con facilidad, lo cual condenará tu desarrollo a una vida de imperfecciones.

1) Ignorar la Compatibilidad con el Navegador

Este es, probablemente, el problema número uno en desarrollo web, ya que debes tener layouts que se vean siempre igual, sin importar qué navegador esté utilizando el visitante al navegar el sitio. Este hecho a veces puede parecer la maldición de tu existencia: hay diferencias fundamentales en la manera en que Internet Explorer renderea una página, comparado con Firefox. Aunque ya no es tan grave como solía ser, todavía existe una gran diferencia entre navegadores.

Es fácil para los desarrolladores web diseñar la página en su navegador favorito y no preocuparse acerca de cómo se ve en otros navegadores de uso frecuente, ya que probablemente no se verán las diferencias. (Y soy un gran culpable de esto. ¡A veces diseño el sitio en Firefox y me olvido de revisarlo en IE hasta después de haberlo terminado!). Aunque hay algunos métodos ya probados para ayudar a salvaguardar tus diseños para el rendereo de diferentes navegadores, la mejor manera de asegurarse de que todo se ve constante es simplemente utilizar Browsershots. Browsershots entrega una instantánea acertada de cómo se ve tu sitio en diferentes plataformas y navegadores, permitiéndote estar seguro de que nada se ve distorsionado en un navegador.

2) No tomar en cuenta las resoluciones de navegador más pequeñas

Mientras que varios de nosotros, los diseñadores web, tenemos monitores de computador grandes (y estamos bastante orgullosos de ello), una gran parte de los visitantes de tu sitio puede que no. Puedes utilizar tus programas de análisis para ver las resoluciones de navegación de tus visitantes y qué tan amplio es su rango (Google Analytics hace esto de maravilla). Sin embargo, hay un mundo de diferencia en la manera en que un diseño se ve en una resolución de 1024×768 en oposición a una resolución de 800×600. Puede convertir un hermoso diseño en algo casi inútil.

Leer más…

Autor el artículo en inglés: Taylor Davidson de unstructuredventures.com

Comencé a escribir acerca de las claves del éxito para empresarios y principiantes, pero mientras escribía me di cuenta que mientras he visto fracasar compañías, hundirse proyectos y morir ideas, he tenido poca experiencia de primera mano con el éxito. Mis ideas sobre las claves del éxito se quedan sólo en eso: ideas.

Pero he aprendido mucho a través del fracaso. La observación cercana y experiencias personales desafortunadas de primera mano me han enseñado varias lecciones acerca de por qué las compañías fracasan.

Seamos claros: esto intenta ser un ensayo de las 25 lecciones más importantes que he aprendido a través del fracaso, no un análisis exhaustivo de todas las razones por las cuales los empresarios y principiantes fracasan (y créanme, esta es la versión corta: he aprendido más de 25).

Los primeros dieciséis principalmente se refieren a asuntos estratégicos y operacionales mientras que los últimos nueve tienen más que ver con asuntos de gestión y organización. Debido a que creo que los tres factores más importantes para cualquier compañía son las personas, productos y mercado, no estoy seguro de haber llegado a la cantidad “apropiada” de maneras de fallar, pero quizás ustedes tendrán ideas que dejarán esta cantidad más exacta. Estoy esperando a escuchar los secretos que ustedes han aprendido a través del fracaso.

1. Vacila, vacila, vacila; planifica, planifica, planifica.
En vez de eso: Fracasa rápido. Dispara, apunta, repite.

El tiempo es el bien más valioso que tiene una persona, y aún así es la cosa más fácilmente y comúnmente desperdiciada. La velocidad genera ímpetu y pasión, motivación y una tendencia a la acción. Aprender a través de la experiencia es mucho más valioso que aprender a través de planificar, hacer prototipos o investigar ya que nada es más directo, significativo y visceral que ver cómo funciona (o no) algo.

Leer más…

En un tiempo de crisis económica, los desarrolladores web y freelancers en todas partes han comenzado a comerse las uñas. Sin embargo, no importa qué tanto empeore la economía, siempre habrá trabajo en ciertos campos del desarrollo web que están en pleno auge.

Como moderador del foro de trabajo de Freelance Switch, hay ciertos tipos de trabajos que están constantemente en demanda. Aquí están las 10 habilidades que son o serán las más demandadas para los desarrolladores. Si eres competente en estas habilidades, estarás en una gran posición para encontrar trabajo y sobrellevar cualquier caída de la economía.

Autor: Glenn Stansberry
Glen Stansberry es un desarrollador web y blogger. Puedes leer más trucos acerca de desarrollo web en su blog Web Jackalope o seguirlo en Twitter.

1. Conocimientos de un Framework

Parece ser que los frameworks serán la próxima cosa de moda. Con el meteórico ascenso a la fama de Rails, Django, y otros frameworks MVC, los desarrolladores han aprendido que pueden construir sitios web mucho más rápido con la ayuda de estas herramientas. Los frameworks te ayudan a acortar la mayoría de las tareas repetitivas que la programación personalizada normal requeriría. Tener el conocimiento de los mejores frameworks (Rails, Django, CakePHP, Symfony, y otros varios), le puede dar una dimensión completamente nueva a tu conjunto de habilidades.

2. Desarrollo de widgets

Los widgets han cambiado la manera en que se hace el desarrollo web en los últimos años. Con la llegada de los widgets, los datos se han hecho más portátiles, interactivos y, más importantemente, virales. En casi todos los planes de las páginas de inicio web está el incluir uno o dos widgets en algún punto, principalmente porque ayuda a aumentar su audiencia y lleva más miradas hacia su contenido.

El desarrollo de widgets requiere conocimientos de Javascript y/o flash, sin mencionar el conocimiento del lenguaje regular con el cual está construido el sitio principal.

3. Temas de CMS personalizados

Los diseñadores y desarrolladores siempre pueden encontrar trabajo creando o personalizando un tema de CMS. Así como la popularidad de CMS como Wordpress o Drupal ha crecido durante los últimos años, también lo ha hecho la demanda para la creación de temas para estos softwares.

Mucha gente usa CMS para potenciar sus sitios web personales o de negocios, así que este trabajo siempre va a existir. Un sitio web decente necesita un diseño único y utilizable que refleje bien la marca detrás de él.

Leer más…

Vamos con la segunda parte de este recopilatorio de logos con animales como principal temática.

Leer más…

Tanner Chrisensen nos propone estas reglas para crear un logotipo. Voy a comentar algunas tomando como ejemplo el logo de nerv para ver si se ajusta a dichas reglas o no.

1. No utilices más de tres colores.

2. Deshazte de todo lo que no sea absolutamente necesario.

El diseño de este logo tiene pocos elementos superfluos.

3. La tipografía debe ser lo suficientemente sencilla como para que tu abuela la pueda leer.

A falta de un ligero rediseño, la tipografía es suficientemente clara.

4. El logo debe ser reconocible.
5. Crea una forma o layout único para el logo.

La forma es bastante reconocible y peculiar.

6. Ignora completamente lo que tus padres y/o pareja piensan del diseño.
7. Confirma que el logo se vea atractivo para más de tres (3) individuos.
8. No combines elementos de logos populares y luego digas que es trabajo original.
9. No utilices clipart bajo ninguna circunstancia.
10. El logo debe verse bien en blanco y negro.

Prueba superada.

11. Asegúrate de que el logo es reconocible al ser invertido.
12. Asegúrate de que el logo es reconocible al cambiar su tamaño.

Hay que tener un poco de imaginación para reconocerlo invertido, pero el logo ya de por si es poco común. En cuanto a reducir el tamaño, no hay problema.

13. Si el logo contiene un ícono o símbolo, además de texto, ubica a cada uno de manera que se complementen el uno al otro.
14. Evita las tendencias recientes en diseño de logos. En vez de eso, haz que tu logo se vea atemporal.

Se han evitado los gradientes, sombras, reflejos y demás tendencias 2.0.

15. No utilices efectos especiales (incluyendo, pero no limitado a: gradientes, sombras, reflejos, y rayos de luz).

No se usa ninguno de estos elementos en el logo original.

16. Ajusta el logo a un layout cuadrado en lo posible, evita los layouts rebuscados.
17. Evita los detalles intrincados.

El logo tiene unas líneas bastante simples.

18. Considera los diferentes lugares y maneras en que el logo será presentado.
19. Invoca sentimientos atrevidos y confiados, nunca aburridos y débiles.
20. Date cuenta de que no crearás el logo perfecto.
21. Utiliza líneas duras para negocios duros, y líneas suaves para negocios suaves.
22. El logo debe tener alguna conexión con lo que está representando.

Aunque no es reconocible en un primer instante, el logo simboliza una neurona con algunas conexiones, 4 en este caso. Representa la capacidad de razonamiento y el simil con la red de redes.

23. Una foto no hace un logo.
24. Debes sorprender a los consumidores con la presentación.
25. No utilices más de dos fuentes.
26. Cada elemento del logo necesita estar alineado. Izquierda, centro, derecha, arriba o abajo.

27. El logo debe verse sólido, sin elementos colgantes.
28. Entérate de quién va a ver el logo antes de pensar en ideas para ello.
29. Siempre escoge función por sobre innovación.
30. Si el nombre de la marca es memorable, el nombre de la marca debe ser el logo.
31. El logo debe ser reconocible cuando se le aplica efecto espejo.

32. Incluso las grandes compañías necesitan logos pequeños.
33. El diseño del logo le debe gustar a todos, no sólo al negocio que lo va a usar.
34. Crea variaciones. Mientras más variaciones, es más probable que llegues al correcto.
35. El logo debe verse consistente a través de múltiples plataformas.
36. El logo debe ser fácil de describir.
37. No utilices taglines en el logo.
38. Bosqueja ideas usando lápiz y papel antes de trabajar en el computador.
39. Mantén el diseño simple.

Conseguido.

40. No utilices símbolos “swoosh” ni globos terráqueos.
41. El logo no debe distraer.
42. Debe ser honesto en su representación.
43. El logo debe estar balanceado visualmente.
44. Evita los colores neón brillantes y los colores opacos, oscuros.

45. El logo no debe romper ninguna de las reglas ya mencionadas.

(Fuente: artículo de tannersite.com escrito por Tanner Christensen y traducido por Sara Salazar para nerv. )

Selección de logotipos con algún animal como tema principal. En total, 1 conejo, 2 elefantes, 1 mantis, 4 pajaros,  3 perros, 1 caballito de mar,  1 pato, 1 abeja, 2 peces, 1 antilope, 1 oso, 1 pulpo, 1 cerdo, 1 lobo, 1 gallo, 1 hipopotamo, 1 mono y 1 buho.

Leer más…

Mi primer trabajo de diseño fue en una pequeña agencia de diseño de impresión en Manchester que producía el trabajo de varios medios de comunicación: embalaje, publicaciones, marketing de materiales de apoyo y… Correo directo. Pronto descubrí que los principios de diseño gráfico que había aprendido en la universidad eran de poco uso cuando diseñé para el correo directo, donde lo grande, las letras fuertes, y lo apiñado es el orden del día. En palabras de un cliente – palabras que nunca olvidaré – “un espacio en blanco es un espacio vacío”.

Creo que todos hemos tenido que pasar, a manos de jefes o exigencias del cliente, por este momento.

Los clientes del correo directo necesitan sus paquetes para permanecer en el mercado, porque trabajan para ello. Pero para todo lo demás, mi cliente no podría haber estado más lejos de la verdad.

Conocer los espacios en blanco

“Espacio en blanco” o “espacio negativo” es el espacio entre dos elementos en una composición. Más específico, el espacio entre los elementos mayores en una composición es el “macro especio en blanco”. El Micro espacio en blanco es – si, lo has adivinado – el espacio entre elementos más pequeños: entre listas de objetos, entre un título y una imagen, o entre palabras y letras. The itty-bitty stuff.

Figura 1. Macro espacio en blanco

Figura 2. Micro espacio en blanco.

Así que, ¿qué hacer con el espacio en blanco?

Micro espacio en blanco y legibilidad

Hace un par de meses, tuve bastante suerte de ver una conferencia de Erik Spiekermann. Parte de su charla se basaba en su rediseño del periódico The Economist, que en parte fue motivado por el cliente ya que su diseño era demasiado pesado y el contenido demasiado difícil para leer.

En el diseño del periódico, la información es densa. A veces, como en el diseño web, es difícil añadir espacios en blanco debido al contenido requerido. Los periódicos a menudo tratan con esto poniendo su contenido en un tipo de letra de imprenta sencilla con bastante espacio en blanco entre los caracteres. Esto era parte de la solución de Spiekermann para rediseñar The Economist.

Leer más…

Recientemente tuve la increíble experiencia de hacer un pequeño sitio web para un cliente en base a Wordpress, y aprendí muchas cosas acerca de codificar el tema y hacer más fácil la vida de los clientes. Voy a repasar las que, en mi opinión, son las cinco cosas más importantes que aprendí.

Sidebars “Widgetizadas” (Sidebars Dinámicas)

Esto fue lo que más me ayudó. El diseño del sitio necesitaba un área de enlaces en el pie de página para enlazar a otros grupos, departamentos y organizaciones relacionadas con el sitio. También necesitaba información de contacto al pie de página.

La solución fue utilizar barras laterales en base a widgets y luego modificar el código CSS para convertir estas barras laterales en pie de página.

Para agregar una barra lateral, inserta este código en el archivo functions.php de tu tema:

1
2
3
4

<?php
 if ( function_exists('register_sidebar') )
 register_sidebar(1);
?>

Puedes repetir este código para cuantas barras laterales necesites. Sólo tienes que ir cambiando el “1″ por otro número para cada barra.

Ahora inserta este código donde quieres que aparezca tu barra lateral:

1
2
3

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

Esto hará que tu barra lateral dinámica aparezca. En mi caso, sólo ajusté el ancho de cada widget y los alineé hacia la izquierda con este código:

1
2
3
4

#footer .widget{
width:290px;
float:right;
}

Al configurar el ancho de los widgets y alinearlos hacia la izquierda en mi pie de página, creé un área de contenido editable que no interfiere con las entradas o la estructura de la página, utilizando widgets y barras laterales dinámicas.

“Loops” Personalizados

En el sitio que estaba haciendo no iba a existir un blog, sino que una sección de noticias y una sección de eventos, así que necesitaba separar las entradas por categorías y realizar una consulta en forma separada:

1
2
3
4
5

<?php
 $news= 'category_name=news&orderby=date&order=DEC&showposts=3';
 query_posts($news); // run the query
 ?>
 

Este fragmento de código crea una nueva consulta llamada news ($news), toma 3 entradas desde la categoría de noticias y las ordena en forma descendente por fecha. Luego, se debe configurar el Loop de forma normal bajo ese código. Mi Loop completo se veía así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<?php
		if ( $news%2 ) {
    		echo "<li class='news_even'>";
			} else {
    		echo "<li class='news_odd'>";
			}
			?>
			<h3 class="smallindent"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<p class="posted smallindent"><?php the_time('m-d-y') ?> </p>
			<div class="smallindent"><?php the_excerpt(); ?></div>
		</li>
		<?php $news++ ?>
	<?php endwhile; ?>
	<?php else : ?>	
	</ul>
	<?php endif; ?>

Menús Desplegables

Los clientes querían que el sitio web tuviera un menú despegable. Normalmente me habría opuesto a esta idea, pero ellos tenían bastante contenido que deseaban incluir en el sitio. Después de buscar durante varias horas y probar varios métodos para el menú despegable, encontré esto. Resultó ser el “santo grial” que estaba buscando, compatible con todos los navegadores, y funcionó de inmediato con el marcado generado por la función wp_list_pages.

Simplificar el Panel de Administración

Después de la primera reunión y sesión de entrenamiento, quería encontrar una manera de esconder varias partes del panel de administración que permanecerían sin uso. El asunto era simplificar Wordpress hasta dejarlo en lo más básico: sin etiquetas, sin necesidad de organizar categorías o la biblioteca multimedia. La solución fue wplite. Este ingenioso complemento permite deshabilitar paneles en la pantalla de administración. También, permite limitar los campos de metadatos de las entradas (excepciones, etiquetas de las entradas, orden de páginas, plantillas, nombres para url, etc). Resultó ser lo que estaba buscando para hacer la administración del sitio simple y fácil; incluso puede eliminar el tablero para que la página de inicio sea la escritura de una nueva entrada.

(Fuente: artículo de upsidedowncity.net escrito por Gino y traducido por Sara Salazar para nerv. )