# data[].attributes.body
X°A
17/5/18
Web component

# data[].attributes.body
son un estándar del W3C que nos permiten desglosar el desarrollo de aplicaciones web en pequeños contenedores que encapsulan marcado, código JavasScript y estilos CSS, recibiendo el nombre de componentes.

# data[].attributes.attachment_link.description
Justin Willis from Ionic joins us this week to talk about hybrid app development with Ionic and some amazing work they have been doing with Web Components. Justin gives us an overview of the Ionic project, its background and how it makes building hybrid apps super easy.

# data[].attributes.body
Elementos personalizados - APIs para definir elementos HTML nuevos.

Sombra DOM - DOM y estilos encapsulados, con composición.

Importaciones de HTML - Métodos declarativos para importar documentos HTML a otros documentos.

Plantillas de HTML - El elemento <template> que permite que los documentos contengan trozos inertes del DOM.

# data[].attributes.attachment_link.readable_text
El avance de las tecnologías web nos ofrece cada día más oportunidades para que la creación de contenido sea más sencilla para todo el mundo. En este camino van los web components. En este episodio te hacemos un pequeño resumen de que te ofrece este intento de estándar.

Dentro del programa hemos hablado de:

Proyecto de promoción del estándar web components
Frameworks para desarrollar web components:
LMSs que cuentan con web components

En el github de programar es una mierda os dejamos un repositorio con un ejemplo de web component hecho con librerías nativas y otro con polymer.

En la sección de recomendaciones hemos hablado de:

Todos los que tengáis comentarios, sugerencias para el podcast o recomendaciones de proyectos, vídeos, plugins, etc podéis enviarnos un correo a programaresunamierda@gmail.com o dejarnos un comentario en Twitter: @progesunam.

No olvidéis de suscribiros a nuestro podcast en ivoox o itunes, o si lo preferís agregad el RSS a vuestra app de podcast preferida. En cualquier caso siempre agradeceremos reviews del podcast en cualquiera de las plataformas.

La música elegida para la entrada y salida del podcast son del grupo " Dilo". En concreto las canciones son "War Inside" y "Sick of reality"

# data[].attributes.attachment_link.description
El avance de las tecnologías web nos ofrece cada día más oportunidades para que la creación de contenido sea más sencilla para todo el mundo. En este camino van los web components. En este episodio te hacemos un pequeño resumen de que te ofrece este intento de estándar.

# data[].attributes.headline
Los componentes web (Web Components) se dividen principalmente en cuatro apartados distintos:

# data[].attributes.subject
Los componentes web (Web Components) se dividen principalmente en cuatro apartados distintos:

# data[].attributes.body
Custom Elements (Elementos Personalizados): Permiten a los desarrolladores crear sus propios elementos para cada proyecto, como parte de la estructura DOM incluyendo capacidades script en dichos elementos de la misma forma que si añadiésemos una etiqueta a un objeto HTML.

# data[].attributes.headline
HTML Templates (Plantillas HTML): Facilitan la tarea de definir los diferentes apartados de una página web (por ejemplo) en diferentes categorías de la misma. Así, si tenemos varias páginas dentro de una misma sección de nuestro sitio web, podremos usar la misma plantilla HTML y ahorrar muchísimo tiempo de codificación. Permiten también insertar contenido dinámico mediante JavaScript

# data[].attributes.subject
HTML Templates (Plantillas HTML): Facilitan la tarea de definir los diferentes apartados de una página web (por ejemplo) en diferentes categorías de la misma. Así, si tenemos varias páginas dentro de una misma sección de nuestro sitio web, podremos usar la misma plantilla HTML y ahorrar muchísimo tiempo de codificación. Permiten también insertar contenido dinámico mediante JavaScript

# data[].attributes.headline
HTML Imports (Importación HTML): Se trata de una función similar a la de importar un archivo CSS a otro, estas importaciones nos permiten llamar y reutilizar documentos HTML desde distintos archivos HTML.

# data[].attributes.subject
HTML Imports (Importación HTML): Se trata de una función similar a la de importar un archivo CSS a otro, estas importaciones nos permiten llamar y reutilizar documentos HTML desde distintos archivos HTML.

# data[].attributes.headline
Shadow DOM (“Sombra” DOM): También conocidos como DOM “en la sombra”, se trata de un modelo de documentos de objetos (Document Object Model, DOM) cuya función es la de incluir un subárbol de objetos en un documento sin estar dentro del árbol DOM principal. Podríamos definirlo también como un encapsulamiento de un DOM dentro del DOM principal, aclarando que, a diferencia de los iframe, se trataría del mismo documento, no de dos diferentes pero relacionados. 

# data[].attributes.subject
Shadow DOM (“Sombra” DOM): También conocidos como DOM “en la sombra”, se trata de un modelo de documentos de objetos (Document Object Model, DOM) cuya función es la de incluir un subárbol de objetos en un documento sin estar dentro del árbol DOM principal. Podríamos definirlo también como un encapsulamiento de un DOM dentro del DOM principal, aclarando que, a diferencia de los iframe, se trataría del mismo documento, no de dos diferentes pero relacionados. 