Este artículo proviene de un motor de traducción automática.

Tecnología de vanguardia

Desarrollo de sitios móviles, Parte 5: jQuery Mobile

Dino Esposito

 

En esta columna, voy a compartir algunos pensamientos sobre jQuery Mobile, una tecnología móvil cada vez más popular.

Como cada vez más sitios Web están flanqueadas por sitios especializados para servir a los usuarios de dispositivos móviles, una ecuación toma forma en las mentes de muchos desarrolladores y administradores. En pocas palabras, suena como el siguiente: Si te gusta jQuery, vas a amar jQuery Mobile, demasiado. El hecho es que mucha gente (incluido yo) amor jQuery, tan potencialmente un gran número de desarrolladores se estaría inclinado a usar jQuery Mobile como la opción predeterminada para cualquier desarrollo Web móvil sin ningún pensamiento más.

Admito que he seguido este patrón exactamente cuando comencé el desarrollo móvil. A veces funcionó; a veces no lo hizo. Y, quizás más importante, a veces pensaba funcionó, pero al final realmente no conseguir lo que mis clientes estaban buscando.

Desarrollo de aplicaciones móviles no es simplemente una rama de desarrollo Web. En su mayor parte, no lo consigue mediante la adaptación (bueno, sobre todo simplificar) lo que ya tiene, ya sea los casos de uso, diseño, gráficos, secuencias de comandos u otras tecnologías relacionadas. Desarrollo de aplicaciones móviles bien cocido y el dispositivo de la Cruz es un cambio de paradigma verdadero donde el UX viene primero y aparecen nuevos tipos de profesionales: Arquitectos de información, diseñadores de interacción y estrategas de contenido. Software móvil es a menudo diseñado y aprobado a través de maquetas y luego simplemente implementado, mostrando datos en una posición determinada y en un formato determinado.

Pero se nota que la tecnología no debería dictar cómo lograr que su empresa necesita; tecnología debe ser sólo un medio para alcanzar sus objetivos de desarrollo inmediato. Puede sonar como una declaración bastante obvia, previsible, pero — seamos honestos: ¿cuántas veces has visto esta regla violada? ¿Has escuchado alguna vez sobre el antipatrón "Pet tecnología"? Usted puede leer sobre él en bit.ly/OvJdx0. A veces sucede que una determinada tecnología es recogida por ninguna razón convincente u orientada al negocio. Asimismo, a veces sucede que una determinada tecnología es recogida para la tarea equivocada — o, quizá peor aún, su uso lleva a un enfoque menos que ideal para una tarea determinada.

En un hoy cambiante mundo móvil, poner cualquier tecnología por delante de UX y consideraciones estratégicas es un riesgo enorme. En desarrollo móvil, casos de uso y visión vienen primero, y la tecnología es sólo un medio — como siempre debe ser!

Ahora me concentraré en el tema principal de esta columna, jQuery Mobile, cuyos puntos fuertes y débiles a menudo son medidos en una escala que cuenta lo que puede hacer en el lugar de lo que quieres hacer. Puedes leer más sobre jQuery Mobile en jquerymobile.org.

jQuery Mobile en breve

En general, la definición más adecuada para jQuery Mobile proviene de su sitio Web. Explica que jQuery Mobile es un sistema de interfaz de usuario basada en HTML5 para todas las plataformas de dispositivo móvil popular. Además, dice el jQuery código móvil está construido con "mejora progresiva" en mente, y resultados deben tener un diseño fácilmente "tema-able". Además, jQuery Mobile está construido sobre la base sólida de jQuery y jQuery UI. Sin embargo, muchos desarrolladores profesionales asumen que jQuery Mobile es una versión liviana de jQuery optimizado para las limitaciones de los dispositivos móviles típicos.

En verdad, lo que es en la página principal del sitio móvil de jQuery es precisamente la verdadera esencia de la biblioteca. jQuery Mobile es un marco que es fácil de usar para muchos desarrolladores — o, al menos, resulta ser mucho más fácil de usar que la mayoría de los otros marcos ahi para la construcción de soluciones móviles. Es un marco que ayuda con la interfaz de usuario de vistas que funcionan bien cuando aparece en dispositivos móviles y táctil. No sólo son fáciles de crear vistas basadas en el tacto (y posteriormente orientada hacia el móvil), pero también son fáciles de unir para formar un sistema de navegación con transiciones y efectos. Vistas creadas aprovechando las instalaciones de jQuery Mobile trabajan bien con los smartphones y en cierta medida también con dispositivos más antiguos, conduce a la pregunta clave: ¿Es realmente suficiente para su desarrollo Web móvil?

