Cree temas móviles jQuery personalizados

Personalice la apariencia de páginas, barras de herramientas, contenido, elementos de forma, listas, botones y más

La alta tasa de adopción de teléfonos inteligentes y dispositivos tipo tablet está aumentando últimamente de demanda por desarrolladores y diseñadores web móviles. La infraestructura jQuery Mobile le permite crear experiencias web móviles que rivalizan con los resultados del desarrollo de aplicaciones nativo, al proporcionar acceso instantáneo a aplicaciones y sitios web mediante el navegador web en lugar de hacer que los usuarios descarguen e instalen aplicaciones móviles. Aprenda cómo usar la infraestructura de temas jQuery Mobile para crear sitios web y aplicaciones web móviles personalizados por marca.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock ha sido desarrollador y diseñador web por contrato desde 1996. Ha trabajado el proyectos para compañías como SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software y Fire Mountain Gems. Es el autor de Ajax for Web Application Developers (Sams) y The ActionScript Migration Guide (New Riders) y ha sido un reconocido columnista y escritor para numerosos sitios web y revistas de diseño, incluyendo Peachpit.com, InformIT.com y la revista Practical Web Design . Kris también es el fundador de www.studiosedition.com, un estudio de diseño web y desarrollo de software especializado en la fusión de forma y función.



13-02-2012

La infraestructura jQuery Mobile es una biblioteca JavaScript que usted puede usar para crear fácilmente una versión móvil de un sitio web, convirtiendo las páginas web existentes en sitios web y aplicaciones fáciles de usar con el tacto. La infraestructura jQuery Mobile afecta la forma en la que se puede acceder y distribuir las aplicaciones móviles en dispositivos móviles y de tablet, al permitir a los usuarios conectarse directamente a aplicaciones de fácil uso por tacto, mediante un navegador web.

Las tasas de adopción de dispositivos móviles y tipo tabla están por los cielos, y la infraestructura jQuery Mobile está permitiendo a los desarrolladores satisfacer la creciente demanda por estas experiencias web móviles al aumentar la velocidad con que se pueden producir sitios web móviles.

En particular, jQuery Mobile incluye una infraestructura de tema que usted puede personalizar fácilmente. La capacidad para personalizar muestras de pantalla y conjuntos de íconos, proporciona la personalización de temas de página, barras de herramientas, contenido, páginas, barras de herramientas, contenido, elementos de forma, listas, botones y más. Este artículo proporciona una breve visión general para cada uno de estos tipos de elemento jQuery Mobile element. La personalización de temas le permite crear versiones móviles de sitios web que sigan las mismas marcas de sus versiones de escritorio.

Asignando tema a jQuery Mobile

jQuery Mobile tiene una estructura de página recomendada pero opcional para aplicaciones web estándar que incluyan algunas construcciones comunes, como un elemento de página que contenga elementos de encabezado, de contenido y de pie de página. Para definir estos elementos, la infraestructura jQuery Mobile framework usa el atributo data-role de HTML5. Listado 1 muestra un ejemplo de la plantilla HTML recomendada por jQuery Mobile usando data-role para cada elemento principal.

Listado 1. Un elemento usando el rol de página de datos
<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div>

	<div data-role="content">
		<p>Page content goes here.</p>		
	</div>

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
	
</div>

Otro elemento importante y recomendado es una etiqueta <meta viewport> . Esta etiqueta especifica cómo un navegador debe mostrar el sitio web móvil. El siguiente código muestra cómo añadir una etiqueta <meta> para establecer el viewport para dispositivos móviles:

<meta name="viewport" content="width=device-width, initial-scale=1">

La etiqueta <meta viewport> es importante para presentar su página web móvil basada adecuadamente en el dispositivo que está accediendo a ella. Si esta etiqueta, su página web puede aparecer pequeña, minimizada, como cualquier aparecería página web normal no construida para visualización en móviles. Figura 1 muestra una página web móvil que usa la etiqueta <meta viewport> y que muestra el contenido de forma más apropiada para el dispositivo que se está usando.

Figura 1. Una página web móvil usando la etiqueta <meta viewport>
Una página web móvil usando la etiqueta <meta viewport>

La infraestructura jQuery Mobile incluye un sistema de temas de página que proporciona control total sobre la apariencia y estilo de los elementos de página. El atributo data-theme HTML5 puede añadirse a un elemento para aplicarle una muestra de color de tema o un nuevo color de muestra. El sistema de asignación de tema incluye cinco muestras, usando letras para identificar a cada una—por ejemplo, A-E son muestras que jQuery Mobile proporciona de forma nativa. Usted puede ver las muestras existentes descargando el archivo CCS que proporciona la infraestructura jQuery Mobile. Para crear una nueva muestra, usted puede usar cualquier letra del alfabeto que no esté siendo usada aún (a saber, de la F a la Z). En cuanto usted determina cuál letra le gustaría usar, usted puede referenciar cualquiera de las muestras existentes para copiar y personalizar clases para todos los diferentes elementos de página.


