Bookmarks for Leadership Conference by https://padlet.com/magledystrejos15/q1cam2eie6gp Favorite links about leadership. en-us 2018-05-17 21:10:17 UTC 2018-05-17 22:02:37 UTC hello@padlet.com https://padlet-assets.s3.amazonaws.com/icons/File.png Shadow DOM magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748558 Es una funcionalidad que permite al navegador web renderizar elementos DOM sin necesidad de insertarlos en el árbol principal DOM del documento. ]]> 2018-05-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748558 Importar HTML magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748559 HTML import 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">
]]> 2018-05-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748559 Elementos personalizados magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748560 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.

]]> 2018-05-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748560 Plantillas HTML magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748561 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>

]]> 2018-05-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748561 Historia magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748563
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-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748563 Bibliotecas magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748564
Hay varias librerías que están construidas sobre componentes web con el objetivo de aumentar el nivel de abstracción al crear elementos personalizados. Cuatro de las bibliotecas más importantes son: X-Tag, Slim.js, Polymer y Bosonic.
Dos de ellos, Bosonic y Polymer, proporcionan componentes listos para usar. Estos componentes se pueden utilizar indistintamente, ya que todos ellos están construidos con tecnologías web abiertas.​

]]> 2018-05-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748564 Soporte del navegador magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748565 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 (requiere un cambio de configuración manual).

]]> 2018-05-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748565 Las principales características magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748566
  • 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-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748566     Componentes web magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748567 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.]]> 2018-05-17 21:10:17 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261748567 En qué consisten magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261755011 La especificación de los Web Components empezó a desarrollarse hace aproximadamente un par de años, aunque algunas de las tecnologías que utiliza empezaron antes. Suponen una revolución en el mundo del desarrollo Web en términos de reutilización y encapsulación de código cliente, ya que permiten encapsular código HTML, CSS y JavaScript, de forma que no puede ser afectado por el código de la página que lo incluye.]]> 2018-05-17 21:49:29 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261755011 Para qué se pueden usar magledystrejos15 https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261755897 Ya hemos visto que podemos usarlos para encapsular el uso de APIs de JavaScript externas como Google Maps y para extender el comportamiento de elementos nativos.
    Otro uso es el de añadir marcado semántico o incluso contenido, por ejemplo, supongamos que para los productos de una tienda online tenemos el siguiente Web component:
    <producto-tienda precio="99" precioAntes="88" href="/enlace-producto.html">
  <div class="nombre">Nombre producto</div>
  <div class="descripcion">Descripción producto</divglt;
</producto-tienda>

    ]]>     2018-05-17 21:55:41 UTC https://padlet.com/magledystrejos15/q1cam2eie6gp/wish/261755897