interfaces


Diseño plano 4 Comentarios

Este artículo fue publicado también en Harbour Magazine.

El diseño plano o flat design ha sido una tendencia en diseño web en los últimos años, pero con la llegada de Windows 10 se ha impuesto también en cuanto a interfaces de sistemas Windows. El diseño plano se caracteriza basicamente por:

  • Ausencia de texturas, sombras, gradientes, biseles o cualquier otro elemento que provoque sensación de profundidad.
  • Diseño minimalista, donde los elementos respiran y no se amontonan uno encima del otro.
  • Uso de formas geométricas simples (cuadrados, rectángulos, círculos, etc.) para estructurar la información o diseñar elementos de la interfaz (botones, iconos, etc.).
  • Uso de colores uniformes, vibrantes.

Como programadores de aplicaciones en un entorno gráfico como Windows, debemos preocuparnos de que nuestras aplicaciones sigan las reglas de interfaz del entorno, de otra manera su aspecto quedará totalmente desfasado. En función del tipo de software que realicemos esto tendrá todavía más importancia, no es lo mismo desarrollar sistemas por encargo que los usuarios tienen que usar de manera obligatoria que desarrollar aplicaciones a la venta por internet donde la primera impresión al usuario será determinante en el proceso de compra. Si quieres que tu aplicación se vea bonita debes siempre seguir las reglas del interfaz del sistema operativo en que se ejecuta. Un diseño simple y funcional es la clave para tener éxito.

En mi caso, como programador de aplicaciones Windows, he modificado mis aplicaciones para dotarlas de un diseño plano. A continuación muestro los cambios que he realizado:

  • Eliminación de gradientes en el registro seleccionado de las rejillas de datos.
  • Eliminación de efecto de sombra en las pestañas de ordenación de las rejillas de datos.
  • Eliminación de gradientes en los títulos de las listas de acciones.

Además, he dejado de utilizar una clase calendario – lo siento Paco – desarrollada a medida por el control estándar de Windows. El cambio de aspecto se muestra en las siguientes imágenes de mi programa el Puchero, que es el primero que he adaptado al estilo plano.

Y tú, ¿ has adaptado tus programas al diseño plano ?


f.lux

f.lux es una utilidad gratuita que se encarga de regular la tonalidad del monitor del ordenador en función de la hora del día o de la noche en que lo estemos utilizando. Cuando se hace de noche va bajando la luminosidad del monitor y usando tonos más cálidos, mientras que en las horas centrales del día muestra el color en toda su liminosidad.

Hay bastantes estudios que indican que el uso de un ordenador por la noche puede producir alteraciones del sueño, pues el uso del ordenador, o de una tableta, antes de acostarse activa los mecanismos sensoriales del cerebro y hacen que conciliar el sueño sea más difícil. En el sitio web de f.lux hay una página dedicada a estudios del sueño que dicen que la luz azul parece ser la causa de algunos trastornos del sueño. El programa lo que hace es modificar precisamente esa luz azul que emite el ordenador para atenuar sus efectos sobre el mecanismo del sueño.

El programa permite indicar la ubicación donde estás para adaptar el control de la tonalidad a las horas de sol de ese sitio, y también permite deshabilitar su efecto durante una hora, permitiendo hacer cosas en que la tonalidad de colores deba ser la correcta. A mi ya me ha pasado que he tomado una captura de pantalla y la he tenido que repetir previa deshabilitación del programa.

En mi opinión es un programa muy útil, sobre todo si trabajas por la noche. Además tiene un efecto añadido: al ver como va cambiando la tonalidad de la pantalla te va recordando que es hora de ir a dormir.


resedit

Con el cambio de versión de Windows a Seven, decidí evaluar alternativas a PellesC como editor de recursos. El principal motivo era que PellesC llevaba tiempo dando errores, al final de manera bastante habitual, y también a mi intención de eliminar de mi PC todo aquello que no usase. ¿ Para que quería un compilador de C completo si sólo usaba el editor de recursos ? Ya tengo instalado BCC que es el que uso para compilar cl código C generado con xharbour, así que un compilador de C es suficiente.