Asignación de tema a páginas

Consiste en la aplicación de un estilo al elemento HTML que contiene toda la página web. La estructura de página recomendada jQuery Mobile consiste en un elemento <div> que incluye un atributo data-role con un valor por página. Para aplicar estilo a este elemento, aplique un atributo data-theme y especifique un valor único y no usado para una nueva muestra, de manera que usted pueda escribir un CSS personalizado para esta. El siguiente código muestra un ejemplo del elemento page usando un valor data-theme de F:

<div data-role="page" data-theme="f">

Al usar este data-role y data-theme, la infraestructura jQuery Mobile realmente crea y añade algunas clases CSS al elemento page . Aquí hay un ejemplo de en lo que se convierte el resultado en el navegador después de haber sido procesado por la infraestructura:

<div data-role="page" data-theme="f" 
class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">

Como puede ver, se ha añadido un número de clases CSS al elemento page . Las clases ui-page y ui-page-active han sido asignadas con base en el valor data-role de page, y la clase ui-body-f ha sido asignada con base en el valor data-theme de F. Usted puede usar cualquiera de estas clases para dar estilo al elemento page o a su contenido. Listado 2 muestra un ejemplo sobre cómo usar la clase ui-body-f para añadir estilo personalizado al elemento page .

Listado 2. Asignando estilo al elemento de página jQuery Mobile usando CSS
.ui-body-f {
  background-color: #f9f9f9;
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
}

El CSS personalizado que usted ha añadido a esta clase establece el color de fondo y la fuente usada en la página web móvil. En cuanto usted ha creado la muestra de página, puede hacerla más específica con los elementos HTML a los que usted desee apuntar y asignar estilo. Por ejemplo:Listado 3 muestra cómo apuntar y asignar estilo a los campos de entrada de texto y contraseña que aparecen dentro del elemento page .

Listado 3. Asignando estilo a todos los campos de texto y contraseña que aparecen dentro del elemento de página
.ui-body-f input[type="text"],
.ui-body-f input[type="password"] {
  background-color: #ccc;
}

las posibilidades son infinitas una vez que usted ha logrado control sobre el elemento page . Con este elemento contenedor de los contenidos de la página web usted realmente puede apuntar y personalizar cualquier elemento.


Temas para la barra de herramientas

En la infraestructura jQuery Mobile, las barras de herramientas son elementos de encabezado y pie de página. Para definir una barra de herramientas como encabezado o pie de página, usted usa el atributo data-role . El valor del atributo data-role debe ser header o footer dependiendo del elemento que usted esté creando. Listado 4 proporciona un ejemplo de barras de herramientas de encabezado y de pie de página incluidas dentro de un elemento page .

Listado 4. Usando barras de herramientas de encabezado y pie de página
<div data-role="header">
	<h1>Page Title</h1>
</div>

<div data-role="footer">
	<h4>Page Footer</h4>
</div>

Asignar un tema a una barra de herramientas es tan fácil como usar el atributo data-theme y asignarle un valor de muestra personalizado. De forma predeterminada, a las barras de herramientas de encabezado y pie de página se les asigna una muestra de color para mostrar jerarquía visual. Aquí hay un ejemplo de un tema personalizado asignado a la barra de herramientas de encabezado:

<div data-role="header" data-theme="f">
	<h1>Page Title</h1>
</div>

Para asignar estilo a este tema, usted necesita crear una nueva clase CSS para la barra (Listado 5).

Listado 5. Dando estilo a la barra de herramientas de encabezado
.ui-bar-f {
  padding: 10px 0px;
  background-color: #069;
  border-bottom: 2px solid #036;
  color: #fff;
}

Esta nueva clase CSS personalizada asigna estilo a todas las barras de herramientas que tengan el F data-theme aplicado. No obstante, a menudo hay ocasiones en las que le gustaría que su encabezado y pie de página se vieran diferente. Para lograr esta diferencia, usted necesita crear un nuevo tema personalizado—llámelo G—y cree una nueva clase CSS para darle estilo (Listado 6).

Listado 6. Añadiendo una clase CSS para la barra de herramientas de pie de página
.ui-bar-g {
  margin-top: 20px;
  padding: 10px 0;
  color: #fff;
  border-bottom: 2px solid #000;

  background-color: #000;
  background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,0.65) 100%); 
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,
  rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', 
  endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* W3C */
}

