Crea una App con HTML en 10 minutos

En este tutorial vamos a crear una App desde cero, usando una plantilla HTML que podrás descargar gratis.

01

El proceso solo dura unos minutos y al final podrás descargar y probar la App en tu propio dispositivo móvil:

Paso 1: Descarga los recursos para la app

Descarga gratis esta plantilla HTML, es una presentación de una película de cine:

Descargar

  1. Descomprime el archivo .zip que has descargado.
  2. Verás dos carpetas: “Icono” y “HTML”.
  3. Guarda las carpetas para mas 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

Completamos los campos del asistente de creación de Apps: 

nueva app
  • Nombre de la App: Pon el nombre que quieras.
  • Ubicación del proyecto: Automáticamente se creará la ruta donde se guardará el proyecto.
  • Tipo de App: Selecciona “App Single”.
  • Crear aplicación: pulsa en “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.
Captura

Paso 4: Añade contenido a tu app

  • Ahora añadiremos el HTML a la app.
  • Volvemos a 480i Manager y nos dirigimos a la pantalla de añadir contenido pulsando en el árbol de la izquierda.
  • Buscamos el contenido HTML y pulsamos en “Añadir”.
añade html
  • Nos preguntará un nombre para el contenido
  • Nos pedirá que seleccionemos un archivo index.html, para ello, pulsamos en “Seleccionar” y se abrirá la carpeta “Libraries”, hacemos doble clic sobre la carpeta del HTML. Ahí dentro habrá un archivo llamado “index.html”, que es el que tenemos que seleccionar.
Captura
añade contenido
  • Una vez seleccionado pulsamos en “Añadir” y ya tendremos nuestro html añadido a la app.

Paso 5: Personaliza tu app

Cambia el icono

  • Para cambiar el icono de la app, tenemos que clicar en “Configuración de la App” en el panel de la izquierda y pulsar en “Información General”.
  • Una vez ahí, pulsamos sobre el icono por defecto y se nos abrirá la carpeta “Libraries”. En la carpeta “iconos” que has copiado antes encontrarás un fichero llamado “ico_App.png”. Selecciona ese fichero.
icono
icono cambiado

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.

Ir al Foro