Aplicaciones web móvil PDF

Preview

Summary

Download Aplicaciones web móvil PDF

Description

Aplicaciones web móvil

Marketing Móvil

Aplicaciones web móvil Contenidos optimizados para móviles: aplicaciones nativas, aplicaciones web para móviles y aplicaciones híbridas Entramos en otro tema apasionante: el de las aplicaciones. Comenzamos con los conceptos que necesitamos entender, pero antes de seguir debemos aclarar que, cada vez que aparezca el término app, nos estaremos refiriendo a aplicaciones. Las aplicaciones nativas son aquellas que deben ser descargadas de alguna tienda de aplicaciones, como puede ser App Store para Apple, Google Play para Android o Windows Mobile Marketplace para Windows Phone, entre las más populares y usuales. Los lenguajes de programación varían según la plataforma: las apps para iOS se desarrollan con lenguaje Objective-C, para Android se desarrollan con lenguaje Java y en Windows Phone se desarrollan en .Net. Las aplicaciones web para móviles son aquellas aplicaciones a las que accedes desde un navegador móvil (Safari, Firefox, Chrome, etc.). A continuación, se muestran ejemplos del acceso a Twitter o a Aerolíneas Argentinas.

1

Figura 1: Ejemplos de aplicaciones web móvil

Fuente: elaboración propia a base de captura de pantalla de Emirates (2016) y Aerolíneas móvil (2015).

Las aplicaciones híbridas son aplicaciones que pueden ser descargadas de las tiendas de aplicaciones móviles, pero cuyo contenido es parcial o totalmente descargado a través de la web. Por ejemplo, Bloomberg, Instagram o la App Store de Amazon son aplicaciones híbridas que se nutren de la conectividad. Aplicaciones nativas Como dijimos antes, al ser descargadas de tiendas, ofrecen algunos modelos de negocio, los cuales habrá que evaluar de acuerdo con las condiciones de la marca, el contexto y la competencia:  





Aplicaciones de pago: se paga un valor por la descarga. Aplicaciones gratuitas: los usuarios hacen la descarga sin costos. La técnica conocida como in-app marketing se trata justamente de hacer que la gente hable de la marca y entre en contacto. Aplicaciones gratuitas con anuncios o aplicación de pago libre de anuncios: se ofrece en ambos casos la misma aplicación, pero, si el usuario lo hizo en forma gratuita, asume el “costo” de ver anuncios (en plataformas como AdMob, de Google, se puede gestionar la estrategia de anuncios de nuestra aplicación). Aplicaciones gratuitas y pago por contenidos adicionales: es un modelo usado en la industria de los videojuegos que se utiliza en varias aplicaciones que requieren hacer un upgrade o pase a un nivel superior

2

mediante un pago que libera más funcionalidades u opciones. Otra opción es pagar por adicionales para tener más opciones en vistas, funciones, herramientas, etcétera.

Figura 2: Descargas por plataforma de tiendas de app

Fuente: Yeeply, 2014, https://goo.gl/pQ1tY2

Sobre las aplicaciones nativas, tenemos varios aspectos para destacar:

3

  

 



Requieren actualizaciones frecuentes. Se abandona el uso o se desinstala si al usuario no le crea una necesidad de uso. El éxito de muchas de las aplicaciones se basa en buscar una experiencia exploratoria de las características de los dispositivos, como la cámara, la ubicación a través de GPS, el micrófono, la agenda, etcétera. El usuario busca controles simples e intuitivos, contenido breve, elegir entre opciones útiles para cubrir una necesidad. Son costosas en su desarrollo integral, ya que el código de cliente no es reutilizable para las distintas plataformas (por ejemplo, si se toma un iPhone 3G y se intenta bajar aplicaciones que están hechas para iPhone 4G en adelante, o el caso de Android, que lleva más 5 versiones con sus subversiones para diferentes marcas y modelos). Por ello, se requiere el estudio previo del público al cual apuntará esa inversión. Presentan problemas de fragmentación en cuanto a que se requiere tener en cuenta las diversas versiones de los sistemas.

