Universidad de las Fuerzas Armadas ESPE. Hurtado Stefano, Grijalva Hans, Moya Víctor, Acosta Alejandro.

Piano Com Serial 1

Desarrollo de una aplicación por

medio de la herramienta IDE Tizen
Studio para manejarlo a través de un
dispositivo inteligente denominado
Smart TV.
Hurtado Stefano, Grijalva Hans, Moya Víctor y Acosta Alejandro.
{sghurtado, hgrijalva, aacosta, vmoya}@espe.edu.ec
Universidad de las Fuerzas Armadas ESPE

familia al ver una película sin la necesidad de salir a un

Abstract – En el presente proyecto se realiza una
investigación sobre el lenguaje de programación HTLM,
CCS y JavaScript los cuales se ejecutaran en un solo
entorno de desarrollo denominado Tizen Studio, el cual
permitirá realizar el diseño y ejecución de una aplicación
educativa para las Smart Tv, en esta ocasión se trabajará
con la marca Samsung de televisiones por sus
características flexibles y con altos grados de
compatibilidad, así como también la disposición del SDK
Samsung desde la página principal para la realización
de aplicaciones.
cine, mediante estas necesidades, la televisión como un
ícono de unión familiar evoluciono en un dispositivo
inteligente denominado SMART-TV, una denominación
que las compañías de televisores han dado a sus modelos
conectados y más avanzados. Esos televisores Smart-TV
facilitan la comunicación, el acceso a las redes sociales y
suelen integrar un buscador para localizar contenido entre
las múltiples fuentes de las que disponen.
II. METODOLOGIA
A. Software

Palabras claves: App, HTML, JavaScript, Tizen Studio,

Smart TV.
I. INTRODUCCIÓN.

La evolución de la tecnología en las últimas décadas ha

permitido generar nuevos protocolos y dispositivos, y sin Figura 1, software
excepción todos estamos expuestos a participar en estos
procesos, la evolución tecnológica surge a través de las A.
necesidades de los seres humanos. Con el pasar del
tiempo los teléfonos celulares fueron los primeros en HTML: (Hyper Text Markup Language,
adquirir múltiples cualidades y funcionalidades al ser un Lenguaje de marcas de Hipertexto) es un
dispositivo de uso diario por parte de la humanidad, hoy lenguaje de programación, usado para
en día llegaron a denominarse teléfonos inteligentes o estructurar y presentar el contenido para
“Smartphone”, se lo denomina así ya que actúa como una la web, consta de tres características:
mini computadora, brindando diversas funcionalidades estructura, estilo y funcionalidad. [1]
como las de almacenar datos, realizar actividades
interactivas y las más utilizada es la conectividad con JavaScript: es un lenguaje Script (de
internet. documento) multiplataforma orientado a
Al ver los diversos avances tecnológicos, los usuarios eventos con manejo de objetos utilizado
presentan diversas necesidades, una de esas necesidades para la aceleración del procesamiento de
es de realizar todas las actividades que desee el ser código mediante motores de
humano desde la comodidad de su casa, pasar tiempo en interpretación, de modo que las
Universidad de las Fuerzas Armadas ESPE. Hurtado Stefano, Grijalva Hans, Moya Víctor, Acosta Alejandro. Piano Com Serial 2

instrucciones se analizan e interpretan al Tizen Studio: Es una plataforma de software

momento de su ejecución; a diferencia de
JAVA donde el código debe ser compilado
previamente para poderse ejecutar.
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. [2]
CSS: 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.
[3]
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. [4]
B. Características de Smart TV
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. [5]
Figura 3, TIZEN STUDIO
Tipos de Aplicaciones: En la actualidad es
posible implementar tres tipos de aplicaciones
para Smart TV desde su SDK. 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.
Independientemente de su tipo de proyecto (sea
JavaScript, C, Flash) se consideran las siguientes

Aplicaciones La aplicación ocupa

Pantalla la
completa pantalla entera.
Aplicaciones La aplicación se
media pantalla 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.
Figura 2, características de STV
Universidad de las Fuerzas Armadas ESPE. Hurtado Stefano, Grijalva Hans, Moya Víctor, Acosta Alejandro. Piano Com Serial 3

Aplicación La aplicación puede

multipantalla ser controlada desde
otra pantalla: móvil,
Tablet.
Tabla 1, tipos de aplicaciones

III. IMPLEMENTACION
Se desarrollará una aplicación que permita acceder al
usuario a información básica de como programar con
lenguaje HTML desde su Smart TV.
La aplicación se realizó a través de lenguaje de
programación HTML, CSS, JavaScript en el entorno de
desarrollo de Tizen Studio, el trabajo cooperativo entre
Tizen y las Smart TV de Samsung se llevaron a cabo a
través de la implementación del SDK de Samsung en la
programación.
Figura 6, flujo 2 de corrida del programa

B. Programación con HTML

Se debe declarar el tipo de documento, para el
caso en específico será HTML y se debe
inicializar el HTML con atributos de clase no-
js sin JavaScript y el idioma del HTML. Se debe
Figura 4, diagrama de bloques de la aplicación agregar el tipo de fuente a utilizar y un nombre
para el HTML, adicionalmente se agrega las
dimensiones para el Bootstrap.
En la figura 4, se puede observar el diagrama de bloques
que forman parte de la estructura general de la <!doctype html>
<html class="no-js"
aplicación a desarrollar. lang="en">
<head>
<meta charset="utf-8">
<title>Smar TV</title>
<meta
name="description"
content="">
<meta name="viewport"
content="width=device-width,
initial- scale=1">
<!--Google Font link-->

.CSS: son las librerías de Bootstrap para poder

Figura 5, flujo 1 de corrida del programa
trabajar con el carrusel, este contiene más
opciones dentro de estas pero la que se debe
tomar en cuenta es la de realizar un carrusel.
Inicialización del body: contiene toda la
estructura de aplicación, se la debe dividir en
varias secciones empezando por definir una
etiqueta llamada home que llama a la clase
home bg-black fix la cual retorna los valores
definidos en el CSS para el color y dimensiones
de este.
Universidad de las Fuerzas Armadas ESPE. Hurtado Stefano, Grijalva Hans, Moya Víctor, Acosta Alejandro. Piano Com Serial 4

Se crea una división para el contenido principal

donde se llaman a las dimensiones, color y V. REFERENCIAS
alineación de la main home.
IMPLEMENTACIÓN [1] Bravo, R. A. (07 de 2014). Desarrollo de aplicaciones
Para ejecutar el programa se debe ejecutar Tizen Studio en TV inteligentes. Obtenido de
y abrir el proyecto donde se encuentre la aplicación http://repositorio.educacionsuperior.gob.ec/bit
desarrollada. …\Proyectos\Feed stream/28000/1728/1/T-SENESCYT-00924.pdf
Abierta la carpeta que contiene todos los archivos de la [2] Cáceres, F. L. (2014). Universidad de Sevilla .
aplicación se compila para verificar que no Obtenido de
Se ejecutará una ventana con información de los autores http://bibing.us.es/proyectos/abreproy/90156/
de la aplicación.
fichero/Creaci%C3%B3n+de+Escenarios+de+Tel
Automáticamente se desplazará una segunda emedicina+a+trav%C3%A9s+de+Smart+TV+aplic
ventana con información de HTML. ados+a+entornos+dom%C3%A9sticos.pdf

IV. CONCLUSIONES [3] Cayo Logro & Zuñiga Yanzapanta. (08 de 2013).
 La tecnología ha tenido grandes avances en los Repositorio ESPE. Obtenido de
últimos años. Con nuevas herramientas y http://repositorio.espe.edu.ec/bitstream/21000
funciones que permiten y simplifican el fácil uso /6765/1/M-ESPEL-ENT-0047.pdf
de ésta. Un tal ejemplo de esto, sería la Samsung
Smart TV. [4] Christian López & Frank Vega. (05 de 2016).
 El advenimiento de Smart TV es quizás el cambio Desarrollo de aplicaciones para SMART TV.
más significativo en la tecnología de televisión, y
Obtenido de
está revolucionando el medio de la televisión,
Smart TV emplea las últimas tecnologías y, a su https://repositorioacademico.upc.edu.pe/bitstr
vez, presenta desafíos de protección únicos. eam/handle/10757/620868/LOPEZ_CC-
 El futuro más inmediato que puede tener el VEGA_LF.pdf?sequence=5
mercado de la televisión es todavía una incógnita
[5] Desarrollo de aplicaciones WEB. (08 de 02 de 2016).
para todo aquel que quiera realizar pronósticos
Obtenido de
sobre el desarrollo de las plataformas, los canales, http://www.um.es/docencia/barzana/DAWEB/Introduccion-a-
los contenidos, la publicidad y el resto de html-y-css.html
elementos y materiales de esta parte del sector
audiovisual. La introducción de la televisión vía
internet es el gran acontecimiento que va a hacer
diferenciarse al mercado.
 La plataforma de desarrollo Tizen de Samsung
presenta una gran versatilidad, permitiendo el
crecimiento acelerado del entorno de desarrollo y
más preferido por los usuarios para diseñas
aplicaciones y servicios móviles, brindando al
usuario varias posibilidades al momento de
programas. Referente a televisión digital no es
posible aprovechar todas las opciones debido a la
dependencia del emisor.
 En este trabajo se desarrolló la aplicación para las
Smart TV en la plataforma Tizen con el principal
lenguaje de programación HTML5, CSS y
JavaScript al utilizarlos en conjunto podría
provocar ciertas confusiones en los diferentes
lenguajes, por lo que se tuvo que indagar más en
la investigación para poder llevar a cabo el
trabajo