A - Modo doble página o páginas opuestas (captura de pantalla del plugin - A) Crea el archivo de tu publicación en formato 1024px x 1460px y selecciona el modo de “páginas opuestas”. En un ordenador y tabletas en modo horizontal, las páginas opuestas se visualizarán en modo paisaje, es decir, una al lado de la otra. En móvil y tabletas en vertical, las páginas se visualizarán en modo retrato, una a la vez. Este modo es el preferido para que tu publicación se adapte según la pantalla, es decir, que sea “mobile friendly”. Ejemplo : Anpère Magazine Este documento es una guía rápida que te permitirá crear fácilmente un brochure digital, un kit de prensa interactivo, un mini sitio web, entre otros. Sigue estos seis pasos para crear con éxito tu publicación digital interactiva. Paso 1: crea tu archivo InDesign Necesitas dos tipos de archivos InDesign diferentes: • un archivo para tu publicación, • un archivo donde agrupar todos tus pop-ups. 2- Tipografía Puedes mantener tú tipografía. No estás limitado a usar tipografías web. Verifica siempre que el texto sea legible en los dispositivos donde esperas que se visualice tu publicación (ordenador, tableta o móvil). Para testar en un ordenador, haz clic en “Previsualizar” desde el plugin. Usa la función “compartir” para testar en móviles y tableta. Importante: la regla más simple es duplicar el tamaño de todas tus fuentes. Ejemplo: si, en tu versión impresa, el tamaño de fuente es 9, está deberá ser 18 en la versión digital. Paso 5: agregar pop-ups Aquí, hemos enviado parte del texto a un pop-up (segundo nivel de lectura). Paso 4: enriquece tu publicación ¡Ahora puedes comenzar a enriquecer tu publicación! Paso 6: carga tu publicación y personaliza la interface Paso 2: establece de qué modo se visualizarán las páginas en tu publicación Elige el modo de visualización más adecuado según la publicación que vas a realizar. Ordenador Tableta Móvil 1 1 2 1 Page 1 Page 2 Ordenador Tableta Móvil 1 Page 1 1 2 1 2 Documento impreso Alta densidad de texto. Documento digital Menos texto, imágenes más grandes. Modo doble página para una mejor adecuación en móviles. 1 2 A B C D E Plugin - Enriquecimiento D C E B A Plugin - Configuración del proyecto B C A Ordenador Tableta Móvil Page 1 1 1 1 Crea un nuevo archivo de InDesign donde agrupar todos tus popups. Tus pop-ups deben ser todos del mismo ancho (recomendamos que sean de 1.366px de ancho para que sea compatible con ordenadores y tablets, y 600px de ancho para que sea compatible con ordenadores, tablet y móviles). La altura puede ser diferente para cada uno.Ejemplo: mypopups.indd. 1 Un primer pop-up que contiene el texto restante. Página con poco texto y una imagen impactante. Un segundo pop-upque contiene un carrusel de fotos 1, 2 1 + + + + Dos páginas formato A5 Una página formato A4 En nuestro plugin, ve a la pestaña “Proyecto”, y selecciona “Tipo de publicación > Pop-up” (captura de pantalla del plugin - A). Tu pop-up diseñado con InDesign se habrá creado. Repite el mismo procedimiento con el plugin en cada página. Esta acción creará en nuestra solución un pop-up por cada página activa. Tener todos los pop-ups en un archivo InDesign es muy práctico. Para enlazar tus pop-ups a la publicación, crea un botón o un “marco rectangular” en tu archivo de publicación. Selecciónalo y haz clic en “Enriquecimiento > Abrir un pop-up” (Captura de pantalla del plugin -B). Selecciona el pop-up que se abrirá al presionar ese botón o marco. Tus pop-ups pueden contener animaciones de InDesign, vídeos, imágenes, pdf, enlaces a alguna página dentro de tu publicación o sitios externos. Plugin - Configuración del proyecto A Plugin - Enriquecimiento B Si aun no tienes la última versión del plugin, sigue esta guía para crear tu publicación interactiva B - Modo página simple o diapositiva (Captura de pantalla del plugin - B ) Crea tu publicación con orientación “apaisado”. En un ordenador, tableta o móvil, las páginas se visualizarán una por una ocupando toda la pantalla. La experiencia en dispositivos móviles será mejor cuando se visualiza en modo paisaje u horizontal. Importante: todas las páginas del archivo deben ser 2048px x 1460px. Ejemplo: Renault Press Kit C - Modo navegación cruzada (Captura de pantalla del plugin - C) Crea tu documento estableciendo un ancho común en todas las páginas, como se suele hacer para una página web (te sugerimos 1.366 px de ancho). Luego establece el alto para cada una de las páginas (cada página puede tener su propia altura). Este modo es ideal para crear “micro-sitios” web. Ejemplo: WP mini-site Paso 3: optimiza la legibilidad de tu publicación 1- Densidad de texto e información Tanto si comienzas a trabajar con una publicación existente o si decides crear una publicación “desde cero”, evita colocar mucho contenido en el primer nivel de lectura. Cuando tengas mucha información en una página, considera mover algo de su contenido dentro de un pop-up para optimizar la experiencia de lectura. Aquí hay dos ejemplos que muestran cómo se ha simplificado el primer nivel de lectura. Documento impreso Alta densidad de texto. Documento digital Menos texto, imágenes más grandes. Modo doble páginapara una mejor adecuación en móviles. En este caso hemos agregado páginas Primero selecciona un botón (creado con el panel “Botones y formularios” de InDesign) o crea un bloque rectangular para crear los Enriquecimientos de A a E a continuación. A - Animaciones (captura de pantalla del plugin - A) • Animaciones preestablecidas. Podrás encontrar botones y gráficos animados, diapositivas de imágenes y títulos animados en Webpublication Academy. Adaptar las animaciones para tu publicación, es tan sencillo como tomar los recursos disponibles, copiar y pegar en InDesign y realizar algunas modificaciones (color, texto). • Animaciones con InDesign Usa las herramientas de InDesign (Ventana > Espacio de trabajo> Publicación Digital) para realizar tus propias animaciones. • Animate o Animaciones HTML Comprime tu Animate o HTML en un archivo .zip. Después, en tu publicación en InDesign, crea un cuadro rectangular, mantenlo seleccionado y en el plugin en “Enriquecimiento > Animación” busca tu archivo zip para insertarla en la publicación. B - Vídeo (captura de pantalla del plugin - B) Para insertar un vídeo en tu documento, crea un “marco rectangular” en el lugar donde quieres que aparezca tu vídeo. Luego desde el plugin selecciona “Enriquecimiento > Insertar un vídeo” y carga tu archivo de vídeo. Nuestra solución puede convertir tú vídeo a formato .mp4 automáticamente. Tu también puedes insertar un vídeo de un enlace de YouTube. C - Ir a una página (captura de pantalla del plugin - C) Para crear un enlace para ir a una página especifica de la publicación, crea un “marco rectangular” o un botón, luego desde el plugin “Enriquecimiento > Ir a una página” ingresa el número de la página a la que quieres que dirija el enlace. D - Panel (captura de pantalla del plugin - D) Seleccione un botón (creado en InDesign con Botones y formas) o crea “marco rectangular” para añadir una de las siguientes acciones: • Compartir: Abre un panel, permitiendo compartir por email, redes sociales, entre otros. • Miniatura: muestra una miniatura de la publicación. • Favoritos: muestra la página “Favoritos” • Buscar: abre la página de búsqueda de la publicación. • Sumario: abre el panel de contenidos de tu publicación. E - Fondo de la publicación (Captura de pantalla del plugin - E) Establece el color de fondo de la página activa en tu publicación. ¡Tu también puede enriquecer tus pop-ups con contenido multimedia!! Tus pop-ups pueden contener animaciones de InDesign, vídeos, imágenes, pdf, enlaces a alguna página dentrode tu publicación o sitios externos. ¡Ya casi has terminado, todo lo que te falta por hacer es publicar! En el plugin, haz clic en “Completar proyecto > Gestionar configuración” para establecer los detalles finales de tu publicación. Serás redirigido a nuestra plataforma. Si aún no has iniciado sesión, ingresa las credenciales de tu cuenta (las mismas que usas en el plugin). Ahora completa tu publicación: A - Configuración (captura de pantalla del plugin - A): establece los ajustes que quieras activar. Fecha de publicación, código de Google Analytics, lenguaje de la interface, entre otros. B - Diseño (captura de pantalla del plugin - B): personaliza la interface con tu logo, elige los iconos, establece el color de la barra, el fondo, entre otros. C - Integración (captura de pantalla del plugin - C): obtén la URL de tu proyecto, o descarga un máster para integrar en un servidor privado. D - Publicar (captura de pantalla del plugin - D): has disponible tu publicación interactiva, desde este momento tu URL es definitiva (50 créditos). Importante: la función compartir (captura de pantalla del plugin - E) permite que tus colegas o clientes validen la publicación antes de hacerla publica de forma definitiva. Los textos deben estar agrupados en la misma capa, y esta capa debe estar ser la primera sobre todas las demás. 3 - Optimización de las imágenes Optimizar las imágenes antes de insertarlas en tu documento : usar imágenes con maximo 2048 px de ancho, o 2048 px de altura. Si agregas una imagen detrás de una máscara más grande que la misma imagen, la exportación generará una imagen PNG muy pesada, y el área vacía se exportará como transparencia. ¡Tu publicación interactiva en 6 pasos!