Aplicaciones web para móviles Estas aplicaciones consisten en presentar los contenidos adaptados a las características de los navegadores móviles y suelen hacer uso de nuevas tecnologías, como HTML5 y CSS3, además de otorgar apariencia y funcionalidad similar a las aplicaciones nativas. Los desarrolladores web deben recorrer un camino más corto y menos costoso al programar aplicaciones web móviles que al programar aplicaciones nativas. Como vimos en la lectura anterior, con un diseño adaptado a distintas resoluciones es suficiente para que la aplicación sea visualizada correctamente en todos los navegadores móviles; esto reduce mucho el problema de fragmentación que vimos recién para las aplicaciones nativas. Sin embargo, es lógico que, según el público que tenemos, se diseñe una versión de la aplicación móvil para navegadores móviles más potentes, como Safari y Chrome, y otra para navegadores menos potentes, como BlackBerry. Figura 3: Ejemplo comparativo de Twitter entre la app nativa y la web móvil

4

APP Nativa

APP web Móvil

Fuente: elaboración propia a base de captura de pantalla de Twitter (s. f.) y Twitter App (s. f.).

Si eres usuario de Twitter, te proponemos que revises el ejemplo anterior y compruebes las coincidencias funcionales que tiene una y otra versión de las aplicaciones, ya que resulta interesante observar, además de lo funcional, lo relativo al diseño visual. Aplicaciones híbridas Al punto medio del mundo de las aplicaciones podríamos encontrarlo en las aplicaciones híbridas que buscan aprovechar lo mejor las nativas y de la de web móvil. Las aplicaciones híbridas son aplicaciones que pueden ser descargadas de las tiendas de aplicaciones móviles, pero cuyo contenido es parcial o totalmente descargado de la web. Están desarrolladas mediante tecnologías web a las que se les coloca un “envoltorio” para que puedan descargarse como aplicaciones nativas. Usan los lenguajes de las webs móviles (HTML, Javascript y CSS) y, pese a ello, permiten agrupar códigos y distribuirlas en las tiendas. La mayoría es de uso gratuito y tiene menor costo de desarrollo que las apps nativas. Se pueden ejecutar en múltiples dispositivos y distribuirse en forma masiva, aunque el desarrollo de programación es algo complicado.   

Facebook es el mejor ejemplo de aplicación híbrida desde el inicio. Bloomberg ha incursionado en apps híbridas para mejorar sus tiempos de puesta en mercado respecto de las actualizaciones que lanza. Plataformas como Phone Gap, Appcelerator Titanium o Cordova ponen a disposición herramientas para desarrollar aplicaciones híbridas.

5

Viabilidad de las alternativas Son diferentes las visiones que podemos tener si decimos que los usuarios no consumen en forma exclusiva aplicaciones nativas, web para móviles o híbridas. La cuestión es si toda empresa puede hacer frente a toda la gama de opciones para tener más presencia (algo que parece complejo si el presupuesto no abunda). Para ello, podemos hacernos los siguientes planteos: Aprovechamiento de dispositivo: buscamos usar todas las capacidades de los dispositivos, como por ejemplo, el GPS, la cámara, la agenda, etcétera. Si vamos por todo, entonces, las aplicaciones nativas e híbridas son nuestra mejor alternativa. Velocidad: las aplicaciones nativas e híbridas son más rápidas que las webs móviles, pero cuidado con no actualizarlas porque las primeras son candidatas a desinstalarse si no funcionan según las expectativas. Costo de desarrollo (y mantenimiento): las aplicaciones nativas son las más caras, más aún si se pretende abarcar distintas plataformas. En las aplicaciones web móvil, en cambio, los costos son menores y muchas veces se usan los mismos recursos técnicos para la tecnología web. Las aplicaciones híbridas, como su nombre lo indica, quedan a mitad de camino en esta comparación de costos. Tiendas de aplicaciones: como sabemos, las tiendas presentan las apps nativas y las híbridas. Sobre ellas podemos hacer un modelo de negocio medible. Entonces, si en nuestra estrategia está, por ejemplo, medir el ROI (retorno de inversión), estas aplicaciones son las que prevalecen. También es importante recordar en este punto que las actualizaciones de cada versión de las apps requieren la autorización de estas para su publicación. En la web para móviles, por el contrario, las actualizaciones se producen de manera automática y autónoma. Conectividad: ¿estar conectado a internet es fundamental para que la app funcione correctamente? Esto es cierto con respecto a las aplicaciones nativas; sin embargo, no aplica para el resto. El punto de referencia sobre esta característica es la necesidad (nuevamente) que tenga el público objetivo respecto de la utilidad que le da a la aplicación y su conectividad. Figura 4: Comparación entre la app nativa, la app híbrida y la web móvil

