WebZip – Añadir HTML y HTML5

Índice

¿Qué es?

Con este elemento extra puedes añadir HTML o HTML5 offline en tu App. De este modo, no será necesario que el usuario disponga de conexión a internet para visualizarlo.

Además, también te permite añadir HTML que tenga parte del contenido online. De este modo, puedes reducir el tiempo de carga de la página ya que todo el contenido que no cambie será offline y solo el contenido que sea dinámico se descargará usando la conexión a internet.

¿Qué necesitas?

Para crear un WebZip, empezaremos creando el código HTML de forma normal. Lo único que debemos tener en cuenta es que la página que queramos que se muestre inicialmente debe llamarse «index.html» y debe estar en la raíz.

  • Puedes añadir imágenes, videos, etc.
  • Puedes crear la estructura de carpetas que quieras para organizar los ficheros.
  • Puedes crear varias páginas html y crear links relativos para acceder a ellas.

Una vez tengas el HTML, comprime todos los archivos en un fichero zip. Selecciona todos los ficheros y comprímelos. IMPORTANTE: No debes comprimir la carpeta que contiene los ficheros sino el contenido de la carpeta. De este modo, el fichero «index.html» quedará en la raíz del fichero zip.

Guarda tu fichero «.zip» en la carpeta «Resources» o en la carpeta «Libraries» de tu proyecto.

¿Cómo se hace?

Crea el contenedor desde InDesign

En este paso del proyecto simplemente haremos los preparativos necesarios desde InDesign y más tarde terminaremos de crearlo con el programa 480i Manager.

  1. En tu documento InDesign, crea un marco rectangular delimitando la zona en la que se va a mostrar la página web. Este marco será el contenedor del elemento extra.
  2. Ponle un nombre al marco desde el panel Panel Capas.

Esto es todo lo que hay que hacer desde InDesign. Guarda el documento y usa 480i Script para convertirlo en una issue. A continuación, crea tu App desde el 480i Manager de la forma habitual. Si nunca has realizado estos pasos es aconsejable que hagas primero este sencillo tutorial que te ayudará a aprender los conceptos más básicos para crear una App.

Añade el elemento extra a tu publicación

  1. Desde 480i Manager, despliega la carpeta Publicaciones haciendo doble clic sobre ella. En su interior podrás ver una carpeta por cada una de tus publicaciones.
  2. Despliega el contenido de la publicación en la que quieres añadir el WebZip.
  3. Haz clic con el botón derecho sobre Elementos extra y elige «Añadir elemento extra». En el siguiente cuadro de diálogo selecciona «Web Zip».
    Seleccionar WebZip

Configura el elemento extra

Dentro de la carpeta Elementos extra se habrá creado una nueva entrada. Selecciónala para visualizar las opciones de configuración y sigue estas indicaciones:

  1. Elige el contenedor.
    • El nombre del contenedor es el que le pusiste al marco desde InDesign cuando preparaste el contenedor.
      Selecionar contenedor
  2. Elige el fichero zip que quieres usar.
    Seleccionar WebZip
  3. Si activas la precarga en iOS, el contenido HTML se cargará cuando el usuario este viendo la página anterior, de este modo, ya estará cargado al pasar de página. Esta opción está disponible desde la versión 2.6 de la herramienta.
    Precargar iOS

Caso Práctico

Añadir un elemento extra WebZip

En este tutorial vas a aprender a añadir contenido HTML offline a tu publicación interactiva.

Recursos de este caso práctico

Si quieres realizar este caso práctico o ver como se ha hecho descarga los ficheros del proyecto. También puedes ver el resultado en «480i Viewer iPad» instalando el caso práctico a través de su id.

Caso práctico terminado Descargar
Preparado para practicar Descargar
ID de instalación webzip
Ir al Foro