Editor visual de dominios para la descripción semántica de secuencias de vídeo

Tamaño: px
Comenzar la demostración a partir de la página:

Download "Editor visual de dominios para la descripción semántica de secuencias de vídeo"

Transcripción

1 PROYECTO FIN DE GRADO GRADO EN INGENIERÍA INFORMÁTICA Editor visual de dominios para la descripción semántica de secuencias de vídeo Autor: Dirigido por: Francisco Javier Bermúdez Ruiz Departamento de informática y sistemas. Universidad de Murcia. Julio 2014

2 Agradecimientos Este Trabajo Fin de Grado pone punto y final a la etapa universitaria en la que hace ya unos cuantos años me embarqué. Por suerte siempre he estado rodeado de personas que me han ayudado y apoyado en este duro pero a la vez enriquecedor periodo de mi vida. En primer lugar mi agradecimiento a mi tutor, por todo lo que me ha ofrecido y toda la ayuda que me ha otorgado en este proyecto en el que nos embarcamos hace ya unos cuantos meses. También me gustaría agradecer a todos los compañeros con los que he compartido estos últimos años de mi vida toda la ayuda y colaboración prestada para que pudiera llegar a finalizar esta etapa. En especial me gustaría hacer mención de Juan José, Francisco Javier, Miki y Jose. También han sido pieza clave en esta etapa mis padres y hermanos que no solo han estado en este último periodo de mi vida sino que siempre me han dado su apoyo en todos los ámbitos de mi vida. Por último, no me quiero olvidar de agradecer a Damián, Ángel, Domingo, Alfonso, Rubén, Soro y Bandera todo el apoyo prestado durante todo este tiempo.

3 ÍNDICE DE CONTENIDOS Índice de contenidos... 3 Índice de figuras... 6 Resumen... 9 Extended abstract Introducción Análisis de objetivos y metodología Objetivos del proyecto Metodología Estado del arte Herramientas para la anotación de vídeos VideoANT ANVIL The Video Annotation Research Tool VATIC (Video Annotation Tool from Irvine, California) VIA (Video and Image Annotation) VideoAnnEx Advene (Annotate Digital Video, Exchange on the NEt) Elan SVAS (Semantic Video Annotation Suite) Vannotea AAV (Annotating Academic Video) OVA (Open Video Annotation Project) Otras herramientas relacionadas con la anotación de vídeos The Mad Video Mozilla PopcornMaker Anotaciones de vídeo de YouTube Resumen... 51

4 4. Diseño de la solución Descripción técnica Arquitectura Modelo Modelo de datos Tecnologías Patrón DAO Persistencia de datos mediante JPA Presentación: Componentes Primefaces destacados jquery JsPlumb Metamodelado Gestor de vídeos Editor de dominios y anotaciones (funcionalidades comunes) Layout y gestión del espacio de trabajo Implementación de las cajas que representan los conceptos Conexión de conceptos, jsplumb Gestión de la posición relativa de los conceptos en el lienzo Atributos data-x para la gestión de información de utilidad, oculta al usuario Funcionalidad simple de restablecer cambios Implementación del editor de dominios Creación y edición de conceptos Implementación del editor de anotaciones Implementación del editor de anotaciones (lienzo y barra lateral) Implementación del editor de anotaciones (reproductor de vídeo) Implementación de nuevos tipos de datos Conclusiones y vías futuras

5 6.1. Conclusiones Vías futuras Glosario de términos y acrónimos Bibliografía Anexos Manual de despliegue de la aplicación Manual de usuario de la aplicación Gestión de vídeos Definición de dominios Creación de anotaciones

6 ÍNDICE DE FIGURAS Ilustración 1: Architecture of metamodeling 3 levels Ilustración 2: Fases del proyecto completo (este proyecto fin de grado se centra en el desarrollo de la primera fase) Ilustración 3: Herramienta VideoANT, creando una anotación Ilustración 4: Herramienta VideoANT, visualizando anotaciones Ilustración 5: Herramienta ANVIL, ventana de pistas y línea de tiempo Ilustración 6: Herramienta VATIC interfaz de usuario, definiendo regiones I Ilustración 7: Herramienta VATIC interfaz de usuario, definiendo regiones II Ilustración 8: IBM VideoAnnEx Annotation Tool dividido en cuatro regiones: Reproductor de video, Anotación de tomas y Panel de vistas Ilustración 9: Anotación de regiones en VideoAnnEx Ilustración 10: Herramienta Advene, interfaz de usuario Ilustración 11: Herramienta ELAN, interfaz de usuario, Reconocimiento de voz Ilustración 12: Herramienta ELAN, interfaz de usuario, Subtítulos Ilustración 13: Herramienta Vannotea, creación de anotaciones Ilustración 14: Herramienta Annotating Academic Video Tool, interfaz de usuario. (a) reproductor de vídeo, (b) creación de anotaciones, (c) línea de tiempo y (d) listado de anotaciones Ilustración 15: Herramienta Open Video Annotation, creación de una anotación Ilustración 16: Herramienta Open Video Annotation, visualizando una anotación Ilustración 17: Herramienta The Mad Video, tipos de etiquetas disponibles (para crear etiquetas) Ilustración 18: Herramienta The Mad Video, interfaz de usuario Ilustración 19: Herramienta The Mad Video, formulario nueva etiqueta de tipo persona Ilustración 20: Herramienta The Mad Video, Distintos tipos de etiqueta: Persona, Lugar y Vídeo Ilustración 21: Herramienta The Mad Video, panel de etiquetas, etiquetas creadas Ilustración 22: Herramienta PopcornMaker, interfaz de usuario, widgets de eventos Ilustración 23: Herramienta PopcornMaker, interfa de usuario, búsqueda de recursos multimedia Ilustración 24: Herramienta Gestor de vídeos de Youtube, gestor de anotaciones Ilustración 25: Arquitectura de la aplicación

7 Ilustración 26: Envío, validación y respuesta de un formulario en JSF. Diagrama de flujo simplificado. [11] Ilustración 27: Diagrama de clases, metamodelos (dominios) Ilustración 28: Diagrama de clases, modelos (anotaciones) Ilustración 29: Diagrama de clases, metamodelos y modelos. Relaciones de dependencia Ilustración 30: Diagrama de clases, DAO Ilustración 31: Arquitectura de la aplicación, DAO Ilustración 32: Diagrama de clases, modelo de la aplicación Ilustración 33: Primefaces, componentes de entrada de datos Ilustración 34: Primefaces, componente Messages Ilustración 35: Primefaces, componente DataTable Ilustración 36: Primefaces, componente OverlayPanel Ilustración 37: Primefaces, componente Dialog Ilustración 38: Primefaces, componente Panel Ilustración 39: Ejemplo de jsplumb, resultado del código anterior después de realizar una conexión Ilustración 40: Arquitectura de metamodelado de tres niveles Ilustración 41: Clases que dan soporte para persistir modelos y metamodelos Ilustración 42: Ejemplo de dominio Ilustración 43: Ejemplo de anotación conforme al dominio anterior Ilustración 44: Gestor de vídeos Ilustración 45: Iconos que representan el origen del vídeo Ilustración 46 Gestor de vídeos, editando un vídeo Ilustración 47: Gestor de vídeos, añadiendo un nuevo vídeo Ilustración 48: Creador de anotaciones y momentos, secciones Ilustración 49: Editor de dominios, secciones Ilustración 50: Editor de dominios, capa flotante informativa Ilustración 51: Lienzo, creación de una relación Ilustración 52: Lienzo, posicionamiento de cajas Ilustración 53: Concepto, representación gráfica en el lienzo de trabajo Ilustración 54: Editor de dominios Ilustración 55: Editor de dominios, creación de un nuevo concepto del dominio Ilustración 56: Creador de anotaciones y momentos Ilustración 57: Creador de anotaciones, lienzo de trabajo. Etiquetas de conceptos

8 Ilustración 58: Creador de anotaciones, distintos componentes de entrada de datos Ilustración 59: Creador de anotaciones, componente de entrada de datos de tipo fecha Ilustración 60: Creador de anotaciones y momentos, reproductor de vídeo con controles para seleccionar momentos y gestionar la reproducción Ilustración 61: Gestor de vídeos Ilustración 62: Gestión de vídeos, editando un vídeo Ilustración 63: Gestión de vídeos, nuevo vídeo Ilustración 64: Editor de dominios, interfaz de usuario I Ilustración 65: Editor de dominios, creación de un nuevo dominio Ilustración 66: Editor de dominios, interfaz de usuario II Ilustración 67: Editor de dominios, creación de un concepto I Ilustración 68: Editor de dominios, creación de un concepto II Ilustración 69: Editor de dominios, creación de concepto III Ilustración 70: Editor de dominios, creación de relaciones I Ilustración 71: Editor de dominios, creación de relaciones II Ilustración 72: Editor de dominios, creación de relaciones III Ilustración 73: Editor de dominios, mostrando la información de un concepto Ilustración 74: Editor de dominios, editando un concepto de un dominio con anotaciones asociadas Ilustración 75: Creador de anotaciones, interfaz de usuario Ilustración 76: Creador de anotaciones, seleccionando un vídeo Ilustración 77: Creador de anotaciones, creando una nueva anotación Ilustración 78: Creador de anotaciones, reproductor de vídeo Ilustración 79: Creador de anotaciones, añadiendo conceptos al lienzo (pinchar (1), arrastrar (2) y soltar (3)) Ilustración 80: Creador de anotaciones, creando relaciones Ilustración 81: Creador de anotaciones, editar un concepto Ilustración 82: Creador de anotaciones, mostrando la información de un concepto

9 RESUMEN Vivimos instalados en la llamada "Era de la información", una época en la que la información es un recurso valioso y encontrar o generar la adecuada información a tiempo proporciona una ventaja. Gracias a una serie de avances tecnológicos en el mundo de la producción audiovisual y en el de las telecomunicaciones a lo largo de los últimos 30 años disponemos en Internet de un vasto catálogo de medios audiovisuales gracias a la producción profesional de documentos audiovisuales por parte del mundo del cine, radio, televisión, etc. y a la producción personal por parte de miles de millones de personas que hoy en día disponen de medios asequibles tanto para la producción como distribución de estos medios (teléfonos móviles con cámara y acceso a Internet). El problema que se plantea dado el inmenso catálogo audiovisual disponible es que el valor real de estos medios no reside únicamente en los medios en sí, sino también la capacidad de acceder a estos. La inmensa cantidad de información en forma de medios audiovisuales que hay disponible en Internet no se encuentra bien catalogada ni estructurada. Se hace necesaria, por lo tanto, la aparición de herramientas que permitan realizar esa catalogación estructurada que cumpla con las exigencias de los usuarios que esperan acceder en tiempo razonable a los recursos buscados sin necesidad de descartar previamente resultados que no se adecúen al objetivo real de la búsqueda. La solución a este problema que se presenta es la creación de una aplicación web que permita por un lado la definición de dominios, abstracciones de la realidad desde el punto de vista del usuario que restringen semántica y sintácticamente la creación posterior de descripciones conformes a esos dominios, y por otro lado, la creación de estas descripciones asociadas a partes (rangos temporales) de estos vídeos. La herramienta está enmarcada dentro de un proyecto de dos fases suponiendo el desarrollo de esta herramienta la primera. La segunda fase consistiría en la utilización de técnicas MDE (Model Driven Engineering) para la transformación de los metadatos generados por la aplicación a los distintos formatos utilizados por herramientas que podrían aprovechar esta información y la exposición de estas transformaciones mediante servicios 9

10 web. Para ello se utilizan técnicas de transformación de modelos (de Modelo a Modelo (M2M), de Modelo a Texto (M2T) y de Texto a Modelo (T2M)). La herramienta está desarrollada en la plataforma JAVA, usa JPA como mecanismo de persistencia, JSF 2 como tecnología para la presentación y framework MVC, utilizando PrimeFaces como librería de componentes JSF. Adicionalmente se hace uso intensivo de la librería Javascript jquery en la parte del cliente. Para el desarrollo del reproductor de vídeo HTML5 se hace uso de la librería Javascript PopcornJs y para la implementación del editor de dominios y creador de anotaciones la librería Javascript JsPlumb. La herramienta consta de 3 secciones principales que son: - Un gestor de vídeos en el cual se añaden a la herramienta los vídeos a los que posteriormente serán descritos mediante anotaciones. - Un editor de dominios donde se definen los dominios que determinaran las reglas semánticas y sintácticas de las anotaciones que se creen posteriormente ajustadas a ese dominio. - Un creador de anotaciones (instancias de dominios) y definidor de momentos (rangos temporales dentro del vídeo) de vídeo en el que el usuario realizará la tarea de crear los metadatos semánticos asociados a partes concretas de un vídeo. 10

11 EXTENDED ABSTRACT Motivation We are living in the "Information Age", an age when information is a valuable resource, and to find or to create the right information on time provides an advantage. Throughout history the emergence of various technological inventions has increased the rate of generation of new information in the form of media. The advent of the Internet, invention and evolution of the digital video camera, the invention of mobile phones with camera, the evolution of networks of both fixed and mobile communications and the cheapening of the same or the emergence of the Internet services video and social networks to share any information enabled the democratization of audio-visual production and distribution and consequently its mass. In all this information we should add all that audio-visual production of traditional media (radio, print, television and film) that uses the Internet nowadays as a broadcasting priority medium. From the point of view of audio-visual documentary the real value of a set of audio-visual media lies not only in the media itself, but in the ability to index, search and access these or parts thereof. The ability to access these audio-visual media varies with the quality of the meta-information that accompanies them, that is, whether it is a more or less structured information and whether it is an accurate description of the content from the point of view of the user attempting to access it. Right now, the Internet (services deployed on the Internet) provides access to a vast amount of information in the form of audio-visual media but this information is not well structured and categorized. Now, It is necessary the rise of new applications that allow for the structured documentation that meets the requirements of users waiting, in reasonable time, access to the resources searched without having to discard results that the real aim of the search is not fit (a large amount of not desired results could even do that user desists in their searching when, in fact, content is somewhere in the list of results). State of the art video annotation applications The first goal of this project is to conduct a study on the state of the art in the field of video annotation applications, highlighting its main strengths and confronting them with the 11

12 features we expect from an application providing a solution to the problem raised, before the beginning of a possible development of an application to solve the problem posed. We can summarize these features in four: - A web application that allows collaborative work. - It should allow to define domains and annotations conform to these domains. - In a semantic level, it should allow the definition of predicates such as subject-verbobject. - The process of domains definition and annotation definitions is simple and suitable for users of any technical level. We performed a comprehensive analysis (It has been tested in all possible cases) of a set of applications. As a result of this analysis, we can draw the following conclusions: The application features added video annotations differ greatly in their functionality depending on the purpose for which they were built so it is difficult to find one that brings together many of the features we are looking for. In general, we can say that no more than two in four criteria fulfil what we set at the beginning of the study. Many of the applications are desktop applications (single user without facilities for collaborative work), the general trend in the time they were developed, which require a certain technical level in the authoring process and web tools analysed. However, in general, it provides a simple process for creating annotations, but also the lack of semantic annotations reaching analysed desktop applications. Nevertheless, none of the applications at the same time provides the two most important characteristics that we look for are able to define domains and annotations conform to these domains and semantically defining predicates subject-verb-object is allowed. Failing to find an application that meets the requirements we expect, an application is developed presenting a solution to this problem. A two-phase project, application development + metadata export through MDE techniques The application is framed in a two-phase project, assuming the development of this application the first. The second phase would be the use of techniques MDE (Model Driven Engineering) to export the metadata generated by the application to the different formats used by tools that exploit this information and expose of these transformations through web 12

13 services. For doing this, model transformation techniques are used (Model to Model (M2M), Model to Text (M2T) and Text to Model (T2M)). Application Structure Application consists of three main sections are: - A video manager in which videos that will later be described by annotations are added to the tool. - A domains editor, where domains which determine the semantic and syntactic rules of annotations that are created subsequently adjusted to that domain are defined. - A annotations editor (instances of domains) in which the user will perform the task of creating semantic metadata associated with particular parts of a video. We need to develop a visual editor (similar to UML graphical editors) for domain definition and for the creation of annotations. It is also required to manage video playback and selecting a time range where the narrow context of annotations. Technologies used This application is a web application developed in the JAVA platform, which uses JPA as persistence mechanism, the DAO pattern is implemented to abstract application model of the persistence technology used and JSF 2 as presentation technology and MVC framework, using PrimeFaces as a JSF component library. Additionally, intensive jquery Javascript library on the client side is done. For the development of HTML5 video player using Javascript library PopcornJs. Uses JsPlumb Javascript library for the development of a domain and annotation editor, that allows a visual connection of HTML elements, its used to show relationships between concepts. Furthermore jquery is used for the mechanism of "drag and drop" used on the canvas. Finally include the use of RemoteCommand, a non-visual Primefaces component. This component allows us to connect the client to the server using Javascript. Visual components already have a transparent communication way to the programmer communication with the server side, but we need to do it explicitly when developing a custom solution. 13

14 Implementation of the editor and creator of domain annotations In the domains editor, the user creates new concepts to add to the domain by clicking the "Create concept" located in the sidebar. A dialog is displayed and the users enter the name of the concept and add the properties (property name and data type) that considers appropriate for each concept. Once created, the concepts are appearing in the working canvas in which the user can interact with them by editing them, moving the concepts over canvas and connecting them together to define relationships between them. The process of creating annotations and defining domains is similar. In the annotation editor the user need to pre-select a video and a domain to create an annotation that describes a part of that video and that meets the syntactic and semantic rules (using the concepts defined in the domain and relations established between concepts according to the restrictions set by the domain) defined in the domain. When the user uses the annotation editor, sidebar contains the concepts available in the selected domain which need to drag and drop on the canvas to create instances of these. Once created, the user can edit them and enter specific values for their properties and create relationships between them. When you enter values in the properties, a graphic data input component will be shown, according to the data type specified in the domain. When the user creates a relation between two concepts there will appear a drop-down list in which there will appear the relations in that participants agree with the relations defined in the domain for the concepts. For the implementation of the domains editor and annotations editor one uses the Javascript library jsplumb that allows us the visual connection of HTML elements, with which we can show the relations between concepts. On the other hand one uses of jquery for the mechanism of "drag and drop" used in the canvas. Finally it is necessary to emphasize the use of Primefaces's not visual component. This is the RemoteCommand component. This component allows us to connect the client to the server using Javascript. Vsual components provide a transparent way to the programmer to communicate with the server side, but need to do it explicitly when developing a custom solution. Restrictions on domain editing when there are created annotations. An important aspect to consider in the creation of domains and associated annotations to them is the future evolution of these domains and what extents it affects the annotations created 14

15 earlier. It is important to maintain consistency between annotations and their domains and for this, the application restricts domain changes which may affect the consistency of annotations created before domain editing. These restrictions are to prevent eliminate concepts, relationships, and properties of stored concepts and change the data type of these properties where there are annotations associated with the domain being edited. However, it is allowed to interact with those concepts, properties and relationships that have not yet been saved since creation. Thus we get the domains can continue to evolve over time without affecting the consistency of the old annotations with new state of the domain. Video player implementation According to annotation editor we can see that in addition to managing the canvas as the domains editor, we need to manage a video player, providing the necessary controls for management and for selecting the time range to be associated with the annotation. We use a PopcornJS library, which enables us to work with the video player. PopcornJS provides an API that allows the programmer to access a set of properties, methods and events available for HTML5 media tags, regardless of the source video. This can come from a direct URL for a video or sound, or can be a resource of a video-sharing website (SoundCloud, Vimeo or Youtube). Furthermore the library provides other functionality that is not used in the project, but could be part of the next phase of the project, which is to associate events to a certain point in the video. Since we rely on HTML5 media tags to media playback, support for various video formats depends on the browser that is being displayed. Moreover, for improving compatibility with a larger number of video formats we can install plugins in the browser or applications that provide support to many video data formats through <video> label. These compatibility issues arise in those videos which have a direct link to the file, due to PopcornJs using the player embedded video distribution services with Youtube or Vimeo videos. Data Access Object (DAO) model abstraction to the persistence technology used DAO pattern is a design pattern that allows abstracting and encapsulating all access to a data source. This pattern involves the joint use of a series of patterns as the Adapter pattern, Abstract Factory pattern and Singleton pattern. The Adapter pattern tries to convert the interface of a class other than the customer expects, IE, enables collaboration of 15

16 certain classes despite having incompatible interfaces. The Abstract Factory pattern by allowing us to create an interface, sets or families of objects that depend on each other and all this without specifying which specific object. The Singleton pattern is used to restrict the creation of objects belonging to a class to a single object. His intention is to ensure that a class has only one instance and provide a global point of access to it. The application was originally developed using JPA as persistence mechanism, this gives us some flexibility in choosing the technology database to use, however, if we use another system not supported by JPA must seek another solution. Having implemented the data access application using the DAO pattern will facilitate other persistence technologies change in the future. Metamodeling With the aim of the application supports the creation of annotations it is designed three levels metamodeling architecture. In the next picture we can see the outline of the architecture. Ilustración 1: Architecture of metamodeling 3 levels. 16

17 - In the N2 level mechanisms are offered to define domains (N1 level). - In the N1 level, domain level, there are domains defined by the user which will determine which concepts may appear in the N0 level and relationships can be established between these concepts. - In the N0 level, annotation level, we have the information provided by the N1 level (concepts and relationships defined in the domain) to create annotations according to N1 level domain to which they are associated. This level will be an N1 domain instance level, IE, specific values for the domain. Conclusions and future avenues It has managed to develop an application that meets the initial objectives of the project: develop an application that allows visual editing domains and annotations on video fragments using those domains. The application allows the creation of data and metadata for use in audio-visual fragments, as stated in the objectives of the first phase. However, the main project covers a larger project of which is required in a Degree Project, since it is necessary to exploit this information by using a powerful search engine or export data to third party applications. The tool gives the user creation process, visual, simple and intuitive allowing domain experts to define domains and annotations temporarily adjusted to these domains contextualized within a video. Furthermore, the work presented here required a preliminary analysis of the current tools have certain similarities with the targets for this first phase of the project. The project undertaken in the field of Degree Project is a first phase of a larger project. The objectives of the first phase were met in full, but during the performance of the same had to sometimes be adapted. This was the case of using a nosql data base (Cassandra) for persistence of the application that was discarded in favour of relational databases that complications had arisen in its implementation. However, the persistence of the application has been implemented using the DAO pattern so replace the paradigm of persistence should not be a high-impact in application. Another important improvement to include in the application is the creation of a query 17

18 language (textual, visual, or both), that allows to search for video clips as query elements using the presence or absence of concepts, the existence of relationships between them or the value of any of its properties. For the next phase of the Project, it would give support to users and collaborative work and export the generated metadata to search engines like Apache Lucene. For maintain consistency across domains and annotations after a change in the domain, raises undertake default actions on annotations created before the modification of the domain. In the second phase of the project is proposed to exploit the data generated in the application by exporting them to third-party services. Implementation of this phase arises from an MDE approach (Model Driven Engineering, using models and model transformations). 18

