Lightweight compilation of (C)LP to JavaScript

We present and evaluate a compiler from Prolog (and extensions) to JavaScript which makes it possible to use (constraint) logic programming to develop the client side of web applications while being compliant with current industry standards. Targeting JavaScript makes (C)LP programs executable in virtually every modern computing device with no additional software requirements from the point of view of the user. In turn, the use of a very high-level language facilitates the development of high-quality, complex software. The compiler is a back end of the Ciao system and supports most of its features, including its module system and its rich language extension mechanism based on packages. We present an overview of the compilation process and a detailed description of the run-time system, including the support for modular compilation into separate JavaScript code. We demonstrate the maturity of the compiler by testing it with complex code such as a CLP(FD) library written in Prolog with attributed variables. Finally, we validate our proposal by measuring the performance of some LP and CLP(FD) benchmarks running on top of major JavaScript engines.

Diseño e implementación de un framework de funcionalidades Javascript en entornos de programación web

El presente documento aborda la problemática surgida en torno al desarrollo de una plataforma para gestionar las guías docentes de la Universidad Politécnica de Madrid, centrándose en el uso de las tecnologías Javascript, así como de lo algoritmos, plugins y bibliotecas auxiliares creadas y utilizadas. Por último, se muestran los resultados obtenidos del análisis y puesta en práctica de lo expuesto en el documento, así como conclusiones y sugerencias de futuras líneas de trabajo para este mismo proyecto. ---ABSTRACT---This document explains the problems found when developing a web service whose purpose is the management of learning guides at \Universidad Politecnica de Madrid". This final thesis focus on the use of Javascript technologies and the plugins, algorithms and auxiliar libraries used and developed. Finally, results of the analysis, development of the ideas exposed in this document, and conclusions and future working lines are presented.

Implementación de un cliente-servidor con Q4S basado en Javascript

Con este proyecto se busca la posibilidad de manejar la calidad de servicio de un grupo de usuarios, llevando a cabo para ello un seguimiento continuo de su conexión y los parámetros característicos de ésta. Una vez detectado un parámetro defectuoso, ya fuese por falta o exceso de capacidad, se actuará sobre la red, de modo que el usuario obtenga la calidad que le corresponda. El cuánto le corresponde a cada usuario vendrá fijado en un servidor, que al recibir el aviso de parámetro defectuoso, mandará un mensaje al controlador de la red para actuar.

Opportunities and Challenges of Implementing P2P Streaming Applications in the Web

P2P applications are increasingly present on the web. We have identified a gap in current proposals when it comes to the use of traditional P2P overlays for real-time multimedia streaming. We analyze the possibilities and challenges to extend WebRTC in order to implement JavaScript APIs for P2P streaming algorithms.

VladBot. Robot para posicionamiento de medida

