Con Tumult Hype podemos crear tanto banners como infografías, microsites, minijuegos… en HTML5, totalmente responsive. Como te puedes imaginar, lo que creas en HTML5 lo puedes incrustar luego en una web. Por ejemplo:
- En una landing page
- En una web hecha en WordPress
- En una web educativa con un gestor de contenidos tipo Moodle
- En una web-app
En esta entrada veremos cómo incrustar un material animado e interactivo creado con Tumult Hype en un WordPress.
Requisitos
El primer requisito es que tengas un WordPress y que puedas acceder al panel de administración donde se escriben nuevas entradas. Si no puedes acceder, no podrás seguir este tutorial.
El segundo requisito es que tengas acceso al servidor de la web o a cualquier servidor mediante FTP o, si no lo tienes y buscas una solución más fácil, puedes hacerte una cuenta en Dropbox. Es decir, no es imprescindible que te metas en un programa de FTP y que accedas al servidor de tu web para subir archivos, puedes también subir archivos a Dropbox.
Además, Tumult Hype se conecta con Dropbox, por lo que incluso irás más rápido si lo haces con Dropbox.
Otro requisito interesante es un programa de edición de archivos html que no se dedique a romper los archivos. Yo personalmente uso desde hace años TextWrangler, pero puedes usar cualquier otro programa. En este tutorial, verás TextWrangler como programa usado.
En resumen, necesitarás:
- Acceso a WordPress
- Una cuenta en Dropbox
- Programa de edición de archivos en html (tipo TextWrangler)
- Ah, y se me olvida, evidentemente… ¡algo creado con Tumult Hype que puedas subir!
Vamos allá, ¡manos a la obra!
Incrustar usando Dropbox
Como te he dicho, podrías incrustar también usando un programa FTP que te permitiera subir archvios a un servidor. El objetivo es: exportar en Tumult Hype subiendo los archivos exportados a Dropbox, abrir el archivo html que has subido a Dropbox y copiar el código de inserción modificando una línea en la que haremos referencia a donde está alojado el archivo dentro de Dropbox. ¿Muy lioso?
Veámoslo paso a paso en este vídeo:
Tutorial escrito: cómo insertar un proyecto Hype en WordPress usando Dropbox
1) Subir desde Tumult Hype directamente a Dropbox un proyecto. Accediendo a Archivo -> Exportar como HTML5 -> Dropbox…
2) Una vez subido, encontraré mis archivos en Dropbox en la siguiente ruta: Dropbox / Aplicaciones / Hype / Exports / Nombredemiproyecto. Ahí dentro encontraré un archivo nombredemiproyecto.html y una carpeta llamada nombredemiproyecto.hyperesources que es donde se encuentran las imágenes, los archivos javascript, etc. de mi proyecto.
3) Entonces nos interesará obtener el enlace público del archivo llamado “nombredemiproyecto_hype_generated.js” que se encuentra dentro de la carpeta “nombredemiproyecto.hyperesources”. Para eso haremos click botón derecho del ratón en el archivo en cuestión y obtendremos el enlace público mediante Dropbox. Si no tenemos Dropbox instalado en el ordeandor, podremos hacer todo esto desde la web de Dropbox.
4) Una vez hayamos obtenido el enlace público, lo guardaremos a parte de un bloc de notas (TexEdit, por ejemplo). Entonces abriremos el archivo nombredemiproyecto.html que se encuentra fuera de la carpeta nombredemiproyecto.hyperesources. El archivo lo abriremos con TextWrangler.
5) A continuación, buscaremos en el archivo un texto que empieza así “<!– copy these lines to your document: –>” y dentro de ese texto buscaremos un texto que empieza así “src=”” como puedes ver en esta imagen:
Vale, una vez hecho esto, tienes que sustituir el texto que te quede entre comillas y comillas por el texto que habías copiado antes y habías reservado en un bloc de notas. Es decir, por el enlace público al archivo de Dropbox.
6) Una vez lo hayas sustituido, lo que tienes que hacer es copiar todo el texto que te quede entre div y div, es decir, todo el texto que ves aquí:
7) Y este es el texto que tienes que copiar en WordPress para que te aparezca tu proyecto. Eso sí, lo tienes que copiar en la pestaña “texto” y no en la pestaña “visual”.
Tienes que pegar el texto que habías copiado antes donde quieras que aparezca el proyecto Hype. Eso sí, si luego quieres seguir escribiendo texto te recomiendo que después de pegar el texto, después del “div final” vuelvas a escribir texto, para que luego cuando vuelvas a “Visual” en la pestaña de WordPress tengas una guía por donde seguir, ya que no podrás ver el archivo Hype hasta que no le des a “previsualizar entrada” y si quisieras escribir más no sabrías dónde termina el archivo…
Puedes verlo en esta imagen que es de la pestaña “Texto” de WordPress. Si te fijas hay un “Aquí escribes texto de nuevo” que es donde puedes volver a escribir para que te sirva de guía.
Y aquí tenemos el proyecto incrustrado 🙂