¿Dónde está el móvil en jQuery Mobile?

Personalmente, he utilizado jQuery Mobile para crear la interfaz de usuario de una aplicación basada en Web destinado a los usuarios de ordenador portátil o tablet: no hay ningún tipo de teléfonos! — y funcionó maravillosamente. Fue en este momento que imaginó primero que algunos tipo de estrecha relación entre jQuery UI y jQuery Mobile.

Como sorprendente que parezca, vamos a subir el punto: ¿Es un marco de desarrollo móvil de jQuery Mobile realmente?

Basado en la descripción de la tecnología jquerymobile.org, debería considerar jQuery Mobile como herramienta primaria para la interfaz de usuario de front-ends basados en el tacto. Un front-end basado en el toque es probablemente un dispositivo móvil (es decir, tablet o smartphone), pero desarrollo Web móvil tiene facetas mucho más que sólo la parte delantera.

Solo utilizando jQuery Mobile para organizar algunos IU que encaja perfectamente en el pequeño mundo inmobiliario de la pantalla de un dispositivo puede ser un enfoque que funciona en situaciones simples. Si se toma como un enfoque global, integral, sin embargo, puede ser un poco simplista.

Vamos a revisar lo que puede encontrar en una solución móvil que va más allá de las capacidades de jQuery Mobile. Ante todo, debe tener una visión clara del sitio vas a compilar, expresado a través de una gran selección de casos de uso, un flujo de datos bien definidos entre servidor y cliente, y, más importante, una lista de los móviles perfiles le va a servir. Un perfil móvil es un término genérico para indicar las diferentes familias de su sitio pretende servir de dispositivos: smartphones, tabletas, ordenadores portátiles, smart TV y dispositivos similares construidos en los últimos años, más o menos, o cualquier celulares que pueden conectarse a Internet.

No cada sitio móvil debe soportar múltiples perfiles de dispositivos, aunque esta necesidad se está convirtiendo en cada vez más estrictas y más urgente. Admite múltiples perfiles de dispositivo significa abordar diferentes puntos de vista y ajustar dinámicamente la respuesta de destino basándose en las capacidades y características del dispositivo. En mi última columna (msdn.microsoft.com/magazine/jj618291) presenté un enfoque al multi-serving basado en un repositorio de descripción de dispositivo de servidor como archivo de recursos Universal Wireless o WURFL (ver wurfl.sourceforge.net). ¿Qué tipo de apoyo de out-of-box sacas de jQuery Mobile en este sentido?

jQuery Mobile y diseño sensible

Diseño sensible es capacidad de marco proporciona una versión a medida de una página para dispositivos específicos. Anteriormente en este artículo, citando el sitio jquerymobile.org, menciona progressive enhancement como uno de los pilares de jQuery Mobile framework. Mejoramiento progresivo es un patrón de diseño de la Web de abajo hacia arriba con el que crear páginas mejora progresivamente un núcleo que funciona sobre cualquier navegador. Mejoramiento progresivo es lo contrario de "degradación agraciada", que opta por un enfoque de arriba hacia abajo: Definir la mejor experiencia y degradar como gracia, como se puede hacer si el navegador pierde algunas capacidades requeridas. Progressive enhancement puede considerarse un patrón para hacer tu experiencia Web más sensible.

Tenga en cuenta que haciendo una experiencia Web más sensibles pueden incluir ofrecer algún apoyo móvil ad hoc, pero siendo sensible en el navegador no significa necesariamente centrándose en clientes móviles.

Por lo tanto utilizando jQuery Mobile, no se preocupado de detectar las capacidades del dispositivo, como la biblioteca garantiza que la salida también trabajaría en los exploradores de nivel inferior. Vamos a revisar el núcleo de la aplicación móvil de jQuery del patrón de mejoramiento progresivo.

Partición de navegador

La biblioteca móvil de jQuery soporta tres perfiles de navegador — denominado A, B y C, donde exploradores de un grado reciben la marca más mejorada de la biblioteca puede servir y exploradores de C-grado reciben sólo llano HTML contenido con ninguna características adicionales, tales como estilos y AJAX. Cada perfil se caracteriza por una lista de capacidades que los navegadores proporcionan con respecto a las necesidades de la biblioteca. Por ejemplo, el apoyo a las consultas de medios CSS es una capacidad clave en jQuery Mobile, y es un requisito fundamental para un navegador para caer en el grupo A. Además de consultas de medios CSS, navegadores de categoría soporte JavaScript, AJAX y completa manipulación de Document Object Model (DOM). Categoría navegadores son donde la biblioteca funciona en toda su plenitud, y la lista de navegadores de categoría se actualiza con frecuencia.

