En Mozilla Labs están realizando cosas muy interesantes, esta vez nos sorprenden con su experimento llamado Bespin.

Bespin no solo es un simple editor de código en linea, pues en su versión prototipo 0.1 nos permite:

• Resaltado de sintaxis (actualmente, solo para JavaScript, CSS y HTML).
• Visualizar directamente en el navegador lo que estamos desarrollando.
• Una muy interesante y útil linea de comandos, la cual nos permite ejecutar comandos, crear comandos y alias tal como una Terminal *nix.
• Un gestor de Proyectos.
• Control de versiones.

Y apuestan a su extensibilidad, por ejemplo editar código colaboratibamente a través de este, y ser un IDE para soluciones de Código Abierto, pero en primera medida me gustaría muchísimo una funcionalidad de auto completado.

En sí mismo Bespin es Código Abierto, para quien quiera colaborar agregando funcionalidad, corrigiendo bugs.

A continuación encuentras el vídeo de Mozilla Labs donde presentan esta aplicación tan interesante:

Por nuestra parte lo probaremos intentando desarrollar la versión 0.2 de Clearfix, Finalmente te animamos a que lo pruebes y nos cuentes tu experiencia en los comentarios.

Entradas relacionadas

• Clearfix Labs (2)
• favicon.cc: Crea tus favicons en linea (0)
• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)
• Diseña tus paletas de colores con Color Scheme Designer (2)
• Minify: Combina y comprime archivos JavaScript o CSS (0)

Color Scheme Designer es una gran herramienta gratuita para elegir nuestro esquema o paleta de colores, creada por Petr Stanicek.

Personalmente me encanta, me permite encontrar los colores apropiados generar esquemas muy bacanos y armónicos, además de poder previsualizar el esquema aplicado en dos páginas de ejemplo, tanto clara como obscura, incluso permite guardar (Scheme ID ) en la misma web o exportar la paleta, en CSS/HTML, XML, Texto plano o como paleta para GIMP o Photoshop.

Entonces ya sabes, si necesitas encontrar los colores a tu medida, Color Scheme Designer de seguro te será útil.

Entradas relacionadas

• AllSilhouettes.com: siluetas en vector gratuitas para tus diseños (0)
• favicon.cc: Crea tus favicons en linea (0)
• Herramientas y recursos para hacer el diseño y desarrollo web más fácil (2)
• Clearfix Labs (2)
• 40 Hojas de trucos para desarrolladores web (0)

“Usabilidad es un atributo de calidad que evalúa que tan fácil de usar son las interfaces de usuario. La palabra usabilidad también se refiere a los métodos para mejorar la facilidad de uso durante el proceso de diseño.

La usabilidad es definida por 5 componentes de calidad:

- Aprendizaje: ¿Que tan fácil es para un usuario completar tareas básicas la primera vez que se encuentran con el diseño?
- Eficiencia: Una vez que el usuario haya aprendido el diseño, ¿que tan rápido puede ejecutar las tareas?
- Memorabilidad: Cuando los usuarios regresan al diseño después de un periodo de tiempo sin usarlo, ¿que tan fácil pueden restablecer la destreza de uso?
- Errores: ¿Cuantos errores hacen los usuarios? ¿Que tan severo son los errores? ¿Que tan fácil pueden recobrarse de los errores?
- Satisfacción: ¿Que tan placentero es usar el diseño?”

- Jakob Nielsen en Usability 101: Introduction to Usability.

En palabras sencillas la usabilidad se refiere a que tan fácil es para los usuarios usar cierta interfaz y que tan eficientemente pueden hacer las tareas básicas para las cuales está diseñada la interfaz, esto quiere decir que para que un sitio web sea usable debe permitir al usuario hacer las cosas que desea de la forma más sencilla y rápida posible.

“Todo debería ser hecho tan simple como sea posible, pero no más simple.”
- Albert Einstein

Con lo popular e importante que se ha vuelto la Internet para los negocios, se hace cada vez más necesario que un sitio web sea usable porque con tantos otros sitios web que ofrecen lo mismo o algo similar (mucha oferta), ¿por que un usuario gastaría tiempo en aprender a usar nuestro sitio si ya sabe usar los demás?. Además, se sabe que el usuario común de Internet no gasta mucho tiempo en un sitio si no consigue llamarle la atención, es más, en promedio los usuarios gastan 30 segundos si llegan a la página principal de un sitio antes de decidir si se quedan o se van y gastan unos 60 segundos si llegan a una página interior antes de decidir si siguen navegando el sitio o se van (Prioritazing Web Usability de Jakob Nielsen, pág 33).

Algunos tips para mejorar la usabilidad en tu sitio web:

