desarrollo de aplicaciones en tv inteligentes (smart...
TRANSCRIPT
TRABAJO FIN DE MASTER MÁSTER UNIVERSITARIO EN DESARROLLO DE SOFTWARE
Desarrollo de Aplicaciones en TV inteligentes (Smart TV) basado en
Tecnologías web
Autor
Rodrigo Alexander Saraguro Bravo
Director
Juan Antonio Holgado Terriza
Escuela Tecnica Superior de Ingenierıas Informatica y de
Telecomunicacion
—
Granada, Julio de 2014
Desarrollo de Aplicaciones en TV inteligentes (Smart TV) basado en
Tecnologías web
Autor Rodrigo Alexander Saraguro Bravo
Director
Juan Antonio Holgado Terriza
Desarrollo de Aplicaciones en TV inteligentes (Smart TV) basado en
Tecnologías Web
Rodrigo Alexander Saraguro Bravo
Palabras clave: Smart TV, App, SDK, JavaScript, Css, HTML5
Resumen
Durante los últimos años hemos sido testigos de cómo la tecnología de muchos dispositivos con acceso a Internet han tenido un gran crecimiento y evolución. Es así que los Smart TV también forman parte de esta popularidad y poco a poco se ha ido afianzando en el mercado. Los aspectos más importantes son su interactividad y los aspectos sociales que pueden ser incorporados en la transmisión por televisión. En este estudio se ha presentado un estado del arte de la tecnología, se describe los fundamentos y el proceso para construir aplicaciones Smart TV a partir de tecnologías web como HTML5, CSS, JavaScript. Se analizan los requisitos de interfaz de usuario basados en los principios de diseño propuesto por Google, Samsung y Smart TV Alliance. Se ha seleccionado dentro del caso de estudio el kit de desarrollo SDK 4.5 para plataformas Samsung Smart TV compatible con los modelos 2013 o superiores lo que nos permitirá demostrar las diversas características que se podrían explotar. En la parte final se evalúa la aplicación desarrollada, con respecto a la usabilidad, navegación, orientación y rendimiento basado en los principios de diseño propuestos.
Smart TV Applications Development based on Web Technologies
Rodrigo Alexander Saraguro Bravo
Keywords: Smart TV, App, SDK, JavaScript, Css, HTML5
Abstract
In recent years we have witnessed how many technology devices with Internet access have had tremendous growth and evolution. Thus, the Smart TV also part of this popularity and gradually has been strengthening in the market. The most important aspects are its interactivity and the social aspects that can be incorporated into the telecast. In this study is presented a state of the art of Smart TV technology, it describes the fundamentals and the process how to build Smart TV applications using web technologies like HTML5, CSS and JavaScript. User Interface Requirements were analyzed based design principles proposed by Google, Samsung Smart TV Alliance. In case study is selected development kit SDK 4.5 for Samsung Smart TV platforms and supports 2013 or higher models, this will allow demonstrate the various features that could be exploited. Finally the application developed is evaluated, according to their usability, navigation, guidance and performance based on the design principles proposed.
Agradecimientos
Mi más sincero agradecimiento a mis padres, cuya confianza y fortaleza ha sido depositado en mí hoy y siempre; de igual forma a mis hermanos, familiares cercanos, por contribuir de alguna manera en cumplir esta meta. A SENESCYT por la oportunidad que me ha brindado al formar parte del selecto grupo de becarios, y poder financiar el presente máster. A mi director Dr. Juan A. Holgado, por su excelente dirección, su tiempo de dedicación y motivación hacia mí, puntos clave para la culminación del trabajo. A mis profesores del master, por inculcar en mí las bases necesarias para iniciar mi camino hacia la investigación que me han servido de mucha ayuda en todo este proceso. A mis compañeros y amigos cercanos que supieron brindarme su apoyo desinteresado en el transcurso de este objetivo. Rodrigo
IX
Tabla de Contenidos
Tabla de Contenidos ................................................................................................................. IX
Índice de Figuras .................................................................................................................... XIII
Índice de Tablas ....................................................................................................................... XV
CAPITULO I .............................................................................................................................. 17
1. INTRODUCCIÓN ................................................................................................................... 17
1.1 ANTECEDENTES Y MOTIVACION .................................................................................. 17
1.2 OBJETIVOS ................................................................................................................... 17
1.3 ESTRUCTURA DEL TRABAJO......................................................................................... 18
CAPITULO II ............................................................................................................................. 21
2. ESTADO DEL ARTE ............................................................................................................... 21
2.1 SMART TV .................................................................................................................... 21
2.1.1 Definición ............................................................................................................ 21
2.1.2 Características ..................................................................................................... 21
2.1.3 Arquitectura ........................................................................................................ 23
2.1.4 Sistemas Operativos ............................................................................................ 23
2.1.5 Actualidad............................................................................................................ 24
2.1.6 Futuro .................................................................................................................. 29
2.2 HERRAMIENTAS Y TECNOLOGÍAS ................................................................................ 30
2.2.1 Herramientas de desarrollo ................................................................................ 30
2.2.2 Tecnologías Web ................................................................................................. 31
2.3 SAMSUNG SMART TV .................................................................................................. 33
2.3.1 Plataforma ........................................................................................................... 33
2.3.2 Funcionamiento .................................................................................................. 33
2.3.3 Características ..................................................................................................... 33
2.3.4 Aplicaciones ......................................................................................................... 35
2.4 TRABAJOS RELACIONADOS .......................................................................................... 37
2.4.1 Samsung Smart School ........................................................................................ 37
2.4.2 Smart TV Hacking ................................................................................................ 38
2.4.3 Usabilidad en dispositivos Smart TV ................................................................... 38
2.4.4 Smart TV - a more interactive way of watching TV ............................................. 38
2.5 PARADIGAMAS DE INTERACCIÓN ............................................................................... 39
2.5.1 Control por voz .................................................................................................... 39
X
2.5.2 Control por gestos ............................................................................................... 39
CAPITULO III ............................................................................................................................ 41
3. PROGRAMACIÓN DE APLICACIONES SMART TV ................................................................. 41
3.1 FUNDAMENTOS ........................................................................................................... 41
3.1.1 Proceso de desarrollo de Apps ............................................................................ 42
3.1.2 Tipos de aplicaciones........................................................................................... 42
3.1.3 Arquitectura de Aplicaciones .............................................................................. 44
3.2 SDK SAMSUNG SMART TV ........................................................................................... 44
3.2.1 Características ..................................................................................................... 45
3.2.2 SDK 4.5 ................................................................................................................ 46
3.2.3 Última Actualización SDK 5.1 .............................................................................. 46
3.2.4 Proceso de Desarrollo de Aplicaciones Samsung Smart TV ................................ 47
3.3 OTRAS PLATAFORMAS ................................................................................................ 64
3.3.1 SDK Smart TV Alliance ......................................................................................... 64
CAPITULO IV ............................................................................................................................ 67
4. PRINCIPIOS DE DISEÑO DE APLICACIONES SMART TV ........................................................ 67
4.1 PRINCIPIOS DE DISEÑO SAMSUNG SMART TV ............................................................ 68
4.2 PRINCIPIOS DE DISEÑO GOOGLE TV ........................................................................... 69
4.3 PRINCIPIOS DE DISEÑO SMART TV ALLIANCE ............................................................. 70
4.4 PRINCIPIOS DE DISEÑO PROPUESTOS Y RECOMENDACIONES .................................... 72
4.4.1 Principios de diseño ............................................................................................ 72
4.4.2 Consideraciones Técnicas .................................................................................... 73
CAPITULO V ............................................................................................................................. 75
5. CASO DE ESTUDIO ............................................................................................................... 75
5.1 DESCRIPCIÓN DE LA PROPUESTA ................................................................................ 75
5.2 ANÁLISIS DE LA PROPUESTA ........................................................................................ 75
5.3 MATERIALES ................................................................................................................ 76
5.3.1 Hardware ............................................................................................................. 76
5.3.2 Software .............................................................................................................. 76
5.4 METODOLOGÍA DE DESARROLLO ................................................................................ 77
5.4.1 ANALISIS PRELIMINAR Y ESPECIFICACIÓN DE REQUISITOS ................................. 77
5.4.2 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DEL PROTOTIPO ............................ 78
5.4.3 PRUEBAS DEL PROTOTIPO ................................................................................... 86
5.4.4 REFINAMIENTO ITERATIVO DEL PROTOTIPO ...................................................... 89
XI
5.4.5 REFINAMIENTO DE LAS ESPECIFICACIONES DE REQUISITOS .............................. 90
5.4.6 DISEÑO E IMPLEMENTACIÓN DEL SISTEMA FINAL .............................................. 90
5.5 EVALUACIÓN DE LA APLICACIÓN ................................................................................ 94
5.5.1 Criterios de evaluación ........................................................................................ 94
5.5.2 Resultados ........................................................................................................... 99
6. CONCLUSIONES ................................................................................................................. 105
BIBLIOGRAFÍA ........................................................................................................................ 107
ANEXO 1 ................................................................................................................................ 109
XIII
Índice de Figuras
Figura 1. Samsung Smart Tv ........................................................................................................ 22
Figura 2. Arquitectura Smart TV .................................................................................................. 23
Figura 3. Comparativa de Smart TVs 2014 .................................................................................. 28
Figura 4. Proceso de desarrollo de aplicaciones ......................................................................... 42
Figura 5. Tipos de Proyecto y su Arquitectura ............................................................................ 43
Figura 6. Aplicación en un Smart TV y un Ordenador ................................................................. 44
Figura 7. Proceso desarrollo y despliegue de Apps para Samsung Smart TV ............................. 47
Figura 8. Seleccionar el directorio de trabajo o workspace ........................................................ 49
Figura 9. Nuevo Proyecto Smart TV ............................................................................................ 50
Figura 10. Definir Nombre Proyecto ........................................................................................... 51
Figura 11. Archivo inicial Smart TV – index.html......................................................................... 51
Figura 12. Ejecutar proyecto Smart TV........................................................................................ 51
Figura 13. Arranque del emulador .............................................................................................. 52
Figura 14. Librerías para activar el reconocimiento de voz y gestos .......................................... 52
Figura 15. Activar el reconocimiento del ratón en el emulador ................................................. 52
Figura 16. Validar si el dispositivo soporta el reconocimiento de gestos ................................... 53
Figura 17. Manejar eventos de reconocimiento de gestos y voz ................................................ 53
Figura 18. Manejo de comandos establecidos ............................................................................ 54
Figura 19. Aplicación Interactiva controlada por Gestos ............................................................ 55
Figura 20. Localización de Aplicaciones de subida usando Apache ............................................ 56
Figura 21. Empaquetando un proyecto Smart TV ....................................................................... 57
Figura 22. Ventana Empaquetar Proyecto .................................................................................. 57
Figura 23. Actualización de los archivos empaquetados en el servidor ..................................... 58
Figura 24. Archivo de configuración para instalación de Apps en el Smart TV ........................... 59
Figura 25. Configuración de la red .............................................................................................. 60
Figura 26. Consultar estado de la red ......................................................................................... 60
Figura 27. Funciones Smart ......................................................................................................... 61
Figura 28. Cuenta de Samsung .................................................................................................... 61
Figura 29. Iniciar Sesión – Instalación de Apps ........................................................................... 62
Figura 30. Más aplicaciones – Instalación de Apps ..................................................................... 62
Figura 31. Opciones – Instalación de Apps.................................................................................. 62
Figura 32. Configuración IP – Instalación de Apps ...................................................................... 63
Figura 33. Configuración IP – Instalación de Apps ...................................................................... 63
Figura 34. Start Sync App – Instalación de Apps ......................................................................... 63
Figura 35. Sincronización de aplicaciones ................................................................................... 64
Figura 36. Crear proyecto Smart TV Alliance .............................................................................. 65
Figura 37. Emulador Smart TV Alliance ....................................................................................... 66
Figura 38. Arquitectura Física de Aplicación e-Gallery ................................................................ 83
Figura 39. Arquitectura del proyecto .......................................................................................... 84
Figura 40. StoryBoard - Ingresar datos iniciales .......................................................................... 84
Figura 41. StoryBoard - Elegir la temática para presentar los álbumes ...................................... 85
Figura 42. StoryBoard - Seleccionar un sonido de fondo ............................................................ 85
XIV
Figura 43. Álbumes consultados ................................................................................................. 85
Figura 44. StoryBoard - Álbum seleccionado .............................................................................. 86
Figura 45. StoryBoard - Imagen/Video Seleccionado .................................................................. 86
Figura 46. Prototipo - Datos iniciales para generar Álbum ......................................................... 87
Figura 47. Prototipo - Álbumes generados de una cuenta Google ............................................. 87
Figura 48. Prototipo – Visualizar un álbum ................................................................................. 88
Figura 49. Prototipo - Imagen Seleccionada ............................................................................... 88
Figura 50. eGallery - Nueva Interfaz ............................................................................................ 89
Figura 51. eGallery – Interfaz Principal ....................................................................................... 90
Figura 52. eGallery – Información de la Aplicación ..................................................................... 91
Figura 53. eGallery - Indicaciones ............................................................................................... 91
Figura 54. eGallery - Temas ......................................................................................................... 92
Figura 55. eGallery - Sonidos ....................................................................................................... 92
Figura 56. eGallery – Álbumes cargados ..................................................................................... 93
Figura 57. eGallery - Logotipo ..................................................................................................... 93
Figura 58. Prototipo eGallery instalado en el Smart TV .............................................................. 93
Figura 59. eGallery vista desde el Smart TV ................................................................................ 94
Figura 60. Menús de navegación y formulario inicial ................................................................. 96
Figura 61. Enlaces de Navegación de resultados ........................................................................ 97
Figura 62. eGallery – Vista desde un Navegador de PC .............................................................. 97
Figura 63. eGallery – Vista desde Emulador Samsung Smart TV ................................................ 97
Figura 64. eGallery probada en Emulador Smart TV Alliance ..................................................... 98
Figura 65. Pruebas de tiempo de carga. ...................................................................................... 99
Figura 66. Gesto inicial de reconocimiento ............................................................................... 100
Figura 67. Gesto para seleccionar ............................................................................................. 100
Figura 68. Gesto para seleccionar y mover ............................................................................... 101
Figura 69. Gesto para regresar hacia atrás. .............................................................................. 101
Figura 70. Gesto para cambiar de foto ..................................................................................... 101
XV
Índice de Tablas
Tabla 1. Smart TVs y sus Sistemas Operativos ............................................................................ 24
Tabla 2. Aplicaciones en el Samsung Store para Smart Tv .......................................................... 35
Tabla 3. Tabla comparativa de las versiones SDK y su tecnología .............................................. 45
Tabla 4. Diferencias entre entorno Smart TV y PC ...................................................................... 71
Tabla 5. Características Técnicas Desarrollo Apps Smart TV Alliance ......................................... 71
Tabla 6. Requerimientos de la aplicación e-Gallery .................................................................... 78
Tabla 7. Casos de uso – Cargar Galería ....................................................................................... 80
Tabla 8. Caso de Uso – Cargar fotos/videos ................................................................................ 80
Tabla 9. Casos de Uso – Probar Sonidos ..................................................................................... 81
Tabla 10. Casos de Uso – Ver temas ........................................................................................... 82
Tabla 11. Caso de Uso – Ver información ................................................................................... 82
Tabla 12. Requisitos Actualizados ............................................................................................... 90
Tabla 13. Comparación de tipos de control utilizados en la App ................................................ 95
Tabla 14. Pruebas de funcionalidad en cada plataforma ............................................................ 98
Tabla 15. Tiempos de carga en segundos por plataforma .......................................................... 99
Tabla 16. Comparación de Tecnologías soportadas .................................................................. 102
Tabla 17. Comparación de aplicaciones similares a eGallery .................................................... 103
17
CAPITULO I
1. INTRODUCCIÓN
1.1 ANTECEDENTES Y MOTIVACION
Cada día crece el número de dispositivos que se conectan a Internet. Es así
que muchos estudios prevén en el futuro el diseño de hogares inteligentes
donde todos los dispositivos electrónicos estén vinculados y se comuniquen
entre sí para ofrecer servicios en tiempo real de una forma rápida y segura.
Ericsson afirma que habrá más de 50 mil millones de dispositivos conectados
en el 2020 (Eri11), incluyendo la electrónica para uso doméstico, industrial y
automotriz.
Un claro ejemplo de esta nueva era tecnológica son los Smart TV, que han
evolucionado de la TV normal a un TV con mayores prestaciones, capaz de
conectarse a Internet, comunicarse entre dispositivos de la misma red:
ordenadores, teléfonos inteligentes y tabletas, compartir contenido entre ellos, y
aprovechar los servicios en la nube e incluso permitir ver nuestras redes
sociales favoritas. Similar a otros dispositivos, los usuarios de Smart TV
pueden descargar sus aplicaciones disponibles en la web, la mayoría se
enfocan a temas de broadcasting, juegos, videos en HD y 3D.
Así como el número de ventas de Smartphones crece, el uso de este
dispositivo también está adquiriendo gran demanda, que ya según varios
estudios de IabSpain, solo en España ya son más de dos millones de TVs
inteligentes, y esto aumentará en el futuro (Iab13). Debido a esto ha crecido el
número de aplicaciones para televisiones, financiadas por muchas empresas
comerciales, televisivas, agencias y organismos de todo tipo, lo que les permita
descubrir un nuevo canal de comunicación con sus clientes.
Los Smart TV pretenden proporcionar una manera más llamativa, interactiva y
social de ver la televisión, pero frente a esto es necesario conocer ¿qué
aplicaciones serían útiles para los consumidores de televisión?; siendo esto el
mayor desafío de la tecnología.
1.2 OBJETIVOS
En el presente proyecto se pretende explorar las posibilidades de desarrollo de
aplicaciones de Smart TV que toma ventajas con respecto a los contenidos
multimedia disponibles en el televisor, de tal forma que se involucre al usuario
al uso de aplicaciones de una forma más fácil, rápida e interactiva. El objetivo
del trabajo debe responder a las siguientes preguntas:
18
- ¿Cómo desarrollar aplicaciones de Smart TV?
- ¿Qué principios de diseño nos podrían guiar en el desarrollo de apps?
- ¿Qué mecanismos de interacción son más viables en el desarrollo de
aplicaciones para Smart TV?
- ¿Cómo podemos hacer que una aplicación sea más accesible?
- ¿Cómo conseguir que los usuarios deseen interactuar con TV?
Para ello se han establecido los siguientes objetivos específicos:
Investigar el estado del arte de la tecnología.
Averiguar cómo desarrollar aplicaciones para Smart TV.
Analizar los principios de diseño existentes para la orientación y
desarrollo de aplicaciones Smart TV.
Investigar qué tipos de tecnologías y tipos de contenido se permite
recuperar en un Smart TV.
Desarrollar una aplicación Smart TV que brinde una interfaz de usuario
atractiva en pantalla y permita ejecutar sus servicios de manera sencilla
e intuitiva.
El resultado final de este proyecto nos permitirá evaluar tecnologías para el
diseño de aplicaciones, identificar las mejores formas de interacción, y definir
directrices que permitan el desarrollo de un prototipo de aplicación interactiva
para Smart TVs.
1.3 ESTRUCTURA DEL TRABAJO
El trabajo se estructura de cinco capítulos; cada uno de ellos explica en su
mayor detalle las bases necesarias para el inicio, análisis, desarrollo y
conclusión del proyecto.
En el capítulo 1 se describe un resumen general y breve que nos permita
introducir al estado de la tecnología en la actualidad, además de los objetivos
que persigue nuestro estudio.
En el capítulo 2 se presenta el estado del arte de la tecnología, fundamentos,
herramientas y tecnologías disponibles para el desarrollo de aplicaciones Smart
TV.
En el tercer capítulo se realiza un estudio en cuanto a desarrollo de
aplicaciones Smart TV. Se indica todo el proceso que conlleva desde la
preparación del entorno de trabajo hasta su despliegue en un dispositivo real.
Además de herramientas y tecnologías utilizadas.
19
En el capítulo 4 se realiza una revisión de principios de diseño para el
desarrollo de aplicaciones Smart TV. Luego de esto, se resumen un conjunto
de principios de diseño que se recomiendan a partir del estudio realizado, así
como consideraciones fundamentales para cualquier diseño.
En el capítulo 5 se realiza el caso de estudio con respecto al modelo Samsung
Smart TV, el cual consiste en el desarrollo de una aplicación basada en los
principios de diseño definidos y la metodología de software seleccionada.
Además se establecen los criterios de evaluación con el fin de analizar las
diferentes funcionalidades de la aplicación. Lo que permite asegurar un mejor
rendimiento, usabilidad e identificar posibles mejoras del software.
Para finalizar, en el capítulo 6 se presentan las conclusiones generales del
trabajo, y la perspectiva de un trabajo futuro.
21
CAPITULO II
2. ESTADO DEL ARTE
Durante los últimos años hemos sido testigos de cómo la tecnología de muchos
dispositivos con acceso a Internet han tenido un gran crecimiento y demanda.
Es así que los Smart TV también forman parte de esta popularidad y se cree
que será el siguiente gran suceso. Los aspectos más importantes son su
interactividad y los aspectos sociales que pueden ser incorporados en la
transmisión por televisión.
En el presente estudio se analizarán las posibilidades que pudieran existir en el
desarrollo de aplicaciones para plataformas de televisión inteligentes, evaluar
sus prestaciones, qué tipo de servicios se han desarrollado, así como un
análisis de lo que se podría hacer en el futuro.
2.1 SMART TV
2.1.1 Definición
Smart TV es un nuevo concepto, que describe la integración de internet,
servicios multimedia (web 2.0), y comunicación entre dispositivos [Shi13], con
el objeto de proporcionar cierto grado de interactividad y otras características
avanzadas que los TV tradicionales no pueden ofrecer por sí mismos.
2.1.2 Características
La nueva era de dispositivos se caracteriza por presentar diseños innovadores,
mejores prestaciones en cuanto a calidad de imagen, sonido, conectividad a
entre dispositivos, y la navegación en la red. Sin embargo un Smart TV tiende a
destacarse en cuanto a la visualización y reproducción de contenido multimedia
de una forma única: contenidos en HD, 3D y sonidos de la mejor calidad.
A continuación de mencionan las características y servicios más relevantes que
actualmente ofrecen:
Conexión a internet cableado o Wi-Fi
Streaming de vídeo
Interfaz de usuario y navegación
Conexiones HDMI y USB
Gran capacidad de procesamiento
Interactividad móvil
Capacidad de búsqueda y navegación en la web
Capacidad para correr aplicaciones (software)
22
Reconocimiento de gestos, voz y facial para el control de ciertas
aplicaciones.
Figura 1. Samsung Smart Tv1
Existen varias tecnologías asociadas a los dispositivos Smart TV, que pueden
llegar a confundirse; por tal motivo es conveniente explicar cada uno de ellos:
IPTV2 es un sistema en el que los contenidos televisivos se proporcionan a
través del protocolo de Internet (Internet Protocol Television). Se utiliza para los
sistemas de distribución por subscripción de señales de televisión o vídeo
usando conexiones de banda ancha sobre el protocolo IP. A menudo se
suministra junto con el servicio de conexión a Internet, proporcionado por un
operador de banda ancha sobre la misma infraestructura pero con un ancho de
banda reservado.
Internet TV hace referencia a la televisión que entrega de contenido digital a
través de Internet.3 Se diferencia de IPTV, ya que Internet TV se basa en el
flujo libre de información. Si bien las empresas pueden comercializar a través
de esta tecnología, no existe exclusividad de la programación, y pueden
bloquear a otras empresas que proporcionen el mismo contenido. Por su parte,
IPTV mantiene el control de la distribución de contenidos de los medios y las
compañías, esto permite una maximización de su capacidad para comercializar
sus productos.
Un dispositivo Smart TV (figura 1) integra los componentes: social e interactivo
[Per13]. Es por ello que a continuación se detallan que conlleva cada término.
La TV Social implica que el espectador tiene acceso a la tecnología que
proporciona la comunicación y la interacción social mientras se ve un programa
de televisión o acceder a algún tipo de contenidos de televisión. En cambio la
TV interactiva se utiliza para describir las técnicas que permiten a los
1 Samsung Smart TV: http://zelular.net/sites/default/files/samsung_smart_tv_0.png 2 IPTV. Disponible en: http://es.wikipedia.org/wiki/IPTV 3 Internet TV. Disponible en: http://es.wikipedia.org/wiki/Televisi%C3%B3n_por_Internet
23
espectadores interactuar con contenido de la televisión. No solo como receptor
sino como emisor.
2.1.3 Arquitectura
La arquitectura básica que maneja la tecnología de Smart TV (figura 2), es
similar a la arquitectura de dispositivos móviles [Par13]. Sin embargo, en
general consta de solo 3 capas. La primera capa Engine incluye un conjunto de
librerías para el manejo de: gráficos, redes, base de datos, broadcasting,
estilos, etc; es decir todos los drivers y componentes de bajo nivel ligados al
Sistema Operativo. La capa intermedia permite gestionar los componentes
principales que proporciona la plataforma para el desarrollo de aplicaciones tipo
browser para ver contenido web, multimedia, y control DRM4 (Digital Right
Management). La tercera capa o capa de aplicación es la que incluye las
aplicaciones finales, widgets, contenidos, servicios, y juegos que es justamente
lo que se observa en la pantalla del Smart TV.
Figura 2. Arquitectura Smart TV5
2.1.4 Sistemas Operativos
La existencia de diferentes plataformas siempre ha estado presente en el
mundo de la tecnología. Desde los pc con: Linux, Mac y Windows; los teléfonos
móviles con: Android, iOS, Windows Phone. Sin embargo los desarrolladores
han encontrado motivos necesarios para invertir tiempo en crear aplicaciones
específicas para cada plataforma.
Algunos de los SO disponibles en smartphones y tablets también funcionan en
televisores inteligentes e incluso se han diseñado específicamente para el uso
en estos dispositivos [Chi13]. La mayoría de las veces el sistema operativo de
este tipo de televisores están basados en plataformas de código abierto. El
sistema operativo más empleado por este tipo de televisores es Android,
aunque también se utiliza Unix, Linux, además de versiones Linux para
Samsung y LG.
4 DRM: https://www.defectivebydesign.org/what_is_drm_digital_restrictions_management 5
Smart TV Architecture: http://www.xatakahome.com/servicios-de-smart-tv/sdk-3-0-de-la-smart-tv-alliance-mejoras-y-
facilidades-para-la-creacion-de-apps-para-televisores-inteligentes
24
Como se puede observar en la Tabla 1, la mayoría de dispositivos Smart TV
utilizan Linux como su Sistema Operativo base, seguido por Android. Es por
ello que el software libre sigue siendo el más usado no solo para dispositivos
de TV sino para varios dispositivos inteligentes y sistemas domóticos.
Smart TV Sistema Operativo
Google TV Android
Samsung Smart TV Linux
LG WebOs (Linux)
Apple TV IOS
Toshiba Linux
TCL UltraSurface Windows 8
Sony Linux
Panasonic Linux
Tabla 1. Smart TVs y sus Sistemas Operativos
2.1.5 Actualidad
2.1.5.1 Mercado
Hoy en día existen muchas empresas dedicadas al mercado Smart TV. Entre
ellos se destacan grandes empresas como Google, Apple, Samsung, LG, Sony
e incluso Amazon. A continuación se ha hecho una revisión de las tecnologías
Smart TV más conocidas:
Google TV6 es una plataforma Smart TV de Google. Fue anunciado el 20 de
mayo 2010, en evento Google y fue co-desarrollado por Google, Intel, Sony y
Logitech. Google TV integra el sistema operativo Android, y la versión para
Linux de Google Chrome, para crear una televisión interactiva con un nivel por
encima de los sistemas de Internet por televisión existentes, añadiendo una
interfaz de usuario agradable para los sitios WebTV. En cuanto al desarrollo de
aplicaciones, ofrece un conjunto de principios de diseño que permiten al
desarrollador analizar y definir ciertas características a sus aplicaciones lo que
permite mejorar el enfoque en el diseño de Apps. Sus aplicaciones se
desarrollan con el SDK de Android y su Add-on para plataformas de TV.
Samsung SmartTV7, televisor diseñado por la compañía SAMSUNG, tiene
implementada su Samsung Smart Hub: punto de entrada a esta galería de
servicios que incluyen navegación libre, aplicaciones, acceso a redes sociales
e interoperabilidad entre dispositivos vía inalámbrica, e incluso control por voz y
6 Google TV. Disponible en: http://www.google.com/tv/
7 Samsung Smart TV. Disponible en: http://www.samsung.com/es/smarttv2013/
25
gestos. El Samsung Smart TV funciona bien ver la televisión por cable
estándar, la realización de conversaciones de Skype con la cámara y los
micrófonos, además de ver la TV y películas en streaming a través de servicios
como Netflix, Hulu Plus y MLB.TV. Además de aplicaciones que permiten
interactuar con dispositivos Android e IOS, que simulan como mandos a
distancia o pasan contenidos a la TV sin ningún adaptador. En cuanto al
desarrollo ofrece un SDK que incluye el IDE de desarrollo basado en Eclipse y
su Emulador instalado como máquina virtual. Su última versión es la 5.1 y entre
sus novedades permite desarrollar aplicaciones para SmartHome y
multipantalla.
Apple TV8 es un receptor digital multimedia diseñado, fabricado y distribuido
por Apple. El reproductor está diseñado para reproducir contenido multimedia
digital desde la iTunes Store, YouTube, Flickr, iCloud, Vimeo, Netflix o de un
ordenador con Mac OS X o Windows con iTunes en una televisión de alta
definición. Incluso se puede ver el contenido de varios dispositivos vía AirPlay.
En cuanto a desarrollo Apple ofrece su herramienta Xcode en su versión 6, que
es compatible para todos sus dispositivos con sistema operativo IOS.
LG Smart TV en sus modelos 2014 incorpora el nuevo sistema operativo
webOS 3.09 basado en Linux, una forma de controlar el televisor LG que te
permite disfrutar fácil y rápidamente los canales favoritos y acceder a las
aplicaciones y contenidos de Smart TV a través del mando Magic Control. Su
tienda LG Store, ofrece una interesante colección de contenidos y aplicaciones.
Desde la tienda puedes buscar los contenidos más vistos y descargados por
varias categorías. Cuenta con un kit de desarrollo LG Smart TV SDK para los
modelos 2012 y 2013, su desarrollo es completamente web. En cambio para
los modelos 2014 se ha publicado el WebOs TV SDK que es compatible para
Windows, Mac y Linux y desarrolla proyectos web.
Sony Smart TV10 se centra en el descubrimiento de contenido. Hay varias
páginas dedicadas para TV, fotos, música y películas, así como las numerosas
aplicaciones. Sony está claramente tratando de aprovechar su posición como
proveedor de contenidos, con fácil acceso a su música y servicios Video
Unlimited. En cuanto a desarrollo se basa en la tecnología que usa Google TV,
quien trabaja con el SDK de Android y se requiere instalar el Add-on para Sony.
Chromecast11 es un dispositivo de reproducción multimedia similar a un
pendrive y se conecta al puerto HDMI o USB de un TV. Gracias a esta
tecnología se puede enviar música, películas, ver programas online y varios
contenidos, a través del navegador web Chrome desde un PC o un dispositivo 8 Apple TV: http://es.wikipedia.org/wiki/Apple_TV
9 LG Smart TV: http://www.lg.com/es/webos
10 Sony Smart TV: http://www.trustedreviews.com/sony-s-2013-smart-tv-system_TV_review_online-
content-and-tv-sideview-app_Page-2 11
ChromeCast: http://www.google.es/intl/es/chrome/devices/chromecast/
26
Android, se puede replicar las páginas web que se ven al televisor, en el caso
de Youtube y Netflix estas envían la señal de vídeo. Esta plataforma se basa
en la tecnología Google Cast quien proporciona el Google Cast SDK que
incluye un conjunto de APIs y librerías que facilitan adaptar tus aplicaciones a
una gran pantalla.
Amazon Fire TV12 es un reproductor de medios digitales y MicroConsola
desarrollada por Amazon. Se trata de un pequeño dispositivo de red y
dispositivo de entretenimiento diseñado para transmitir contenido de audio y
vídeo digital en un televisor de alta definición. El dispositivo también permite a
los usuarios jugar juegos de vídeo con el mando a distancia, a través de una
aplicación móvil, o con un dispositivo de juego opcional. El dispositivo cuenta
con 2 GB de RAM, doble banda MIMO Wi-Fi, y un control remoto de Bluetooth
con un micrófono para la búsqueda de voz. Para desarrollar aplicaciones se
debe instalar el SDK de Android y su Add-on para Amazon Fire TV.
Android TV13 es una nueva plataforma que facilitará a los usuarios visualizar los
contenidos de Google en su televisión: películas, series, aplicaciones e incluso
juegos que componen el catálogo de Google. La interfaz parece muy sencilla e
intuitiva y facilitaría la navegación de contenidos. El principal medio de
interacción o control será a través dispositivos móviles (smartphones, tablets)
que permitirán su navegación. Además del reconocimiento a través de
comandos de voz que lo hará aún más sencillo.
Sus aplicaciones se desarrollarán con el SDK de Android y únicamente se
requiere instalar los paquetes para Android TV. Además incluye El Kit de
Desarrollo ADT-1 que es un reproductor de streaming, contenido multimedia y
está diseñado para ejecutar y probar aplicaciones construidas para Android TV.
En cuanto a programación se crean Actividades de tipo TV (TVActivity) a
diferencia de las Actividades (Activity) para dispositivos móviles: SmartPhones
y Tablets.
Para conseguir el uso de la plataforma se ha confirmado que trabajarán con los
principales fabricantes del sector y las primeras televisiones compatibles con
Android TV llegarían a principios de 2015, de la mano de fabricantes como
Sony o Sharp.
Smart TV Alliance14 nos ofrece una plataforma que permite crear contenido
interactivo multiplataforma para distintos modelos de Smart TV (LG, Panasonic,
Toshiba, Vestel). Bajo el lema 'construye una vez y ejecuta en todas partes", su
ambición es alinear una tecnología (SDK) que permita a los desarrolladores
crear aplicaciones y ejecutarlas con éxito en todas las plataformas Smart TV
12
Amazon Fire TV: http://en.wikipedia.org/wiki/Amazon_Fire_TV 13
Android TV: http://www.theverge.com/2014/4/5/5584604/this-is-android-tv 14
Smart TV Alliance: http://www.smarttv-alliance.org/
27
Alliance compatibles. Esta alianza utiliza la tecnología de soluciones abiertas y
sistemas (HTML5) estándar abierto. Aunque también hay otras propuestas que
podrían facilitar la creación de apps como la adopción de webOS por parte de
LG.
2.1.5.2 Comparativa
Como se menciona a lo largo del documento, existen muchos modelos,
marcas, plataformas y tecnologías relacionadas a los Smart TV. Es por ello que
a continuación se adjunta una gráfica comparativa según TOP Ten Reviews
[Top14], de los modelos más comercializados en el mercado (figura 3); donde
se refleja claramente que los modelos LG, Samsung y Sony se ubican como los
mejores modelos Smart TV según aspectos de acceso web, características del
dispositivo, integración de periféricos y su servicio de soporte.
28
Figura 3. Comparativa de Smart TVs 201415
15
2014 Best Internet TV Comparisons and Reviews: http://internet-tvs-review.toptenreviews.com/
29
2.1.6 Futuro
Al igual que los teléfonos inteligentes, se están convirtiendo en un dispositivo
de estilo de vida personal, ya que actualmente se pueden considerar como
dispositivos inteligentes preparados para mejorar el entretenimiento familiar.
Las estadísticas de la industria estiman que más de 10 por ciento de los
televisores enviados a nivel mundial en 2011 fueron televisores inteligentes. A
finales de 2012 esa cifra aumentó al 20 por ciento y alcanzará cerca del 70 por
ciento en el 2015 [Tec12]. Como ha sido el caso con el auge de los teléfonos
inteligentes, las aplicaciones se han convertido en la herramienta de elección
para los consumidores para consumir contenido. Por lo tanto, no hay duda que
las aplicaciones para televisión se convertirán en la nueva herramienta
indispensable en la caja de herramientas los vendedores en los próximos años.
Las App Store están constantemente creciendo y ganando popularidad entre
los fabricantes de televisores como Sony, Samsung, LG, Panasonic, Philips,
así como Google e incluso de Apple aprovechando este cambio mediante la
adición de una capa de características mejoradas en la web a la experiencia y
las ofertas visión tradicional.
Y parece que esta nueva tecnología y conectividad también está ganando
popularidad entre los consumidores también. Según Samsung, el Samsung
Apps Store ha seguido creciendo tanto en tamaño y popularidad a un ritmo
impresionante. Samsung Apps TV acaba de celebrar el hito de 1.000
solicitudes registradas y se elevó más allá de la marca de 10 millones de
dólares para el número de descargas en todo el mundo.
De hecho se dice que la tienda ha llegado a más de 11 millones de descargas
en total, con un promedio de 50.000 descargas al día - doblar el número de
descargas que se produjo 05 2011 muestra el fenómeno de las aplicaciones de
televisión está ganando impulso .
Según el Topology Research Institute (TRi), los Smart TV cada año tienen un
crecimiento significativo, en el 2012 los dispositivos se duplicaron a 52.850.000
unidades. La empresa de investigación dijo que poco más de 7 millones de
televisores inteligentes fueron comercializados en 2010, y esa cifra es probable
que aumente a más de 100 millones de unidades en 2014. Este instituto cree
que habrá tres sectores en este mercado: uno dominado por Samsung, que
ofrece más de 1.000 apps, un segundo dominado por los televisores con
Android como Hisen, TCI y Konka, y un tercer sector de HTML5, CE-HTML y
Smart TV HbbTV con motor de LG, Sharp y Philips.16
16
CENS.com.: Smart TV Sales to Double to 52.85 Million Units in 2012. Disponible en: http://cens.com/cens/html/en/news/news_inner_38047.html
30
2.2 HERRAMIENTAS Y TECNOLOGÍAS
2.2.1 Herramientas de desarrollo
2.2.1.1 SDK
En cuanto a desarrollo algunos fabricantes manejan su propio SDK que
funciona como una extensión del IDE Eclipse. Herramienta que facilita a los
desarrolladores diseñar, configurar y correr sus aplicaciones desde su entorno
de trabajo.
Las herramientas actuales permiten crear dos tipos de proyectos Smart TV:
aplicaciones web para facilitar la portabilidad a otras plataformas, y
aplicaciones nativas como es el caso: Android, Native Client, C, etc.
A continuación se presenta una tabla con las tecnologías Smart TV más
conocidas, se indica su herramienta de desarrollo, el tipo de proyecto que
permite crear, así como su lenguaje de diseño y programación:
Smart TV Herramienta
Desarrollo
Tipo Proyecto
Lenguaje
Google TV,
Android TV
SDK Android Android Java
Samsung
Smart TV
SDK Samsung Smart
TV
Nativo, Web HTML, CSS, Js, Flash, C
LG SDK Smart TV
Alliance, WebOs
SDK.
Web HTML, Js
Apple TV Xcode iOS AppleScript, Objective C,
Perl, Python, and Ruby
Toshiba SDK Smart TV
Alliance
Web HTML
Sony SDK Android Addon
Sony
Android Java
Panasonic SDK Smart TV
Alliance
Web HTML
Tabla 2. SDK y Lenguaje de algunos Smart TVs
El desarrollo de aplicaciones para Smart TV puede resultar tedioso en cuanto a
que no existe una estandarización de los mismos; es así que para cada
televisor hay un SDK diferente. Sin embargo como se menciona en el apartado
de tecnologías, existe la propuesta de Smart TV Alliance, quien tiene previsto
definir una serie de especificaciones técnicas comunes a todas las plataformas
que permitan a los creadores de aplicaciones desarrollarla una vez y
ejecutarlas en distintos televisores.
31
Los fabricantes de Smart TV actualmente trabajan bajo una creciente presión
de los consumidores y los proveedores de contenido a introducir en el mercado
dispositivos de pantalla grande que coinciden con la flexibilidad y la
personalización de la experiencia de contenido de la web. Samsung y LG son
las plataformas que se destacan en cuanto al desarrollo, y son quienes más
apps tienen en su store.
2.2.1.2 Emulador
Los emuladores para Smart TV han sido portados al sistema operativo Linux y
se instalan como máquinas virtuales para asegurarse de que se pueden utilizar
en múltiples plataformas. A través de estos es posible comprobar la
funcionalidad de una aplicación Smart TV. Así las actualizaciones de código se
pueden ver inmediatamente, lo que permite un desarrollo evolutivo-
incremental17. Sin embargo, se debe tener en cuenta que el emulador no es
una simulación exacta de la TV ya que se ejecuta en un hardware diferente y
bajo ciertas prestaciones. Por lo tanto, para tener la certeza de cómo se
comportará una aplicación, es recomendable ejecutarlo por lo menos en un
dispositivo real.
Un ambiente de emulador es diferente al entorno Smart TV por los siguientes
parámetros:
- Menos memoria disponible; por lo tanto, en el emulador una aplicación
puede quedarse sin memoria.
- La calidad de las imágenes podrían verse distorsionadas, e inclusive el
diseño de la app no se puede evaluar solo con emuladores.
- La simulación del control remoto del emulador puede tener una
configuración diferente o incluso un modelo distinto al Smart TV.
2.2.2 Tecnologías Web
2.2.2.1 HTML 5
HTML5 es un nuevo estándar que tiene el poder de nivelar el campo de juego
para los fabricantes de televisores inteligentes. A través de un conjunto de
características, tecnologías y APIs, HTML5 permite a los desarrolladores de
contenidos ofrecer una amplia variedad de contenido multimedia a los
consumidores, en forma on-demand, a un medio ambiente de sala de estar
más moderna, inmersiva y familiar.
La mayor parte de las nuevas características de HTML5 son soportados por los
navegadores comunes como Mozilla Firefox, Google Chrome, Internet Explorer,
17
Testing your applications 2013: http://samsungdforum.com/Guide/d20/index.html
32
Opera y los navegadores móviles. Por ende las aplicaciones que se desarrollan
bajo HTML son soportadas por la mayoría de dispositivos existentes.
Gracias a las tecnologías web los consumidores están descubriendo
contenidos de forma más interactiva, más personal, siempre disponible y
mucho más atractiva. Entre ellos es más sencillo agregar componentes como:
Audio y video
Estas etiquetas permiten incrustar un contenido multimedia de sonido o de
vídeo, respectivamente. Permite reproducir/controlar vídeos y audios sin
necesidad de plugins Flash. Se tratan de manera totalmente nativa como
cualquier otro elemento.
Canvas
Es un nuevo elemento muy potente que permite generar gráficos, dibujando
elementos dentro de él mismo.
Formularios
Este elemento es muy importante para entrada de datos, en esta versión
incluye características que permiten validar datos de manera fácil, utilizando
cajas de texto de tipo: teléfono, email, url, fechas, etc.
2.2.2.2 CSS 3
Al diseñar aplicaciones Smart TV se debe considerar las definiciones de estilo
CSS18, que permitirá definir cómo mostrar los elementos HTML. A diferencia de
las páginas web, en la plataforma Smart TV se debe reducir al mínimo la
velocidad la carga inicial de su aplicación y se da mayor importancia a las
siguientes características:
Ajuste los márgenes de visualización
Los elementos creados en el margen más allá de la resolución máxima de TV
pueden hacer que la pantalla se desplace. Todos los márgenes de elementos y
juntas en el archivo index.html deben tener un margen mayor a '0 'para evitar
que los elementos sobrepasen la zona, reduciendo problemas de OverScan19.
Manejo de desbordamiento de texto
La mayoría de navegadores para Smart TV son compatibles con las versiones
CSS1 y CSS2. Además, se pueden definir los atributos de desbordamiento de
texto en la versión CSS3, lo que permite manejar de manera eficiente en el
navegador los contenidos presentados.
18
CSS: http://www.w3schools.com/css/default.asp 19
OverScan: http://en.wikipedia.org/wiki/Overscan
33
Ajuste el espaciado entre letras
Por defecto, el valor de espaciado entre letras en el navegador es '-1'. Por ello
que para ciertos idiomas (como el tailandés) es posible se requiera debe definir
el valor en 0.
2.2.2.3 JavaScript
Las plataformas Smart TV introducen sus API de JavaScript para permitir un
mayor control sobre las tareas y procesos en el desarrollo de aplicaciones
basadas en web. Las APIs pueden incluir características como:
- Control de datos de entrada
- Interfaz de usuario
- Compartición de archivos entre dispositivos.
- Manejo de archivos
- Manejo de sensores
- Convergencia
2.3 SAMSUNG SMART TV
2.3.1 Plataforma
Es la línea que ofrece SAMSUNG Electronics en el mercado de Smart TVs.
Esta plataforma integra características similares a otros dispositivos actuales;
sin embargo la idea principal es ejecutar aplicaciones que permitan al usuario
interactuar con diferentes tipos de contenido, mientras que al mismo tiempo
pueden observar la TV normal.
El desarrollo de aplicaciones para la plataforma Smart TV de Samsung es
ligeramente diferente de desarrollo de páginas web para Internet. Puesto que la
plataforma ofrece muchas características nuevas y propias de Samsung, pero
trae algunas restricciones en el proceso de desarrollo también.
2.3.2 Funcionamiento
La visualización de una aplicación Smart TV es muy parecida a la visualización
de páginas web usando un navegador web en un ordenador normal.
Las diferencias entre las aplicaciones y páginas web se hacen por resolución
de la pantalla, las especificaciones de hardware y control remoto, la interfaz de
usuario para Samsung Smart TV instalado televisores.
2.3.3 Características
La línea de Samsung Smart TV, posee todas las características y funciones
que se necesitan en un TV inteligente, al tiempo que ofrece sus aplicaciones y
múltiples formas de navegación e interacción, se adapta a sus necesidades.
34
Entre sus principales características se destacan:
Acceso Web
Permite la navegación en cualquier sitio web y redes sociales preferidas, ya
que incluye la conexión vía Cable o Wi-Fi a tu red local.
Aplicaciones
Samsung ofrece una gran cantidad de apps en el mercado. Algunos modelos
vienen con diferentes aplicaciones que el fabricante ya ha instalado. Además
se incluye una tienda de aplicaciones que permitirá descargar y comprar
aplicaciones adicionales.
Especificaciones
Los modelos Samsung cumplen las características esenciales en cuanto a
especificaciones: Tamaño de pantalla y tipo, resolución, calidad de audio y de
imagen, conectividad, tiempo de respuesta, velocidad de refresco y las
características adicionales son todas las cosas importantes que se destacan.
Integración de periféricos
Los últimos modelos Smart TV cuentan con 2 mandos a distancia. El primero
corresponde al control básico, y el segundo al control Smart. Adicionalmente
existen aplicaciones para controlar el TV desde un teléfono inteligente, lo que
permite hacer que el proceso de navegación sea aún más fácil. Algunos
modelos incluso permiten compartir ficheros entre sus dispositivos.
Interactividad
El reconocimiento de voz es muy útil, pero aún más es la tecnología de la
Recomendación S. El mando a distancia dispone de un micrófono incorporado,
además este sistema de recomendación, crea una lista de programas en base
a sus hábitos televisivos.
En los modelos a partir de la serie 7, se encuentra integrado el control de
movimiento al estilo Kinect, en caso de que desee utilizar su Smart TV sin un
control remoto. Todo esto se ha añadido pretendiendo hacer el control de la
televisión inteligente más fácil, aunque no es del todo preciso, muchas veces
puede que no reconozca algun gesto. A su vez el reconocimiento de voz se
puede confundir a veces. Es Así que Samsung en cada nuevo modelo va
perfeccionando sus tipos de reconocimiento, tratando de minimizar errores. El
reconocimiento de voz se activa mediante la frase "Hola Tele".
35
Evolución de Hardware y Software
La mayoría de modelos Samsung Smart TV 2012, 2013 y 2014 permiten la
integración de un kit de evolución, que es un dispositivo externo que permite
actualizar nuestro Smart TV a las últimas novedades y experiencia inteligente
de los nuevos modelos, por lo que no es necesario invertir en un televisor
nuevo por completo.
2.3.4 Aplicaciones
Las aplicaciones Smart TV para Samsung son aplicaciones web que se
muestran en una pantalla como si fueran aplicaciones nativas. Proporcionan
contenido relacionado con videos, deportes, juegos, información y mucho más.
Los usuarios pueden descargar aplicaciones Smart TV de Samsung Apps e
instalarlas en sus televisores, o incluso desarrollarlas.
La visualización de una aplicación en la pantalla de televisión es similar a la
visualización de páginas web en un navegador web en un ordenador. La
experiencia no es la misma debido a la resolución diferente de la pantalla y las
especificaciones de hardware, así como utilizar el mando a distancia del
televisor para la interacción del usuario.
Samsung tiene su propia app-store llamada Samsung Apps a través del cual
los clientes Smart TV pueden instalar, actualizar y desinstalar las aplicaciones.
Como se menciona anteriormente Samsung cuenta con su propia tienda de
aplicaciones para TV. En la siguiente tabla se muestran la cantidad de
aplicaciones que existen Samsung Apps20 clasificados según su
categorización:
Categoría Cantidad Apps de ejemplo
Video 117 Youtube, Karaoke
Juegos 142 Angry Birds
Deportes 43 Gol TV, Marca,
Estilo de
vida
106 Total Channel, Woki
Informativas 87 Antena3, BBC
Educativas 73 World Puzzle, English
KinderGarten
Total 568
Tabla 2. Aplicaciones en el Samsung Store para Smart Tv
20
El número de apps fue tomado del Store Samsung y corresponde al 20 de abril 2014
36
Cabe recordar que muchas aplicaciones se publican y restringen de acuerdo al
país de origen, es por ello que ciertas aplicaciones no estarán disponibles en
todos los países.
2.3.4.1 Aplicaciones Recomendadas
Los Smart TV no serían tan interesantes si no se pudieran aprovechar todas las
características y novedades que ofrecen. La mayoría de estos equipos
incorporan servicios similares a los que ofrece cualquier dispositivo móvil, entre
ellos: el control de aplicaciones mediante comandos de voz, reconocimiento de
gestos, reconocimiento facial e incluso control de otros dispositivos.
Luego de revisar varias aplicaciones a continuación se mencionan las
aplicaciones más útiles y novedosas de algunas plataformas:
CloudTV: La aplicación CloudTV21 permite elegir la programación de su
agrado. Es así que se puede escoger entre cientos de canales, ya sean
nacionales o internacionales, con los que sacar el máximo partido a esta nueva
forma de disfrutar de la televisión. Se la puede descargar en PlayStore para
plataformas Android.
Screen Dreams: Una app que permite simular pantallas para crear un
ambiente agradable cuando no estamos pendientes del televisor22. Por
ejemplo: simular que nos hemos sentado frente al fuego de nuestra chimenea.
Esta app está disponible para Samsung Smart TV.
Wuaki.tv: Una de las más recomendables es la aplicación de Wuaki.tv23, que
dispone de un enorme catálogo de películas, series y documentales sin
importar el día y la hora como la programación cotidiana. Está disponible para
todas las plataformas.
Social TV: Esta aplicación permite revisar las redes sociales mientras se
visualiza los programas favoritos24. Así es posible disfrutar de ambas
distracciones sin necesidad de utilizar dos dispositivos o apartar la vista de la
pantalla. Esta app está disponible para Samsung,
Fitness: Aplicación que proporciona más de 100 contenidos de diferentes
modalidades deportivas para que cada usuario encuentre el que más le guste y
mejor se adapte a sus necesidades25. Además cuenta con explicaciones
21
Cloud TV: http://getcloudtv.com/ 22
Screen Dreams: http://reviews.us.samsung.com/7463/G00001933515/samsung-screen-dreams-reviews/reviews.htm 23
Wuaki.tv: https://es.wuaki.tv/pages/howitworks 24
Social TV: http://www.samsung.com/global/article/articleDetailView.do?atcl_id=29 25
Fitness: http://www.samsung.com/es/article/smart-tv-fitness-help-to-be-fit
37
detalladas y un modo de espejo a través del cual podremos ver cómo estamos
realizando los ejercicios de modo que podamos corregir posturas o malos
movimientos. Disponible para Samsung Smart TV.
Smart Hub: Esta aplicación funciona como un media center del sistema
operativo de Samsung Smart TV, el cual separa 5 secciones diferentes:
Aplicaciones de Samsung Apps, Redes Sociales, Programación de TV en
tiempo real, Películas y archivos multimedia compartidos a través de AllShare
con todos tus dispositivos26. Esta es una buena manera de separar paneles
para que puedas acceder de un modo más intuitivo a los contenidos del
usuario.
3D Explore27: Aplicación para Samsung Smart TV que permite acceder a
películas y vídeos gratuitos en 3d –transmitidos todos en alta definición para
aprovechar al exclusiva tecnología 3D Full HD exclusiva de Samsung- como
tráileres, vídeos musicales, cuentos infantiles y documentales completos.
Miracast, AirPlay, AllShare: Aplicaciones implementadas en el sistema
operativo del tv (Miracast LG28, Airplay de Apple TV29, AllShare de Samsung30),
estas tecnologías permiten ver su Smartphone o tableta en el televisor, tal cual
lo ve en su teléfono. De esta manera, puede ver en su televisor el escritorio de
su teléfono, poner la reproducción automática de sus fotos o ver una película a
pantalla completa.
2.4 TRABAJOS RELACIONADOS
2.4.1 Samsung Smart School
Esta solución educativa móvil31 permite a los estudiantes y profesores de
beneficiarse de una amplia gama de información relacionada con la educación
en su dispositivo móvil y pantalla Smart TV. Incluye información actualizada de
la escuela, facilita el acceso a recursos de aprendizaje de las asignaturas,
asistencia en tiempo real y rastreadores de participación, todos los cuales
sirven para aumentar la participación y el rendimiento de sus estudiantes. Los
enlaces de comunicación entre las instituciones y los estudiantes permiten
crear un ambiente de aprendizaje más interactivo que se extiende mucho más
allá del salón de clases. Al mejorar las relaciones y aumentar la flexibilidad
entre los padres, estudiantes y maestros, estas soluciones pueden tener un
impacto positivo sobre una amplia variedad de instituciones.
26
Smart Hub: http://www.samsung.com/es/article/nueva-interfaz-smart-hub/ 27
Samsung 3D Explore: http://www.samsung.com/es/article/explore-3d 28
Miracast: http://www.lg.com/es/posventa/smartshare/miracast 29
Airplay: https://developer.apple.com/airplay/ 30
AllShare: http://content.samsung.com/us/contents/aboutn/allShareIntro.do 31 Samsung Smart School: http://www.samsung.com/sg/business/solutions-services/mobile-solutions/education/samsung-smart-school
38
2.4.2 Smart TV Hacking
Este proyecto realizado por Nikos Sidiropoulos y Periklis Stefopoulos la
Universidad de Amsterdam, se enfoca en investigar el nivel de seguridad de un
Smart TV y evaluar los riesgos de seguridad. Esto debido a que un Smart TV
no maneja algún antivirus que proteja de una u otra forma cualquier posible
ataque. En este caso, se propone que los vendedores deben proporcionar
dispositivos garantizados sin la intervención de un tercero. Por lo tanto, se han
planteado las siguientes preguntas.
¿Qué tipo de medidas de seguridad se implementan en un Samsung Smart
TV?
¿Las características son suficientes para ofrecer una televisión inteligente
segura?
¿Si existen vulnerabilidades?, ¿Hasta qué punto podrían afectar a sus
usuarios?
Su enfoque se basa en ataques a distancia y no en ataques que requieren
acceso físico al dispositivo.
2.4.3 Usabilidad en dispositivos Smart TV
En esta tesis se estudian los aspectos referentes a la usabilidad de los Smart
TV; inicialmente se eligieron tres modelos: Samsung UE46D8000, LG LM671S
y Panasonic TXP42G20ES; resultando el modelo LG seleccionado y se ha
realizó una evaluación heurística basado en los criterios: interfaz visual, y sus
funciones más comunes que permitan conocer el grado de satisfacción de los
usuarios que interactúan con el sistema y concluyendo con propuestas que
apoyen a la mejora de la usabilidad de estos dispositivos.
2.4.4 Smart TV - a more interactive way of watching TV
En este proyecto realizado por Karin Nilsson Helander de la Universidad
UMEA, se exploran las posibilidades de desarrollo de aplicaciones de Smart TV
para tomar ventajas de los contenidos disponibles en el televisor y, si es
posible, incentivar al usuario con una forma más interactiva de ver la televisión.
Se diseña un prototipo de una aplicación para Smart TV que utiliza el contenido
disponible en el televisor denominado “QuizTV”. Aplicación que permitirá
realizar cuestionarios online sobre los programas que se transmiten con los
usuarios conectados a la App. Se analizan algunas características de la
tecnología actual y se evalúan los resultados obtenidos del prototipo
planificado.
39
2.5 PARADIGAMAS DE INTERACCIÓN
2.5.1 Control por voz
Samsung Smart TV, incluye los servicios de reconocimiento de voz que
permiten a los usuarios controlar sus TV a través de comandos de voz
predefinidos.
La función natural de voz sólo está disponible cuando se utiliza el micrófono
integrado en el modelo o en el control remoto Inteligente.
El reconocimiento de voz no está disponible en todas las lenguas, sin embargo
se reconocen los idiomas con mayor población: inglés, español, portugués, etc.
El rendimiento varía en función del idioma seleccionado, el volumen de la voz
del usuario y los niveles de ruido ambiental en los alrededores.
El reconocimiento de voz permite a los usuarios introducir texto utilizando los
comandos de voz en lugar de un ratón, el teclado o el control remoto. El utilizar
comandos de voz puede resultar ventajoso hasta cierto grado, sin embargo
para muchas operaciones no es posible realizarlo con precisión. Esta
característica es particularmente útil para buscar, navegar por la web, y el uso
de aplicaciones que requieren la introducción de texto. Aplicaciones como
Google y Youtube ya integran esta funcionalidad.
2.5.2 Control por gestos
Samsung Smart TV, permite el uso de los controles de movimiento básicos.
Los comandos de movimiento disponibles pueden variar, según lo que se
desee hacer en el televisor. Samsung Smart TV tiene definido los siguientes
comandos básicos del Control a través de Gestos:
Navegación: Esta acción mueve el cursor a la posición que se desee, muy
similar a un puntero de ordenador.
Ejecutar/Seleccionar: Cierre el puño para seleccionar una opción o ejecutar
una aplicación. Mantener el puño cerrado equivale a mantener pulsado el
botón del control remoto.
Volver: Haga un círculo hacia la izquierda con la mano para volver al menú
anterior.
Pasar pantallas: Mantenga la palma de la mano vertical y balancéela a
izquierda o derecha para cambiar las pantallas de Smart Hub
Acercar / alejar: Cierre los puños y sepárelos o júntelos. Utilice estos gestos
para páginas web, mapas o fotos.
Girar: Cierre los puños y gírelos a derecha o izquierda como si sujetara un
volante. Utilice estos gestos para fotos.
Paneo: Con la foto aumentada, cierre el puño y muévalo a
izquierda/derecha/arriba/abajo para ver una vista panorámica.
40
Desplazamiento de una página web: En una página web, cierre el puño ante
la barra de desplazamiento y muévalo arriba/abajo para desplazar la página
arriba/abajo.
41
CAPITULO III
3. PROGRAMACIÓN DE APLICACIONES SMART TV
3.1 FUNDAMENTOS
Las plataformas Smart TV utilizan tecnologías de soluciones abiertas y
sistemas de estándar abierto para el diseño y construcción de interfaces y
procesos. La mayoría de modelos Smart TV, soportan tecnologías web como:
HTML, JavaScript y CSS, las mismas que cualquier desarrollador de
aplicaciones web ha utilizado. Sin embargo existen otros modelos y
plataformas basadas en Android (Java) y Native Client (C) que requieren
desarrollar aplicaciones nativas.
El desarrollo de aplicaciones para Smart TV es muy similar al desarrollo de
páginas web para Internet. Sin embargo estas plataformas ofrecen varias
características propias del dispositivo que permite aprovechar sus servicios.
Básicamente un proyecto para Smart TV de tipo web maneja las siguientes
tecnologías:
HTML: para definir el contenido y elementos de las interfaces.
CSS: para especificar las características visuales de la interfaz.
JavaScript: para programar el comportamiento de la aplicación.
Utilizar estas tecnologías no solo permite reutilizar código, sino que permitirá
dar soporte a varias plataformas. A pesar de esto se debe que existen algunas
diferencias en cuanto al desarrollo de aplicaciones web y las aplicaciones para
Smart TV [Sam14], entre ellas:
El desarrollo web por lo general se hace para muchos navegadores
diferentes. Plataformas de Smart TV se basan en dos motores hasta el
momento: Gecko, para las plataformas 2011 y 2010, y WebKit para las
plataformas más recientes.
El desarrollo web tiene que apoyar diseños sensibles, ajustándolos para
diferentes resoluciones y tamaños de pantalla. Aplicaciones de Smart TV
deben apoyar tres importantes resoluciones: 960 x 540, 1280 x 720 y 1920
x 1080 píxeles.
Las páginas web se muestran normalmente en un navegador web en un
ordenador o la pantalla del dispositivo móvil. Las aplicaciones de Smart TV
se ejecutan en un televisor y pueden utilizar todas las ventajas de su gran
pantalla.
42
Una página web normal o aplicación se controla normalmente por un
teclado y un ratón o algún tipo de interfaz táctil. Algunas aplicaciones de
Smart TV se pueden controlar con un mando a distancia, un ratón, gestos o
voz.
3.1.1 Proceso de desarrollo de Apps
Los IDE de desarrollo de aplicaciones Smart TV ofrecen las herramientas
necesarias para la gestión del ciclo de vida de la aplicación, desde su
concepción, desarrollo, evolución y su liberación. La siguiente figura propuesta
ilustra el proceso de desarrollo de una aplicación para Smart TV [Sam14].
Figura 4. Proceso de desarrollo de aplicaciones32
Para desarrollar una aplicación para Smart TV se deben seguir las siguientes
fases:
1. Planificar y diseñar la aplicación y la interfaz de usuario de la aplicación.
2. Implementar código en la herramienta IDE o SDK.
3. Depurar y probar la aplicación.
4. Empaquetar su aplicación para cargarlo al Smart TV.
3.1.2 Tipos de aplicaciones
3.1.2.1 Tipos de aplicaciones según el tipo de proyecto
Cuando se desarrolla aplicaciones para Smart TV es posible crear diferentes
tipos de proyecto, entre ellos aplicaciones web (HTML) y aplicaciones nativas
(NaCI). Ambos tipos de proyecto pueden crear aplicaciones similares sin
32
Application Development Process: http://samsungdforum.com/Guide/art00008/index.html
43
embargo las aplicaciones Native Client en general, consiste en una
combinación de JavaScript, HTML, CSS, y un módulo de NaCl que está escrito
en un lenguaje compatible con el SDK.
A continuación en la figura 5 se indica la principal diferencia entre los dos tipos
de proyecto. Sin embargo nuestro caso de estudio y pruebas iniciales se
basaron únicamente en proyectos de tipo web.
Figura 5. Tipos de Proyecto y su Arquitectura33
3.1.2.2 Tipos de aplicaciones según el tipo de pantalla
Actualmente es posible desarrollar tres tipos de aplicaciones para Smart TV
desde su SDK. Independientemente de su tipo de proyecto (sea JavaScript, C,
Flash) se consideran las siguientes clasificaciones:
Aplicaciones
Pantalla completa La aplicación ocupa la pantalla entera.
Aplicaciones media
pantalla
La aplicación se muestra sólo en una parte
de la pantalla.
Aplicación widget La aplicación permanece en la pantalla de
TV mientras usted hace otras cosas con su
televisor.
Aplicación
multipantalla
La aplicación puede ser controlada desde
otra pantalla: móvil, Tablet.
Tabla 3. Tipos de aplicaciones
Actualmente Samsung proporciona un SDK para desarrollar aplicaciones
multipantalla, lo que permite lograr la interacción entre una aplicación Smart TV
y aplicaciones en dispositivos móviles Android e IOS.
33
Native Client: https://developer.chrome.com/native-client/overview
44
3.1.3 Arquitectura de Aplicaciones
Técnicamente, una aplicación de Smart TV es un proyecto web que consiste en
un conjunto de archivos de aplicaciones. La estructura de la mayoría de
aplicaciones Smart TV es la siguiente:
index.html: El archivo de visualización inicial, muestra la estructura de la
aplicación.
Archivo CSS: Define el estilo de los contenidos que se presentarán en la
aplicación.
Archivo JavaScript: controla el comportamiento de la aplicación, se
pueden incluir Js propios o externos siempre y cuando sea compatible a la
versión del SDK.
Config.xml: Contiene información sobre el entorno operativo y la versión de
la aplicación. Este archivo es necesario para el funcionamiento de la
aplicación en una pantalla de TV.
Archivos Flash: Estos archivos son opcionales, y se incluyen si es
necesario alguna animación. Sin embargo recientemente se está
sustituyendo por HTML5.
El archivo de configuración dependerá de la plataforma elegida.
3.2 SDK SAMSUNG SMART TV
El SDK de Samsung Smart TV es la herramienta que permite crear y editar
aplicaciones que se ejecutan en los Samsung Smart TV. Este SDK es una
versión del IDE Eclipse, que contiene una interfaz de usuario intuitiva y
funciones fáciles de usar para el desarrollador. Se permite el uso de las
tecnologías web estándar, como HTML5, CSS3 y JavaScript muy similar a un
sitio web. La última versión incluye librería para aplicaciones en C.
El SDK de Samsung ofrece tres ventajas principales, tales como la edición de
código fácil, edición visual fácil y empaquetado rápido. Esto hará que sus obras
se desarrollen con rapidez y mayor facilidad.
Figura 6. Aplicación en un Smart TV y un Ordenador
Las aplicaciones Smart TV son muy similares a las páginas web (Fig. 6), sin
embargo se desarrollan bajo ciertos parámetros establecidos en su IDE, así
45
como la utilización de APIs propias del sistema, que facilitarán la interacción y
el control de las mismas.
Las aplicaciones de usuario se pueden cargar directamente desde el PC de
desarrollo al Smart TV. Es así que la aplicación Smart Hub permite a los
desarrolladores cargar aplicaciones desde el servidor local directamente al
televisor para la prueba, sin afectar a otros usuarios de Samsung Smart TV.
Tecnología 2010 2011 2012 2013 2014
SDK 1.5 SDK 2.5 SDK 3.5 SDK 4.5 SDK 5.1
APP ENGINE
HTML HTML 4.01
HTML 5 HTML 5 HTML 5 HTML 5
DOM DOM 2 DOM 2 DOM 3 DOM 3 DOM 3
CSS CSS 2.1 CSS 3 CSS 3 CSS 3 CSS 3
Javascript Javascript 1.6
Javascript 1.8
SquirrelFish
V8 JSC
SWF Flash8.0/ Flash10.1/ Flash 10.1 /
Flash 11.1 /
Not supported
Tabla 3. Tabla comparativa de las versiones SDK y su tecnología
En la tabla 3 se presenta una comparativa de las distintas versiones de SDK
que se han publicado desde el 2010 al 2014, donde se hace enfoque a la
tecnología soportada en cada SDK, además que se observa el ultimo soporte a
Flash en el 2013.
3.2.1 Características
Samsung Smart TV ofrece un conjunto de herramientas, librerías, APIs, e
integrar tecnologías de la web que permitan al desarrollador crear aplicaciones
de manera fácil y rápida.
Entre las características y servicios que destacan a la hora de la programación
y diseño tenemos:
Servicios
El uso de la API de servicio simplifica el uso de las funcionalidades de
televisión específicos digitales. El API soporta Video / reproductor de imagen,
SmartRemote y USB. API de servicio puede simplificar ciertos usos de la
función de TV y soportes de vídeo / reproductor de imagen, remoto inteligente y
USB.
Framework
Marco de trabajo que define las funciones esenciales e iniciales para el
desarrollo de Apps para TV: Escena Manager, inicialización, Gestión de la
salida y carga de la configuración, el archivo de la carga dinámica de Apps.
46
WebAPIs y servicios
Las webAPIs permiten utilizar funciones de middleware, tales como acceso al
sistema de archivos, Smart Interaction, control de audio / vídeo y proporciona
definición y los métodos para manejar excepciones APIs comunes.
Dependiendo del fabricante se da acceso a ciertos sensores o librerías propias
para su control.
3.2.2 SDK 4.5
Este SDK ofrece las herramientas requeridas para aplicaciones para el 2013 la
plataforma Smart TV. Donde se incluye un conjunto de instrumentos: IDE
aplicación, Editor Visual, depurador y emulador de Smart TV para la plataforma
2013.
Actualizaciones
Las características que destacan esta versión son:
- NaCl: Soporte para Google Native Client (NaCl) se ha añadido a la IDE y el
emulador
- AIR 3.0 Apoyo en el emulador
- Emulador: El emulador basado en VirtualBox ahora se utiliza para todas las
plataformas: Windows, Mac y Linux.
IDE
El entorno de desarrollo se caracteriza por las siguientes funcionalidades:
- Native Client (NaCl) Editor, Creador y traductor. Apoyo NaCl depurador con
Google Chrome.
- Mejora Editor Visual y Visual Kit
- Incluye un depurador Web
Emulador
El emulador apoya:
- Google Native Client (NaCl), WebGL, Adobe AIR 3.0 (La última versión no
soporta Flash)
3.2.3 Última Actualización SDK 5.1
Este SDK ofrece a los desarrolladores las herramientas que necesitan para
desarrollar aplicaciones para los modelos 2014 de la plataforma Smart TV.
Actualizaciones
Entre sus principales actualizaciones se destacan:
47
Pantalla multitáctil: APIs para la funcionalidad multipantalla son ahora
soportados en el emulador. Con esta API, los desarrolladores pueden
crear aplicaciones que utilizan no sólo la pantalla de TV, sino también
dispositivos móviles.
SmartHome: El apoyo inicial para las API para la convergencia de
electrodomésticos.
Subtítulos: Apoyo CC ha sido añadido a cumplir con las regulaciones de
la FCC.
PNaCl: Crear una aplicación rápida y potente usando C / C + + con
soporte para portátil de Native Client de Google característica (pNaCl).
Aplicaciones pNaCl se pueden desarrollar en el IDE y luego ejecutados
en el Smart TV emulador. La depuración es compatible con Google
Chrome.
Mashup Semántica: extensión del IDE para la integración de servicios
semánticos en las aplicaciones de Smart TV.
3.2.4 Proceso de Desarrollo de Aplicaciones Samsung Smart TV
Para dar una idea general del desarrollo y despliegue de aplicaciones se ha
elaborado el siguiente diagrama que describe cada uno de los procesos
importantes que se deben seguir; desde la preparación del entorno de trabajo
hasta la instalación una aplicación Samsung Smart TV en un dispositivo real.
INSTALACIÓN DEL AMBIENTE DE DESARROLLO
DESARROLLO APP
INSTALACIÓN APACHE
CONFIGURAR LAS PREFERENCIAS DEL
SDK
COMPROBAR CONFIGURACIÓN
RED
INICIAR SESION USUARIO: DEVELOP
SMART TV
EMULADOR DESPLIEGUE
YA CONFIGURADO
BUSCAR Y EJECUTAR APP
SINCRONIZAR APP (INSTALACIÓN)
CONECTARSE AL SERVIDOR DE APPS
PREPARACIÓN SERVIDOR DE APPS
ACTUALIZAR APP
EMPAQUETAR APP
CONFIGURACIÓN SMART TV
PRIMERA INSTALACIÓNPRIMERA
CONFIGURACIÓN
Figura 7. Proceso desarrollo y despliegue de Apps para Samsung Smart TV
48
3.2.4.1 Instalación y configuración del entorno
Actualmente existen varios SDK que proporcionan las herramientas necesarias
para el desarrollo de aplicaciones Smart TV. Como muestra se ha tomado la
preparación del entorno para Samsung, sin embargo la mayoría de SDKs se
configuran de forma similar.
Requisitos de Hardware
- Procesador: Dual Core 1.5GHz / Single Core 3GHz o superior
- Memoria RAM: 1 GB o superior
- Sistema Operativo: Windows XP/vista/7/8, Mac OS X: 10.6 o superior,
Linux: cualquier SO que soporte Virtual Box 4.2.4.
- Resolución de Pantalla: 1280 x 1024 o superior
- Almacenamiento: 5GB o más
Requisitos de Software
Es preferible tener ya instalado:
- Virtual Box
- Java Standard Edition(Java SE) 1.6 o superior
Procedimiento
Se necesita descargar los siguientes archivos:
- SDK de la plataforma.
- La imagen del Emulador para Virtual Box.
a) Instalar Emulador
Una vez instalado Virtual Box, se necesita arrancar el programa y seguir los
pasos descritos a continuación:
1. Seleccione Archivo > Importar servicio virtualizado.
2. Seleccione el archivo con extensión .ova (el emulador que
descargamos)
3. Seleccione Siguiente e importar.
4. Luego de importar el emulador, se debe establecer una carpeta
compartida para las aplicaciones. Muchas veces ya se configura
automáticamente. Caso contrario seleccione la máquina virtual, vaya a
Configuración y seleccione carpetas compartidas, allí escoja la opción
Automontar.
49
b) Instalar el SDK – IDE Editor
Luego de descargar el archive compreso del SDK, solo se debe descomprimir y
ejecutar el archivo eclipse.exe y obtendremos una pantalla similar a la siguiente
(figura 8) y seleccionamos el directorio de trabajo.
Figura 8. Seleccionar el directorio de trabajo o workspace
c) Configurar emulador al SDK
Una vez arrancado el SDK, se debe configurar el emulador para poder ejecutar
nuestras aplicaciones. En versiones anteriores el emulador y SDK se
instalaban como un programa normal y no necesitaba configuración adicional.
A continuación se indica su procedimiento:
1. Seleccionar el menú Samsung Smart TV SDK
2. Escoger Preferencias
3. Escribir el nombre de la maquina Emulador en el campo requerido.
4. Guardar y probar.
3.2.4.2 Desarrollo de Aplicaciones
3.2.4.2.1 Aplicación – Hola Mundo
Para iniciar el estudio en cuanto a programación de aplicaciones, se ha
realizado el proyecto básico “Hola Mundo”. A continuación se explica cada
paso:
1. Crear proyecto
a) Seleccionar en el menú Samsung Smart TV SDK. Luego seleccione
Create Samsung Smart TV Project, de acuerdo al tipo podemos
seleccionar básico, web, Javascript, e incluso Flash para versiones
anteriores (figura 9a).
b) Seleccionar el menú File, New, Project y en la ventana ir al directorio
Samsung Smart TV (figura 9b)
50
a) Opción Nuevo Proyecto
b Opción Creación directa
Figura 9. Nuevo Proyecto Smart TV
2. Definir el nombre del Proyecto “HolaMundo” (figura 10).
3. Una vez creado el proyecto, se debe colocar algún texto u objeto para
visualizar en la pantalla inicial (figura 11).
4. Ahora se debe ejecutar el proyecto. Esto mediante clic derecho en el
proyecto y seleccionar la opción Run Project Samsung Smart TV (figura 12).
5. Esperamos el arranque del emulador, hasta que se cargue nuestra
aplicación (figura 13).
51
Figura 10. Definir Nombre Proyecto
Figura 11. Archivo inicial Smart TV – index.html
Figura 12. Ejecutar proyecto Smart TV
52
Figura 13. Arranque del emulador
3.2.4.2.2 Aplicación interactiva con reconocimiento de voz y
gestos
Samsung Smart TV permite el reconocimiento de gestos y voz para controlar
sus televisores inteligentes con gestos de la mano o comandos de voz
predefinidos. Este motor de reconocimiento intenta hacer coincidir los
comandos de voz o gestos que realiza el usuario con la mano y hacer coincidir
con alguno del conjunto predefinido lo que conlleve a realizar una operación en
el televisor.
A continuación se presenta una guía de las características que debe tener tanto
una app con reconocimiento de gestos o de una app controlada vía voz.
1. Crear un proyecto JavaScript
2. Agregar en el archivo principal (index.html) las siguientes librerías:
<script type="text/javascript"
src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>
<script type="text/javascript"
src="$MANAGER_WIDGET/Common/af/2.0.0/loader.js"></script>
Figura 14. Librerías para activar el reconocimiento de voz y gestos
3. Para la aplicación de gestos se necesita que el emulador soporte el
reconocimiento del ratón de la PC. Es por eso que en config.xml se debe
agregar:
<mouse>y</mouse>
Figura 15. Activar el reconocimiento del ratón en el emulador
53
4. Hasta este punto ya tenemos activado el reconocimiento de gestos o voz
para la aplicación. Sin embargo siempre se debe realizar una validación de
que realmente se encuentra disponible. Para ello se puede ejecutar el
siguiente código JavaScript descrito en los tutoriales34 de Samsung:
// checks if device supports voice and gesture recognition
if (webapis.recognition.IsRecognitionSupported() !== true) {
$("#error").text("ERROR: Gesture recognition not supported");
return;
}
// checks if gesture recognition is enabled
if (webapis.recognition.IsGestureRecognitionEnabled() !== true) {
$("#error").text("ERROR: Gesture recognition is not enabled");
return;
}
Figura 16. Validar si el dispositivo soporta el reconocimiento de gestos
5. Para hacer uso de los eventos relacionados a cada gesto o comando de voz
se debe utilizar la siguiente función:
Gestos:
var subscribeResult = webapis.recognition.SubscribeExEvent(
webapis.recognition.PL_RECOGNITION_TYPE_GESTURE, "testGestos",
GestureDispatcher.handleGesture);
Voz:
var subscribeResult = webapis.recognition.SubscribeExEvent(
webapis.recognition.PL_RECOGNITION_TYPE_VOICE, "testVoz",
GestureDispatcher.handleVoice);
Figura 17. Manejar eventos de reconocimiento de gestos y voz
Esta función requiere tres parámetros:
- Definir el tipo de reconocimiento, en este caso es para gestos.
- Establecer un nombre de suscripción (testGestos), que puede ser
utilizado más tarde para darse de baja el controlador.
- Una función de devolución que se active cuando se produce un evento
de reconocimiento (en este caso es GestureDispatcher.handleGesture)
- Para ambos casos es similar la codificación.
34
Gesture Recognition: http://www.samsungdforum.com/Guide/d01/index.html
54
6. Con estos pasos nuestras apps ya reconocen el gesto inicial y el evento
clic, sin embargo si se desea definir acciones para otros gestos disponibles
se debe programar más a profundidad.
A continuación se muestra un ejemplo de codificación para manejar los eventos
de voz, ha sido tomado de la guía oficial para desarrolladores35. Se puede
visualizar que cada comando (palabra) se identifica mediante un case y ejecuta
su acción definida.
this.handleVoice = function(e) {
switch (e.result.toLowerCase()) {
case "left": Grid.left(); break;
case "right": Grid.right(); break;
case "exit": sf.core.exit(); break;
case "close":
sf.scene.hide("PhotoView");
sf.key.preventDefault();
break;
case "describe":
(...)
isDescriptionOn = true;
break;
case "return":
if (isDescriptionOn) {
(...)
isDescriptionOn = false;
}
break;
default:
break;
}
};
Figura 18. Manejo de comandos establecidos
Samsung en su página de desarrolladores incluye el siguiente ejemplo36. Que
integra todo lo mencionado, incluso acciones para controlar la mini galería.
Nota: Para hacer uso de estos servicios, se debe seleccionar en la opción
Device el Control Smart.
35
Voice Control: https://www.samsungdforum.com/Guide/tut000001/index.html 36
Gesture recognition: http://www.samsungdforum.com/Guide/d01/index.html
55
Figura 19. Aplicación Interactiva controlada por Gestos
A partir de los medios de interacción se podría aprovechar este tipo de control
para crear aplicaciones como:
Clientes de galerías, que permitan visualizar fotos de mis redes sociales.,
compartir fotos y videos locales, crear galerías, reproducir videos, mp3.
Clases Inteligentes, utilidad en la presentación de transparencias en tiempo
real, compartir recursos educativos, gestor de apuntes y tareas, control de
asistencia.
Hogar Inteligentes, por ejemplo control de electrodomésticos por voz, luces y
lámparas, notificación de estado de los electrodomésticos.
Aplicaciones de emergencia, llamadas instantáneas a números de emergencia
mediante voz, localizador de puntos de emergencia: farmacias, hospitales,
policía, notificación de alertas y aviso a familiares mientras ves un programa de
TV.
Presentaciones de Negocio, Visualización de datos, control de gráficos
interactivos mediante gestos.
3.2.4.3 Testear aplicaciones en Samsung Smart TV
Una vez finalizado y probado nuestra aplicación en el emulador, se deben
realizar las pruebas en un dispositivo real que permita realizar las pruebas en
un sistema de destino completo.
3.2.4.3.1 Configuración del servidor de Aplicaciones
Para configurar el equipo donde se desea probar la aplicación en un televisor,
se deben cumplir los siguientes requerimientos:
Instalar el servidor Web (Apache)
Establecer las preferencias del SDK.
56
Empaquetar la Aplicación para la carga.
Instalación del servidor Web
Es necesario instalar el servidor web Apache 2.2.16, o si se desea, también
puede utilizar un servidor web diferente.
Nota: Los SDK anteriores a la versión 4 si incluyen en la instalación el servidor
Apache.
Configuración de las preferencias del SDK
Se requiere definir las preferencias, puesto que bajo estos parámetros el TV
podrá conectarse al servidor e instalar las aplicaciones locales. Para ello
seguimos la siguiente secuencia:
1. Selecciona la opción Preferencias Samsung Smart TV SDK en el menú
Samsung Smart TV SDK. Selecciona la pestaña Server.
2. Por defecto se asigna la IP de nuestro pc, sin embargo se puede configurar
una nueva IP, siempre y cuando no sea la IP que se asignó al Smart TV.
3. Introducimos la carpeta raíz (ejemplo, [$directorio de instalación Apache]\
htdocs).
Figura 20. Localización de Aplicaciones de subida usando Apache
Nota: el directorio de ruta contendrá los proyectos empaquetados, ya que el
Smart-TV debe acceder a este directorio como si fuese un servidor web.
Empaquetar Aplicaciones
Antes de empaquetar las aplicaciones para testear en el TV, es necesario
probarlas con el emulador.
57
Para empaquetar la aplicación de usuario para subir a un televisor:
1. Seleccione su proyecto, clic derecho, seleccionar Samsung Smart TV SDK
y seleccionamos Packaging (figura 21).
Figura 21. Empaquetando un proyecto Smart TV
Figura 22. Ventana Empaquetar Proyecto
58
2. Se muestra un cuadro de diálogo de empaquetado (figura 22) y se deben
insertar los siguientes datos:
- Nombre de la aplicación y número de versión
- Región donde se utilizará la aplicación
- Fecha del paquete (el valor predeterminado es la fecha actual)
- Esta configuración determina el nombre del archivo que se utiliza para el
paquete.
- Seleccione Actualización de los archivos empaquetados en el servidor, y
escriba un título y una descripción para la aplicación.
3. Haga clic en Aceptar.
Se muestra un mensaje de empaquetado completo (figura 23). Si usted
está usando la carpeta de instalación por defecto, la aplicación
empaquetada deberá subirse al servidor web Apache.
Figura 23. Actualización de los archivos empaquetados en el servidor
4. Una vez subido el empaquetado, se debe crear el archivo widgetlist.xml, en
el mismo directorio de proyectos contenidos en el servidor web para que
puedan tener acceso a (htdocs en Apache):
59
Figura 24. Archivo de configuración para instalación de Apps en el Smart TV
Múltiples aplicaciones pueden ser empaquetadas y almacenadas en el servidor
web para ser subido juntos. Se debe agregar cada uno en el archivo
widgetlist.xml.
3.2.4.3.2 Configuración del Smart TV
Para configurar el TV para probar las aplicaciones realizadas se deben realizar
los siguientes pasos:
1. Configurar la red.
2. Inicia sesión para usuario de la aplicación e instalar una aplicación.
3. Ejecutar y probar la aplicación.
Configuración de la red
Conectar el televisor mediante un cable Ethernet a red wifi a la red que tiene
acceso al servidor web donde está almacenada la aplicación empaquetada (pc
de desarrollo).
1. En el menú de Ajustes, seleccione Red, y entrar en la configuración de
red.
2. Elija la configuración automática (DHCP) o la configuración manual
(dirección IP fija).
3. Para la configuración manual, introduzca la dirección IP, máscara de
subred y la puerta de enlace y los servidores DNS.
60
Figura 25. Configuración de la red
4. Para comprobar que la red funciona correctamente, seleccione Network
Test. Si la prueba falla, póngase en contacto con su administrador de
red. Si la prueba tiene éxito, el televisor está conectado correctamente a
la red.
Figura 26. Consultar estado de la red
5. Pulse la tecla Volver para volver al menú.
Iniciar sesión como desarrollador e instalar una aplicación
Para acceder a la herramienta App usuario como desarrollador
1. Pulse el botón Menú.
2. Haga clic en Funciones Smart (figura 27)
61
Figura 27. Funciones Smart
3. Haga clic en Cuenta de Samsung. (figura 28).
Figura 28. Cuenta de Samsung
4. Para activar la función de la aplicación de usuario, haga clic en Iniciar
sesión. (figura 29).
5. Se debe autenticar con el usuario "develop", dejar en blanco la
contraseña y pulsar iniciar sesión.
6. Ahora acceder al menú de aplicaciones y elija la opción Más
Aplicaciones (figura 30).
7. Enseguida debe ir al menú superior Opciones y se cargarán un conjunto
de más funciones (figura 31).
8. Ahora se debe escoger la opción Ajustes IP para configurarlo con
nuestro servidor (figura 32).
9. En los cuadros, escriba la dirección IP del servidor web (pc desarrollo)
que contiene el paquete de aplicaciones (figura 33).
10. Finalmente seleccionar la opción Sincronizar (Start App Sync) como se
visualizar en la figura 34.
62
Figura 29. Iniciar Sesión – Instalación de Apps
Figura 30. Más aplicaciones – Instalación de Apps
Figura 31. Opciones – Instalación de Apps
63
Figura 32. Configuración IP – Instalación de Apps
Figura 33. Configuración IP – Instalación de Apps
Figura 34. Start Sync App – Instalación de Apps
El televisor indica que está instalando un nuevo servicio, y muestra el nombre
de la aplicación (figura 35).
64
Figura 35. Sincronización de aplicaciones
3.2.4.3.3 Ejecución y pruebas de la aplicación
Para entrar en la aplicación, selecciónela desde el SmartHub del conjunto de
aplicaciones instaladas y pulse la tecla para entrar del mando a distancia. Si no
aparece en la lista general, se debe buscar en Más Apps (figura 30).
Se debe recordar que después de introducir nuevos cambios en la aplicación
se debe empaquetar el proyecto nuevamente. Y sincronizar el televisor con el
servidor. Después de esto, la aplicación actualizada está disponible en Smart
Hub para su ejecución.
Nota: Para borrar la aplicación simplemente bórrela del archivo xml, o desde el
administrador de aplicaciones.
3.3 OTRAS PLATAFORMAS
Como parte del estudio de plataformas y herramientas se ha decidido probar el
SDK de Smart TV Alliance que nos permite desarrollar aplicaciones
compatibles con modelos LG, Panasonic, Toshiba, etc. Y su desarrollo se basa
en tecnologías web.
3.3.1 SDK Smart TV Alliance
Smart TV Alliance proporciona un conjunto de herramientas y alineamientos
para desarrollar aplicaciones Smart TV Alliance. Entre ellos destacan:
- Documentación relativa al ambiente Smart TV Alliance: directrices y
requisitos, referencias a sus API y especificaciones de la plataforma
- SDK que incluye: el IDE de Eclipse para crear su aplicación y un emulador
de Smart TV Alliance para probar la aplicación.
El SDK permite el desarrollo de aplicaciones de tipo web y es compatible con
las especificaciones de HTML5, CSS3 y JavaScript actualizados.
65
3.3.1.1 Instalación SDK Smart TV Alliance
Su instalación es rápida y sencilla, simplemente se debe descargar el software
y se la instala como cualquier otro programa. Sin embargo se debe recordar
que todos los entornos Eclipse requieren tener instalado el JRE (Java Runtime
Environment) para poder correr nuestras aplicaciones.
3.3.1.2 Creación de un proyecto Smart TV Alliance
Similar a muchos otros proyectos, seguimos los siguientes pasos:
1. Ir al menú File > New > Other y luego ir a la categoría Web (Fig. 36)
2. Seleccione el tipo de Proyecto y siguiente.
3. Establecemos el nombre del Proyecto y Finalizamos.
Figura 36. Crear proyecto Smart TV Alliance
4. Una vez creado el proyecto podemos copiar cualquier proyecto web en el
directorio webcontent sin necesidad de realizar algún cambio, ya que todo
se resumen a ficheros: html, css, javascript, y recursos multimedia:
imágenes, videos o audio.
5. Ejecutamos con la opción Deploy to SDK y se inicia el emulador (figura 37).
66
Figura 37. Emulador Smart TV Alliance
Nota: En cuanto a visualización es posible que se deban realizar pequeñas
configuraciones en los archivos de estilos CSS ya que la pantalla del emulador
de este SDK es diferente al de Samsung.
67
CAPITULO IV
4. PRINCIPIOS DE DISEÑO DE APLICACIONES SMART TV
Los principios de diseño son la base para la búsqueda de soluciones a
problemas comunes en el desarrollo de software y otros ámbitos referentes al
diseño de interacción o interfaces [Mer11]. Uno de los aspectos que abarca la
Ingeniería del Software (IS) es la que desarrolla interfaces de usuarios para
que los sistemas puedan interactuar con los seres humanos; esta área de IS se
denomina interfaz humano computador37 (HCI, de sus siglas en inglés).
Hay que recordar que el éxito de una aplicación no solo depende de seguir una
guía de desarrollo o un conjunto de principios. Se debe dar mucha importancia
a la experiencia de usuario, y conocer: ¿Qué tan útil es la aplicación a los
usuarios y la satisfacción del servicio prestado debe ser considerado?
Dado que las aplicaciones para dispositivos móviles, como el servicio basado
en la localización permite a los usuarios acceder rápidamente a la información
relacionada con su localización y el de otras personas, se desea crear una
nueva experiencia de usuario a través del diseño de aplicaciones vinculadas
con la experiencia de ver la televisión, considerando al TV como centro
multimedia de visualización y entretenimiento.38
La conexión de un Smart TV con otro tipo de dispositivos móviles permite a los
usuarios acceder rápidamente a la información con mayor comodidad. Es decir,
esto intenta crear una nueva experiencia de usuario a través del diseño de
aplicaciones interactivas entre equipos.
Dentro del marco de desarrollo de aplicaciones para Smart TV, existen algunos
principios de diseño que han publicado algunos fabricantes. Entre ellos
Samsung quien realiza importantes inversiones en mejorar la usabilidad de sus
aplicaciones. Se da importancia a la simplicidad, la claridad, la estética, y el
control de usuario [Sam13]. Por su parte Google TV se enfoca en la interfaz de
usuario: que comprende la navegación de sus aplicaciones, la estructura de
sus contenidos, así como el rendimiento [Goo14]. Así también Smart TV
Alliance que ofrece su guía de desarrollo en cuanto a los requerimientos de
Interfaz de Usuarios [All14].
Debido a la importancia mencionada, a continuación se mencionan los
principios definidos por estas empresas/organizaciones. Y en la parte final se
37
Human Computer Interaction: http://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction 38
How to Design – Samsung Developers: http://www.samsungdforum.com/Guide/art00118/how_to_design.html
68
ha realizado una propuesta basada en una recopilación de los principios más
importantes y recomendaciones que nos ayudarán en el desarrollo del caso de
estudio.
4.1 PRINCIPIOS DE DISEÑO SAMSUNG SMART TV
Samsung nos ofrece un conjunto de alineamientos mínimos requeridos que
permitirán diseñar una mejor aplicación39. Entre ellos se han destacado los
siguientes:
Simple
Una aplicación no siempre es buena, sólo por tener muchas características
e información.
La pantalla principal de la aplicación no debe contener demasiada
información.
El diseño de la pantalla debe ser de fácil acceso a través de características
de uso fácil, claro y concretas a su uso.
Las operaciones y el tiempo para entrar a cada servicio debe ser reducido al
mínimo para tener una mejor disposición de control.
Sobre todo, la aplicación debe estar diseñada para que los usuarios puedan
usar la app sin necesidad de un manual.
Claridad
El factor más importante en el diseño de una aplicación de TV consiste en
presentar una navegación clara y precisa para cualquier tipo de operación
que requiera el usuario.
Si la navegación es ambigua, los usuarios siempre se sienten inseguros,
por lo que habrá un cierre inmediato de la aplicación y puede provocar una
fuerte tendencia a no volver ejecutar dicha aplicación.
Se debe lograr que los usuarios estén orientados dentro la aplicación. Es
así que los usuarios deben ser capaces de utilizar las operaciones que
quieren con las acciones: mover, regresar, entrar.
Control de usuario
La aplicación debe proporcionar los métodos operacionales y las
correspondientes estructuras intuitivas adecuadas para el dispositivo de
entrada. Con el fin de lograr esto, los nombres de los botones e iconos en el
control remoto deben coincidir con las acciones que se producen en la
pantalla.
39
Principles for Designing Apps for Samsung: TVhttp://samsungdforum.com/UxGuide/2013/01_design_principles_for_creating_samsung_apps_content.html#ux-04
69
Los movimientos que se producen en la pantalla debe coincidir en con los
acciones esperadas por el usuario. Esto quiere decir que, debe haber una
coherencia de las especificaciones de movimiento.
Dado que el control remoto no es móvil, como el ratón del PC, el diseño
estructural de la aplicación debe ser optimizado para el control remoto. Sin
embargo se debe recalcar que existen nuevas formas de control: voz,
gestos, dispositivos móviles.
Consistencia
Para lograr la coherencia, debe garantizarse la correlación de factores tales
como la etiqueta y el icono con las acciones.
La coherencia está altamente relacionada con la mejora en la usabilidad y la
facilidad de aprendizaje.
La coherencia de los componentes en cualquier aplicación, permite a los
usuarios ser capaces de hacer uso de la misma, de una forma más fácil
basada en las características comunes de control de la TV.
Estética
Un diseño estético ofrece más comodidad a los usuarios.
Independientemente si este es fácil de usar o no, el diseño estético parece
más simple y aumenta la posibilidad de ser aceptado por el usuario.
Es una forma más eficaz y generosa para el monitoreo de respuestas
positivas en comparación con otras aplicaciones.
Es necesario tener en cuenta los factores de diseño orientado a los TV
(color, resolución, composición de pantalla) cuando se desarrolla una
aplicación.
4.2 PRINCIPIOS DE DISEÑO GOOGLE TV
La presente guía nos facilita el desarrollo de interfaces de usuario para
aplicaciones Android que se ejecutan para Google TV40. Aunque hay algunas
diferencias internas entre una aplicación de Android para el teléfono y otra para
Google TV, existen características marcadas en cuanto a la interfaz de usuario
en pantallas de diez pies. Es por ello que se deben recordar los siguientes
conceptos básicos:
El entorno de 10 pies es tradicionalmente para consumo de contenido.
El entorno de 10 pies es un ambiente divertido, no un ambiente de trabajo.
El entorno de 10 pies es generalmente un medio social, no un entorno de
usuario único.
40
Google TV Principles: https://developers.google.com/tv/web/docs/design_for_tv
70
La experiencia de visualización de una interfaz de usuario de 10 pies es
una mezcla de ordenador y el televisor.
Las pantallas de televisión tienen ambas características del ordenador y TV
La resolución de la pantalla es como un ordenador, pero se ve afectada por
las características del TV.
El color es diferente en las pantallas de televisión.
Los televisores tienen un sonido de alta calidad
Los televisores suelen estar conectados a un mejor sistema de sonido.
A diferencia de los ordenadores, los usuarios esperan que el sonido de un
televisor y no les resulta perjudicial.
La interfaz de usuario requiere herramientas simples y visibles de
navegación.
Configurar la navegación para avanzar de izquierda a derecha y de arriba a
abajo.
Limite la necesidad de un ratón.
Proporcionar información visual.
La interfaz de usuario de 10 pies que funciona mejor con los patrones de
interfaz de usuario bien establecidas sobre la base de zonas de
contenido.
Las zonas son independientes de los tipos de dispositivo.
La disposición de las zonas son particulares a los tipos de dispositivos.
Muchas interfaces de usuario diferentes se pueden basar en el concepto de
zona.
4.3 PRINCIPIOS DE DISEÑO SMART TV ALLIANCE
El desarrollo de aplicaciones para Smart TV Alliance implica definir interfaces
de usuario optimizadas que permitan ser reutilizables en todas las plataformas
soportadas. Es así que en su guía de desarrollo41 se incluye una descripción de
los requisitos básicos en cuanto a las interfaces de usuario.
A continuación se presentan los requisitos que más destacan en cuanto al
diseño de interfaces y sus elementos:
41
Smart TV Alliance SDK Documentation: https://developers.smarttv-alliance.org/sdk-documentation
71
Diseño de interfaz de usuario
El entorno de visualización de TV se define como su principal requisito, y su
objetivo es proporcionar una experiencia de usuario que permita controlar el
televisor y el equipo multimedia con un mínimo esfuerzo. Por lo tanto, se debe
dar mucha importancia y diferenciar del ambiente ordenador.
Las principales características se presentan en la siguiente tabla:
PC Smart TV
Distancia de la pantalla
2 pies (70cm) 10 pies (3.5 metros)
Ambiente Ambiente de trabajo Ambiente personal
Ambiente agradable Ambiente social/familiar
Comportamiento del usuario
Inclinarse hacia el PC Interacción y búsqueda activa Postura rígida, o estricta.
Alejarse del TV (reclinarse) Menor concentración y participación Postura confortable
Objetivo del usuario
Frecuentemente usada para trabajo Hay un objetivo o necesidad especifica Muchos tipos de contenidos y estructuras.
Usada para entretenimiento No hay un objetivo especifico Contenidos sencillos
Tabla 4. Diferencias entre entorno Smart TV y PC
Interfaz de los elementos
A continuación se proporciona una visión general de los elementos de interfaz
de usuario obligatorios que se considera de mayor importancia en el diseño de
la interfaz de usuario (tabla 5):
Elemento UI Características
Vista de Pantalla Resolución de 1280x720
Regla OverScan
Fuente Tamaño de fuente mínima: 18
Debe ser legible y legible a la distancia 10 pies
Esquema de
Navegación
Todos los elementos deben poder ser reconocidos
Debe ser navegable con los botones básicos: arriba,
abajo, izquierda, derecha, seleccionar, y regresar.
Botones en pantalla Botón Lista de desplazamiento
Teclado en pantalla
Controles de reproducción a través de un menú en
pantalla
Tabla 5. Características Técnicas Desarrollo Apps Smart TV Alliance
72
4.4 PRINCIPIOS DE DISEÑO PROPUESTOS Y RECOMENDACIONES
4.4.1 Principios de diseño
El desarrollo de aplicaciones para Smart TV debe seguir ciertas normas y
principios que permitan cumplir un alto grado de usabilidad y satisfacción del
usuario.
Según Galitz en su libro “The Essential Guide to User Interface Design”
(Gal02). Indica que el diseño de interfaz de usuario, debe dirigirse hacia la
simplicidad, la claridad y comprensibilidad, cualidades que carecen muchas de
las pantallas de hoy en día. Es por ello que a continuación se han seleccionado
los criterios más importantes que nos llevan al diseño de una aplicación con
estas características:
El objetivo principal es mostrar contenido multimedia.
La aplicación debe ser atractiva e interactiva, debe captar la atención del
usuario.
Debe reflejar un medio social, no un entorno de usuario único. Es por ello
que debe tener características sociales.
Proporcionar solo la información requerida y necesaria. Se debe elegir los
mejores contenidos y sobre todo no sobre cargar de información al usuario.
Diseñar una interfaz de usuario simple y fácil de navegar.
Debe definir la estructura de contenido de cada una de las interfaces.
Diseñar modelos de navegación o diagramas que permitan ejecutar las
funciones básicas e importantes de nuestra aplicación. Se puede utilizar
una jerarquía de información.
Definir por lo menos un medio de interacción para controlar la aplicación.
Sin olvidar las funciones básicas: el control de dirección, selección y
retorno.
Enfocar solo las tareas importantes (dar prioridad a las funciones básicas).
Tener cuidado en el tamaño de fuente y legibilidad de los mismos, con
respecto a la distancia de visualización.
Los elementos como menús u opciones deben ser visibles incluso de gran
distancia.
Debe minimizar la entrada de texto.
Aprovechar las capacidades de la pantalla del TV
A pesar de que son muy similares a las pantallas de PC, nuestra app debe
aprovechar al máximo sus características propias: mejor resolución,
capacidad antirreflejo, diseños y contenidos que permitan capturar la
atención de los usuarios.
73
Se debe tener en cuenta la resolución de la pantalla para presentar
imágenes y video en HD. En varios modelos incluso se podría aprovechar la
presentación de contenidos en 3d.
Es importante analizar la calidad de las interfaces de la aplicación, puesto
que la resolución de cada pantalla es diferente, de acuerdo a su modelo y
características.
Aprovechar la alta calidad de sonido de los televisores.
Los televisores tienen un mejor sistema de sonido, es por ello que nuestras
apps deberían aprovechar los parlantes integrados.
Muchas aplicaciones mejorarán su visualización si se incluye ambientación
a través de sonidos.
Es preferible que los sonidos no sean dependientes de la aplicación, sino
que se controlen a través del sistema de TV para mayor facilidad.
4.4.2 Consideraciones Técnicas
Los principios mencionados anteriormente nos darán una guía rápida para el
desarrollo de aplicaciones Smart TV. Sin embargo en cuanto a la parte técnica
es muy importante recordar características como: modelos de pantalla, color,
texto, sonidos y el rendimiento. Google TV nos facilita un conjunto de
alineaciones generales [Goo14], a continuación se han resumido las más
importantes:
Pantalla
Cuando se diseñan aplicaciones para Smart TV se debe recordar que la
pantalla es muy diferente a un dispositivo móvil. No se debe aglutinar
demasiado contenido por el hecho de haber más espacio, en tal caso se
recomienda proporcionar menos IU, y si es posible tratar de automatizar tareas
en vez de pedir la intervención del usuario.
Con respecto al desarrollo se pueden seguir los siguientes consejos:
Utilizar un dispositivo móvil: Smartphone o Tableta; como el modelo de prueba
para la interfaz de usuario, ya que usualmente observamos la TV desde cierta
distancia. A pesar de que muchas SDK incluyen un emulador, resulta de gran
ayuda.
Para evitar una apariencia desordenada en la pantalla, proporcionar ciertos
espacios y márgenes entre los elementos de la página.
Ordenar las funcionalidades de izquierda a derecha de la pantalla y aprovechar
el espacio para contenidos.
74
Color
Las pantallas de TV manejan mejores niveles de contraste y saturación que
cualquier otro dispositivo. Es por ello que a continuación se mencionan
algunos tips:
Se recomienda usar colores sólidos; por ejemplo: blanco, negro.
Evitar los blancos brillantes, rojos, y naranjas, porque causan particularmente
distorsión.
Considerar los diferentes modos de visualización que el televisor puede
ofrecer, por ejemplo modos: Estándar, Vivo, Cine / Teatro, Juego, y así
sucesivamente.
Texto
A pesar de que se basa en tecnología HTML5, se deben evitar fuentes ligeras o
particulares. Por lo general se recomienda utilizar fuentes sencillas y si es
posible reducir la presentación de texto como parte del contenido.
Se debe limitar el número de palabras, mientras se publique menos texto, se
puede agregar mayores contenidos multimedia.
Presentar textos claros sobre un fondo oscuro ya que resulta más fácil de leer
en un televisor, en comparación con el texto oscuro sobre un fondo claro.
Si se presentan textos de más de una línea, utilizar espacios verticales
razonables que faciliten su legibilidad.
Sonido e interfaz de usuario
Si se utilizan sonidos dentro de una aplicación, ya sean sonidos funcionales o
como parte de ambientación. Se debe considerar que:
Los sonidos deben ser apropiados para un entorno de sala de estar.
Por defecto a un volumen bajo, aunque dependerá de la configuración del TV.
75
CAPITULO V
5. CASO DE ESTUDIO
El objetivo que se resume en este proyecto es poner en práctica el
conocimiento teórico adquirido y desarrollar un prototipo de aplicación para
Smart TV que permita aprovechar las tecnologías y contenido web.
5.1 DESCRIPCIÓN DE LA PROPUESTA
Basado en los principios definidos para el desarrollo de aplicaciones Smart TV.
En el presente caso de estudio, se desarrollara una aplicación para Smart TV
capaz de mostrar contenido multimedia en pantalla, aprovechando las ventajas
y beneficios de la resolución y sonido. Es por ello que se ha planteado
desarrollar una aplicación “Álbum Digital” que denominamos e-Gallery. La
misma que permita mostrar fotos y videos de forma interactiva y novedosa:
animaciones, funcionalidades, sonidos, temas.
5.2 ANÁLISIS DE LA PROPUESTA
Se ha definido el desarrollo de la aplicación mencionada, por los siguientes
motivos:
Usuarios: Se ha pensado en todos los posibles usuarios, sin importar edad,
diversidad étnica y racial, número de personas. De hecho, todos los miembros
del hogar podrán participar con la aplicación.
Medios de conexión: la mayoría de usuarios conectan sus televisores a
Internet a través de múltiples dispositivos.
Contenidos: la mayoría de usuarios estamos acostumbrados a revisar
contenidos multimedia en formato corto en nuestras redes sociales: Youtube
(videos cortos), Instagram (videos 15 seg), Facebook (Muro), Twitter (Twet 140
caracteres).
Lado humano: Los smart tv son utilizados principalmente como un dispositivo
de entretenimiento familiar. Según un estudio de LG [15], el 78% de personas
lo tienen en su salón y normalmente la ve con familiares o amigos. El numero
promedio es de 3 personas. A este factor le podemos sumar el grado
sentimental de recuerdos grabados en fotos y videos.
76
5.3 MATERIALES
5.3.1 Hardware
Las aplicaciones se probarán en un dispositivo Samsung Smart TV modelo
series 7; mismo que posee las siguientes características:
Modelo UE40F7000SL 40" Smart TV
Pantalla LED
Series 7
Pulgadas 40(102.21cm)
Resolución 1.920 x 1.080
Tecnología de imagen 3D HyperReal Engine
Smart Hub 2013 Sí
Dual /Quad Core Quad Core
Almacenamiento 1.63GB
Versión de software T-FXPDEUC-1106.0, BT-S
Smart Interaction
Cámara retráctil integrada Sí
Reconocimiento facial Sí
Control por gestos Sí
Control por voz (Integrado) Sí
3D
Samsung 3D (Full HD 1080p) Sí
Conversor 3D (2D a 3D) Sí
Compatible con Smart Evolution Sí
Compatibilidad mando Smartphone
Sí
Modo Juego, deportes Sí
Convergencia Smart
Samsung SMART View Sí
WiFi Direct Sí
HbbTV Sí
Smart Control
Tipo de mando Metálico Smart Touch control
Modelo de mando TM1390 / TM1240A
Touch pad integrado Sí
Micrófono integrado Sí
Conectividad
HDMI 4
USB 3
Wireless LAN integrado Sí
Tabla 6. Características del Hardware - Smart TV Series 7
77
5.3.2 Software
o SDK 4.5
o VirtualBox 4.3
o Apache
o Librerías Javascript: Jquery, NanoGallery,
o API: Flickr, Picassa, Google+.
5.4 METODOLOGÍA DE DESARROLLO
En este proyecto se utilizará la metodología de desarrollo basada en
prototipos42, que facilita la comprensión de requisitos del usuario; permite
incorporar un subconjunto de funciones requerida al software, de manera que
se puedan apreciar mejor las características y posibles problemas.
Una vez creado el prototipo inicial, se trabaja con él durante un período de
tiempo, y a partir de la experiencia aportar nuevas ideas, detectar fallos, entre
otros. Cuando se acaba la fase de análisis del prototipo, se refinan los
requisitos del software, y a continuación se procede al comienzo del desarrollo
a escala real. La metodología de prototipado de software se compone de las
siguientes fases:
1. Análisis preliminar y especificación de requisitos
2. Diseño, desarrollo e implementación del prototipo
3. Prueba del prototipo
4. Refinamiento iterativo del prototipo
5. Refinamiento de las especificaciones de requisitos
6. Diseño e implementación del sistema final
5.4.1 ANALISIS PRELIMINAR Y ESPECIFICACIÓN DE REQUISITOS
5.4.1.1 Análisis Preliminar
Se ha podido identificar que no existe en la tienda de Samsung una aplicación
para Smart TV que permita visualizar galerías de fotos de varias redes sociales
de manera fácil, rápida, sencilla y con ambientación: temas y sonidos.
eGallery nos permitirá visualizar contenidos (imágenes y videos) de: Google+,
Flickr y Picasa en un Smart TV, sin necesidad de acceder a la red social
seleccionada. La aplicación podrá ser controlada mediante gestos para los
modelos Samsung Series 7 en adelante.
5.4.1.2 Especificación de Requisitos
A continuación se describen los requerimientos iniciales.
42
Software Prototyping: http://en.wikipedia.org/wiki/Software_prototyping
78
Código Descripción Prioridad
REQUISITOS FUNCIONALES
RF01 Importar Álbumes Alta
RF02 Elegir tema de Álbum Alta
RF03 Visualizar álbum Alta
RF04 Cargar fotos Alta
REQUISITOS NO FUNCIONALES
RNF01 Facilidad para generar el álbum Alta
RNF02 Diseño de colores para tema Media
RNF03 Validar rendimiento (tiempos de
carga)
Media
RNF04 Portabilidad a otros Smart TV Baja
RNF05 Minimizar almacenamiento Alta
Tabla 7. Requerimientos de la aplicación e-Gallery
5.4.2 DISEÑO, DESARROLLO E IMPLEMENTACIÓN DEL PROTOTIPO
5.4.2.1 Diagrama de casos de uso
Figura 8. Diagrama de Casos de uso
Usuario
Probar Audio
Cargar Galeria Cargar fotos
Ver Información
Ver Temas
79
5.4.2.2 Casos de Uso
5.4.2.2.1 Cargar Galería
Caso de Uso 1 Cargar Galería
Referencia RF01, RF03
Actor Usuario
Tipo Primario
Propósito Visualizar la lista de álbumes de un
usuario específico.
Descripción Permite consultar el conjunto de
galerías y álbumes de la red social
seleccionada.
Precondiciones Iniciar la aplicación.
Álbumes creados en algún servicio.
Se requiere que los álbumes sean
públicos.
Curso normal de eventos
Acción. Respuesta del Sistema.
1. Escribir Nombre/ Titulo de la
Galería
3. Escribir el correo/ usuario
5. Mientras que el usuario lo desee:
5.1Seleccionar la plataforma
multimedia de donde se van a cargar
los recursos multimedia
6. Mientras que el usuario lo desee
6.1 Seleccionar el tema para
visualizar los álbumes.
7. Mientras que el usuario lo desee
7.1 Seleccionar el fondo musical para
visualizar los álbumes
8. Pulsar Generar
2. El sistema carga un teclado
temporal.
4. Valida la cuenta en función de una
dirección de email válida
5.2 El sistema carga los servicios en
una lista.
6.2 El sistema carga los temas en una
lista.
7.2 El sistema carga una lista de
sonidos disponibles.
9. El sistema consulta y carga los
álbumes
Curso alterno de eventos
El usuario no desea ingresar los datos
iniciales.
El usuario digita un usuario invalido
El sistema valida cada uno de los
datos requeridos.
80
El sistema presenta un mensaje de
alerta.
Tabla 8. Casos de uso – Cargar Galería
5.4.2.2.2 Cargar fotos/videos
Caso de Uso 2 Cargar Fotos
Referencia RF04
Actor Usuario
Tipo Primario
Propósito Visualizar la lista de fotos de un álbum
específico.
Descripción Permite consultar el conjunto de fotos
y videos del álbum seleccionado.
Precondiciones Galería Cargada (Caso de uso 1)
Curso normal eventos
Acción. Respuesta del Sistema.
1. Seleccionar un álbum de
fotos/videos generados.
3. Seleccionar una foto/video del
álbum.
5. Mientras el usuario desee
5.1 Seleccionar alguna opción: Atrás,
Siguiente, Reproducir, Cerrar
2. El sistema carga todas las
fotos/videos del álbum seleccionado.
4. El sistema carga la foto/video
seleccionado en pantalla completa.
5.2 El sistema responde a la petición
seleccionada: Imagen anterior,
siguiente imagen, reproducir todas las
fotos, cerrar foto.
Curso alterno de eventos
Pulsar botón Atrás
Seleccionar Galerías
Regresa al formulario inicial.
Regresar al conjunto de álbumes
cargados.
Tabla 9. Caso de Uso – Cargar fotos/videos
5.4.2.2.3 Probar sonidos
Caso de Uso 3 Probar Audios
Referencia RF02
Actor Usuario
Tipo Primario
81
Propósito Probar los sonidos de ambientación
Descripción Permite consultar el conjunto de
sonidos disponibles en la aplicación.
Precondiciones Iniciar la aplicación.
Curso normal de eventos
Acción. Respuesta del Sistema.
1. Seleccionar el menú sonidos.
3. Mientras el usuario lo desee:
3.1 Seleccionar un sonido
3.3 Parar reproducción.
2. El sistema carga la interfaz de
sonidos y reproduce el audio inicial.
3.2 El sistema reproduce el sonido
seleccionado.
3.4. El sistema deja de reproducir el
sonido.
Curso alterno de eventos
El usuario genera la galería para
escuchar un sonido determinado.
El sistema carga todo el ambiente y
reproduce el sonido seleccionado.
Tabla 10. Casos de Uso – Probar Sonidos
5.4.2.2.4 Ver temas
Caso de Uso 4 Ver Temas
Referencia RF02
Actor Usuario
Tipo Primario
Propósito Visualizar los fondos para
ambientación
Descripción Permite visualizar los temas
disponibles para el fondo de las
galerías.
Precondiciones Iniciar la aplicación.
Curso normal de eventos
Acción. Respuesta del Sistema.
1. Seleccionar el menú temas
3. Mientras el usuario lo desee:
3.1 Seleccionar un tema
2. El sistema carga la interfaz de
temas.
3.2 El sistema presenta el nombre o
datos del tema.
82
3.2 Arrastrar temas 3.4 El sistema presenta la lista de
temas disponibles.
Curso alterno de eventos
El usuario genera la galería con el
tema seleccionado por defecto.
El sistema carga todo el ambiente con
el fondo seleccionado por defecto.
Tabla 11. Casos de Uso – Ver temas
5.4.2.2.5 Ver Información
Caso de Uso 5 Ver Información
Referencia RF04
Actor Usuario
Tipo Secundario
Propósito Visualizar información referente a la
aplicación.
Descripción Permite visualizar contenido referente
a la: descripción, indicaciones, etc.
Precondiciones Iniciar la aplicación.
Curso normal de eventos
Acción Respuesta del Sistema
1. Seleccionar el menú
información/indicaciones
2. El sistema carga la información
seleccionada
Curso alterno de eventos
No hay una via alterna
Tabla 12. Caso de Uso – Ver información
5.4.2.3 Arquitectura física
La aplicación eGallery se basará en una arquitectura distribuida, esto con la
finalidad de aprovechar las capacidades que nos brindan las tecnologías web,
apis de desarrollo y sobre todo mejorar el rendimiento en nuestro dispositivo
Smart TV.
Nuestra aplicación se basa en una arquitectura distribuida por varios motivos:
Poca capacidad de almacenamiento del dispositivo.
Importar archivos de mis redes sociales.
Cargar datos actualizados en tiempo real.
Los componentes que se utilizarán en la arquitectura son:
83
Servidores - Servicios en la Nube
Todos los archivos multimedia e información relacionada con el usuario deberá
ser gestionada en el servidor preferente del usuario: Google+, Flickr, Picassa.
La razón principal de los servicios cloud es para reducir el coste de
procesamiento y almacenamiento de los archivos multimedia y álbumes.
Dispositivos para gestionar el contenido
Nuestros álbumes y fotos se gestionarán a través de dispositivos externos (PC,
teléfonos, tabletas) que se conectarán directamente a los servidores
mencionados, ya que resulta más sencillo y cómodo de navegar. Y nos facilita
la gestión de todos estos archivos multimedia. Además se debe recordar que
son servicios gratuitos.
Dispositivos de visualización
Muestra el resultado final de nuestra aplicación. La misma que es una
aplicación instalada en el Smart TV y visualiza uno o varios álbumes según se
ingrese los datos de entrada. Estos datos son referentes a las cuentas de los
servicios mencionados y la configuración de presentación de la galería.
INTERNET
SMART TVPC
MOVIL
GOOGLE+
PICASSA
FLICKR
Figura 38. Arquitectura Física de Aplicación e-Gallery
5.4.2.4 Arquitectura de la aplicación
Como se menciona anteriormente, todas las aplicaciones Smart TV manejan
una arquitectura similar a una página web. Es así que se incluyen archivos
javascript que nos permita consultar y visualizar las galerías de álbumes,
84
archivos css que mejoren el estilo de la aplicación y las interfaces html que es
la capa final de los resultados previstos. El diagrama de la arquitectura se
presenta a continuación:
Figura 39. Arquitectura del proyecto
5.4.2.5 Diseño del prototipo
Para el diseño inicial del prototipo se han diseñado algunas interfaces en la
herramienta Lumzy43, quien nos permite generar una especie de storyboards
que nos permitan presentar una idea de la propuesta.
A continuación mencionamos cada una de ellas:
1. Formulario inicial para insertar datos de acceso
Figura 40. StoryBoard - Ingresar datos iniciales
43
LUMZY: http://www.lumzy.com/
NanoGallery.js
js css
eGallery
Formulario.js
NanoGallery.css
index.html
album.html
tema.html
sonido.html
info.html guia.html
formulario.css
imagenes
app
samsung_apis.js
85
2. Elegir la temática para el álbum, por ejemplo: Campo, Playa, Montañas, etc.
Figura 41. StoryBoard - Elegir la temática para presentar los álbumes
3. Ahora se debe elegir la ambientación de los álbumes mediantes sonidos
predefinidos (figura 42).
4. Visualizar álbumes y galería de imágenes (figura 43).
Figura 42. StoryBoard - Seleccionar un sonido de fondo
Figura 43. Álbumes consultados
86
5. Cargar un álbum especifico
Figura 44. StoryBoard - Álbum seleccionado
6. Cargar una foto especifica.
Figura 45. StoryBoard - Imagen/Video Seleccionado
5.4.3 PRUEBAS DEL PROTOTIPO
Las pruebas iniciales se realizaron en el emulador que nos proporciona
Samsung Smart TV (revisar apartado de instalación). A continuación se
presentan las primeras interfaces de la aplicación:
Generar álbum(es)
Para iniciar el diseño del prototipo, se ha realizado un formulario que permita al
usuario proveer los datos iniciales para la consultar y presentación de sus
álbumes. Para ello se necesita ingresar: Nombres, usuario, seleccionar el
proveedor y elegir el tema.
87
Figura 46. Prototipo - Datos iniciales para generar Álbum
Visualizar álbumes
Luego de ingresar los datos iniciales, podemos iniciar el proceso de consulta y
presentación de álbumes según el usuario y su proveedor. Toda la carga de
datos se realiza gracias a los APIs que nos ofrece: Google, Flickr, y Picasa, y
librerías JavaScript: Jquery, NanoGallery44. El resultado fue el siguiente:
Figura 47. Prototipo - Álbumes generados de una cuenta Google
44
NanoGallery: http://nanogallery.brisbois.fr/
88
Seleccionar un álbum específico
Una vez cargados los resultados de la galería, podemos elegir entre ellos un
álbum específico para visualizar las fotos y videos del mismo:
Figura 48. Prototipo – Visualizar un álbum
Seleccionar una foto
Luego de carga un álbum especifico, podemos elegir entre las imágenes y
videos para visualizarla en pantalla completa, o incluso ejecutar una
presentación secuencial:
Figura 49. Prototipo - Imagen Seleccionada
89
5.4.4 REFINAMIENTO ITERATIVO DEL PROTOTIPO
El prototipo se diseñó como un proyecto web. Esto con la finalidad de facilitar
las pruebas en un navegador de PC. En esta fase se identificaron algunas
incidencias que afectan el diseño de la app. Estos problemas son estrictamente
visuales, por tal razón se dio importancia al diseño funcional y se han realizado
algunos cambios en la interfaz, sin perder la secuencia inicial. Entre los
problemas se destaca:
No se soportan algunas librerías Javascript, por tal razón se ha reducido
el uso de librerías de forma local y se optado por usarlas de forma
remota; siempre y cuando exista compatibilidad.
No se soporta utilizar sesiones, ni cookies. Puesto que al cerrar una
aplicación automáticamente se liberan los recursos que el tv ha utilizado.
La respuesta a los comandos remotos y la visualización en pantalla
correspondiente se pueden demorar durante la carga de una página
web.
La velocidad de exploración de la web dependerá del entorno de red.
Según los tipos de códecs de vídeo/audio admitidos, tal vez no se pueda
reproducir ciertos archivos de vídeo y audio.
A continuación se puede visualizar el cambio más significativo que se realizó
en la interfaz. Esta figura corresponde a la Interfaz inicial de la Aplicación. Se
puede visualizar un formulario similar al prototipo inicial con la diferencia en
solicitar en esta misma pantalla el tema y el sonido de fondo. Además de incluir
menús de: información, ayuda, temas y sonidos que permitan guiar al usuario
en caso de no entender la aplicación desarrollada.
Figura 50. eGallery - Nueva Interfaz
90
5.4.5 REFINAMIENTO DE LAS ESPECIFICACIONES DE REQUISITOS
Los requisitos definidos al inicio del caso de estudio no han cambiado. Sin
embargo se han especificado en mayor detalle ciertas características acorde a
la evolución del proyecto (tabla 13). Por su parte los requisitos funcionales son
iguales.
Código Descripción Prioridad
REQUISITOS FUNCIONALES
RF01 Elegir tema de Galería y sonidos
ambientales
Alta
RF02 Importar Álbumes: Google, Picasa,
Flickr.
Alta
RF03 Visualizar álbumes en tiempo real Alta
RF04 Control de acciones mediante
gestos
Alta
Tabla 13. Requisitos Actualizados
Una vez realizado el estudio inicial de las tecnologías se han podido establecer
los requisitos de mejor manera
5.4.6 DISEÑO E IMPLEMENTACIÓN DEL SISTEMA FINAL
5.4.6.1 Interfaces
Luego de varias pruebas de interfaz, y datos. Nuestro prototipo ha resultado
con las siguientes interfaces:
Interfaz principal:
La interfaz principal contiene el formulario inicial para enviar los datos que
generen el conjunto de álbumes y menús principales de la aplicación.
El fondo de la interfaz es dinámico y cambia cada 5 segundos de imagen.
Figura 51. eGallery – Interfaz Principal
91
Menú Información
El menú Información presenta el contenido informativo de la Aplicación. El
fondo de la interfaz también es dinámico y cambia cada 5 segundos.
Figura 52. eGallery – Información de la Aplicación
Menú Indicaciones
Este menú indica los requerimientos iniciales para utilizar la aplicación. AL igual
que el menú anterior el fondo es dinámico.
Figura 53. eGallery - Indicaciones
Menú Temas
Presenta todos los temas disponibles en la Aplicación. De forma dinámica se
puede pasear por cada uno de los temas como si se manejara con una Tablet.
Una mejor presentación se aprecia desde una pantalla táctil.
92
Figura 54. eGallery - Temas
Menú Sonidos
Presenta todos los sonidos y audios disponibles en la Aplicación, los puedes
controlar similar a un reproductor de música.
Figura 55. eGallery - Sonidos
Interfaz álbumes
Presenta el conjunto de álbumes que la aplicación ha consultado con los datos
de entrada del usuario. Se manejan los contenidos a nivel jerárquico de
álbumes. Las imágenes se ordenan de forma aleatoria. Además se adjunta el
sonido seleccionado por el usuario en la interfaz inicial.
93
Figura 56. eGallery – Álbumes cargados
Luego de realizar todas las pruebas en el emulador se ha decidido instalar
nuestra aplicación en el Smart TV definido en las herramientas. Se ha diseñado
un logotipo referente a la aplicación.
Figura 57. eGallery - Logotipo
Figura 58. Prototipo eGallery instalado en el Smart TV
94
Figura 59. eGallery vista desde el Smart TV
5.5 EVALUACIÓN DE LA APLICACIÓN
5.5.1 Criterios de evaluación
En esta sección, se discuten los criterios bajo los cuales se ha evaluado
eGallery. Algunos de ellos se basan en los principios de definidos en el capítulo
anterior:
5.5.1.1 Usabilidad
Se debe medir la facilidad del uso en cada una de las interfaces de la
aplicación. Se deben realizar pruebas de usabilidad tanto con el control remoto,
así como el control mediante gestos.
Se implementó el control mediante gestos ya que simula un ratón de pc, y el
Smart TV reconoce varios gestos que facilitan el uso de nuestra aplicación:
Seleccionar, Mover, Regresar.
Luego de varias pruebas se ha realizado la siguiente tabla comparativa de
acuerdo a los tipos de control y su grado de facilidad/dificultad para realizar
ciertas acciones al usar la App:
Control remoto Control por gestos
Navegación Objeto por objeto Más rápido
Ingresar datos Más fácil elegir cada letra del teclado. Más precisión.
Menor precisión, depende mucho de la habilidad del usuario para manejar el teclado con los gestos.
Seleccionar menú Ir menú por menú Es más rápido porque es aleatorio, se puede seleccionar cualquier
95
menú sin un orden necesario.
Navegar por los temas disponibles
Más sencillo el control remoto con su flecha a la izquierda.
No es posible realizarlo.
Reproducir sonidos No es posible Es sencillo
Abrir Álbum Es complicado si son demasiados álbumes.
Es sencillo
Abrir foto Es complicado si son demasiadas fotos.
Es sencillo
Regresar El control ya incluye un botón para regresar. Pero no funciona entre interfaces.
Existe un gesto para regresar, pero muchas veces se debe realizar varias veces. O en tal caso seleccionar el botón de Regresar implementado en la Aplicación.
Tabla 14. Comparación de tipos de control utilizados en la App
La reproducción de sonido de ambientación es controlable desde la aplicación,
así como a través desde el sistema de TV.
5.5.1.2 Navegación
Los menús de navegación son simples. Se han colocado de forma que sean
identificables en la aplicación: de izquierda a derecha en sentido horizontal. A
su vez, cada uno de los menús y funcionalidades se han publicado de un
tamaño visible a la distancia, y adecuado para ser controlados vía gestos y
evitar navegaciones complejas.
La navegación dentro de cada álbum es clara e intuitiva. Incluso el formulario
inicial indica que dato debe insertar en cada campo.
La estructura de contenidos es sencilla, en la pantalla inicial existen 2 áreas:
área de menús, y el área de trabajo donde se insertan los datos iniciales.
96
Figura 60. Menús de navegación y formulario inicial
5.5.1.3 Orientación
La aplicación es muy instintiva, y requiere de pocas acciones para llegar al
objetivo.
Se inicia con un formulario sencillo donde se deben insertar los datos
necesarios para generar el álbum: Titulo de la galería, email de donde se
obtendrán las galerías, elegir un servicio: Google+, Picasa, Flickr, y elegir la
ambientación de temas y música de fondo.
Una vez que se generan los resultados, se jerarquizan entre álbumes y fotos; lo
que permite una mejor orientación entre resultados.
Los usuarios no deben reiniciar todo el proceso cuando quieran ver un álbum
anterior, ya que se manejan Rutas de acceso entre álbumes y galerías. Incluso
se han agregado iconos para ambas jerarquías.
97
Figura 61. Enlaces de Navegación de resultados
5.5.1.4 Compatibilidad de Plataformas
El prototipo se ha implementado y ejecutado sobre varias plataformas que
ejecutan aplicaciones de tipo web, es así que se ha identificado que el diseño
es óptimo para las plataformas: Samsung Smart TV (figura 59), Emulador
Samsung (figura 63), Smart TV Alliance (figura 64) y Navegadores de PC
(figura 62). A continuación se adjuntan las pantallas de cada una de las
pruebas realizadas, y luego se ha realizado una tabla comparativa de cada que
indica el éxito o no de una funcionalidad en la plataforma.
Figura 62. eGallery – Vista desde un Navegador de PC
Figura 63. eGallery – Vista desde Emulador Samsung Smart TV
98
Figura 64. eGallery probada en Emulador Smart TV Alliance
Cabe recalcar que para cada plataforma se creó un proyecto distinto; sin
embargo su lógica y archivos fueron los mismos.
A continuación se listan las pruebas de cada funcionalidad probada en cada
plataforma:
Funcionalidad Navegador de PC
Emulador Samsung
Emulador Alliance
Smart TV Series 7
Generar Álbumes X X x X
Seleccionar Álbum X X x X
Seleccionar Foto X X x X
Ver Temas X X X
Escuchar Sonidos X X x X
Tabla 15. Pruebas de funcionalidad en cada plataforma
La funcionalidad ver temas se refiere al menú de temas; mas no a los temas
cuando se generan las galerías.
5.5.1.5 Rendimiento
Es una regla general que los usuarios prefieren aplicaciones llamativas con un
rendimiento rápido. Es por ello que antes de agregar demasiadas animaciones
complejas para su aplicación, se deben considerar y evaluar el impacto en la
satisfacción del usuario, no solo en cuanto a su diseño, sino también al tiempo
de respuesta de la App. Es por ello que se realizará la medición de tiempo de
carga de las funcionalidades a través de contadores de tiempo en JavaScript y
presentados por pantalla (figura 65). Se realizó la misma prueba en todas las
plataformas.
99
Figura 65. Pruebas de tiempo de carga.
A continuación se agrega la tabla comparativa de tiempos de carga de
resultados para cada uno de las plataformas probadas:
Funcionalidad Navegador
de PC
Emulador
Samsung
Emulador
Alliance
Smart TV
Series 7
Cargar Álbumes Google 0,6 3,3 0,3 0,9
Cargar Álbumes Picasa 0,5 3,2 0,5 1,1
Cargar Álbumes Flickr 0,4 3,3 0,4 1,0
Cargar Album+Sonidos 0,6 3,2 x 1,0
Tabla 16. Tiempos de carga en segundos por plataforma
Como se puede observar los tiempos de procesamiento tanto en navegadores,
emuladores y el dispositivo Smart TV son muy cortos. El que mayor tiempo
tarda son los emuladores pero no sobrepasan los 3 segundos. Sin embargo se
debe tener en cuenta que los datos se consultan de la web, y dependerá
mucho de la conexión en el momento de consulta; además del servicio del
proveedor, y la cantidad de datos que se mostrarán. Es por esto que los
valores siempre serán dinámicos, pero serán una guía para evaluar el
rendimiento.
5.5.2 Resultados
El prototipo e-Gallery ofrece muchas características adicionales que no se
pueden encontrar en cualquier otro generador de Álbumes y Galerías para
Smart TV. Las principales características es que se enlaza a grandes redes
100
sociales populares en el cloud de galerías imágenes/videos: Google+, Flickr y
Picasa.
Como requisito inicial se necesita una cuenta personal en una de estas redes
sociales y por lo menos una galería pública, ya que las APIs manejan una
estricta normativa en cuanto a privacidad de datos.
A continuación de mencionan algunos parámetros que se utilizó dentro de las
evaluaciones:
Distancia Requerida
Si se utiliza un control remoto, no requiere una distancia mínima. Sin embargo
es notorio que la señal de mando no debe ser obstaculizada por objetos físicos.
Por su parte para el control mediante gestos es necesario que la persona se
encuentre a una distancia no menor a 1,5 metros ni mayor a 3 metros, puesto
que el sensor de reconocimiento de gestos trabaja con mayor precisión en
estos límites.
Gestos utilizados en la Aplicación
La aplicación integra varios gestos para facilitar ciertas funcionalidades, estos
gestos son predefinidos por la plataforma Samsung Smart TV. Estos son:
1. Mano abierta: Permite iniciar reconocimiento de gestos y navegar por la
aplicación eGallery.
Figura 66. Gesto inicial de reconocimiento
2. Puño cerrado tiempo corto: Permite seleccionar un menú, una opción de
la lista de temas, sonidos, un álbum, o una foto/video.
Figura 67. Gesto para seleccionar
101
3. Puño cerrado tiempo largo: Puedes seleccionar una foto y se la puede
mover hacia la izquierda o derecha.
Figura 68. Gesto para seleccionar y mover
4. Giro de mano circular a la izquierda: Permite regresar hacia atrás.
Figura 69. Gesto para regresar hacia atrás.
5. Giro de mano hacia un lado: Permite cambiar de imágenes a la siguiente
que corresponda.
Figura 70. Gesto para cambiar de foto
Nota: Todas las imágenes de gestos fueron tomadas y adaptadas de la guía: TV GESTURE
BOOK45.
4. Tecnologías soportadas
Luego de realizar pruebas en distintas plataformas, como: navegador pc,
emulador, Smart TV y Smart TV Alliance. Se ha podido construir la siguiente
tabla comparativa que nos indica que tecnologías web y multimedia
funcionaron mejor en cada plataforma o dispositivo.
45
TV Gesture Book: http://www.samsung.com/global/microsite/tv/common/guide_book_5p_vi/main.html
102
Audio video Formulario css Jquery sensores
Emulador No Si No Si Si si
Navegador PC
Si Si Si Si Si no
Smart TV Si Si Si Si Si si
Smart TV Alliance
Si Si Si Si Si no
Tabla 17. Comparación de Tecnologías soportadas
5. Contenidos que se pueden transmitir o presentar
Como se menciona anteriormente los emuladores y dispositivos reales pueden
leer HTML5. Por tal motivo se han identificado que los siguientes contenidos
son compatibles para Smart TV:
Videos: HD, mp4. Embebidos, etc.
Librerías externas: Jquery, Bootstrap, etc.
Imágenes: JPG, PNG, JPEG
Audios: mp3, vma.
6. Restricciones
El prototipo eGallery funciona como un cliente para visualizar nuestras galerías
directamente en una aplicación Smart TV. Sin embargo se deben tomar en
cuenta las siguientes funciones que mejorarían el prototipo final:
Una base de datos con la información personal de los usuarios, así
evitar que el usuario ingrese datos que anteriormente ya digitó.
Incluir otras redes sociales mejoraría en gran medida esta idea inicial.
5.5.2.1 Comparativa de aplicaciones similares
Para finalizar se han recogido algunas aplicaciones similares que nos permitan
realizar una comparación con el prototipo desarrollado (tabla 15).Cabe destacar
que entre los ejemplos mencionados, ninguno permite generar y visualizar un
álbum de fotos y videos de manera sencilla en un Smart TV. Con una
ambientación desde el diseño hasta sonidos de fondo. La lista de álbumes se
consulta en tiempo real. Es así que siempre visualizaremos nuestras galerías
actualizadas.
103
Aplicación Tipo Tecnología Ventajas Desventajas
JAlbum Escritorio,
Web
Java, HTML Genera un directorio y contenido
HTML local.
Funciona para Windows
Se debe comprar Licencia
Pro
Duplica archivos
No se pueden importar
fotos.
Muestra publicidad.
Cincopa Web JSP Almacenamiento en la nube
Permite embeber tus galerías en
tu sitio web.
Maneja APIs para
desarrolladores.
Crear una cuenta en el
sistema de administración.
Comprar versión Premium.
No se pueden importar
fotos.
Hoffman Escritorio,
Web
HTML Álbum profesional Pagar características
Premium
eGallery Smart TV,
Web
HTML5,
Javascript
No ocupa almacenamiento local.
Importa álbumes y fotos de:
google+, flickr, picasa.
Álbumes actualizados desde los
servidores en la nube.
Control mediante gestos.
Evita duplicidad de archivos.
Ambientación de las galerías.
Multiplataforma
Álbumes se administran en
servidor independiente.
Tabla 18. Comparación de aplicaciones similares a eGallery
104
105
6. CONCLUSIONES
La investigación acerca de Smart TV, muestra un futuro prometedor no solo
para desarrolladores, sino para los consumidores ya que cada día podrán
disfrutar de mejores contenidos, de forma muy activa y en pantallas de las
mejores características. Sin embargo unas de las claras limitaciones es su
dificultad para navegar en una aplicación a través de un control básico y más
aún cuando se requiere ingresar texto. El grado de interactividad y la
posibilidad de acceder a diferentes tipos de contenidos requerirán mejores
métodos de control.
Actualmente fabricantes como Google, Samsung y Alliance Smart TV definen
un conjunto de principios y directrices que permiten a los desarrolladores guiar
el diseño de sus aplicaciones y usabilidad con interfaces intuitivas y amigables,
lo que conlleve a una mejor navegación, orientación y experiencia del usuario,
y sobre todo permite generar retroalimentación para futuras implementaciones.
El estado actual para desarrolladores Smart TV no es del todo óptimo. Ante
esto su principal ventaja es que la mayoría de plataformas permiten desarrollar
aplicaciones del tipo Web, esto permite reutilizar código JavaScript no solo
entre plataformas, sino de ficheros disponibles en la nube. Sin embargo cada
fabricante maneja sus propias APIs y extensiones de desarrollo. Esto provoca
incompatibilidad a funcionalidades específicas entre plataformas.
Smart TV ofrece una experiencia multimedia con contenidos de la mejor
calidad para el usuario. Gracias al apoyo de tecnologías web como HTML5,
CSS3 y JavaScript. Se pueden incluir servicios como video llamadas, streaming
de series de Tv y películas, redes sociales, servicios meteorológicos o
financieros, descarga de aplicaciones, incluso aplicaciones SmartHome.
El Prototipo eGallery se desarrolló como un proyecto web en el SDK de
Samsung. Se diseñó bajo los principios propuestos y una arquitectura
distribuida, por ende es adaptable a múltiples clientes, y se piensa en un futuro
llevarla a todas las plataformas Smart TV similares. Sin embargo se pudo
detectar que existen ciertos límites en cuanto a versiones ya que ciertas
animaciones compatibles con navegadores web de PC, no se podían ejecutar
sobre los emuladores Smart TV.
107
BIBLIOGRAFÍA
[Eri11]. Ericsson. “More than 50 billion connected devices”. (2011). http://www.ericsson.com/res/docs/whitepapers/wp-50-billions.pdf. Fecha ultimo acceso: 18-12-13
[Iab13]. Iab Spain. “Estudio Anual IAB Spain TV Conectada y Vídeo Online”. (2013). http://www.iabspain.net/wp-content/uploads/downloads/2013/10/Estudio-TVC-
y-Video-2013.pdf. Fecha ultimo acceso: 18-12-13
[Shi13]. Shin, D., Kim, T.: Smart TV as a Social Platform iConference 2013 Proceedings, (pp. 673-681)
[Per13]. PersonalizeMedia: “Rebooting 2nd Screen and Social TV: Interactive TV 3.0. Actually be social on your social TV service”. (2013). http://www.personalizemedia.com/rebooting-2nd-screen-social-tv-interactive-tv-3-0/
Fecha último acceso: 08-01-14
[Par13]. Park, J: “Smart TV Technology and Service”. (2013)
[Gal02]. Wilbert O. Galitz. “The Essential Guide to User Interface Design”. Wiley Computer Publishing. Segunda Edición. ISBN: 0-471-084646
[Chi13]. ChipWorks.: “Smart TVs at CES 2013: operating systems and processors”. (2013). https://www.chipworks.com/en/technical-competitive-analysis/resources/blog/smart-tvs-at-ces-2013-operating-systems-and-
processors. Fecha último acceso: 16-01-14
[Lee14]. Lee, B.: “2014 Best Internet TV Comparisons and Reviews”. (2014). http://internet-tvs-review.toptenreviews.com/. Fecha último acceso: 16-05-14
[Esp12]. ESPIAL.: “HTML5 - the next platform for Smart TV”.(2012). http://espial.com/wp-content/uploads/2012/10/HTML-5-Technologies-for-the-
Immersive-Smart-TV-Experience-v8.0.pdf. Fecha último acceso: 10-04-14
[Nie13]. Nieto, J: “Usabilidad en dispositivos smart TV”. (2013). http://hdl.handle.net/10609/18529. Fecha último acceso: 20-01-14
[Sam13]. Samsung Electronics: “E-Manual”. (2013). http://downloadcenter.samsung.com/content/UM/201304/20130413105554609/[
SPA]FPDVBEUF-1.004-0401.pdf. Fecha último acceso: 15-02-14
[Mer11]. Merlino, H., Vranić, A., Rodríguez, D., Pytel, P., García-Martínez, R.; “Ambientes de desarrrollo de software basados en patrones de Usabilidad”. (2011). Proceedings XIII Workshop de Investigadores en Ciencias de la Computación. Artículo 3760.
[Mer11]. Sidiropoulos, N.; Stefopoulos, P.: “Smart TV Hacking”. MSc System and Networking Engineering. University of Amsterdam. (2013). Proceedings XIII Workshop de Investigadores en Ciencias de la Computación. Artículo 3760.
[Sma13]. SmartClip.: “Estudio sobre uso y eficacia publicitaria en Smart tv”. (2013). http://www.smartclip.com/sites/default/files/content/case-studies/case-
108
study-pdf/smartclip_SmartTV_Research_LG_DatosES_Ago13.pdf Fecha último acceso: 20-06-14
[Tec12]. Tecnalia, TV App Agency Spain.:“Previsión de TVs conectadas”.
(2012). http://www.tecnalia.com/images/stories/Carvi_2012_06-
Jes%C3%BAs%20Herrero-TV%20APP%20AGENCY.pdf. Fecha último acceso: 20-02-14
[Sam14]. SAMSUNG for Developers: “Development Guide”. (2014). http://www.samsungdforum.com/Guide/. Fecha último acceso: 20-05-14
[Goo14]. Google Developers: “Google TV Principles”. (2014). https://developers.google.com/tv/web/docs/design_for_tv. Fecha último
acceso: 20-05-14
[All14]. Smart TV Alliance: “Smart TV Alliance SDK Documentation”. (2014). https://developers.smarttv-alliance.org/sdk-documentation. Fecha último
acceso: 20-06-14
109
ANEXO 1
HERRAMIENTAS UTILIZADAS
Herramienta Objetivo Enlace
Microsoft Word Documentación
SDK Samsung 4.5
Desarrollo Apps Samsung Smart TV
http://www.samsungdforum.com/devtools/sdkdownload
VirtualBox Para instalar el emulador https://www.virtualbox.org/wiki/Downloads
NotePad++ Cuando se requería editar el proyecto web, sin usar Eclipse
http://notepad-plus-plus.org/download/v6.6.7.html
StarUML Para realizar el modelo de casos de uso y la arquitectura del proyecto
http://www.lumzy.com/
Microsoft Visio Para diseñar la arquitectura física del sistema
Lumzy Para diseñar los prototipos de interfaces
http://www.lumzy.com/
TortoiseSVN Repositorio SVN SVN de la UGR
SDK Smart TV Alliance
Desarrollo de Apps Alliance http://cdnjs.com/libraries/nanogallery
NanoGallery Para consultar los álbumes http://cdnjs.com/libraries/nanogallery
Jquery Para ejecutar funcionalidades
Transit Para presentar animación en los álbumes.
http://ricostacruz.com/jquery.transit/
Microsoft Picture Para recortar las imágenes y darle el tamaño requerido.