19 1. INTRODUCCIÓN Vivimos instalados en la llamada "Era de la información", una época en la que la información es un recurso valioso, y encontrar o generar la adecuada información a tiempo proporciona una ventaja. A lo largo de la historia la aparición de diversas invenciones tecnológicas ha ido aumentando la velocidad de generación de nueva información en forma de medios audiovisuales. La creación de Internet, la invención y evolución de la cámara de vídeo digital, la invención de los teléfonos móviles con cámara, la evolución de las redes de comunicaciones tanto fijas como móviles y el abaratamiento de las mismas o la aparición de servicios en Internet de vídeo así como de redes sociales que permiten compartir cualquier tipo de información han permitido la democratización de la producción audiovisual y consecuentemente su masificación. A toda esta información deberíamos añadir toda aquella producción audiovisual de los medios tradicionales (radio, prensa escrita, televisión y cine) que hoy en día utiliza Internet como un medio prioritario de difusión. Desde el punto de vista del documentalismo audiovisual el valor real de un conjunto de medios audiovisuales no solo reside en los medios en sí, si no en la capacidad para indexar buscar y acceder a estos o partes de estos. La capacidad para acceder a estos medios audiovisuales varía según la calidad de la meta-información que los acompaña, es decir, si se trata de una información más o menos estructurada y si se trata de una descripción fiel al contenido desde el punto de vista del usuario que intenta acceder al mismo. En estos momentos Internet (servicios desplegados en Internet) da acceso a una inmensa cantidad de información en forma de medios audiovisuales pero esta información no se encuentra bien catalogada ni estructurada. Se hace necesaria la aparición de herramientas que permitan realizar esa catalogación estructurada que cumpla con las exigencias de los usuarios que esperan acceder en tiempo razonable a los recursos buscados sin necesidad de descartar previamente resultados que no se adecúen al objetivo real de la búsqueda (una gran cantidad de resultados no deseados podría incluso suponer que el usuario desista la búsqueda cuando en realidad el contenido que busca se encuentra en algún punto de la lista de resultados). 19

20 2. ANÁLISIS DE OBJETIVOS Y METODOLOGÍA 2.1. OBJETIVOS DEL PROYECTO El objetivo del proyecto es el desarrollo de una aplicación para la anotación semántica de momentos de vídeos. Un momento se define como un fragmento de vídeo con una semántica cohesiva (es decir, un fragmento donde sucede algo concreto y susceptible de ser anotado). Este proyecto constituiría la primera fase de otro proyecto que consta de dos fases. La segunda fase consistiría en la utilización de técnicas MDE (Model Driven Enginering) para la transformación de los metadatos generados por la aplicación a los distintos formatos utilizados por herramientas que podrían aprovechar esta información y la exposición de estas transformaciones mediante servicios web. Para ello se utilizan técnicas de transformación de modelos (de Modelo a Modelo (M2M), de Modelo a Texto (M2T) y de Texto a Modelo (T2M)). Ilustración 2: Fases del proyecto completo (este proyecto fin de grado se centra en el desarrollo de la primera fase). 20

21 La anotación vendrá dada sobre un dominio definido por el usuario de la aplicación. La herramienta debe ser sencilla e intuitiva, y debe estar accesible desde la web. Este último requisito es importante puesto que la anotación de momentos debe poder ser colaborativa (funcionalidad no implementada en este proyecto y que se indica en los trabajos futuros). Por lo tanto, la aplicación debe proporcionar facilidades para crear dominios, definir anotaciones y anotar los momentos usando dominios. La implementación de estas facilidades se desglosa en la siguiente lista de subobjetivos: - Subobjetivo 0: Elaboración de un estudio que represente el estado del arte en lo que se refiere a herramientas de creación de anotaciones sobre medios audiovisuales destacando sus principales virtudes y confrontándolas con las características que esperamos de una herramienta que preste solución al problema que planteamos. - Subobjetivo 1: Implementación de un editor visual para crear dominios. Un dominio es una abstracción (desde el punto de vista del modelador del dominio), de parte de la realidad que queremos representar. Está formado por conceptos fruto de este proceso de abstracción que podrán contener información a través de propiedades, que podrán ser de distintos tipos para ajustarse a las necesidades concretas de cada tipo de información que queramos reflejar (una cadena, un número entero, etc.). Finalmente en un dominio podemos definir relaciones entre los distintos conceptos. - Subobjetivo 2: Implementación de un editor visual para crear instancias de estos dominios (anotaciones semánticas), controlando la coherencia de las instancias con sus dominios (valores de las propiedades deben ser conformes al tipo definido en el dominio y solo se permiten relaciones entre conceptos definidas previamente en el dominio). - Subobjetivo 3: Creación de un reproductor de vídeo que permita definir momentos de vídeo. Se deben proporcionar mecanismos para gestionar un reproductor de vídeo en el que de una forma sencilla se pueda definir un momento (rango de tiempo dentro del vídeo al que hace referencia la anotación) al que irán referidas las anotaciones (instancias del dominio elegido). Estas instancias de dominios (anotaciones) requieren estar asociadas a un contexto temporal de un vídeo, por lo que se deben proporcionar mecanismos para gestionar un reproductor de vídeo en el que de una forma sencilla seleccionar este contexto (rango de tiempo dentro del vídeo al que hace referencia la anotación) al que irán referidas estas instancias del dominio 21

22 elegido (anotaciones). Lógicamente la herramienta también deberá proporcionar una sección para administrar los vídeos gestionados por la herramienta. Como objetivo secundario del trabajo, se contempla proporcionar un amplio abanico de formatos de vídeo soportados, así como la posibilidad de utilizar vídeos de diversas fuentes, como los portales Youtube, Vimeo, etc... A continuación se detallan las tareas a realizar para acometer los objetivos presentados anteriormente. 1. Diseño e implementación del modelo de datos de la aplicación. 1. Estudio, análisis e implementación de un modelo de datos para dar soporte a la gestión de dominios, anotaciones y vídeos usados en la aplicación. 2. Diseño e implementación del patrón DAO con el objetivo de abstraer a la aplicación de la tecnología de persistencia subyacente. 2. Estudio y análisis de las tecnologías y herramientas de desarrollo a utilizar en la implementación de la arquitectura de la aplicación. 1. Evaluación y selección de librerías de software libre que faciliten el desarrollo del editor visual de dominios y el editor de anotaciones, en general, librerías que permitan la creación de mapas conceptuales, diagramas de clases, etc. 2. Evaluación y selección de librerías de software libre que faciliten el manejo de elementos multimedia en HTML5. 3. Evaluación y selección de software que amplíe el soporte para la reproducción de múltiples formatos de vídeos a través de la etiqueta <video/> de HTML5. 4. Evaluación y selección de componentes (JSF) para su uso en la aplicación. 3. Implementación del creador de dominios. La idea es disponer de un lienzo en el que ir añadiendo conceptos y mediante una interacción del tipo arrastrar y soltar poder crear relaciones entre conceptos. Para la introducción de datos hacer uso del componente gráfico que sea necesario para cada tipo de dato. Es necesario bloquear la modificación de ciertas partes de un dominio cuando este tiene anotaciones creadas, para preservar la coherencia entre anotaciones y sus dominios. Otra opción podría ser ejecutar acciones por defecto sobre las anotaciones realizadas para que cumplan con la nueva configuración del domino, por ejemplo, al cambiar una propiedad de tipo 22

23 decimal a entero, realizar automáticamente la conversión en las anotaciones previas. 4. Implementación del creador de anotaciones para un dominio. El concepto es similar al creador de dominios. En este caso el usuario de seleccionar previamente un dominio con el que trabajar. El creador de anotaciones ofrecerá los conceptos del dominio de tal forma que el usuario podrá, mediante una interacción del tipo arrastrar y soltar, añadir al lienzo una instancia del concepto arrastrado. El componente gráfico usado en el editor para la introducción de valores para las propiedades deberá ser consecuente con el tipo de dato definido en el dominio. De la misma forma cuando el usuario intente crear relaciones entre dos conceptos, solo se le permitirá utilizar relaciones definidas para los conceptos de los que son instancia. 5. Implementación del reproductor de vídeo para la definición de momentos. El reproductor debe proporcionar las típicas opciones de reproducción, además de la opción de seleccionar un rango de tiempo que determinará un momento susceptible de ser anotado. 6. Implementación de una sección para la gestión de vídeos. Proporcionar la funcionalidad para poder añadir, editar, buscar y eliminar vídeos METODOLOGÍA El proyecto ha sido llevado a cabo en 3 etapas. La primera etapa consiste en la primera toma de contacto con el proyecto y fue llevada a cabo desde el 21 de mayo de 2013 hasta mediados de junio de Análisis de requisitos del proyecto en diversas entrevistas con el tutor del proyecto. - Investigación inicial sobre herramientas relacionadas con el proyecto a realizar (estado del arte). - Investigación, análisis y evaluación de herramientas/apis/librerías/frameworks a utilizar, tanto de forma general para la aplicación como para proporcionar funcionalidades concretas, como la posibilidad de crear esquemas visuales (similares a un editor UML) o la posibilidad de reproducir vídeos de diversos formatos y lugares de procedencia. - Diseño del modelo de datos inicial de la aplicación. La segunda etapa consiste en el desarrollo e implementación del proyecto y fue llevada a cabo 23

24 desde mediados de junio de 2013 hasta el 6 de mayo de Durante todo este tiempo ha habido periodos de tiempo en los que el proyecto ha estado parado (por periodos de exámenes, entregas de prácticas y por una lesión de rodilla). La última etapa consiste en la elaboración de la memoria y fue llevada a cabo desde el 6 de mayo de 2014 hasta el 22 de julio de ESTADO DEL ARTE Vivimos una época dorada en cuanto a la cantidad de información que se genera cada día. En toda la historia se han publicado aproximadamente unos libros (hasta 2010) 1, se estima que en el año 2011 se pudieron realizar 375 mil millones de fotografías 2 y cada minuto se suben más de 100 horas de vídeo a Youtube, según datos de la propia empresa 3. El acceso eficaz e inteligente a estos datos supone uno de los grandes retos de hoy. La mayoría de esta información actualmente se encuentra desestructurada. Una simple descripción de su contenido en lenguaje natural no es suficiente para que un software comprenda el significado del mismo y pueda actuar de la misma forma que una persona haría en labores de búsqueda e indexación del contenido. Si bien el reto principal en este campo consiste en la obtención automática de estas descripciones, la gran cantidad y complejidad de los retos involucrados en esta extracción automática otorgan a la creación manual de metadatos un papel muy importante. El acceso a contenido multimedia en correspondencia con el significado desde el punto de vista del usuario, constituye el principal reto en la investigación sobre multimedia, común mente llamado como la brecha semántica [1]. Es importante por lo tanto, proporcionar al usuario mecanismos para definir y diseñar sus propios dominios, determinar la parte de la realidad que quieren reflejar desde su propio punto de vista, es decir, definir los conceptos relevantes y las interrelaciones entre estos. El estado del arte actual en el análisis y comprensión automática de contenidos audiovisuales supone en muchos casos la detección de conceptos semánticos, como personas o edificios en un nivel de exactitud aceptable. Sin embargo, el rendimiento resulta muy variable al https://www.youtube.com/yt/press/es/statistics.html 24

25 considerar dominios muy genéricos o cuando aumenta ligeramente el número de conceptos soportados [2]. Para contextualizar las herramientas analizadas, es importante recordar que se busca una herramienta web que permita al usuario definir dominios y posteriormente instancias de esos dominios (restringidas sintáctica y semánticamente por la definición del dominio asociado). Una herramienta web que ofrezca un proceso de definición de dominios y anotaciones intuitivo, visual y sencillo. La herramienta debe poder soportar una gran variedad de formatos de vídeo. En líneas generales no se ha podido encontrar una herramienta que aúne todas estas características, principalmente porque la mayor parte son aplicaciones de escritorio (tendencia mayoritaria en el momento que estas fueron creadas). Tampoco se ha podido encontrar ninguna aplicación (ya sea web o de escritorio) que permita al usuario definir un dominio e instancias de este (con sus correspondientes restricciones semánticas y sintácticas definidas en el dominio) y mucho menos una herramienta que permita una definición visual e intuitiva, limitándose estas a la definición de ficheros con cierto formato en herramientas externas (RDF, XML, MPEG7 ), o mediante formularios dentro de la propia herramienta. No obstante, resulta interesante analizarlas para hacerse una idea de los distintos enfoques adoptados a la hora de crear herramientas de este tipo, además de para tomar ideas a incluir en la implementación del proyecto. En el siguiente apartado pasamos a realizar un análisis de estas herramientas, destacando los puntos fuertes de cada una de ellas y mostrando el enfoque adoptado a la hora de abordar el proceso de anotación HERRAMIENTAS PARA LA ANOTACIÓN DE VÍDEOS A continuación presentamos una visión general del estado del arte en herramientas de anotación de vídeos, destacando las características más relevantes de cada herramienta. Cada herramienta presenta su propio enfoque a la hora de abordar el problema. Podemos encontrar herramientas web o de escritorio, herramientas que permiten al usuario definir el vocabulario a trabajar y herramientas que sólo permiten trabajar con un vocabulario predefinido de la herramienta o incluso herramientas que se limitan a etiquetar secciones de un vídeo con texto simple. Por otro lado encontramos herramientas que no sólo permiten la anotación del vídeo sino que estas anotaciones están asociadas a un componente gráfico que se muestra durante la 25

26 reproducción del vídeo cuando se está reproduciendo un segmento anotado del vídeo, en base al concepto presente en la anotación. En general no llegamos a ver una herramienta que se adecúe perfectamente con el objetivo del proyecto, que es la de permitir al usuario definir dominios de una manera sencilla pero a la vez muy expresiva. En las siguientes secciones mostraremos las características principales de las herramientas analizadas y las confrontaremos con las características que buscamos. - Buscamos una herramienta web, que permita el trabajo colaborativo. - Que permita definir dominios y anotaciones conformes a estos dominios. - Que a nivel semántico se permita la definición predicados sujeto-verbo-objeto. - Que el proceso de definición de dominios y creación de anotaciones sea visual y simple, apto para usuarios de cualquier nivel técnico VideoANT VideoANT 4 es una herramienta web creada en la Universidad de Minnesota 5 que permite anotar vídeos. La anotación es muy simple, el usuario únicamente elige un punto concreto del vídeo y añade un título y una descripción larga. Cuando se visualiza el vídeo y se pasa por un punto anotado la anotación aparece resaltada durante un instante. Ilustración 3: Herramienta VideoANT, creando una anotación

27 Permite la exportación de las anotaciones realizadas en diversos formatos (RSS, JSON, XML, y fichero de texto plano). También ofrece la posibilidad de embeber el reproductor en sitios externos para que el usuario pueda colocar los vídeos anotados en su propio sitio web. Ilustración 4: Herramienta VideoANT, visualizando anotaciones. La aplicación queda lejos de lo que se pretende con este proyecto, careciendo del enfoque semántico del mismo. No permite la definición de conceptos ni relaciones entre estos para construir predicados sujeto-verbo-objeto, no permite la definición de un dominio y posteriormente de anotaciones conformes a ese dominio. Sí que se trata de una aplicación web colaborativa en la que distintos usuarios pueden añadir anotaciones a un mismo vídeo. 27

28 ANVIL The Video Annotation Research Tool ANVIL 6 es una herramienta de escritorio escrita en JAVA, que permite anotar tanto audio como vídeo. Fue desarrollada inicialmente para la investigación en el análisis de gestos, pero puede ser utilizada en cualquier campo y fue desarrollada en el Centro de Investigación en Inteligencia Artificial Alemán (DFKI 7 ) como parte de una tesis doctoral [2]. El usuario puede definir una especificación (para la definición de un dominio) de forma textual mediante un esquema XML o utilizando la propia herramienta mediante formularios. La salida producida por la herramienta es un fichero XML con los datos recogidos conformes al esquema utilizado. Para modelar la información que se quiere anotar, ANVIL permite al usuario definir un esquema 8 (especificación usando su propia terminología) que se determina de forma declarativa mediante ficheros XML, y desde la versión 5, permite también definirlo mediante su interfaz gráfica por medio de formularios. Para crear las anotaciones la herramienta utiliza un sistema de línea de tiempo (que abarca la duración total del vídeo) dividida verticalmente en pistas, cada concepto declarado en la especificación del dominio es representado en la línea de tiempo con una pista. El contenido de estas pistas serán las anotaciones realizadas. También podemos añadir una pista especial (wave), que analiza automáticamente el audio del vídeo y nos muestra una representación del sonido en forma de onda para identificar más fácilmente las partes del discurso sin necesidad de tener que reproducirlo. Ilustración 5: Herramienta ANVIL, ventana de pistas y línea de tiempo Con un significado similar a los esquemas XML. 28

29 La herramienta dispone de otras muchas características, como la posibilidad de exportar las anotaciones a formatos de herramientas estadísticas como SPSS o Statistica, u hojas de cálculo Excel. También permite la exportación en formato ARFF 9. Permite incorporar información de herramientas de captura de movimiento (MOCAP 10 ), además de su sincronización con el vídeo y su visualización en tres dimensiones. Permite la importación de datos recogidos por la herramienta de transcripción wavesurfer 11. A diferencia de lo que buscamos en este proyecto esta herramienta no permite definir conceptos ni relaciones entre conceptos para construir predicados sujeto-verbo-objeto. No se trata de una aplicación web y no facilita el uso colaborativo entre distintos usuarios. El proceso de creación de anotaciones requiere cierto nivel técnico VATIC (Video Annotation Tool from Irvine, California) VATIC 12 es una herramienta web de anotación de vídeos, creada en la Universidad de California, Irvine 13, para su uso en el campo de la visión por computador que hace uso del servicio Amazon Mechanical Turk, en adelante MTurk [3]. Amazon Mechanical Turk es un mercado de trabajo que requiere inteligencia humana. El servicio permite a las empresas acceder mediante programación a este mercado y a un personal diverso bajo demanda. Los desarrolladores pueden aprovechar este servicio para incorporar inteligencia humana directamente en sus aplicaciones. 14 La herramienta hace que sea fácil de construir de manera masiva conjuntos de datos de vídeo y puede ser desplegada en la nube. Permite repartir el trabajo necesario para realizar las anotaciones gracias al servicio MTurk, dispone de un sistema de aseguramiento de la calidad automático para las anotaciones realizadas por los trabajadores humanos de MTurk. Permite gestionar los pagos y bonificaciones a los anotadores. Dispone de una interfaz optimizada para la anotación de vídeos. Permite la anotación espacio-temporal y proporciona ayudas automáticas para la anotación de regiones en movimiento. El usuario selecciona una región en determinado instante del vídeo, selecciona un punto posterior del vídeo y corrige la forma y posición de la región 9 ARFF es un formato utilizado por la herramienta WEKA, herramienta para el aprendizaje automático y minería de datos. 10 Del inglés MOtion CAPture, captura de movimiento https://aws.amazon.com/es/mturk/ 29

30 seleccionada anteriormente, entonces la herramienta interpola las formas/posiciones intermedias entre el punto anterior y el actual evitando así que el usuario deba definir fotograma a fotograma la forma y posición de la región. El usuario puede determinar también si el objeto de interés seleccionado se encuentra visible u ocultado por otro objeto que se encuentra delante. Ilustración 6: Herramienta VATIC interfaz de usuario, definiendo regiones I. Ilustración 7: Herramienta VATIC interfaz de usuario, definiendo regiones II. Esta herramienta cumple con algunas características de las que buscamos. Se trata de una aplicación web, permite el trabajo colaborativo y ofrece un proceso de creación de anotaciones sencillo apto para usuario con bajo nivel técnico. Sin embargo a diferencia de lo que buscamos en este proyecto esta herramienta no permite definir conceptos ni relaciones entre conceptos para construir predicados sujeto-verbo-objeto. Tampoco permite definir un dominio y posteriormente anotaciones conformes a ese dominio. 30

31 VIA (Video and Image Annotation) Video and Image Annotation (VIA 15 ) es una herramienta de escritorio desarrollada por Multimedia Knowledge and Social Media Analytics Laboratory 16 en el marco del proyecto BOEMIE 17 (Bootstrapping Ontology Evolution with Multimedia Information Extraction) [2]. La herramienta proporciona capacidades de anotación a nivel de fotograma, es decir, permite anotar un instante concreto del vídeo, a nivel de vídeo completo, a nivel de escena (un rango de tiempo) o a nivel de región (región dentro de un fotograma). Permite realizar anotaciones ajustadas a ontologías proporcionadas (OWL) por el usuario así como anotaciones simples basadas en texto. Soporta vídeos en formatos MPEG1 y MPEG2. Esta herramienta no facilita el trabajo colaborativo, no se trata de una aplicación web, no permite la definición de dominios para después crear anotaciones conformes a esos dominios. El proceso de definición de dominios y creación de anotaciones no es visual y simple, apto para usuarios de cualquier nivel técnico VideoAnnEx VideoAnnex 18 es una herramienta desarrollada por IBM que permite la anotación de vídeos y que adopta MPEG-7 a la hora de almacenar las anotaciones realizadas [2]. La herramienta puede realizar anotaciones tanto del vídeo completo, así como de tomas 19 concretas o incluso fotogramas individuales. En la siguiente imagen podemos ver las distintas secciones de la aplicación. Arriba a la izquierda vemos la sección de anotación de tomas, a su derecha el reproductor de vídeo donde podemos visualizar el vídeo y movernos por él, abajo tenemos el panel de vistas, que dispone de dos pestañas, una para visualizar los fotogramas de la toma actual y otra para visualizar las distintas tomas del vídeo https://www.iit.demokritos.gr/project/boemie Una toma la constituyen todos los fotogramas que transcurren desde que la cámara empieza a grabar hasta que para. 31

32 Ilustración 8: IBM VideoAnnEx Annotation Tool dividido en cuatro regiones: Reproductor de video, Anotación de tomas y Panel de vistas. Cada toma en la secuencia de vídeo puede ser anotada con descripciones estáticas de la escena (para describir el escenario de la escena), descripciones sobre objetos clave (una persona, animal, o cosa que tiene relevancia en la escena) o con descripciones sobre eventos que aparecen en la escena. Estas descripciones se realizan seleccionando palabras de los diferentes léxicos 20 (de escenas estáticas, de objetos clave y de eventos) que bien pueden ser los proporcionados por defecto por la herramienta o proporcionadas por el usuario en formato XML. Adicionalmente podemos añadir palabras clave personalizadas. La herramienta dispone de otro nivel de anotación de grano más fino que son las anotaciones de regiones. El usuario puede determinar regiones dentro de la imagen y aplicar descripciones sobre estas regiones concretas en vez de referirse a la imagen completa. En la siguiente imagen podemos observar ventana en que se realizan la selección de regiones. 20 Un conjunto de palabras. 32

33 Ilustración 9: Anotación de regiones en VideoAnnEx. La herramienta dispone de un detector automático de tomas, que ayuda a la segmentación del vídeo en estas partes elementales, ayudando así en el proceso de anotación, esta información puede ser almacenada en formato MPEG-7 para su uso posterior. De la misma forma mantiene también un fichero XML con la información de los léxicos utilizados. El mantenimiento de la herramienta se encuentra descontinuado actualmente. A diferencia de lo que buscamos en este proyecto esta herramienta no permite definir conceptos (solo listas de palabras) ni relaciones entre conceptos para construir predicados sujeto-verbo-objeto. Evidentemente tampoco permite definir dominios para posteriormente crear anotaciones conformes a esos dominios. No se trata de una aplicación web y no facilita el uso colaborativo entre distintos usuarios. El proceso de creación de anotaciones (a pesar de ser simples vocabularios) requiere cierto nivel técnico ya que se precisa definir un documento XML en vez de proporcionar un método visual para ser introducidos Advene (Annotate Digital Video, Exchange on the NEt) Advene 21 es un proyecto del laboratorio LIRIS 22, de la Universidad Clade Bernard Lyon Su objetivo es proporcionar un modelo y un formato para compartir anotaciones sobre

