Una introducción simple al marco móvil jQuery

Cuando el mundo descubrió la web, las cosas eran aburridas y sin vida. Por ejemplo, la creación de una aplicación simple de pasar el ratón por encima de la imagen requería varias líneas de código y no podía funcionar en algunas plataformas.

Pero las cosas mejoraron cuando se introdujo jQuery, ya que permitió a los desarrolladores crear impresionantes aplicaciones JavaScript que podían ejecutarse cómodamente en varios lugares.

Después de eso, el equipo de jQuery llevó las cosas a un nivel superior al desarrollar la interfaz de usuario de jQuery, que hizo posible que los desarrolladores crearan aplicaciones web atractivas en el núcleo de jQuery existente.

Mejor aún, en 2010 se introdujo jQuery Mobile, lo que ha hecho que el desarrollo sea mucho mejor y más eficiente.

Creado con un sesgo hacia los teléfonos móviles, jQuery Mobile es un marco eficaz y unificado que ofrece componentes de interfaz de usuario, transiciones de datos y otras características interesantes.

jQuery Mobile aprovecha las funcionalidades de HTML5, CSS3, jQuery, así como la interfaz de usuario de jQuery en un solo marco que permite a los desarrolladores lograr consistencia en diferentes plataformas y dispositivos.

Funciones básicas de jQuery Mobile

1. Gran sencillez y facilidad de uso

El marco de jQuery Mobile es sencillo y flexible. Dado que la interfaz de configuración del marco se basa en el marcado, los desarrolladores pueden crear fácilmente sus interfaces de aplicación básicas completas en HTML, con un código JavaScript mínimo o sin él.

Las tareas complejas que requieren varias líneas de código JavaScript, como las llamadas Ajax y la manipulación DOM, se pueden realizar fácilmente con pocas líneas de código en jQuery móvil.

Por ejemplo, si queremos que un usuario haga clic y oculte algún texto después de que se haya creado una página en el DOM, pero antes de que se complete la mejora, simplemente podemos usar el controlador de eventos pagecreate . Esto es algo que requeriría varias líneas de código para lograrlo sin jQuery Mobile.

$(document).on("pagecreate","#mypagetest",function(){ $("span").on("click",function(){ $(this).hide(); }); });

En el código anterior, el parámetro #mypagetest se refiere al id de la página que especifica el evento de la página. Además, el método on () se usa para adjuntar los controladores de eventos.

Además, su simplicidad permite a los desarrolladores dividir sus aplicaciones en varias páginas. Con el marco, los desarrolladores pueden "escribir menos y hacer más".

2. Mejora progresiva y elegante degradación

La mejora progresiva y la degradación elegante son características clave que impulsan la agilidad de jQuery Mobile. Le permiten admitir dispositivos de gama alta y menos capaces (por ejemplo, aquellos que carecen de compatibilidad con JavaScript).

El marco permite a los desarrolladores crear aplicaciones a las que se puede acceder mediante la mayor cantidad de navegadores y dispositivos, ya sea Internet Explorer 6 o el Android o iPhone más nuevo.

Mobile jQuery también brinda a los desarrolladores la capacidad de renderizar contenido básico (como se construyó) en dispositivos básicos. Y las plataformas y navegadores más sofisticados se enriquecerán cada vez más con el uso de JavaScript y CSS adicionales con enlaces externos.

3. Soporte para entradas fáciles de usar

Durante el desarrollo móvil de jQuery, los desarrolladores pueden incluir una API sencilla para admitir funcionalidades de entrada de usuario basadas en el enfoque táctil, del mouse y del cursor. También se incluyen en el marco varios tipos de elementos de formulario fáciles de diseñar y fáciles de tocar.

Los ejemplos incluyen casillas de verificación y equipos de radio, control deslizante, filtrado de búsqueda y elementos de selección de menú. Además, cada uno de los elementos del formulario incluye una versión "mini" alternativa, que se puede incorporar fácilmente a las páginas web móviles.

