miércoles, 24 de abril de 2013

Herramientas de programación web: LESS

Cualquier programador o diseñador de páginas web sabe que el lenguaje que se usa para dar estilo a las páginas web HTML es el CSS (Cascading Style Sheets). Se trata de lenguaje de marcas muy potente que permite separar el contenido de la presentación, aplicando estilos a los elementos HTML de forma individual o global, pero que tiene una deficiencia enorme: no se puede parametrizar. Es decir CSS no permite definir variables, operaciones o funciones.

LESS es una extensión del lenguaje CSS que permite usar variables, aplicar operaciones aritméticas (sumas, restas, etc.) y definir funciones para código repetitivo. Desgraciadamente los navegadores no entienden LESS, por lo que será necesario compilar el código convirtiéndolo en CSS. Sin embargo para usar LESS en un proyecto web no se requiere usar plug-ins ni nada parecido. Hay varias formas de compilar las plantillas LESS:

  • La primera es hacerlo de forma estática a través de un compilador. Se trata de compilar las plantillas LESS convirtiéndolas en hojas de estilo CSS normales que se usarán de la forma habitual. Hay varias aplicaciones que convierten plantillas LESS en archivos CSS como Simpless o Less.app y existe un compilador oficial llamado lessc (para Linux):
  • $ lessc styles.less > styles.css
    
  • La segunda forma consiste en usar la librería javascript node.js en el lado del servidor para compilar de forma dinámica las plantillas LESS. Esta es la forma más habitual.
  • La tercera y última forma de usar LESS es a través de javascript del lado del cliente usando less.js. Esta sólo se recomienda para proyectos muy pequeños o para entornos de desarrollo, ya que es necesario compilar la hoja de estilos en cada ejecución, lo que puede ralentizar mucho la ejecución.

Origen y desarrollo

LESS fue desarrollado por Alexis Sellier, conocido como cloudhead, como un proyecto de código abierto que actualmente está mantenido por the LESS core team. Su uso es libre y gratuito.


Sintaxis de LESS

No voy a extenderme en la sintaxis de LESS, aunque voy a poner un ejemplo de algunas de las estructuras más importantes. Para más información sobre la sintaxis consultar los enlaces al final del artículo.

Variables: Podemos definir variables y darles cualquier valor. Los nombres de variable empiezan siempre con @ y podemos usarlas a lo largo del código siempre que las necesitemos.

@rojo: #C00000;
@verde: #008000;
@azul: #0000FF;

h1 { color: @rojo; }
a { color: @verde; }
a:hover { color: @azul; }

Operaciones aritméticas: LESS permite aplicar operaciones como sumas, restas o multiplicaciones. Por ejemplo se pueden sumar dos colores o multiplicar pixels.

@ancho: 100px;
@azul: #000080;
@azul-claro: (@azul + #111);

.azul-claro {
    background-color: @azul-claro;
    width: (@ancho * 2);
}

Mixings: Esta construcción permite aplicar las propiedades de un conjunto de reglas a otro conjunto de reglas, permitiendo parametrizaciones e incluso el uso de valores por defecto.


.borde-simple(@color-borde: black) { border: solid 1px @color-borde; } #container { .borde-simple; } #error { .borde-simple(#FF0000); }

Reglas Anidadas: LESS soporta una sintaxis alternativa a CSS con respecto a jerarquía de clases en forma de clases anidadas. Por ejemplo:

#header {
    width: 30px;
    h1 { float: left; color: red; }
    h2 { float: right; color: blue; }    
}

...se convertirá en:

#header { width: 30px; }
#header h1 { float: left; color: red; }
#header h2 { float: right; color: blue; }

Funciones de Color LESS soporta una gran variedad de funciones para transformar colores y obtener información de un color.

  • lighten(@color, 10%): Devuelve un color un 10% mas claro.
  • darken(@color, 10%): Devuelve un color un 10% mas oscuro.
  • saturate(@color, 10%): Devuelve un color un 10% más saturado
  • desaturate(@color, 10%): Devuelve un color un 10% menos saturado
  • fadein(@color, 10%): Devuelve un color un 10% menos transparente
  • fadeout(@color, 10%): Devuelve un color un 10% más transparente
  • spin(@color, 10): Devuelve un color con 10 grados de tono mayor.
  • spin(@color, -10): Devuelve un color con 10 grados de tono menor
  • hue(@color): Devuelve el valor del matiz del color.
  • saturation(@color): Devuelve el valor de la saturación del color.
  • lightness(@color): Devuelve el valor de la luminosidad del color.

