Tutorial: creación de una página básica en jQuery Mobile Framework (Parte 3)
12/10/2017

Tutorial: creación de una página básica en jQuery Mobile Framework (Parte 3)

Programación y Diseño Web

Recientemente hemos visto un poco en que consiste jQuery mobile, tanto a nivel técnico, cómo añadirlo a nuestra página web y realizar una navegación simple con ello. Pero me gustaría realizar una tercera entrega de este tutorial porqué puede que haya cierta confusión con jQuery (el normal, por así llamarlo) respecto su versión mobile. Si no has leído las otras dos partes te las dejo en los siguiente enlaces:

En estos enlaces, recordemos, tenemos la descarga del framework y algo de código de etiquetas para que nos hagamos una idea de cómo funciona y poder avanzar poco a poco. De modo que vamos a hacer algunas reflexiones sobre su funcionamiento de forma más técnica.

Análisis de jQuery

Bien, hasta ahora estamos acostumbrados a que una interfaz web se represente como una página estática (o dinámica) en la que visualizamos todos los elementos de esa sección sin ninguna paginación. Con jQuery no es distinto, sobretodo en entorno de escritorio o portátil: se usa mayormente para añadir responsiveness o efectos bonitos para el usuario. Un ejemplo puede ser pasar por encima de una imagen el cursor y que se muestre cierta información, ver una previsualización del contenido, etc. Nada que con otros frameworks no podamos lograr. Pero claro, se nos presentan las plataformas móviles dedicadas al smartphone y se nos presenta un cambio en el medio. Ya no tenemos pantallas grandes y con mucho espacio, nuestro terreno se ha reducido a unas pocas pulgadas, y jQuery propone ofrecer una solución más cercana a una interfaz de esa naturaleza.

Observemos la web de jQuery mobile y veremos que tiene un feeling distinto (si estás entrando desde un ordenador). Es por eso que debemos comprender la diferencia entre las dos versiones del framework. Pero tienen un punto en común y se trata del lenguaje de programación JavaScript. Este lenguaje, como ya he mencionado en muchas ocasiones, es muy potente y se usa para muchos fines: desde aplicaciones de escritorio, apps móviles y lógica de servidor con NodeJS. Con jQuery no vais a hacer aplicaciones móviles, de hecho no es un framework para escribir una gran lógica de negocio. Únicamente vais a construir el exterior para que todo el mundo piense que se trata de una aplicación móvil a través de navegador, cosa que cuando se trata de un negocio con pocos recursos es perfecto ya que con poco esfuerzo tenéis algo con cara y ojos.

Observad la siguiente imagen y veréis una interfaz que os sonará si habéis usado apps como Just Eat o Deliveroo:

"Imagen 1"

Podemos apreciar que disponemos de unos botones que nos llevan a la siguiente sección dedicada a la opción correspondiente, para luego encontramos con lo siguiente:

"Imagen 2"

Esto es una navegación muy común y no estamos usando ni Apache Cordova ni nada por el estilo que requiere de una instalación de algún IDE si queréis trabajar como dios manda, distintos directorios donde separar el modelo vista, controlador, y otros detalles comunes cuando haces esto. Para nada, en este caso lo único que necesitas son los ficheros html, enlazar jQuery, ya sea descargando con con CDN en el head de vuestra web, y tendremos una web lista para ser visualizada por el teléfono.

Una de las contrapartidas a todo lo mencionado

No todo iba a ser un camino de rosas, ni mucho menos, y es que nada más empezar nos encontramos con el primer inconveniente, visual eso si, y es que si entramos desde el PC o Mac a estas webs, jQuery no interpreta que estamos accediendo desde un dispositivo de escritorio, por lo que veremos lo mismo que en el dispositivo móvil…pero más feo. Me explico: los elementos tenderán a ir de un extremo a otro de la pantalla, en horizontal) y no será un aspecto muy bien acabado para lo que estamos tratando de hacer. ¿Cómo se soluciona? Debemos, además de todo lo anterior, establecer una norma en nuestro html de que si se accede desde un desktop device, el servidor cargue la versión de escritorio, cosa que con el uso de AngularJS, otro framework para realizar aplicaciones web, no sería necesario. ¿Recomiendo el uso, entonces, de jQuery? Recomiendo su aprendizaje, sobretodo si estáis empezando. Os dará una buena base para comprender como funcionan las páginas webs modernas que quieren ser adaptadas a los dispositivos móviles.

Y bien, esto es todo para esta pequeña serie de tres partes sobre jQuery. Esta última he querido hacerla más reflexiva ya que he visto que podía causar confusión ver el mismo nombre para dos fines distintos. Mi recomendación más personal es que aprendáis y dediquéis horas a JavaScript, ya sea con jQuery mobile, Angular o Apache Cordova, eso es indiferente. Os aseguro que estaréis invirtiendo tiempo en una tecnología muy extendida en el mundo laboral actual. Tal es el tema que incluso bancos se están modernizando a JavaScript para hacer los ampliativos que sus empleados usarán para gestionar las peticiones de los clientes. 

Curso relacionado: Curso Superior de Creación y Desarrollo de Páginas Web

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Mejores plataformas para crear un ecommerce
21/05/2020
Carlos Yañez

Mejores plataformas para crear un ecommerce

En el post de hoy veremos cuales son las plataformas de ecommerce más adecuadas para crear una tienda on-line para que, si estás interesado, puedas desarrollar tu pr...

Consejos para detectar un ciberataque
21/05/2020
Rubén Bellido

Consejos para detectar un ciberataque

Estamos en un momento de pleno auge digital, es por ello que también estamos en un punto que los ciberataques van en aumento exponencialmente y así lo demuestran dif...

claves web exito
09/05/2020
Carlos Yañez

6 consejos para hacer una web exitosa

En el post de hoy te daremos las claves para que tu web sea realmente exitosa. Veamos en qué apoyarnos para conseguir el éxito.