34 documentos digitales de vídeo, así como herramientas para editar y visualizar los hipervídeos 24 generados a partir de las anotaciones y los documentos audiovisuales [2] [4]. Ilustración 10: Herramienta Advene, interfaz de usuario. Advene permite al usuario definir esquemas en los que definir los distintos conceptos disponibles para anotar, a los que la herramienta se refiere como tipos de anotación y las relaciones entre estos mediante lo que la herramienta llama tipos de relación. Cada tipo de anotación define a su vez un tipo de contenido en forma de un tipo MIME (text/plain,text/xml,image/jpeg etc.) para sus instancias. De la misma forma los tipos de relación también definen un tipo MIME para las suyas. Las anotaciones generadas pueden contener información descriptiva, administrativa y estructural y puede referirse al vídeo completo o a partes concretas de este. Los metadatos generados son almacenados en formato XML. Advene usa el reproductor de vídeo VLC 25 que soporta numerosos formatos tanto de audio como de vídeo (MP3, AVI, ASF, WMV, WMA, MP4, MOV, 3GP, OGG, OGM, Matroska (MKV), WAV, etc.) La herramienta soporta multitud de ficheros de anotaciones producidos por otras herramientas, como el formato SRT 26 (subtítulos), ficheros EAF 27 producidos por ELAN, 24 Vídeos enriquecidos con anotaciones

35 ficheros PRAAT 28, ficheros ANVIL o ficheros MPEG-7 soportando únicamente anotaciones textuales. A pesar de que hablamos de que la herramienta define conceptos y relaciones entre estos no lo hace al nivel que estamos buscando ya que los conceptos manejados por esta herramienta no disponen de propiedades, atributos o campos y las relaciones entre conceptos no permiten ser etiquetadas. Esta herramienta no permite definir dominios para posteriormente crear anotaciones conformes a esos dominios. No se trata de una aplicación web y no facilita el uso colaborativo entre distintos usuarios. El proceso de creación de anotaciones requiere cierto nivel técnico Elan Elan 29 es una herramienta de anotación diseñada desde el punto de vista de la lingüística, abarcando la problemática del análisis del lenguaje, lenguaje de signos y lenguaje corporal en fuentes de audio y vídeo [2] [5]. Ilustración 11: Herramienta ELAN, interfaz de usuario, Reconocimiento de voz. La herramienta permite realizar anotaciones descriptivas de un vídeo completo o de partes de éste. El usuario puede especificar sus propios vocabularios, de forma que no tenga que estar

36 continuamente escribiendo términos de uso frecuente. Las anotaciones realizadas se almacenan en formato XML. Las anotaciones se pueden crear en múltiples capas jerárquicamente conectadas, de modo que las anotaciones de una capa que referencia a otra están enlazadas con las anotaciones de la capa referenciada. Esto es así para permitir una de las características de la herramienta que como ya hemos visto fue diseñada para su uso en el análisis del lenguaje y es el soporte multilenguaje, de modo que diferentes capas pueden corresponder a diferentes traducciones. Sin embargo esta característica permite, además, simular la descripción estructurada del contenido, de forma que podemos crear una anotación en una capa y en la capa referenciada definir partes en las que está compuesta, o en general, crear anotaciones que contengan meta información sobre otras anotaciones. Ilustración 12: Herramienta ELAN, interfaz de usuario, Subtítulos. La herramienta ofrece multitud de opciones de importación y exportación de las anotaciones, entre las que se incluyen, Praat 30, CHAT 31 o Transcriber 32. Se distribuye bajo licencia GPL y puede correr sobre plataformas Windows, Linux o MacOS

37 Esta herramienta no contempla la visión de concepto que buscamos limitándose al uso de vocabularios, no permite definir relaciones entre conceptos para crear predicados sujetoverbo-objeto. Los conceptos manejados por esta herramienta no disponen de propiedades, atributos o campos. No se trata de una aplicación web y no facilita el uso colaborativo entre distintos usuarios. El proceso de creación de anotaciones requiere cierto nivel técnico SVAS (Semantic Video Annotation Suite) SVAS es una herramienta desarrollada en Joanneum research Institute of Information Systems & Information Management. Esta herramienta está enfocada en la creación de anotaciones bajo la especificación MPEG-7 [2] [6]. SVAS consta de 2 herramientas, Media Analizer y Semantic Video Annotation Tool (SVAT). La primera nos permite extraer de manera automática información estructural relacionada con tomas (shots) y fotogramas clave mientras que la segunda permite al usuario editar estos metadatos estructurales y añadir metadatos administrativos y descriptivos de acuerdo con la especificación MPEG-7. Los metadatos administrativos incluyen información sobre el creador, título del vídeo, detalles de cámara y tomas, etc., las anotaciones descriptivas permiten recoger conceptos aparecidos en el vídeo como personas, lugares, eventos etc. En lo relativo a la granularidad de las anotaciones, éstas pueden referirse al vídeo completo o a una parte de éste y a nivel espacial estas pueden referirse a la imagen completa o a regiones concretas. Estas regiones pueden ser detectadas de manera automática mediante segmentación de la imagen. Una vez son delimitados objetos de interés en el vídeo, SVAT proporciona ayudas para la detección automática de objetos similares a lo largo del vídeo que muestra en forma de fotogramas clave que aparecen resaltados en la línea de tiempo. El usuario puede editar estos resultados eliminando fotogramas clave que considere irrelevantes pero acciones como modificar los límites de las regiones detectadas o sus posiciones relativas en la imagen no están soportadas. Las anotaciones realizadas sobre una región concreta pueden ser copiadas a todas las ocurrencias detectadas a lo largo del vídeo, reduciendo drásticamente el tiempo empleado en anotar el vídeo. Los metadatos creados por la herramienta son guardados en un fichero XML bajo la especificación MPEG-7. 37

38 Vannotea Vannotea es una aplicación de escritorio que proporciona un sistema de anotaciones colaborativo seguro para entornos de e-investigación 33. [7] [8] En entornos científicos es crucial la autenticación de los autores de las anotaciones así como el acceso restringido a un grupo de colaboradores de confianza, por razones de privacidad, confidencialidad o por cuestiones de propiedad intelectual. Esto es de vital importancia en la e-ciencia 34, donde la anotación o interpretación de documentos o datos en bruto es a menudo más valiosa que el objetivo de la anotación. La herramienta está orientada al trabajo en colaboratorios 35. Permite a grupos de trabajo distantes colaborar en tiempo real o de forma asíncrona en el proceso de anotación de vídeos, sonidos, imágenes, u objetos 3d. Dispone de un sistema de mensajería instantánea integrado en la aplicación (Jabber 36 ) que permite a varios usuarios comunicarse mientras visualizan, crean o editan anotaciones. En el caso de la anotación de sonidos y vídeo, posicionando a todos los participantes de la conferencia en el mismo punto del vídeo / sonido de forma que todos ellos ven lo mismo en sus pantallas, a la vez de poder interactuar con la herramienta. Estas conferencias pueden ser grabadas y asociadas las anotaciones realizadas. Otro usuario autorizado, más tarde, podría abrir la herramienta y recibir notificaciones de que hay nuevas anotaciones realizadas. El usuario abriría la notificación y lo llevaría directamente al vídeo y punto concreto del vídeo donde aparece. El usuario podría revisar la anotación realizada, visualizar la sesión grabada anteriormente en la que los compañeros discutían sobre la anotación, o enviar algún comentario sobre esta. Vannotea extiende un protocolo de anotaciones desarrollado por el W3C llamado Annotea, permitiendo realizar anotaciones de contenido multimedia. Permite anotaciones estructuradas que puedan contener campos de tipo hipervínculo, fichero, texto libre o vocabularios predefinidos a través de listas desplegables. La herramienta permite también asociar información semántica de ontologías accesibles a través de Internet como WordNet 37, y usar esta información semántica para dirigir búsquedas semánticas sobre las anotaciones. 33 E-Research o e-investigación, se refiere al uso de las TIC s para soportar nuevas formas y pre existentes de investigación para una mejor investigación y para hacer una mejor colaboración en la investigación. Más información en

39 Ilustración 13: Herramienta Vannotea, creación de anotaciones. Para el control de identidad de los usuarios, Vannotea hace uso de un sistema de identidad federada llamado Shibboleth 38. Este sistema permite utilizar la misma identificación personal para identificarse en redes de diferentes departamentos de una organización, o incluso distintas organizaciones, de forma que las organizaciones (empresas, universidades, etc.) pueden compartir información sin compartir tecnologías de directorio, seguridad y autenticación como requieren otras soluciones. Mantiene la privacidad de las anotaciones realizadas permitiendo su acceso únicamente a los usuarios autorizados. Para la definición de estas políticas de acceso se hace uso de XACML (extensible Access Control Markup Language), lenguaje basado en XML para la definición y aplicación de políticas de control de acceso. Dentro de las herramientas de escritorio analizadas esta representa una excepción con respecto a las demás y es que realmente si permite el trabajo colaborativo a pesar de no tratarse de una aplicación web. No obstante a nivel semántico no permite la definición de conceptos (con sus atributos) ni de relaciones entre estos para poder formar predicados sujetoverbo-objeto. Tampoco permite la definición de dominios para posteriormente crear anotaciones conformes a esos dominios AAV (Annotating Academic Video) Annotating Academic Video (AAV) es un proyecto fruto de la colaboración de empresas y universidades Suizas. Se trata de una aplicación web que tiene como objetivo ofrecer una 38 https://shibboleth.net/ 39

40 herramienta flexible, abierta y estandarizada para anotar vídeos a través de una mezcla de plataformas, reproductores, sistemas gestores de vídeo (VMS) y sistemas de gestión del aprendizaje (LMS), por parte de profesores y personal de las universidades así como por los estudiantes [9] [10]. En la siguiente imagen podemos ver la interfaz de usuario. La pantalla se divide en cuatro secciones. Ilustración 14: Herramienta Annotating Academic Video Tool, interfaz de usuario. (a) reproductor de vídeo, (b) creación de anotaciones, (c) línea de tiempo y (d) listado de anotaciones. En la sección (a) podemos ver el reproductor de vídeo. Contiene las funciones típicas para la reproducción de vídeo. El reproductor de vídeo está sincronizado con las secciones (c) (línea de tiempo) y (d) (listado de anotaciones) de forma que conforme va avanzando el vídeo se van resaltando las distintas anotaciones de las secciones (c) y (d) cuando se pasa por el intervalo de tiempo para el cual fueron definidas. De la misma forma la selección de una anotación en estas secciones (tanto (c) como (d)) conllevará un movimiento en el reproductor de vídeo al inicio del intervalo establecido en la anotación seleccionada. En la sección (b) podemos crear las anotaciones. Tenemos dos posibilidades, crear anotaciones textuales o generar previamente una serie de vocabularios y posteriormente en el 40

41 proceso de anotación seleccionar alguna de las palabras de estos vocabularios. Los vocabularios creados para realizar anotaciones se pueden importar y exportar mediante ficheros JSON. Aunque las anotaciones en sí no se pueden exportar sino que únicamente se visualizan e insertan utilizando la herramienta. En la secciones (c) y (d) podemos visualizar y manipular las anotaciones realizadas. La sección (c) lo hace mediante una línea de tiempo (ideal para modificar el intervalo de tiempo asociado a la anotación) y la sección d mediante una lista vertical. Esta herramienta no permite la definición de conceptos (con sus atributos) ni de relaciones entre estos para poder formar predicados sujeto-verbo-objeto. Tampoco permite la definición de dominios para posteriormente crear anotaciones conformes a esos dominios OVA (Open Video Annotation Project) Herramienta web de anotación de vídeo desarrollada por Daniel Cebrián Robles. Es una iniciativa de Centro de estudios Helenicos 39 de la Universidad de Harvard 40 y apoyada por el programa de becas Talentia de la Junta de Andalucía. La herramienta está apoyada en una serie de tecnologías abiertas, haciendo uso de librerías Javascript de código abierto, extendiendo el proyecto Annotator 41 de la Open Knowledge Foundation 42 y construido sobre el reproductor de vídeo HTML5 de código abierto Video.js. El usuario puede definir anotaciones mediante texto enriquecido, imágenes, enlaces y vídeos usando el editor WYSIWYG que proporciona la herramienta https://okfn.org/ 41

42 Ilustración 15: Herramienta Open Video Annotation, creación de una anotación. Ilustración 16: Herramienta Open Video Annotation, visualizando una anotación. Esta herramienta no permite la definición de conceptos (con sus atributos) ni de relaciones entre estos para poder formar predicados sujeto-verbo-objeto. Tampoco permite la definición de dominios para posteriormente crear anotaciones conformes a esos dominios. 42

43 3.2. OTRAS HERRAMIENTAS RELACIONADAS CON LA ANOTACIÓN DE VÍDEOS Presentamos a continuación otra batería de herramientas que si bien en el fondo también suponen herramientas de anotación de vídeos, no son presentadas, enfocadas o promocionadas como tales, sino como herramientas que permiten la creación de vídeos interactivos. La mayor parte de las herramientas analizadas en el apartado anterior estaban enfocadas en un tipo de usuario muy específico, principalmente de corte académico e investigador, y dicho enfoque se veía reflejado claramente en las funcionalidades que ofrecían las distintas herramientas. El siguiente bloque de herramientas carece de muchas de las características de las que ofrecen las anteriores, más enfocadas al proceso de creación de los metadatos. Algunas de estas características son: el soporte de diversos formatos para almacenar las anotaciones, la habilidad de importar exportar a otros formatos de otras herramientas, etc. Sin embargo por contrapartida aportan más características relacionadas con la visualización posterior de las anotaciones realizadas y la interacción con otros servicios y recursos disponibles en Internet. En la sección anterior analizábamos las herramientas en base a la satisfacción de 4 aspectos principales. Esta nueva serie de herramientas cumplen con dos de ellos, es decir, se tratan de herramientas web que permiten un proceso de creación de anotaciones sencillo e intuitivo. Pero por otra parte estas herramientas no permiten definir dominios para posteriormente crear anotaciones conformes a esos dominios y tampoco permiten definir conceptos y relaciones entre estos para construir predicados sujeto-verbo-objeto The Mad Video The Mad Video 43 es una herramienta web que permite añadir información contextual a vídeos (a la acción la denominan etiquetar y a la información contextual la denominan etiquetas (Tags)) para crear versiones interactivas de los mismos

44 Ilustración 17: Herramienta The Mad Video, tipos de etiquetas disponibles (para crear etiquetas). Dispone de una serie de tipos de etiqueta predefinidos que el usuario puede elegir a la hora de crear etiquetas. El usuario puede etiquetar personas, lugares, productos y mascotas que aparecen en los vídeos, así como etiquetar la música que suena o enlazar a vídeos. El usuario dispone también de la posibilidad de agrupar etiquetas, de forma que podamos asignar grupos de etiquetas con una sola acción, acelerando el proceso de etiquetado. Finalmente el usuario dispone del tipo de etiqueta formulario de contacto, esta etiqueta muestra al que visualiza el vídeo un formulario de contacto para que pueda comunicarse con el creador del vídeo interactivo. La herramienta detecta automáticamente las escenas del vídeo y el etiquetado se realiza a nivel de escena, es decir, una etiqueta puede ser asignada a una de las escenas del vídeo y no a un instante concreto del vídeo o un rango de tiempo definido por el usuario. 44

45 Ilustración 18: Herramienta The Mad Video, interfaz de usuario. El proceso de etiquetado consiste en arrastrar etiquetas del panel de etiquetas a la línea de tiempo o al reproductor de vídeo. En el panel de etiquetas disponemos de 3 pestañas, Add Tags, Video Tags y All My Tags. Cuando el usuario arrastra una etiqueta de la primera pestaña, Add Tags, un formulario aparecerá solicitando información para crear la nueva etiqueta. En la siguientes dos imágenes podemos ver el proceso de creación de una nueva etiqueta de tipo persona y lo que ve un usuario que visualiza un vídeo al seleccionar etiquetas (una de tipo persona, otra de tipo vídeo y otra de tipo lugar) respectivamente. 45

46 Ilustración 19: Herramienta The Mad Video, formulario nueva etiqueta de tipo persona. Ilustración 20: Herramienta The Mad Video, Distintos tipos de etiqueta: Persona, Lugar y Vídeo. 46

47 Si la etiqueta ya la creó el usuario anteriormente en este vídeo solo tiene que buscarla en la pestaña Video Tags, y si el usuario la creó para otro vídeo podemos encontrarla en la pestaña All My Tags. Ilustración 21: Herramienta The Mad Video, panel de etiquetas, etiquetas creadas. La herramienta es de pago aunque ofrece un servicio gratuito con limitaciones. Permite embeber los vídeos interactivos generados en webs externas. 47

48 Mozilla PopcornMaker PopcornMaker 44 es un proyecto de la fundación Mozilla 45 enmarcado dentro de la iniciativa Webmaker 46. Permite al usuario crear, a partir de recursos obtenidos de otras partes de la Web (vídeos, sonidos, imágenes estáticas o animadas, textos, mapas, etc ), vídeos enriquecidos e interactivos. PopcornMaker hace uso de PopcornJS una librería Javascript que proporciona un framework de eventos sobre elementos multimedia en HTML5 y proporciona un API común de acceso a elementos, propiedades, eventos y métodos de elementos multimedia en HTML5. Ilustración 22: Herramienta PopcornMaker, interfaz de usuario, widgets de eventos. 44 https://popcorn.webmaker.org https://webmaker.org/about 48

49 Ilustración 23: Herramienta PopcornMaker, interfa de usuario, búsqueda de recursos multimedia Anotaciones de vídeo de YouTube. El portal de vídeos Youtube dispone de la posibilidad de añadir anotaciones a los vídeos de tu propiedad. Las opciones de anotación ofrecidas son muy sencillas y pretenden ofrecer un mecanismo para crear interactividad en los vídeos. Como podemos ver en la siguiente imagen, el usuario puede añadir texto de distintas formas Bocadillo: permite crear bocadillos emergentes con texto. - Área destacada: permite resaltar áreas de un vídeo; cuando el usuario desplaza el ratón sobre ellas, aparece el texto que se ha introducido. - Nota: permite crear cuadros emergentes que contienen texto. - Título: permite crear una superposición de texto para titular tu vídeo. - Etiqueta: permite crear una etiqueta para resaltar una parte específica de tu vídeo y asignarle un nombre. 47 https://support.google.com/youtube/answer/ ?rd=1 49

50 Ilustración 24: Herramienta Gestor de vídeos de Youtube, gestor de anotaciones. Podemos enlazar las anotaciones a otras partes del portal como a otro vídeo, a un canal, a una lista de reproducción, a la página de suscripción de nuestro canal. 50

51 3.3 RESUMEN Características que buscamos para solucionar el problema: Que se trate de una herramienta web. Que permita el trabajo colaborativo. Que el proceso de definición de dominios y creación de anotaciones sea visual y simple, apto para usuarios de cualquier nivel técnico. Que a nivel semántico se permita la definición de oraciones sujeto-verbo-objeto. Que permita definir dominios (conceptos con atributos y relaciones entre conceptos) y anotaciones que se ajusten a estos dominios. 51

52 4. DISEÑO DE LA SOLUCIÓN Tal y como vimos en el apartado de análisis de objetivos, necesitamos desarrollar un editor visual (similar a los editores gráficos UML) para la definición de dominios y para la creación de anotaciones. También se requiere gestionar la reproducción de vídeos y la selección de un rango temporal donde acotar el contexto de las anotaciones. La herramienta está desarrollada en la plataforma Java, usa JPA como mecanismo de persistencia, JSF 2 como tecnología para la presentación (implementación mojarra) y framework MVC, utilizando PrimeFaces como librería de componentes JSF. Adicionalmente se hace uso intensivo de la librería Javascript jquery en la parte del cliente. Para la implementación del editor de dominios y del editor de anotaciones se hace uso de la librería Javascript JsPlumb que nos permite la conexión visual de elementos HTML, con la que podemos mostrar las relaciones entre conceptos. Por otro lado se hace uso de jquery para el mecanismo de arrastrar y soltar utilizado en el lienzo. Finalmente cabe destacar el uso de un componente no visual de Primefaces. Este es el componente RemoteCommand. Este componente nos permite conectar el cliente con el servidor mediante el uso de Javascript. Los componentes visuales ya disponen de manera transparente al programador de una comunicación con el servidor pero necesitamos hacerlo de manera explícita cuando desarrollamos una solución personalizada. En el caso del editor de anotaciones vemos que además de la gestión del lienzo de trabajo como en el editor de dominios, tenemos que gestionar un reproductor de vídeo, proporcionando los controles necesarios para su manejo así como para la selección del rango de tiempo que será asociado a la anotación. Hacemos uso de una librería Javascript que nos facilita el trabajo con el reproductor de vídeo, esta librería se llama PopcornJS. PopcornJS proporciona un api que permite al programador acceder a una serie de propiedades, métodos y eventos disponibles para las etiquetas de medios en HTML5, independientemente de la fuente del vídeo. Esta puede venir de una URL directa a un vídeo o sonido o puede ser una a un recurso multimedia de un portal de Internet (SoundCloud 48, Vimeo 49 o Youtube 50 ). Además de esto, la librería proporciona otra funcionalidad que no se usa en el proyecto, pero que podría formar parte de una siguiente fase del proyecto, que es la 48 https://soundcloud.com/ 49 https://vimeo.com/ 50 https://www.youtube.com/ 52

53 de asociar a un punto determinado del vídeo eventos. Estos eventos suponen la visualización de algún elemento visual durante el periodo que se ha indicado. Estos tipos de elementos visuales son añadidos a la librería en forma de plugins. Por defecto la librería viene acompañada de una serie de plugins aunque el programador si lo desea puede desarrollar los suyos propios. Dado que nos basamos en las etiquetas de medios en HTML5 para la reproducción de medios, la compatibilidad con los distintos formatos de vídeo depende del navegador en el que se esté visualizando. Para mejorar la compatibilidad con un mayor número de formatos de vídeo podemos instalar plugins en el navegador o aplicaciones que dan soporte de manera transparente a través de la etiqueta <video>. Estos problemas de compatibilidad surgen en aquellos vídeos de los que se tiene un enlace directo al fichero, ya que para los vídeos de servicios de distribución de vídeo como Youtube o Vimeo para los que también da soporte PopcornJs utiliza el reproductor embebido de cada uno de estos servicios de vídeo. Con el navegador Safari 51, si tenemos la aplicación Quicktime 52 instalada, podemos reproducir tantos formatos como la aplicación Quicktime instalada pueda. El navegador solo está disponible para OS X en sus versiones actuales (Dejaron de dar soporte para Windows a partir de la versión 5.1.7). En Windows disponemos de un complemento para navegadores llamado Divx Web Player 53 que da soporte a través de la etiqueta vídeo a formatos como MKV, DivX, AVI, MOV y MP4. 51 https://www.apple.com/es/safari/

54 5. DESCRIPCIÓN TÉCNICA 5.1. ARQUITECTURA La herramienta está desarrollada utilizando Java Server Faces como framework MVC, lo que de cierta forma determina la arquitectura general de la aplicación. La arquitectura Modelo-Vista-Controlador (MVC) surgió como patrón arquitectónico para el desarrollo de interfaces gráficos de usuario. Su concepto se basaba en separar el modelo de datos de la aplicación de su representación de cara al usuario y de la interacción de éste con la aplicación, mediante la división de la aplicación en tres partes fundamentales: - El modelo, que contiene la lógica de negocio de la aplicación. - La vista, que muestra al usuario la información que éste necesita. - El controlador, que recibe e interpreta la interacción del usuario, actuando sobre modelo y vista de manera adecuada para provocar cambios de estado en la representación interna de los datos, así como en su visualización. En realidad para definir el patrón arquitectónico utilizado en JSF se utiliza el término Model 2, término acuñado por Sun Microsystems para referirse al modelo arquitectónico recomendado para las aplicaciones web desarrolladas sobre J2EE. Dicha arquitectura consiste en el desarrollo de una aplicación según el patrón Modelo Vista Controlador, pero especificando que el controlador debe estar formado por un único Servlet (en JSF FacesServlet), que centralice el control de todas las peticiones del sistema y que basándose en la URL de la petición y en el estado del sistema, derive la gestión y el control de la petición a una determinada acción de entre las registradas en la capa controlador. Esta centralización del controlador en un único punto de acceso se conoce como patrón Front controller. Java Server Faces aporta algunas características adicionales que procedemos a repasar. - Un conjunto de APIs para representar componentes de una interfaz de usuario y administrar su estado. - Un modelo de eventos en el lado del servidor integrado con el sistema de componentes. - Conversores: Los conversores en JSF suponen un mecanismo para mantener la trazabilidad entre objetos en el lado del servidor con su representación en la vista (en el lado del cliente). - Validadores: Mecanismo que proporciona JSF para validar la corrección en los 54