6

APLICACIONES

Lenguaje Costo Desarrollo

N A T I VA

H I BR ID IDA A

JAVA –C .NET

HTLM CSS JAVASCRIPT

-

Interfaz usuario Rendimiento

W EB HTLM CSS JAVASCRIPT

-

-

Multiplataforma Tiempo de desarrollo Tienda de APP

-

-

Fuente: elaboración propia a base de LanceTalent (2014, https://goo.gl/vVmMtR).

Herramientas para comprobar cómo se ve una web en dispositivos móviles En la era de internet, podemos comprobar la cantidad de herramientas que permiten ayudar a realizar tareas compartiendo conocimiento y creando un género de ayudantes virtuales. El marketing móvil no es la excepción y las herramientas existentes que nos pueden ayudar engloban todos aquellos elementos útiles para una campaña. La idea de este punto es poder brindar algunas opciones de “código abierto” para transmitir el espíritu con el que fueron creadas, desarrolladas y aceptadas. El término código abierto usualmente se usa para hacer alusión al software o hardware distribuido y desarrollado libremente. La libertad a la cual se refiere es a dejar conocer y poner a disposición el código fuente para realizar modificaciones prácticamente irrestrictas en comparación con muchas empresas que fabrican software que restringe y cierra su código fuente. La filosofía de código abierto se basa en tres aspectos: 

Requiere menor inversión; en algunos casos, es solo un costo de aprendizaje).



Utiliza estándares que permiten la escalabilidad y minimizan los costos de adopción.

7



Existe una comunidad de desarrolladores y usuarios más grande que colabora con el soporte, el mantenimiento y la evolución del código.

No es menor que en este espacio nos encontremos con herramientas que quizá no mantengan la vigencia mientras se recopila este material, pero, seguramente, habrá algunas similares basadas en las anteriores y la misma web y sus buscadores nos podrán aportar datos útiles sobre nuevas herramientas de código abierto. Otra recomendación previa a este capítulo es que podemos encontrar herramientas con más requerimientos técnicos que otras y pueden tener costos de ingreso, suscripción o ser gratuitas. ¿Por qué es importante observar cómo se ve la web en dispositivos móviles? Pensemos en que necesitamos: hacer llegar a los usuarios a una página de aterrizaje móvil (mobile landing page), hacer un anuncio móvil o que accedan a contenidos web a través de una aplicación nativa. Naturalmente, la importancia de optimizar los contenidos para navegadores web móviles es una acción básica y disparadora de más opciones. Estas herramientas que se mencionarán a continuación permiten comprobar cómo se visualizan nuestros contenidos en estos navegadores. Ipadpeek (ipadpeek.com): permite ver cualquier web en un simulador de iPad en modo paisaje o resoluciones de 1024 × 690 pixeles. Esto nos da una idea aproximada sobre cómo se visualiza nuestra página en el dispositivo iPad (tableta de Apple). No permite simular el modo retrato o resoluciones 768 × 946 pixeles. Opera Mini Simulator (Opera.com/developer/tools/mini): este simulador permite usar todas las funcionalidades (teclado móvil para escribir la URL, botones de navegación y de búsqueda, etc.). Nos acerca mucho a la experiencia real del usuario móvil de iOS y Android, aunque para resoluciones. Windows resizer y mobile Resizer (chrome.google.com/webstore): estas dos extensiones para Chrome sirven para redimensionar la ventana del navegador con los diferentes tamaños de pantalla de dispositivos, permite personalizar tamaños de resoluciones y ordenarlos a nuestro gusto. Su única desventaja es que no permite probar de manera fácil cuando el dispositivo está colocado de manera horizontal (landscape). Sin embargo, trae un gran número de dispositivos móviles para hacer las pruebas. Responsinator (responsinator.com) y Responsive Px (responsivepx.com): la primera nos permite probar los media queries definidos para diferentes smartphone y tabletas y ver la web al mismo tiempo en pantallas que van desde 240 × 320 pixeles hasta 1024 × 768 pixeles; su gran desventaja es que no permite emular el navegador de cada plataforma. Sin embargo, es útil para