1. No abrir links en una nueva pestaña o ventana del navegador: esto es algo que a mi personalmente me molesta bastante y es que si el usuario desea abrir el link en una nueva ventana puede hacerlo (click derecho –> abrir en nueva…). Además, al hacer esto, estarás rompiendo el botón de hacia atrás del navegador que es la segunda funcionalidad del navegador más usada y confundirás a más de un usuario.

Como una excepción a esta regla son los links hacia pdfs o documentos similares pues la gente está acostumbrada a cerrarlos al acabar de leerlos en vez de usar el botón de hacia atras pero se considera buena práctica avisar que el link se abrirá en una nueva ventana y dar una idea del tamaño del mismo por si el usuario prefiere descargarlo que es la opción más común.

2. Respetar las convenciones de la web: los usuarios gastan más tiempo en otros sitios web que en el tuyo, así que en lo posible respeta las convenciones que hay en la Internet pues la gente tiende a esperar comportamientos similares, por ejemplo, una convención es que si una palabra o frase se encuentra coloreada o subrayada dentro de un texto se espera que sea un link.

Otras convenciones comunes son: que el logo del sitio, normalmente, va en la parte superior izquierda del sitio web y es un link que dirige a la página principal, también se espera que la búsqueda se encuentre en la parte superior de la página, normalmente, del lado derecho.

3. Mantener la consistencia durante todo el sitio web: no solo esto le ayudará al usuario a reconocer que sigue en el mismo sitio web sino que también le ayudará a ubicarse mejor y hacer ciertas tareas con mayor facilidad a medida que visita más veces o dura más tiempo en el mismo sitio web. Una mala práctica aquí es, por ejemplo, cuando presionas un link del menú principal que en la siguiente página esté una sección de subcategorias donde estaba el menú principal, ¿Quien confiaría en un mapa donde aparecen y desaparecen secciones a medida que avanza?.

4. Dar retroalimentación al usuario: si, por ejemplo, un usuario se toma el tiempo de llenar un formulario y al oprimir el botón de enviar es redireccionado a la misma página del formulario entonces el usuario no sabe si fue que lleno mal el formulario, hubo un error o se envió exitosamente el mismo. Otro ejemplo es cuando la página debe cargar antes de ser mostrada al usuario ya que puede ser una aplicación web con muchos datos en cierta sección, si no se le dice al usuario que está cargando, éste puede pensar que la página está dañada o algo así, pero también es oportuno avisarle cuanto falta para que esté lista o el usuario puede pensar que su computador se daño si se demora mucho en cargar, una forma para mejorar esto es ofrecer algo como la barra de gmail que se va llenando mediante va cargando la página.

Finalmente, vale la pena recalcar que aunque existen ciertas convenciones y estándares, solo hay un secreto para crear la mejor experiencia del usuario y es que depende… depende de quien es tu audiencia objetiva, no es lo mismo diseñar un sitio web de juegos para niños pequeños que diseñar un sitio web de juegos para adolescentes.

Entradas relacionadas

• AllSilhouettes.com: siluetas en vector gratuitas para tus diseños (0)
• Labs (1)
• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)
• 40 Hojas de trucos para desarrolladores web (0)
• Userfly: mira como tus usuarios usan tu web (1)

Clearfix Labs

Como primer experimento tenemos un Plugin de WordPress, llamado Indigestion, que tal vez hayas visto funcionar en mi blog, está basado en grandioso Digest Post por Frederic Wenzel, pero Indigestion te permite más de un Feed… además de otras interesantes opciones, como permitirte publicar los enlaces que compartes en Google Reader incluso con las notas que le añades, además que estará en constante evolución y desarrollo.

En fin espero lo pruebes y te gusté… ten en cuenta que es una versión temprana; así espero tu retro alimentación (a.k.a. Feedback), para mantenerlo en buen desarrollo.

Entradas relacionadas

• Una pequeña mirada a la usabilidad (3)
• favicon.cc: Crea tus favicons en linea (0)
• Indigestion (0)
• Deshabilitar las revisiones de entradas en WordPress (0)
• 40 Hojas de trucos para desarrolladores web (0)

Colourlovers:

Es un recurso que monitorea las paletas de colores que están de moda y donde puedes encontrar una gran cantidad de colores, paletas y patrones para inspirarte en tu diseño y ver que combinaciones de colores funcionan y cuales no.

Snippely

Es una aplicación hecha en adobe air que te permite mantener ordenada tu colección de códigos, haciendo la reutilización del mismo mucho más fácil. Algunos ejemplos de los códigos que tengo guardados son:

Para centrar una página horizontalmente con css:

margin:0 auto;

Para eliminar los valores por defecto de los navegadores en los elementos de una página (reseteo):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;}

Plantilla básica de una página html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />
<title>title</title>
<link rel="shortcut icon" href="favicon.ico"
type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css" />
</head><body></body>
</html> 