VladBot es un robot autónomo diseñado para posicionar en interiores un micrófono de medida. Este prototipo puede valorar la idea de automatizar medidas acústicas en interiores mediante un robot autónomo. Posee dos ruedas motrices y una rueda loca. Ésta rueda loca aporta maniobrabilidad al robot. Un soporte extensible hecho de aluminio sostiene el micrófono de medida. VladBot ha sido diseñado con tecnologías de bajo coste y bajo una plataforma abierta, Arduino. Arduino es una plataforma electrónica libre. Esto quiere decir que los usuarios tienen libre acceso a toda la información referente a los micro-controladores (hardware) y referente al software. Ofrece un IDE (Integrated Development Environment, en español, Entorno de Desarrollo Integrado) de forma gratuita y con un sencillo lenguaje de programación, con el que se pueden realizar proyectos de cualquier tipo. Además, los usuarios disponen de un foro donde encontrar ayuda, “Arduino Forum”. VladBot se comunica con el usuario a través de Bluetooth, creando un enlace fiable y con un alcance suficiente (aproximadamente 100 metros) para que controlar a VladBot desde una sala contigua. Hoy en día, Bluetooth es una tecnología implantada en casi todos los ordenadores, por lo que no necesario ningún sistema adicional para crear dicho enlace. Esta comunicación utiliza un protocolo de comunicaciones, JSON (JavaScript Object Notation). JSON hace que la comunicación sea más fiable, ya que sólo un tipo de mensajes preestablecidos son reconocidos. Gracias a este protocolo es posible la comunicación con otro software, permitiendo crear itinerarios en otro programa externo. El diseño de VladBot favorece su evolución hasta un sistema más preciso ya que el usuario puede realizar modificaciones en el robot. El código que se proporciona puede ser modificado, aumentando las funcionalidades de VladBot o mejorándolas. Sus componentes pueden ser cambiados también (incluso añadir nuevos dispositivos) para aumentar sus capacidades. Vladbot es por tanto, un sistema de transporte (de bajo coste) para un micrófono de medida que se puede comunicar inalámbricamente con el usuario de manera fiable. ABSTRACT. VladBot is an autonomous robot designed to indoor positioning of a measurement microphone. This prototype can value the idea of making automatic acoustic measurements indoor with an autonomous robot. It has two drive wheels and a caster ball. This caster ball provides manoeuvrability to the robot. An extendible stand made in aluminium holds the measurement microphone. VladBot has been designed with low cost technologies and under an open-source platform, Arduino. Arduino is a freeFsource electronics platform. This means that users have free access to all the information about micro-controllers (hardware) and about the software. Arduino offers a free IDE (Integrated Development Environment) with an easy programming language, which any kind of project can be made with. Besides, users have a forum where find help, “Arduino Forum”. VladBot communicates with the user by Bluetooth, creating a reliable link with enough range (100 meters approximately) for controlling VladBot in the next room. Nowadays, Bluetooth is a technology embedded in almost laptops, so it is not necessary any additional system for create this link. This communication uses a communication protocol, JSON (JavaScript Object Notation). JSON makes the communication more reliable, since only a preFestablished kind of messages are recognised. Thanks to this protocol is possible the communication with another software, allowing to create routes in an external program. VladBot´s design favours its evolution to an accurate system since the user can make modifications in the robot. The code given can be changed, increasing VladBot´s uses or improving these uses. Their components can be changed too (even new devices can be added) for increasing its abilities. So, VladBot is a (low cost) transport system for a measurement microphone, which can communicate with the user in a reliable way.

La Referencia Catastral como mecanismo de georreferenciación.

El principal mecanismo de georreferenciación es numérico, asociando un conjunto de coordenadas a los puntos representativos del tipo de entidad que se pretende referenciar, si bien no es el único. El segundo mecanismo es alfanumérico usando la dirección postal. Ambos mecanismos presentan dificultades ya sea del lado del ciudadano, por no interpretar correctamente las coordenadas, o por la falta de consistencia en las denominaciones de las vías. En este documento se presenta una propuesta alternativa basada en georreferenciación simbólica que se apoya en los identificadores que gestiona y mantiene la Dirección General de Catastro (DGC) y que ya se están utilizando en el plano del derecho (notarios y registradores) o en el de los tributos (agencia tributaria). La propuesta de mecanismo de georreferenciación pasa por usar las Referencias Catastrales (RC) para localizar infraestructuras y para registrar todo tipo de instalaciones que afectan a la mayoría de los ciudadanos. En esta línea se apunta la necesidad de proveer servicios web que permitan recuperar listas de RC, que se parezcan a un patrón suministrado, así como la posición de dichas RC (GeoCoder), la posibilidad de solicitar la descarga del polígono envolvente de la RC, o determinar la RC más próxima a una determinada posición definida por sus coordenadas. Todo ello usando los formatos de intercambio de información que no requieran la disposición de un servicio intermediario (proxy), como ocurre con los formatos de la familia XML (GML). Se propone el formato GeoJSON, basado en el estándar WKT del OGC y que es fácilmente procesable en entornos web con JavaScript.

Estudio de las posibilidades de los datos abiertos enlazados (Linked Open Data) para la realización de mashups de ámbito geográfico.

