Tutorial/Curso Web Components

Hoy en día, Internet juega un papel muy importante en nuestras vidas y las páginas web son el embalaje de todo aquello que nos ofrece. Sin embargo, existen muchos dominios inactivos o abandonados, muchas veces debido bien a la dificultad que supone crear uno mismo su propia página web y mantenerla actualizada a lo largo del tiempo, bien al gran coste que conlleva contratar a alguien para que lo haga, ya que muchas veces se requieren conocimientos expertos de HTML, JavaScript y CSS para construir una página web de calidad. Por tanto, lo que necesitan tanto diseñadores web expertos como aquellos que no lo son, es una técnica que les permita facilitar tanto el proceso de creación de páginas web como su mantenimiento; Web Components es una tecnología HTML novedosa que nos ayuda en este sentido, siendo el objetivo de este documento exponer los principios básicos de su funcionamiento. El punto principal de este Proyecto es realizar un tutorial, que por un lado explique los fundamentos de Web Components, y que por otro lado muestre un ejemplo más elaborado de uso de esta tecnología a nivel de producción, todo ello empleando las cuatro especificaciones de Web Components: Custom Elements, HTML Templates, HTML Imports y Shadow DOM.

Técnicas de Gamification para entregas de trabajos online: comprobaciones de la fase de análisis de la compilación

Este Trabajo de Fin de Grado (TFG) tiene el objetivo de aportar un sistema de enseñanza innovador, un sistema de enseñanza mediante el cual se consiga involucrar a los alumnos en tareas y prácticas en las que se adquieran conocimientos a la vez que se siente un ambiente de juego, es decir, que se consiga aprender de forma divertida. Está destinado al sistema educativo de la Escuela Técnica Superior de Ingenieros Informáticos de la Universidad Politécnica de Madrid, en concreto a las asignaturas relacionadas con los Procesadores de Lenguajes. La aplicación desarrollada en este trabajo está destinada tanto a los profesores de las asignaturas de Procesadores de Lenguajes como a los alumnos que tengan alguna relación con esas asignaturas, consiguiendo mayor interacción y diversión a la hora de realizar la tareas y prácticas de las asignaturas. Para los dos tipos de usuarios descritos anteriormente, la aplicación está configurada para que puedan identificarse mediante sus credenciales, comprobándose si los datos introducidos son correctos, y así poder acceder al sistema. Dependiendo de qué tipo de usuario se identifique, tendrá unas opciones u otras dentro del sistema. Los profesores podrán dar de alta, ver, modificar o dar de baja las configuraciones para los analizadores de los lenguajes correspondientes a las diferentes asignaturas que están configurados previamente en el sistema. Además, los profesores pueden dar de alta, ver, modificar o dar de baja los fragmentos de código que formarán los ficheros correspondientes a las plantillas de pruebas del analizador léxico que se les ofrece a los alumnos para realizar comprobaciones de las prácticas. Mediante la aplicación podrán establecer diferentes características y propiedades de los fragmentos que incorporen al sistema. Por otra parte, los alumnos podrán realizar la configuración del lenguaje, definido por los profesores, para la parte del analizador léxico de las prácticas. Esta configuración será guardada para el grupo al que corresponde el alumno, pudiendo realizar modificaciones cualquier miembro del grupo. De esta manera, se podrán posteriormente establecer las relaciones necesarias entre los elementos del lenguaje según la configuración de los profesores y los elementos referentes a las prácticas de los alumnos.Además, los alumnos podrán realizar comprobaciones de la parte léxica de sus prácticas mediante los ficheros que se generan por el sistema en función de sus opciones de práctica y los fragmentos añadidos por los profesores. De esta manera, se informará a los alumnos del éxito de las pruebas o bien de los fallos ocasionados con sus resultados, bien por el formato del archivo subido como resultado de la prueba o bien por el contenido incorrecto de este mismo. Todas las funciones que ofrece esta aplicación son completamente on-line y tendrán una interfaz llamativa y divertida, además de caracterizarse por su facilidad de uso y su comodidad. En el trabajo realizado para este proyecto se cumplen tanto las Pautas de Accesibilidad para Contenidos Web (WCAG 2.0), así como las propiedades de un código HTML 5 y CSS 3 de manera correcta, para así conseguir que los usuarios utilicen una aplicación fácil, cómoda y atractiva.---ABSTRACT---This Final Year Project (TFG) aims to contribute the educational system of the School of Computer Engineering at the Polytechnic University of Madrid, especially in subjects related with Language Processors. This project is an interactive learning system whose goal is to learn in an amusing environment. To realize this target, the system involves students, using environments of games in tasks and practices. The application developed in this project is designed for both professors of the subjects of Language Processors and students who have some relation to these subjects. This perspective achieve more interaction and a funny environment during the subject‘s tasks. The application is configured in order to the users can be identified by their credentials, checking whether the identification data are correct to have access to the system. According on what type of user is identified, they will have different options within the system. Professors will be able to register, modify or delete settings for the scanner of languages for all the subjects preconfigured in the system. Additionally, professors can register, show, modify or remove the code of the templates from scanner tests that are offered to students for testing the practical exercises. The professors may provide also different characteristics and properties of fragments incorporated in the system. Moreover, students can make the configuration of languages, getting in the systems by the administrators, for the scanner module of their practical exercises. This configuration will be saved for the group of the student. This model can also be changed by any group member. The system permits also establish later the relationships between the elements of language fixes by professors and elements developed by the students. Students could check the lexical part of their practical exercises through files that are created according to their practical options and the fragments added by professors. Thus students will be informed of success or failure in the uploaded files format and in the content of them. All functions provide by this application are completely on-line and will have a striking and funny interface, also characterized by its ease of use and comfort.The work reaches both the Web Content Accessibility Guidelines (WCAG 2.0), and the properties of an HTML 5 and CSS 3 code correctly, in order to get the users to get an easy, convenient application and attractive.

