Entradas en la categoría “Diseño”

MVC en la web, la gran farsa de los arquitectos de software

En los entornos de desarrollo web es habitual referirse al patrón de diseño Modelo Vista Controlador (MVC) como la “forma correcta” de construir sitios/aplicaciones web. La realidad es que dicho patrón no se puede aplicar a la web tal y como se concibió, aunque su objetivo resulte útil y entronque con un principio general de diseño frecuente en distintos entornos de desarrollo de software: separar claramente las partes de un sistema. Así de sencillo. :)

Modelo-Vista-Controlador

El paradigma MVC, tal como se presentó originalmente, está pensado para aplicaciones estáticas como las que solemos manejar en un entorno de escritorio. Piensa por ejemplo en tu organizador de archivos (en Windows, en Mac o en Linux): te ofrece un buen número de botones, campos de entrada, controles de ventana, filtros, etc., que pueden ser presionados por ti en cualquier momento. Cuando lo haces, estás activando uno de los muchos “controladores”, su consecuente “modelo” para hacer lo que tiene que hacer, y finalmente actualizando una o más “vistas” que reflejarán el nuevo estado del “modelo”. En la implementación original la cosa quedaba descrita del siguiente modo:

The view manages the graphical and/or textual output to the portion of the bitmapped display that is allocated to its application. The controller interprets the mouse and keyboard inputs from the user, commanding the model and/or the view to change as appropriate. Finally, the model manages the behavior and data of the application domain, responds to requests for information about its state (usually from the view), and responds to instructions to change state (usually from the controller).

Es decir, el problema original al que se enfrentaba este “paradigma” era la simultaneidad, en un entorno de múltiples puntos de entrada (en forma de “controladores”) y múltiples puntos de salida (en forma de “vistas”). Lo que nos obliga a preguntarnos: ¿la web es un entorno de ese tipo? Evidentemente no. En la web manejas un sólo punto de entrada (request) y un sólo punto de salida (response), por lo que para empezar te encuentras con un patrón para el cual no dispones de un problema real sobre el que aplicarlo. :(

Pero además te encuentras con que las aplicaciones ideales para MVC son básicamente monousuarias y el modelo se mantiene en memoria mientras la aplicación está siendo ejecutada. Segundo elemento que no encontramos en la web: entorno típicamente multiusuario, donde el modelo para el usuario se regenera en cada request.

Si uno profundiza en las características del paradigma original se irá encontrando con más diferencias, que básicamente son fruto de estas dos básicas que he señalado.

Separa, separa, separa

Si el patrón original no puede ser aplicado realmente a los problemas típicos con los que nos enfrentamos en un entorno web, ¿qué es lo que podemos extraer de él? Sin duda alguna, su vocación por mantener separadas las partes de un sistema: es decir, pon tu código de datos en un lado, tu código de aplicación en otro, y tu código de presentación en otro. No suena a nada del otro mundo, dicho así; parece sentido común, y es al mismo tiempo una forma tradicional de desarrollo de software que encaja muy bien con trabajo en equipo y especializado.

Por lo tanto, no tiene sentido apelar a este patrón como una solución-para-todo, e incluso puede resultar contraproducente, puesto que se van a estar forzando las cosas (las palabras, los conceptos, etc.) y por lo tanto perdiendo perspectiva. Eso en el mejor de los casos; en el peor, se llegará a construir un problema ajustado al patrón y no a la inversa. :(

Efecto bokeh para home y landing pages

10 de marzo, 2010 - por | | Diseño, Tips

Poco a poco el efecto bokeh se ha ido convirtiendo en uno de los recursos más frecuentes para conseguir gráficos atractivos. Con frecuencia, se utiliza sobre imágenes de fondo posicionadas en la cabecera o en el body de las home y de las landing pages, es decir, de aquellos espacios que esperan no sólo el mayor número de visitas sino también rebajar el porcentaje de rebotes.

Con ocasión de un proyecto reciente que hemos estado preparando para la gente de noalamonotonia.com, hemos tenido la oportunidad de probar distintas técnicas sobre distintas suites gráficas para conseguir ese efecto. Hemos visto también que la comunidad ha generado un montón de buenos tutoriales, ejemplos y patrones de texturas listos para usar. Así que hemos seleccionado varios de los recursos que más nos han gustado. A ver qué te parecen.

Plugins para GIMP

20 de febrero, 2010 - por | | Diseño, Tips

En Grosshat utilizamos GIMP para las tareas habituales de manejo de gráficos. En proyectos con clientes muchas veces se nos cae, bien porque no es el programa habitual en esos otros entornos, bien porque no incorpora las capacidades vectoriales que otros programas combinan con las netamente gráficas. En este sentido, Fireworks de Adobe sigue siendo una especie de navaja suiza realmente productiva.

Bueno, el caso es que si como nosotros eres de los que tiran de GIMP de forma habitual, manejar plugins se convierte con el tiempo en algo inevitable; de hecho, el programa está pensado como un core alrededor del cual la comunidad genera utilidades en forma de plugin. Así que profundiza, una vez más, en la exitosa forma de funcionar de la tradición open source: módulos sencillos que se interconectan fácilmente a partir de una base común.

Algunos plugins que seguro te van a ayudar un montón:

  • Image subdivide te permite dividir un gráfico en n filas y n columnas, y salvar cada celda de la matriz
  • Liquid Rescale trae a GIMP el escalado típico de Photoshop que posibilita redimensionar un gráfico de forma no uniforme pero sin distorsión
  • Save for Web es imprescindible si quieres manejar unos pesos razonables en gráficos para la web
  • Pencil drawing from Photo te proporciona un hermoso efecto de lápiz sobre un gráfico, muy bueno para diseño de sitios livianos y muy lineales
  • Layer Effects te suministra operaciones típicas de shadow, glow, bevel, overlay, etc.
  • Quick sketch ofrece un precioso efecto de esbozo sobre el gráfico que le proporciones; combina muy bien con el de Pencil que comentábamos más arriba

La instalación de algún script puede en ocasiones resultar un poco pesada, pero en general es algo sencillo y rápido. Y con la ventaja de cuentas con el código fuente y puedes modificar cosas triviales o profundas a tu gusto.

Más allá de estos plugins que destacamos aquí, apúntate como sitio de referencia el GIMP Plugin Registry.