Por ejemplo, aquí se explica cómo crear un botón de casilla de verificación con jQuery Mobile. Observe que se agrega el atributo data-mini = "true" para crear una versión mini del botón.

  Click here to agree 

Más allá de todo esto, para garantizar que la experiencia del usuario esté optimizada en dispositivos móviles, el marco tiene un rico sistema de navegación impulsado por Ajax que permite que las transiciones de página animadas se realicen sin problemas.

Con los eventos de transición de jQuery Mobile, puede animar la transición de la página activa actual a la nueva página.

Por ejemplo, puede utilizar el evento pagebeforeshow (activado en la página "a") y el evento pagebeforeshide (activado en la página "from") al pasar de una página a la siguiente. Ambos eventos se activan antes de que comience la animación de transición.

Veamos cómo se pueden aplicar:

$(document).on("pagebeforeshow","#myfirstpage",function(){ // When entering myfirstpage alert("myfirstpage is about to appear"); }); $(document).on("pagebeforehide","#myfirstpage",function(){ // When leaving myfirstpage alert("myfirstpage is about to disappear"); });

4. Accesibilidad

Además de sus capacidades multiplataforma, jQuery para dispositivos móvilesfue creado con una fuerte consideración por la accesibilidad.

El marco viene con soporte para Accessible Rich Internet Applications (WAI-ARIA) para ayudar a las personas discapacitadas que usan lectores de pantalla y otras tecnologías de asistencia a acceder fácilmente a las páginas web.

5. Tamaño ligero

El tamaño liviano de Mobile jQuery (alrededor de 40 KB cuando se minifica) se suma a su rapidez. Además, el hecho de que emplea dependencias de imagen mínimas también acelera enormemente sus capacidades.

6. Widgets de interfaz de usuario y temas

jQuery Mobile tiene un sistema de temas incorporado que permite a los desarrolladores determinar su propio estilo de aplicación. Con jQuery Mobile Themeroller, los desarrolladores pueden personalizar eficazmente sus aplicaciones para que se ajusten a su color, gustos y preferencias.

El marco también viene con varios widgets innovadores y multiplataforma que permiten a los desarrolladores crear aplicaciones mejor personalizadas.

Algunos de los widgets disponibles son barras de herramientas permanentes, botones, cuadros de diálogo y el widget emergente de uso común.

7. Capacidad de respuesta

La capacidad de respuesta completa del marco permite que las mismas bases de código subyacentes se adapten cómodamente a diferentes tipos de pantallas, desde dispositivos móviles hasta pantallas del tamaño de un escritorio.

Estructura de página básica de jQuery Mobile

La estructura de jQuery Mobile tiene todos los componentes y atributos de la interfaz de usuario necesarios para crear sitios web y aplicaciones web móviles con muchas funciones y fáciles de usar, ya sean básicos o avanzados.

Puede usar jQuery mobile para crear páginas web, varios tipos de vistas de lista, barras de herramientas, una amplia gama de elementos y botones de formulario, cuadros de diálogo y otras funcionalidades.

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let's get a feel for how jQuery mobile development code looks.

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

Here is the code:

   jQuery Mobile Example 

fCC jQuery Mobile Sample

COVID-19 Work-From-Home Team Management Mistakes To Avoid

    • Using Unnecessary Tools
    • Foregoing Team Evaluations
    • Micromanaging
    • Hiring Too Quickly
    • Not Having Contingencies

    alfrickopidi.com, 2020 - Copyright

    Here is the output when the above mobile jQuery lines of code are opened on a browser:

    Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

    As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

    • Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
    • Files from the jQuery repository (jquery-1.11.1.min.js)
    • Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)

    These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

    Importantly, including the "viewport" metatag during jQuery mobile developmentinstructs devices that the page width and the device screen width are equivalent (width=device-width).

    The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

    A closer examination of the code reveals some strange "data-"attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

    The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

    Conclusion

    jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

    The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

    Will you give it a try?