1

Trabajo de Investigación

Desarrollo de una aplicación a través de la herramienta de IDE Tizen

Studio para Samsung Smart TV.

Jonathan Benites, Luis Macero, Mishelle Minango, Danny Rodríguez &

David Varela

Febrero 2017.

Universidad de las Fuerzas Armadas “ESPE”

Departamento de Eléctrica y Electrónica.
Tecnología de Software
 2

DEPARTAMENTO DE ELÉCTRICA Y ELECTRÓNICA

INFORME DE TRABAJO DE INVESTIGACION

Nota:
Para ser aceptado el informe debe estar debidamente firmado y complementado por cada uno
de los integrantes. La presente matriz de evaluación debe ser llenada con esferográfico azul.

Autoras y autores:

Nombre

completo: Firma:

Nombre

completo: Firma:

Nombre

completo: Firma:

Nombre

completo: Firma:

Fecha:

NRC y Código de curso:

Evaluación:
INFORME Max.
Objetivos 5
Estado del Arte 15
Explicación de la actividad (Marco teórico, diagramas, explicación 30
de código, proceso de configuración, ejemplos, ejecución,
instalación de prerrequisitos, manual de usuario y resumen, etc)
Conclusiones y Recomendaciones 10
CD (portada y contenidos) 5
Artículo 20
Cumplimiento de formato, Cronograma y bibliografía 10
Video resumen 5
 3

TOTAL 100
EQUIVALENCIA 1,5

DEFENSA Max.
Exposición (Expresión corporal, verbal, y empleo de recursos) 40
(NOTA: las presentaciones se realizarán con PREZI)
Congruencia con el informe 10
Cumplimiento de requisitos 50
TOTAL 100
EQUIVALENCIA 2,5

NOTA DE TRABAJO DE INVESTIGACION Max.

Informe 1,5
Defensa 2,5
TOTAL 4

Observaciones:
 4

CONTENIDO

CONTENIDO ................................................................................................................................... 4
ÍNDICE DE FIGURAS ....................................................................................................................... 6
ÍNDICE DE TABLAS ......................................................................................................................... 7
1. PLANTEAMIENTO DEL PROBLEMA ........................................................................................ 8
2. OBJETIVOS ............................................................................................................................. 8
2.1 Objetivo General ............................................................................................................... 8
2.2 Objetivos Específicos ......................................................................................................... 9
3. ESTADO DEL ARTE ................................................................................................................. 9
3.1 HTML ........................................................................................................................... 9
3.2 Smart TV ..................................................................................................................... 10
4. MARCO TEÓRICO ................................................................................................................. 12
4.1 HTML5 ....................................................................................................................... 12
4.1.1 JavaScript (JS) ..................................................................................................... 12
4.1.2 CSS (Cascading Style Sheets) ............................................................................. 13
4.2 Smart TV ..................................................................................................................... 15
4.2.1 Definición de Smart TV ...................................................................................... 15
4.2.2 Características de las Smart TV .............................................................................. 16
4.3 Tizen Studio ................................................................................................................ 17
4.4 Programación para aplicaciones Smart TV ................................................................. 17
4.4.1 Proceso de desarrollo de Apps ................................................................................ 19
4.4.2 Tipos de aplicaciones .............................................................................................. 20
4.4.3 Arquitectura de aplicaciones ............................................................................... 21
5. DIAGRAMAS ........................................................................................................................ 22
5.1 Diagrama de Bloques .................................................................................................. 22
5.2 Diagrama de flujo ........................................................................................................ 22
6. LISTA DE COMPONENTES .................................................................................................... 23
7. MAPAS DE VARIABLES ......................................................................................................... 23
8. EXPLICACIÓN DEL CÓDIGO FUENTE .................................................................................... 23
9. FUNCIONAMIENTO.............................................................................................................. 23
10. DESCRIPCIÓN DE PRERREQUISITOS Y CONFIGURACIÓN ................................................. 24
10.1 Requerimientos y herramientas para la programación ................................................ 24
10.1.1 Requisitos previos ............................................................................................... 24
10.2 Instalación de Samsung TV SDK................................................................................ 26
 5

10.3 Instalaciones de extensión ........................................................................................... 29

10.4 Instalación de las extensiones de imágenes locales: .................................................. 33
10.5 Actualización de Samsung TV SDK ........................................................................... 35
10.6 Desinstalar Samsung TV SDK .................................................................................... 36
11. CONCLUSIONES ............................................................................................................... 38
12. RECOMENDACIONES ....................................................................................................... 39
13. CRONOGRAMA ................................................................................................................ 40
14. BIBLIOGRAFÍA .................................................................................................................. 41
15. ANEXOS ........................................................................................................................... 42
15.1 HOJAS TÉCNICAS .................................................................................................... 42
 6

ÍNDICE DE FIGURAS

Figura 1. Smart TV ..................................................................................................................... 16

