Diseño de aplicaciones móviles / Guía para principiantes de desarrollo de jQuery Mobile

En los últimos 2 o 3 años, hemos visto un enorme crecimiento en el soporte de navegador y sistema operativo para sitios web móviles. Lo más notable son las plataformas Android de Apple y iOS de Google. Pero otros como PalmOS y Blackberry todavía están en la mezcla. Hasta hace poco era muy difícil hacer coincidir un solo tema móvil en todas estas plataformas.

JavaScript fue un comienzo, pero hasta ahora no ha habido ninguna biblioteca verdaderamente unificada. jQuery Mobile toma todas las mejores características de jQuery y las traslada a una fuente web basada en el móvil. La biblioteca es más como un marco que incluye animaciones, efectos de transición y estilos CSS automáticos para elementos HTML básicos. En esta guía, espero presentar la plataforma de manera que pueda sentirse cómodo al diseñar sus propias aplicaciones móviles jQuery.

Características y soporte de sistema operativo

La razón por la que sugiero aprender jQuery Mobile sobre otros marcos es la simplicidad. El código se creó en el núcleo de jQuery y tiene un equipo activo de desarrolladores que escriben guiones y corrigen errores. De las muchas características, se incluye compatibilidad con HTML5, enlaces de navegación impulsados ​​por Ajax y controladores de eventos táctiles / deslizables.

El soporte varía entre los teléfonos y se divide en un cuadro de 3 categorías de A-C. A es el nivel superior que cuenta con soporte completo de jQuery Mobile, B tiene todo excepto Ajax, mientras que C es HTML básico con poco o ningún JavaScript. Afortunadamente, la mayoría de los sistemas operativos populares son totalmente compatibles. Agregué una lista a continuación con solo algunos ejemplos..

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Windows Phone 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Si desea obtener más información, intente leer en su página de documentos oficiales. No está escrito en galimatías y en realidad se siente muy fácil de seguir. Ahora concentrémonos en los conceptos básicos de escribir una página móvil de jQuery y en cómo podemos construir una pequeña aplicación!

La plantilla HTML estándar

Para que tu primera aplicación móvil funcione, hay una plantilla establecida con la que debes comenzar. Esto incluye el código base de jQuery junto con el móvil JS y CSS, todos alojados desde el CDN de jQuery. Echa un vistazo a mi código de ejemplo a continuación.

Los únicos elementos extraños aquí deberían ser las dos etiquetas meta. La parte superior vista tag actualiza los navegadores móviles para utilizar un efecto de zoom completo. Estableciendo el valor ancho = ancho del dispositivo establecerá el ancho de la página exactamente al ancho de la pantalla del teléfono. Y lo mejor de todo es que no desactiva las funciones de zoom ya que jQuery Mobile puede adaptarse a los cambios de diseño.

La siguiente etiqueta meta Compatible con X-UA solo obliga a Internet Explorer a representar el HTML en su iteración más reciente. Los navegadores más antiguos y especialmente los móviles intentarán sortear errores de representación desconocidos.

Construyendo el contenido corporal

Ahora aquí es donde jQuery mobile puede complicarse. Cada página HTML no es necesariamente 1 página en el sitio móvil. El marco hace uso de los atributos de datos de HTML5, que puede crear a su antojo agregando datos- antemano. De una forma similar data-role = "page" se puede configurar a múltiples divs en un solo archivo HTML, lo que le da más de una página.

Luego se movería entre estas páginas con enlaces de anclaje y una identificación única. Esta configuración es una buena idea para aplicaciones básicas y simples. Si solo necesita de 3 a 5 páginas, ¿por qué no almacenarlo todo en un solo archivo? A menos que tenga un montón de contenido escrito, en cuyo caso intente usar PHP incluido para ahorrar tiempo.

Revisa el siguiente ejemplo de código si estás perdido..

 
 
 
Barra de título superior
 
 
 
Mostrar otra pagina??
 
pista: haga clic en el botón de abajo!
 
Sobre nosotros
 
  
 
 
 
Página 2 aquí
 
 
 
solo un poco de contenido extra tambien.
 
Quiero decir, tu puedes regresa en cualquier momento.
 
 
   

Eche un vistazo al enlace de anclaje de la página de índice por un momento. Note que agregué el atributo data-role = "button" para configurar el enlace como un botón. Pero en lugar de usar los estilos por defecto incluimos data-theme = "c". Esto cambia entre 1 de 5 (temas a-e) plantillas que vienen empaquetadas por defecto como estilos CSS en jQ Mobile.

Mi botón también abarca todo el ancho de la página. Para eliminar el comportamiento necesitamos configurar el elemento del bloque a la visualización en línea. El atributo para hacer esto es data-inline = "true" que se podría añadir en cualquier botón de anclaje.

Barras de encabezado y pie de página

En la parte superior e inferior de sus aplicaciones, debe agregar el contenido del encabezado y del pie de página. Este estilo de diseño a menudo se atribuye a las aplicaciones de iOS que primero se hicieron populares utilizando la tienda de aplicaciones móviles de Apple. jQ Mobile utiliza atributos de rol de datos para definir el encabezado, el pie de página y el contenido de la página. Echemos un breve vistazo a estas áreas.

Botones de la barra superior

Por defecto, la barra superior admite un conjunto de dos (2) enlaces de manera similar a otras aplicaciones móviles. iOS utiliza de forma predeterminada “atrás” botón a la izquierda y con frecuencia una “opciones” o “configuración” a la derecha.

 
 Ajustes 
Página 2 aquí
 
 

El código anterior solo se centra en el contenedor div para nuestra página Acerca de junto con el contenido del encabezado. El atributo HTML adicional data-add-back-btn = "true" solo funcionará cuando se agregue a una función de datos de página. El propósito es incluir automáticamente un botón Atrás que funcione de manera similar al botón Atrás de su navegador..

Podríamos haber agregado un botón Atrás manualmente con un código similar al que usamos en el área de contenido. Pero creo que esto toma mucho más tiempo para configurarlo, especialmente en varias páginas. Todos los enlaces de anclaje dentro de la sección del encabezado estarán predeterminados en las posiciones del botón izquierdo / derecho. Mediante el uso class = "ui-btn-right" esto reubicó mi botón de Configuración para que haya espacio libre para el botón Atrás. También estoy usando los estilos de temas secundarios para darle un toque extra!

Navegación de pie de página

El área del pie de página muchos no se sienten muy útiles al principio. Es un lugar donde puede almacenar material con copyright y enlaces más importantes, pero esto podría agregarse fácilmente en la parte inferior de su área de contenido. Entonces, ¿de qué sirve usar el pie de página??

Bueno, el mejor ejemplo que he visto utiliza el espacio de pie de página como un sistema de navegación donde los enlaces de pestañas aparecen para controlar la navegación de la página. Hay muchas opciones donde puede seleccionar efectos de pantalla completa, agregar íconos, ajustar la ubicación y algunos otros atributos también. Pero construyamos un simple pie de página con 3 botones para tener una idea de cómo funciona esto..

• Vista previa en vivo de demostración

Así que aquí hay un código de pie de página para la sección acerca de la página. data-role = "navbar" debe agregarse al elemento contenedor que contiene una lista desordenada y NO el elemento UL en sí. Cada enlace dentro de la lista se trata como una barra de pestañas, que luego se divide equitativamente en función del número total de enlaces. La clase adicional de ui-body-b Simplemente agrega efectos estéticos a medida que cambiamos entre los pocos estilos disponibles..

Si te fijas en el primer botón tengo el atributo. dirección de datos = "inverso". Aunque pude usar la configuración del botón Atrás como antes para volver a la página de inicio, en su lugar, he usado la ID de página de #índice. Por defecto, la ventana de la aplicación pasará a la derecha, lo cual se ve bastante pegajoso, ya que espera que la animación se mueva hacia atrás. Puedes jugar con más de estos efectos animados si tienes tiempo. Consulta la página de información de transiciones en la documentación de jQuery..

Ajax y Páginas Dinámicas

El primer segmento realmente ha abierto los puntos clave para construir una aplicación móvil con jQuery. Pero quiero iniciar una nueva aplicación que carga datos desde una página externa. Estaré usando un script PHP muy simple para lograr el $ _REQUEST [] variable y mostrar un pequeño tiro Dribbble en consecuencia. La siguiente pantalla de muestra le dará una idea de lo que vamos a construir..

Primero haré un conjunto de páginas index.html en la plantilla predeterminada. Para esta pantalla de inicio, estoy usando una configuración de vista de lista para mostrar cada enlace en orden. Esto se hace en el área de contenido con un data-role = "listview" atributo en el contenedor de la lista. Al eliminar el mismo encabezado que antes, agregué todo mi código de esta nueva página de índice a continuación.

 
 
 
Tiros de octubre 2011
 
 
 
 
Primera imagen
 
Segunda imagen
 
Tercera imagen
 
Cuarta imagen
 
 
  
   