Conclusiones

LESS es una herramienta muy potente para el desarrollo web que eleva CSS al nivel de lenguaje de programación con lo que la creación de hojas de estilo se convierte en una parte más del proceso de desarrollo de software.


Enlaces

viernes, 19 de abril de 2013

Nueva guía de diseño para tabletas Android

El parque de tabletas con sistema operativo Android ha crecido mucho en los últimos tiempos. Sin embargo, a diferencia de lo que ocurre con el iPad, la mayoría de las aplicaciones de Android no disponen de una versión específica para ellas. Esto puede ser debido a que las aplicaciones se adaptan automáticamente a cualquier tamaño de pantalla. A pesar de ello Google piensa que los desarrolladores deberíamos esforzarnos en adaptar nuestras aplicaciones para su uso en tabletas de los más diversos tamaños y por ello ha presentado una nueva lista de verificación de calidad de aplicaciones para tabletas o lo que es lo mismo, una guía de estilo para desarrollo de aplicaciones para tabletas.

Además de esta guía de estilo y de diversos consejos útiles para el desarrollo de aplicación para tabletas, a partir de ahora Google Play permitirá subir capturas de pantalla específicas para tabletas de 10" y 7", de forma que el usuario podrá ver como se ve la aplicación en un dispositivo del mismo tamaño que el que se va a usar.

La lista de verificación de calidad de aplicaciones para tabletas se puede resumir en los siguientes puntos:

  1. Prueba la calidad básica de la aplicación.
  2. Optimiza tus diseños para pantallas grandes.
  3. Aprovecha el área de pantalla adicional disponible en tabletas.
  4. Utiliza Iconos y otros objetos diseñados para pantallas de tabletas.
  5. Ajusta las tipografías y objetos táctiles para las pantallas de tabletas.
  6. Ajusta el tamaño de los widgets para pantallas de tabletas.
  7. Ofrece características adicionales para usuarios tabletas.
  8. Escoge la versión de Android adecuadamente.
  9. Declara las dependencias hardware correctamente.
  10. Declara que la aplicación tiene soporte para pantallas de tabletas.
  11. Muestra fotos de la IU específica para tabletas en Google Play.
  12. Sige los consejos de buenas prácticas para la publicación en Google Play.

Enlaces

Modern.IE - Un entorno de pruebas para Internet Explorer

¿Cuantas veces después de desarrollar tu página web con Firefox o Chrome te has dado cuenta que no funcionaba en Internet Explorer? ¿Cuantas veces te ha llamado un cliente para decirte que el maravilloso diseño que le has hecho no funciona en su Windows XP con IE8? ¿Cuantas veces has tenido que montar un Windows XP "pirata" en VirtualBox o VMWare para solucionar un problema que únicamente ocurre en IE6?

Por suerte Microsoft lo sabe y se ha apiadado de nosotros, pobres programadores y diseñadores, y ha lanzado modern.IE, un conjunto de herramientas para ayudar a los desarrolladores a probar sus diseños web en las diferentes versiones Internet Explorer, incluyendo IE6, IE7, IE8, IE9 y el más moderno IE10.

moden.IE

El sitio web modern.IE, que está totalmente traducido al Español, proporciona de forma gratuita un detector de código incompatible con versiones antiguas de IE. También da sugerencias de mejora para de tu página web para IE y otras plataformas. Además ofrece ejemplos de código y consejos sobre buenas prácticas en el diseño web. Y por si eso fuera poco modern.IE pone a nuestra disposición un amplio conjunto de archivos de máquinas virtuales preconfiguradas con las más típicas configuraciones (IE6-WinXP, IE7-Vista, IE8-WinXP, IE8-Win7, IE9-Win7, ...) para varios programas (VMWare, virtualBox, ...) y diversos sistemas operativos (Windows, Linux y Mac).

moden.IE

Enlaces