Figura 2. Tizen Studio ................................................................................................................. 17
Figura 3. Proceso de desarrollo de aplicaciones ....................................................................... 19
Figura 4. Tipos de Proyecto y su Arquitectura ............................................................................ 20
Figura 5. Diagrama de Bloques ................................................................................................... 22
Figura 6. Diagrama de flujo de la aplicaciòn desarrollada .......................................................... 23
Figura 7. Acuerdo de licencia de software .................................................................................. 27
Figura 8. Establecer SDK y ubicación de datos .......................................................................... 27
Figura 9. Instalación completa .................................................................................................... 28
Figura 10. Administrador de paquetes ........................................................................................ 28
Figura 11. Pestaña SDK de extensión ......................................................................................... 29
Figura 12. Extensiones requeridas .............................................................................................. 30
Figura 13. Acuerdos de licencia de extensión ............................................................................. 31
Figura 14. Acuerdos de licencia de certificado ........................................................................... 31
Figura 15. Instalación de extensiones ......................................................................................... 32
Figura 16. Certificado de instalación .......................................................................................... 32
Figura 17. Botón de configuración .............................................................................................. 33
Figura 18. Desplegar el panel SDK de extensión........................................................................ 33
Figura 19. Botón Agregar............................................................................................................ 34
Figura 20. Agregar diálogo de repositorio .................................................................................. 34
Figura 21. Confirmar imágenes agregadas .................................................................................. 35
Figura 22. Actualizaciones de paquetes disponibles ................................................................... 36
Figura 23. Desinstalar SDK ........................................................................................................ 37
Figura 24. Confirme la eliminación del directorio ...................................................................... 37
Figura 25. Desinstalación finalizada ........................................................................................... 38
Figura 26. Actividades de cronograma 1 .................................................................................... 40
Figura 27. Actividades de cronograma 2 .................................................................................... 40
Figura 28. Actividad de cronograma 3 ........................................................................................ 40
Figura 29. Actividad de cronograma 4 ........................................................................................ 41
Figura 30. Actividad de cronograma 5 ........................................................................................ 41
 7

ÍNDICE DE TABLAS

Tabla 1. Tipos de Aplicaciones ................................................................................................... 21

Tabla 2. Requisitos del sistema operativo y del sistema ............................................................. 24
 8

1. PLANTEAMIENTO DEL PROBLEMA

El avance tecnológico en los últimos años indudablemente ha influenciado en

centenares de dispositivos, y por supuesto las personas están expuestas a participar
en estos procesos, debido a que cada revolución tecnológica surge a través de las
necesidades de las personas. Los teléfonos celulares fueron los primeros en
adquirir múltiples cualidades y funcionalidades al ser un dispositivo de uso diario
los cuales llegaron a denominarse teléfonos inteligentes o “Smartphone” por
actuar como una mini computadora para el usuario, con la capacidad de almacenar
datos y realizar actividades interactivas y conectividad a Internet. El mercado se
abarroto con estos dispositivos pero los usuarios aun presentan más necesidades,
como el de disfrutar de un descanso merecido y poder revisar los correos
electrónicos desde un cómodo sofá o ver películas entre toda la familia sin la
necesidad de invertir una fortuna en entradas para el cine, a partir de estas y
muchas otras necesidades la televisión como un ícono de unión familiar se
transformó en una televisión inteligente Smart TV, con la capacidad de realizar
múltiples actividades como: ver películas en línea, revisar redes sociales,
entretenimiento con las aplicaciones etc.

Existen varias aplicaciones para las Smart TV que permiten a los usuarios
divertirse y entretenerse, pero el entretenimiento no se basa simplemente en mirar
películas en alta resolución o jugar con la televisión, la Smart TV proporciona más
que actividades banales, es por eso que en este trabajo de investigación de
desarrollará una aplicación con contenido educativo de cómo trabajar con lenguaje
HTML para la programación de aplicaciones en Smart TV, que contribuirá a
desarrollar el instinto de programación desde los más pequeños en casa o cual
usuario que desee enmarcarse en el área de programación.

2. OBJETIVOS

2.1 Objetivo General

 9

Desarrollar una aplicación a través de la herramienta de IDE Tizen Studio para

Samsung Smart TV.

2.2 Objetivos Específicos

 Investigar la definición, características y aplicaciones del Smart TV.

 Investigar los requerimientos para desarrollar aplicaciones con Smart TV.

 Desarrollar una aplicación para Samsung Smart TV

 Ejecutar pruebas de la aplicación desarrollada.

3. ESTADO DEL ARTE

3.1 HTML

En el trabajo de tesis de (Yépez Rocha, 2015) desarrollan un sistema de

información interactivo basado en Web 3.0 con la finalidad de contribuir con la
empresa Centro Vacacional Staff Vacation Cia. Ltda diseñando un portal web
multiplataforma que brinde servicios de información a los turistas sobre la ciudad
de Quito, la información será una retroalimentación de los usuarios a través de las
publicaciones de fotografías de lugares de interés. Para el desarrollo de la página
web utilizaron el lenguaje HTML5 por contener una serie de protocolos óptimos
para el desarrollo de aplicaciones web, generando páginas dinámicas, es decir con
un cambio de contenido periódicamente, según las modificaciones realizadas en
la base de datos o las peticiones de consulta que se hagan a otros servidores.