El tema de barra de herramientas G establece algunas propiedades básicas, pero también incluye múltiples gradientes complejos. Estos gradientes son intimidantes, pero afortunadamente usted no necesita memorizar la forma de crearlos, dado que hay sitios web que los generarán para usted. Así, usted simplemente copia y pega el código en su clase CSS. Visite la sección Recursos de este artículo donde encontrará un enlace para generar gradientes para su sitio web.


Asignación de tema a contenidos

Al elemento content se le puede asignar la muestra personalizada que usted seleccione. Para crear una muestra personalizada en su sitio web móvil, usted primero debe crear un elemento content (Listado 7).

Listado 7. Añadiendo un bloque comprimible a su elemento de contenido
<div data-role="collapsible" data-collapsed="true" data-theme="f">
    <h3>>Login</h3>
    Login form will go here
</div>

Este bloque colapsará cuando se cargue la página. Cuando un usuario hace clic en la barra de título, esta revelará el formulario de inicio de sesión que usted creará dentro de poco. Para asignar estilo a este bloque, simplemente asígnele data-theme y cree una clase CSS personalizada. Listado 8 proporciona un ejemplo de algunas clases personalizadas asociadas con el bloque comprimible y su contenido.

Listado 8. Clases CSS personalizadas asociadas con el bloque comprimible de la barra de título
ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-up-f {
  background: #666;
  color: #fff;
  text-decoration: none;
}
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-down-f, 
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-hover-f {
  background: #999;
  color: #fff;
  text-decoration: none;
}

Estas clases CSS definen el estado de no-activo, activo y flotar sobre, de la barra de título comprimible. La etiqueta <h3> del Listado 7 es convertida en un <h3> con una clase ui-collapsible-heading ; el texto contenido—en este caso, "Login"—es convertido en un hipervínculo con algunas clases, dependiendo del estado. Las tres clases para el hipervínculo son ui-btn-up-f, ui-btn-down-f y ui-btn-hover-f. Cada una de estas clases se explica por sí misma, cubriendo la parte de arriba, abajo y el estado flotar sobre, de la barra de título para el bloque de contenido comprimible. Las clases cambian dependiendo del valor data-theme , así que estas clases incluyen una F añadida al final; si usted fuera a usar un valor data-theme de G, las clases tendrían una G añadida al final en lugar de la F.


Asignación de tema a listas

Las listas son comunes en las páginas web móviles porque proporcionan una forma para mostrar opciones rápidamente para las personas sobre la marcha. Para convertir una lista HTML regular en una elegante lista móvil que sea fácil de usar en dispositivos táctiles, todo lo que usted necesita hacer es configurar el atributo data-role en listview, como se muestra en el Listado 9.

Listado 9. Convirtiendo una lista HTML simple en una lista fácil para el tacto
<ul data-role="listview" data-inset="true" data-theme="f">
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
</ul>

De forma predeterminada, las listas aparecen como el ancho predeterminado de la ventana del navegador, como muestra la Figura 2 .

Figura 2. Apariencia predeterminada de una vista de lista en jQuery Mobile
Apariencia predeterminada de una vista de lista en jQuery Mobile

Sin embargo, si usted desea insertar los elementos de lista y redondear las esquinas, usted puede usar el atributo data-inset y establecer este valor como verdadero, como se muestra en Figura 3.

Figura 3. Una vasta de listado con al atributo data-inset establecido como verdadero
Una vasta de listado con al atributo data-inset establecido como verdadero

Añadir un tema a listview es fácil. Así como usted ha hecho con cualquier otro tema, simplemente asigne un valor data-theme . Listado 9 usa F como el valor del tema. Para personalizar la lista de elementos usted necesita apuntarles con CSS, como muestra el Listado 10 .

Listado 10. Personalizando los elementos de lista
.ui-listview .ui-btn-up-f a, 
.ui-listview .ui-btn-down-f a, 
.ui-listview .ui-btn-hover-f a {
  color: #fff;
}

Los elementos a los que usted está apuntando con el CSS en el Listado 10 son los hipervínculos reales dentro de los elementos de lista para establecer el color de texto como blanco. Las clases ui-btn-up-f, ui-btn-down-f y ui-btn-hover-f son todas inyectadas por jQuery Mobile para manejar los diferentes estados de los elementos de lista.


Asignación de tema de formulario y botón

Usted crea un formulario para un sitio web móvil usando la infraestructura jQuery Mobile de la misma forma que usted lo haría para cualquier sitio web: simplemente añade elementos de entrada y las etiquetas asociadas, las cuales llevarán el tema de la página existente. Listado 11 proporciona un ejemplo.