También puedes ver Six Ways to Style Blockquotes para encontrar varios códigos para estilizar las frases en tu sitio web.

Recursos para usar en tus proyectos comerciales

Mantengo mi propia colección de recursos para usos comerciales que incluye iconos, texturas, vectores, etc y creó que para cualquier diseñador es importante pues es un gran ahorro de trabajo poder usar arte ya hecha de gran calidad, algunos de mis colecciones favoritas son:

• Free High Res Rough Textures: excelentes texturas de alta calidad.
• freebiesdock: Un muy buen sitio para encontrar iconos y themes gratuitos.
• Friday Freebies: Flavours Icon Set And Cute Tweeters Icon Set: me fascinan sobretodo eson iconos de twitter!
• Free Icons, Photoshop Brushes and a WordPress Theme: algunos iconos y pinceles gratuitos.

Notepad++

Es un editor de código gratuito para Windows que ofrece la posibilidad de auto-completar código por ti, diferenciar distintos lenguajes de programación como php, css, html, entre otros. Puede que está herramienta no sea tan práctica para todo diseñador web pero para la persona que le guste ensuciarse las manos creó que será una buena herramienta de ayuda pues es muy simple y ofrece buena funcionalidad.

¿Usas alguna otra aplicación buena? ¿Conoces de algún recurso interesante? dejanos saber con un comentario.

Entradas relacionadas

• 15 brochas grunge para Photoshop (0)
• Clearfix Labs (2)
• AllSilhouettes.com: siluetas en vector gratuitas para tus diseños (0)
• 40 Hojas de trucos para desarrolladores web (0)
• Twitter Feelings (0)

AllSilhouettes.com es un sitio en donde encontrarás muchas siluetas listas para usar, mayoritariamente gratuitas en formato vectorial, así que si necesitas siluetas de seguro este es tu sitio.

Me gustó muchísimo la colección de monstruos mitológicos de Gloomus.com, pues me encantan los grifos, ¿Y a ti cual te ha sido útil?.

Entradas relacionadas

• Una pequeña mirada a la usabilidad (3)
• Diseña tus paletas de colores con Color Scheme Designer (2)
• Labs (1)
• 40 Hojas de trucos para desarrolladores web (0)
• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)

favicon.cc es una aplicación web que te permite crear (como su nombre lo indica) favicons (¿Qué es un favicon?) gratuitamente, disponiendo de un lienzo en el cual puedes “pintar” a tu gusto tu icono para luego descargarlo y usarlo en tu web, con vista previa “en vivo” en tu navegador, incluso pues te permite también importar una imagen existente y generar tu favicon.

Una funcionalidad que me parece muy atractiva es poder crear favicons animados como este.

Así que ¿que esperas? crea uno y ponlo en los comentarios, si haces uno de Clearfix.net podría reemplazar actual

Entradas relacionadas

• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)
• 15 brochas grunge para Photoshop (0)
• 40 Hojas de trucos para desarrolladores web (0)
• Bespin: IDE Cloud para Desarrollo Web de Mozilla Labs (3)
• Twitter limitará el acceso a su API (0)

Fuente: WebReference News

Entradas relacionadas

• 57+ soluciones Slideshow, Lightbox y Galerías de Imágenes totalmente gratuitas (0)
• Meteora: Widgets JavaScript potenciados con MooTools (1)
• Userfly: mira como tus usuarios usan tu web (1)
• Bespin: IDE Cloud para Desarrollo Web de Mozilla Labs (3)
• 10 técnicas para menús multinivel (0)

Para responder a este problema, WebAIM esta desarrollando una encuesta para usuarios de screen readers. La intención es averiguar como este tipo de usuarios usa la web y sus preferencias. Si usas software screen reader, considera leer el post de la encuesta y contestarla.

Fuente: 456 Brea Street

Entradas relacionadas

• No hay entradas relacionadas.

¿Cual es la forma ideal para proteger tus formularios de los spambots?

A nadie le gusta tener que copiar caracteres extraños de una imagen captcha, pero ¿existe una mejor alternativa?.

La forma ideal debería ser invisible para las personas, pero ¿cual mantiene a raya a los spambots efectivamente?

En este tutorial se describe una técnica que usa JavaScript para reconocer la actividad humana basada en eventos, que trabaja muy bien por cierto.

Requisitos de alto nivel

1. El formulario debe registrar ciertos eventos que reconozca la actividad humana.

2. Si JavaScript no esta activado, podria considerarse como un plan alternativo.

3. Las pruebas deben ser invisibles al usuario lo mas posible.

4. Los bots no deben poder acceder a las pruebas y burlar los resultados.

Excelente tutorial. Revísalo a fondo en: Web design from scratch

Entradas relacionadas

• No hay entradas relacionadas.