El trabajo de titulación de (Paredes Flores & Sulca Villamarín, 2016) trata sobre
la implementación de un sistema Web utilizando tecnología PHP y estándares
HTML5 y CSS3 para el control y monitoreo del impacto ambiental que generan
las operaciones y actividades administrativas militares en el comando conjunto de
las Fuerzas Armadas del Ecuador. El lenguaje de programación utilizado para este
trabajo fue HTML el cual facilita la organización de la información y nuevas
funcionalidades para ambiente web, así como también el manejo de grandes
cantidades de información y filtrado de las mismas directamente en el cliente,
 10

además facilitan y hacen más rápida la navegación y validación de la información.

HTML junto con CSS fueron una clave directa para diseñar la capa de
presentación, implementando los estándares de HTML el código del sistema
desarrollado fue mucho más simple, generando páginas ligeras, mejorando el
tiempo de carga y permitiendo una mejor usabilidad.

En el trabajo de titulación de (Cayo Logro & Zuñiga Yanzapanta, 2013) sobre el

diseño e implementación de una página web y una red virtual privada, para la
actualización, almacenamiento y monitoreo de información de la red de estaciones
meteorológicas de la ESPE extensión Latacunga, en donde utilizan HTML como
un lenguaje de programación de etiquetas por su sencillez al momento de leer y
escribir por parte de las personas y de los sistemas electrónicos, además utilizaron
las funciones HTML para publicar los datos actuales e históricos de su estación
meteorológica a un sitio web.

Existen numerosas aplicaciones con el lenguaje de programación HTML y en

diversos campos, como se pudo observar en los trabajos de titulación y trabajos
de investigación expuestos anteriormente los cuales demuestran las grandes
ventajas de trabajar con un lenguaje que permita generar páginas más simples,
ligeras, permitiendo un fácil acceso al usuario además garantiza una mejor
organización de la información y nuevas funcionalidades para ambiente web, así
como también el manejo de grandes cantidades de información y filtrado de las
mismas. En el presente trabajo de investigación se desarrollará una aplicación para
las Smart TV utilizando este lenguaje de programación HTML, el cual podrá ser
compatible con múltiples dispositivos existentes.

3.2 Smart TV

El trabajo de titulación de (Coral Rojas, 2015) describe el avance tecnológico de

la televisión y desarrollan dos aplicaciones para la plataforma Smart TV del
fabricante Samsung utilizando el SDK, JavaScript, CSS y HTML. Las
aplicaciones son referentes a los temas de Turismo y Salud en Ecuador, con la
 11

finalidad de dar a conocer los lugares más importantes de país y presentar

información sobre las principales enfermedades o métodos de prevención.
Permitiendo la visualización de información en la televisión mientras se está
ejecutando y obtienen datos provenientes del Transport Stream (TS) de la señal
digital como el nombre del canal o el programa que se está transmitiendo. El
usuario puede acceder a la aplicación a través de las listad de aplicaciones
disponibles en el televisor.

En el proyecto de titulación de (Gallegos Cáceres, 2014) trabajó en la creación

de escenarios de Telemedicina a través de Smart TV aplicados a entornos
domésticos, creando distintos escenarios y casos de uso para ciertos sectores de la
población que más necesidad puedan tener y los contemplamos para que reciban
un tratamiento mejor y obtengan una vida más cómoda. Después de desarrollar
una investigación comparativa entre distintas marcas de televisiones inteligentes
se decidió a trabajar con el televisor Samsung debido a las cualidades avanzadas
que este presenta en comparación de otros productos, sobre todo en el sensor de
movimiento, la cámara integrada y el reconocimiento facial y de gestos, además
una amplia gama de compatibilidad con otros dispositivos.

El trabajo de titulación presentado por (Jaldo Asenjo, 2015) señala que las
televisiones son los aparatos electrónicos más utilizados en los hogares, y que
además han tenido una gran transformación con la llegada del internet, ampliando
su gama de trabajo y creando televisores inteligentes, en el proyecto de titulación
se realizó dos aplicaciones para las televisiones Smart TV de Samsung, las cuales
están basadas en los cursos de enseñanza de autoescuela, en donde el alumnado
puede matricularse en cursos y realizar test, y por supuesto diseñó una aplicación
web para que el docente tenga un seguimiento de los cursos y sus alumnos.

En los trabajos presentados sobre las Smart TV se pudo observar que la mayoría
de usuario prefiere trabajar con televisiones de la marca Samsung debido a sus
 12

amplias cualidades y características que permiten a los programadores diseñar e

implementar aplicaciones que mejoren la calidad de vida de los usuarios, en el
siguiente trabajo de investigación se trabajará con las Smart TV de la marca
Samsung por sus grandes ventajas que estas presentan sobre otras marcas así como
también por la compatibilidad con otros dispositivos

4. MARCO TEÓRICO

4.1 HTML5

HTML5 es un desarrollador web que consta de tres características: estructura,

estilo y funcionalidad. La idea de dotar de más características a la web hizo que
aparecieran nuevos lenguajes; en un pasado cercano parte del contenido
multimedia venía dado 69 mediante Flash o Java sin embargo con la creciente
utilización del Internet y la falta de integración de los mencionados
complementos, resultaba necesario idear una nueva manera de desarrollo Web.
Con la incorporación de mejores intérpretes JavaScript en navegadores los
desarrolladores comenzaron a utilizarlo obteniendo innovación y grandes
resultados dando origen al llamado Web 2.0. (Gauchat, 2012)