Así que decidí probar seriamente un editor de recursos llamado ResEdit que llevaba tiempo siguiendo. Este editor de recursos tenía una característica que llevaba tiempo deseando usar, y que PellesC no tenia, y es un asistente interactivo de alineación de los controles. Esta característica está presente en muchos editores de formularios avanzados, y va mostrando la alineación de un control cuando se coloca o se mueve en el formulario respecto al resto de controles. Realmente es muy útil y permite ajustar los controles de un formulario rapidamente. Otra característica que me gusta mucho de ResEdit es la ordenación automática de los controles para tabulación, que también ahorra mucho tiempo.

El archivo RC que genera ResEdit lo puede convertir a formato RES con el comando BRC del compilador C de Borland que uso habitualmente y luego lo enlazo con mi código objeto para generar los ejecutables sn problemas.


Windows 7

Hace pocos dias que he instalado Windows 7 en mi viejo iMac. Digo viejo porqué el ordenador tiene casi 4 años, que parece una barbaridad para los tiempos que corren, pero funciona perfectamente. Corre Snow Leopard sin problemas, y ahora he comprobado que hace lo mismo con Windows 7. Creo que tengo ordenador para rato.

El cambio de sistemas operativos trae problemas de aprendizaje del mismo. Lo que más me disgusta es no saber cómo se hacen ciertas cosas o no saber dónde se encuentran determinadas utilidades. Con el paso de un par de semanas ya me he acostumbrado al cambio y me encuentro cómodo con el nuevo sistema operativo. Una de las cosas que más me han gustado es la posibilidad de añadir accesos directos a la carpeta de favoritos del explorador, algo similar a lo que se hace con el Finder de OS X, y que es algo que echaba de menos en Windows XP.

Todas mis herramientas de programación para Windows funcionan perfectamente en Windows 7. En cuanto a mis programas también funcionan correctamente en Windows 7, al menos en las pruebas que he hecho. Lo único que me lleva de cabeza es el escalado de las fuentes. Las fuentes normales son un poco pequeñas para mi gusto y uso un tamaño de fuentes personalizado del 115%. Resulta que con esas fuentes, no consigo que mis programas cogan ese tamaño exacto de fuentes. Si utilizo un tamaño de fuentes algo mayor, entonces los programas sí que se adaptan perfectamente a ese tamaño de fuente. El caso es que en los menús la fuente tiene el escalado correcto, pero en el resto de los elementos de los programas la fuente es algo menor que la que debería ser. En la imagen se ve el efecto que digo, a ver si consigo arreglarlo.

Mis programas usan las funciones de Paco García para obtener las fuentes del sistema. Si por un casual algún lector del blog puede darme una idea de qué está pasando lo agradecería.


iconos de fatcow

Dentro de mis planes para este año está liberar la mayoría del código que utilizo en mis programas. Para ello, uno de los problemas con los que me encontraba es que en los programas utilizo un conjunto de iconos no libres, en concreto los de iconexperience. Aunque tengo comprada la licencia de los dos conjuntos de iconos que uso en mis programas, esto no me da derecho a liberar los archivos de recursos que incluyen dichas imágenes.

Afortunadamente, he encontrado una serie de iconos con licencia Creative Commons que puedo utilizar en mis aplicaciones. Los iconos están en la web http://www.fatcow.com/free-icons, y son 2000 iconos – dos mil – que creo que cubren las necesidades de iconos de las aplicaciones más exigentes.

Ahora me queda ir reemplazando los bitmaps de mis programas por los de FatCow, es un trabajito pero los resultados prometen ser buenos. De momento tengo reemplazados las imágenes que uso en la barra lateral de Colossus y el programa tiene el aspecto que se ve en la imagen.


enlaces 11.diciembre.2010 2 Comentarios

Enlaces relacionados con software Mac y programación Cocoa:

  • Mac.AppStorm es un sitio dedicado a hacer revisiones de software para Mac. Además de las revisiones de aplicaciones ofrece artículos de opinión, entrevistas a desarrolladores, y las reuniones de aplicaciones, que son comparativas o selecciones de aplicaciones. Un buen sitio para conocer el mejor software para Mac y estar informado de las novedades de aplicaciones.
  • 365Cocoa es un blog que ofrece trozos de código de Cocoa, uno por día durante un año. Los publica Pieter Omvlee que es el programador de Bohemian Coding, el creador de programas como Sketch y Drawit. Por cierto que a Pieter es uno de los programadores entrevistados en Mac.AppStorm.
  • Pure Reader es un plugin para Safari y otros navegadores que cambia el aspecto de Google Reader y lo convierte en un clon del programa Reeder. ¡ Hay que ver lo que se puede hacer con las CSS y un poco de imaginación !

macwidgets for java

En el largo camino del aprendizaje de Java estoy buscando librerías que permitan desarrollar aplicaciones que tengan una estética lo más cercana posible a OS X. Una de ellas, la que pienso que consigue un aspecto más próximo a Aqua es macwidgets. Con esta librería se pueden conseguir barras de botones, paneles laterales y ventanas HUD, entre otros controles, realizados con Java.

El desarrollador de la librería mantiene un blog llamado Exploding pixels donde cuenta cosas relacionadas con el desarrollo de la librería y sobre diseño de interfaces de usuario en el mundo Mac. Uno de los post más comentados en este blog es el que critica la posición de las pestañas en Safari 4, diciendo que al estar por debajo de la barra de direcciones crea confusión pues realmente la barra de direcciones parece compartida entre las pestañas, cosa que no es cierta por su comportamiento. El post en cuestión es Why can’t Safari get tabs right?.

Volviendo a las macwidgets, la mejor manera de hacerse una idea de su aspecto es verlas en funcionamiento. Una de las aplicaciones que las utilizan es jCodeCollector, una aplicación gratuita que permite guardar trozos de código clasificándolo por categorías. El aspecto del programa es tan maquero como muestra la imagen siguiente:

jcc20


apple design awards 2009

Desde hace varios años, Apple organiza un congreso mundial de desarrolladores conocido como WWDC, y en el marco de este congreso otorga los los premios a los mejores programas para su entorno, los llamados Apple Design Awards o simplemente ADA. Estos premios se otorgan a las aplicaciones que destacan tanto por su excelencia técnica, su integración en el entorno Mac y su carácter innovador. Las aplicaciones premiadas sirven para hacerse una idea del nivel del software existente en el mundo Mac, donde se consigue aunar funcionalidad y elegancia muchísimo más que en cualquier otro entorno. Este año las aplicaciones premiadas, en la categoría de aplicaciones para Leopard, han sido las siguientes:

  • Billings: una aplicación de facturación para profesionales y medianas empresas.
  • BoinxTV: un estudio de televisión dentro de un Mac, y que fue una de las aplicaciones del último MacHeist.
  • Things: la aplicación GTD de referencia en entorno Mac.
  • Versions: un cliente standalone para Subversion.
  • Fontcase: una aplicación de gestión de fuentes tipográficas con un espléndido interfaz.

Basta hacer una visita a cualquiera de las web de estas aplicaciones para hacerse una idea de cómo las gastan los programadores Mac.


diseño de iconos

Una de los elementos que ayuda a dar el salto de calidad a un programa es un icono propio y reconocible. Tanto si piensas hacerlo tu mismo, como si lo vas a encargar a un profesional debes tener en cuenta estos 10 errores en el diseño de iconos que no debes cometer.Todos los iconos de los programas de alanit son personalizados, partiendo de ideas propias para cada uno de ellos. Cuando encargamos un icono primero pensamos nosotros el diseño que debe tener y luego le pasamos la información al diseñador, que es quien le da forma a nuestras ideas.


