Web Component by https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn Made with wonder en-us 2018-05-15 00:27:25 UTC 2018-05-18 01:09:51 UTC hello@padlet.com Presentación angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260673292 Centro Educativo Santo Domingo
Informática
Web Component
Angélica Song Zhu
Profa. Guadalupe Espinar
XIIªB
14/5/18]]> 2018-05-15 00:30:46 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260673292 ¿Qué son? angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260674164 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 We. ]]> 2018-05-15 00:38:07 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260674164 ¿Qué permite? angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260674386 Permite la encapsulación e interoperabilidad de elementos de HTML individuales.]]> 2018-05-15 00:40:21 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260674386 Características angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260675152
  • 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.

    • ]]>     2018-05-15 00:42:45 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260675152     Elementos o etiquetas personalizadas/ Custom element angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260675530 Hay dos tipos de elementos personalizados: autónomos e integrados. Los elementos personalizados autónomos son elementos HTML completamente diferenciados de los elementos HTML nativos, se construyen esencialmente desde abajo hacia arriba utilizando la API de elementos personalizados. Los elementos personalizados integrados son elementos que se construyen sobre elementos HTML nativos para reutilizar su funcionalidad.
    Con los custom elements, la comunidad puede crear sus propios elementos, de forma rápida y colaborativa.
    Ahora será la comunidad la que creará y mejorará nuevos elementos, listos para ser añadidos al estándar si ganan popularidad.
    El único requisito para crear un custom element es que su nombre contenga un guion para evitar conflictos con actuales (o futuras) etiquetas nativas de HTML.

    ]]>     2018-05-15 00:45:39 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260675530     Sombra DOM angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260676390 Shadow DOM refiere a la habilidad de un navegador de incluir un subárbol de elementos en un documento, pero no así en el árbol DOM de este documento.
    Otra forma (más simple) de explicarlo con palabras: el Shadow DOM es un DOM encapsulado que vive dentro del DOM principal. Al leer esto, algunos estarán pensando que es lo mismo que un iframe, pero la diferencia está en que: el Shadow DOM es parte del documento, no un documento diferente.
    Lo más interesante de Shadow DOM es que los propios desarrolladores de navegadores lo usan para definir componentes complejos del DOM (audio, video, etc) y ahora esto está liberado para que los desarrolladores de sitios lo usemos.

    ]]>     2018-05-15 00:51:55 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/260676390     Importaciones de HTML angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261765725 Es una herramienta para incluir documentos HTML y componentes web de fuentes externas sin necesidad de utilizar peticiones AJAX y métodos similares.

    La sintaxis para hacer una importación HTML es la siguiente:
    <link rel="import" href="mydocument.html">

    Para evitar cargar y ejecutar dos veces los scripts que se introducen a través de las importaciones, la importación HTML omite cargar y ejecutar archivos previamente cargados.
    Mozilla Firefox no tiene soporte para importación de HTML y no pretende implementarlo.
    La importación HTML también está relacionada con la idea inicial en el desarrollo del hipertexto llamada Transclusión, donde todo o parte de un documento se inserta en otro por referencia.

    ]]>     2018-05-17 23:27:39 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261765725     Plantilla de HTML angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261765960 La plantilla HTML es una forma de crear fragmentos de inserción de HTML que se usan a voluntad. La sintaxis de las plantillas HTML tiene este aspecto:
    <html>
        <template>
            <p>The HTML you wish to instantiate on will</p>
        </template>
    </html>
    Los scripts no se ejecutarán, y los recursos que están dentro de una plantilla no serán recuperados hasta que la plantilla sea eliminada.

    ]]>     2018-05-17 23:29:55 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261765960     Librerías angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261766441 En cuanto a librerías Javascript para producir Web Components hay que aclarar primero que realmente no hacen falta. Como has visto, los Web Components forman parte de un estándar, que está siendo discutido todavía en mayor media, pero es un estándar. Eso quiere decir que, más tarde o temprano, todos los navegadores lo tendrán en su "core" y podrás usarlo con tan solo usar Javascript estándar, sin necesidad de ninguna librería adicional.
    No obstante, lo cierto es que diversos actores se han apresurado a presentar algunas librerías que nos permiten desarrollar hoy mismo con la tecnología de los Web Components. Te las resumimos a continuación:
    Polymer: 
    Es una librería impulsada por Google que actualmente es el mayor referente en cuanto a Web Components. Desarrollada para aprovechar la tecnología del estándar, facilitando la creación de interfaces de usuario reutilizables.
    X-Tag: 
    Es la apuesta de Mozilla para la creación de Web Components, específicamente los custom elements, al alcance de todos los navegadores modernos.
    Bosonic: 
    Herramientas y utilidades para crear web components incluso en navegadores no tan nuevos, como Internet Explorer 9.

    ]]>     2018-05-17 23:34:07 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261766441     Historia angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261773217 Los componentes web fueron introducidos por Alex Russell en la conferencia Fronteers Conference de 2011.
    Polymer, una biblioteca basada en componentes web, fue liberada por Google en 2013

    ]]>     2018-05-18 00:30:37 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261773217     Soportes al navegador angelicasongzhu017 https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261773423 Las plantillas HTML tienen soporte en Google Chrome, Mozilla Firefox, Edge de Microsoft, Safari, y Ópera.
    La compatibilidad con la versión inicial de elementos personalizados y Shadow DOM, conocida como "v0", está presente en algunos navegadores basados en Blink como Google Chrome y Opera, y en Mozilla Firefox. Los nuevos elementos personalizados y las APIs "v1" de Shadow DOM están siendo implementadas en Safari 10,12​ Google Chrome, y en desarrollo en Mozilla Firefox. Microsoft Edge aún no ha comenzado a implementar Custom Elements o Shadow DOM.
    La compatibilidad con navegadores más antiguos está implementada utilizando Polyfills basado en JavaScript.
    ]]>     2018-05-18 00:31:55 UTC https://padlet.com/angelicasongzhu017/h6kz6a7kj8tn/wish/261773423