Advertisement
  1. Code
  2. Mobile Web Apps

Introducción a iScroll

by
Read Time:8 minsLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

En este tutorial, te enseñaré cómo usar iScroll 4 para crear un sitio web móvil simple. El sitio que crearemos tendrá un encabezado y un pie de página fijo con contenido que se podrá desplazar fácilmente entre estos elementos. Como veremos, lograr este efecto tanto en Android como en iOS no es tan fácil como podrías pensar.

Las aplicaciones basadas en la web son un gran lugar para que los desarrolladores de aplicaciones para el usuario comiencen su viaje hacia el mundo de la creación de aplicaciones móviles. Con tu conocimiento existente de HTML, CSS y Javascript, puedes crear aplicaciones que se parecen mucho a las creadas con un SDK de una plataforma nativa. Aún mejor, tus aplicaciones serán multi-plataforma y funcionarán en cualquier dispositivo móvil con un navegador moderno.

Por supuesto, existen algunas advertencias al desarrollar para navegadores móviles. Algunos pueden ser obvios, como la imposibilidad de acceder a la cámara del dispositivo (al menos por ahora). Otros pueden no ser tan obvios, como la gran cantidad de navegadores móviles que ya están en uso (la variedad es alucinante).

Si bien hay muchos frameworks (por ejemplo, jQuery Mobile, SenchaTouch, etc.) que pueden ayudarte a comenzar con las aplicaciones web móviles, por ahora no voy a usar ninguno de ellos. En cambio, me centraré en JavaScript puro con una biblioteca útil: iScroll 4.

iScroll resuelve un problema en los navegadores móviles basados en WebKit que se encuentran tanto en Android como en iOS. Ambos navegadores no ofrecen soporte para contenido de encabezado y pie de página absolutamente posicionado con contenido de desplazamiento colocado en el medio de forma predeterminada. Todo el documento HTML se desplaza independientemente de cualquier CSS que puedas tener para lograr el efecto contrario. Debido a que muchas aplicaciones móviles nativas están diseñadas con una barra de navegación fija en la parte superior de la pantalla y una barra de herramientas o barra de pestañas fija en la parte inferior de la pantalla, esta falta de soporte de contenido fijo en los navegadores WebKit es realmente un gran problema. No te preocupes: En este tutorial, te mostraré cómo lograr este diseño con iScroll.


Paso 1: Diseño HTML básico

Vamos a configurar un diseño de aplicación web básico. Esta será una página bastante básica y de ninguna manera un marcado de calidad de producción, pero para esta demostración funcionará muy bien.

Por lo general, comienzo la mayoría de las aplicaciones web móviles (me referiré a estas como aplicaciones Webile), con la misma plantilla básica (asumiendo que no estoy usando HTML5 boilerplate u otro framework). Las únicas metaetiquetas que utilizo inicialmente son para configurar las opciones de escala en la ventana gráfica. También agrego un pequeño 'reinicio' a los elementos que sé que los necesito. Rara vez utilizo un restablecimiento de CSS para Webile Apps, ya que generalmente es excesivo para un dispositivo móvil y una vez que empiezas a optimizar, menos es más.


Paso 2: CSS básico

Ahora podemos agregar algo de CSS básico para obtener un diseño agradable para el encabezado y el pie de página.

Ahora deberías tener algo parecido a esto. Ten en cuenta que le dimos al encabezado y al pie de página un z-index, esto entrará en juego en un momento.


Paso 3: Contenido desplazable

Ahora es el momento de agregar el contenido que nos gustaría que se pudiera desplazar. He usado una lista simple, pero el contenido puede ser lo que quieras. Necesitamos asegurarnos de que todo lo que queremos desplazar esté envuelto dentro de un contenedor con un ID, que usaremos para conectarnos a iScroll. Estará dentro del DIV con el ID del contenedor que configuramos en el Paso 1.

Y luego demos a la lista un buen CSS para que se vea un poco menos aburrido. Además, vamos a colocar el contenedor de manera absoluta con un z-index más bajo que el encabezado y el pie de página.

Como puedes ver, le hemos dado al contenedor un overflow:auto que, en un navegador, nos permitiría desplazar el contenedor, pero si registras tu dispositivo...

No tenemos la opción de desplazarnos. Este es el problema para el que se hizo iScroll, así que vamos a obtenerlo para que nos ayude.

Nota: Si deseas deshacerte de la barra de la URL en la parte superior de tu aplicación (SOLO iOS), puedes agregar la siguiente META ETIQUETA.

Ahora, cuando/si un usuario agrega la aplicación a su pantalla de inicio, puede iniciarla desde el sistema operativo como cualquier otra aplicación, y la barra de la URL no se mostrará.

Un enfoque alternativo para eliminar la barra de la URL es el método discutido por Mark Hammonds en el tutorial Aplicaciones web de pantalla completa. Es un buen método que usa JavaScript para ocultar la barra de direcciones automáticamente. Por ahora, voy a usar el método de la meta etiqueta porque es agradable y limpio y elimina la barra de botones inferior además de la barra de direcciones.


Paso 4: Obteniendo iScroll en tu proyecto

Dirígete a la página de inicio de iScroll y descarga la fuente. iScroll 4 es la última versión al momento de escribir este artículo y la versión que usaremos, así que asegúrate de descargarla. Descomprime la descarga del archivo y toma el archivo iscroll-lite.js. Como solo usamos la funcionalidad de desplazamiento básica, esto es todo lo que vamos a necesitar. Suelta el archivo en el directorio que desees. Por ahora, lo voy a colocar en la raíz del proyecto.


Paso 5: Inicializando iScroll

Primero, importamos el archivo iscroll-lite.js a nuestro proyecto. Impórtalo en la parte superior (en el <head>) o en la parte inferior (justo antes del </body>) del HTML. Mi preferencia es importarlo en la parte inferior.

A continuación, configuramos una función que inicia iScroll y se conecta al contenedor. Finalmente, agregamos un detector de eventos al documento para esperar a que se cargue el contenido antes de activar nuestra función para activar iScroll.


Paso 6: Producto final

Si revisas tu dispositivo ahora, deberías tener una hermosa lista desplazable con un encabezado y pie de página fijos.


Paso 7: Revisión del código

Aquí está el código completo que hemos escrito utilizado en este consejo.


Una palabra de advertencia

Como hemos visto en este tutorial, iScroll resuelve un problema en algunos navegadores móviles basados en webkit con posicionamiento de contenido fijo, pero debe tenerse en cuenta que también existen algunas trampas potenciales. iScroll no es compatible con todos los navegadores móviles disponibles actualmente. Por ejemplo, no hay soporte para teléfonos con Windows 7. Entonces, por ahora, esto es más o menos una solución de WebKit para Android/iOS, y aunque ofrece una solución allí, es posible que desees investigar más sobre cómo funciona iScroll "debajo del capó" antes de implementarlo en toda tu aplicación.

¿Más tutoriales de iScroll?

Solo hemos mencionado la funcionalidad que iScroll puede ofrecer para desarrollar aplicaciones web móviles. Además de lo que demostré en este tutorial, iScroll también se puede usar para "Tirar para actualizar", "Desplazamiento horizontal" (para carruseles), "Pellizcar y acercar" (en contenido fijo) y "Ajustar a elemento".

Si deseas ver tutoriales adicionales sobre este tema, deja un comentario a continuación para informarnos.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.