Diseño de aplicaciones móviles / Temas personalizados de desarrollo con jQuery Mobile

En nuestro tutorial anterior de jQuery Mobile, presenté gran parte del marco subyacente y cómo configurar su primer sitio web. La biblioteca JS es ligera y fácil de recoger en lo que respecta a la dificultad de aprendizaje. También hay una hoja de estilo CSS genérica incluida con los archivos para que pueda personalizar aún más los elementos en su diseño.

Para este segundo segmento me gustaría pasar un poco de tiempo profundizando en esta idea de los temas de jQuery Mobile. Toda la industria del diseño ha sido revolucionada por jQM y el proceso de construcción de una plantilla móvil desde cero se ha mejorado significativamente. jQuery Mobile no es solo una biblioteca de secuencias de comandos, sino un marco completo para desarrollar y producir plantillas móviles eficientes.

Contenido predeterminado de la hoja de estilo

Debería comenzar por aclarar exactamente qué tipo de código CSS se incluye con los archivos predeterminados. La hoja de estilo de jQM 1.0 se ha dividido en dos segmentos principales - estructura y temas.

El código de la estructura es lo que más puedes ignorar. Esto se usa para establecer márgenes, relleno, altura / anchura, variantes de fuente, junto con muchos otros valores predeterminados del navegador. Los temas internos se dividen luego de A-E, que controlan diferentes efectos visuales en su diseño. Esto puede incluir colores de fondo, degradados, sombras, etc..

Cada uno de estos elementos del tema interno también puede denominarse muestras. Cuando creas una plantilla móvil, generalmente te mantendrás con un solo tema. Pero en casi todos los escenarios, el diseño puede mejorarse con diferentes esquemas de color. La hoja de estilo predeterminada solo incluye las muestras A-E, pero puede crear muestras F-Z para agregar otras 21 alternativas a su biblioteca de temas. Solo para aclarar estos términos de nuevo un tema Se considera 1 solo archivo CSS que puede incluir hasta 26 diferentes muestras etiquetado A-Z.

Estilos de conmutación

Si no elige especificar ninguna muestra, jQuery Mobile se mantendrá en la muestra A de forma predeterminada. Si aún no lo sabía, los documentos de jQuery Mobile utilizan atributos de datos HTML5 para muchas funciones internas. Uno de estos incluye el cambio de muestras a través del atributo de tema de datos. Echa un vistazo a mi ejemplo de código a continuación para ver lo que quiero decir.

  Página jQM predeterminada
 
  Aquí hay algunos contenidos internos..

Observe que coloqué el atributo de tema de datos en la página div div. Esto significa que el nuevo color de la muestra afectará a todo lo que contiene el encabezado y las áreas de contenido. También podría incluir data-theme = "c" en el encabezado div para cambiar solo el contenido del resto de mi página.

Componentes de un Swatch

Debería ser bastante sencillo cómo implementar estas muestras diferentes dentro de un solo diseño. Así que ahora echemos un vistazo al código jQM CSS para que podamos desglosar los componentes individuales de una muestra. Echa un vistazo al último archivo jQuery Mobile 1.4.5 CSS alojado en su propio CDN.

Debe observar cómo cada muestra está separada por un comentario distinto y cada una de las clases internas termina con las letras correspondientes. Por ejemplo .ui-bar-a y .ui-body-a se aplican a las barras de encabezado / pie de página y a las áreas de contenido de forma predeterminada. La mayoría de las propiedades están implementando un restablecimiento en los colores de fuente y enlace, gradientes de fondo y otros pequeños detalles. Incluí simplemente el ui-bar-a códigos para darle una idea de qué elementos nos dirigimos.