La diferencia básica entre los navegadores de grado A y grado B es la falta de soporte para AJAX. En los navegadores de grado B, jQuery Mobile deja de usar AJAX para peticiones y transiciones de página. Por lo que podría esperar para poder llevar a cabo operaciones correctamente, pero con una experiencia menos agradable.

Finalmente, los exploradores de C-grado son en su mayoría navegadores antiguos con ningún soporte para consultas de medios de comunicación y soporte limitado para manipulación de JavaScript, CSS y DOM. En navegadores de grado C, ninguna manipulación DOM estándar se aplica a elementos de página y HTML normal sirve. La matriz más actualizada de los navegadores y grados está disponible en jquerymobile.com/gbs. Figura 1 y figura 2 mostrar la representación de la misma página en exploradores de C-grado y categoría.

Página de ejemplo de la figura 1 en un dispositivo Android de categoría

Página de ejemplo de la figura 2 en un dispositivo Android de grado c

Razonablemente, la biblioteca móvil de jQuery no está optimizada para navegadores de C-grado y grado B. Como figura 2 , los usuarios aún pueden recibir un buen tratamiento, pero, más importante, no tenemos control sobre que se muestra. El código HTML en figura 1 y figura 2 es bastante simple y no contiene más que una lista desordenada. ¿Qué pasa si tienes una página mucho más sofisticada con imágenes, ventanas emergentes, bloques de texto de varios botones y formato y longitud?

jQuery Mobile debe sus bonitos gráficos (como se muestra en figura 1) intensivo manipulación DOM y las características de AJAX. Fuera del ámbito de los navegadores de la categoría, jQuery Mobile sólo garantiza que una página es visible. Usted puede encontrar más simple manipulación DOM y transiciones más abruptas (no AJAX), o puede haber un respaldo completo en HTML normal. Independientemente del hecho de que jQuery Mobile puede servir hasta tres vistas distintas de la misma página, los restos HTML básicos el mismo y las reglas de transformación son fijos y fuera de su control.

La conclusión es que si usted necesita apoyar más que los navegadores de la categoría, probablemente usted estaría mejor caída de jQuery Mobile browser clasificación y presentar su propia lógica para manejar perfiles de navegador y vistas ad hoc (ver figura 3).

Figura 3 dirigidos a diferentes grados de navegadores**

El código de ejemplo en la columna del mes pasado proporciona un ejemplo de este enfoque.

Para resumir, jQuery Mobile es esencialmente un marco de interfaz de usuario que hace un gran trabajo de lo que le permite utilizar elementos HTML familiares al crear una vista. A continuación, transforma elementos HTML llanos en objetos semánticamente equivalentes que funcionan bien en un entorno basado en el toque y encajar bien en tamaños de pantalla pequeña. jQuery Mobile implementa el modelo de mejoramiento progresivo y no deja ningún navegador. Sin embargo, esto no significa que adoptando simplemente jQuery Mobile usted puede abordar eficazmente el problema de la fragmentación de dispositivo — la gran cantidad de significativamente diferentes navegadores móviles y dispositivos. A veces es obligatorio que ofrecen vistas completamente diferentes a los perfiles de clase diferente e incluso asegurar que particionar navegadores según lógica diferente. jQuery Mobile abraza la lógica de diseño de Web sensible y se centra en las consultas de medios CSS. Como se explica en mi columna de julio de 2012 (msdn.microsoft.com/magazine/jj190798), consultas de medios CSS son ideales usar con dispositivos ricos (tabletas, ordenadores portátiles, televisores inteligentes y quizás smartphones) donde todo lo que quieres hacer es reposicionar y ocultar elementos que no se pueden mostrar. Consultas de medios de comunicación requieren navegadores ricos y no son una característica específica del móvil.

Sugiero que antes de que abrazan jQuery Mobile, pida a la siguiente pregunta: ¿Es correcto para designar algunos smartphones (o dispositivos análogos) como punto de entrada para realmente disfrutar de su sitio? En caso afirmativo, jQuery Mobile es más que aceptable para usted. De lo contrario, llevarlo más allá y explorar otras opciones.

Dino Esposito es el autor de "Arquitectura móvil soluciones para la empresa" (Microsoft Press, 2012) y "programación ASP.NET MVC 3" (Microsoft Press, 2011) y coautor de ".NET de Microsoft: Diseñar la arquitectura de aplicaciones para la empresa"(Microsoft Press, 2008). En Italia, Esposito es un orador frecuente en eventos de la industria en todo el mundo. Seguirlo en Twitter en twitter.com/despos.

Gracias al siguiente experto técnico por su ayuda en la revisión de este artículo: Christopher Bennage