App nativa para Android y iPhone de tu web con Mobiloud

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

Esta entrada ha sido patrocinada por Mobiloud, quien nos ha ofrecido la posibilidad de probar y valorar su servicio para WordPress. En cualquier caso, las valoraciones y opiniones que hacemos en WPrincipiante siempre son libres, honestas e imparciales.

Que los móviles Android y iPhone están de moda no es ninguna noticia; casi cualquier persona que encuentres por la calle lleva un smartphone con conexión a Internet en su bolsillo. Pero, ¿sabías que muchos de ellos lo usan para informarse? Hace unos pocos meses en El País leía (desde mi móvil, claro ?) que «el 46% de lectores consulta contenidos por el móvil«, con lo que ya puedes imaginar lo importante que es comprobar que tu web es accesible desde estos aparatos.

Para acceder a los contenidos de tu web desde el móvil los usuarios tienen varias opciones. Las más habituales incluyen usar directamente el navegador integrado o hacerlo mediante un lector de canales RSS. No obstante, existe una tercera opción para distribuir tu web a través del móvil: las apps nativas, las cuales se convierten en el complemento perfecto a tu web.

Recientemente he tenido la oportunidad de probar Mobiloud, un plugin y servicio diseñado para WordPress que te permite crear una app de tu web en unos pocos pasos. Si estás interesado en saber de qué va todo esto y cómo Mobiloud te puede ayudar, ¡sigue leyendo!

Mobiloud

Mobiloud es un plugin para WordPress que pone al alcance de cualquiera la creación de un app. El plugin se encarga de la parte más tediosa y complicada del trabajo (maquetación de la app, diseño de sus menús, gestión de notificaciones…) y te deja a ti responsable de la configuración de algunos aspectos visuales y de la actualización de contenidos de tu web (que es lo que de verdad importa, ¿no?). En concreto, Mobiloud crea apps nativas para iPhone y Android, con un diseño que encaja con en el estilo de cada plataforma y que, además, se puede adaptar al estilo de tu propia web.

Funcionalidades

Como te decía, la principal baza de Mobiloud es la facilidad de uso a la hora de crear apps nativas, las cuales ofrecen una experiencia de usuario ligeramente superior a las soluciones webapp (piensa, por ejemplo, en las diferencias que hay entre el cliente de gmail nativo de Android o lo que ves si accedes a gmail desde el navegador de tu móvil).

Es importante mencionar que si estamos ante una herramienta muy amigable para el usuario principiante o medio es en parte debido al conjunto limitado (aunque más que suficiente) de opciones de personalización que ofrece. Es decir, si eres de esos a los que les gusta toquetear hasta el último detalle de la app, debes saber que, o no podrás hacerlo, o deberás ponerte en contacto con el equipo de Mobiloud y pedirles las personalizaciones que necesites.

Diseño de tu app con Mobiloud
Diseño de tu app con Mobiloud

De todas formas, creo que la decisión de limitar las opciones ha sido muy inteligente: el plugin te permite únicamente configurar unos pocos parámetros de la apariencia visual de la app (en esencia, el esquema de colores, el logo y algún detallito más) y escoger qué páginas formarán parte del menú, dejando todo lo demás «al gusto de Mobiloud». Y esto es algo que valoro especialmente: en lugar de ofrecer un plugin complicado de utilizar con mil opciones que difícilmente vas a usar, los desarrolladores han diseñado una herramienta que cualquiera puede usar.

Otra funcionalidad interesante de Mobiloud son las notificaciones push (si no sabes qué son, aquí puedes leer más sobre ellas). Como su nombre indica, las notificaciones son «avisos» que mandamos a los usuarios que tienen nuestra app instalada. Gracias a ellas, podemos notificarles cuando, por ejemplo, publiquemos contenido nuevo en nuestro blog, de tal forma que capturemos su atención en seguida 😉

También merece la pena destacar las diferentes opciones de monetización que tienes disponibles. Con Mobiloud podrás escoger tres plataformas de publicidad integrada: AdMob, MoPub y Google DoubleClick for Publishers (Google DFP). De hecho, el plugin te permite escoger entre publicidad nativa (la típica publicidad contextual que aparece en el móvil) o anuncios embebidos en el propio contenido de la web.

Tipos de publicidad en Mobiloud
Tipos de publicidad en Mobiloud

Finalmente, existe un largo etcétera de pequeñas funcionalidades que deberían permitirte crear una app casi única. Por ejemplo, puedes escoger qué plataforma de comentarios quieres (los nativos de WordPress, Disquss o Facebook), permite compartir los contenidos fácilmente (SMS, correo electrónico, redes sociales…) o incluso ofrece soporte para Google Analytics.