Diseño e implementación de persistencia en bases de datos basadas en Google App Engine

El mundo de la web admite actualmente los productos desarrollados tanto por desarrolladores profesionales como por usuarios finales con un conocimiento más limitado. A pesar de la diferencia que se puede suponer de calidad entre los productos de ambos, las dos soluciones pueden ser reconocidas y empleadas en una aplicación. En la Web 2.0, este comportamiento se observa en el desarrollo de componentes web. Lo que se persigue en el trabajo es desarrollar un modelo de persistencia que, apoyado por un lado servidor y por uno cliente, recoja las métricas de calidad de los componentes cuando los usuarios interaccionan con ellos. A partir de estas métricas, es posible mejorar la calidad de estos componentes. La forma en la que se van a recoger las métricas es a través de PicBit, la aplicación desarrollada para que los usuarios puedan interconectar diferentes componentes entre ellos sin restricciones, de forma que tras interactuar con ellos puedan expresar su grado de satisfacción, que se recoge para la evaluación de la calidad. Se definen también unas métricas intrínsecas al componente, no determinadas por el usuario y que sirven como referencia de la evaluación. Cuando se tienen tanto las métricas intrínsecas como procedentes del usuario, se realiza una correlación entre ellas que permite analizar las posibles desviaciones entre ellas y determinar la calidad propia del componente. Las conclusiones que se pueden obtener del trabajo es que cuando los usuarios pueden realizar pruebas de usabilidad de forma libre, sin restricciones, es mayor la posibilidad de obtener resultados favorables porque estos resultados muestran cómo usará un usuario final la aplicación. Este método de trabajo se ve favorecido por el número de herramientas que se pueden utilizar hoy para monitorizar el flujo de usuario en el servicio.---ABSTRACT---Nowadays, the web world deals with products developed both by professional developers and by end-users with some limited knowledge. Although the difference between both can be important in quality terms, both are accepted and included in web applications. In web 2.0, this behavior can be recognized in the web components development. The goal pursued in the work presented is to create a persistent model that, supported by an end and a back side, will pick the quality measures of the components when the users interact with them. These measures are the starting point for improving the components. The way in which the measures are going to be picked is through PicBit, the application we have developed in order to allow the users playing with the components without restrictions or rules, so after the interaction they can give their satisfaction mark with the application. This will be the value used to evaluate the quality. Some own measures are also defined, which does not depend on the user and which will be used as a reference point of the evaluation. When the measures from users and own ones are got, their correlation is analyzed to study the differences between them and to establish the quality of the component. The conclusion that can be gained from the project is the importance of giving freedom for users when doing usability tests because it increases the chance to get positive results, in the way the users execute the operations they want with the application. This method is fortunate for having such a number of tools to monitor the user flow when using the service.

