Introducción

• La nueva serie XD de reproductores BrightSign permite publicar contenido usando HTML5. Se puede usar una única página HTML5 a pantalla completa como presentación, o bien podemos usar HTML5 dentro del conjunto de zonas de la pantalla definidas en BrightAuthor junto con cualquier otro tipo de contenido multimedia. Esta funcionalidad incrementa significativamente sus opciones de creatividad usando los reproductores BrightSign.

• Estas instrucciones no están dirigidas a la publicación de HTML5 o uso de software para su publicación en un propósito más general, pero resultan efectivas como guía a seguir para asegurarse que todas sus presentaciones con contenido HTML5 funcionan sin problemas en los reproductores BrightSign XD.

Consejos para la publicación de HTML5

Esta sección está dirigida a todo aquél que desee usar contenido HTML5 en presentaciones con BrightAuthor; también hay una sección avanzada al final de esta guía para usuarios que quieran escribir código BrightScript personalizado.

Detalles a tener en cuenta a la hora de crear presentaciones HTML5 para los reproductores BrightSign XD:

1. Una zona HTML5 no está pensada para ser usada como un navegador de propósito general. Es mejor pensar en los equipos BrightSign XD como reproductores HTML con interactividad y no como navegdores web.
2. Las páginas de contenido denso como juegos web o aplicaciones que usen WebGL u otras API avanzadas pueden no reproducirse correctamente. Estas páginas HTML5 requeren procesadores más complejos que los que ofrecen los BrightSign.
3. Los reproductores BrightSign no soportan contenido Flash. Cualquier página HTML5 que tenga contenido Flash embebido no se reproducirá correctamente. La mayoría del software de Flash propietario, en especial Adobe Creative Suite, disponen de herramientas que le permiten exportar el contenido de Flash a HTML5.
4. Actualmente, no se pueden incorporar objetos de streaming de vídeo, tales como YouTube o Vimeo, en las páginas HTML5.

Creación de páginas HTML5

Realice los siguientes pasos a la hora de crear páginas HTML5:

1. Asegúrese que la página HTML5 tiene las mismas proporciones y ratio que su pantalla de cartelería. Si usa contenido HTML5 en una zona de BrightAuthor que es más pequeña que la pantalla, cree la página con el mismo ratio que la zona de su layout.
2. Use una <div> maestra alineada a 0.0 cuando cree la página HTML. Esto aseguará la alineación correcta.
3. Al crear efectos animados en una página HTML5, asegúrese que el color de fondo es diferente al de la opción por defecto. Si deja el color en "default", la animación sufrirá problemas de re-dibujo mientras funcione en el reproductor.
4. Cuando cree un sitio HTML5, asegúerse que los objetos de la página web (ficheros de imágenes, vídeo, etc.) están en la misma carpeta en su disco local. Ésta es la carpeta del "sitio web", significando que todos los contenidos de esta carpeta y sus subcarpetas serán utilizados para la reproducción de su página web. Si estos contenios no están en la carpeta, no se reproducirán cuando se publique el proyecto.
5. Puede probar la plantilla y apariencia de una página HTML5 localmente abriéndola con Google Chrome, que usa la misma API que los BrightSign XD. Si la página web dibuja objetos desde múltiples ficheros o lugares de almacenamiento, (por ejemplo, almacenamiento local y un servidor web remoto), use Safari para probar la página.

Uso de páginas HTML5 en BrightAuthor

Éstas son las directrices genrales para usar contenido HTML5 en BrightAuthor

1. Puede tener varias zonas HTML5 en una misma presentación de BrightAuthor
2. El contenido HTML5 se puede insertar en una zona de vídeo/imágenes o sólo de imágenes. No se puede usar contenido HTML5 en una zona de sólo vídeo.
3. El contenido HTML5 se mostrará en la capa superior de la componente Z, significando que el contenido en HTML5 cubrirá todas las demás zonas que contengan vídel, imágenes y texto.
4. Mediante un hub o switch Ethernet común, conecte todos los reproductores BrightSign. No es necesaria ninguna conexión a internet para su sincronía.
5. Cree cada contenido para cada pantalla sincronizada. Una unidad BrightSign maestra debe marcar el sincronismo al resto de equipos coordinándolos en tiempo.

1. El contenido en HTML5 se puede originar desde un servidor remoto, servidor local o volumen de almacenamiento local (SD) de un reproductor XD.
2. Si su contenido HTML5 dispone de contenidos de multiples localizaciones, marque la casilla "enable external data" a la hora de crear o editar un estado HTML5.