Experiencia de Usuario

En WPrincipiante nos encanta probar las diferentes iniciativas que nacen para WordPress. Esta vez le ha tocado a Mobiloud, la cual hemos sometido a varias pruebas durante un par de semanas. ¡Aquí te cuento nuestra experiencia!

Configurar la App

Para poder usar Mobiloud, lo primero que tendrás que hacer es instalar el plugin en tu WordPress y configurarlo. Para ello, simplemente ve a Plugins » Añadir nuevo y busca «Mobiloud». Una vez instalado, accede al plugin a través del menú Mobiloud e introduce tus datos:

Configuración inicial de Mobiloud
Configuración inicial de Mobiloud

Rellenando los tres campos de texto de la imagen anterior ya tienes el plugin listo. ¡Facilísimo! A partir de este momento, dispones de una sencilla interfaz de usuario para configurar el aspecto básico de la app y conseguir que se adapte al estilo de tu web. En nuestro caso, hemos optado por el color naranja de WPrincipiante y hemos añadido el icono en blanco:

Diseño de tu app con Mobiloud
Diseño de tu app con Mobiloud

con lo que ya conseguimos el look and feel que nos caracteriza 😀

La segunda pestaña en el apartado Settings del plugin es la configuración del menú. Aquí puedes añadir las categorías, etiquetas, páginas e incluso enlaces externos que quieras que estén accesibles desde el menú de tu app. De nuevo, Mobiloud nos presenta una interfaz sin grandes pretensiones que cumple perfectamente su cometido, con funcionalidades básicas (pero que se agradecen) como el arrastrar y soltar:

Configuración de Menús con Mobiloud
Configuración de Menús con Mobiloud

Una vez tengas la app configurada, podrás hacer una previsualización en el propio navegador. Por lo que he podido ver, esta comprobación se realiza utilizando Appetize.io, un servicio que realiza streaming de aplicaciones móviles para iOS y Android a través del navegador:

Simulación de la app en un móbil
Simulación de la app en un móvil

Esto es algo que me ha sorprendido gratamente (y, por consiguiente, me ha gustado); los chicos de Mobiloud no se limitan a «imitar» el entorno a través de HTML y CSS, sino que están cargando una emulación de cómo se vería la app en un móvil de verdad. Aunque la fluidez de la demo se ve afectada por el hecho de estar transmitiendo un «vídeo» en streaming, el hecho de poder comprobar qué apariencia tiene todo en un entorno realista se agradece.

¿Cómo se ve en un móvil de verdad?

