jQuery Mobile (VII) - Temas Visuales

Seguimos con la guía sobre jQuery Mobile, a continuación capítulos anteriores/posteriores:
Hoy os voy a hablar de una de las cosas que más me gusta de jQM y que posiblemente si no eres diseñador/grafísta y necesitas un diseño rápido te va a venir muy bien. Hablo de la aplicación online que nos proporciona jQM llamada Theme Roller y de la cual creo que di algunas pinceladas en los primeros post.


Si venís de programar de manera nativa para iOS o para Android, habréis utilizado las herramientas que os proporicionan los SDK´s, en el caso de iOS tendréis que realizar los StoryBoards o podréis tirar por crear las vistas de manera dinámica o individiual. En el caso de Android necesitaréis crear una vista que se asocia a un Layout y que todo esto a su vez está asociado a una actividad. Sea como sea, nos encontramos en la disyuntiva de crear un tema para cada plataforma y tener especial cuidado que tengan el mismo tono de color ciertos elementos, lo que en un momento dado se puede convertir en una tarea de chinos (de la China).

En jQuery Mobile, tenemos la oportunidad de crear un tema que será distribuíble a todas las plataformas, ya sea por vía web o por vía híbrida (como veremos en el capítulo VIII) y además lo podemos hacer de manera muy sencilla. Para ello vamos a entrar en la siguiente web:
http://jquerymobile.com/themeroller/index.php
Son temas configurables vía web y que se pueden descargar e integrar en tu proyecto de manera muy sencilla.

Al abrirlo nos encontramos con tres zonas bien diferenciadas:

Barra lateral izquierda

Aquí tenemos las herramientas con las que vamos a ir tocando los temas. Van desde el color de la fuente, el radio de las esquinas de los botones etc.

Podemos ver tres letras, A B y C, que van a ser las plantillas de pruebas con las que vamos a ir jugando.

Podemos crear más temas simplemente realizando clic en el botón +.

Si entramos en cada letra, podremos ver opciones adicionales de configuración. Intentadlo!.

Barra superior

Aquí podemos deshacer y rehacer los pasos que hemos ido haciendo. Además tenemos un botón llamado "Inspector" que si le clicamos veremos como al desplazar el ratón por encima de los temas A, B o C podremos ir directamente al elemento que queremos modificar. Muy chulo!!!

Tendremos el botón descargar, que veremos al final y el botón Import/Upgrade, para actualizar temas que tengas obsoletos (no he necesitado usar esta opción a día de hoy).
Y por último el botón de "Share" para compartir nuestros temas visuales con nuestros contactos.

Zona central

Id probando a toquetear las distintas opciones hasta tener vuestro tema deseado.
Ahora viene lo mejor de todo esto, es que lo podemos descargar. Para ello simplemente damos al botón "Download" en la barra superior y nos aparecerá la siguiente ventana:
Ahora le damos a download. Se nos descargará el tema en formato ZIP. Tenemos que descomprimirlo y colocarlo en el directorio raíz de nuestro proyecto jQM.

Ahora simplemente hay que seguir las directrices que nos ha marcado el Theme Roller cuando nos hemos descargado el tema, que es integrar en la cabecera lo siguiente:

<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 

Recordad que al utilizar las CDN estamos ante el problema de la conexión permanente. Lo ideal sería que utilizáramos los temas de manera local, para ello hay que referenciar a los distintos javascript y css locales de jQM (como hemos visto en temas anteriores).

Y con esto y un bizcocho, hasta la parte número ocho! Será la parte final y en ella haré un caso integrador con PhoneGap, seguramente para Android en el que veremos el gran potencial de ese framework. No os interrumpo más en vuestros quehaceres diarios.

Muchas gracias y hasta la próxima!!