La web ha sufrido una drástica transformación en los últimos años, debido principalmente a su popularización y a la enorme cantidad de información que alberga. Debido a estos factores se ha dado el salto de la denominada Web de Documentos, a la Web Semántica, donde toda la información está relacionada con otra. Las principales ventajas de la información enlazada estriban en la facilidad de reutilización, accesibilidad y disponibilidad para ser encontrada por el usuario. En este trabajo se pretende poner de manifiesto la utilidad de los datos enlazados aplicados al ámbito geográfico y mostrar como pueden ser empleados hoy en día. Para ello se han explotado datos enlazados de carácter espacial provenientes de diferentes fuentes, a través de servidores externos o endpoints SPARQL. Además de eso se ha trabajado con un servidor privado capaz de proporcionar información enlazada almacenada en un equipo personal. La explotación de información enlazada se ha implementado en una aplicación web en lenguaje JavaScript, tratando de abstraer totalmente al usuario del tratamiento de los datos a nivel interno de la aplicación. Esta aplicación cuenta además con algunos módulos y opciones capaces de interactuar con las consultas realizadas a los servidores, consiguiendo un entorno más intuitivo y agradable para el usuario. ABSTRACT: In recent years the web has suffered a drastic transformation because of the popularization and the huge amount of stored information. Due to these factors it has gone from Documents web to Semantic web, where the data are linked. The main advantages of Linked Data lie in the ease of his reuse, accessibility and availability to be located by users. The aim of this research is to highlight the usefulness of the geographic linked data and show how can be used at present time. To get this, the spatial linked data coming from several sources have been managed through external servers or also called endpoints. Besides, it has been worked with a private server able to provide linked data stored in a personal computer. The use of linked data has been implemented in a JavaScript web application, trying completely to abstract the internally data treatment of the application to make the user ignore it. This application has some modules and options that are able to interact with the queries made to the servers, getting a more intuitive and kind environment for users.

Advanced system of planning and organization of classes at the university