3. BrightAuthor de momento no soporta la subida de contenido en HTML5 a la red de BrightSign Network. Esta funcionalidad estará disponible en breve. Por ahora, si se desea reproducir contenido HTML5 en local, (p. ej. en la tarjeta SD), deberá usar el método de publicación en almacenamiento local.

Optimización de contenido HTML5 para los reproductores BrightSign

1. A menudo es deseable ocultar las barras de scroll de una página web cuando se muestre en cartelería digital. Se pueden añadir las siguientes líneas al código CSS para ocultar las barras de scroll:

::-webkit-scrollbar {
width: 0px;
height: 0px;
background: black;}

2. Cuando el reproductor BrightSign cargue el contenido HTML desde una URL, puede haber un retraso introducido por la latencia de la red. Se puede añadir una imagen precargada para solventar este problema:

a. Arrastre un fichero de imagen desde su librería.
b. Marque la casilla de verificación "Set as initial state" al editar el estado de la imagen.
c. Añada un evento "Timeout" a esta imagen.
d. Especifique el evento "timeout" a 3 segundos o más si lo desea.
e. Establezca el evento "Timeout" como transición al estado del HTML5.

Recursos HTML5

Hay muchísimos recursos online -incluyendo tutoriales, mustras, plantillas y widgets- disponibles para ayudarle a comenzar creando contenido HTML5. El estándar HTML5 ofrecen grandes ventajas a los desarrolladores web, incluyendo autores de cartelería digital. Los siguentes enlaces son muy útiles para aprender a crear páginas usando HTML5:

1. http://www.html5report.com
2. http://www.w3schools.com

Wordpress

Wordpress es un excelente recurso HTML5 que proporciona una solución intuitiva para crear cartelería digital. Aquí hay algunos de los beneficios de la arquitectura wordpress:

3.   Wordpress ofrece soporte avanzado HTML5, con widgtes que oscilan desde el tiempo al e-commerce. El sistema también soporta opciones HTML5 avanzadas usando las funcionalidades CSS3. Aquí hay sitios que proporcionan las widgets HTML5:
4. http://www.jqwidgets.com
5. http://flexslider.woothemes.com
6. También puede hacer fucnionar wordpress desde su propio gestor de contenidos o instalar una instancia de wordpress en sus propios servidores.
7. Wordpress tiene un sistema de creadores de plantillas que ofrecen plantillas sofisticadas para un inmenso rango de industrias.
   Estos creadores incluyen los siguientes:
8. http://www.rockettheme.com/wordpress
9. http://www.templatemonster.com
10. http://graphpaperpress.com

Edición de HTML5

Éstas son algunas de las aplicaciones comunes para la edición de HTML5:

11. Adobe CS Tools: Dreamweaver, Illustrator, InDesign, Photoshop
12. Aptana Studio
13. CoffeeCup Software

Técnicas avanzadas

Esta sección está dirigida a aquellos usuarios que están familiarizados con los lenguajes de scripting. Véase el BrightScript Reference Manual y BrightScript Object Reference en la documentación de BrightSign para más detalles.

Script sencillo de página Web

El sencillo script que se muestra a continuación muestra una página web almacenada en un servidor local o remoto.

Nótese que el script tiene una línea "sleep(3000)". Esta línea retrasa la carga de la URL de la web, lo cual es necesario para prevenir los retrasos que pueda introducir la red. Si no se usa este script, el reproductor BrightSign podría no conectar a tiempo para cargar la página, con el resultado del error "cannot resolve the host", que se resumiría en una carencia de conexión a la web.

Sub Main()


msgPort = CreateObject("roMessagePort")
r = CreateObject("roRectangle", 0, 0, 1920, 1080)
h = CreateObject("roHtmlWidget", r)
h.SetPort(msgPort)


' h.SetURL("http://www.brightsign.biz")
h.SetURL("file:///testpage.html")


sleep(3000)


h.Show()

while true
       msg = wait(0, msgPort)
       print "type(msg)=";type(msg)
              if type(msg) = "roHtmlWidgetEvent" then
                     eventData = msg.GetData()
                     if type(eventData) = "roAssociativeArray" and type(eventData.reason) = "roString" then
                            print "reason = ";eventData.reason
                            if eventData.reason = "load-error" then
                                   print "message = ";eventData.message
                            endif
                     endif
              endif
end while

End Sub