Veo el micelio como la Internet natural de la Tierra, una conciencia con la que podr\u00edamos comunicarnos. A trav\u00e9s de la interfaz entre especies, es posible que alg\u00fan d\u00eda intercambiemos informaci\u00f3n con estas redes celulares sensibles. Debido a que estas redes neurol\u00f3gicas externalizadas sienten cualquier impresi\u00f3n en ellas, desde pasos hasta ramas de \u00e1rboles que caen, podr\u00edan transmitir enormes cantidades de datos sobre los movimientos de todos los organismos a trav\u00e9s del paisaje.<\/p>Paul Stamets<\/cite><\/blockquote>\n\n\n\n
Los componentes web tratan de representar el mundo real<\/h2>\n\n\n\n
La programaci\u00f3n y el desarrollo de software se inspira en la naturaleza. El desarrollo de software al ser una actividad humana y social, siempre se usa en busca de solucionar problemas reales de nuestro entorno.<\/p>\n\n\n\n
Antes de explicar que es un componente web me gustar\u00eda mucho compartir contigo esta informaci\u00f3n sobre dise\u00f1o at\u00f3mico<\/a>. Interesante la relaci\u00f3n con los \u00e1tomos, mol\u00e9culas y organismos \u00bfVerdad?. La naturaleza nos ense\u00f1a mucho, pues est\u00e1 dise\u00f1ada de una manera superior y el ser humano puede aprender mucho de este gran sistema. El mundo mismo es un sistema, el universo es un sistema.<\/p>\n\n\n\n
Teniendo una noci\u00f3n de estos componentes podemos encontrar su relaci\u00f3n con el desarrollo de software y con ello aprender a dise\u00f1ar mejor nuestros sistemas computacionales.<\/p>\n\n\n\n
Communication between components<\/h2>\n\n\n\n
Los \u00e1tomos se comunican y forman mol\u00e9culas, las mol\u00e9culas se comunican y forman organismos y como estos tambi\u00e9n se comunican y forman organismos m\u00e1s complejos. Luego esos organismos m\u00e1s complejos forman sistemas completos, como el sistema respiratorio o el mismo ser humano. \u00a1Ups!, creo que acabo de describir la esencia de la programaci\u00f3n orientada a objetos<\/a>, porque es lo mismo, desde la comunicaci\u00f3n entre funciones, clases, componentes, m\u00f3dulos, hasta la comunicaci\u00f3n entre aplicaciones.<\/p>\n\n\n\n
Passing messages between cells, Image modified from \u201cSignaling molecules and cellular receptors: Figure 1<\/a>,\u201d by OpenStax College, Biology (CC BY 3.0<\/a>).<\/em><\/figcaption><\/figure><\/div>\n\n\n\n Imagina como los pulmones forman parte del sistema respiratorio, y como este \u00faltimo forma parte de un ser humano. El cerebro se encarga de indicarle a los pulmones cuando contraerse y cuando expandirse sin que nosotros seamos conscientes de esos movimientos. \u00bfTe das cuenta de la comunicaci\u00f3n entre el cerebro y los pulmones?<\/p>\n\n\n\n
Tambi\u00e9n los pulmones se comunican con otro componente<\/strong> llamado coraz\u00f3n. Los pulmones limpian la sangre llena de di\u00f3xido de carbono y agregan ox\u00edgeno. Es en ese momento en que esa sangre rica en ox\u00edgeno se env\u00eda al coraz\u00f3n. El coraz\u00f3n bombea la sangre a todas las partes de nuestro cuerpo. \u00bfTe das cuenta de todas las comunicaciones que existen entre los \u00f3rganos (componentes<\/strong>)?<\/p>\n\n\n\n
Dicho todo el rollo anterior y despu\u00e9s de darle por lo menos un vistazo al dise\u00f1o at\u00f3mico. Nos damos cuenta de la importancia de los componentes que conforman el dise\u00f1o de algo m\u00e1s complejo. Y en nuestro caso los componentes con los que construimos nuestras aplicaciones web.<\/p>\n\n\n\n
\u00bfQu\u00e9 es un componente web?<\/h2>\n\n\n\n
Entonces, \u00bfQu\u00e9 es un componente web? <\/strong>Un componente web es lo mismo que explicamos en los p\u00e1rrafos anteriores solo que con el contexto de aplicaciones web. Dado que es tecnolog\u00eda web, se usa mucho javascript, CSS y HTML, cuando se crea un componente web<\/a>. Se crea una nueva etiqueta HTML para ser reutilizada tal como usamos las etiquetas
h1, p, o form.<\/code><\/p>\n\n\n\nDise\u00f1o at\u00f3mico, \u00e1tomos, mol\u00e9culas, organismos y plantillas<\/figcaption><\/figure>\n\n\n\n Tomando como ejemplo nuestro sistema respiratorio y utiliz\u00e1ndola como analog\u00eda a la multiplicaci\u00f3n de n\u00fameros. Primero, en lugar de nariz, laringe y traquea para ingerir aire, tenemos elementos de entrada como inputs y botones<\/kbd> para insertar los n\u00fameros. <\/p>\n\n\n\n
En los pulmones se obtiene el ox\u00edgeno para crear una combusti\u00f3n interna para luego mandar al coraz\u00f3n sangre rica en ox\u00edgeno, tambi\u00e9n se despide el resultado de la combusti\u00f3n en forma de
CO2<\/sub><\/code>. En la multiplicaci\u00f3n, tenemos un componenteMultiplicaci\u00f3n de n\u00fameros<\/code> que permite recibir dos n\u00fameros, multiplicarlos y mostr\u00e1rtelos en la aplicaci\u00f3n a trav\u00e9s de texto. <\/p>\n\n\n\n\u00bfC\u00f3mo empezar a utilizar los componentes web?<\/h2>\n\n\n\n
Ahora, la creaci\u00f3n de componentes web<\/a> est\u00e1 basado en cuatro principales est\u00e1ndares de la web. Estos nos permite crear componentes reutilizables y encapsular su funcionamiento y al mismo tiempo permiten la comunicaci\u00f3n entre ellos para crear sistemas robustos. <\/p>\n\n\n\n
- Custom elements o elementos personalizados<\/li>
- Shadow DOM, DOM en las sombras.<\/li>
- HTML Templates, Plantillas HTML.<\/li>
<script type=\"module\"><\/code>, cargando m\u00f3dulos usando el tagscript<\/code>.
- Antes se usaba HTML imports, importar componentes a trav\u00e9s del tag
<link rel=\"import\"><\/code><\/li><\/ul><\/li><\/ul>\n\n\n\nActualmente el soporte de estos cuatro est\u00e1ndares en los navegadores web es el siguiente. Tomado de https:\/\/www.webcomponents.org\/<\/a>.<\/p>\n\n\n\n
Soporte de componentes web en navegadores<\/figcaption><\/figure>\n\n\n\n La imagen fue tomada de webcomponents.org, y si quieres saber m\u00e1s a detalle sobre el soporte de los navegadores, aqu\u00ed te dejo la lista:<\/p>\n\n\n\n
- https:\/\/caniuse.com\/#search=HTML templates<\/a><\/li>
- https:\/\/caniuse.com\/#search=custom elements v1<\/a><\/li>
- https:\/\/caniuse.com\/#search=Shadow DOM v1<\/a><\/li>
- https:\/\/caniuse.com\/#search=module<\/a><\/li>
- https:\/\/caniuse.com\/#search=HTML imports<\/a><\/li><\/ul>\n\n\n\n
Tambi\u00e9n existen frameworks como Angular y Vue, y librer\u00edas como React, que se basan en componentes. Aunque no ocupen los cuatro est\u00e1ndares principales, se utilizan para crear aplicaciones web robustas con los mismos principios. <\/p>\n\n\n\n
Aqu\u00ed hay un compendio inicial de algunos de ellos:<\/p>\n\n\n\n
Custom Elements Everywhere<\/a><\/h2>\n\n\n\n
Custom Elements Everywhere
Making sure frameworks and custom elements can be BFFs \ud83c\udf7b<\/p>","protected":false},"excerpt":{"rendered":"Como crear mejores aplicaciones con los fascinantes componentes web, elementos personalizados, shadow DOM, plantillas HTML, HTML imports y los nuevos modulos de Javascript. Puedes empezar con un framework como polymer, angular, vue o react<\/p>","protected":false},"author":2,"featured_media":3756,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[24],"tags":[42,54,77],"class_list":["post-3551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-componentes-web","tag-componentes-web","tag-javascript","tag-shadow-dom"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3551"}],"version-history":[{"count":1,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3551\/revisions"}],"predecessor-version":[{"id":3630,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3551\/revisions\/3630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3756"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Paso](\"https:\/\/www.pensemosweb.com\/wp-content\/uploads\/2020\/11\/paso-mensajes-celulas-poo.jpg\")
![\"Dise\u00f1o](\"\/wp-content\/uploads\/2017\/12\/atomic-design.jpg\")
![\"Soporte](\"\/wp-content\/uploads\/2017\/12\/soporte-navegadores-componentes-web.jpg\")