Conjuntamente JavaScript, HTML y CSS constituyen la mejora o evolución que

requería la web y unidas bajo HTML5 que provee de un propósito a cada
tecnología y estándares para los diferentes aspectos web, básicamente asigna
HTML a la estructura, C SS al aspecto visual y diseño de la misma, finalmente
JavaScript posee la capacidad de creación de aplicaciones web funcionales
además de dotar de dinamismo a la página web o aplicación.

4.1.1 JavaScript (JS)

Originalmente llamado LiveScript, fue desarrollado por Netscape; es un lenguaje

Script (de documento) multiplataforma orientado a eventos con manejo de objetos
utilizado para la aceleración del procesamiento de código mediante motores de
 13

interpretación, de modo que las instrucciones se analizan e interpretan al momento

de su ejecución; a diferencia de JAVA donde el código debe ser compilado
previamente para poderse ejecutar.

Pese a la similitud en nombre entre Java y JavaScript el último no tiene nada que
ver con el lenguaje de Oracle.

JavaScript está diseñado para funcionar en un entorno y no como un lenguaje de

entrada y salida, el entorno generalmente un navegador web, pero en la actualidad
existen otros intérpretes de JS ya que el lenguaje permite incluso el desarrollo de
aplicaciones.

4.1.2 CSS (Cascading Style Sheets)

Es un lenguaje que describe el estilo visual o el formato en que se presentan los

elementos en documentos HTML y XML. El lenguaje fue desarrollado como
complemento para reducir la complejidad de HTML y sus limitaciones dotando
estilos básicos a cada elemento mediante atributos en las etiquetas HTML; con el
aumento de desarrollo y complejidad se enfocó CSS a la presentación (aparte de
la estructura), creciendo en importancia con el tiempo.

Según (Bravo Rodrigo, 2014) 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 ofrecer una gama amplia de contenido multimedia a los
consumidores, en forma on-demand, a un ambiente de sala de estar más moderna,
inmersiva y familiar.

La mayor parte de las nuevas características de HTML5 son soportados por la

mayoría de navegadores existentes como Mozilla Firefox, Google Chrome,
Internet Explorer, Opera y los navegadores móviles.

Por lo tanto las aplicaciones que se desarrollan en un entorno HTML son

soportadas por la mayoría de dispositivos existentes en el mercado.
 14

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.
Siendo más sencillo agregar componentes como:

 Audio y video
 Canvas
 Formularios

En (Coral, 2015) afirma que en la actualidad CSS se encuentra en su tercera

versión con mejoras y nuevas características, cuenta con soporte para versiones
anteriores, además del estilo CSS3 también se encarga de factores que permiten
trabajar con esquinas redondeadas o sombras.

Básicamente las hojas de estilos funcionan a través de reglas compuestas por dos
partes, primero un selector que se encarga de determinar los elementos afectados,
la segunda es la declaración que especifica el efecto, esta última se compone por
una propiedad y el valor asignado.

h1{color: blue;}

-: selector

-: declaración

Según (Carballeiro, 2012) menciona que un problema suele presentarse al

momento de implementar HTML es lograr que el diseño presentado de la misma
forma para la mayoría de los navegadores de Internet. Este inconveniente se debe,
principalmente, a que algunos fabricantes no han incorporado estándares que
determinan la estructura para el diseño de páginas Web.

En consecuencia, tendremos que aplicar parches en el código CSS y HTML para

que sea compatible con los navegadores más utilizados como:

 Internet Explorer 6, 7 y 8
 Mozilla Firefox 3.5 y 3.6
 Chrome 5.0 y Safari 4.0.

A estos parches en el código se denomina cross-browsing.

 15

Es importante distinguir entre las distintas versiones de cada navegador, ya que

cada uno interpreta el código de forma diferente. Si nos aseguramos de que nuestro
sitio sea compatible con los siete navegadores mencionados, el 96% de los
usuarios de Internet podrá ver sin problemas el trabajo que estamos desarrollando.

En los diferentes artículos descritos anteriormente se toma en consideración que

para el desarrollo de una aplicación esta debe ser fácil de entender y utilizar por
parte del usuario, por tanto se trata de implementar una interfaz ordenada y sin
sobrecarga de componentes.

Para lograr esto se hará uso de la plataforma de Samsung la que ayuda a facilitar
la utilización de componentes gráficos como botones o listas para asignar acciones
o funcionalidades, actualmente se puede trabajar con herramientas visuales de dos
maneras diferentes, la primera utilizando AppsFramework (A.F) 2.0 UI
Components o la segunda con CAPH Framework, en ambos casos se generan
escenas (entorno visual para agregar los componentes).

4.2 Smart TV

4.2.1 Definición de Smart TV

Una Televisión inteligente o Smart TV es un dispositivo con características

tecnológicas muy especiales a diferencia del resto de televisores. Su capacidad
para la conexión a internet, ofrecer diversos servicios digitales e inclusive buscar
contenidos en la Web como películas, series, archivos multimedia, grabar
programas en un disco rígido o la interacción con los canales a través de distintas
aplicaciones hacen posible asociar a una Smart TV con un ordenador
Los televisores inteligentes llevan incorporado Blu-RAy para reproducr DVD de
alta definición, presentan una interface fácil e intuitiva de manejar, con pantallas
LCD o LED. (Pérez Porto & Merino, 2016)
 16

