{"id":3395,"date":"2016-04-27T13:11:56","date_gmt":"2016-04-27T13:11:56","guid":{"rendered":"https:\/\/www.blog.facilcloud.com\/noticias\/?p=3395"},"modified":"2016-07-26T15:34:46","modified_gmt":"2016-07-26T15:34:46","slug":"web-components-que-son","status":"publish","type":"post","link":"https:\/\/www.blog.facilcloud.com\/noticias\/web-components-que-son\/","title":{"rendered":"Web components: \u00bfqu\u00e9 son?"},"content":{"rendered":"

\"webcomponents\"<\/a><\/p>\n

Los Web Components ofrecen un est\u00e1ndar que va enfocado a la creaci\u00f3n de todo tipo de componentes utilizables en una p\u00e1gina web, para realizar interfaces de usuario y elementos que permitan presentar informaci\u00f3n. Los desarrolladores tienen la tarea de, en base a las herramientas que incluyen los Web Components crear esos nuevos elementos y publicarlos para que las dem\u00e1s personas tambi\u00e9n los puedan usar.<\/p>\n

Facilcloud<\/span> <\/a>ofrece la posibilidad de utilizar estos componentes con total libertad, para aprovechar sus ventajas.<\/p>\n

En resumen, as\u00ed como este nuevo est\u00e1ndar facilita la creaci\u00f3n de nuevos elementos que enriquecen la web; tambi\u00e9n est\u00e1 pensado para que se puedan reutilizar de una manera sencilla y extenderse, de modo que se pueda crear unos componentes en base a otros.<\/p>\n

Al dise\u00f1arse los est\u00e1ndares para los Web Components, tambi\u00e9n se ha procurado que se pueda trabajar con los componentes de manera aislada; permitiendo que las nuevas piezas se empleen en el contexto de una web, sin que afecten a las ya existentes. Paralelo a esto, se ha tratado de que el proceso de cargar un nuevo componente en una p\u00e1gina web, se pueda realizar de manera at\u00f3mica, es decir en un s\u00f3lo bloque, en lugar de necesitar el requerimiento de escribir los estilos por una parte, y el javascript por otra.<\/p>\n

\"reseller<\/a><\/p>\n

Ejemplos cl\u00e1sicos de web components<\/strong><\/p>\n

\"componentes<\/a><\/p>\n

Uno de los m\u00e1s cl\u00e1sicos ejemplos, es un mapa de Google; si no se utilizan los web components, cuando se muestra un mapa en una p\u00e1gina web, debe recurrirse a la creaci\u00f3n de c\u00f3digo en tres bloques: un HTML con el elemento donde se va a renderizar el mapa; un CSS para definir alg\u00fan estilo sobre el mapa, por ejemplo sus dimensiones; y un Javascript para que se pueda generar el mapa, indicando las coordenadas que se desean visualizar, as\u00ed como muchos otros detalles de configuraci\u00f3n que el mapa necesita.<\/p>\n

Otro ejemplo ser\u00eda un calendario, el cual tambi\u00e9n necesita de tres partes: HTML para crear el elemento donde se mostrar\u00e1 el calendario; CSS para indicar las dimensiones de ese calendario, colores, entre otros; y Javascript para decir qu\u00e9 mes, d\u00eda o a\u00f1o se debe mostrar.<\/p>\n

\"web<\/a><\/p>\n

Son tres lenguajes diferentes, que se especifican en bloques de c\u00f3digo separados y usualmente en archivos separados. Sin los Web Components, para tener todos los bloques agrupados y tener un c\u00f3digo \u00fanico para fusionar todo en un elemento, se usaba generalmente la etiqueta IFRAME, que permite cargar un HTML, CSS y Javascript y reducir su \u00e1mbito a un peque\u00f1o espacio de la p\u00e1gina. Esta t\u00e9cnica se sigue utilizando, pero se est\u00e1 sustituyendo gracias a las bondades de los Web Components.<\/p>\n

Adicionalmente, es interesante destacar las distintas especificaciones que se pueden encontrar:<\/p>\n