Además de la demo que tienes disponible en el Escritorio de WordPress, el equipo de Mobiloud también te da la posibilidad de testear la app en un móvil real. Para ello, simplemente tienes que:

  1. Descargar la app propia de Mobiloud de la App Store o de Google Play.
  2. Abrir esta app, que por defecto está configurada para mostrarte el blog de Mobiloud.
  3. Agitar el dispositivo (¿no se les podía ocurrir algo menos «peligroso»? A los patosos se nos cae el móvil con demasiada facilidad…?).
  4. En el diálogo que aparece, escribe la URL de tu web (en nuestro caso, https://neliosoftware.com/es).
  5. Espera a que la app se reinicie y, una vez hecho, podrás ver cómo queda el resultado final en tu móvil.
WPrincipiante en el móvil de David
WPrincipiante en el móvil de David

Soporte y Documentación

Como te decía, el uso de Mobiloud es bastante sencillo y no requiere grandes conocimientos de nada. De todas formas, si tuvieras cualquier problema, el equipo de soporte está disponible para resolverte cualquier duda que tengas (el botón de Contact Support siempre está ahí) y, por mi experiencia, suelen ser bastante rápidos.

https://www.youtube.com/watch?v=TxM_8rs3NeA

Además de ello, también disponen de un montón de recursos en línea a los que puedes acceder. Uno de ellos es el vídeo que acabo de enlazar aquí arriba, pero también disponen de FAQs, una guía de iniciación o una sección de resolución de problemas, todo ello en la zona de Ayuda y Soporte de su web (a la cual puedes acceder desde el pie de página).

Problemillas

Si bien la experiencia con Mobiloud ha sido, en general, satisfactoria, tengo que reconocer que he encontrado algunos problemas. Son pequeñas tonterías que ya he comunicado al equipo de desarrolladores de Mobiloud y que confío corregirán en próximas versiones de su plugin. De todas formas, aprovecho para comentártelos.

Por un lado, si estás diseñando la app para Android y decides usar una página estática como página de inicio de tu app, y si tienes activada la opción de mostrar las categorías como pestañas, el comportamiento de la app es extraño. De entrada, nada más abrirla, verás que se muestra la página inicial, pero la pestaña Todas aparece seleccionada. Si pulsamos en cualquier pestaña, el error sigue apareciendo, dando la sensación de que la app está «rota».

No obstante, si accedemos a cualquier categoría desde el menú, podremos ver los contenidos que queríamos; es decir, la lista de entradas asociadas a esa categoría. Y si pulsamos la opción Inicio del menú, entonces veremos la página principal sin el menú tabulado:

El segundo problema que he encontrado son con los menús con enlaces externos. En WPrincipiante tenemos un par de enlaces externos que apuntan a un par de servicios que ofrecemos desde Nelio Software. Al añadir esos enlaces en el menú principal, si pulsas en ellos se abren dentro de la propia app:

Una web dentro de la app
Una web dentro de la app

El resultado, como puedes ver, es «extraño», puesto que aparece una web que nada tiene que ver con WPrincipiante dentro de la app de WPrincipiante. Además, si la web es responsive (como la de la captura de pantalla), la experiencia de usuario también se ve resentida, puesto que aparecen dos menús (el de la app y el de la web) :-S Por suerte, este error es muy sencillo de solucionar: basta con que los chicos de Mobiloud nos permitan escoger si un enlace externo debe abrirse en la propia app o en un navegador externo.

Publicar tu App – Precios

Finalmente, y ya para ir acabando con el análisis de hoy, sólo nos queda por discutir los dos puntos clave de Mobiloud: la publicación de tu app en App Store y Google Play y el precio que tiene el servicio (ambas cosas relacionadas). Una vez tengas preparada la app, simplemente accede a la última pestaña de configuración (Publish Your App) y dale al botón de ver los precios y publicarla. Cuando lo hagas, verás la siguiente tabla:

Página de precios de Mobiloud
Página de precios de Mobiloud

Como puedes ver, los precios empiezan en 69$ al mes. Si quieres disponer de las notificaciones (en mi opinión, la funcionalidad más útil en este tipo de servicios), deberás escoger, como mínimo, el plan Professional, y el coste ya se pone en los 99$ mensuales.

Más allá de las diferencias que hay entre uno y otro plan, lo más importante a destacar es que todos los planes incluyen la generación y envío de la app a las respectivas tiendas móviles. Se trata de un proceso manual que requiere de la aprobación de ambas plataformas, así que no te sorprendas si las cosas no son inmediatas.

Finalmente, comentarte que, si eres un valiente, Mobiloud ofrece una licencia de por vida. Con ella, pagarás una única vez por tu app y dispondrás de 12 meses de soporte (los cuales puedes renovar año a año).

Nuestra Valoración

Mobiloud es un plugin para WordPress que te permite crear apps de tu web para Android y para iPhone. Su interfaz sencilla hace que la creación y configuración de estas apps esté al alcance de cualquiera, aunque las opciones de configuración puedan resultar, en algunos casos, escasas, limitándose (principalmente) a la paleta de colores e iconos. No obstante, estas pequeñas limitaciones se ven compensadas por el hecho de generar aplicaciones nativas y por funcionalidades como la previsualización de apps (tanto en móviles reales como emulados), las notificaciones push o el soporte a diferentes plataformas de publicidad móviles.

Sin ninguna duda, la mayor barrera de entrada de este servicio es su coste. Empezando en $69/mes, está claro que Mobiloud ofrece un servicio premium a clientes que ya tienen una cierta envergadura y cuyos blogs son capaces de generar, como mínimo, esa cantidad de ingresos mensuales. Si dispones de un blog con tráfico suficiente como para soportar el coste de Mobiloud y quieres una solución rápida, senzilla y eficaz para distribuir tus contenidos a través de móviles y tablets, no dudes en probar Mobiloud.

2 comentarios en «App nativa para Android y iPhone de tu web con Mobiloud»

  1. muy interesante habla el plugins lo que hace y ayuda con wordpress pero no explica si ellos mismos o donde se publica una vez terminado de hacer el app donde o como o donde ir para publicar redordando que uno una pc no mac y como publicarlo desde donde y que archivo se baja para publicar y como funciona hay explicaciones que no estan explicando quiseramos saber

    1. ¡Hola Eduardo!

      Gracias por animarte a comentar. Como explico al final del artículo, debes suscribirte a su servicio para poder publicar la app en las diferentes tiendas de apps. De todas formas, no estoy seguro de si estoy respondiendo bien tus dudas o no… añade puntos y comas en tu redacción y me será más fácil entenderte 😉

      Un saludo,
      David

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.