En este manual vamos a conocer el nuevo estándar de los Web Components, una nueva tecnología implementada en navegadores modernos que permitirá llevar la web a un nuevo nivel.
Web Components incluye cuatro especificaciones que nos van a servir para cambiar radicalmente el modo en el que construimos las páginas web, aportando nuevas herramientas capaces de extender el lenguaje HTML. Las veremos por separado y luego las utilizaremos en conjunto.
Los componentes, también llamados Custom Elements, son el corazón y objetivo final de este estándar y tienen como objetivo construir nuevos elementos para el lenguaje HTML. Éstos son como etiquetas HTML nuevas que puedes desarrollar tú mismo con muy poco esfuerzo, de modo que puedas realizar componentes para implementar cualquier tipo de tarea en el ámbito de una web, interfaz de usuario, etc.
Como Web Components es un estándar, podemos desarrollar directamente con Javascript y no estaremos obligados a usar alguna librería o framework adicional. En este manual nos centraremos en esta posibilidad, usar Web Components con Javascript estándar.
Por todo ello es una tecnología que ya podemos usar y beneficiarnos de extraordinarias posibilidades. En este manual vamos a recorrer diversos puntos del estándar para explicarlo, de modo que los desarrolladores puedan aprender y comenzar a usar Web Components.
En Manual de Web Components encuentras:
Artículos del manual
-
Introducción a Web Components
Web Components es un estándar de la W3C que está siendo definido en el momento de escribir este manual. Explicaremos con detalle en qué consiste el estándar y su filosofía. Las especificaciones están a distintos niveles de finalización pero, como ya se encuentran publicados sus borradores, varios navegadores las vienen implementando. Todos los navegadores en algún momento se adaptarán para soportar Web Components, pero para los navegadores antiguos explicaremos cómo usar el Polyfill, que nos aporta compatibilidad entre los clientes web que no lo implementan todavía.
-
1
Qué son Web Components
Los Web Components son 4 especificaciones que nos permiten extender el desarrollo para la web por medio de componentes web que cualquier desarrollador podría realizar.
-
Especificaciones de Web Components
Vamos a explicar las cuatro especificaciones del estándar de los Web Components, que básicamente nos ofrecen nuevas etiquetas HTML y APIs Javascript para programación. Se pueden usar por separado, pero la verdadera potencia se da cuando se juntan para el desarrollo de nuevos elementos. Analizaremos de manera independiente cada una de las especificaciones que contiene, aportando ejemplos de uso con el código Javascript necesario para operar con ellas.
-
2
Especificación Custom Elements, explicaciones y práctica
Conoce la especificación de Custom Elements, que podríamos decir que es la principal del estándar de Web Components. Crea un componente wen con Javascript básico, basando sin usar ninguna librería.
-
3
Extendiendo elementos en Web Components
Cómo extender unos componentes a base de otros componentes, creando nuevos Custom Elements, con Javascript nativo.
-
4
Template con Web Components
Cómo es el estándar Template de los Web Components y cómo podemos usar el sistema de templating nativo en Javascript.
-
5
Shadow DOM de Web Components
Explicaciones y ejemplos de uso de Shadow DOM el estándar de Web Components que nos sirve para crear elementos del DOM encapsulados en otros elementos de la página.
-
6
Ejemplo de Custom Element Nativo en Web Components V1
Un ejercicio de creación de un custom element con Shadow DOM y slots, o componente Javascript nativo, creado con el estándar Web Components V1.
-
7
Especificación Import en Web Components
Explicamos en qué consiste la especificación de Import en los Web Components, junto con algunos ejemplos de uso.
-
Aplicación de estilos CSS en Web Components
Cómo se aplica estilos CSS a los Custom Elements para definir el aspecto de los componentes. Explicando diversas técnicas disponibles para estilizar los componentes y permitir que se puedan personalizar desde fuera para adaptarlos al look & feel de cada sitio.
-
8
Selector :host de CSS
Vamos a conocer un selector de CSS que incorpora el estándar de los Web Components para aplicar estilos a la etiqueta host del componente desde dentro del Shadow DOM.
-
9
CSS Part
Explicaciones detalladas sobre CSS part, un selector de CSS que podemos usar para conseguir que los estilos globales, definidos en toda la página, puedan afectar a componenentes con Shadow DOM.
-
Desarrollo basado en componentes
En los siguientes artículos nos dedicaremos a mostrar ejemplos que nos permitan entender cómo usar Web Components, con sus diversas especificaciones en conjunto, para el desarrollo web. De este modo pretendemos ofrecer ejemplos ilustrativos sobre las posibilidades de este nuevo estándar.
-
10
Ciclo de vida en los Web Components
Qué es el ciclo de vida en los Web Components y cómo podemos ejecutar acciones en diferentes estados de los componentes.
-
11
Custom elements sencillos y sus HTML import
Ejemplos de custom elements sencillos y cómo usar la declaración import para incluirlos en una página web, de modo que se puedan usar.
-
12
Practicando web components con VanillaJS
Ejemplo de desarrollo de un custom element con Web Components y Javascript nativo en el que usamos las 4 especificaciones del estándar.
-
13
Web Components que funcionan como campos nativos de formulario con formAssociated
Cómo integrar tus web components en los formularios y hacer custom elements que son capaces de funcionar como elementos nativos de formulario.
-
Librerías para desarrollo con Web Components y catálogos de componentes
Ahora vamos a pasar a estudiar algunas utilidades para desarrollar con Web Components. Veremos principalmente dos tipos de recursos: 1) Librerías para crear tus custom elements de manera ágil y sencilla, que están desarrolladas encima del estándar de Web Components. 2) Bibliotecas con catálogos de componentes (custom elements) que permiten implementar interfaces de usuario ya listas y personalizadas, de una manera sencilla y cómoda.
-
14
Librerías Javascript basadas en el estándar Web Components
Conoce las principales librerías y frameworks Javascript que están construidos sobre el estándar de los Web Components.
-
Otros conocimientos útiles sobre Web Components
Ahora veremos algunos otros temas interesantes que pueden resultar de utilidad para los desarrolladores que usan el estándar Web Components para sus sitios y aplicaciones web.
-
15
SEO en Web Components
Qué hay del SEO en las aplicaciones y sitios web realizados con Polymer? Polymer es bueno para posicionamiento en buscadores?.
Descargas
-
Manual de Web Components como libro electrónico En esta descarga puedes encontrar todos los libros electrónicos generados a partir del texto del Manual de Web Components. Este manual incluye versiones de las especificaciones de Web Components V1 y V0. Los libros los puedes descargar en varios formatos, para ordenadores de escritorio, dispositivos y lectores electrónicos (ePub, Kindle ,PDF).
Archivos disponibles: PDF, ePup, Mobi (Kindle)
Páginas: 67 (Referencia por el archivo PDF)