This document is the result of a process of web development to create a tool that will allow to Cracow University of Technology consult, create and manage timetables. The technologies chosen for this purpose are Apache Tomcat Server, My SQL Community Server, JDBC driver, Java Servlets and JSPs for the server side. The client part counts on Javascript, jQuery, AJAX and CSS technologies to perform the dynamism. The document will justify the choice of these technologies and will explain some development tools that help in the integration and development of all this elements: specifically, NetBeans IDE and MySQL workbench have been used as helpful tools. After explaining all the elements involved in the development of the web application, the architecture and the code developed are explained through UML diagrams. Some implementation details related to security are also deeper explained through sequence diagrams. As the source code of the application is provided, an installation manual has been developed to run the project. In addition, as the platform is intended to be a beta that will be grown, some unimplemented ideas for future development are also exposed. Finally, some annexes with important files and scripts related to the initiation of the platform are attached. This project started through an existing tool that needed to be expanded. The main purpose of the project along its development has focused on setting the roots for a whole new platform that will replace the existing one. For this goal, it has been needed to make a deep inspection on the existing web technologies: a web server and a SQL database had to be chosen. Although the alternatives were a lot, Java technology for the server was finally selected because of the big community backwards, the easiness of modelling the language through UML diagrams and the fact of being free license software. Apache Tomcat is the open source server that can use Java Servlet and JSP technology. Related to the SQL database, MySQL Community Server is the most popular open-source SQL Server, with a big community after and quite a lot of tools to manage the server. JDBC is the driver needed to put in contact Java and MySQL. Once we chose the technologies that would be part of the platform, the development process started. After a detailed explanation of the development environment installation, we used UML use case diagrams to set the main tasks of the platform; UML class diagrams served to establish the existing relations between the classes generated; the architecture of the platform was represented through UML deployment diagrams; and Enhanced entity–relationship (EER) model were used to define the tables of the database and their relationships. Apart from the previous diagrams, some implementation issues were explained to make a better understanding of the developed code - UML sequence diagrams helped to explain this. Once the whole platform was properly defined and developed, the performance of the application has been shown: it has been proved that with the current state of the code, the platform covers the use cases that were set as the main target. Nevertheless, some requisites needed for the proper working of the platform have been specified. As the project is aimed to be grown, some ideas that could not be added to this beta have been explained in order not to be missed for future development. Finally, some annexes containing important configuration issues for the platform have been added after proper explanation, as well as an installation guide that will let a new developer get the project ready. In addition to this document some other files related to the project are provided: - Javadoc. The Javadoc containing the information of every Java class created is necessary for a better understanding of the source code. - database_model.mwb. This file contains the model of the database for MySQL Workbench. This model allows, among other things, generate the MySQL script for the creation of the tables. - ScheduleManager.war. The WAR file that will allow loading the developed application into Tomcat Server without using NetBeans. - ScheduleManager.zip. The source code exported from NetBeans project containing all Java packages, JSPs, Javascript files and CSS files that are part of the platform. - config.properties. The configuration file to properly get the names and credentials to use the database, also explained in Annex II. Example of config.properties file. - db_init_script.sql. The SQL query to initiate the database explained in Annex III. SQL statements for MySQL initialization. RESUMEN. Este proyecto tiene como punto de partida la necesidad de evolución de una herramienta web existente. El propósito principal del proyecto durante su desarrollo se ha centrado en establecer las bases de una completamente nueva plataforma que reemplazará a la existente. Para lograr esto, ha sido necesario realizar una profunda inspección en las tecnologías web existentes: un servidor web y una base de datos SQL debían ser elegidos. Aunque existen muchas alternativas, la tecnología Java ha resultado ser elegida debido a la gran comunidad de desarrolladores que tiene detrás, además de la facilidad que proporciona este lenguaje a la hora de modelarlo usando diagramas UML. Tampoco hay que olvidar que es una tecnología de uso libre de licencia. Apache Tomcat es el servidor de código libre que permite emplear Java Servlets y JSPs para hacer uso de la tecnología de Java. Respecto a la base de datos SQL, el servidor más popular de código libre es MySQL, y cuenta también con una gran comunidad detrás y buenas herramientas de modelado, creación y gestión de la bases de datos. JDBC es el driver que va a permitir comunicar las aplicaciones Java con MySQL. Tras elegir las tecnologías que formarían parte de esta nueva plataforma, el proceso de desarrollo tiene comienzo. Tras una extensa explicación de la instalación del entorno de desarrollo, se han usado diagramas de caso de UML para establecer cuáles son los objetivos principales de la plataforma; los diagramas de clases nos permiten realizar una organización del código java desarrollado de modo que sean fácilmente entendibles las relaciones entre las diferentes clases. La arquitectura de la plataforma queda definida a través de diagramas de despliegue. Por último, diagramas EER van a definir las relaciones entre las tablas creadas en la base de datos. Aparte de estos diagramas, algunos detalles de implementación se van a justificar para tener una mejor comprensión del código desarrollado. Diagramas de secuencia ayudarán en estas explicaciones. Una vez que toda la plataforma haya quedad debidamente definida y desarrollada, se va a realizar una demostración de la misma: se demostrará cómo los objetivos generales han sido alcanzados con el desarrollo actual del proyecto. No obstante, algunos requisitos han sido aclarados para que la plataforma trabaje adecuadamente. Como la intención del proyecto es crecer (no es una versión final), algunas ideas que se han podido llevar acabo han quedado descritas de manera que no se pierdan. Por último, algunos anexos que contienen información importante acerca de la plataforma se han añadido tras la correspondiente explicación de su utilidad, así como una guía de instalación que va a permitir a un nuevo desarrollador tener el proyecto preparado. Junto a este documento, ficheros conteniendo el proyecto desarrollado quedan adjuntos. Estos ficheros son: - Documentación Javadoc. Contiene la información de las clases Java que han sido creadas. - database_model.mwb. Este fichero contiene el modelo de la base de datos para MySQL Workbench. Esto permite, entre otras cosas, generar el script de iniciación de la base de datos para la creación de las tablas. - ScheduleManager.war. El fichero WAR que permite desplegar la plataforma en un servidor Apache Tomcat. - ScheduleManager.zip. El código fuente exportado directamente del proyecto de Netbeans. Contiene todos los paquetes de Java generados, ficheros JSPs, Javascript y CSS que forman parte de la plataforma. - config.properties. Ejemplo del fichero de configuración que permite obtener los nombres de la base de datos - db_init_script.sql. Las consultas SQL necesarias para la creación de la base de datos.

A CAD development strategy for the next years

