My sumptuous wall by https://padlet.com/stephaniegab09/8q0039gqw44o Made with mirth en-us 2018-05-18 20:18:10 UTC 2023-02-13 19:36:13 UTC hello@padlet.com COMPONENTES WEB stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262048921 INFORMÁTICA
STEPHANIE CHENG
PROFESORA GUADALUPE ESPINOSA ]]> 2018-05-18 20:19:25 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262048921 ¿QUE SON COMPONENTES WEB stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049073 Los componentes web son un conjunto de características que actualmente están siendo añadidas por el W3C a las especificaciones HTML y DOM de forma que permite la creación de widgets o componentes reutilizables en documentos y aplicaciones web.
La intención de estos componentes es traer la ingeniería basada en componentes a la World Wide Web. El modelo de componentes permite la encapsulación e interoperabilidad de elementos de HTML individuales.]]> 2018-05-18 20:20:35 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049073 EJEMPLOS stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049302 El ejemplo más típico que veremos por ahí es un mapa de Google. Hoy, si no usamos web components, cuando queremos mostrar un mapa en una página web, tenemos que crear código en tres bloques.

  1. Un HTML con el elemento donde se va a renderizar el mapa
  2. Un CSS para definir algún estilo sobre el mapa, por ejemplo sus dimensiones
  3. Lo más importante, un Javascript para que puedas generar el mapa, indicando las coordenadas que deseas visualizar (para centrar la vista inicial) y muchos otros detalles de configuración que tu mapa necesite.
Otro ejemplo sería un calendario, que necesitas de nuevo básicamente tres partes:

  1. HTML para crear el elemento donde se mostrará el calendario
  2. CSS para indicar las dimensiones de ese calendario, colores, etc.
  3. Javascript para decir qué mes, día o año debe mostrar.
]]> 2018-05-18 20:22:08 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049302 ¿POR QUE DE LOS COMPONENTES WEB? stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049321 Los Web Components nos ofrecen un estándar que va enfocado a la creación de todo tipo de componentes utilizables en una página web, para realizar interfaces de usuario y elementos que nos permitan presentar información (o sea, son tecnologías que se desarrollan en el lado del cliente). Los propios desarrolladores serán los que puedan, en base a las herramientas que incluye Web Components crear esos nuevos elementos y publicarlos para que otras personas también los puedan usar.

En resumen, este nuevo estándar viene a facilitar la creación de nuevos elementos que enriquezcan la web. Pero además, está pensado para que se puedan reutilizar de una manera sencilla y también extender, de modo que seamos capaces de crear unos componentes en base a otros.

]]> 2018-05-18 20:22:15 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049321 ESPECIFICACIONES stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049533 Ahora que ya hemos entendido alguna cosa de lo que son los componentes web, el concepto en sí, vamos a ser un poco más formales y describir las distintas especificaciones que podemos encontrar en los Web Components.]]> 2018-05-18 20:23:37 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049533 ESPECIFICACIONES stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049576 Ahora que ya hemos entendido alguna cosa de lo que son los componentes web, el concepto en sí, vamos a ser un poco más formales y describir las distintas especificaciones que podemos encontrar en los Web Components.]]> 2018-05-18 20:23:49 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049576 CUSTOM ELEMENTS stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049615 Esta especificación describe el método que nos permitirá crear nuevas etiquetas personalizadas, propietarias. Estas etiquetas las podremos ingeniar para dar respuesta a cualquier necesidad que podamos tener. Son los casos básicos que hemos visto en los puntos anteriores de este artículo.]]> 2018-05-18 20:24:08 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049615 HTML TEMPLATES stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049680 Incorpora un sistema de templating en el navegador. Los templates pueden contener tanto HTML como CSS que inicialmente no se mostrará en la página. El objetivo es que con Javascript se acceda al código que hay dentro del template, se manipule si es necesario y posteriormente se incluya, las veces que haga falta, en otro lugar de la página.]]> 2018-05-18 20:24:37 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049680 HTML IMPORTS stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049754 Permite importar un pedazo de código que podrás usar en un lugar de tu página. Ese código podrá tener HTML, CSS y Javascript. El HTML no se visualizará directamente en la página, pero lo podrías acceder con Javascript e inyectar en algún lugar. Pero aunque se llame específicamente "HTML Imports", realmente sirve para cargar de una manera única tanto HTML como CSS como Javascript. Además podrás tener dentro un "HTML Template", con las ventajas que ellos aportan. Mendiante código Javascript seremos capaces también de registrar componentes personalizados "Custom Elements" o realizar otro tipo de acciones sobre el contenido de la página que sean necesarias.]]> 2018-05-18 20:25:05 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049754 HTML IMPORTS stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049755 Permite importar un pedazo de código que podrás usar en un lugar de tu página. Ese código podrá tener HTML, CSS y Javascript. El HTML no se visualizará directamente en la página, pero lo podrías acceder con Javascript e inyectar en algún lugar. Pero aunque se llame específicamente "HTML Imports", realmente sirve para cargar de una manera única tanto HTML como CSS como Javascript. Además podrás tener dentro un "HTML Template", con las ventajas que ellos aportan. Mendiante código Javascript seremos capaces también de registrar componentes personalizados "Custom Elements" o realizar otro tipo de acciones sobre el contenido de la página que sean necesarias.]]> 2018-05-18 20:25:05 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049755 COMPATIBILIDAD CON NAVEADORES stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049822 Custom Elements 
Estado de la especificación: Working Draft W3C 
Soporte total en Chrome, Opera y Android Browser > 4.4.4 y Chrome para Android 46

HTML Templates 
Estado de la especificación: LS (Living Standard, por la Whatwg) 
Soporte total para todos los navegadores menos IE y Opera mini (Edge lo aplicará de manera inminente)

HTML Imports 
Estado de la especificación: Working Draft W3C 
Soporte total en Chrome, Opera y Android Browser > 44 y Chrome para Android 46

]]> 2018-05-18 20:25:37 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262049822 stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050001 2018-05-18 20:26:58 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050001 stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050149 2018-05-18 20:28:25 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050149 stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050389 2018-05-18 20:30:19 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050389 stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050744 2018-05-18 20:33:19 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050744 stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050830 2018-05-18 20:34:00 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262050830 stephaniegab09 https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262051025 2018-05-18 20:35:16 UTC https://padlet.com/stephaniegab09/8q0039gqw44o/wish/262051025