Elements of Design: showcase de elementos web

ByLuis

Elements of Design es una galería de elementos contenidos en páginas web que nos puede ayudar a diseñar partes de la página y añadirlas al diseño general. Es como CSSMania pero en vez de diseños completos, enfocado únicamente a elementos.
elementsofdesign.png
Podremos encontrar diseños de formularios para comentarios de blogs, comentarios de blogs, calendarios, código, iconos, texto entrecomillado, formularios de registro, cajas de búsqueda y tipología de cabeceras.
Elements of Design

Similar Posts

|

170 cheat sheets para desarrolladores web

ByLuis

Ya hace tiempo hablamos de un directorio donde podíamos encontrar 30 cheat sheets, en este caso se trata de 170, que nos ayudarán en nuestro desarrollo web.
Aunque no todas son de desarrollo web, si la mayoría. Organizada por categorías, podemos encontrar ‘chuletas’ sobre: ActionScript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, Firefox, Google, HTML, Java, Javascript, LaTeX, microformatos, MySQL, Oracle, Perl, Photoshop/Gimp, PHP, Python, expresiones regulares, Ruby, Linux, blogs, Windows y XMLs.
Yo ya le he dado a imprimir unas cuantas que me van a venir muy bien.
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby
Vía / Digg

10 errores en el diseño de aplicaciones

ByLuis

Un gran post en el que se nos explica diez errores que se cometen cuando se diseña una aplicación, un resumen sería el siguiente:

  • Controles no estándares: los enlaces, botones, radio buttons y demás controles tienen una utilidad específica y estándar. Cambiar el comportamiento no es lo correcto y no hace más que confundir al usuario.
  • Inconsistencia: diferentes cosas para una misma utilidad, usa lo mismo en el mismo lugar para la misma acción.
  • Acciones no perceptibles: se debe saber qué acción realiza un control a simple vista. Si hay que investigar para qué sirve algo no cumple su cometido.
  • Controles sin reacción: cada control debe indicar 3 cosas: mostrar a los usuarios el estado actual, cómo se interpretan los comandos y qué está pasando.
  • Malos mensajes de error: no basta con decir que hay un error, sino que es lo que ha pasado y que se puede hacer para solucionarlo.
  • Preguntar por lo mismo dos veces
  • No hay valores por defecto: os valores por defecto sirven para que haya más rapidez en las respuestas, para enseñar mediante el ejemplo y para dirigir a usuarios novatos.
  • No explicar cómo funciona la aplicación: en aplicaciones estándar eso no es muy problemático, pero en otras aplicaciones hay que explicar qué se puede conseguir y cómo y no únicamente acceder a la aplicación.
  • No indicar qué se hace con la información
  • Mostrar características internas: al usuario no le importa y no llegará a entender cosas internas de la aplicación, por lo que no es necesario que el usuario lea.

Top-10 Application-Design Mistakes

Vía / dzone

Colors on the Web: ayuda para diseñadores

ByLuis

colorsontheweb.pngVisitando una entrada de Vecindad Gráfica, he encontrado una página que nos puede ser muy útil a los que diseñamos sin llegar a ser grandes diseñadores. Se trata de Colors on the Web, una página centrada en los colores y el diseño web. En ella encontraremos información sobre los colores (colores primarios, saturación, …), el significado de los colores (por ahora solo el rojo), el uso de colores en la web, combinación de colores (rueda de colores, colores análogos, …) y tres utilidades bastante interesantes: un selector de colores similar a las que ya existen, una rueda de color que selecciona aleatoriamente colores y nos muestra sus resultados en un diseño y una colección de esquemas organizada por categorías.
Colors on the Web
Vía / Vecindad Gráfica

Crear ventanas tipo Netvibes con Prototype

ByLuis

Crear ventanas flotantes en HTML es una de las cosas más difíciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.

En este caso se trata de una extensión para Prototype que con unas simples líneas de código seremos capaces de crear nuestras ventanas de forma rápida.

ventanas_prototype.png

Para usarlo primero nos deberemos crear la estructura HTML:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>

Con sus CSS:

#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}

Instanciar la clase:

var  portal = new Xilinus.Portal("#page div")

Y por último añadir el contenido:

portal.add(new Xilinus.Widget(), 0)
// O con título y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);

Prototype Portal Class

Vía / WebAppers

|

OpenLaszlo: aplicaciones web en Flash

ByLuis

openlaszlo.pngOpenLaszlo es un entorno de desarollo opensource para crear “rich Internet applications”, consistente en tres aplicaciones: Compiler para compilar el código fuente en formato Flash, Runtime Framework que incluye la interfaz de usuario y componentes para ser usados y Servlet que admite otros tipos de archivos, SOAP y XML-RPC.

Con OpenLaszlo puedes crear aplicaciones mediante XMLs y Javascript, hacer un deploy desde cualquier navegador o desde una aplicación de servidor J2EE o servlets.

Demos

OpenLaszlo