Figura 1. Smart TV

4.2.2 Características de las Smart TV

 Apss con contenidos de preferencia para el usuario como: series, películas,

deportes, etc.
 Navegar por internet desde la comodidad de un sofá para ir a la web, revisar
redes sociales, correo electrónico, etc.
 Televisor con múltiples funciones
 Permite la conexión con distintos dispositivos como interactividad móvil.
 Interconectividad con la ayuda de funcione y aplicaciones que permiten
interactuar con el Smart TV de forma simple e intuitiva, así como el poder
conectar el televisor con otros dispositivos para hacer la vida más cómoda
 Permiten el uso de servicios de video bajo demanda
 Calidad de su pantalla que permite la visualización de programas en alta
definición, modificando el hábito de ver televisión.
 Conexión HDMI y USB.
 Reconocimiento de gestos, voz y facial para el control de ciertas aplicaciones.
 Reproducción de contenido multimedia especiales como: HD, 3D y sonidos
de mejor calidad.
 Compatibilidad con dispositivos Android, iOS, ChromeOS, Windows, Mac
OS, compatibilidad casi todal
 17

4.3 Tizen Studio

Es una plataforma de software que permite desarrollar aplicaciones bajo el sistema

de código abierto. Para los desarrolladores de aplicaciones y los proveedores de
software independientes, Tizen ofrece el poder para desarrollar aplicaciones a
través de un soporte HTML5 incomparable, también ofrece el potencial para que
los desarrolladores de aplicaciones extiendan su alcance a los nuevos dispositivos
inteligentes, productos electrónicos de consumo como: televisores, consolas de
videojuegos, DVR, automóviles y electrodomésticos. (Linux, 2014)

Tizen fue creado en la fundación de Linux, por lo cual posee una arquitectura con
el sistema operativo basado en Linux, además de utilizar código abierto, facilita
la ayuda de grupos de trabajo en todo el mundo

La versatilidad de Tizen ha permitido el crecimiento acelerado del entorno de

desarrollo y más preferido por los usuarios para diseñar aplicaciones y servicios
móviles.

La API y el SDK de Tizen permiten que los desarrolladores utilicen tecnologías

web para escribir aplicaciones que se ejecuten en múltiples segmentos del
dispositivo. (Linux, 2014)

Figura 2. Tizen Studio

4.4 Programación para aplicaciones Smart TV

Las plataformas de Smart TV utilizan tecnologías de soluciones abiertas y

 18

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 a la implementación

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 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

 19

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.

4.4.1 Proceso de desarrollo de Apps

Los entornos de desarrollo de aplicaciones Smart TV ofrecen las herramientas

necesarias para la gestión de la aplicación, desde su creación, implementación, y
su liberación. La siguiente figura muestra el proceso de desarrollo de una
aplicación para Smart TV.

Figura 3. Proceso de desarrollo de aplicaciones

Para desarrollar una aplicación para Smart TV se debe tomar en consideración los
siguientes pasos:

1. Planificar y diseñar la aplicación y la interfaz de usuario de la aplicación.

 20

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.

4.4.2 Tipos de aplicaciones

4.4.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
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.

En la siguiente figura se indica la principal diferencia entre los dos tipos de

proyecto. Sin embargo para el desarrollo de la aplicación se tomara
únicamente el tipo web.

Figura 4. Tipos de Proyecto y su Arquitectura

4.4.2.2 Tipos de aplicaciones según el tipo de pantalla

En la actualidad es posible implementar tres tipos de aplicaciones para Smart TV

desde su SDK. Independientemente de su tipo de proyecto (sea JavaScript, C,
Flash) se consideran las siguientes:
 21

Tabla 1. Tipos de Aplicaciones

Aplicaciones La aplicación ocupa la pantalla entera.

Pantalla completa
Aplicaciones media La aplicación se muestra sólo en una parte
pantalla 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 La aplicación puede ser controlada desde
multipantalla otra pantalla: móvil, Tablet.

Actualmente Samsung proporciona un SDK para desarrollar e implementar

aplicaciones multipantalla, lo que facilita la interacción entre una aplicación Smart
TV y aplicaciones en dispositivos móviles Android e IOS.

4.4.3 Arquitectura de aplicaciones

Una aplicación de Smart TV es un proyecto web que consiste en un conjunto de

archivos. El esquema en que se desarrolla la mayoría de aplicaciones Smart TV
son las siguientes:

 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
 22

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.

5. DIAGRAMAS

5.1 Diagrama de Bloques

Figura 5. Diagrama de Bloques

5.2 Diagrama de flujo

 23

Figura 6. Diagrama de flujo de la aplicaciòn desarrollada

6. LISTA DE COMPONENTES

7. MAPAS DE VARIABLES

8. EXPLICACIÓN DEL CÓDIGO FUENTE

9. FUNCIONAMIENTO
 24

10. DESCRIPCIÓN DE PRERREQUISITOS Y

CONFIGURACIÓN

10.1 Requerimientos y herramientas para la programación

Como desarrollador de aplicaciones para Smart Tv, Samsung es el encargado de