55 componentes de entrada de datos de formularios en JSF. - Internacionalización: Ofrece un mecanismo para la internacionalización de las cadenas presentes en la interfaz de usuario. - Mensajes: Dispone de un sistema para el envío a la interfaz de usuario de mensajes desde el servidor. Como señalamos anteriormente se hace uso de Primefaces, una biblioteca de componentes de código abierto para Java Server Faces. Proporciona una colección de componentes en su mayoría visuales (widgets). Estos pueden ser usados por los programadores JSF además del pequeño conjunto de componentes básicos que se incluyen con la plataforma JSF para componer la interfaz de usuario para una aplicación web. Ilustración 25: Arquitectura de la aplicación. Cuando el usuario interactúa con los componentes de la interfaz de usuario, se realiza una comunicación con FacesServlet que dirige la comunicación al Managed Bean correspondiente. A partir de ese momento se desarrolla toda la lógica de negocio de la aplicación. En la siguiente imagen vemos de forma simplificada el flujo de funcionamiento de una interacción del usuario con el sistema (desde el envío de un formulario hasta su respuesta). 55

56 Ilustración 26: Envío, validación y respuesta de un formulario en JSF. Diagrama de flujo simplificado. [11] 56

57 5.2. MODELO En esta sección analizaremos las principales clases que representan el modelo de la aplicación (no confundir con el uso dado en adelante a la palabra modelo). En la interfaz de usuario y en la definición de objetivos se usan los términos de dominio y anotación aunque internamente usamos los términos de metamodelo y modelo respectivamente. Un modelo no es más que una abstracción de un fenómeno existente en el mundo real. Un metamodelo es otra abstracción, pero de un modelo, dicho de otra forma, el modelo de un modelo. Un metamodelo establece una serie de reglas a seguir a la hora de crear un modelo. Qué tipo de abstracciones podemos usar en el modelo, es decir, que conceptos pueden ser utilizados en el modelo. Qué características podemos asociarle a esas abstracciones, dicho de otra forma, que atributos tienen estos conceptos. Qué mecanismos ofrece para relacionar esas abstracciones entre sí, dicho de otra forma, que relaciones se pueden dar entre dos conceptos. Todos estos principios quedan reflejados en el modelo de datos de la aplicación. En el siguiente apartado veremos la implementación concreta utilizada Modelo de datos Dando soporte a la creación de dominios tenemos las clases MModelo, MConcepto, MPropiedad y MReferencia (M de Meta). Dando soporte a la creación de anotaciones tenemos las clases Modelo, Concepto, Propiedad y Referencia. Como vemos existe cierto paralelismo entre las clases. Podríamos decir que las clases con el prefijo M definen las reglas a seguir por sus respectivas clases sin el prefijo Representando dominios (Metamodelos) Un metamodelo (dominio) (Clase MModelo) contiene un conjunto de meta -conceptos (clase MConcepto) y un conjunto de meta -referencias (clase MReferencia) dispone además de un nombre y una descripción (útil para distinguir un metamodelo de otro y poder añadir información sobre el dominio definido). Una meta -referencia determina una asociación o relación entre dos meta -conceptos. 57

58 Permite construir predicados del tipo Sujeto-Verbo-Objeto, por lo tanto una meta - referencia define un meta -concepto referenciante (sujeto), un meta -concepto referenciado (objeto), y una acción (determinado por una cadena de texto, actuando como verbo). Un meta -concepto contiene un conjunto de meta -propiedades y un nombre. Una meta -propiedad consta de un nombre de propiedad y especifica un tipo de dato (enumerado TipoDeDato). Ilustración 27: Diagrama de clases, metamodelos (dominios) Representando anotaciones (modelos) Un modelo (clase Modelo) contiene un conjunto de conceptos (clase Concepto) y un conjunto de referencias (clase Referencia). Al igual que su meta -clase también dispone de un nombre y una descripción para distinguir fácilmente unos modelos de otros. Una referencia determina una asociación entre dos conceptos. Si la meta -referencia definía asociaciones que representaban una suerte de predicado Sujeto-Verbo-Objeto entre metaconceptos, una referencia hace lo propio entre conceptos. En este caso no disponen de una cadena de texto que defina la acción pues esta información está disponible en la meta - referencia asociada. Un concepto contiene un conjunto de propiedades (el nombre es propio de su meta -clase MConcepto por lo tanto no tiene) y de una etiqueta (una cadena de texto usada para 58

59 identificar fácilmente los conceptos en lienzo de la interfaz de usuario). Si la meta -propiedad consistía de un nombre de propiedad y un tipo de dato una propiedad consta principalmente de un valor. Este valor está definido como un atributo de tipo java.io.serializable. Esto nos posibilita de una forma flexible almacenar valores cuyo tipos de datos que no se conocen en tiempo de compilación (el tipo de dato lo elige el usuario de la aplicación y puede ser de tipos muy diversos desde una imagen pasando por un entero o una cadena). Los modelos (anotaciones) deben estar asociados a un fragmento de un vídeo, por lo que se incluyen las clases FragmentoVideo y Video. Ilustración 28: Diagrama de clases, modelos (anotaciones). 59

60 Metamodelos y modelos. Existe una relación entre cada clase del modelo y su respectiva clase del metamodelo. Dichas relaciones las podemos observar en la siguiente imagen. Ilustración 29: Diagrama de clases, metamodelos y modelos. Relaciones de dependencia. Observamos también como tanto Concepto como MConcepto tienen asociado una posición. Esta posición sirve para almacenar la posición en el lienzo de los elementos gráficos que los representan en el editor visual. Finalmente vemos que todas las clases disponen de los mismos dos atributos: id e idtemporal. Los atributos id sirven para la persistencia de los objetos todos estan definidos como claves principales de cada una de las clases, como veremos en la siguiente sección. Los atributos idtemporal son atributos que no se persisten en base de datos. Se utilizan para tener trazabilidad entre la vista y el controlador (tanto en objetos que han sido persistidos y por lo tanto tienen valor para su otro atributo id como para aquellos que todavía no han sido persistidos). 60

61 5.3. TECNOLOGÍAS Patrón DAO EL patrón DAO es un patrón de diseño que permite encapsular y abstraer todo el acceso a una fuente de datos. Este patrón incluye la utilización conjunta de otros patrones como el patrón Adaptador, el patrón Factoría y el patrón Singleton y su propósito es convertir la interfaz de una clase en otra que el cliente espera. Permite la colaboración de ciertas clases a pesar de tener interfaces incompatibles. La aplicación ha sido desarrollada inicialmente haciendo uso de JPA como mecanismo de persistencia, esto nos brinda cierta flexibilidad a la hora de elegir el la tecnología de base de datos a utilizar, sin embargo, si queremos utilizar otro sistema no soportado por JPA debemos buscar otra solución. Una de las opciones al inicio del proyecto fue la de usar el sistema de base de datos NoSQL Cassandra. La implementación del patrón DAO como mecanismo de acceso a datos en la aplicación facilitaría que en el futuro se pudiera añadir soporte a este sistema gestor de bases de datos (o a cualquier otro sistema de almacenamiento de datos). El DAO gestiona la conexión con la fuente de datos y se encarga de obtener y almacenar los datos. En cualquier momento se puede cambiar la fuente de datos por otra sin realizar cambios más allá de las clases del DAO. El patrón DAO utiliza una factoría para crear las instancias de las clases DAO que requiere la aplicación. En las siguientes imágenes podemos ver el diagrama de clases del DAO y el diagrama de la arquitectura de la aplicación. 61

62 Ilustración 30: Diagrama de clases, DAO. Ilustración 31: Arquitectura de la aplicación, DAO. En el siguiente fragmento de código podemos ver como se haría uso del DAO en una clase de prueba. 62

