SpinetiX: Guía básica Hyper Media Director Instalación del HMD y primeros pasos Nivel de General Versión: 1 Crambo, S.A. Avda. Del Sol, 11 28850 Torrejón de Ardoz (Madrid - España) CRAMBO, S.A. - Inscrita en el Registro Mercantil de Madrid, Tomo 7.104, General 6095 de la Sección 3ª del Libro de Sociedades, Folio 85, Hoja nº 71.823-2, Inscripción 1ª - CIF: A 78/198017
Índice 1. Introducción... 1 2. Obtener HMD... 2 3. Introducción al interfaz gráfico... 3 4. Creación de contenido... 5 4.1. Proyectos Hyper Media... 6 4.2. Crear un nuevo proyecto... 7 4.3. Importar archivos... 12 4.4. Listas de reproducción... 13 5. Publicación del contenido... 16 Edición: 1 Página: I
1. Introducción Hyper Media Director (HMD) es una aplicación software desarrollada por SpinetiX para simplificar la implementación y la gestión diaria de los proyectos de Digital Signage en los dispositivos Hyper Media Player (HMP). Permite crear, pre visualizar, planificar y publicar contenido Hypermedia. Diseñado para uso en un amplio rango de mercados verticales y aplicaciones de Digital Signage (incluyendo publicidad, pantallas de información, directorio, sistemas de emergencia y Videowall), Hyper Media Director provee una interfaz sencilla de arrastrar y soltar para gestionar contenido, tanto en un dispositivo HMP como en una red distribuida con muchos reproductores. Edición: 1 Página 1
2. Obtener HMD La última versión del programa siempre está disponible para descargar en la dirección http://www.spinetix.com/go/hmd Una vez hayamos descargado el programa en un PC ejecutando Windows (XP, Vista o 7), todos los componentes son instalados desde un asistente de instalación estándar. La primera vez que ejecute HMD, se le requerirá activar el software (requiere de conexión a internet) a. Si solamente quiere evaluar el producto, seleccione la opción 30-day trial y dispondrá de una copia totalmente funcional durante 30 días de la versión Lite. b. Si dispone de una licencia válida para activar el programa, seleccione Enter product key para registrar el programa. Edición: 1 Página 2
3. Introducción al interfaz gráfico Hyper Media Director está diseñado para ofrecer una interfaz gráfica sencilla que provee fácil acceso a todas las funciones soportadas: - Creación, pre visualización, planificación y publicación de contenido - Gestión y monitorización de dispositivos Cuando se abre HMD, se mostrará la vista de la interfaz gráfica por defecto: Barra de menú Panel de pre visualización Panel de edición Panel de exploración Fig 1 - Zonas de Hyper Media Director Barra de estado - La barra de menú de la aplicación da acceso a varios diálogos y parámetros. Varios de los ítem de los menús están duplicados en opciones de contexto dentro del interfaz. - El panel de pre visualización muestra el contenido del archivo abierto como aparecería en el HMP. La línea de tiempo y el simulador de fecha y hora permite avanzar en el contenido y pre visualizar en avance. - El panel de exploración se usa para explorar ubicaciones locales o remotas, como en el explorador de archivos. Por defecto abre la vista del Espacio de trabajo, conteniendo las siguientes carpetas: o Mis Dispositivos: Acceso a los dispositivos HMP instalados en su red. HMD usa un servicio por separado para detectar automáticamente los dispositivos. o Mis Proyectos: Organiza y abre los proyectos que serán publicados en los HMP. Haciendo click con el botón derecho sobre las carpetas de proyecto, se puede acceder a operaciones estándar de fichero como renombrar o borrar. o Mis Plantillas: Varias plantillas de contenido Hyper Media están incluidas con el HMD, para ayudar a crear proyectos desde el primer momento. Pueden ser importadas en su proyecto, y personalizarlas para aplicar animaciones, o conectar con fuentes RSS, controlar periféricos y mucho más. Mis Elementos Fusion: Esta carpeta sólo se mostrará en la versión PRO de HMD, y contendrá las plantillas FUSION que hayamos creado. - El panel de edición cambiará de acuerdo al contenido abierto. Usa una disposición familiar basada en capas, calendario, o diapositivas ordenadas para organizar elementos dentro de los archivos SVG. Edición: 1 Página 3
- La barra de estado mostrará el progreso de las acciones pendientes. El tamaño de la ventana puede ser adaptado al tamaño de su monitor. No obstante, un tamaño mínimo es requerido para garantizar que el interfaz funcione correctamente. El tamaño de los 3 paneles puede ser ajustado usando las zonas de agarre ubicadas entre los paneles para arrastrar su dimensión relativa. Se puede forzar una relación de aspecto predefinida para la ventana de pre visualización, o usar una disposición vertical usando el menú de Parámetros. Fig 2 - Orientación de pre visualización Fig 3 - Rel. aspecto pre visualización Edición: 1 Página 4
4. Creación de contenido Existen muchas soluciones comerciales disponibles para producir contenido SVG nativo profesional, así como soluciones de código abierto como InkScape que están disponibles gratuitamente. Esas son herramientas ideales para la creación de recursos gráficos para la aplicación (plantillas, máscaras, animaciones personalizadas, etc). Para contenido gráfico (no vectorial) Adobe Photoshop, JASC Paint Shop Pro y aplicaciones similares salvarán los archivos nativamente en formatos que se pueden importar en HMD. HMD no ha sido diseñado para reemplazar esas herramientas dedicadas. En vez de eso, HMD es una aplicación simple generada hacia usos específicos de Digital Signage, ubicado como un software intermedio entre su flujo de trabajo de diseño existente, y su red de dispositivos HMP. Qué podemos hacer con las capacidades de creación de HMD? - Combinar una imagen de fondo con texto, videos, animaciones e imágenes. - Personalizar elementos de media importados: Controlar su posición en la escena, fuente, color, opacidad, y transparencia. - Añadir y editar áreas de texto con colores de fondo y bordes - Cambiar el orden de las capas de una escena, para construir progresivamente un proyecto con múltiples objetos solapados. - Aplicar efectos de animación - Crear listas de reproducción ordenadas de varios tipos de contenido media. Edición: 1 Página 5
4.1. Proyectos Hyper Media HMD usa proyectos para crear y pre visualizar contenido que será publicado posteriormente en dispositivos HMP. Es importante comprender el concepto de proyecto antes de continuar. Un proyecto es una carpeta especial que contiene un archivo principal (index.svg) y cualquier número de elementos de media (videos, imágenes, textos, animaciones, scripts, etc) que son compuestos en conjunto para crear una presentación Hyper Media. No todos los elementos media necesitan existir localmente dentro de un proyecto; el HMP puede acceder a ubicaciones remotas y obtener contenido en el momento. El rol de index.svg dentro de un proyecto es similar al index.html de un sitio Web. Por defecto, HMD ubica todos los proyectos bajo la carpeta Mis Proyectos, una carpeta creada automáticamente en el PC durante la instalación de HMD. Esta carpeta está dentro de la carpeta SpinetiX ubicada en Mis Documentos. La carpeta Mis Proyectos aparece en el área de exploración cuando se selecciona la vista Espacio de trabajo. Se pueden abrir múltiples vistas y navegar dentro de cada una de ellas, cada vista se mostrará en una pestaña diferente. Cuando se abre la carpeta Mis Proyectos, se puede hacer click con el botón derecho del ratón en el área de exploración para acceder a varios comandos: - Crear un nuevo proyecto - Crear una nueva carpeta de colección de proyectos, para organizar los proyectos en grupos funcionales. Estas son carpetas normales de Windows, con un TAG añadido para que HMD pueda reconocerlas como colección de proyectos. Fig 4 - Espacio de trabajo Fig 5 - Mis Proyectos Usando proyectos HMD en vez de editar directamente los archivos en el dispositivo tiene varias ventajas, entre ellas: - Creación sin conexión, pre visualización y modificación continua sin afectar al contenido actual mostrado en el HMP. Cuando el proyecto está acabado, se publica en el dispositivo de destino. - El usuario puede aplicar sistemas convencionales de respaldo a la carpeta Mis Proyectos para reducir el riesgo de pérdida de datos. - Publicación multi-dispositivo, un único proyecto se puede publicar sobre una unidad única o sobre múltiples unidades al mismo tiempo. Edición: 1 Página 6
4.2. Crear un nuevo proyecto Para crear un nuevo proyecto, nos ubicaremos dentro de la carpeta Mis Proyectos. Una vez dentro, haremos clic con el botón derecho del ratón sobre un área vacía del panel de exploración y seleccionaremos Nuevo Proyecto - Nombre: Definimos un nombre para identificar el proyecto. - Formato: Este parámetro vendrá definido por la relación de aspecto y orientación del monitor al que vaya destinado el proyecto. Los valores posibles son: o 16:9, para monitores panorámicos en horizontal o 4:3, para monitores normales en horizontal o 16:10, para monitores panorámicos cinema en horizontal o 9:16 para monitores panorámicos en vertical o 3:4 para monitores normales en vertical o 10:16 para monitores panorámicos cinema en vertical o Multipantalla, cuando vamos a usar multiples pantallas para un proyecto (Videowall) - Destino: Debemos seleccionar que reproductor vamos a usar para este proyecto. Una vez hagamos clic en Aceptar, nos aparecerá dentro del panel de exploración un proyecto con el nombre que le hayamos establecido. Para abrirlo, haremos doble clic en el, y nos aparecerán los archivos del proyecto (al ser nuevo, solamente habrá un index.svg por defecto) Edición: 1 Página 7
Haremos doble clic en el archivo index.svg para editarlo, y la ventana del HMD se nos quedará de la siguiente forma: Como vemos, dispondremos en una vista previa en el panel de pre visualización, y se nos abrirán unas pestañas en la zona inferior del panel de edición Explicaremos a continuación con detalle las dos primeras, dejando las otras dos pestañas para un documento más avanzado. Edición: 1 Página 8
4.2.1. Propiedades Nos permitirá modificar las propiedades del documento SVG - Título: Título del documento - Descripción: Descripción del documento - Duración: Es la duración que va a tener nuestro documento. Se usa en caso de que nuestro archivo forme parte de una lista de reproducción, para establecer cuánto tiempo se mostrará en pantalla. - Color de fondo: Color de fondo del papel tapiz, podremos seleccionar un color de la escala RGB, o seleccionar Ninguno para que nuestro lienzo sea transparente. - Tamaño del lienzo: Tamaño en píxeles del lienzo. - Anchura / Altura por defecto: Establece la anchura / altura por defecto al crear una nueva capa - Posición por defecto: Establece la posición de la nueva capa al crearla - Relación de aspecto por defecto: Establece la relación de aspecto que tendrá la nueva capa. Edición: 1 Página 9
4.2.2. Capas Nos permitirá componer el contenido ubicando capas en nuestro lienzo. Para crear una nueva capa dentro del lienzo, podemos hacerlo de varias formas: - Haciendo clic con el botón derecho sobre cualquier capa en la zona de edición, y seleccionar Insertar Multimedia o Insertar Texto - Pinchando y arrastrando elementos del panel de exploración a la zona de edición. Si soltamos sobre una capa ya establecida, nos reemplazará la capa con el nuevo elemento. Edición: 1 Página 10
- Pinchando y arrastrando elementos del panel de exploración a la zona de pre visualización. El orden de visualización de las capas viene definido en por la posición de la capa en la zona de edición, cuanto más abajo esté ubicado en la lista de capas, más externa es (más encima está) Edición: 1 Página 11
4.3. Importar archivos HMD permite importar archivos, de tal forma que podemos usar recursos multimedia (imágenes, video y audio) creados desde otros programas en nuestras composiciones. Importar ficheros es muy sencillo, solo hemos de buscar en el explorador de Windows el archivo que queremos importar, y arrastrarlo hasta el panel de exploración del HMD. Si el archivo es válido, HMD lo importará a la carpeta de proyecto. Esto es válido también para archivos de Power Point (PPTX), con las siguientes restricciones: - La presentación debe ejecutarse de principio a fin sin interacción por parte del usuario, es decir, debe tener transición entre diapositivas automáticas según tiempo y no requerir que el usuario haga clic con el ratón. - Si la presentación ha sido creada con powerpoint 2007 / 2010, se debe tener instalado en el ordenador el visor de PowerPoint 2007 (http://www.microsoft.com/download/en/details.aspx?id=6) - La presentación debe usar una relación de aspecto estándar (4:3, 16:9 o 16:10) con orientación horizontal - No se importa audio de la presentación Edición: 1 Página 12
4.4. Listas de reproducción Si queremos incluir dentro de nuestro proyecto un carrusel de archivos multimedia (archivos que se van reproduciendo uno tras otro), haremos clic en una zona vacía del panel de exploración, y seleccionaremos Nuevo Playlist Le damos un nombre y hacemos doble clic sobre el archivo para abrirlo Edición: 1 Página 13
En la zona de edición, veremos que tenemos la pestaña Playlist, ahí es donde deberemos de arrastrar los elementos que queremos que aparezcan en el playlist, de forma ordenada. A cada elemento dentro del playlist, habrá que definirle el tiempo que deberá estar en pantalla, para ello, sobre cada elemento del playlist a la derecha hay un botón con 3 puntos dentro, lo presionamos, y modificaremos el campo Duración, estableciendo el tiempo en formato hh:mm:ss Una vez creado el playlist, podremos meterlo como una capa más en nuestro index.svg. Poner los códigos hexadecimales precedidos de &#x y terminados con ; sin marcar la opción This is a byte string, en el ejemplo anterior sería � Edición: 1 Página 14
- Pinchamos en el botón Submit y nos saltará una ventana con la descarga de un fichero llamado protocol.fsm - Lo guardaremos en una carpeta, ya que lo usaremos en el paso siguiente. Edición: 1 Página 15
5. Publicación del contenido Una vez tenemos nuestros proyectos preparados, tan solo deberemos publicarlos. Para ello, arrastraremos la carpeta del proyecto sobre el equipo o conjunto de equipos sobre los que queramos publicar. Deberemos por tanto tener abiertas dos pestañas en la zona de exploración, una con Mis Dispositivos y otra con Mis Proyectos Edición: 1 Página 16