Cada uno de los enlaces de anclaje en mi vista de lista apunta al mismo archivo - index.php. Pero estamos pasando en el parámetro. imgid como una variable de solicitud. En el archivo image.php tomamos el ID y lo probamos contra 4 valores preestablecidos. Si hay alguna coincidencia, usamos la URL y el título de la imagen correspondiente, de lo contrario, solo mostraremos un Dribbble shot predeterminado.

Script del cargador de imágenes

El script image.php todavía tiene la plantilla predeterminada de jQuery mobile agregada al código. En realidad, comparte un encabezado y un pie de página muy similares, a excepción de la adición de nuestro atributo de vínculo de retroceso data-add-back-btn = "true". ¡Observe que este botón solo se mostrará si venimos de index.html primero! Intente cargar directamente image.php y no aparecerá nada ya que no hay “atrás” para pasar a.

Creo que podemos darle un poco más de sentido al código al examinar primero mi lógica PHP. Usamos un cambiar / caso método para verificar los 4 ID diferentes y proporcionar un título de encabezado, una URL de imagen y un enlace de origen del artista original.

Todo parece bastante sencillo, ¡incluso un desarrollador de PHP novato debería poder seguirlo! Y si no lo entiendes, no es importante para el código jQuery de todos modos, así que no te preocupes. Deberíamos cambiar ahora y echar un vistazo a la plantilla que he creado en esta nueva página. Todo el código HTML se agrega después de todo el bloque PHP anterior. Usé la identificación de “imagenes” para el contenedor e incluso configurar el encabezado para cambiar con cada nueva foto.

 
 
 
 
 
 Ver el original
 
 
  
 

Probablemente puedas ver lo simplista que es esta demo. Pero todo el propósito es demostrar la escalabilidad de jQuery mobile. PHP se puede agregar fácilmente a la mezcla y usted puede producir algunas aplicaciones realmente buenas con solo unas pocas horas de desarrollo.

Diseño de lujo con miniaturas de lista

Un último efecto agregado que podemos implementar es el uso de miniaturas para animar la página de listado. También voy a dividir el texto en un encabezado y cuadro de descripción para mostrar tanto el título de la obra como el nombre del artista..

Para comenzar a abrir Photoshop y crear un documento de 80 × 80 px. Voy a redimensionar rápidamente cada imagen y guardar miniaturas para que coincida con cada una. Luego, actualizando los elementos de la vista de lista deberíamos incluir algunos elementos más..

Mira el código de abajo y mi ejemplo de demostración para ver a qué me refiero.

[Vista previa de demostración en vivo]

 
 
  
Tareas de wunderkit
 
por Sebastian Scheerer
 
  
Colleeeeeeeeeeeeeegeege
 
por Scott Hill
 
  
Aplicación de foro para Facebook
 
por Ionut Zamfir
 
  
Gorjeo
 
por Sam Jones
 
 
 

Las clases para encabezado ui-li y ui-li-desc se agregan por defecto en la hoja de estilo de jQuery Mobile. Esto es similar a la clase de imagen ui-li-pulgar que cambia automáticamente el tamaño de cada barra de vista de lista según la altura de la imagen. Ahora, desde aquí, puede construir más en la interfaz con animaciones, efectos de página, hojas de estilo, etc..

O, alternativamente, podría comenzar a construir un sistema backend para cargar nuevas imágenes y recortar automáticamente las miniaturas para incluirlas en la lista. Hay tanta flexibilidad con jQuery Mobile que casi no se puede etiquetar únicamente como una biblioteca de JavaScript. Se trata más de un completo framework HTML5 / CSS / jQuery para crear aplicaciones móviles rápidas y escalables.

Conclusión

Al momento de escribir este artículo, el equipo de jQuery Mobile ha publicado oficialmente RC1.0 de la biblioteca de códigos. Esto significa que la mayoría, si no todas, las principales correcciones de errores se han eliminado y ahora los evaluadores se están preparando para una versión completa. Por eso no encontrarás mucha información en la web..

Pero a medida que avanzan los meses, los desarrolladores web están seguros de seguir la tendencia. Las aplicaciones móviles e incluso los diseños web móviles están creciendo en popularidad con el enorme aumento de los teléfonos inteligentes. Los desarrolladores web no tienen tiempo para aprender un lenguaje de programación completo para crear aplicaciones de Android / iOS. Por lo tanto, jQuery Mobile es una alternativa delgada que incluye soporte para la mayoría del software de la industria móvil y continúa creciendo cada día con una comunidad de desarrolladores activa..