63 public class TestDAO { private static MModeloDAO mmodelodao; private static DAOFactory df; public static void main(string[] args) throws IOException { try { DAOFactory factoria = DAOFactory.getDAOFactory(Type.JPA); } catch (DAOException e1) { e1.printstacktrace(); } mmodelodao=df.getmmodelodao(); try { List<MModelo> metamodelos=mmodelodao.findall(); // Hago uso de los datos obtenidos //... } } catch (DAOException e) { e.printstacktrace(); } } 63

64 Persistencia de datos mediante JPA. En el apartado anterior vimos como mediante la implementación del patrón DAO preparamos a la aplicación para utilizar distintas fuentes de datos sin afectar a las clases del negocio, debiendo únicamente implementar para cada nuevo tipo de fuente de datos las interfaces definidas del DAO. En esta aplicación implementamos la interfaz del DAO para el acceso a datos mediante el uso de JPA (Java Persistence API). Java Persistence API es la API de persistencia desarrollada para la plataforma Java EE. Java es un lenguaje de programación orientado a objetos, la lógica de negocio se desarrolla mediante la declaración de clases, interfaces, objetos, etc. Las clases definen un comportamiento (métodos) y un estado determinados (propiedades). Sin embargo, en el lado de los datos, cuando trabajamos con fuentes de datos relacionales (MySql, Oracle, MariaDB, ) hablamos de tablas, filas, columnas, etc. Es necesario por lo tanto establecer una correlación entre estas clases y propiedades con las que trabaja Java con las tablas, filas y columnas propias de los sistemas de bases de datos relacionales. Existen sistemas que mapean clases, propiedades y objetos con tablas, filas y columnas respectivamente. A estos sistemas se les llama ORMs (Object Relational Mapping). JPA es una abstracción sobre JDBC (Java DataBase Conectivity) y nos facilita esta conversión de manera sencilla mediante ficheros XML o mediante el uso de anotaciones. En la implementación de la persistencia mediante JPA se ha optado por el uso de anotaciones y en el siguiente fragmento de código podemos ver un ejemplo para la entidad (en JPA las clases persistidas se les denomina entidades) Modelo. 64

65 @Entity public class Modelo implements Serializable { //================== = GenerationType.AUTO) private Long FetchType.EAGER, cascade= CascadeType.ALL, orphanremoval=true, mappedby="modelo") private ArrayList<Concepto> FetchType.EAGER, cascade= CascadeType.ALL, orphanremoval=true, mappedby="modelo") private ArrayList<Referencia> private MModelo mmodelo; private String nombre; private String FetchType.EAGER, cascade= CascadeType.ALL, orphanremoval=true,mappedby="modelo") private FragmentoVideo private Date private Long idtemporal=0l; //================== constructores =====================... //================== Setters & getters =====================... } Pasamos a analizar las anotaciones utilizadas en este : Esta anotación determina que una clase java se trata de una entidad JPA, (Clase del modelo que será persistido mediante la api de : Esta anotación especifica que el atributo anotado constituye la clave principal de la = GenerationType.AUTO): Esta anotación, que se utiliza de forma conjunta determina la forma en que se establece un valor de forma automática para el identificador de la entidad. Para generar automáticamente los identificadores disponemos de tres estrategias distintas. El parámetro strategy establecido a GenerationType.AUTO indica que deja a JPA decidir la estrategia a FetchType.EAGER, cascade= CascadeType.ALL, orphanremoval=true, mappedby="modelo"): Esta anotación define una relación uno a muchos, es decir un modelo (uno) tiene una serie de conceptos (muchos). Vemos como en el ejemplo pasamos a la anotación los parámetros fetch, cascade, orphanremoval y mappedby. El parámetro fetch determina si los cambios realizados se materializan en la base de datos de manera inmediata (eager) o se demora hasta que sea necesario (lazzy). El parámetro cascade define con qué tipo de operaciones se realizarán operaciones en "cascada", es decir se propagarán a las entidades relacionadas. El parámetro orphanremoval establecido a true establece que elimine las 65

66 entidades relacionadas en caso de ser eliminada la entidad. El parámetro mappedby sirve para establecer una relación bidireccional, definiendo el nombre de la propiedad de la entidad del otro lado de la : Esta anotación define una relación muchos a uno, es decir una serie de modelos (muchos) pueden estar asociados a un mismo metamodelo Esta anotación define una relación de uno a uno, en el ejemplo mostrado se dice que un modelo (uno) está asociado con un fragmento de vídeo (uno). Podemos ver como hace uso de los parámetros fetch, cascade, orphanremovaly y mappedby comentados : Esta anotación define anotación define un campo de tipo : Esta anotación determina que el atributo anotado debe ser ignorado por la API de persistencia. 66

67 Ilustración 32: Diagrama de clases, modelo de la aplicación. 67

68 Presentación: Componentes Primefaces destacados. En el desarrollo de este proyecto se hace uso de una librería de componentes JSF de código abierto llamada Primefaces 54. Haremos un breve repaso a algunos de los componentes utilizados. Algunos de estos componentes no aportan nueva funcionalidad sobre los componentes que ofrece la implementación de JSF, sin embargo los utilizamos ya que utilizan el aspecto visual del tema de interfaz utilizado Componentes de entrada de datos InputText: Permite la introducción de texto y números de cualquier tipo. InputTextArea: Permite la introducción multilínea de texto y números de cualquier tipo. BooleanCheckbox: Permite la definición de valores de verdadero o falso mediante una casilla de verificación. Inplace: Permite la edición en vivo de datos, es decir, en un principio se muestra el dato como lo mostraría cualquier componente de salida de datos. El usuario al pulsar sobre el dato se muestra algún componente que permita la edición del dato. Autocomplete: El usuario comienza a escribir texto en una casilla de texto y conforme se van encontrando coincidencias las va mostrando en un desplegable para ser elegidas. Slider: Permite seleccionar un número dentro de un rango (mínimo y máximo) determinado mediante una barra de desplazamiento. También permite la definición de dos números que delimitarán un rango. Calendar: Permite la selección de una fecha visualmente mediante un calendario. CommandButton: Permite la ejecución tanto de código de lado del cliente (Javascript) como de código de lado del servidor, al ser pulsado un botón por parte del usuario

69 Ilustración 33: Primefaces, componentes de entrada de datos Componentes de salida de datos Messages: componente que muestra visualmente los distintos mensajes enviados mediante FacesMessage con distintos estilos dependiendo del tipo de mensaje. Ilustración 34: Primefaces, componente Messages. DataTable: Este componente muestra colecciones de datos en forma de tabla. El componente dispone de una serie funcionalidades como el filtrado, paginación y ordenado resultados. 69

70 Ilustración 35: Primefaces, componente DataTable Componentes contenedores OverlayPanel: Este componente nos permite mostrar contenido flotante. Podemos verlo en uso al pasar el ratón por encima del icono i en las cajas de conceptos como podemos ver en la siguiente imagen. Ilustración 36: Primefaces, componente OverlayPanel. Dialog: La mayor parte de formularios utilizados en la aplicación están contenidos en diálogos. Este componente nos ofrece una experiencia similar a las ventanas en una aplicación de escritorio. 70

71 Ilustración 37: Primefaces, componente Dialog. Panel: El componente Panel sirve de contenedor y presenta el aspecto determinado por el tema elegido. Ilustración 38: Primefaces, componente Panel. OutputPanel: Este componente sirve de contenedor y ofrece algunas funcionalidades como es la actualización automática del contenido o la carga diferida. En este proyecto se usa en diversas ocasiones para aprovecharse de la funcionalidad de las actualizaciones de datos automáticas, es decir, sin necesidad de actualizar explícitamente los datos, cuando se produzca algún cambio en estos en el lado del servidor la vista se actualizará automáticamente Otros Menu: Este componente facilita la creación de un sistema de navegación (menú) para la aplicación. BlockUi: El componente BlockUI nos ofrece un mecanismo mediante el cual podemos bloquear ciertas partes de la interfaz de usuario. En ocasiones sucede que ciertos componentes visibles al usuario no están preparados para ser utilizados, bien porque se está terminando de procesar alguna petición o bien porque no se cumplen ciertos requisitos para que su uso tenga sentido. En este proyecto se utiliza en el momento de la carga de un vídeo en el creador de anotaciones. En el momento de la carga del vídeo el usuario no puede 71

72 interactuar con los controles de vídeo. También se utiliza después de la carga del vídeo bloqueando la zona de reproducción, impidiendo así al usuario seleccionar cualquier tipo de enlace o control de reproducción insertado por parte de los servicios de distribución de vídeo utilizados en el proyecto (Vimeo y Youtube). RemoteCommand: Permite establecer en el lado del servidor un método de callback que puede ser llamado desde lado del cliente mediante Javascript. El componente funciona de la siguiente forma: En la parte de la vista definimos dentro de un formulario la etiqueta correspondiente al componente RemoteCommand. La propiedad name determinará el nombre del método a acceder desde el lado del cliente. La propiedad actionlistener determinará el método de lado del servidor que se ejecutará al efectuar la llamada desde el cliente. En este caso estamos definiendo un listener para un método llamado rcmimetodo que está en un managed bean llamado mibean. <h:form> <p:remotecommand name="mimetodo" actionlistener="#{mibean.rcmimetodo}" /> </h:form> El siguiente código muestra cómo llamar al método remoto desde el cliente. mimetodo([{name : 'id',value : "x0123"}, {name : 'x',value : 1.2}, {name : 'y',value : 3.4} ]); Para pasar parámetros al método debemos codificarlos usando un formato JSON de la forma en que se ve en el código anterior ([{name : 'nombredepropiedad',value : "valor"},...]). En el lado del servidor tendríamos un managed bean como el siguiente: package (name= public class mibean implements Serializable { public void rcmimetodo(){ FacesContext context = FacesContext.getCurrentInstance(); Map map = context.getexternalcontext().getrequestparametermap(); String strid=(string) map.get("id"); Long id = Long.parseLong( (String) map.get("id")); float x = (int) Float.parseFloat( (String) map.get("x")); float y = (int) Float.parseFloat( (String) map.get("y")); //código del método } } 72

73 El método recupera del contexto los parámetros enviados de la forma que se ve en el fragmento de código anterior. A partir de este momento ya puede realizar el resto de operaciones del método teniendo disponibles los parámetros enviados desde el cliente. RequestContext: De manera análoga al componente RemoteCommand, la clase RequestContext permite ejecutar código de lado del cliente (Javascript) desde el servidor. Esto ha resultado de utilidad para cerrar diálogos una vez terminada una operación de lado del servidor. Por ejemplo, en la creación de un nuevo dominio en el editor de dominios. RequestContext context = RequestContext.getCurrentInstance(); context.execute("pf('dialogonuevoconcepto').hide();"); Aclaración sobre el código: el método PF nos da acceso al api de lado del cliente. La mayoría de componentes disponen de una propiedad llamada widgetvar. Podemos acceder a los métodos de lado del cliente del componente mediante el método PF pasándole como parámetro el valor establecido en esta propiedad. En este caso vemos como utiliza el método hide() del diálogo para ocultarlo. 73

74 jquery jquery 55 es una biblioteca escrita en JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. En jquery se hace uso de selectores, un mecanismo para seleccionar el elemento o grupo de elementos (HTML) con los que trabajar. Estos selectores al menos los más básicos, son parecidos, o iguales, a los que se utilizan en CSS. Un detalle que caracteriza el trabajo con jquery es que hace uso de un patrón de creación de objetos en Javascript llamado encadenamiento de métodos. El método tradicional consiste en ejecutar sobre un objeto una serie de métodos que lo modifican de uno en uno. jquery lo que hace es devolver un objeto jquery en cada método de forma que en una sola línea se pueden encadenar múltiples acciones sobre un mismo objeto. En el siguiente fragmento de código mostramos un ejemplo de utilización de la librería. $("selector").metodo().metodo().metodo(); // $("div ").css("border","1px solid red").width("100").height("323"); A lo largo del proyecto se ha hecho un uso intenso de esta librería y podemos ver ejemplos de uso en la sección 5. Descripción técnica

75 JsPlumb JsPlumb 56 es una librería Javascript de código abierto (licenciada bajo MIT y GPLv2) que proporciona al desarrollador web un medio de conectar visualmente elementos HTML en sus páginas. La librería se distribuye bajo 4 implementaciones distintas (jquery, Mootools, Yui3 y Vanilla) que el desarrollador puede elegir según sus propias preferencias. En este proyecto se utiliza la versión para jquery. En el siguiente código podemos ver un ejemplo simple de utilización de esta librería. Que posteriormente pasaremos a comentar. <html> <head> <script type="text/javascript" src="js/jquery.js"></script> 1 <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.jsplumb.js"></script> <script type="text/javascript"> // Método que se ejecuta cuando el la página está cargada y el DOM está disponible 2 $(document).ready(function() { jsplumb.importdefaults({ 3 ConnectionOverlays : [ [ "Arrow", { location : 1, id : "arrow", length : 24, foldback : 0.8 } ] ],}); //Configuramos las opciones para los endpoints var colorflecha = "#346789"; var endpoint = { connectorstyle : {strokestyle :colorflecha,linewidth : 2}, 4 connector: [ "StateMachine", { curviness : 20 } ], istarget:true, issource:true, }; //Establecemos los endpoints en los divs 5 jsplumb.addendpoint($(".window"), { anchor:"topcenter" }, endpoint); jsplumb.draggable($(".window")); }); </script> <!-- Estilos --> <style>.window { border: 1px dashed #346789; height: 100px; width: 100px; 6 padding: 0.5em; position: absolute; text-align:center; } #a{left:200px;top:200px;} #b{left:20px;top:20px;} </style> </head> <body> <div> <div id="a" class="window" >Concepto 1</div> 7 <div id="b" class="window" >Concepto 2</div> </div> </body> </html>

76 Ilustración 39: Ejemplo de jsplumb, resultado del código anterior después de realizar una conexión. En primer lugar necesitamos añadir las librerías de jsplumb así como las únicas dependencias que tiene, que en este caso es la librería jquery y jqueryui (1). En el cuerpo de la página debemos añadir las etiquetas necesarias que representaran los elementos conectables (7). En las partes (3) y (4) se configuran las opciones de representación de las conexiones. En (5) estamos estableciendo el resultado de la consulta jquery con el selector.window, es decir los dos divs cuya clase es window, como posibles puntos de conexión con el método addendpoint y con el método draggable estamos permitiendo que el usuario pueda mover estos divs. 76

77 5.4. METAMODELADO El objetivo principal de la aplicación consiste en proporcionar al usuario un mecanismo para crear modelos sobre la realidad observada en escenas de vídeo. En este proyecto se plantea una arquitectura de metamodelado de tres niveles que se presenta a continuación. Se podría haber optado por utilizar alguna de las distintas tecnologías de metamodelado como ECORE, que actualmente se utiliza en proyectos de MDE, sin embargo se ha preferido adoptar una solución personalizada (más simple) con el objetivo de optimizar el tiempo disponible para realizar el proyecto y no poner en peligro la consecución de objetivos básicos del proyecto. Se requería hacer un estudio de las distintas tecnologías de metamodelado y APIs para el manejo persistente de modelos como EMF. Además el comportamiento ante grandes volúmenes de datos de ECORE haría necesario alguna otra tecnología de soporte como los repositorios de modelos, y por otro lado, el principal interés es usar persistencia nosql (no se implementa pero se facilitada su implantación gracias al DAO que abstrae el modelo de datos del mecanismo de persistencia) que ofrece una alta escalabilidad. Todos estos detalles se comentan en la sección de vías futuras. En la siguiente imagen podemos ver un esquema de la arquitectura de metamodelado de tres niveles propuesta. Ilustración 40: Arquitectura de metamodelado de tres niveles. 77

78 En el nivel N2 se ofrecen mecanismos para definir dominios (nivel N1). El nivel N1 (dominios) lo constituyen los dominios definidos por el usuario que determinarán que conceptos pueden aparecer en el nivel N0 (anotaciones) y que relaciones se pueden establecer entre estos. Ilustración 41: Clases que dan soporte para persistir modelos y metamodelos. Un ejemplo concreto de un dominio (nivel N1) podría ser el siguiente (en pseudocódigo): Ilustración 42: Ejemplo de dominio. En el nivel N0, Anotaciones, nos encontramos con que previamente hemos definido un dominio en el nivel N1 (el ejemplo anterior) que nos determinará las restricciones a la hora de crear la anotación y disponemos de los elementos proporcionados por el nivel N1 (conceptos y relaciones definidas en el dominio) para definir estas anotaciones. Este nivel supondrá una instancia del dominio de nivel N1, es decir, valores concretos para el dominio. Veamos un ejemplo de una anotación conforme al dominio de ejemplo anterior: 78

79 Ilustración 43: Ejemplo de anotación conforme al dominio anterior GESTOR DE VÍDEOS. En la sección de gestión de vídeos disponemos de un listado de los vídeos gestionados en la aplicación mostrados a través del componente de Primefaces DataTable. El componente permite el filtrado y ordenamiento por columnas así como el paginado de los resultados. De esta forma el usuario puede localizar fácilmente el vídeo a editar o visualizar. Ilustración 44: Gestor de vídeos. En la primera columna podemos una serie de iconos identificativos del tipo de fuente del vídeo. Esta puede ser de Youtube, Vimeo, o una URL directa al vídeo respectivamente. 79

80 Ilustración 45: Iconos que representan el origen del vídeo. Para conseguir esto debemos, en primera instancia, determinar en el momento de la creación del vídeo el origen de éste, analizando la URL. Más tarde en el gestor de vídeos utilizamos la propiedad styleclass en la columna apropiada de esta forma: <p:column id="columnatipo" width="32" styleclass="url-icon-#{video.tipourl}" > </p:column> En la hoja de estilos de la aplicación especificamos clases CSS para cada uno de los vídeos, ( url-icon-youtube, url-icon-vimeo y url-icon-remote ) estableciendo en cada una la imagen correspondiente. Cuando el usuario selecciona una fila se muestra un diálogo (componente de Primefaces). En este podemos configurar los datos del vídeo (el usuario debe tener en cuenta que al cambiar un vídeo por otro distinto las referencias a este perderían la coherencia) y previsualizarlo, así como eliminar el vídeo seleccionado (eliminar un vídeo conlleva eliminar las anotaciones asociadas al mismo, asi como los momentos (clase FragmentoVideo)). 80

81 Ilustración 46 Gestor de vídeos, editando un vídeo. Podemos crear un nuevo vídeo desde el menú Vídeo Nuevo Vídeo. Se mostrará un diálogo como el siguiente. Ilustración 47: Gestor de vídeos, añadiendo un nuevo vídeo. Para poder añadir un nuevo vídeo debemos comprobar antes que ese vídeo está disponible, en caso contrario no permitir la creación. En este paso también se recopila información sobre el vídeo, concretamente la duración del mismo, cosa que se realiza de espaldas al usuario. Al escribir una nueva URL automáticamente se dispara un evento que ejecuta un código Javascript que intenta cargar el vídeo, en caso de éxito se modifica el valor de un campo oculto presente en el formulario usando el componente JSF InputHidden. Este campo tiene asociado un validador personalizado (controlador.validadores.videovalidator.java) 81

82 que fallará en caso de que el campo oculto tenga su valor inicial por defecto (0.0) pues esto querrá decir que no se ha cargado correctamente. También lo hará si alguno de los campos del formulario están vacíos EDITOR DE DOMINIOS Y ANOTACIONES (FUNCIONALIDADES COMUNES) En esta sección veremos los detalles técnicos más relevantes utilizados en la creación de los editores tanto de dominios como de anotaciones Layout y gestión del espacio de trabajo En las siguientes imágenes vemos como la disposición de las distintas regiones es muy similar. Ilustración 48: Creador de anotaciones y momentos, secciones. 82

83 Ilustración 49: Editor de dominios, secciones. Observamos una pestaña entre la sección 1 y las secciones 2 y 3. La misión de esta pestaña es ocultar la sección superior cuando ya no se está trabajando en esa sección, para dejar más espacio disponible, esto lo conseguimos gracias al método slidetoggle de jquery. Sería algo así: $( "#seccionsuperior" ).slidetoggle( "slow"); Siendo seccionsuperior el id del elemento HTML que contiene a la sección superior. Marcado con el número 3 vemos el lienzo. En este lienzo se desarrolla todo el proceso de definición de dominios y de anotaciones. Hay unas pequeñas diferencias entre el proceso de definición de dominios y el de definición de anotaciones que veremos en los siguientes apartados. En general el lienzo trabaja con una serie de cajas que representan los conceptos (en el editor de dominios) o instancias de estos (en el editor de anotaciones). En adelante no haremos distinción entre estos a no ser que sea necesario por simplicidad, pero entendemos que son conceptos cuando trabajamos con dominios e instancias de estos cuando lo hacemos con anotaciones. El usuario puede mover por el lienzo los conceptos y crear relaciones entre estos. Esta acción provocará que se muestre un diálogo para determinar información adicional de la relación. 83

84 Implementación de las cajas que representan los conceptos En la siguiente imagen podemos ver como en cada caja de concepto aparecen 3 iconos. Estos iconos tienen las funciones de eliminar el concepto, editarlo o mostrar sus atributos respectivamente. Mientras los 2 primeros son botones el tercero realiza su acción al pasar el ratón por encima mostrando una capa flotante con la información. Esto lo hacemos gracias al componente de Primefaces overlaypanel Conexión de conceptos, jsplumb Ilustración 50: Editor de dominios, capa flotante informativa. Ilustración 51: Lienzo, creación de una relación. Otra de las características que podemos ver en la imagen anterior es la de poder conectar las cajas mediante flechas para reflejar la idea de relación entre dos conceptos. Esto lo conseguimos gracias a la librería Javascript JsPlumb. Esta librería nos define una serie de eventos de conexión que utilizamos para capturar el momento en que se inicia y se termina la conexión. Cuando se dispara este evento nos comunicamos directamente con el servidor 84

85 mediante JavaScript para comprobar la validez de la conexión intentada. En caso de no ser válida se lanzará un mensaje de sistema creando un FacesMessage que será visualizado mediante el componente de Primefaces Messages. Para realizar esta conexión utilizamos el componente de Primefaces RemoteCommand. La diferencia en la creación de referencias entre el editor de anotaciones y el editor de dominios es que en el editor de anotaciones se pide una cadena de texto para la nueva referencia mientras que en el editor de anotaciones se ofrece una lista con las opciones posibles según las referencias definidas en el dominio utilizado. Cuando en el editor de anotaciones creamos una referencia se comprueba que exista en el dominio utilizado una referencia entre el concepto origen y el concepto destino y que no se haya utilizado ya para ese mismo para concepto origen y concepto destino Gestión de la posición relativa de los conceptos en el lienzo. Otro detalle técnico relevante del lienzo consiste en la gestión de la posición de los elementos. Puede parecer trivial pero no lo es y hay que tener en cuenta ciertos detalles si no queremos tener problemas. La idea básica sería la siguiente. Almacenamos junto con el concepto la posición relativa al origen del lienzo. En el caso de la imagen vemos que Coche se encuentra en la posición teórica (5,4). Ilustración 52: Lienzo, posicionamiento de cajas. Al modificar la posición de las cajas en el lienzo, notificamos el cambio al servidor gracias al uso del componente de Primefaces RemoteCommand. Al dispararse el evento Drop, es decir, al soltar la caja después de haberla desplazado, es el momento en que nos comunicamos con el método de callback definido en el servidor gracias a 85

86 remotecommand, al cual le pasamos la nueva posición del elemento. Aspectos a tener en cuenta: en HTML, para posicionar un elemento respecto a su contenedor el contenedor debe tener definido el atributo position. De no ser así se asume el navegador como origen de coordenadas. Por último, el elemento a posicionar nos interesa que tenga el atributo position con valor absolute Atributos data-x para la gestión de información de utilidad, oculta al usuario. Otro detalle interesante es una comprobación que se realiza cuando superamos los límites del lienzo que, automáticamente, recoloca las cajas que queden fuera de los límites. Para realizar esto identificamos las cajas utilizando atributos data-x de HTML de forma que posteriormente podamos seleccionar las cajas con jquery utilizando los selectores apropiados. Luego calculamos el ancho del lienzo y recolocamos todas aquellas cajas que se encuentren situadas más allá del límite derecho del lienzo. Para las interacciones del lado del cliente es necesario trasladar cierta información del servidor al cliente así como del cliente al servidor. Para esto hacemos uso de una nueva característica que incorpora HTML5 que son los atributos data-x. El desarrollador puede escribir etiquetas HTML acompañadas de meta-información. Para esto debe definir atributos con la siguiente sintaxis: data- más el nombre de atributo que se le quiera dar. Veamos un ejemplo. En el siguiente fragmento de código vemos el código JSF que genera las cajas de los conceptos sobre el lienzo. <div id="main"> <ui:repeat var="mconcepto" value="#{mmodelobean.mmsmconceptos}"> <div data-draggable="box" style="position:relative; top:#{mconcepto.posicion.y}px; left:#{mconcepto.posicion.x}px;" class="w" id="node#{mconcepto.idtemporal}" data-idtmp="#{mconcepto.idtemporal}" > <h3 data-draggable="title" data-idtmp="#{mconcepto.idtemporal}" > #{mconcepto.nombre} </h3> <div data-idtmp="#{mconcepto.idtemporal}" class="deleteelement #{mmodelobean.disableclass}" ></div> <div data-idtmp="#{mconcepto.idtemporal}" class="editelement" ></div> <p:graphicimage id="info" value="images/info32x32.png" width="32px" height="32px" styleclass="infoelement"/> <div class="ep"></div> </div> </ui:repeat> </div> Veamos una simplificación del código HTML generado en cada una de las cajas que representan los conceptos: 86

87 <div data-draggable="box" style="position:relative; top:47.0px; left:24.0px;" data-idtmp="9" > <h3 data-draggable="title" data-idtmp="9"> persona </h3> <div data-idtmp="9" class="deleteelement disableinput"></div> <div data-idtmp="9" class="editelement"></div> <img src="images/info32x32.png" alt="icono de información"> <div class="ep"></div> </div> Vemos que utiliza dos atributos personalizados, data-draggable y data-idtmp. La utilidad del atributo personalizado data-idtmp es la de saber en el momento de comunicarse con el servidor como identificar el concepto que se está tratando. Si queremos eliminar o editar un concepto, el servidor debe saber de qué concepto se trata. Por regla general un componente JSF se encargaría de hacer esto de forma transparente al programador. En nuestro caso al utilizar un código personalizado perdemos estas facilidades que nos aporta JSF y debemos programarlo todo de manera explícita. En la siguiente imagen vemos la representación gráfica del anterior código. Ilustración 53: Concepto, representación gráfica en el lienzo de trabajo. Desde Javascript, mediante jquery podemos acceder a la información de la siguiente forma (también se puede realizar sin necesidad de librerías, directamente con Javascript) : $("#main div[data-draggable='box']").each( function(index,element){ console.log($(element).attr("data-idtmp")); }); El siguiente código realiza lo siguiente: Acceder a todas las etiquetas <div> contenidas dentro del contenedor del lienzo identificado 87

88 con el identificador main que tengan definidas el atributo data-draggable y cuyo valor sea box, es decir, estos son las etiquetas <div> que delimitan las cajas que representan los conceptos. $("#main div[data-draggable='box']") El método each() iteraría entre todos los resultados y podríamos acceder al elemento HTML. Finalmente mediante el método attr() podemos acceder al valor del atributo data-idtmp que contiene el identificador del concepto, necesario para acceder al concepto en el lado del servidor Funcionalidad simple de restablecer cambios. La herramienta trabaja en todo momento, tanto el caso de la definición de dominios como en el de la definición de anotaciones con datos temporales. Hasta que el usuario no selecciona la opción de menú Archivo Guardar, las modificaciones realizadas en un dominio o anotación no son persistidas en base de datos. En cualquier momento el usuario puede descartar los cambios realizados desde la última vez que utilizó la opción de guardar. Esta funcionalidad presenta una dificultad a la hora de ser implementada. Cuando creamos un objeto hasta que este no es persistido no dispone de un identificador único, ya que hemos delegado la responsabilidad de generar identificadores únicos a la api de persistencia (JPA). En todas las entidades relevantes del modelo definimos un identificador de la = GenerationType.AUTO) private Long id; Esto supone un problema ya que tenemos por un lado aquellos conceptos que ya fueron guardados con su identificador, pero los conceptos creados posteriormente a la última vez que se guardaron los cambios no disponen de este identificador (su valor es nulo). Necesitamos de algún mecanismo para poder identificar código de lado del cliente (por ejemplo código HTML que muestra una caja por cada concepto) con objetos de lado del servidor. Para conseguir esto creamos un Managed Bean de sesión que otorgará consecutivamente números únicos (únicos dentro de una misma sesión) para ser usados como identificadores. 88

89 public class GeneradorIds implements Serializable{ private Long idtemp; } public GeneradorIds(){ idtemp=1l; } public Long getnextidtmp(){ return idtemp++; } Cuando se empieza a trabajar con un dominio o una anotación se generan identificadores temporales para todos los conceptos, propiedades y referencias que contenga y son estos identificadores los que realmente utilizaremos en la aplicación, tanto para comunicarnos entre el cliente y el servidor como para acceder desde el servidor al catálogo en búsqueda de datos. De esta forma solucionamos el problema de la carencia de identificador que comentamos en los párrafos anteriores. Finalmente la funcionalidad de deshacer radica en que trabajamos con un objeto definido en el Managed Bean que gestiona, en un caso el dominio (MetamodeloBean) y en otro la anotación (ModeloBean). Cuando el usuario utiliza el comando restaurar cambios lo que se hace es restaurar los valores que todavía permanecen intactos en base de datos sobre el objeto con el que trabajamos. No hay una funcionalidad de deshacer tradicional que ofrece un mecanismo para deshacer pasos individuales sino que únicamente se vuelve a la versión guardada IMPLEMENTACIÓN DEL EDITOR DE DOMINIOS En esta sección veremos detalles interesantes no contemplados en el apartado anterior específicos del editor de dominios. El editor de dominios dispone en su sección superior de una tabla (Datatable) donde podemos seleccionar y buscar dominios creados anteriormente para editarlos. 89

90 Ilustración 54: Editor de dominios Creación y edición de conceptos La sección inferior en el editor de dominios y en el editor de anotaciones es similar. En la barra lateral vemos la presencia de un botón, Crear concepto, que muestra un diálogo con un formulario para crear un nuevo concepto y colocarlo en el lienzo para poder interactuar con él. Ilustración 55: Editor de dominios, creación de un nuevo concepto del dominio. 90

91 Un concepto de un dominio cuenta con un atributo nombre y una colección de propiedades. Estas propiedades constan de un nombre y de un tipo. Un dominio especifica las reglas a la hora de crear anotaciones sujetas a ese dominio. Los conceptos definidos en un dominio especifican los atributos disponibles para rellenar posteriormente en una anotación que esté sujeta a ese dominio y también determinan el tipo de componente gráfico a utilizar para la introducción de datos así como el validador que controlara la introducción correcta de datos. En la imagen anterior podemos observar los tipos soportados por la aplicación. De manera sencilla se pueden añadir nuevos tipos como veremos en la sección 5.9. Implementación de nuevos tipos de datos IMPLEMENTACIÓN DEL EDITOR DE ANOTACIONES En este apartado veremos detalles interesantes no contemplados en la sección 5.6. Implementación del editor de dominios y anotaciones (funcionalidades comunes) específicos del editor de anotaciones. En la sección superior tenemos a la izquierda una tabla para seleccionar el vídeo con el que trabajar y bajo esta, otra para seleccionar anotaciones realizadas anteriormente. A través del menú, teniendo seleccionado un vídeo, podremos crear una nueva anotación seleccionando previamente el dominio por el cual se regirá la anotación. En la parte derecha de la sección superior tenemos el reproductor de vídeo donde podemos visualizar el vídeo y seleccionar el rango de tiempo de la anotación. En la sección inferior tenemos de forma similar al editor de dominios una barra lateral y un lienzo en el que se desarrolla el proceso de anotación. Veremos aquellos detalles que lo diferencian del editor de dominios tanto en la función de la barra lateral como del lienzo. 91

92 Ilustración 56: Creador de anotaciones y momentos Implementación del editor de anotaciones (lienzo y barra lateral) El comportamiento del editor de anotaciones en esta sección superior con respecto al editor de dominios presenta algunas diferencias que pasamos a comentar. La primera diferencia la vemos en la barra lateral, donde en vez de un botón para crear conceptos, vemos diversas cajas, una por cada concepto definido en el dominio seleccionado. El usuario simplemente debe arrastrar el concepto del cual desea crear una instancia al lienzo para crear las instancias de los conceptos. Una vez arrastrados al lienzo los conceptos vemos la siguiente la diferencia. Si al editar o crear un concepto en el editor de dominios el usuario debía introducir un nombre de concepto y una colección de pares nombre de propiedad y tipo de dato de la propiedad en el editor de anotaciones vemos que no se le da ningún nombre puesto que el nombre es el del concepto asociado (definido en el dominio). Sí que se le añade un atributo llamado etiqueta para poder diferenciarlo en el lienzo de otras instancias del mismo concepto. 92

93 Ilustración 57: Creador de anotaciones, lienzo de trabajo. Etiquetas de conceptos. Otra diferencia se encuentra en la inserción de datos en las propiedades. Al usuario se le muestra un formulario para que introduzca, además de una etiqueta para identificar al concepto en el lienzo, los datos relativos a las propiedades definidas para ese concepto en el dominio asociado a la anotación. Se mostrará un componente gráfico para la inserción del dato distinto y se aplicaran diferentes reglas de validación dependiendo del tipo definido en el dominio. Ilustración 58: Creador de anotaciones, distintos componentes de entrada de datos. 93

94 Ilustración 59: Creador de anotaciones, componente de entrada de datos de tipo fecha Implementación del editor de anotaciones (reproductor de vídeo) Una de las funcionalidades que ofrece la aplicación a la hora de crear anotaciones es la capacidad de reproducir y desplazarse por el vídeo objeto de la anotación, así como de poder seleccionar un rango de tiempo al que la anotación se refiere. Para implementar el reproductor de vídeo como ya vimos en el capítulo 4. Diseño de la solución utilizamos la librería Javascript PopcornJs. Esta librería nos proporciona una serie de métodos para interactuar con el vídeo (reproducir, pausar, modificar el volumen ). En la siguiente imagen podemos ver el reproductor de vídeo. Está formado por dos secciones. En la parte superior tenemos la imagen y en la parte inferior los controles de reproducción, de selección del rango temporal de la anotación así como un campo con el título de la anotación (campo editable al pulsar sobre él gracias al uso del componente de Primefaces Inplace ). 94

95 Ilustración 60: Creador de anotaciones y momentos, reproductor de vídeo con controles para seleccionar momentos y gestionar la reproducción. Para la selección del rango temporal disponemos tanto de una barra de desplazamiento (componente de Primefaces Slider) con los dos topes del rango temporal (inicio y fin) como de unos botones para realizar un ajuste fino (un segundo en cada pulsación) de estos topes (situados abajo a la derecha y etiquetados como inicio y fin). Junto a los indicadores de tiempo del rango temporal, a la izquierda se encuentra un contador de tiempo que indica el tiempo de reproducción Gestión eficiente de la interfaz de usuario, evitar actualizaciones innecesarias en el servidor. Pese a que los indicadores de inicio y fin del rango temporal están ligados a propiedades de un Managed Bean en el lado del servidor cuando se está realizando el movimiento de los topes se actualiza visualmente su valor mediante Javascript pero no se modifica el valor realmente hasta que no se detenga el desplazamiento. Esto es así para evitar comunicaciones innecesarias con el servidor Control de reproducción entre topes del rango temporal Cuando el usuario utiliza el botón reproducir ( ) se inicia la reproducción desde el inicio del rango seleccionado y finaliza cuando alcanza el tope final. Necesitamos saber cuándo hemos alcanzado el tope del rango temporal para detener la reproducción. El API Javascript de HTML5 define un evento que podría servir para implementar esta funcionalidad. Este evento es el evento timeupdate y Popcorn Js como hace con otros eventos, métodos y propiedades provenientes de la api de HTML5 parece que los implementa. Digo parece 95

96 porque aunque en la documentación aparece como parte de PopcornJs o por lo menos no lo aclara, en realidad lo que se muestra es como utilizar el evento de la api de HTML5 sobre la etiqueta vídeo. Donde está el problema? Queremos reproducir de manera indistinta vídeos de cualquier fuente. PopcornJs cuando reproduce vídeo de Youtube o de Vimeo utiliza el reproductor embebido de estos portales de vídeo. Ya no se dispone de una etiqueta <video> como cuando la url del vídeo es directa sino que se tiene un código HTML contenido dentro de una etiqueta <iframe>. La solución adoptada pasa por el uso del método de Javascript setinterval(método, tiempo de espera). Este método ejecuta el método pasado por parámetro cada vez que transcurre el tiempo de espera pasado por parámetro. Cuando se desea interrumpir la ejecución se puede usar el método clearinterval(). Durante la ejecución de este método simplemente comprobamos que no hemos superado el punto del vídeo marcado como tope final, en cuyo caso se pausa el vídeo IMPLEMENTACIÓN DE NUEVOS TIPOS DE DATOS La herramienta permite la introducción de datos de distintos tipos como valor de las propiedades de los conceptos. La herramienta soporta actualmente datos de texto simple, texto multilínea, números enteros, números reales, valores booleanos y fechas. En las siguientes líneas veremos un procedimiento general para dar soporte a nuevos tipos de datos. En el futuro podríamos considerar la posibilidad de añadir un nuevo tipo de datos, por ejemplo, un tipo de dato lugar donde el usuario seleccionaría una posición de un mapa o un tipo de dato enumerado donde el usuario introduciría una lista de valores en la definición del dominio que posteriormente, en la creación de la anotación se presentaría un listado con las opciones introducidas en la definición del tipo para que seleccione una. Veamos el proceso a través de la creación del tipo de datos número real. En amarillo y subrayado aparece resaltado el código a añadir. Paso 1. Introducimos un nuevo tipo de dato en el enumerado modelo.tipodedato. 96

97 package modelo; import java.util.arraylist; import java.util.list; public enum TipoDeDato { TEXT ("java.lang.string","texto"), BOOLEAN ("java.lang.boolean","verdadero o falso"), LONG ("java.lang.long","número entero"), DOUBLE ("java.lang.double","número real"), DATE ("java.util.date","fecha"), LONG_TEXT ("java.lang.string","texto largo") ; private final String texto; private final String etiqueta; private TipoDeDato(String texto,string etiqueta) { this.texto = texto; this.etiqueta=etiqueta; } public String gettexto() { return texto; } public String getetiqueta() { return etiqueta; } public String getclave(){ return this.name(); } public boolean equalsname(string othername){ return (othername == null)? false:texto.equals(othername); } public String tostring(){ return texto; } } Paso 2. Crear un método en controlador.backingbeans.conceptobean que determine cuando un componente concreto debe ser mostrado y cuando no. La nomenclatura utilizada en el nombre del método es rendered[tipodedato]widget y el valor devuelto por este método lo utilizamos en la propiedad rendered del componente que utilizaremos en el siguiente paso. 97

98 @ManagedBean (name= public class ConceptoBean implements Serializable {... public boolean renderedcalendarwidget(propiedad p){ return (p.getmpropiedad().gettipo()==tipodedato.date); } public boolean renderedbooleanwidget(propiedad p){ return (p.getmpropiedad().gettipo()==tipodedato.boolean); }... public boolean rendereddoublewidget(propiedad p){ return ((p.getmpropiedad().gettipo()==tipodedato.double)); } } Paso 3. Añadir en el creador de anotaciones el componente para la introducción del nuevo tipo de dato. Esto nos permite mostrar el componente apropiado en cada caso y no generar el resto. Si es necesario se define un comportamiento de validación nuevo para el nuevo tipo de dato en el validador controlador.validadores.tipodedatovalidator. En este caso lo identificaremos con la cadena real. Utilizaremos 3 etiquetas dentro del cuerpo de la etiqueta del componente de entrada utilizado que en este caso será inputtext. Estas etiquetas son p:ajax, para que la validación se produzca al introducir el dato, f:validator, para definir el validador personalizado utilizado y f:attribute para mandar un parámetro al validador y poder discriminar el tipo de dato a validar. 98

99 <h:datatable id="inputspropiedad" value="#{conceptobean.conceptoseleccionado.propiedades}" var="propiedad" columnclasses="labelcolumn,inputcolumn"> <h:column > <h:outputlabel value="#{propiedad.mpropiedad.nombre}" /> </h:column> <h:column > <p:inputtext id="inputtext" rendered="#{conceptobean.renderedtextwidget(propiedad)}" value="#{propiedad.valor}" styleclass="propiedadesstringwidget"/> <p:inputtextarea id="inputlongtext" rendered="#{conceptobean.renderedlongtextwidget(propiedad)}" value="#{propiedad.valor}" styleclass="propiedadesstringwidget" /> <p:inputtext id="inputlong" rendered="#{conceptobean.renderedlongwidget(propiedad)}" value="#{propiedad.valor}" > <p:ajax /> <f:validator validatorid="tipodedatovalidator" /> <f:attribute name="tipo" value="entero" /> </p:inputtext> <p:inputtext id="inputdouble" rendered="#{conceptobean.rendereddoublewidget(propiedad)}" value="#{propiedad.valor}" > <p:ajax /> <f:validator validatorid="tipodedatovalidator" /> <f:attribute name="tipo" value="real" /> </p:inputtext> <p:calendar id="inputdate" rendered="#{conceptobean.renderedcalendarwidget(propiedad)}" value="#{propiedad.valor}" /> <p:selectbooleancheckbox id="inputboolean" rendered="#{conceptobean.renderedbooleanwidget(propiedad)}" value="#{propiedad.valor}"/> </h:column> </h:datatable> 99

100 Paso 4. Añadir un caso nuevo para controlar la validez del nuevo tipo de dato y personalizar el mensaje de error a mandar. package public class TipoDeDatoValidator implements Validator public void validate(facescontext context, UIComponent component, Object value) throws ValidatorException { String valor = (String) value; boolean entero = ((String) component.getattributes().get("tipo")).equals("entero"); boolean real = ((String) component.getattributes().get("tipo")).equals("real"); if (entero) { try { Long val = Long.parseLong(valor); } catch (NumberFormatException e) { validationerrormessage("el formato de número introducido no corresponde con un número entero","formato inválido, no es un entero.");} } else if (real) { try { Double val = Double.parseDouble(valor); } catch (NumberFormatException e) { validationerrormessage( "El formato de número introducido no corresponde con un número real","formato inválido, no es un real."); } } } private void validationerrormessage(string message, String title) { FacesMessage msg = new FacesMessage(title, message); msg.setseverity(facesmessage.severity_error); throw new ValidatorException(msg); } } Podría ser necesario un paso adicional para otros nuevos tipos de datos como en el ejemplo anteriormente mencionado del enumerado puesto que se debería poder determinar en el editor de dominios las opciones a mostrar. Esta pequeña guía no deja de ser una serie de recomendaciones generales, la herramienta no restringe ningún tipo de ampliación en este sentido. 100

101 6. CONCLUSIONES Y VÍAS FUTURAS 6.1. CONCLUSIONES Se ha conseguido desarrollar una herramienta que cumple con los objetivos iniciales del proyecto: implementar una aplicación que permita la edición visual de dominios y anotaciones sobre momentos de video que usan dichos dominios. Un aspecto a tener en cuenta es que el desarrollo del proyecto no fue planteado desde el punto de vista de obtener una aplicación final, sino una prueba de concepto. La aplicación permite la creación de metadatos para ser usados en fragmentos audiovisuales, como se estableció en los objetivos de la primera fase. Sin embargo el proyecto principal abarca una mayor envergadura de la que se requiere en un Trabajo Fin de Grado, puesto que se hace necesario explotar esta información mediante el uso de un potente motor de búsquedas o la exportación de datos a aplicaciones de terceros (servicios de la nube). Todas estas características no implementadas serán mencionadas en la sección de vías futuras. La herramienta ofrece al usuario un proceso de creación (de especificación de dominios y de creación de anotaciones) visual, sencillo e intuitivo, permitiendo a los expertos del dominio definir dominios y anotaciones ajustadas a estos dominios (anotaciones que cumplen las restricciones definidas en el dominio asociado) contextualizadas temporalmente dentro de un vídeo. Además, el trabajo aquí presentado requirió un análisis previo de las herramientas que actualmente presentan ciertas similitudes con los objetivos marcados para esta primera fase del proyecto. En dicha sección 3. Estado del arte, vemos como algunas herramientas abordan el problema del coste de producir las anotaciones (coste humano): se trata de una tarea laboriosa y por lo tanto resulta imprescindible ofrecer una herramienta que cualquiera persona con conocimientos básicos pueda utilizar (solamente se deberían precisar adicionalmente conocimientos sobre el dominio de trabajo). Es muy común en herramientas web en las que se crea contenido el volcar en los usuarios el esfuerzo en la creación del contenido. En este sentido, la herramienta desarrollada cuida este detalle siendo más sencilla de utilizar que muchas de las analizadas, y que están enfocadas a un tipo de usuario específico. La solución propuesta ha sido adoptada desde un enfoque web, ofreciendo una mayor compatibilidad con dispositivos y sistemas operativos (algo que difícilmente se puede conseguir con herramientas de escritorio, normalmente diseñadas para un tipo de dispositivo 101

102 y sistema operativo concreto). Otra de las ventajas de tratarse de una aplicación web es que la distribución de actualizaciones es transparente al usuario (más bien la aplicación se actualiza en el servidor pero el usuario solo accede a esta). Finalmente el tratarse de una aplicación web, que reside en un servidor que comparten los usuarios, facilitaría la implementación de un flujo de trabajo colaborativo en (como posible mejora futura) de la aplicación, que consistiría en la adición a la herramienta de usuarios y roles, y la de permitir distribuir las tareas de edición de dominios y creación de anotaciones sobre momentos de vídeo VÍAS FUTURAS Como se indicó en la presentación del trabajo, el proyecto acometido en el ámbito del TFG constituye una primera fase de un proyecto de mayor envergadura. Los objetivos de la primera fase se cumplieron en su totalidad, aunque durante la realización de los mismos, tuvieron que, en ocasiones, ser adaptados. Así por ejemplo, una primera adaptación consistió en descartar el uso de una base de datos nosql para la persistencia de la aplicación. Las primeras opciones fueron adoptar Cassandra o MongoDB como servidores de datos nosql. Sin embargo, la complejidad de adoptar este enfoque (en algunos casos por la inmadurez de los servidores y sus apis de comunicación) hizo que nos acabáramos decantando por un modelo de datos relacional clásico. No obstante, la persistencia de la aplicación se ha implementado usando el patrón DAO por lo que sustituir el paradigma de persistencia no debe suponer un alto impacto en la herramienta. Otra mejora importante a incluir en la herramienta es la creación de un lenguaje de consulta, que permita realizar búsquedas de fragmentos de vídeo utilizando como elementos de consulta la presencia o no de conceptos, la existencia de relaciones entre estos (es decir, la existencia de ciertas tripletas sujeto-verbo-objeto) o el valor determinado de alguna de sus propiedades. El usuario debería poder hacer consultas similares a las que ofrece el lenguaje de consulta SPARQL 57 : MUESTRA FragmentoDeVideo (o Vídeo o Anotación) DE dominiodeportesdemotor DONDE existaelpredicado (persona,conduce,coche) Y ( persona.nombre = Fernando Alonso O persona.nombre = Lewis Hamilton )

103 Este lenguaje de consulta podría ser textual como en el ejemplo anterior o gráfico (u ofrecer ambos). Daría como resultado un listado para poder acceder a los momentos anotados que cumplan con los criterios de consulta. Otra posibilidad sería exportar los datos (o partes de la base de datos) a motores de búsqueda como Apache Lucene o similares. Otra mejora (más que mejora sería una característica imprescindible de una aplicación final que, por tratarse de un prototipo no se encuentra presente) sería la gestión de usuarios. La herramienta actualmente no dispone de sistema de control de usuarios. Cualquier persona que acceda a la dirección web de la aplicación y que tenga acceso a esta puede manipular la herramienta. La herramienta carece de control de usuarios y roles (usuarios que definen dominios, usuarios que colaboran en la creación de anotaciones, etc.). Una forma sencilla de añadir esta gestión de usuarios y evitar la necesidad de un registro por parte de los usuarios es haciendo uso de OpenID 58 un estándar de identificación digital descentralizado. En los sitios que soporten OpenID, los usuarios no tienen que crearse una nueva cuenta de usuario para obtener acceso. En su lugar, solo necesitan disponer de un identificador creado en un servidor que verifique OpenID. A raíz de la mejora de la existencia de usuarios aparece la posibilidad de realizar el trabajo de manera colaborativa. Es decir, permitiendo que distintos usuarios puedan colaborar en la creación y edición de anotaciones y dominios, tanto en de forma asíncrona como en tiempo real. En este punto merece la pena destacar la existencia de PFP 59 (Primefaces Push) que trabaja sobre Atmosphere 60, un framework para la creación de aplicaciones cliente servidor en tiempo real para Java que soporta WebSocket 61 y dispone de fallbacks para distintos navegadores de diferentes versiones. Es decir, da soporte para navegadores antiguos que no soportan WebSocket. Mediante el uso de este framework se podrían crear funcionalidades como la de trabajar en tiempo real sobre un mismo dominio o anotación mientras ambos usuarios ven los cambios de los demás en tiempo real. O crear un sistema de mensajería instantánea dentro de la aplicación. Cuando sobre un dominio creado se crean anotaciones, se bloquean en el editor de dominos algunas opciones de edición del dominio para prevenir incongruencias entre las anotaciones ya creadas y los nuevos cambios del dominio (ya que siempre se deben cumplir las https://github.com/atmosphere/atmosphere

104 restricciones que define el dominio sobre las anotaciones asociadas). Se ha tomado este enfoque por simplicidad pero se podría optar por realizar una serie de operaciones por defecto intentaran adaptar todas las anotaciones realizadas previamente para verificar el nuevo estado del dominio modificado. Por ejemplo, si una propiedad se define como tipo de dato Número Entero, se crean anotaciones asociadas a ese dominio, se inserta un valor 34 en esa propiedad en una anotación y posteriormente modificamos el tipo de dato en el editor de dominios y lo establecemos a Número Real. El proceso sería convertir ese valor entero 34 en En otros tipos de cambios se podría tomar otro tipo de decisiones como establecer un valor a nulo u otras acciones. De esta forma no necesitaríamos bloquear un dominio al crear anotaciones asociadas a ese dominio para mantener la congruencia de estas anotaciones con sus dominios. En la segunda fase del proyecto se plantea explotar los datos registrados en la herramienta mediante la exportación de los mismos a servicios de terceros (en muchos casos, herramientas y servicios web). Se plantea la implementación de esta fase desde un enfoque MDE (Model Driven Engineering, haciendo uso de modelos y transformaciones de modelos). Así pues habría que exportar los dominios a metamodelos (Ecore por ejemplo) y las anotaciones a modelos conformes a los anteriores metamodelos. Para ello se utilizarían lenguajes texto a modelo. Una vez se dispone de la información en el espacio tencológico del Modelware, exportar los datos a servicios de terceros requiere completar la cadena de transformaciones de modelos con transformaciones modelo a modelo y modelo a texto. Para simplificar esta tarea de interoperabilidad de servicios, se usará el enfoque MDI (Model Driven Interoperability) basado en el uso de modelos pivote y mappings semánticos [12] [13]. 104

105 7. GLOSARIO DE TÉRMINOS Y ACRÓNIMOS Toma (shot): En el mundo del cine una toma la constituyen todos los fotogramas que transcurren desde que la cámara empieza a grabar hasta que para. Fotograma (frame): Imagen estática, parte elemental en la que puede ser dividido una secuencia de vídeo. Región: Zona delimitada dentro de una imagen estática. En herramientas de anotación de vídeo se utiliza este término al hablar de localización espacial de la anotación. Región en movimiento: Se trata de una región que evoluciona a lo largo del transcurso de un vídeo tanto en forma como en tamaño y posición. Algunas herramientas de anotación de vídeo aportan esta característica junto con sistemas de interpolación automáticos para evitar al usuario establecer la forma, posición y tamaño en cada fotograma. Ontología: El término ontología en informática hace referencia a la formulación de un exhaustivo y riguroso esquema conceptual dentro de uno o varios dominios dados; con la finalidad de facilitar la comunicación y el intercambio de información entre diferentes sistemas y entidades. Una ontología no es más que un documento en un lenguaje formal que describe un dominio. De manera que un ordenador pueda procesarlo, es decir, puede realizar razonamiento automático. RDF: RDF es un modelo estándar para el intercambio de datos en la Web. RDF tiene características que facilitan la fusión de datos incluso si los esquemas subyacentes difieren, y soporta específicamente la evolución de esquemas con el tiempo sin necesidad de que todos los consumidores de datos tengan que cambiar. 62 RDFS: Esquema RDF proporciona un vocabulario de modelado de datos para datos RDF. RDF Schema es una extensión del vocabulario básico RDF. 63 OWL: El W3C Web Ontology Language (OWL) es un lenguaje de la Web Semántica diseñado para representar el conocimiento rico y complejo de cosas, grupos de cosas, y relaciones entre cosas. OWL es un lenguaje computacional basado en la lógica de tal manera que el conocimiento expresado en OWL puede ser explotada por los programas de ordenador, por ejemplo, para verificar la consistencia de ese conocimiento o para hacer

106 explícito el conocimiento implícito. Documentos OWL, conocidos como ontologías, pueden ser publicados en la World Wide Web y puede referirse o ser derivados desde otras ontologías OWL. OWL es parte de la pila de tecnologías de Web Semántica del W3C, que incluye RDF, RDFS, SPARQL, etc. 64 MPEG7: MPEG-7 estándar para la descripción de contenido multimedia. Fue estandarizado en la norma ISO / IEC Esta descripción se asocia con el contenido en sí, para permitir la búsqueda rápida y eficaz del material que es de interés para el usuario. MPEG-7 se llama formalmente Multimedia Content Description Interface. Por lo tanto, no es un estándar que trata de la codificación real de imágenes en movimiento y audio, como MPEG-1, MPEG-2 y MPEG-4. Utiliza XML para almacenar metadatos y se puede apuntar a intervalos de tiempo con el fin de etiquetar eventos particulares, o sincronizar la letra de una canción, por ejemplo.. 65 Se trata de un estándar a tener en cuenta en la segunda fase del proyecto (podría tratarse de uno de los casos de exportación junto con OWL o RDFs). Modelo: Un modelo es una simplificación de la realidad, como resultado de un proceso de abstracción, que ayuda a comprender y razonar sobre esa realidad. Un modelo oculta ciertos detalles para mostrar aquellos relevantes para cierto propósito. Los modelos son expresados mediante alguna notación que depende de su propósito y destinatarias [14]. Metamodelo: El prefijo griego meta significa en castellano sobre, o de nivel superior. Un metamodelo se trata por tanto del modelo de un modelo. WYSIWYG: WYSIWYG es el acrónimo de What You See Is What You Get (en español, "lo que ves es lo que obtienes"). Se refiere a editores de documentos (HTML, texto con formato, etc.) que muestran el resultado final conforme el usuario va creando o editando un documento. NoSQL: Es una clase de sistemas de gestión de bases de datos que difieren del modelo clásico del sistema de gestión de bases de datos relacionales (RDBMS) en aspectos importantes, el más destacado que no usan SQL como el principal lenguaje de consultas y que los datos almacenados no requieren estructuras fijas como tablas. MDE: Ingeniería orientada a modelos (MDE) es un paradigma de desarrollo de software que se centra en la creación y explotación de modelos de dominio es decir, representaciones https://en.wikipedia.org/wiki/mpeg-7 (traducción) 106

107 abstractas de los conocimientos y actividades que rigen un dominio de aplicación particular BIBLIOGRAFÍA [1] A. Smeulders, M. Worring, S. Santini y A. Gupta, «Content-based image retrieval at the end of the early years,» Pattern Analysis and Machine Intelligence, IEEE Transactions on, vol. 22, pp , [2] S. Dasiopoulou, E. Giannakidou, G. Litos, P. Malasioti y I. Kompatsiaris, «A Survey of Semantic Image and Video,» de Knowledge-Driven Multimedia Information Extraction and Ontology Evolution, 2011, pp [3] C. Vondrick, D. Patterson y D. Ramanan, «Efficiently Scaling up Crowdsourced Video Annotation,» International Journal of Computer Vision, vol. 101, nº 1, pp , [4] O. Aubert y P. Yannick, «Advene: active reading through hypervideo,» de HYPERTEXT '05 Proceedings of the sixteenth ACM conference on Hypertext and hypermedia, 2005, pp [5] «ELAN - Linguistic Annotator Manual,» [En línea]. Available: [Último acceso: 2014]. [6] Schallauer, Peter, JOANNEUM RESEARCH; Ober, Sandra, Graz University of Technology; Neuschmied, Helmut, JOANNEUM RESEARCH;, «Efficient semantic video annotation by object and shot re-detection,» de Posters and Demos Session, 2nd International Conference on Semantic and Digital Media Technologies (SAMT), Koblenz, Germany, https://es.wikipedia.org/wiki/ingenier%c3%ada_orientada_a_modelos 107

108 [7] Schroeter, Ronald; Hunter, Jane; Guerin, Jonathon; Khan, Imran; Henderson, Michael; The University of Queensland, «A Synchronous Multimedia Annotation System for Secure Collaboratories,» de e-science and Grid Computing, e-science '06. Second IEEE International Conference on, Amsterdam, Holanda, [8] Schroeter, Ronald; Hunter, Jane; Henderson, Michael; Distributed Systems Technology Centre, «ITEE eresearch Group,» [En línea]. Available: TA.pdf. [9] «Video Annotations at Harvard,» [En línea]. Available: [10] X. Butty, «Entwine, Knowledge in Motion,» [En línea]. Available: [11] «JSF 2 Tutorial Series, JSF 2 with Facelets, Ajax, and PrimeFaces. Validating user input.,» [En línea]. Available: Materials/pdf/jsf/08-Validation.pdf. [12] M. Brambilla, J. Cabot y M. Wimmer, «Model-Driven Software Engineering in Practice,» Morgan & Claypool Publishers, [13] F. J. Bermúdez Ruiz, J. J. García Molina y O. Díaz García, «DB-Main/Models: Un caso de estudio sobre la interoperabilidad de herramientas basada en MDE,» de aceptado en:jornadas de Ingeniería del Software y Bases de Datos, Cádiz, [14] Michael Kipp, DFKI, Julio [En línea]. Available: vil_augburg_july_2009.pdf. [15] Michael Kipp, DFKI, «ANVIL: The Video Annotation Research Tool,» de The Oxford Handbook of Corpus Phonology,

109 [16] Michael Kipp, DFKI, «Multimedia Annotation, Querying and Analysis in ANVIL,» de Multimedia Information Extraction: Advances in Video, Audio, and Imagery Analysis for Search, Data Mining, Surveillance and Authoring, pp [17] Wittenburg, Peter; Brugman, Hennie; Russel, Albert; Klassmann, Alex; Sloetjes, Han; Max Planck Institute for Psycholinguistics, The Language Archive, Nijmegen, The Netherlands, «ELAN: a Professional Framework for Multimodality Research,» de Proceedings of LREC 2006, Fifth International Conference on Language Resources and Evaluation., [18] S. Allamaraju, C. Beust y J. Davies, Programación Java Server con J2EE Edición 1.3, [19] coreservlets.com, «JSF 2 Tutorial Series. JSF 2 with Facelets, Ajax, and PrimeFaces,» [En línea]. Available: [20] coreservlets.com, «PrimeFaces Tutorial Series, PrimeFaces with JSF2 and Eclipse.,» [En línea]. Available: [21] E. Gamma, R. Helm, R. Johnson y J. Vlissides, «Design Patterns, Elements of Reusable Object-Oriented Software,» [En línea]. [22] «http://www.eleconomista.es/ Las grandes cifras de la telefonía móvil (I): líneas, teléfonos y usuarios,» [En línea]. Available: [23] G. Sagardui, L. Etxeberria, J. Aguirre, J. J. García Molina y e. al, de esarrollo de so t are dirigido por modelos conceptos m todos y erramientas, Ra-Ma,

110 9. ANEXOS 9.1. MANUAL DE DESPLIEGUE DE LA APLICACIÓN Para desplegar la aplicación en un servidor se han de seguir una serie de pasos que detallamos a continuación y cumplir una serie de requisitos. Requisitos (en negrita los utilizados en el desarrollo de este proyecto): Sistema operativo Windows, Linux o MacOs. Servidor de aplicaciones JAVA ( Jetty, JBoss, Tomcat, Glass Fish y otros). Un sistema gestor de bases de datos de los soportados por la api de persistencia JAVA (JPA) 67. La aplicación tiene configurada la persistencia (persistence.xml) para MySql y dispone de las librerías necesarias para este sistema gestor de base datos. Para utilizar otro sistema gestor de bases de datos es necesario configurar las opciones necesarias en el fichero persistence.xml y añadir las librerías de acceso al nuevo sistema gestor de bases de datos. Fichero de la aplicación: creadordominios.war. Pasos a seguir para el despliegue de la aplicación (suponemos una pila de tecnologías Windows, GlassFish, Mysql): 1. Debemos descargar el servidor de aplicaciones JAVA GlassFish de la dirección https://glassfish.java.net/downloads/3.1.2-final.html y descomprimirlo en el lugar que queramos. 2. Colocar el fichero WAR proporcionado en la carpeta de despliegue del servidor que se encuentra en carpeta_donde_descomprimimos_glassfish \ glassfish \ domains \ domain1 \ autodeploy. 3. Ejecutar el fichero por lotes localizado en la carpeta carpeta_donde_descomprimimos_glass is \ glassfish \ bin \ startserv.bat para arrancar el servidor. El servidor desplegará automáticamente la aplicación y esta estará disponible a través de la dirección 4. Antes de esto debemos crear una base de datos Mysql con nombre pfg y el usuario root de MySql no debe tener contraseña. Si queremos cambiar estos datos deberíamos modificar el fichero persistence.xml. Después de realizar todos estos pasos ya podemos acceder mediante un navegador web a la dirección y empezar a utilizar la herramienta

111 9.2. MANUAL DE USUARIO DE LA APLICACIÓN En esta sección se mostrará cómo utilizar la aplicación a través de una serie de simples ejemplos. La herramienta está dividida en 3 secciones distintas: - El gestor de vídeos, donde el usuario deberá añadir los vídeos a los que posteriormente asociar anotaciones. - El editor de dominios, donde el usuario podrá definir dominios para posterior mente crear anotaciones asociadas a estos. - El creador de anotaciones y definidor de momentos. En esta sección el usuario podrá definir un rango temporal de tiempo dentro de un vídeo que podrá previsualizar y definir una anotaciones que describan ese momento del vídeo Gestión de vídeos En la siguiente imagen podemos observar la interfaz de usuario del gestor de vídeos. Ilustración 61: Gestor de vídeos. Podemos observar una tabla con 5 columnas con la información de los distintos vídeos gestionados por la herramienta (la herramienta no guarda físicamente los vídeos, solamente la URL). Si pulsamos la cabecera de las columnas (aquellas en las que aparece el icono ) podemos ordenar los resultados por este campo. También podemos filtrar los resultados por este 111

112 campo introduciendo el texto de búsqueda en la casilla ( ) que hay en la cabecera de la columna. En la primera columna podemos ver un icono que representa la fuente de vídeo (Youtube, Vimeo o una URL directa a un fichero de vídeo ). En la segunda columna vemos el título del vídeo. En la tercera columna podemos ver la URL del vídeo. En la cuarta columna la duración total del vídeo y en la quinta columna la fecha en la que el usuario añadió el vídeo. Editar información sobre un vídeo Al seleccionar un vídeo de la tabla de resultados la fila aparecerá resaltada y un diálogo se abrirá para editar la información del vídeo y visualizarlo mediante un reproductor de vídeo como podemos ver en la siguiente imagen. Ilustración 62: Gestión de vídeos, editando un vídeo. Desde este diálogo podemos modificar el título y la URL del vídeo (Si se modifica un vídeo por otro distinto los momentos definidos podrían hacer referencia partes del vídeo erróneas) o eliminar el vídeo. Añadir un vídeo Para añadir un nuevo vídeo nos dirigimos al menú Vídeos, ítem Nuevo vídeo y nos aparecerá el diálogo que podemos ver en la siguiente imagen donde nos pide que 112

113 introduzcamos un título y la URL del vídeo. Este vídeo puede ser la dirección de un vídeo de Youtube, de Vimeo o la dirección directa a un fichero de vídeo. Ilustración 63: Gestión de vídeos, nuevo vídeo Definición de dominios. En esta sección podemos seleccionar dominios definidos anteriormente para editarlos o crear nuevos. En la siguiente imagen podemos ver el aspecto inicial de la sección del editor de dominios antes de seleccionar o crear un dominio. Ilustración 64: Editor de dominios, interfaz de usuario I. En esta sección podemos realizar dos acciones, editar o eliminar un dominio o crear uno nuevo. Para crear un dominio nos dirigimos al menú Dominios, ítem Crear. Nos aparecerá un diálogo como el que aparece en la siguiente imagen con un solo campo en el que introduciremos el nombre del nuevo dominio y un botón para crear el nuevo dominio. Una vez creado veremos en la parte inferior de la pantalla el lienzo de edición de dominios 113

114 preparado para empezar a definir el nuevo dominio. Ilustración 65: Editor de dominios, creación de un nuevo dominio. Si queremos editar un dominio solo tenemos que seleccionarlo en la tabla de dominios (podemos filtrar los resultados introduciendo una cadena de búsqueda en el campo de la cabecera de la tabla). Si lo que queremos es eliminar un dominio, una vez seleccionamos el dominio tenemos la opción de eliminar disponible en el menú Dominio Eliminar. A partir de ahora el proceso es el mismo tanto para la edición como para la creación de un dominio. Ilustración 66: Editor de dominios, interfaz de usuario II. Una vez que tenemos seleccionado un dominio con el que trabajar podemos ocultar la tabla 114

Agustiniano Ciudad Salitre School Computer Science Support Guide - 2015 Second grade First term

Agustiniano Ciudad Salitre School Computer Science Support Guide - 2015 Second grade First term Agustiniano Ciudad Salitre School Computer Science Support Guide - 2015 Second grade First term UNIDAD TEMATICA: INTERFAZ DE WINDOWS LOGRO: Reconoce la interfaz de Windows para ubicar y acceder a los programas,

Más detalles

Este proyecto tiene como finalidad la creación de una aplicación para la gestión y explotación de los teléfonos de los empleados de una gran compañía.

Este proyecto tiene como finalidad la creación de una aplicación para la gestión y explotación de los teléfonos de los empleados de una gran compañía. SISTEMA DE GESTIÓN DE MÓVILES Autor: Holgado Oca, Luis Miguel. Director: Mañueco, MªLuisa. Entidad Colaboradora: Eli & Lilly Company. RESUMEN DEL PROYECTO Este proyecto tiene como finalidad la creación

Más detalles

Creating your Single Sign-On Account for the PowerSchool Parent Portal

Creating your Single Sign-On Account for the PowerSchool Parent Portal Creating your Single Sign-On Account for the PowerSchool Parent Portal Welcome to the Parent Single Sign-On. What does that mean? Parent Single Sign-On offers a number of benefits, including access to

Más detalles

SISTEMA DE GESTIÓN Y ANÁLISIS DE PUBLICIDAD EN TELEVISIÓN

SISTEMA DE GESTIÓN Y ANÁLISIS DE PUBLICIDAD EN TELEVISIÓN SISTEMA DE GESTIÓN Y ANÁLISIS DE PUBLICIDAD EN TELEVISIÓN Autor: Barral Bello, Alfredo Director: Alcalde Lancharro, Eduardo Entidad Colaboradora: Media Value S.L. RESUMEN DEL PROYECTO El presente proyecto

Más detalles

SCADA BASADO EN LABVIEW PARA EL LABORATORIO DE CONTROL DE ICAI

SCADA BASADO EN LABVIEW PARA EL LABORATORIO DE CONTROL DE ICAI SCADA BASADO EN LABVIEW PARA EL LABORATORIO DE CONTROL DE ICAI Autor: Otín Marcos, Ana. Directores: Rodríguez Pecharromán, Ramón. Rodríguez Mondéjar, José Antonio. Entidad Colaboradora: ICAI Universidad

Más detalles

Sistema de Control Domótico

Sistema de Control Domótico UNIVERSIDAD PONTIFICIA COMILLAS ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA (ICAI) INGENIERO EN ELECTRÓNICA Y AUTOMATICA PROYECTO FIN DE CARRERA Sistema de Control Domótico a través del bus USB Directores:

Más detalles

SISTEMA CONTROL DE ACCESOS A EDIFICIOS MEDIANTE TARJETAS CRIPTOGRÁFICAS Y TARJETAS DE RADIOFRECUENCIA (RFID)

SISTEMA CONTROL DE ACCESOS A EDIFICIOS MEDIANTE TARJETAS CRIPTOGRÁFICAS Y TARJETAS DE RADIOFRECUENCIA (RFID) SISTEMA CONTROL DE ACCESOS A EDIFICIOS MEDIANTE TARJETAS CRIPTOGRÁFICAS Y TARJETAS DE RADIOFRECUENCIA (RFID) Alumno: Velayos Sardiña, Marta Director: Palacios Hielscher, Rafael Entidad Colaboradora: ICAI

Más detalles

PROYECTO INFORMÁTICO PARA LA CREACIÓN DE UN GESTOR DOCUMENTAL PARA LA ONG ENTRECULTURAS

PROYECTO INFORMÁTICO PARA LA CREACIÓN DE UN GESTOR DOCUMENTAL PARA LA ONG ENTRECULTURAS PROYECTO INFORMÁTICO PARA LA CREACIÓN DE UN GESTOR DOCUMENTAL PARA LA ONG ENTRECULTURAS Autor: García Lodares, Victor. Director: Castejón Silvo, Pedro. Entidad Colaboradora: Entreculturas. Resumen del

Más detalles

Aplicación web para el modelado de redes eléctricas

Aplicación web para el modelado de redes eléctricas Aplicación web para el modelado de redes eléctricas Autores: Sergio Burgos González Carlos Mateo (Director) Tomás Gómez San Román (Director) Resumen: El proyecto consiste en el desarrollo de una aplicación

Más detalles

Instalación: Instalación de un agente en una máquina cliente y su registro en el sistema.

Instalación: Instalación de un agente en una máquina cliente y su registro en el sistema. HERRAMIENTA DE MONITORIZACIÓN DE SISTEMAS Autor: Sota Madorrán, Iñaki. Director: Igualada Moreno, Pablo. Entidad Colaboradora: Evotec Consulting, S.L. RESUMEN DEL PROYECTO El proyecto consiste en el diseño,

Más detalles

DISEÑO DE UN CRONOTERMOSTATO PARA CALEFACCIÓN SOBRE TELÉFONOS MÓVILES. Entidad Colaboradora: ICAI Universidad Pontificia Comillas.

DISEÑO DE UN CRONOTERMOSTATO PARA CALEFACCIÓN SOBRE TELÉFONOS MÓVILES. Entidad Colaboradora: ICAI Universidad Pontificia Comillas. DISEÑO DE UN CRONOTERMOSTATO PARA CALEFACCIÓN SOBRE TELÉFONOS MÓVILES Autor: Sánchez Gómez, Estefanía Dolores. Directores: Pilo de la Fuente, Eduardo. Egido Cortés, Ignacio. Entidad Colaboradora: ICAI

Más detalles

DISPOSITIVO DE CONTROL PARA REDES DE DISTRIBUCIÓN ELÉCTRICA RESUMEN DEL PROYECTO

DISPOSITIVO DE CONTROL PARA REDES DE DISTRIBUCIÓN ELÉCTRICA RESUMEN DEL PROYECTO I DISPOSITIVO DE CONTROL PARA REDES DE DISTRIBUCIÓN ELÉCTRICA Autor: Juárez Montojo, Javier. Director: Rodríguez Mondéjar, José Antonio. Entidad Colaboradora: ICAI-Universidad Pontificia Comillas RESUMEN

Más detalles

HERRAMIENTA WEB PARA LA ELABORACIÓN DE TEST BAJO LA ESPECIFICACIÓN IMS-QTI

HERRAMIENTA WEB PARA LA ELABORACIÓN DE TEST BAJO LA ESPECIFICACIÓN IMS-QTI HERRAMIENTA WEB PARA LA ELABORACIÓN DE TEST BAJO LA ESPECIFICACIÓN IMS-QTI Muñoz-Bouchard J.P., y Álvarez-González L.A. jp.knap@gmail.com@gmail.com, lalvarez@inf.uach.cl Grupo de Investigación en Tecnologías

Más detalles

ADAPTACIÓN DE REAL TIME WORKSHOP AL SISTEMA OPERATIVO LINUX

ADAPTACIÓN DE REAL TIME WORKSHOP AL SISTEMA OPERATIVO LINUX ADAPTACIÓN DE REAL TIME WORKSHOP AL SISTEMA OPERATIVO LINUX Autor: Tomás Murillo, Fernando. Director: Muñoz Frías, José Daniel. Coordinador: Contreras Bárcena, David Entidad Colaboradora: ICAI Universidad

Más detalles

ANÁLISIS Y DESARROLLO DE UNA PLATAFORMA BIG DATA

ANÁLISIS Y DESARROLLO DE UNA PLATAFORMA BIG DATA ANÁLISIS Y DESARROLLO DE UNA PLATAFORMA BIG DATA Autor: de la Cierva Perreau de Pinninck, Leticia Director: Sonia García, Mario Tenés Entidad Colaboradora: VASS RESUMEN DEL PROYECTO Tras la realización

Más detalles

SISTEMA DE IMPORTACIÓN DINÁMICA DE INFORMACIÓN WEB Y PRESENTACIÓN WAP (SIDIW-PW)

SISTEMA DE IMPORTACIÓN DINÁMICA DE INFORMACIÓN WEB Y PRESENTACIÓN WAP (SIDIW-PW) SISTEMA DE IMPORTACIÓN DINÁMICA DE INFORMACIÓN WEB Y PRESENTACIÓN WAP (SIDIW-PW) Autora: Arias-Camisón Sarasua, Susana. Director: Contreras Bárcena, David Entidad Colaboradora: ICAI Universidad Pontificia

Más detalles

Por tanto, la aplicación SEAH (Sistema Experto Asistente para Hattrick) ofrece las siguientes opciones:

Por tanto, la aplicación SEAH (Sistema Experto Asistente para Hattrick) ofrece las siguientes opciones: SEAH: SISTEMA EXPERTO ASISTENTE PARA HATTRICK Autor: Gil Mira, Alfredo Director: Olivas Varela, Jose Ángel Entidad Colaboradora: ICAI Universidad Pontificia Comillas RESUMEN DEL PROYECTO Hatrick es un

Más detalles

Universidad de Guadalajara

Universidad de Guadalajara Universidad de Guadalajara Centro Universitario de Ciencias Económico-Administrativas Maestría en Tecnologías de Información Ante-proyecto de Tésis Selection of a lightweight virtualization framework to

Más detalles

Adobe Acrobat Reader X: Manual to Verify the Digital Certification of a Document

Adobe Acrobat Reader X: Manual to Verify the Digital Certification of a Document dobe crobat Reader X: Manual de verificación de Certificación Digital de un documento dobe crobat Reader X: Manual to Verify the Digital Certification of a Document support@bioesign.com Desarrollado por:

Más detalles

Final Project (academic investigation)

Final Project (academic investigation) Final Project (academic investigation) MÁSTER UNIVERSITARIO EN BANCA Y FINANZAS (Finance & Banking) Universidad de Alcalá Curso Académico 2015/16 GUÍA DOCENTE Nombre de la asignatura: Final Project (academic

Más detalles

WLAB SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABORARIO. Directores: Rodríguez Pecharromán, Ramón. Palacios Hielscher, Rafael.

WLAB SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABORARIO. Directores: Rodríguez Pecharromán, Ramón. Palacios Hielscher, Rafael. WLAB SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABORARIO. Autor: Rodríguez de la Rosa, Alicia. Directores: Rodríguez Pecharromán, Ramón. Palacios Hielscher, Rafael. Entidad Colaboradora: ICAI

Más detalles

UNIVERSIDAD DE OVIEDO

UNIVERSIDAD DE OVIEDO UNIVERSIDAD DE OVIEDO ESCUELA POLITÉCNICA DE INGENIERÍA DE GIJÓN MÁSTER EN INGENIERÍA INFORMÁTICA TRABAJO FIN DE MÁSTER SPRING ROO ADD-ONS PARA PROTOTIPADO RÁPIDO JAVIER MENÉNDEZ ÁLVAREZ JULIO 2014 UNIVERSIDAD

Más detalles

Powered by RELEASE NOTES. CSS Business Intelligence. Versión 2.11.0. Build 20130510

Powered by RELEASE NOTES. CSS Business Intelligence. Versión 2.11.0. Build 20130510 RELEASE NOTES CSS Business Intelligence Versión 2.11.0 Build 20130510 Spanish Version English Version Change Log / Detalle de Cambios Revision Date Description Owner 1.0 27-May-2013 Document Creation /

Más detalles

OSCILLATION 512 (LM 3R)

OSCILLATION 512 (LM 3R) Application Note The following application note allows to locate the LM series devices (LM3E, LM3R, LM4 and LM5) within network and check its connection information: Name, MAC, dynamic IP address and static

Más detalles

SOFTWARE PARA LA GESTIÓN INFORMÁTICA DE UNA CLÍNICA DENTAL

SOFTWARE PARA LA GESTIÓN INFORMÁTICA DE UNA CLÍNICA DENTAL SOFTWARE PARA LA GESTIÓN INFORMÁTICA DE UNA CLÍNICA DENTAL Autora: Laura Martín García Director: Alberto Ciudad Sánchez RESUMEN El objetivo de este proyecto es realizar el análisis, diseño y desarrollo

Más detalles

IRS DATA RETRIEVAL NOTIFICATION DEPENDENT STUDENT ESTIMATOR

IRS DATA RETRIEVAL NOTIFICATION DEPENDENT STUDENT ESTIMATOR IRS DATA RETRIEVAL NOTIFICATION DEPENDENT STUDENT ESTIMATOR Subject: Important Updates Needed for Your FAFSA Dear [Applicant], When you completed your 2012-2013 Free Application for Federal Student Aid

Más detalles

Diseño de un directorio Web de diseñadores gráficos, ilustradores y fotógrafos.

Diseño de un directorio Web de diseñadores gráficos, ilustradores y fotógrafos. Universidad Nueva Esparta Facultad de Ciencias Administrativas Escuela de Administración de Diseño de un directorio Web de diseñadores gráficos, ilustradores y fotógrafos. Tutor: Lic. Beaujon, María Beatriz

Más detalles

Contents. Introduction. Aims. Software architecture. Tools. Example

Contents. Introduction. Aims. Software architecture. Tools. Example ED@CON Control Results Management Software Control with Remote Sensing Contents Introduction Aims Software architecture Tools Example Introduction Control results management software (Ed@con) is a computer

Más detalles

Steps to Understand Your Child s Behavior. Customizing the Flyer

Steps to Understand Your Child s Behavior. Customizing the Flyer Steps to Understand Your Child s Behavior Customizing the Flyer Hello! Here is the PDF Form Template for use in advertising Steps to Understanding Your Child s Behavior (HDS Behavior Level 1B). Because

Más detalles

APLICACIÓN WEB BASADA EN UNA SOLUCIÓN EN SAP R/3 PARA EL MANTENIMIENTO DE TRENES

APLICACIÓN WEB BASADA EN UNA SOLUCIÓN EN SAP R/3 PARA EL MANTENIMIENTO DE TRENES APLICACIÓN WEB BASADA EN UNA SOLUCIÓN EN SAP R/3 PARA EL MANTENIMIENTO DE TRENES Autor: Alberny, Marion. Director: Alcalde Lancharro, Eduardo. Entidad Colaboradora: CGI. RESUMEN DEL PROYECTO La mayoría

Más detalles

IBM Software Demos Rational Model Driven Development

IBM Software Demos Rational Model Driven Development This demonstration introduces IBM Rational XDE and IBM WebSphere Studio working together to improve J2EE software development. Esta demostración presenta la combinación de IBM Rational XDE e IBM WebSphere

Más detalles

Los ensayos que se van a desarrollar son los siguientes:

Los ensayos que se van a desarrollar son los siguientes: I Resumen El objetivo principal del proyecto es desarrollar un software que permita analizar unos datos correspondientes a una serie de ensayos militares. Con este objetivo en mente, se ha decidido desarrollar

Más detalles

APLICATIVO WEB PARA LA ADMINISTRACIÓN DE LABORATORIOS Y SEGUIMIENTO DOCENTE EN UNISARC JUAN DAVID LÓPEZ MORALES

APLICATIVO WEB PARA LA ADMINISTRACIÓN DE LABORATORIOS Y SEGUIMIENTO DOCENTE EN UNISARC JUAN DAVID LÓPEZ MORALES APLICATIVO WEB PARA LA ADMINISTRACIÓN DE LABORATORIOS Y SEGUIMIENTO DOCENTE EN UNISARC JUAN DAVID LÓPEZ MORALES CORPORACIÓN UNIVERSITARIA SANTA ROSA DE CABAL CIENCIAS Y TECNOLOGÍAS DE INFORMACIÓN Y COMUNICACIÓN

Más detalles

PROYECTO - WLAB. SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABOROTORIO AUTORA: Sara Mira Fernández. Resumen

PROYECTO - WLAB. SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABOROTORIO AUTORA: Sara Mira Fernández. Resumen PROYECTO - WLAB. SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABOROTORIO AUTORA: Sara Mira Fernández Resumen La idea de la que parte este proyecto es la de permitir acceder al Laboratorio de

Más detalles

UTILIZACIÓN DE UN BOLÍGRAFO DÍGITAL PARA LA MEJORA DE PROCEDIMIENTOS DE CAMPO EN UNA CENTRAL NUCLEAR.

UTILIZACIÓN DE UN BOLÍGRAFO DÍGITAL PARA LA MEJORA DE PROCEDIMIENTOS DE CAMPO EN UNA CENTRAL NUCLEAR. UTILIZACIÓN DE UN BOLÍGRAFO DÍGITAL PARA LA MEJORA DE PROCEDIMIENTOS DE CAMPO EN UNA CENTRAL NUCLEAR. Autor: Ruiz Muñoz, Rafael. Director: Muñoz García, Manuel. Entidad Colaboradora: Empresarios Agrupados.

Más detalles

DISEÑO E IMPLEMENTACIÓN DE UN PROTOCOLO DE REDES PEER-TO-PEER

DISEÑO E IMPLEMENTACIÓN DE UN PROTOCOLO DE REDES PEER-TO-PEER DISEÑO E IMPLEMENTACIÓN DE UN PROTOCOLO DE REDES PEER-TO-PEER Autor: García Sanjuán, Luis María. Director: Muñoz Berengena, José Manuel. Entidad Colaboradora: ICAI Universidad Pontificia Comillas RESUMEN

Más detalles

TEDECO Tele-Conference

TEDECO Tele-Conference TEDECO Tele-Conference http://teteco.googlecode.com Ignacio Martín Oya Tutor: Jesús Martínez Mateo Tecnología para el Desarrollo y la Cooperación Facultad de Informática Universidad Politécnica de Madrid

Más detalles

HTML 5. Que es HTML5 07/04/2011

HTML 5. Que es HTML5 07/04/2011 HTML 5 M.I María Luisa González Ramírez Que es HTML5 Es una agrupación de diversas especificaciones concernientes al desarrollo web HTML 5 no se limita solamente a crear nuevas etiquetas, atributos. Es

Más detalles

iclef-2002 at Universities of Alicante and Jaen University of Alicante (Spain)

iclef-2002 at Universities of Alicante and Jaen University of Alicante (Spain) iclef-2002 at Universities of Alicante and Jaen University of Alicante (Spain) ! Introduction! Passage Retrieval Systems! IR-n system! IR-n system at iclef-2002! Conclusions and Future works ! Introduction!

Más detalles

REST BACK END Y APLICACIÓN PARA ios PARA OPTIMIZAR TIEMPO Y RECOMENDAR NUEVOS EVENTOS

REST BACK END Y APLICACIÓN PARA ios PARA OPTIMIZAR TIEMPO Y RECOMENDAR NUEVOS EVENTOS REST BACK END Y APLICACIÓN PARA ios PARA OPTIMIZAR TIEMPO Y RECOMENDAR NUEVOS EVENTOS Autor: Balduz Bernal, Carlos Director: Contreras Bárcena, David Entidad Colaboradora: ICAI Universidad Pontificia Comillas.

Más detalles

Programación en Capas.

Programación en Capas. Programación en Capas. Ricardo J. Vargas Del Valle Universidad de Costa Rica, Ciencias de Computación e Informática, San José, Costa Rica, 506 ricvargas@gmail.com Juan P. Maltés Granados Universidad de

Más detalles

Anotación de contenidos Web

Anotación de contenidos Web Anotación de contenidos Web Distintos tipos de anotación según el vocabulario utilizado Basada en Dublin Core The contributor and creator is the flight booking service www.flightbookings.com. The date

Más detalles

manual de servicio nissan murano z51

manual de servicio nissan murano z51 manual de servicio nissan murano z51 Reference Manual To understand featuring to use and how to totally exploit manual de servicio nissan murano z51 to your great advantage, there are several sources of

Más detalles

Sistemas de impresión y tamaños mínimos Printing Systems and minimum sizes

Sistemas de impresión y tamaños mínimos Printing Systems and minimum sizes Sistemas de impresión y tamaños mínimos Printing Systems and minimum sizes Para la reproducción del Logotipo, deberán seguirse los lineamientos que se presentan a continuación y que servirán como guía

Más detalles

Karina Ocaña Izquierdo

Karina Ocaña Izquierdo Estudié Ingeniería en Sistemas Computacionales (1997) y una Maestría en Ingeniería de Cómputo con especialidad en Sistemas Digitales (2000), ambas en el Instituto Politécnico Nacional (México). En el 2003,

Más detalles

SEO Lite. Extract the file SEO.zip in the modules folder, so that module files are inside /moules/ seo/.

SEO Lite. Extract the file SEO.zip in the modules folder, so that module files are inside /moules/ seo/. SEO Lite 1. English Documentation (Ingles) 2. Documentación en Español (Spanish) Carlos Perez Fernandez Soporte 1. English Documentation (Ingles)

Más detalles

Sistema basado en firma digital para enviar datos por Internet de forma segura mediante un navegador.

Sistema basado en firma digital para enviar datos por Internet de forma segura mediante un navegador. Sistema basado en firma digital para enviar datos por Internet de forma segura mediante un navegador. Autor: David de la Fuente González Directores: Rafael Palacios, Javier Jarauta. Este proyecto consiste

Más detalles

Adaptación y Configuración de Procesos de Software Tailoring and Configuration of Software Processes

Adaptación y Configuración de Procesos de Software Tailoring and Configuration of Software Processes Adaptación y Configuración de Procesos de Software Tailoring and Configuration of Software Processes Rodolfo Villarroel Acevedo 1* 1 Pontificia Universidad Católica de Valparaíso. Avenida Brasil 2241,

Más detalles

Cómo comprar en la tienda en línea de UDP y cómo inscribirse a los módulos UDP

Cómo comprar en la tienda en línea de UDP y cómo inscribirse a los módulos UDP Cómo comprar en la tienda en línea de UDP y cómo inscribirse a los módulos UDP Sistema de registro y pago Este sistema está dividido en dos etapas diferentes*. Por favor, haga clic en la liga de la etapa

Más detalles

Introducción a la Ingeniería de Software. Diseño Interfaz de Usuario

Introducción a la Ingeniería de Software. Diseño Interfaz de Usuario Introducción a la Ingeniería de Software Diseño Interfaz de Usuario Diseño de la Interfaz de Usuario Normalmente no se contratan especialistas Hay casos en los cuales es más normal: videojuegos y sitiosweb

Más detalles

Universidad Nueva Esparta Facultad de Ciencias de la Informática Escuela de Computación

Universidad Nueva Esparta Facultad de Ciencias de la Informática Escuela de Computación Universidad Nueva Esparta Facultad de Ciencias de la Informática Escuela de Computación Diseño de arquitectura tecnológica para gestión de infraestructura de tecnología de información (TI) Caso de Estudio:

Más detalles

Título del Proyecto: Sistema Web de gestión de facturas electrónicas.

Título del Proyecto: Sistema Web de gestión de facturas electrónicas. Resumen Título del Proyecto: Sistema Web de gestión de facturas electrónicas. Autor: Jose Luis Saenz Soria. Director: Manuel Rojas Guerrero. Resumen En la última década se han producido muchos avances

Más detalles

FACULTAD DE INGENIERÍA Y CIENCIAS AGROPECUARIAS ESCUELA DE INGENIERÍA DE SONIDO Y ACÚSTICA

FACULTAD DE INGENIERÍA Y CIENCIAS AGROPECUARIAS ESCUELA DE INGENIERÍA DE SONIDO Y ACÚSTICA FACULTAD DE INGENIERÍA Y CIENCIAS AGROPECUARIAS ESCUELA DE INGENIERÍA DE SONIDO Y ACÚSTICA SISTEMA DE GENERACIÓN DE IMÁGENES Y PATRONES VISUALES A PARTIR DE UNA SEÑAL DE AUDIO; CONSIDERANDO AMPLITUD, FRECUENCIA

Más detalles

Trading & Investment In Banking

Trading & Investment In Banking Trading & Investment In Banking MÁSTER UNIVERSITARIO EN BANCA Y FINANZAS (Finance & Banking) Universidad de Alcalá Curso Académico 2015/16 GUÍA DOCENTE Nombre de la asignatura: Trading & Investment In

Más detalles

IBM Software Demos WebSphere Business Integration InterChange Server

IBM Software Demos WebSphere Business Integration InterChange Server This is the second of three demonstrations that illustrate the modeling, implementation and execution of a business process integration solution built with IBM WebSphere Business Integration software.

Más detalles

RFID TEMPERATURE SENSOR. Autor: Polo Tascón, David. Director: Kramer, Kathleen. Entidad colaboradora: Advantageous Systems LLC.

RFID TEMPERATURE SENSOR. Autor: Polo Tascón, David. Director: Kramer, Kathleen. Entidad colaboradora: Advantageous Systems LLC. RFID TEMPERATURE SENSOR. Autor: Polo Tascón, David. Director: Kramer, Kathleen. Entidad colaboradora: Advantageous Systems LLC. RESUMEN DEL PROYECTO Existen casos en la industria de la tecnología, medicina,

Más detalles

INSTRUCCIONES PARA ENVIAR SU PELICULA PARA LA VIDEOLIBRERIA

INSTRUCCIONES PARA ENVIAR SU PELICULA PARA LA VIDEOLIBRERIA For English version, please scroll down to page 11 (eleven) INSTRUCCIONES PARA ENVIAR SU PELICULA PARA LA VIDEOLIBRERIA Especificaciones técnicas Container format:.mp4 / tamaño de archivo no superior a

Más detalles

Una librería digital de modelos de simulaciones para la enseñanza de la ingeniería de control. Francisco Esquembre. Universidad de Murcia

Una librería digital de modelos de simulaciones para la enseñanza de la ingeniería de control. Francisco Esquembre. Universidad de Murcia Una librería digital de modelos de simulaciones para la enseñanza de la ingeniería de control Francisco Esquembre Universidad de Murcia Eiwissa 2010, León Easy Java Simulations Reflexiones en el camino

Más detalles

IBM Software Demos Lotus Domino Designer 6.5

IBM Software Demos Lotus Domino Designer 6.5 (0:02) Lotus Domino Designer enables developers to rapidly build, test, and deploy secure, standards based Lotus Notes and Domino collaborative applications. Included in Designer is a graphical help utility

Más detalles

Introducción a ZEUS. Introducción. Curso Doctorado Sistemas Multi-agente. Zeus es una herramienta de desarrollo de SMA.

Introducción a ZEUS. Introducción. Curso Doctorado Sistemas Multi-agente. Zeus es una herramienta de desarrollo de SMA. Introducción a ZEUS Curso Doctorado Sistemas Multi-agente Introducción Zeus es una herramienta de desarrollo de SMA. 1 Introducción Está constituido fundamentalmente por 3 grupos funcionales: Biblioteca

Más detalles

ESTUDIO DE SOLUCIONES DE BUSINESS INTELLIGENCE

ESTUDIO DE SOLUCIONES DE BUSINESS INTELLIGENCE ESTUDIO DE SOLUCIONES DE BUSINESS INTELLIGENCE Autor: Jover Sanz-Pastor, Teresa. Director: Cesteros García, Francisco José. Entidad colaboradora: AVANSIS Integración. RESUMEN Hoy en día en todas las empresas

Más detalles

From e-pedagogies to activity planners. How can it help a teacher?

From e-pedagogies to activity planners. How can it help a teacher? From e-pedagogies to activity planners. How can it help a teacher? Elena de Miguel, Covadonga López, Ana Fernández-Pampillón & Maria Matesanz Universidad Complutense de Madrid ABSTRACT Within the framework

Más detalles

Manual. BioAdmin PRESENCIA PLUS GUIA RAPIDA SISTEMA INFORMES BioAdmin

Manual. BioAdmin PRESENCIA PLUS GUIA RAPIDA SISTEMA INFORMES BioAdmin Manual BioAdmin PRESENCIA PLUS GUIA RAPIDA SISTEMA INFORMES BioAdmin Indice 1 Instalación del Programa 2 Configuración 3 Alta de Empleados 4 Creación delo LOG desde BIOADMIN 5 Captura del LOG desde BioAdmin

Más detalles

1 Escuela Politécnica del Ejército, Ecuador, mauroqs@gmail.com 2 Escuela Politécnica del Ejército, Ecuador, alejosbr@hotmail.com

1 Escuela Politécnica del Ejército, Ecuador, mauroqs@gmail.com 2 Escuela Politécnica del Ejército, Ecuador, alejosbr@hotmail.com ANÁLISIS, DISEÑO E IMPLEMENTACIÓN DE UNA APLICACIÓN WEB ACADÉMICO-ADMINISTRATIVA PARA EL COLEGIO MARÍA DE NAZARET, MEDIANTE EL USO DE TECNOLOGÍAS SOFTWARE LIBRE Mauricio Quilachamín Simbaña, Alejandro

Más detalles

DISEÑO DEL EQUIPAMIENTO DE UN ESTUDIO DE GRABACIÓN DIGITAL RESUMEN. Sergio Herreros Carballo

DISEÑO DEL EQUIPAMIENTO DE UN ESTUDIO DE GRABACIÓN DIGITAL RESUMEN. Sergio Herreros Carballo DISEÑO DEL EQUIPAMIENTO DE UN ESTUDIO DE GRABACIÓN DIGITAL RESUMEN Sergio Herreros Carballo El presente proyecto describe la instalación de audio de un estudio de grabación digital musical. La finalidad

Más detalles

GENERAL INFORMATION Project Description

GENERAL INFORMATION Project Description RESULTADOS! GENERAL INFORMATION Project Description The campaign "Adopt a car " had as its main objective to position Autoplaza, the main automotive selling point of Chile, as a new car sales location

Más detalles

ESTUDIO COMPARATIVO DE DIFERENTES TECNOLOGÍAS DE

ESTUDIO COMPARATIVO DE DIFERENTES TECNOLOGÍAS DE ESTUDIO COMPARATIVO DE DIFERENTES TECNOLOGÍAS DE GENERACIÓN SOLAR EN FUNCIÓN DE LA CURVA DE DEMANDA Autor: Laura García Martín Director: Francisco Fernández Daza Mijares Entidad colaboradora: ICAI Universidad

Más detalles

Curso 5007437. Capítulo 4: Arquitectura Orientada a Servicios. Conceptos y estándares de arquitecturas orientadas a servicios Web Curso 2006/2007

Curso 5007437. Capítulo 4: Arquitectura Orientada a Servicios. Conceptos y estándares de arquitecturas orientadas a servicios Web Curso 2006/2007 Curso 5007437 Conceptos y estándares de arquitecturas orientadas a servicios Web Curso 2006/2007 Capítulo 4: Arquitectura Orientada a Servicios Pedro Álvarez alvaper@unizar.es José Ángel Bañares banares@unizar.es

Más detalles

RESUMEN DE TRABAJO DE GRADO

RESUMEN DE TRABAJO DE GRADO RESUMEN DE TRABAJO DE GRADO Universidad Nueva Esparta. Facultad de Ciencias de la Informática. Escuela de Computación. Autores: Barrios M. Cesar E, Céspedes Nelson Tutor: Gabriel Méndez Titulo: Implantación

Más detalles

ETS APPs 26.10.2012 MATELEC 2012. Nuevas Funciones para ETS. Madrid. Casto Cañavate KNX Association International

ETS APPs 26.10.2012 MATELEC 2012. Nuevas Funciones para ETS. Madrid. Casto Cañavate KNX Association International ETS APPs Nuevas Funciones para ETS 26.10.2012 MATELEC 2012 Madrid Casto Cañavate KNX Association International KNX Association International Page No. 2 Introducción Diversidad de Proyectos Viviendas Oficinas

Más detalles

Pistas Separadas TÉRMINOS Y CONDICIONES

Pistas Separadas TÉRMINOS Y CONDICIONES Pistas Separadas POETA MUSIC PRODUCTIONS le da un control total sobre lo que se hace con la grabación original. Ahora, usted puede agregar diferentes sonidos voses teclados derivados como desee ( añada

Más detalles

The ADE Direct Certification User Guide is a tool for authorized ADE and school district personnel to use in conjunction with the ADE Direct

The ADE Direct Certification User Guide is a tool for authorized ADE and school district personnel to use in conjunction with the ADE Direct The ADE Direct Certification User Guide is a tool for authorized ADE and school district personnel to use in conjunction with the ADE Direct Certification website. 1 This User Guide is a reference guide

Más detalles

Setting Up an Apple ID for your Student

Setting Up an Apple ID for your Student Setting Up an Apple ID for your Student You will receive an email from Apple with the subject heading of AppleID for Students Parent/Guardian Information Open the email. Look for two important items in

Más detalles

WLAB SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABORARIO. Directores: Rodríguez Pecharromán, Ramón. Palacios Hielscher, Rafael.

WLAB SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABORARIO. Directores: Rodríguez Pecharromán, Ramón. Palacios Hielscher, Rafael. WLAB SISTEMA DE CONTROL REMOTO EN TIEMPO REAL DE EQUIPOS DE LABORARIO. Autor: Rodríguez de la Rosa, Alicia. Directores: Rodríguez Pecharromán, Ramón. Palacios Hielscher, Rafael. Entidad Colaboradora: ICAI

Más detalles

Estudio y analisis en el diseño de una canal de comunicaciones para el desarrollo de la interactividad en la televisión digital RESUMEN

Estudio y analisis en el diseño de una canal de comunicaciones para el desarrollo de la interactividad en la televisión digital RESUMEN Estudio y analisis en el diseño de una canal de comunicaciones para el desarrollo de la interactividad en la televisión digital Autor: Alberto Cuesta Gómez Director: Dr. Sadot Alexandres Fernández RESUMEN

Más detalles

Qué viva la Gráfica de Cien!

Qué viva la Gráfica de Cien! Qué viva la Gráfica de Cien! La gráfica de cien consiste en números del 1 al 100 ordenados en cuadrilones de diez números en hileras. El resultado es que los estudiantes que utilizan estás gráficas pueden

Más detalles

La gestión de objetos digitales: una aplicación para la e-ciencia

La gestión de objetos digitales: una aplicación para la e-ciencia La gestión de objetos digitales: una aplicación para la e-ciencia PONENCIAS Digital object management: an application for e-science Luis Zorita Vicente y Alicia López Medina Resumen El nuevo entorno de

Más detalles

JESÚS EDUARDO CORTÉS SÁNCHEZ

JESÚS EDUARDO CORTÉS SÁNCHEZ MÓDULOS ACTIVIDADES Y SERVICIOS DE BIENESTAR DEL SISTEMA DE INFORMACIÓN PARA LA DIVISIÓN DE BIENESTAR INSTITUCIONAL DE LA CORPORACIÓN UNIVERSITARIA SANTA ROSA DE CABAL UNISARC JESÚS EDUARDO CORTÉS SÁNCHEZ

Más detalles

RDA in BNE. Mar Hernández Agustí Technical Process Department Manager Biblioteca Nacional de España

RDA in BNE. Mar Hernández Agustí Technical Process Department Manager Biblioteca Nacional de España RDA in BNE Mar Hernández Agustí Technical Process Department Manager Biblioteca Nacional de España RDA at the National Library of Spain: BNE preparation for new Cataloguing Rules Since 2007 BNE has been

Más detalles

APLICACIÓN SOBRE TECNOLOGÍA WEB PARA LA GESTIÓN DE CONTRATOS

APLICACIÓN SOBRE TECNOLOGÍA WEB PARA LA GESTIÓN DE CONTRATOS APLICACIÓN SOBRE TECNOLOGÍA WEB PARA LA GESTIÓN DE CONTRATOS ENTERPRISE WEB APPLICATION FOR CONTRACTS MANAGEMENT José Ramón Hilarión Agüero Institución: ACCS, País: Cuba, Correo electrónico: hilarion@nauta.cu,

Más detalles

Facilities and manufacturing

Facilities and manufacturing Facilities and manufacturing diseño y producción design and production Roomdimensions Ibérica,s.l (RDI) es una empresa experta en la fabricación de mobiliario técnico, diseño integral de soluciones arquitectónicas

Más detalles

Puede pagar facturas y gastos periódicos como el alquiler, el gas, la electricidad, el agua y el teléfono y también otros gastos del hogar.

Puede pagar facturas y gastos periódicos como el alquiler, el gas, la electricidad, el agua y el teléfono y también otros gastos del hogar. SPANISH Centrepay Qué es Centrepay? Centrepay es la manera sencilla de pagar sus facturas y gastos. Centrepay es un servicio de pago de facturas voluntario y gratuito para clientes de Centrelink. Utilice

Más detalles

ESTUDIO, PLANIFICACIÓN Y GESTIÓN DE LA IMPLEMENTACIÓN DE UN SISTEMA BIG DATA PARA LA MONITORIZACIÓN EXTREMO A EXTREMO DE SERVICIOS DE CLIENTE

ESTUDIO, PLANIFICACIÓN Y GESTIÓN DE LA IMPLEMENTACIÓN DE UN SISTEMA BIG DATA PARA LA MONITORIZACIÓN EXTREMO A EXTREMO DE SERVICIOS DE CLIENTE ESTUDIO, PLANIFICACIÓN Y GESTIÓN DE LA IMPLEMENTACIÓN DE UN SISTEMA BIG DATA PARA LA MONITORIZACIÓN EXTREMO A EXTREMO DE SERVICIOS DE CLIENTE Autor: Giménez González, José Manuel. Director: Romero Orobio,

Más detalles

Plan de negocio para la explotación de un sistema de alquiler de bicicletas en la Comunidad de Madrid

Plan de negocio para la explotación de un sistema de alquiler de bicicletas en la Comunidad de Madrid Plan de negocio para la explotación de un sistema de alquiler de bicicletas en la Comunidad de Madrid Autor: Directores: Lago Vázquez, Óscar. Ortíz Marcos, Susana. Entidad Colaboradora: ICAI-Universidad

Más detalles

Crear alarma GATE. Aparecerá una ventana emergente para crear alarma.

Crear alarma GATE. Aparecerá una ventana emergente para crear alarma. Crear alarma GATE Para crear una alarma, accede a través del menú principal de myhome.wattio.com a Seguridad, posteriormente arriba a la derecha haz click en Alarmas. En esta pantalla, en el menú izquierdo,

Más detalles

VI. Appendix VI English Phrases Used in Experiment 5, with their Spanish Translations Found in the Spanish ETD Corpus

VI. Appendix VI English Phrases Used in Experiment 5, with their Spanish Translations Found in the Spanish ETD Corpus VI. Appendix VI English Phrases Used in Experiment 5, with their Spanish Translations Found in the Spanish ETD Corpus App. VI. Table 1: The 155 English phrases and their Spanish translations discovered

Más detalles

ACERCA DE ELGG CARACTERÍSTICAS PARA USUARIO FINAL FUNCIONAMIENTO

ACERCA DE ELGG CARACTERÍSTICAS PARA USUARIO FINAL FUNCIONAMIENTO http://elgg.org/ 2009 ACERCA DE ELGG Elgg es un motor abierto y flexible para la creación de redes sociales. Este motor asume las tareas web más comunes y las funcionalidades de una red social, por lo

Más detalles

ANÁLISIS DE SOLUCIONES PARA LA IMPLEMENTACIÓN DE UNA PLATAFORMA BIG DATA

ANÁLISIS DE SOLUCIONES PARA LA IMPLEMENTACIÓN DE UNA PLATAFORMA BIG DATA ANÁLISIS DE SOLUCIONES PARA LA IMPLEMENTACIÓN DE UNA PLATAFORMA BIG DATA Autora: Lizaso Barrera, Natalia. Directores: Mario Tenés y Sonia García. Entidad Colaboradora: VASS. RESUMEN DEL PROYECTO Hoy en

Más detalles

MANUAL EASYCHAIR. A) Ingresar su nombre de usuario y password, si ya tiene una cuenta registrada Ó

MANUAL EASYCHAIR. A) Ingresar su nombre de usuario y password, si ya tiene una cuenta registrada Ó MANUAL EASYCHAIR La URL para enviar su propuesta a la convocatoria es: https://easychair.org/conferences/?conf=genconciencia2015 Donde aparece la siguiente pantalla: Se encuentran dos opciones: A) Ingresar

Más detalles

Welcome to lesson 2 of the The Spanish Cat Home learning Spanish course.

Welcome to lesson 2 of the The Spanish Cat Home learning Spanish course. Welcome to lesson 2 of the The Spanish Cat Home learning Spanish course. Bienvenidos a la lección dos. The first part of this lesson consists in this audio lesson, and then we have some grammar for you

Más detalles

CONTROLADORA PARA PIXELS CONPIX

CONTROLADORA PARA PIXELS CONPIX The LedEdit Software Instructions 1, Install the software to PC and open English version: When we installed The LedEdit Software, on the desktop we can see following icon: Please Double-click it, then

Más detalles

IDENA Mobile, explorando HTML5

IDENA Mobile, explorando HTML5 VII JORNADAS DE SIG LIBRE IDENA Mobile, explorando HTML5 J. L. Cardoso Santos (1), F. Lacunza Prieto(1) y C. Sabando Grasa (1) (1) 6, Área GeoWeb, Departamento de Sistemas de Información Territorial, Tracasa,

Más detalles

http://mvision.madrid.org

http://mvision.madrid.org Apoyando el desarrollo de carrera de investigadores en imagen biomédica Supporting career development of researchers in biomedical imaging QUÉ ES M+VISION? WHAT IS M+VISION? M+VISION es un programa creado

Más detalles

Autor: Cobreros Herrera, Pablo. RESUMEN DEL PROYECTO

Autor: Cobreros Herrera, Pablo. RESUMEN DEL PROYECTO SISTEMA DE PRESUPUESTACIÓN Y REPORTING PARA LA EMPRESA Autor: Cobreros Herrera, Pablo. Director: Ferrer Hernández, José Manuel. Entidad Colaboradora: ICAI Universidad Pontificia Comillas. RESUMEN DEL PROYECTO

Más detalles

PROBLEMAS PARA LA CLASE DEL 20 DE FEBRERO DEL 2008

PROBLEMAS PARA LA CLASE DEL 20 DE FEBRERO DEL 2008 PROBLEMAS PARA LA CLASE DEL 20 DE FEBRERO DEL 2008 Problema 1 Marketing estimates that a new instrument for the analysis of soil samples will be very successful, moderately successful, or unsuccessful,

Más detalles

UTILIZACIÓN DE LA PLATAFORMA VIRTUAL ekasi EN LA DOCENCIA DE TECNOLOGÍA FARMACÉUTICA. Begoña Calvo Hernáez

UTILIZACIÓN DE LA PLATAFORMA VIRTUAL ekasi EN LA DOCENCIA DE TECNOLOGÍA FARMACÉUTICA. Begoña Calvo Hernáez UTILIZACIÓN DE LA PLATAFORMA VIRTUAL ekasi EN LA DOCENCIA DE TECNOLOGÍA FARMACÉUTICA Begoña Calvo Hernáez Departamento de Farmacia y Tecnología Farmacéutica. Facultad de Farmacia. Universidad del País

Más detalles

Questionnaires for the Evaluation of Awareness in a Groupware Application

Questionnaires for the Evaluation of Awareness in a Groupware Application Questionnaires for the Evaluation of Awareness in a Groupware Application Technical Report DIAB-12-11-1 Montserrat Sendín a, Juan-Miguel López-Gil b, and Víctor López-Jaquero c a GRIHO HCI Research Lab.,

Más detalles

SISTEMA DE TRADUCCIÓN EN TARJETAS INTELIGENTES (SIM TOOLKIT)

SISTEMA DE TRADUCCIÓN EN TARJETAS INTELIGENTES (SIM TOOLKIT) SISTEMA DE TRADUCCIÓN EN TARJETAS INTELIGENTES (SIM TOOLKIT) Autor: García-Merás Capote, Patricia. Director: Casarrubio Feijóo, Carlos. Entidad Colaboradora: Gemplus S.A. RESUMEN DEL PROYECTO La comunicación

Más detalles

MANUAL BREVE DE INSTRUCCIONES PARA INSTALAR EL BLOQUE DE VIDEOCONFERENCIA EN MOODLE

MANUAL BREVE DE INSTRUCCIONES PARA INSTALAR EL BLOQUE DE VIDEOCONFERENCIA EN MOODLE MANUAL BREVE DE INSTRUCCIONES PARA INSTALAR EL BLOQUE DE VIDEOCONFERENCIA EN MOODLE AUTOR: Dr. Agustín Rico Guzmán ENSEÑANZA MEDICA CAR Zamora Michoacán México REQUISITOS BLOQUE DE VIDECONFERENCIA EN MOODLE,

Más detalles