proveer las herramientas (software) necesario para la creación y gestión de
aplicaciones compatibles con Smart TVs, a continuación se describen las
utilidades que facilita el fabricante para iniciar con la programación en su
plataforma (Samsung, pág. disponible en línea).

10.1.1 Requisitos previos

Samsung establece un conjunto de características mínimas que debe cumplir

la computadora para instalar las herramientas de desarrollo de aplicaciones de
Smart TV, utilizando Tizen.

Antes de instalar Samsung TV SDK, asegúrese de que su computadora de

desarrollo cumpla con los requisitos previos (pre-requisitos tomados desde
página oficial: http://developer.samsung.com/tv/develop/getting-
started/setting-up-sdk/installing-tv-sdk/), se analiza de acuerdo a la siguiente
tabla:

Tabla 2. Requisitos del sistema operativo y del sistema

Categoría Requisito

64 bits recomendados Windows XP Service Pack 2 o

Windows®
Sistema superior
operativo
Linux Ubuntu 14.xo superior
 25

OS versión 10.6 o superior en hardware basado en

Mac OS Intel, Mac OS X 10.10 (Yosemite) 64 bits, 10.11 (El
Capitan) 64 bits, 10.12 (Sierra) 64 bits

Dual-core: 2.8 GHz o más rápido

Procesador
Single-core: 3 GHz o más rápido

RAM 4 GB o más

6 GB o más El espacio en disco insuficiente puede

Espacio del disco hacer que el SDK muestre un comportamiento no
deseado.

Resolución de la pantalla 1280x1024 px o superior

Kit de desarrollo de Java Java Development Kit 1.8 o superior

Requisitos del emulador

Para usar el emulador de TV:

 Su CPU debe ser compatible con la virtualización asistida por hardware:

Para Windows® y macOS, verifique las especificaciones del producto
Intel® para asegurarse de que su CPU sea compatible con Intel® VT-x.
Para Linux, verifique el sitio KVM para asegurarse de que su CPU sea
compatible con Intel® VT-x o AMD-V ™.
Debe actualizar a la última versión proporcionada por el proveedor del
controlador de tarjeta gráfica para la aceleración de OpenGL® ES.
En Ubuntu 14.04 / 16.04, la versión del controlador Intel debe ser 8.0.1 o
superior.
Si la máquina host está utilizando la tecnología NVIDIA® Optimus®, el
emulador funciona con la tarjeta gráfica incorporada. Para evitar esto,
 26

deshabilite la tecnología Optimus® o configure el emulador para que se

ejecute con la tarjeta gráfica NVIDIA externa.
Nota

En Windows®, dependiendo de su tema de sistema operativo (como los temas no

Aero y temas de Windows XP), una superficie de visualización puede borrarse
por un tiempo si la ventana del emulador está cubierta con otra ventana. Si hace
clic en la ventana del emulador, la superficie de visualización se ejecutará
correctamente de nuevo.

10.2 Instalación de Samsung TV SDK

Para trabajar con el Samsung TV SDK, debe instalar:

1. Tizen Studio IDE

2. Extensiones de TV Samsung
3. Extensión de certificado de Samsung
4. Instalación Tizen Studio IDE

 Para instalar el IDE de Tizen Studio:

1. Descargue y ejecute el instalador de Tizen Studio .
2. Aceptar la licencia de software

La licencia contiene importantes avisos legales para usar

Tizen Studio. Léalo en su totalidad y haga clic en "Aceptar"
solo si está de acuerdo con la declaración de la licencia.
 27

Figura 7. Acuerdo de licencia de software

3. Configure el SDK y la ubicación de los datos.

Tizen Studio y su directorio de datos se instalan en la ubicación

especificada en el paso "Configuración de instalación". Para
cambiar el directorio, haga clic en el botón "..." y especifique
un nuevo directorio. Si el nuevo directorio es válido (no se
muestran errores), haga clic en "Instalar".

Figura 8. Establecer SDK y ubicación de datos

4. Espere mientras está instalado Tizen Studio.

Una vez que haga clic en Instalar, el instalador instalará los
paquetes y herramientas necesarios en el directorio
especificado. Puede supervisar el proceso de instalación o cancelar
 28

la instalación. El proceso de instalación se completa en unos

minutos, a menos que lo cancele.

5. Instale herramientas adicionales.

Una vez finalizada la instalación, inicie el Administrador de
paquetes marcando la casilla de verificación "Iniciar el
administrador de paquetes" antes de hacer clic en "Finalizar".

Figura 9. Instalación completa

6. El Administrador de paquetes se inicia.

Si Package Manager no se inicia, ejecute "<install path> /package-
manager/package-manager.exe".

Figura 10. Administrador de paquetes

 29

Para obtener más información, consulte Instalación de Tizen Studio .

10.3 Instalaciones de extensión

Puede instalar las extensiones requeridas usando el repositorio en línea. Si la

configuración de su firewall no le permite acceder al repositorio, también puede
instalar las extensiones desde las imágenes locales.

Para instalar las extensiones usando el repositorio en línea:

1. En el Administrador de paquetes, seleccione la pestaña "Extensión SDK".

Figura 11. Pestaña SDK de extensión

2. Haga clic en "instalar" al lado de "Extensiones de TV- <versión>" y

"Extensión de certificado de Samsung".
 30

Figura 12. Extensiones requeridas

