¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Creando iconos personalizados para botones de jQuery Mobile

Los iconos proporcionan un nivel más de personalización en jQuery Mobile. Podemos añadirlos de manera sencilla a botones y barras de navegación, usando el atributo data-icon.

Así, si usamos por ejemplo data-icon="star", obtendremos un botón similar al que puedes ver en la imagen de abajo.

Fácil, ¿no?

jQuery Mobile viene con 18 iconos predefinidos pero, en muchas ocasiones, puede que el icono que necesitamos no se encuentre entre los disponibles o, simplemente, queramos cambiar los predefinidos para personalizar un poco más nuestra aplicación.

En este artículo vamos a ver cómo podemos crear nuestros propios iconos para poder usarlos en botones y barras de navegación, e incluso veremos cómo podemos crear una versión “retina” de los mismos.

Creando nuestros propios iconos

Veamos los pasos necesarios para crear nuestro icono, e incluirlo en jQuery Mobile para que pueda ser usado con el atributo data-icon.

Creando la imagen del icono

Como no podía ser de otra forma, necesitamos crear el icono de nuestra aplicación. El icono ha de ser blanco por completo, con unas dimensiones de 18×18 píxeles. La imagen ha de guardarse en formato PNG-8 transparente (quizás tengas que ocultar la capa del fondo).

Una vez completado, guárdelo en una carpeta de su aplicación como iconos o img de la raiz de la aplicación web. Esta carpeta no tiene por qué contener únicamente el icono.

Para seguir el ejemplo, supongamos que la hemos guardado en /miaplicacion/img/rana.png.

Añadiendo la regla del icono a la hoja de estilos

Es el momento de abrir la hoja de estilos de nuestra aplicación y de añadir una nueva regla CSS para que se especifique como imagen de fondo el icono que acabamos de crear.

Por ejemplo:

.ui-icon-miaplicacion-rana { 
  background-image: url(/miaplicacion/img/rana.png); 
}

El selector debe comenzar por .ui-icon, seguido del nombre que queramos usar en el atributo data-icon.

Se considera de buenas prácticas el añadir un prefijo al icono con el nombre de nuestra aplicación. Aunque es poco probable que jQuery Mobile añada un icono de una rana al framework, nunca está de más curarnos en salud y evitar posibles problemas en el futuro.

Ya puede usar el atributo data-icon en sus botones

Ahora, en el código, ya puede añadir su nuevo icono a cualquier botón usando el atributo data-icon="nombre-icono", donde nombre-icono es el nombre que le hayamos dado al botón. En nuestro caso:

<a href="#" data-role="button" data-icon="miaplicacion-rana">Rana</a>  

Creando iconos para dispositivos de alta definicion (“retina”)

Algunos de los dispositivos móviles más nuevos, como el iPhone 4 y 4S o el nuevo iPad de Apple, tienen pantallas de alta definición, con el doble de resolución horizontal y vertical que las pantallas de los dispositivos regulares. Por ejemplo, la pantalla de un iPhone 3GS tiene una resolución de 480 x 360 píxeles, mientras que la pantalla “retina” de un iPhone 4 de alta resolución es de 960 x 640 píxeles.

Los iconos estándar de jQuery Mobile de 18×18 píxeles obtienen un efecto pixelado en un dispositivo de alta definición. jQuery Mobile soluciona esto, teniendo dos pares de iconos para sus iconos estándar: un conjunto de 18×18 para pantallas normales y un conjunto de 36×36 píxeles para pantallas de alta definición. Luego usa reglas media (media-queries) de CSS para mostrar el icono en la versión estándar o la versión en alta definición según sea necesario.

Vamos a ver cómo podemos aprovecharnos de esta solución para nuestro propio beneficio.

Lo primero que vamos a tener que hacer es crear una versión de 36×36 píxeles del icono. En nuestro caso, vamos a suponer que lo guardamos en /miaplicacion/img/rana-hd.png. Luego tenemos que añadir el siguiente CSS para hacerlo funcionar:

.ui-icon-miaplicacion-rana {
  background-image: url(/miaplicacion/img/rana.png);
  -moz-background-size: 18px 18px;
  -o-background-size: 18px 18px;
  -webkit-background-size: 18px 18px;
  background-size: 18px 18px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) {
  .ui-icon-miaplicacion-rana {
    background-image: url(/miaplicacion/img/rana-hd.png);
  }
}

Este CSS se encarga de seleccionar el icono rana.png por defecto y también usa la propiedad de CSS3, background-size (y las equivalentes específicas del navegador) para asegurar que el icono en alta definición, al ser usado, se escala al tamaño físico correcto (18×18 píxeles). Las reglas media, se encargarán de mostrar el icono de alta resolución rana-hd.png a los dispositivos con pantallas de alta definición.

Si tiene pensado añadir una versión HD del icono, cree primero la versión de 36×36 píxeles, y luego escálelo a 18×18 píxeles para conservar la calidad de la imagen en la medida de lo posible.

Extra

Si no sois muy duchos con el Photoshop o simplemente, no queréis complicaros demasiado la existencia, Andy Matthews  creó un paquete de iconos adicionales. Además, recientemente amplió el paquete para incluir los iconos que vienen en Bootstrap, que no son otros que los creados por FontAwesome.

A través del artículo de “resolvemos tus dudas“, Javier me consultó sobre este tema por correo, y me ha parecido muy interesante el crear un artículo a raíz de la duda. Espero que os sea útil.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!