Desarrollo de una aplicación web con Spring Framework para un gestor de un recetario

Este proyecto tiene como intención llevar a cabo el desarrollo de una aplicación basada en tecnologías Web utilizando Spring Framework, una infraestructura de código abierto para la plataforma Java. Se realizará primero un estudio teórico sobre las características de Spring para luego poder implementar una aplicación utilizando dicha tecnología como ejemplo práctico. La primera parte constará de un análisis sobre las características más significativas de Spring, recogiendo de esta forma información sobre todos los componentes del framework necesarios para desarrollar una aplicación genérica. El objetivo es descubrir y analizar cómo Spring facilita la implementación de un proyecto con arquitectura MVC y cómo permite integrar seguridad, internacionalización y otros conceptos de forma transparente. La segunda parte, el desarrollo de la aplicación web, sirve como demostración práctica de cómo utilizar los conocimientos recogidos sobre Spring. Se desarrollará una aplicación que gestiona un recetario generado por una comunidad de usuarios. La aplicación contiene un registro de usuarios que deberán autenticarse para poder ver sus datos personales y modificarlos si lo desean. Dependiendo del tipo de usuarios, tendrán acceso a distintas zonas de la aplicación y tendrán un rango distinto de acciones disponibles. Las acciones principales son la visualización de recetas, la creación de recetas, la modificación o eliminación de recetas propias y la modificación o eliminación de recetas de los demás usuarios. Las recetas constarán de un nombre, una descripción, una fotografía del resultado, tiempos estimados, dificultad estimada, una lista de ingredientes y sus cantidades y finalmente una serie de pasos con fotografías demostrativas si se desea añadir. Los administradores, un tipo específico de usuarios, podrán acceder a una lista de usuarios para monitorizarlos, modificarlos o añadir y quitarles permisos. ABSTRACT The purpose of this project is the development of an application based on Web technologies with the use of Spring Framework, an open-source application framework for the Java platform. A theoretical study on the characteristics of Spring will be performed first, followed by the implementation of an application using said technology to show as object lesson. The first part consists of an analysis of the most significant features of Spring, thus collecting information on all components of the framework necessary to develop a generic app. The goal is to discover and analyze how Spring helps develop a project based on a MVC architecture and how it allows seamless integration of security, internationalization and other concepts. The second part, the development of the web application, serves as a practical demonstration of how to use the knowledge gleaned about Spring. An application will be developed to manage a cookbook generated by a community of users. The application has a set of users who have to authenticate themselves to be able to see their personal data and modify it if they wish to do so. Depending on the user type, the user will be able to access different parts of the application and will have a different set of possible actions. The main possible actions are: creation recipes, modification or deletion of owned recipes and the modification and deletion of any recipe. The recipes consist its name, a description, a photograph, estimated times and difficulties, a list of ingredients along with their quantities and lastly a series of steps to follow along with demonstrative photographs if desired; and other information such as categories or difficulties. The administrators, a specific type of users, will have access to a list of users where they can monitor them, modify them or grant and remove privileges.