3. Acepta las licencias de software.

Las licencias contienen importantes avisos legales. Léelos en su totalidad

y haga clic en "Aceptar todos" solo si está de acuerdo con las
declaraciones de licencia.
 31

Figura 13. Acuerdos de licencia de extensión

Figura 14. Acuerdos de licencia de certificado

 32

4. Espere mientras las extensiones están instaladas.

Figura 15. Instalación de extensiones

Figura 16. Certificado de instalación

 33

10.4 Instalación de las extensiones de imágenes locales:

1. Descarga las siguientes imágenes:

Extensiones de TV Samsung
Extensión de certificado de Samsung (descarga directa)

2. En el Administrador de paquetes, haga clic en "Configuración".

Figura 17. Botón de configuración

3. Despliegue el panel de configuración de Extension SDK haciendo clic en

"Extension SDK" en la parte inferior del cuadro de diálogo.

Figura 18. Desplegar el panel SDK de extensión

 34

4. Para agregar una imagen local, haga clic en "+".

Figura 19. Botón Agregar

5. Se abre el cuadro de diálogo "Agregar repositorio".

6. Ingrese los valores en los campos "Nombre" y "Repositorio". Ingrese la
ruta completa del archivo de imagen SDK en el cuadro "Repositorio", o
haga clic en "..." junto al campo para abrir el explorador de archivos y
seleccione el archivo de imagen.
7. Haga clic en "Aceptar" para cerrar el cuadro de diálogo "Agregar
repositorio".

Figura 20. Agregar diálogo de repositorio

8. Cuando selecciona el archivo de imagen en la lista de repositorios, se

muestra la información de origen de la imagen.
9. Haga clic en "Aceptar" para confirmar.
 35

Figura 21. Confirmar imágenes agregadas

10. Seleccione la pestaña "Extension SDK".

11. Haga clic en "Instalar" al lado de las extensiones agregadas.
12. Acepta las licencias de software.

Las licencias contienen importantes avisos legales. Léelos en su totalidad y

haga clic en "Aceptar" solo si está de acuerdo con las declaraciones de
licencia.

13. Espere mientras las extensiones están instaladas.

14. Para obtener más información, vea Configurar el Administrador de
paquetes .

10.5 Actualización de Samsung TV SDK

Puede actualizar el SDK usando el repositorio en línea o desde un archivo de

imagen.

1. Para actualizar paquetes usando el repositorio en línea:

2. Inicie el Administrador de paquetes.
Si está conectado a Internet y hay actualizaciones disponibles para sus
paquetes Tizen Studio instalados, aparece el botón "Actualizaciones
disponibles".
 36

Figura 22. Actualizaciones de paquetes disponibles

3. Haga clic en "Actualizaciones disponibles" para actualizar todos los

paquetes que ha instalado. Para garantizar la integridad del sistema en
todos los paquetes en Tizen Studio, el Administrador de paquetes no
admite la actualización de paquetes individualmente.
4. Para actualizar un paquete de extensión utilizando un archivo de imagen,
siga los mismos pasos que para instalar las extensiones requeridas .
5. Para obtener más información, consulte Actualizar Tizen Studio .

10.6 Desinstalar Samsung TV SDK

1. Inicie el desinstalador en "<ruta de instalación> /package-

manager/uninstaller.exe".
2. Seleccione los componentes para desinstalar.
Si no selecciona el componente de datos SDK, puede mantener los
archivos de datos SDK en sus directorios para su futura reutilización. El
directorio de datos SDK normalmente contiene archivos de datos creados
por el usuario, incluidas imágenes de emuladores, archivos de registro y
archivos de configuración de herramientas.

Importante
 37

Antes de continuar, haga una copia de seguridad de todos los datos y

archivos que desee conservar. Una vez iniciado, la desinstalación no se
puede cancelar y los archivos eliminados no se pueden restaurar.

3. Haga clic en "Desinstalar".

Figura 23. Desinstalar SDK

4. Confirme la eliminación del directorio.

Para eliminar todas las plataformas y herramientas instaladas, así como
los datos y archivos creados por el usuario, haga clic en "Sí".
Si ha seleccionado desinstalar el componente de datos SDK, también se
elimina.

Figura 24. Confirme la eliminación del directorio

5. Cuando se complete la desinstalación, haga clic en "Finalizar".

 38

Figura 25. Desinstalación finalizada

6. Para obtener más información, consulte Desinstalar Tizen Studio

11. CONCLUSIONES

 Las Smart TV se han convertido en un aliado de la era tecnológica, en donde

el consumismo y la diversión televisiva se ha convertido en un nuevo comercio

que abarca contenidos modernos y atractivos para los usuarios, con la finalidad

de sobresalir en un medio tan competitivo. Las Smart TV proporcionan

aplicaciones, conectividad, mejor resolución, audio y video, en donde se abre

un espacio para la implementación de nuevas aplicaciones que enriquecen el

consumismo, distracción, comunicación y métodos de aprendizajes para los

usuarios.

 La plataforma de desarrollo Tizen de Samsung está rodeada de múltiples

características la versatilidad que presenta esta plataforma, el cual ha
permitido el crecimiento acelerado del entorno de desarrollo y más preferido
por los usuarios para diseñar aplicaciones y servicios móviles, brindando al
usuario varias posibilidades al momento de programar sin embargo, en lo
referente a televisión digital no es posible aprovechar todas las opciones
debido a la dependencia del emisor.
 39

 El desarrollo de la aplicación para las Smart TV se realizó en la plataforma

Tizen con el principal lenguaje de programación HTML5, CSS y JavaScrip

los cuales sin duda ocasionaron un poco de desconcierto por la mezcla de

lenguajes de programación, por lo cual se tuvo que intensificar la investigación

y uso de varias tutoriales para llevar a cabo con el trabajo de investigación

propuesto.

 Al ejecutar la aplicación desarrollada en una Smart TV se pudo observar su

interfaz sencilla y amigable con el usuario, la cual proporcionará información

a los usuarios sobre la programación HTML, con la finalidad de orientarlos a

la investigación y por supuesto a la creación de sus propias aplicaciones,

convirtiendo el tiempo de ocio en un momento de aprendizaje productivo.

12. RECOMENDACIONES

 Es necesario recomendar a los estudiantes a investigar detenidamente el

lenguaje de programación HTML debido a que este presente una gama
voluptuosa de características que permiten generar aplicaciones de altos
niveles para SmartPhones, LG, Samsung, iOs, etc. Es decir que se pueden
ejecutar en varios sistemas operativos sin inconveniente alguno.

 Al momento de realizar la programación es necesario utilizar un

computador que contenga OpenGL la cual es una interfaz de
procesamientos gráficos, que es un requerimiento principal y fundamental
para que el usuario pueda acceder a Tizen
 40

13. CRONOGRAMA

Figura 26. Actividades de cronograma 1

Figura 27. Actividades de cronograma 2

Figura 28. Actividad de cronograma 3

 41

Figura 29. Actividad de cronograma 4

Figura 30. Actividad de cronograma 5

14.BIBLIOGRAFÍA

Bravo Rodrigo, A. S. (Julio de 2014). Desarrollo de aplicaciones en TV inteligentes

(Smart TV) basado en Tecnologías Web. Obtenido de
repositorio.educacionsuperior.SENESCYT:
http://repositorio.educacionsuperior.gob.ec/bitstream/28000/1728/1/T-
SENESCYT-00924.pdf
Carballeiro, G. (2012). Diseño web con HTML y CSS. Buenos Aires: Fox Andina.
Cayo Logro, P. J., & Zuñiga Yanzapanta, K. (Agosto de 2013). Diseño e implementación
de una página Web y una red virtual privada. Obtenido de Repositorio ESPE:
http://repositorio.espe.edu.ec/bitstream/21000/6765/1/M-ESPEL-ENT-0047.pdf
Coral Rojas, C. A. (25 de Noviembre de 2015). Desarrollo de aplicaciones para
televisión digital mediante el uso de tecnología HTML5 y JavaScript para
plataformas Smart TV. Obtenido de Repositorio ESPE:
https://repositorio.espe.edu.ec/bitstream/21000/11243/1/T-ESPE-049427.pdf
 42

Coral, A. (2015). Desarrollo de aplicaciones para televisión digital mediante el uso de

tecnología HTML5 y JavaScript para plataformas Smart TV. Obtenido de
Repositorio ESPE: http://repositorio.espe.edu.ec/bitstream/21000/11243/1/T-
ESPE-049427.pdf
Gallegos Cáceres, F. L. (2014). Creación de Escenarios de Telemedicina a través de
Smart TV aplicados a entornos domésticos. Obtenido de Escuela Técnica superior
de Ingeniería, Unverdidad de Sevilla:
http://bibing.us.es/proyectos/abreproy/90156/fichero/Creaci%C3%B3n+de+Esce
narios+de+Telemedicina+a+trav%C3%A9s+de+Smart+TV+aplicados+a+entorn
os+dom%C3%A9sticos.pdf
Gauchat. (2012). El gran libro de HTML5, CSS3 y Javascript. Barcelona: Marcombo
Ediciones Técnicas.
Jaldo Asenjo, J. (Julio de 2015). ampliación TV-Learning: Aprendizaje a distancia con
Smart TVs. Obtenido de Escuela Técnica Superior de Ingeniería Informática:
https://riuma.uma.es/xmlui/bitstream/handle/10630/12837/Memoria.pdf?sequen
ce=1
Linux, F. (2014). Acerca de Tizen. Obtenido de Tizen: https://www.tizen.org/about
Paredes Flores, M., & Sulca Villamarín, G. (9 de Marzo de 2016). Implementación de un
sistema Web utilizando tecnología PHP y estándares HTML5. Obtenido de
Repositorio ESPE: http://repositorio.espe.edu.ec/bitstream/21000/11722/1/T-
ESPE-053151.pdf
Pérez Porto, J., & Merino, M. (2016). Definición de Smart TV. Obtenido de Definición:
https://definicion.de/smart-tv/
Yépez Rocha, G. (2015). Desarroollo de un sistema de informaciòn interactivo Basado
en Web 3.0. Obtenido de Repositorio ESPE:
http://repositorio.espe.edu.ec/bitstream/21000/11129/1/T-ESPE-048924.pdf

15. ANEXOS

15.1 HOJAS TÉCNICAS