cleartype y fuentes para programar

Una de las cosas que me disgusta es ver un PC con Windows que tiene las fuentes borrosas. El motivo habitual es que se le ha cambiado la resolución de pantalla a mayor, porque con la resolución óptima las letras son muy pequeñas. Las letras en monitores LCD se ven en condiciones óptimas al máximo de resolución que admiten, y si les cambias la resolución a mayor entonces se ven borrosas. El motivo es que al cambiar la resolución a mayor el pixel no coincide con el tamaño de un punto de resolución y la tarjeta se las apaña a su manera para mostrar las letras de la pantalla con lo que aparecen los llamados dientes de sierra. La solución pasa por usar el sistema de anti-aliasing de Windows y poner fuentes grandes en el sistema. El anti-aliasing en Windows se ajusta mediante un powertoy llamado cleartype tuner. Con esto se consigue tener las letras más grandes y con una mejor calidad que cambiando la resolución de pantalla. En Genbeta explican como usar este powertoy.

En el mundo Mac esto es mucho más fácil. Por defecto el efecto de anti-aliasing – que en algunos sitios se traduce por suavizado o alisado – de fuentes está activado, lo cual desde mi punto de vista es un acierto. En el mundo Windows el 80{480d580d36768405d93963bdd82c570c8132a231e8d2b870ef0b18322d1f72b2} de los usuarios ni saben lo que es el suavizado de fuentes, con lo que pierden la oportunidad de mejorar la visión de su sistema. Otra cosa que llama la atención es la diferente manera en que se aplica el suavizado de fuentes en Windows y Mac. Mi admirado Spolsky habló sobre ello y también se pueden encontrar otros post interesantes sobre el tema como este de CodingHorror.Para mi la personalización del entorno de trabajo es un tema capital, y como paso mucho tiempo con un editor el tema del tipo de letra es fundamental. No es sólo tener el anti-aliasing activado, sino usar una fuente que sea clara y que facilite la lectura del código. A raiz del post de CodingHorror sobre fuentes de letra para programar comencé a usar Consolas y para mi esta fuente es imbatible. La uso tanto en Windows como Mac y para mi es elegante, clara y bonita como ninguna otra fuente que haya usado antes para programar.


libra

A través de Genbeta he conocido Libra, un programa de catalogación personal con una pinta estupenda. Para entendernos es un Cuaderno de Bitácora con una interfaz espectacular. El programa presenta los ejemplares de nuestras colecciones como si los tuvieramos expuestos en una estantería, mostrando las carátulas o las portadas de cada uno de ellos. La introducción de datos se hace de manera automática: el programa lee el código de barras del libros, disco o video y se conecta con Amazon para recuperar los datos del mismo. Además tiene varias opciones para importar/exportar datos, y por si fuera poco es gratuito para uso personal. Una pasada, ¿ verdad ?

La realidad es que Libra es un clon para Windows de Delicious Library. Para los que no lo sepan, Delicious Library es una de las killer app del universo Mac. Es LA aplicación de catalogación personal del mundo Mac, con todos los premios del mundo mundial. Una auténtica pasada de aplicacación que exprime el API de Cocoa como pocas. La versión 2 promete ser ya la repanocha. Y lo mejor de todo es que es una aplicación original, en que los programadores han exprimido al máximo su creatividad para crear una interfaz totalmente rompedora.

Cuando veo una aplicación como Libra, la sensación es agridulce. Por una parte reconozco el mérito del desarrollador, pero por otra parte no me parece nada bien que se clone un programa. Si un programador quiere demostrar su valía debe hacerlo con una aplicación que muestre sus dotes técnicas y que sea original. Spolsky dice que los buenos programadores, aquellos a los que debes contratar, son los que hacen las cosas de manera elegante y son capaces de terminar las cosas. Clonar un programa no me parece nada elegante.

A mi me clonaron un programa y no me sentó nada bien.