8

mostrarle la web a la marca que lo requiere. Mira en la Figura 5 –en la cual se cargó la ya usada página visittampabay.com– algunas de las opciones que la página devuelve como resultado de visualización. La segunda resulta útil a la hora de establecer los puntos de ruptura de una web (que son los puntos donde debe ser realineada la disposición de los elementos de la web al cambiar a otra resolución). Tiene una barra estática superior que permite editar la resolución de ancho × alto de a un pixel por vez. Figura 5: Ejemplos de Responsinator.com

Fuente: elaboración propia a base de Tampa Bay app (Visittampabay.com, s. f.).

Mobitest (mobitest.akamai.com): permite averiguar la velocidad de carga de la página y su tamaño para diferentes navegadores móviles. Lo distinto es justamente la posibilidad de ver los tiempos de carga que en el marketing móvil se traducen a segundos que el usuario no quiere ceder (recordemos lo que se mencionaba en la Lectura 1 respecto de los tiempos cortos) (Estrada Nieto, Jordán Soro y Hernández Dauder, 2013). Mobile phone emulator (mobilephoneemulator.com): esta herramienta posee muy buenas opciones y permite configurar el tamaño de las pantallas en pulgadas. También permite elegir dentro de diferentes modelos de teléfonos y recomienda hacer test en los otros navegadores web.

9

Véase el ejemplo que se muestra en la figura siguiente. En la página de la herramienta, se cargaron las opciones de la web para verificar y el dispositivo: la página es www.santanderrio.com.ar, y el dispositivo, un iPhone 6. A la derecha, se puede ver el conjunto de opciones para completar y a la izquierda se muestra la página en el modelo de terminal elegido de manera realista.

Figura 6: Captura de mobilephoneemulator.com

Fuente: captura de pantalla de Mobile phone emulator (s. f.).

Screenqueri (screenqueri.es): la ventaja de esta herramienta es el listado muy completo de smartphone y tabletas, que incluye BlackBerry, Sony Xperia, HTC y Motorola. La desventaja es que no emula directamente los navegadores de los diferentes dispositivos. Chrome Developer Tools (developers.google.com): esta es una forma sencilla y personalizable que existe sin que sea necesario instalar una extensión. Prácticamente, funciona de manera online y se debe usar el menú MobileFriendly Test, que permite introducir una URL (dirección de internet) y luego analizar con uno de los botones laterales de la página la visión en un dispositivo móvil. En el caso de que no sea una página “amigable” en la vista móvil,

10

devolverá recomendaciones y errores, además de la visual e instrucciones de cómo mejorarla.

11

Referencias Estrade Nieto, J. M., Jordán Soro, D. y Hernández Dauder, M. A. (2013). Marketing digital: marketing móvil, SEO y analítica web. Madrid, ES: Pirámide. LanceTalent. (2014). Los 3 tipos de aplicaciones móviles: ventajas e inconvenientes. Recuperado de https://www.lancetalent.com/blog/tipos-deaplicaciones-moviles-ventajas-inconvenientes/ Yeeply. (2014). Economía app. La economía de las imágenes móviles [Imagen]. Recuperado de https://www.yeeply.com/blog/economia-app-habitos-y-uso-deaplicaciones-moviles/

12...