Como decía anteriormente, no necesitamos grandes conocimientos en desarrollo para crear nuestros propios temas para aplicaciones jQuery Mobile. Para eso, en la misma página oficial del framework, disponemos de una herramienta Online, llamada ThemeRoller. Con esta herramienta tenemos a la mano una forma fácil de crear nuestros propios temas.
Inicialmente ThemeRoller nos da la bienvenida a través de un mensaje de dialogo. Ponen a nuestra disposición una barra lateral, donde podemos ver cada una de las propiedades globales del nuevo tema, además de ver las modificaciones que podemos hacer a temas por separados, dependiendo de su valor en letras.
Para arrancar, tenemos tres temas que van de la A a la C, pero podemos ir agregando más según nuestras necesidades. Así que si quieres crear una aplicación muy variada en colores, puedes hacer temas hasta llegar a letra Z.
En las opciones que tenemos para las configuraciones globales podemos hacer cambios como:
- Cambiar el tipo de la fuente
- Cambiar el radio de los bordes
- Modificar el color de los iconos y muchas otras cosas.
Ya solo es cuestión de qué necedades tengas o la forma en que quieras que se vean tus aplicaciones. Después, puedes ir modificando uno a uno los temas, dentro de los cuales ya encontramos configuraciones más particulares.
En el centro de la página contamos con un visualizador de cada uno de los temas, donde podemos ver en tiempo real los cambios que estamos creando en nuestro tema actual. Ésto nos ayuda a orientarnos sobre los resultados finales que obtendremos, mostrándonos diferentes widgets que maneja el framework, como listas, botones, barras entre otros.
Creando nuestro tema personalizado
Como comentaba anteriormente, en el framework no vienen incluidos widgets de color rojo ni verdes, así que vamos a darles esos colores con el fin de obtener una variedad de temas más amplios. Para tal motivo vamos a trabajar partiendo como base de los temas que vienen incluidos dentro de jQuery Mobile
.
Si ya ha visitado la aplicación ThemeRoller, te darás cuenta de que inicialmente no nos ofrece los temas incorporados en el framework, así que lo primero que hay que hacer es incorporar dichos temas.
Logramos eso dando clic en la opción "import", donde obtendremos un diálogo en el cual podemos escoger la opción "import default theme". De forma automática aparece en el textarea todo el código CSS que incorpora jQuery Mobile, por último, al dar clic en "import" del dialogo, visualizaremos cada uno de los temas presentes en el framework.
Agregando el nuevo tema a mis aplicaciones
Una vez hemos hecho las modificaciones y temas que necesitamos para nuestras nuevas aplicaciones, procedemos a descargar el tema que estamos creando con ThemeRoller, haciendo clic Download Theme. En el diálogo te dice la forma en que debes incluir tu estilo creado, además de darle un nombre.
Puedes copiar el código que aparece en el diálogo de descarga, para incluir tu tema. Claro, que también debes cambiar el nombre que aparece allí (my-custom-theme.css), por el nombre que tú le has asignado.
Al descomprimir el archivo .zip del tema que creamos con ThemeRoller, podemos ver que viene incluido un ejemplo, donde ya se está trabajando con nuestro tema. Podemos observar que parte de la cabecera de ese documento HTML está compuesto de la siguiente forma.
<link rel="stylesheet" href="themes/tema-personalizado.min.css" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
En este caso, estamos usando para el tema modificado el nombre "tema-personalizado", en su versión comprimida, pues en la carpeta de themes dentro del .zip encontramos dos archivos CSS para el mismo tema.
Otro caso particular es que no se usa el archivo "jquery.mobile-1.0.min.css", sino uno con un nombre "jquery.mobile.structure-1.0.min.css". Este archivo es muy importante, pues al no incluirlo no funcionará el ejemplo.
Ese archivo también se descarga junto con el .zip que obtenemos al descargar jQuery Mobile, así que puedes también ponerlo a trabajar de forma local, sin necesidad de usar el CDN.
Para terminar nos gustaría deciros que un buen diseño con ThemeRoller depende del empeño, por eso te invitamos a trabajar con él, para obtener aplicaciones jQuery Mobile más personalizadas.
.png "English"){kind=small}
0 comentarios:
¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro de tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados.