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

Durante los últimos 2 a 3 años, hemos visto un enorme crecimiento en la compatibilidad con navegadores y sistemas operativos para sitios web móviles. Lo más notable son las plataformas iOS de Apple y Android 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 no ha habido una biblioteca verdaderamente unificada hasta ahora. jQuery Mobile toma todas las mejores características de jQuery y las transfiere a una fuente web basada en dispositivos móviles. 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 se sienta cómodo diseñando sus propias aplicaciones móviles jQuery.

Funciones y soporte de SO

La razón por la que sugiero aprender jQuery Mobile sobre cualquier otro marco es la simplicidad. El código se construyó en el núcleo de jQuery y tiene un equipo activo de desarrolladores que escriben scripts y editan errores. Entre las muchas características, se incluyen compatibilidad con HTML5, enlaces de navegación con tecnología Ajax y controladores de eventos de toque / deslizamiento.

El soporte varía entre los teléfonos y se divide en una tabla de 3 categorías de AC. 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 nada de JavaScript. Afortunadamente, la mayoría de los sistemas operativos populares son totalmente compatibles. A continuación, agregué una lista 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 un galimatías y en realidad se siente muy fácil de seguir. ¡Ahora centrémonos en los conceptos básicos de la escritura de una página móvil jQuery y cómo podemos crear una pequeña aplicación!

La plantilla HTML estándar

Para que su primera aplicación móvil funcione, hay una plantilla establecida con la que debe comenzar. Esto incluye el código base de jQuery junto con el JS y CSS móvil, todos alojados de forma externa desde jQuery CDN. Mira mi código de ejemplo a continuación.

123456789101112131415dieciséis<!DOCTYPE html> <html>   <head>   <title>Basic mobile app</title>   <meta charset=”utf-8″>    <meta name=”viewport” content=”width=device-width, initial-scale=1″>   <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>     <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css”>  <script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>  <script type=”text/javascript” src=”http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js”></script></head> <body>  </body></html>

Los únicos elementos extraños aquí deberían ser las dos metaetiquetas. La viewportetiqueta superior actualiza los navegadores móviles para utilizar un efecto de zoom completo. La configuración del valor width=device-widthestablecerá el ancho de la página exactamente al ancho de la pantalla del teléfono. Y lo mejor de todo es que no deshabilita las funciones de zoom, ya que jQuery Mobile puede adaptarse a los diseños cambiantes.

La siguiente metaetiqueta X-UA-Compatiblesolo 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 evitar errores de renderización desconocidos.

Construyendo el contenido corporal

Ahora, aquí es donde jQuery mobile puede complicarse. Cada página HTML no es necesariamente una 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 de data-antemano. De manera similar, data-role=”page”se puede configurar para múltiples divs en un solo archivo HTML, lo que le brinda 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 sencillas. Si solo necesita de 3 a 5 páginas, ¿por qué no almacenarlo todo en un solo archivo? A menos que tenga mucho contenido escrito, en cuyo caso intente usar PHP incluye para ahorrar tiempo.

Consulte el ejemplo de código a continuación si está perdido.

123456789101112131415dieciséis17181920212223242526272829<body><div data-role=”page” id=”index”>  <header data-role=”header”>    <h1>Top title bar</h1>  </header>     <div data-role=”content”>    <h3>Show another page??</h3>    <p>hint: click the button below!</p>    <p><a href=”#about” data-role=”button” data-theme=”c”>About us</a></p>  </div>     <footer data-role=”footer”>    <h2>&copy; footer here.</h2>  </footer></div> <div data-role=”page” id=”about”>  <header data-role=”header”>    <h1>Page 2 Here</h1>  </header>     <div data-role=”content”>    <p>just some extra content as well.</p>    <p>I mean, you can <a data-rel=”back” href=”#index”>go back</a> at any time.</p>  </div></div></body></html>

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

Mi botón también ocupa todo el ancho de la página. Para eliminar el comportamiento, debemos configurar el elemento del bloque a la visualización en línea. El atributo para hacer esto es el data-inline=”true”que podría agregar a cualquier botón de anclaje.

Barras de encabezado y pie de página

En la parte superior e inferior de sus aplicaciones, debe agregar contenido de encabezado y pie de página. Este estilo de diseño a menudo se atribuye a las aplicaciones de iOS que se hicieron populares por primera vez con la App Store de Apple. jQ Mobile usa atributos de rol de datos para definir el encabezado, pie de página y contenido de la página. Echemos un vistazo breve a estas áreas.

Botones de la barra superior

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

12345<div data-role=”page” id=”about” data-add-back-btn=”true”>  <header data-role=”header”>    <a href=”index.html” data-icon=”gear” data-theme=”b” class=”ui-btn-right”>Settings</a>    <h1>Page 2 Here</h1>  </header>

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 de retroceso que funciona de manera similar al botón de retroceso de su navegador.

Podríamos haber agregado un botón de retroceso manualmente con un código similar al que usamos en el área de contenido. Pero creo que esto lleva mucho más tiempo configurarlo, especialmente en varias páginas. Todos los enlaces de anclaje dentro de la sección del encabezado estarán predeterminados en las posiciones de los botones izquierdo / derecho. Al usar class=”ui-btn-right”este botón de configuración reubicado, hay espacio libre para el botón de retroceso. ¡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 no se siente muy útil al principio. Es un lugar donde puede almacenar material con derechos de autor 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 aparecen enlaces de pestañas para controlar la navegación de la página. Hay muchas opciones en las que puede seleccionar efectos de pantalla completa, agregar iconos, ajustar la ubicación y algunos otros atributos también. Pero construyamos un navegador de pie de página simple con 3 botones para tener una idea de cómo funciona.

123456789<footer data-role=”footer” class=”ui-body-b”>  <div data-role=”navbar”>    <ul>      <li><a href=”#index” data-direction=”reverse”>App Homescreen!</a></li>      <li><a href=”http://www.google.com/” data-rel=”external”>Google Me</a></li>      <li><a href=”https://www.hongkiat.com/” data-rel=”external”>Hongkiat Blog</a></li>    </ul>  </div></footer>

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

Si nota en el primer botón, tengo el atributo data-direction=”reverse”. Aunque podría usar la configuración del botón Atrás como antes para regresar a la página de inicio, en su lugar usé la ID de página de #index . De forma predeterminada, la ventana de la aplicación se desplazará hacia la derecha, lo que parece bastante vulgar, ya que espera que la animación se mueva hacia atrás. Puede jugar con más de estos efectos animados si tiene tiempo. Consulte 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 crear una aplicación móvil con jQuery. Pero quiero iniciar una nueva aplicación que cargue datos desde una página externa. Usaré$_REQUEST[] un script PHP muy simple para obtener la variable y mostrar un pequeño disparo de Dribbble en consecuencia. La presentación de pantalla a continuación debería darle una idea de lo que vamos a construir.

Primero crearé 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. Cortando el mismo encabezado que antes, agregué todo mi código de esta nueva página de índice a continuación.

123456789101112131415dieciséis171819<body> <div data-role=”page” id=”img-listing”>  <header data-role=”header”>    <h1>October 2011 Shots</h1>  </header>     <div data-role=”content”>    <ul data-role=”listview” data-theme=”c”>      <li><a href=”image.php?imgid=1″>First image</a></li>      <li><a href=”image.php?imgid=2″>Second image</a></li>      <li><a href=”image.php?imgid=3″>Third image</a></li>      <li><a href=”image.php?imgid=4″>Fourth image</a></li>    </ul>  </div>     <footer data-role=”footer”><h3>www.dribbble.com</h3></footer></div></body></html>

Cada uno de los enlaces de anclaje en mi vista de lista apunta al mismo archivo: index.php. Pero estamos pasando el parámetro imgidcomo una variable de solicitud. En el archivo image.php tomamos la ID y la probamos con 4 valores preestablecidos. Si alguna coincide, usamos la URL y el título de la imagen correspondiente; de ​​lo contrario, solo mostramos una toma de Dribbble predeterminada.

Script del cargador de imágenes

El script image.php aún tiene la plantilla móvil jQuery predeterminada agregada al código. De hecho, comparte un encabezado y un pie de página muy similares, excepto por la adición de nuestro atributo de vínculo de retroceso data-add-back-btn=”true”. Tenga en cuenta que este botón solo aparecerá si venimos de index.html primero. Intente cargar image.php directamente y no aparecerá nada ya que no hay un “atrás” al que moverse.

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

123456789101112131415dieciséis1718192021222324252627282930<?php$theid = $_REQUEST[‘imgid’]; switch($theid) {  case 1:    $heading = “Wunderkit”;    $origin  = “http://dribbble.com/shots/297593-Wunderkit-tasks”;    $source  = “wunderkit.png”;    break;  case 2:    $heading = “College”;    $origin  = “http://dribbble.com/shots/298643-Colleeeeeeeeeeeeege”;    $source  = “college.jpg”;    break;  case 3:    $heading = “Forum app”;    $origin  = “http://dribbble.com/shots/298649-Forum-app-for-Facebook”;    $source  = “forum-app.jpg”;    break;  case 4:    $heading = “Twitter”;    $origin  = “http://dribbble.com/shots/298069-Twitter”;    $source  = “twitter.png”;    break;  default:    $heading = “Abandoned lighthouse”;    $origin  = “http://dribbble.com/shots/298615-Abandoned-lighthouse”;    $source  = “lighthouse.jpg”;}?>

Todo parece bastante sencillo, ¡incluso un desarrollador de PHP novato debería poder seguirlo! Y si no entiende, no es importante para el código jQuery de todos modos, así que no se preocupe. 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é el ID de “imágenes” para el contenedor e incluso configuré el encabezado para cambiar con cada nueva foto.

123456789101112<div data-role=”page” id=”images” data-add-back-btn=”true”>  <header data-role=”header”>    <h1><?php echo $heading; ?></h1>  </header>     <div data-role=”content”>    <p><strong><a href=”<?php%20echo%20$origin;%20?>” data-rel=”external”>View the Original</a></strong></p>    <p><a href=”<?php%20echo%20$origin;%20?>” data-rel=”external”><img src=”img/<?php%20echo%20$source;%20?>” /></a></p>  </div>     <footer data-role=”footer”><h3>www.dribbble.com</h3></footer></div>

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

Diseño elegante con miniaturas de lista

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

Para comenzar, abra Photoshop y cree un documento de 80 × 80 px. Cambiaré el tamaño de cada imagen rápidamente y guardaré miniaturas para que coincidan con cada una. Luego, actualizando los elementos de la vista de lista, deberíamos incluir algunos elementos más.

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

[Vista previa de demostración en vivo]

123456789101112131415dieciséis17181920212223<div data-role=”content”>  <ul data-role=”listview” data-theme=”c”>    <li><a href=”image.php?imgid=1″>    <img src=”img/wunderkit-t.png” class=”ui-li-thumb” />    <h3 class=”ui-li-heading”>Wunderkit tasks</h3>    <p class=”ui-li-desc”>by Sebastian Scheerer</p></a></li>         <li><a href=”image.php?imgid=2″>    <img src=”img/college-t.jpg” class=”ui-li-thumb” />    <h3 class=”ui-li-heading”>Colleeeeeeeeeeeeege</h3>    <p class=”ui-li-desc”>by Scott Hill</p></a></li>         <li><a href=”image.php?imgid=3″>    <img src=”img/forum-app-t.jpg” class=”ui-li-thumb” />    <h3 class=”ui-li-heading”>Forum app for Facebook</h3>    <p class=”ui-li-desc”>by Ionut Zamfir</p></a></li>         <li><a href=”image.php?imgid=4″>    <img src=”img/twitter-t.png” class=”ui-li-thumb” />    <h3 class=”ui-li-heading”>Twitter</h3>    <p class=”ui-li-desc”>by Sam Jones</p></a></li>  </ul></div>

Las clases para ui-li-headingy ui-li-descse agregan de forma predeterminada en la hoja de estilo de jQuery Mobile. Esto es similar a la clase de imagen ui-li-thumbque cambia automáticamente el tamaño de cada barra de vista de lista de acuerdo con 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, puede comenzar a construir un sistema de 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. Es más un marco HTML5 / CSS / jQuery completo para crear aplicaciones móviles rápidas y escalables.

Conclusión

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

Pero a medida que avanzan los meses, los desarrolladores web seguramente seguirán la tendencia. Las aplicaciones móviles e incluso los diseños web móviles están ganando 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *