Aplicacion Smart TV
Aplicacion Smart TV
Aplicacion Smart TV
Trabajo de Investigación
Febrero 2017.
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:
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
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. EXPLICACIÓN DEL CÓDIGO FUENTE ............................................................ 23
6.1 Explicación HTML .......................................................................................... 23
6.2 Explicación CSS .............................................................................................. 25
7. FUNCIONAMIENTO ............................................................................................. 28
10. DESCRIPCIÓN DE PRERREQUISITOS Y CONFIGURACIÓN .................... 31
10.1 Requerimientos y herramientas para la programación..................................... 31
10.1.1 Requisitos previos .................................................................................... 31
10.2 Instalación de Samsung TV SDK .................................................................... 33
10.3 Instalaciones de extensión ............................................................................... 35
10.4 Instalación de las extensiones de imágenes locales: ....................................... 39
5
ÍNDICE DE FIGURAS
ÍNDICE DE TABLAS
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
3.1 HTML
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,
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
10
3.2 Smart TV
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
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
12
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
Pese a la similitud en nombre entre Java y JavaScript el último no tiene nada que
ver con el lenguaje de Oracle.
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.
Audio y video
14
Canvas
Formularios
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
Internet Explorer 6, 7 y 8
Mozilla Firefox 3.5 y 3.6
Chrome 5.0 y Safari 4.0.
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
Figura 1. Smart TV
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
de páginas web para Internet. Sin embargo estas plataformas ofrecen varias
tecnologías:
Utilizar estas tecnologías no solo permite reutilizar código, sino que permitirá dar
momento: Gecko, para las plataformas 2011 y 2010, y WebKit para las
deben apoyar tres importantes resoluciones: 960 x 540, 1280 x 720 y 1920
x 1080 píxeles.
gran pantalla.
Para desarrollar una aplicación para Smart TV se debe tomar en consideración los
siguientes pasos:
5. DIAGRAMAS
<!doctype html>
<html class="no-js" 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-->
<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,
300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
24
<script src="assets/js/vendor/modernizr-2.8.3-respond-
1.4.2.min.js"></script>
</head>
Se debe agregar todas las librerías .CSS de Bootstrap para poder 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. Y se procede a cerrar el encabezado.
<body data-spy="scroll">
<div class="culmn">
<div class="col-md-12">
<div class="hello_slid">
<div class="slid_item">
<div class="home_text ">
<h1 class="text-white">
<strong>UNIVERSIDAD DE LAS FUERZAS ARMADAS ESPE</strong></h1>
25
<h2 class="text-
white">INTRODUCCION A LENGUAJE HTML</h2>
<p>
AUTORES:
<br>
BENITES JONATHAN
<br>
MANCERO LUIS
<br>
MINANGO MISHELLE
<br>
RODRIGUEZ DANNY
<br>
VARELA DAVID
</p>
</div>
</div><!-- End off slid item -->
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.magnific-popup.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/css/slick/slick.js"></script>
<script src="assets/css/slick/slick.min.js"></script>
<script src="assets/js/jquery.collapse.js"></script>
<script src="assets/js/bootsnav.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
Desde estas líneas se llama a las ubicaciones de los archivos que contienen a las
librerias .js de Bootstrap necesarias para la ejecución de la aplicación. Se debe
cerrar body estructura de la aplicación y a continuación cerrar el HTML.
html,
body {
font-size: 14px;
color: #797979;
width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
font-weight: 400;
width:100%;
font-family: 'Raleway', sans-serif;
}
/*
Page Content
------------------------------------------*/
.page-content,
section { overflow: hidden; }
/*text color*/
.text-muted{}
.text-primary{color: #00a885 !important;;}
.text-finence{color:#13A0B2 !important;;}
.text-mega{color:#00a885 !important;;}
.text-white{color:#fff !important;;}
.text-black{color:#000 !important;}
.text-warning{}
.text-danger{}
.disabled{
cursor: not-allowed;
}
.home{
background: url(../images/fondo1.png) no-repeat scroll center
center;
background-size: cover;
position: relative;
padding-top: 300px;
27
padding-bottom: 190px;
width:100%;
}
Se agrega tamaño de fuente y ancho de los diferentes textos que se puede ingresar.
.work_container .slick-arrow ,
.main_home .slick-arrow{
font-size:3rem;
color:#fff;
top:30%;
position: absolute;
z-index: 90;
cursor: pointer;
}
.main_home .nextprevleft{
left:-3%;
}
.main_home .nextprevright{
28
right:-3%;
}
.main_product .carousel-control{
background-color: #fff;
color:#333;
border-radius: 50%;
width:50px;
height: 50px;
line-height: 50px;
font-size:1rem;
text-align: center;
top:30%;
}
.main_product .carousel-control:hover{
background-color: #00a885;
color:#fff;
}
.main_product .carousel-control.left{
left:-1.4%;
box-shadow: -1px 0px 0px 0px;
}
.main_product .carousel-control.right {
right:-1.4%;
box-shadow: 1px 0px 0px 0px;
}
7. FUNCIONAMIENTO
Para ejecutar el programa se bede ejecutar Tizen Studio y abrir el proyecto donde
se encuentre la aplicación desarrollada. …\Proyectos\Feed
Categoría Requisito
Sistema Windows® 64 bits recomendados Windows XP Service Pack 2 o
operativo superior
Linux Ubuntu 14.xo superior
Importante
43
11. CONCLUSIONES
que abarca contenidos modernos y atractivos para los usuarios, con la finalidad
usuarios.
propuesto.
12. RECOMENDACIONES
13. CRONOGRAMA
14.BIBLIOGRAFÍA
15. ANEXOS
Algunos textos de los diferentes temas ocupan más espacio del disponible, de
modo que se debe programar una función para realizar el desplazamiento del
texto, además del movimiento de una barra de scroll para que resulte más didáctico
como se muestra en las figuras anteriores y en la figura 4, en la sección inferior
central de la interfaz se diseñó los botones tipo scroll para mejor manejo de las
ventanas que existen en la presentación.