Como crear una App con PowerPoint y iSpring free

Cuando se trata de crear aplicaciones para móviles una de las primeras cosas que nos viene a la cabeza es la dificultad y el coste de llevarlas a cabo. Y es que crear una app no es desde luego una tarea sencilla, ya que debemos contar con conocimientos especializados en programación y diseño.

Pero, ¿y si os contara que podemos crear apps nativas unicamente con PowerPoint y una aplicación gratuita llamada iSpring Free?

Veamos como paso a paso y de la manera más sencilla posible:

[dropcap type=”square”]1[/dropcap] Instalamos iSpring Free

iSpring Free es una aplicación gratuita que se integra con PowerPoint como una pestaña más en el menú superior. Sólo tienes que descargarla e instalarla en tu ordenador. Este programa nos permitirá exportar nuestra presentación de PowerPoint en formato HTML5 (listo para publicar en la web) el cual necesitaremos posteriormente para crear nuestra app. Existen versiones de pago con muchas más funcionalidades y que nos permitirán personalizar nuestra app con nuestro propio logo, colores, etc. Nosotros solemos trabajar con iSpring Presenter, el cual nos da excelentes resultados en innumerables situaciones, aunque para este tutorial también te servirán iSpring Pro o iSpring Suite, según cuales sean tus necesidades.

[dropcap type=”square”]2[/dropcap] Creamos una presentación en PowerPoint

Esto, para la mayoría, no tiene mayor misterio, aunque trataremos de utilizar transiciones y animaciones sencillas para que los teléfonos menos potentes puedan realizarlas sin mayor problema. En principio podemos utilizar todas las características disponibles en PowerPoint.

[dropcap type=”square”]3[/dropcap] Exportamos la presentación a HTML5

Entrando a la nueva pestaña de iSpring Free que encontraremos en el menú superior de PowerPoint, pulsamos en Publish y seleccionamos la opción HTML5. Esto nos proporcionará un archivo llamado index.html y una carpeta con otros muchos archivos más

iSpring Free para crear una app con PowerPoint

[dropcap type=”square”]4[/dropcap] Creamos el archivo de configuración de la App

Esto podemos hacerlo con cualquier editor de código, pero el bloc de notas nos puede valer igualmente. Eso si, si utilizas el bloc de notas asegúrate que al guardar el archivo que donde pone “Tipo” no esté selecionada la opción “Documentos de texto *.txt” sino “Todos los archivos *.*”, puesto que necesitamos guardar el documento con la extesión .xml y no .txt como hace por defecto.
Ahora bien, esto es lo que debemos escribir en el archivo de configuración (puedes copiar y pegar el código). Una vez lo tengas guardalo en la misma carpeta donde está el archivo index.html con el nombre config.xml. Fíjate que puedes cambiar cosas como el nombre de la aplicación, la descripción o el nombre del autor y sus datos de contacto. Eso si, respeta las comillas y no elimines nada.

[dropcap type=”square”]5[/dropcap] Creamos el icono de nuestra App

De nuevo en la misma carpeta donde están los archivos index.html y config.xml que acabamos de crear, guardaremos una imagen con el nombre de archivo icono.png, en formato PNG y con un tamaño cuadrado de unos 256 x 256 pixeles para que se vea bien en todas las plataformas. Esto no es complicado si utilizas esta aplicación de edición online.

[dropcap type=”square”]6[/dropcap] Comprimimos todo en un archivo .zip

Nos vamos a la carpeta donde hemos guardado nuestros archivos y los selccionamos todos (incluida la carpeta que hay dentro), pulsamos el botón derecho del ratón y elegimos la opción “Enviar a” -> “Archivo .zip”.
Con esto habremos comprimido todos nuestros archivos dejándolos listos para ser compilados en el formato nativo del sistema operativo de nuestro móvil, ya sea Android o iOS.

[dropcap type=”square”]7[/dropcap] Utilizamos Phonegap Build para compilarlo

PhoneGap Build es un servicio gratuito (con opciones de pago) que nos permite compilar nuestras aplicaciones basadas en HTML5, como la que acabamos de hacer, para distintas plataformas móviles. Si no disponemos de una cuenta gratuita nos damos de alta siguiendo este enlace.

Una vez estemos registrado, nos permitirá subir nuestro archivo .zip para convertirlo en la correspondiente App

phonegap build para convertir html5 en una App

[dropcap type=”square”]8[/dropcap] Descargamos el archivo compilado

Fíjate que por defecto, sólo será posible construir las Apps para Android y Windows Phone ya que para iOS necesitarás generar unos certificados que sólo obtendrás si eres programador iOS y pagas la cuota anual correspondiente. Para distribuir tu App en las tiendas de aplicaciones, como Google Play, también necesitarás tu certificado pero en este caso podemos instalar nuestra aplicación sin necesidad de hacerlo a través de Google Play. Para Android descarga el archivo .apk y envíalo a tu teléfono (puedes enviártelo por email, colgándolo en tu web, a través de airdroid o mediante el código QR que te mostrará PhoneGap Build).

[dropcap type=”square”]9[/dropcap] Instalamos la aplicación

Toca con el dedo sobre el archivo .apk en tu pantalla y comenzará la instalación en tu móvil o tableta. Fíjate que, al provenir la App de un origen desconocido, es muy probable que Android te pida modificar la configuración de seguridad. Hazlo de manera temporal y no tendrás problema en finalizar la instalación.

Si todo ha ido bien, tendrás el icono correspondiente en tu pantalla desde donde podrás iniciar tu App Power Point.
¡Ah! y este método sirve para cualquier archivo HTML.

¿Conocías este método para crear una app con PowerPoint? ¿Te ha parecido complicado?. Si quieres una App verdaderamente profesional y no solo una sencilla presentación de PowerPoint, no lo dudes y ponte ya contacto con nosotros. Estaremos encantados de atenderte.

6 Comentarios

  • Malformed Config

    Interesante artículo, pero no lo he podido probar porque en Phonegap Build me da “malformed config.xml” como error.
    Si consiguiera solucionar ese paso sería perfecto.

    • Luis Hernández

      ¡Hola!, envíame si quieres a luis[arroba]sinlios.com el archivo XML que estás subiendo y le hecho un vistazo. Es posible que al editarlo hayas modificado algo importante.
      Saludos y gracias por pasarte por aquí.

  • Israel Fuentes

    excelente aportación todo bien paso a paso

  • Jorge Perez

    yo no modifique nada y me marca lo mismo error en el config

  • Sergio A Carrillo L

    Unable to create app: invalid filetype, por que sale este error ?

  • AlicexHidexHittokirix BattousaixSamaxDexBautista

    En mi caso todo está bien, se instala correctamente y se abre rápido pero al empezar a funcionar arriba hay una línea con las letras “creado con ispring free” y abajo solo aparece un círculo dando vueltas como si se estuviera cargando pero no hace nada más.
    Si consigo arreglarlo escribo otro comentario.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: