Cómo crear prototipos interactivos en PDF's desde Visio
Tirando de un post de Caitlin Gannon, hago una libre traducción de su artículo "How to create an interactive PDF prototype in Visio".
Si has tratado de explicar el diseño de un sitio mediante papel, sabes el valor de presentarlo en una versión interactiva con hipervínculos. Los usuarios de Visio saben que es muy sencillo crear un prototipo interactivo en HTML a partir de un set de wireframes (Archivo>Guardar como Página Web), pero para mí, el mayor inconveniente es que el prototipo no se puede transportar. Necesito una manera de comunicar los diseños por email, y no hay ninguna manera de que esté enviando un montón de archivos HTML y GIF a la gente (o un link a una página, dado que no todo el mundo tiene acceso a la red).
1. Crear hipervínculos en las páginas de primer plano, no en las de fondo - y usar los stencils del documento para gestionar las modificaciones
Es una practica habitual cuando se crean wireframes en Visio colocar los elementos standard de las páginas - cabecera, pie de página, navegación - en una página de fondo (background), así esos elementos se repetiran en cada página de primer plano (foreground). De cualquier manera, cuando publicas un PDF, Visio no crea hipervínculos de las capas de fondo. Para poder tener prototipos interactivos en PDF estos tienen que estar en las paginas de primer plano. Esto significa que para una distribución de página standard, todos los elementos de navegación tienen que estar en cada página del wireframe. Se podrían copiar y pegar los elementos de navegación en cada página, pero eso supondría un mantenimiento bestial. En vez de eso, usa los stencils del documento.
Funcionan así:
- Crea un panel de navegación, usando una forma distinta para cada link. Por ejemplo, para crear 5 pestañas en la parte superior de la página, construye cada pestaña en un bloque de texto separado.
- Para añadir hipervínculos, pulsa CTRL+K para abrir el cuadro de diálogo de hipervínculos. Después de la subdirección (no de la dirección), pincha Examinar y encuentra la página de tu wireframe sobre la que quieres hacer el vínculo. (O introduce la URL). Pincha OK.
- Repite 1 y 2 todo lo necesario. Una vez que esté hecha el área de navegación, agrúpala (selecciona todos los elementos, y presiona Shift+CTRL+G).
- Abre los Stencil del documento: Archivo>Formas>Mostrar lápices del Documento
- Arrastra los elementos agrupados de navegación al panel de Stencils.
- Haz clic derecho sobre el grupo de elementos y renómbralos (por ejemplo "NavBar")
- En cada una de las páginas de tu wireframe, arrastra este elemento sobre la página de primer plano y colócalo en su posición.
- Si necesitas hacer cambios al grupo de navegación, haz clic derecho sobre el stencil del documento y selecciona Edición maestra>Edición de forma maestra. Cualquier cambio que hagas se actualizará automáticamente en todas las páginas.
Para que los hipervínculos del PDF funcionen, usa el menú de PDF en Visio (Adobe PDF>Convertir a Adobe PDF). Por alguna razón, si usas Archivo>Imprimir y eliges Adobe PDF como impresora, los hipervínculos en el PDF no funcionan.
El resultado final tendrá hipervínculos funcionando en cada página. Para cambiar los estados de los botones o crear otros elementos interactivos, necesitarás editar el archivos en Acrobat (evita este paso hasta que estés seguro de que el archivo está acabado, porque si rehaces el PDF desde Visio los cambios en Acrobat se habrá perdido)
3. LLévalo al siguiente nivel
Y esto es todo. Espero que a alguien le sirva este artículo tanto como a mí.
.