Añade un índice interactivo a tus artículos HTML

Índice

¿Qué es?

En este tutorial aprenderemos a añadir un índice interactivo para tus artículos HTML. Los índices suelen utilizarse en las primeras páginas de la App y tienen enlaces a todos los artículos que esta contiene.

¿Qué necesitas?

Es muy recomendable seguir el primer tutorial para tener claro como funcionan los artículos HTML.

Para seguir este tutorial necesitarás una plantilla preparada para este, puedes descargar la plantilla aquí:

Para editar la plantilla necesitarás un editor de textos. Puedes usar el editor que prefieras. Si no tienes un editor favorito a continuación te aconsejamos alguno.

¿Cómo se configura?

Cada fila del índice interactivo se compone de 4 partes:

  • El titulo, que normalmente es el mismo que el del artículo al que conduce.
  • La descripción, que es lo que anima al usuario de la App a pulsar sobre ese artículo en concreto.
  • La imagen de fondo, que tiene que ser llamativa pero sin eclipsar el texto. Esta imagen puede ser del tamaño que quieras pero recomendamos un tamaño de 700x500px.
  • El botón de indesign que se activará. este botón tiene que estar creado en la página donde incluyes el índice interactivo y debe tener la acción “ir a página” que conduce a la página del artículo.

Lo primero que debes hacer es crear los botones de InDesign. Estos botones deben estar en la página donde pondrás el índice. Pueden ser de 1px de tamaño para que el usuario no los pulse sin darse cuenta, pero deben crearse.

Asegúrate de ponerles un nombre que recuerdes, lo necesitarás mas tarde.

Tienes más info sobre como crear estos botones aquí: Botones Interactivos “Ir a página”

Ahora vamos con el índice en si:

  1. Lo primero que tienes que hacer es descomprimir el .zip que has descargado.
  2. Una vez descomprimido. verás varios archivos y carpetas. Antes de nada, abre la carpeta “img”.
  3. Aquí están las imágenes de fondo del índice, cámbialas por las de tu App.
  4. Ahora abre el archivo “index.html” con el editor de texto. Al abrirlo verás que hay una parte del archivo con las filas del índice. Tendrás que quitar o añadir filas según el numero de artículos de tu App.
  5. Cuando tengas el numero de filas que necesitas, edita el texto, la imagen y añade el nombre del botón InDesign que has creado antes.
  6. Una vez edites todos las las filas, ya tendrás tu índice listo para añadirlo a tu App como Webzip. Recuerda guardar los cambios.

Añadir HTML a tu App

Antes de poder añadirlo a tu App, tendrás que comprimirlo de nuevo. Selecciona todos los archivos de la carpeta y comprimelos en .zip.

Ahora puedes seguir el siguiente tutorial para aprender a añadir WebZips a tu App.

Ir al Foro