Crea una App para tus revistas en 10 minutos

En este tutorial vamos a crear una App desde cero usando unas revistas en formato PDF. La app tendra un Quiosco que mostrará las revistas disponibles para descargar.

Este será el resultado:

03
La podrás descargar y probar en tu propio dispositivo móvil en tan solo unos minutos.

Paso 1: Descarga los recursos para la app

Descarga gratis el contenido para hacer este caso práctico:

Descargar

  1. Descomprime el archivo .zip que has descargado.
  2. Verás dos carpetas: “Iconos” y “Revistas”.
  3. Guarda las carpetas para más adelante.

Paso 2: Crea el Proyecto App

Para empezar con la app, tenemos que crear el proyecto app en 480iManager.

  • Abre el programa y aparecerá la pantalla de bienvenida. Pulsa el botón “Crear Nueva App”.
bienvenida1

Completa los datos del asistente de creación de Apps: 

crear app
  • Nombre de la App: ZOONOOZ
  • Ubicación del proyecto: En nuestro caso vamos a guardar el proyecto en la ubicación por defecto así que lo dejamos como está.
  • Tipo de App: Selecciona “App Quiosco”.

Finalmente pulsa el botón “Crear”.

Paso 3: Prepara el contenido para la app

Ahora vamos a guardar dentro del proyecto app los contenidos de ejemplo que hemos descargado antes:

  • Vamos a “Añadir contenido” en la parte izquierda de 480i Manager y elegimos, “Abrir carpeta Libraries”.
abrir carpeta libraries
  • Se abrirá una ventana del explorador con la carpeta Libraries del proyecto. Pegamos aquí dentro las dos carpetas que hemos descargado antes.
libraries

Paso 4: Añade contenido a tu app

Ahora vamos a añadir a la App las revistas en PDF:

  • Volvemos a 480i Manager y nos dirigimos a la pantalla para añadir contenido.
  • Elegimos “PDF” y pulsamos en “Añadir”.
añadir contenido pdf
  • Ponemos como título “ZooNooZ Enero”. Es el nombre que aparecerá en el quiosco.
  • Pulsamos en “Seleccionar”. Se abrirá la carpeta “Libraries” que es donde hemos dejado los PDF anteriormente. Elegimos el PDF llamado “ZooNooZ Enero.pdf”.
  • Finamente pulsamos el botón “Añadir”.

añadir PDF

  • Repetimos el proceso anterior para añadir el resto de PDFs: “ZooNooZ Marzo.pdf”, “ZooNooZ Mayo.pdf”, “ZooNooZ Agosto.pdf”, “ZooNooZ Septiembre.pdf” y “ZooNooZ Octubre.pdf”.

Paso 5: Personaliza tu app

Iconos de las publicaciones

Vamos a personalizar el icono de los PDF que acabamos de añadir.

  • Seleccionamos la publicación en el panel de la izquierda y hacemos clic en el icono actual para cambiarlo.
icono de la publicacion
  • Busca en los iconos que hemos copiado anteriormente en la carpeta “Libraries”. Diferenciarás los iconos por el nombre del mes. Por ejemplo para enero la imagen sería “ico_enero.png”.
iconopubli cambiado
  • Repetimos esto por cada PDF y ya tendremos todos los iconos listos.

Icono de la App

  • Para añadir el icono, tenemos que clicar en “Configuración de la App” en el panel de la izquierda y hacer clic sobre el icono actual para cambiarlo.
icono
  • En la carpeta “iconos” que has copiado antes dentro de “Libraries” encontrarás un fichero llamado “ico_App.png”. Selecciona ese fichero.
iconocambiado

Paso 6: Exporta y pre-visualiza tu app en el Smartphone

Una vez hemos acabado de configurar y personalizar nuestra app, para poder pre-visualizarla en tu dispositivo móvil, tienes que instalar la app “480i Viewer” en tu smartphone o tablet.

Puedes descargar la app escaneando este QR o busca “480i viewer” en App Store o Google Play:

qrr

Una vez instalada la app, volvemos a 480i Manager y pulsamos en “Exportar App” en la parte superior izquierda.

Al finalizar la exportación se abrirá un asistente para enlazar el smartphone o tablet con tu ordenador. Abre la App “480i Viewer” y sigue los pasos del asistente.

Una vez ha acabado de enviarse la app, ya puedes abrir el proyecto desde tu smartphone o Tablet.

Continúa personalizando más tu app

Añade Banners al Quiosco

Para añadir los banners a tu app vamos a “Configuración de la app” -> “Diseño App” y clicamos en “Banners”.

bannerh
  • Ahora seleccionamos “Banners horizontales” y pulsamos en “Añadir”
  • Encontraras un fichero llamado “banner_H.png” en la carpeta “iconos” que tenemos en “Libraries”.

Por último añadiremos el banner vertical. Seleccionamos la pestaña “Banners verticales” y repetimos el proceso anterior con el fichero llamado “banner_V.png”.

bannerv

Cambia el Tema del Quiosco

Ahora cambiaremos los colores del tema para personalizar los colores de nuestra app. Para esto nos dirigimos a “Diseño App” -> “Temas” y elegimos “Personalizado” en el menú desplegable.

Cuando seleccionamos personalizado nos deja cambiar los colores de cada parte de la app.

En la siguiente captura puedes ver un ejemplo de tema personalizado, pero puedes adaptarlo cómo a ti más te guste.

temas

Pulsa de nuevo Exportar para enviar los cambios a tu dispositivo móvil.

Ir al Foro