/* UNA ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a borde: 1px sólido # 2A2A2A; fondo: # 111111; color: #ffffff; font-weight: negrita; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; imagen de fondo: -webkit-gradient (lineal, izquierda superior, izquierda inferior, de (# 3c3c3c), a (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: gradiente lineal (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-una entrada, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button font-family: Helvetica, Arial, sans- serif  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; font-weight: negrita;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: activo color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: visitó color: # 2489CE / * a-bar-link-visited * /;

Si solo está buscando crear una muestra personalizada, recomiendo basar la plantilla en uno de los originales. El proceso será mucho más sencillo si comienza a escribir códigos en un nuevo documento CSS. No tendrá la molestia de editar en el archivo original y puede comenzar a trabajar en una pizarra limpia. Pero las áreas clave en las que desea centrarse incluirán lo siguiente:

barras de encabezado y pie de página
contenido del cuerpo y texto de la página
lista de estilos
estados del botón por defecto / hover / activo
controles de entrada de formulario (extra)

Codificando un nuevo diseño de barra

Desde el mismo archivo CSS, vimos al anterior copiar / pegar todo el código de la muestra A (líneas 12-150) en un archivo nuevo. Podemos usar el nombre de muestra G para implementar estos nuevos estilos. Ahora, después de copiar el código, desea cambiar el nombre de cada instancia de clase que termina en -una a -sol, ya que así es como jQuery Mobile reconocerá qué estilos usar.

Me gustaría comenzar por rediseñar la barra de encabezado bg para imitar un gradiente de iOS más familiar. Esto se puede hacer únicamente dentro del .ui-bar-g selector. Queremos editar las propiedades de fondo e imagen de fondo para cambiar los efectos de degradado. Echa un vistazo a mi código a continuación y una pantalla de demostración del nuevo gradiente.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; borde izquierdo: 0px; borde derecho: 0px; fondo: # 6d83a1; color: #fff / * a-bar-color * /; font-weight: negrita; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; imagen de fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# b4bfce), color stop (0.5, # 899cb3), color-stop (0.505, # 7e94b0), hasta (# 6d83a1)); imagen de fondo: -webkit-linear-gradient (arriba, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (arriba, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-gradiente lineal (arriba, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: gradiente lineal (arriba, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Estoy usando el esquema de color azul que se encuentra en la mayoría de las aplicaciones iOS predeterminadas. Mi fondo se establece inicialmente en un color sólido para los dispositivos que no pueden representar gradientes CSS3. Luego, debajo, estoy usando paradas de color alrededor del marcador del 50% para recrear el efecto de brillo brillante tradicional de Apple. También dentro del mismo selector, he modificado ligeramente la sombra del texto con un color y rango más sutiles.

Botones y efectos de texto

Es importante, al codificar muestras, considerar específicamente qué áreas de la interfaz necesitan atención. La barra de encabezado se ve muy bien con este nuevo fondo, pero una última modificación que me gustaría hacer coincidirá con los estilos de botones más cercanos a los de las aplicaciones de iOS.

.ui-btn-up-g border: 1px solid # 375073; fondo: # 4a6c9b; font-weight: negrita; color: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; caja de sombra: ninguna; -webkit-box-shadow: ninguno; -moz-box-shadow: ninguno; imagen de fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# 89a0be), color-stop (0.5, # 5877a2), color-stop (0.505, # 476999), hasta (# 4a6c9b)); imagen de fondo: -webkit-linear-gradient (arriba, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (superior, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / imagen de fondo: -ms-gradiente lineal (arriba, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-gradiente lineal (arriba, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: gradiente lineal (arriba, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); radio del borde: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner radio-borde: 0; -webkit-border-radius: 0; -moz-border-radio: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; fondo: # 2463de; font-weight: negrita; color: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; caja de sombra: ninguna; -webkit-box-shadow: ninguno; -moz-box-shadow: ninguno; imagen de fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (# 779be9), color-stop (0.5, # 376fe0), color-stop (0.505, # 2260dd), hasta 2463de)); imagen de fondo: -webkit-linear-gradient (arriba, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-gradient (top, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-gradiente lineal (arriba, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: gradiente lineal (arriba, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); radio del borde: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

El área de código que estamos editando ahora está dentro de las clases de botones de UI. Hay 3 modos diferentes de preocuparse con: .ui-btn-up-g, .ui-btn-hover-g, y .ui-btn-down-g. Principalmente me estoy enfocando en los efectos estándar (btn-up) y hover (btn-hover) editando la sombra de la caja y los gradientes lineales. También amplié el efecto de las esquinas redondeadas para que los botones aparezcan más rectangulares..

Debido a esto, he necesitado eliminar el radio del borde interno de una clase titulada .ui-btn-inner. Esta clase se adjunta a un elemento span dentro de cada enlace de anclaje en la barra de encabezado. Sin restablecer las propiedades del radio del borde, notará pequeños fallos en el diseño cada vez que se desplace sobre un botón. A medida que pase más tiempo codificando en los temas de jQuery Mobile, memorizará estos pequeños matices para futuros proyectos..

Introducción a ThemeRoller

Si te gusta ensuciarte las manos con el código, te recomiendo encarecidamente que te limites a las ediciones personalizadas. No solo tiene más control, sino que también es mucho más fácil depurar problemas dentro del CSS si realizó todas las ediciones. Pero para muchos diseñadores este proceso es agotador y simplemente tomará más tiempo del necesario. Afortunadamente, el equipo de jQuery Mobile ha lanzado un editor en línea con el nombre ThemeRoller.

Desde esta página, tiene acceso para editar las primeras 3 muestras A-C o incluso crear una propia. Si mira en la barra lateral izquierda, puede cambiar entre estas 3 configuraciones o realizar cambios rápidamente en las opciones del tema global. Estas incluyen propiedades CSS, como radios de borde, sombras de cuadro o fuentes de página predeterminadas. Observe que, al seleccionar cualquiera de las muestras preestablecidas, podemos editar solo las mismas áreas que antes: barras superiores / inferiores, contenido del cuerpo y los 3 estados del botón.

Pero mi característica favorita tiene que ser el acceso directo a las muestras de Adobe Kuler. Realmente puedes crear algunos esquemas de color dentro de tu cuenta Kuler e importarlos a ThemeRoller. La interfaz admite la funcionalidad de arrastrar y soltar, por lo que es muy sencillo probar algunas ideas diferentes en cuestión de minutos..

En última instancia, no existe un método absoluto para construir adecuadamente sus muestras jQM. Algunos diseñadores prefieren código CSS rígido, mientras que a otros les encantará la aplicación web intuitiva ThemeRoller. Mientras siga la estructura de clases, debería obtener los mismos resultados en ambos sentidos..

Recursos útiles

Temas de jQuery Mobile - Documentación
Uso y personalización de temas de jQuery Mobile.