This paper suggests a new strategy to develop CAD applications taking into account some of the most interesting proposals which have recently appeared in the technology development arena. Programming languages, operating systems, user devices, software architecture, user interfaces and user experience are among the elements which are considered for a new development framework. This strategy considers the organizational and architectural aspects of the CAD application together with the development framework. The architectural and organizational aspects are based on the programmed design concept, which can be implemented by means of a three-level software architecture. These levels are the conceptual level based on a declarative language, the mathematical level based on the geometric formulation of the product model and the visual level based on the polyhedral representation of the model as required by the graphic card. The development framework which has been considered is Windows 8. This operating system offers three development environments, one for web pplications (HTML5 + CSS3 + JavaScript), and other for native applications C/C++) and of course yet another for .NET applications (C#, VB, F#, etc.). The use rinterface and user experience for non-web application is described ith XAML (a well known declarative XML language) and the 3D API for games and design applications is DirectX. Additionally, Windows 8 facilitates the use of hybrid solutions, in which native and managed code can interoperate easily. Some of the most remarkable advantages of this strategy are the possibility of targeting both desktop and touch screen devices with the same development framework, the usage of several programming paradigms to apply the most appropriate language to each domain and the multilevel segmentation of developers and designers to facilitate the implementation of an open network of collaborators.

Desarrollo de una aplicación Web empresarial de ayuda a la producción de campañas publicitarias

La creación de esta aplicación web empresarial surge con la necesidad de optimizar el tiempo en el proceso de creación de una campaña publicitaria de email marketing. El objetivo principal de este trabajo es automatizar el proceso de validación de los campos de un formulario web. Un formulario web [6] es un documento digital en el que los usuarios introducen sus datos personales como nombre, apellido, dirección, documento de identidad, entre otros. Estos datos posteriormente serán procesados y almacenados en un base de datos para luego ser enviados al anunciante. El proceso de validación se refiere a la programación del formulario web en la parte del cliente usando tecnologías web como JavaScript y HTML5, para controlar que los datos introducidos por el usuario en el formulario, sean correctos. Cada campo de un formulario web tiene una validación específica que depende de varios factores, como son el país de lanzamiento de la campaña y el campo a validar. De esta forma dependiendo del tipo de validación se genera un fichero JavaScript con todas las validaciones de dicho formulario. Una de las finalidades de este trabajo es que cualquier usuario de la empresa pueda programar un formulario web, sin tener conocimientos previos de programación, ya que la programación se realiza de forma transparente al usuario. Este es un resumen básico de la aplicación web, sin embargo se debe tener en cuenta una serie de requisitos y parámetros para hacerlo más eficiente y personalizable dependiendo de las necesidades del producto final de cada campaña publicitaria. Todos estos aspectos se explicaran en detalle en los siguientes apartados. Este trabajo se realizó en el corporativo Media Response Group, para la empresa Canalmail S.L, situada en Alcobendas, supervisado por los tutores profesionales Daniel Paz y Jorge Lázaro Molina y por el tutor académico Rafael Fernández Gallego de la Universidad Politécnica de Madrid.---ABSTRACT---The creation of this enterprise Web application arises from the need to optimize the time in the process of creating an online advertising campaign. The main objective of this work is to automate the process of validating fields in a web form. A web form [6] is a digital document that users enter data such as name, surname, address, ID number among others. These data will subsequently be processed and stored in a database and then be sent to the client. These data will subsequently be processed and stored in a database and then be sent to the advertiser. This validation process refers to programming the online form on the client‟s side using web technologies such as JavaScript, HTML5 to control that the data entered by the user in this form are correct. Each field in a web form has a specific validation that depends on several factors; like being a nationwide launch of the campaign and validating data, thus depending on the type of validation a JavaScript file is generated with all validation web form. This file is integrated into the web form by calling the service. One purpose of this work is that any business user can program a web form, without prior knowledge of web programming, since programming is transparent to the user. This is a basic summary of the web application; however we must consider a number of requirements and parameters to make it more efficient and customizable depending on the needs of the end product of each advertising campaign. All these aspects are explained in detail in the following sections. This work was performed in the corporate Media Response Group, for the company Canalmail S.L, located in Alcobendas, supervised by professional tutors Daniel Paz and Jorge Lázaro Molina and PhD Assistant Lecturer at Universidad Politécnica de Madrid. Rafael Fernández Gallego.

An interactive web-based learning assistant for structural analysis of continuous beams

There are significant levels of concern about the relevance and the difficulty of learning some issues on Strength of Materials and Structural Analysis. Most students of Continuum Mechanics and Structural Analysis in Civil Engineering usually point out some key learning aspects as especially difficult for acquiring specific skills. These key concepts entail comprehension difficulties but ease access and applicability to structural analysis in more advanced subjects. Likewise, some elusive but basic structural concepts, such as flexibility, stiffness or influence lines, are paramount for developing further skills required for advanced structural design: tall buildings, arch-type structures as well as bridges. As new curricular itineraries are currently being implemented, it appears appropriate to devise a repository of interactive web-based applications for training in those basic concepts. That will hopefully train the student to understand the complexity of such concepts, to develop intuitive knowledge on actual structural response and to improve their preparation for exams. In this work, a web-based learning assistant system for influence lines on continuous beams is presented. It consists of a collection of interactive user-friendly applications accessible via Web. It is performed in both Spanish and English languages. Rather than a “black box” system, the procedure involves open interaction with the student, who can simulate and virtually envisage the structural response. Thus, the student is enabled to set the geometric, topologic and mechanic layout of a continuous beam and to change or shift the loading and the support conditions. Simultaneously, the changes in the beam response prompt on the screen, so that the effects of the several issues involved in structural analysis become apparent. The system is performed through a set of web pages which encompasses interactive exercises and problems, written in JavaScript under JQuery and DyGraphs frameworks, given that their efficiency and graphic capabilities are renowned. Students can freely boost their self-study on this subject in order to face their exams more confidently. Besides, this collection is expected to be added to the "Virtual Lab of Continuum Mechanics" of the UPM, launched in 2013 (http://serviciosgate.upm.es/laboratoriosvirtuales/laboratorios/medios-continuos-en-construcci%C3%B3n)

Visualization of a student predictive model for 3D virtual environments driven to procedural training

This document presents theimplementation ofa Student Behavior Predictor Viewer(SBPV)for a student predictive model. The student predictive model is part of an intelligent tutoring system, and is built from logs of students’ behaviors in the “Virtual Laboratory of Agroforestry Biotechnology”implemented in a previous work.The SBPVis a tool for visualizing a 2D graphical representationof the extended automaton associated with any of the clusters ofthe student predictive model. Apart from visualizing the extended automaton, the SBPV supports the navigation across the automaton by means of desktop devices. More precisely, the SBPV allows user to move through the automaton, to zoom in/out the graphic or to locate a given state. In addition, the SBPV also allows user to modify the default layout of the automaton on the screen by changing the position of the states by means of the mouse. To developthe SBPV, a web applicationwas designedand implementedrelying on HTML5, JavaScript and C#.

Especificación y desarrollo de un cuadro de mandos para la visualización de datos y monitorización de la plataforma SmartCity del CEI Moncloa

El objetivo del trabajo ha sido el diseño y programación de una aplicación web basada en HTML5 que permite la visualización gráfica en tiempo real del estado de los distintos servicios y redes de sensores de la plataforma SmartCity del CEI Moncloa. Dicha plataforma, encuadrada dentro de la iniciativa “City of the Future” de la UPM, está compuesta por un conjunto de redes de sensores especializados en la recogida de datos de distintos ámbitos (medioambientales, energía, flujos de personas…)Para el desarrollo de la aplicación se ha hecho uso de tecnologías de nivel avanzado como NodeJS, un entorno de desarrollo en JavaScript de lado de servidor orientado a eventos; y librerías JavaScript como Bootstrap, que ha facilitado que el diseño de la interfaz web sea adaptativo a distintos dispositivos y resoluciones; Openlayers, ofreciendo mapas interactivos y subscritos a eventos; y D3.js, que ha permitido la visualización de datos recogidos por la plataforma de forma dinámica e interactiva en la aplicación web a través de distintos formatos como es el caso de gráficas y diagramas.

Modelado y visualización de grafos con datos masivos

El tratamiento de datos masivos es una tendencia cada día más extendida. Una parte fundamental del proceso de análisis de estos datos es su modelado y posterior visualización. El objetivo de este trabajo de fin de Grado, es trabajar con las últimas tecnologías en estos dos campos y lograr tratar una cantidad masiva de datos, que permita analizar la información de una forma interactiva, sencilla e intuitiva. Para el modelado de datos se usará Neo4j, una herramienta de código libre que permite montar una base de datos basada en grafos. Finalmente, la información resultante se visualizará mediante la librería D3 de Javascript, ofertando una visión clara de los datos existente y permitiendo interactuar con ellos para obtener la información que se requiera.

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.