Listado 11. Creando un formulario móvil
<div data-role="collapsible" data-collapsed="true" data-theme="f">
  <h3>>Login</h3>
  <form action="" method="post">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" />
    <label for="username">Password</label>
    <input type="password" name="password" id="password" />
    <fieldset class="ui-grid-a">
      <div class="ui-block-a">
        <button type="reset" data-inline="true">Reset</button>
      </div>
      <div class="ui-block-b">
        <button type="submit" data-inline="true" data-theme="f">Submit</button>
      </div>
    </fieldset>
  </form>
</div>

A los elementos de formulario también se les puede añadir un tema. Listado 12 muestra un ejemplo de cómo se le aplican estilos a un formulario usando el tema F de su elemento page .

Listado 12. Estilo personalizado para los elementos de entrada usados en su formulario de inicio de sesión
.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] {
  background-color: #ccc;
}

En el Listado 11, usted probablemente notó el fieldset con código de botón personalizado. Cada botón tiene un tema diferente asociado a él: el botón Reset usa el tema predeterminado, mientras que el botón Submit usa el tema F . Listado 13 muestra las clases CSS creadas para estos dos botones para hacerlos diferentes en apariencia.

Listado 13. Clases CSS personalizadas para los botones de formulario
.ui-btn-up-f {
  background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%, 
  rgba(78,137,197,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396b9e', 
  endColorstr='#a64e89c5',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(57,107,158,1) 0%,
  rgba(78,137,197,0.65) 100%); /* W3C */
  border: 1px solid #225377;
  text-shadow: #225377 0px -1px 1px;
  color: #fff;
}
.ui-btn-down-f, 
.ui-btn-hover-f {
  background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%, 
  rgba(75,136,182,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
  rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,
  rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* Opera11.10+ */
  background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,
  rgba(75,136,182,0.65) 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72b0d4', 
  endColorstr='#a64b88b6',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
  /* W3C */
  border: 1px solid #00516E;
  text-shadow: #014D68 0px -1px 1px;
  color: #fff;
}

Como usted puede ver, el botón Save tiene un gradiente personalizado asociado a sí, que hace que se destaque más que el botón Reset . El uso de múltiples temas para conjuntos de botones es una buena forma para identificar cuál botón es más importante o cuál es el primario.


Conclusión

Aplicar temas a un sitio web fácil al tacto con la infraestructura jQuery Mobile es fácil una vez que usted entiende el atributo data-theme y los elementos que proporciona la infraestructura. Con la adición del atributo data-theme usted puede asignar valores personalizados y clases CSS personalizadas que le permitirán crear sitios web fáciles al tacto usando la infraestructura jQuery Mobile. Para aprender más sobre la infraestructura, vea la sección Recursos o, mejor aún, pruebe algunas CSS usted mismo(a) usando el código de muestra en la sección Descargas .


Descargar

DescripciónNombretamaño
Sample jQuery Mobile webpagejquery-mobile-custom-themes.zip4KB

Recursos

Aprender

Obtener los productos y tecnologías

  • Descargue jQuery Mobile del sitio de la infraestructura jQuery Mobile.
  • Descargue y pruebe IBM Mobile Technology Preview, un conjunto de muestras y servicios para ayudarle a iniciar en la construcción de aplicaciones móviles que se extienden y se integran dentro de la empresa. La vista previa incluye un servicio de notificación RESTful; PhoneGap, una infraestructura de fuente abierta para la creación de aplicaciones móviles híbridas; un tiempo de ejecución liviano WebSphere Application Server; y código de muestra para permitirle ver cómo funciona todo.
  • IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile incluye el kit de herramientas IBM Dojo 1.7, nuevos y ricos bloques de construcción para aplicaciones de Internet (RIA) para móviles y un componente de diagrama basado en Dojo. Con herramientas Rational de acompañamiento, el Feature Pack le ayuda a llevar aplicaciones WebSphere desarrolladas originalmente para navegadores de escritorio, para adaptarlas e implementarlas para dispositivos móviles.
  • Evalúe productos de IBM de la forma que mejor se ajuste a usted: Descargue una prueba de producto, ensaye un producto en línea, use un producto en un entorno en nube, o pase algunas horas en el SOA Sandbox aprendiendo a implementar la Arquitectura Orientada a Servicios con eficiencia.

Comentar

  • Participe en la Comunidad developerWorks. Conéctese con otros usuarios developerWorks mientras explora los blogs, foros, grupos y wikis dirigidos a desarrolladores.

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=
ArticleID=792291
ArticleTitle=Cree temas móviles jQuery personalizados
publish-date=02132012