Evaluación del uso de librerías Modelo-Vista-Controlador para el desarrollo de servicios Web. Caso de estudio: React

El proyecto consiste en analizar los problemas de las librerías MVC (Model-View-Controller) existentes y que se usan para el desarrollo de servicios web, evaluando las características y aplicabilidad de las nuevas librerías que han aparecido. Se realizará una evaluación de las distintas librerías JavaScript y se compararán con las emergentes identificando qué problemas resuelven. Se estudiarán las características, las ventajas, así como las tecnologías que podemos encontrar alrededor de React y Flux ilustrándolas con un ejemplo sencillo. Finalmente, se ilustrará mediante un ejemplo práctico como funcionan estas tecnologías en una versión simplificada del proyecto Quiz de la asignatura Computación en Red concluyendo que ventajas e inconvenientes presenta en una aplicación real.

Tema 6, parte 2: APIs de HTML5 para móviles

En este tema se hace una introducción a los APIs de HTML5 con utilidad en dispositivos móviles.

Tema 4: Frameworks JavaScript. jQuery

En este tema se ven las ventajas de usar un framework para escribir código en JavaScript. Se describe jQuery, uno de los frameworks más difundidos en la actualidad.

UncertWeb processing service:making models easer to access on the web

Models are central tools for modern scientists and decision makers, and there are many existing frameworks to support their creation, execution and composition. Many frameworks are based on proprietary interfaces, and do not lend themselves to the integration of models from diverse disciplines. Web based systems, or systems based on web services, such as Taverna and Kepler, allow composition of models based on standard web service technologies. At the same time the Open Geospatial Consortium has been developing their own service stack, which includes the Web Processing Service, designed to facilitate the executing of geospatial processing - including complex environmental models. The current Open Geospatial Consortium service stack employs Extensible Markup Language as a default data exchange standard, and widely-used encodings such as JavaScript Object Notation can often only be used when incorporated with Extensible Markup Language. Similarly, no successful engagement of the Web Processing Service standard with the well-supported technologies of Simple Object Access Protocol and Web Services Description Language has been seen. In this paper we propose a pure Simple Object Access Protocol/Web Services Description Language processing service which addresses some of the issues with the Web Processing Service specication and brings us closer to achieving a degree of interoperability between geospatial models, and thus realising the vision of a useful 'model web'.

3D Environment for Virtual Collections

This paper describes a framework for building virtual collections of several digital objects and presenting them in an interactive 3D environment, rendered in a web browser. Using that environment, the website visitor can examine a given collection from a first-person perspective by walking around and inspecting each object in detail by viewing it from any angle. The rendering and visualization of the models is done solely by the web browser with the use of HTML5 and the Three.js JavaScript library, without any additional requirements.

Majestic Gamification:a case study in the adoption of a service innovation

Purpose: A case study is presented concerning a gamified awards system designed to encourage software users to explore a suite of tools, and to share their expertise level in profile pages. Majestic is a high-tech business based in the West Midlands (UK) w hich offers a Link Intelligence database using a Software as a Service (SaaS) business model. Customers leverage the database for tasks including Search Engine Optimisation (SEO) by using a suite of web-based tools. Getting to know all the tools and how they can be deployed to good effect represents a considerable learning challenge, and Majestic were aware that. Design/methodology/approach: We present the development of Majestic Awards as a case study highlighting the most important design decisions. Then we reflect on the development process as an example of innovation adoption, thereby identifying resources and cu ltura l factors which were critical in ensuring the success of the project. Findings: The gamified awards system makes learning the tools an enjoyable, explorative experience. Success factors included identifying a clear business goal, the process/ project f it, senior management buy in, and identifying the knowledge and resources to resolve t echnical issues. Originality/value: Prior to gamification of the system, only the most expert users regu larly utilized all the tools. The user base is now more knowl edgable about the system and some users choose to use the system to publicize their expertise.

Web Based Bicycle Trip Planning for Broward County, Florida

To promote the use of bicycle transportation mode in times of increasing urban traffic congestion, Broward County Metropolitan Planning Organization funded the development of a Web-based trip planner for cyclists. This presentation demonstrates the integration of the ArcGIS Server 9.3 environment with the ArcGIS JavaScript Extension for Google Maps API and the Google Local Search Control for Maps API. This allows the use of Google mashup GIS functionality, i.e., Google local search for selection of trip start, trip destination, and intermediate waypoints, and the integration of Google Maps base layers. The ArcGIS Network Analyst extension is used for the route search, where algorithms for fastest, safest, simplest, most scenic, and shortest routes are imbedded. This presentation also describes how attributes of the underlying network sources have been combined to facilitate the search for optimized routes.

Web Based Bicycle Trip Planning for Broward County, Florida

To promote the use of bicycle transportation mode in times of increasing urban traffic congestion, Broward County Metropolitan Planning Organization funded the development of a Web-based trip planner for cyclists. This presentation demonstrates the integration of the ArcGIS Server 9.3 environment with the ArcGIS JavaScript Extension for Google Maps API and the Google Local Search Control for Maps API. This allows the use of Google mashup GIS functionality, i.e., Google local search for selection of trip start, trip destination, and intermediate waypoints, and the integration of Google Maps base layers. The ArcGIS Network Analyst extension is used for the route search, where algorithms for fastest, safest, simplest, most scenic, and shortest routes are imbedded. This presentation also describes how attributes of the underlying network sources have been combined to facilitate the search for optimized routes.

Desarrollo de una app para la generación preventiva de alertas sanitarias

Desde hace unos años, parece que la informática ha ido invadiendo numerosos campos de la ciencia, se ha ido consolidando como parte fundamental en el desarrollo y la tecnología y ya se puede ver como motor de la economía, las comunicaciones, el comercio e incluso, la medicina. Este trabajo se centra en la aplicación de la informática en el área de las enfermedades infecciosas, intentando contribuir con una nueva idea que revolucione el mundo de las mismas dentro de la medicina, en una situación en la que el término “Smart City” cada vez es más importante. Se trata de un sistema formado por una app para Android y una web controlada y gestionada por un médico, la cual permite identificar posibles usuarios contagiados, localizar focos de contagios y gestionar de una manera óptima, el estado y los avisos de cada usuario. En esta memoria se describe el trabajo realizado, la arquitectura del sistema, las tecnologías utilizadas, el diseño de la aplicación móvil y de la página web, su implementación, las pruebas realizadas, las conclusiones a las que se ha llegado y las posibles mejoras que se podrían incluir en el proyecto en un futuro.

Jogo Oril para a Plataforma Facebook

O Presente trabalho consiste no desenvolvimento de um jogo de origem africana para a plataforma web voltado a este novo segmento, apresentando todas as etapas importantes da composição de um jogo social. Utilizando linguagem de programação como HTML5, Javascript e CSS, foi desenvolvido um jogo de Oril. O caráter social do jogo se deu na integração da aplicação com a rede social Facebook. Utilizando as ferramentas disponibilizadas pela plataforma Facebook Developers, foi possível fazer com que o jogo fosse carregado dentro da própria página do Facebook, para que os arquivos fossem carregados foi necessário um servidor hospedeiro com suporte ao protocolo HTTPS, devido as rígidas exigências da política de segurança do Facebook.

HTML5 no contexto de desenvolvimento e implementação de plataformas móveis com interfaces tácteis

Dissertação apresentada ao Instituto Politécnico de Castelo Branco para cumprimento dos requisitos necessários à obtenção do grau de Mestre em Desenvolvimento de Software e Sistemas Interativos, realizada sob a orientação científica do Doutor Pedro Nuno Moreira da Silva, Professor Adjunto da Unidade Técnico-Científica de Informática do Departamento da Escola Superior de Tecnologia do Instituto Politécnico de Castelo Branco.