{"id":3552,"date":"2017-12-22T23:31:03","date_gmt":"2017-12-22T23:31:03","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2017\/12\/22\/como-crear-un-componente-web-elementos-html-personalizados\/"},"modified":"2024-04-06T01:44:10","modified_gmt":"2024-04-06T07:44:10","slug":"como-crear-un-componente-web-elementos-html-personalizados","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-crear-un-componente-web-elementos-html-personalizados\/","title":{"rendered":"\u00bfC\u00f3mo crear un componente web? Elementos HTML personalizados"},"content":{"rendered":"<p>En este art\u00edculo vamos a utilizar el API de Elementos HTML personalizados) para crear nuevas etiquetas y utilizarlas en nuestro c\u00f3digo HTML, en futuras publicaciones explicaremos como se usan en conjunto con los otros 3 est\u00e1ndares. Para crear un componente web se utilizan 4 tecnolog\u00edas principales est\u00e1ndares de la web.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Custom elements o elementos HTML personalizados.<\/li>\n\n\n\n<li>Shadow DOM, DOM en las sombras.<\/li>\n\n\n\n<li>Carga de m\u00f3dulos o componentes externos.\n<ul class=\"wp-block-list\">\n<li>HTML imports con la etiqueta <code>&lt;link rel=\"import\"&gt;<\/code>.<\/li>\n\n\n\n<li><code>&lt;script type=\"module\"&gt;<\/code>, cargando m\u00f3dulos usando el tag <code>script<\/code>. Esta tecnolog\u00eda sustituye a los html imports.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Para m\u00e1s informaci\u00f3n sobre componentes web te recomiendo que leas este art\u00edculo <a href=\"https:\/\/pensemosweb.com\/en\/como-crear-mejores-aplicaciones-con-los-fascinantes-componentes-web\/\">C\u00f3mo crear mejores aplicaciones con los fascinantes componentes web<\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Cada uno de estos ciclos es un evento \u00fanico; dieta, elecci\u00f3n, selecci\u00f3n, estaci\u00f3n, clima, digesti\u00f3n, descomposici\u00f3n y regeneraci\u00f3n, difieren cada vez que ocurren. Por lo tanto, es el n\u00famero de estos ciclos, grandes y peque\u00f1os, lo que decide el potencial de diversidad. Deber\u00edamos sentirnos privilegiados de ser parte de esa renovaci\u00f3n eterna. Con solo vivir hemos logrado la inmortalidad como hierba, saltamontes, gaviotas, gansos y otras personas. Somos parte de la diversidad que experimentamos en todos los sentidos.<br>Si, como nos aseguran los cient\u00edficos, todos tenemos mol\u00e9culas de Einstein, y si las part\u00edculas at\u00f3micas de nuestro cuerpo f\u00edsico llegan a los l\u00edmites m\u00e1s externos del universo, entonces todos somos en efecto componentes de todas las cosas. No nos queda ning\u00fan lugar adonde ir si ya estamos en todas partes, y esto es, en verdad, todo lo que tendremos o necesitaremos. Si nos amamos a nosotros mismos, deber\u00edamos respetar todas las cosas por igual y no reclamar ninguna superioridad sobre lo que son, en efecto, nuestras otras partes. \u00bfEs la mano superior al ojo? \u00bfEl hijo de la madre?<\/p>\n<cite>Bill Mollison<\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"elementoshtmlpersonalizados\">Elementos HTML Personalizados<\/h2>\n\n\n\n<p>El est\u00e1ndar <strong>Custom elements<\/strong> nos indica dos maneras de extender la funcionalidad del HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Crear nuestros propios elementos desde cero<\/strong>, nuevos elementos a los que le agregamos toda la funcionalidad que sea necesaria.<\/li>\n\n\n\n<li><strong>Extender la funcionalidad de elementos ya existentes<\/strong>. Lamentablemente esta caracter\u00edstica no est\u00e1 soportada por todos los navegadores modernos. En la versi\u00f3n v0 si hab\u00eda soporte, pero esa versi\u00f3n ya est\u00e1 obsoleta.\n<ul class=\"wp-block-list\">\n<li>Desde la versi\u00f3n 67 de chrome esto funciona correctamente, Firefox lo tiene en desarrollo, Edge lo va a implementar, lamentablemente safari decidi\u00f3 no implementarlo. <\/li>\n\n\n\n<li>M\u00e1s informaci\u00f3n en https:\/\/www.chromestatus.com\/feature\/4670146924773376<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Para entender la diferencia, en el primer caso podr\u00edamos crear un elemento llamado <code>&lt;mi-boton&gt;<\/code>, al que tendr\u00edamos que agregar estilos y funcionalidad desde cero para que se comporte como un bot\u00f3n.<\/p>\n\n\n\n<p>En el segundo, podemos crear un elemento <code>&lt;mi-boton-extendido&gt;<\/code>, el cual extiende de la etiqueta <code>&lt;button&gt;<\/code>, entonces este componente si tendr\u00eda los estilos, eventos y dem\u00e1s comportamientos de un bot\u00f3n, es decir, hereda el comportamiento de <code>&lt;button&gt;<\/code> y entonces solo se le agregar\u00eda alg\u00fan comportamiento extra para cumplir con el objetivo en mente.<\/p>\n\n\n\n<p>Si en los ejemplos no lanza el alerta especificado en el c\u00f3digo, siempre puedes presionar <strong> &#8220;edit on codepen<\/strong>&#8221; para que el alerta funcione y puedes ver el c\u00f3digo en un espacio m\u00e1s grande.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Crear un nuevo elemento desde cero<\/h2>\n\n\n\n<p>Veamos la primera forma para crear un nuevo tipo de elemento, desde cero.<\/p>\n\n\n\n<p><iframe style=\"width: 100%;\" title=\"Custom elements: &amp;lt;mi-boton&amp;rt;\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/JraMMo\/?height=265&amp;theme-id=0&amp;default-tab=js,result#full\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/JraMMo\/\">Custom elements: &amp;lt;mi-boton&amp;rt;<\/a> by Jaime Cervantes Velasco<br \/>\n(<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n\n\n\n<p>Hay algunas cosas importantes que remarcar en el c\u00f3digo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Todos los elementos deben tener un prefijo, esto es un requisito para evitar que en futuras versiones de HTML las nuevas etiquetas colisionen con los elementos creados por ti u otros programadores.<\/li>\n\n\n\n<li>Podemos registrar un elemento en dos pasos, creando la clase y pasando su referencia como par\u00e1metro en el m\u00e9todo <code>customElements.define<\/code> o utilizar una clase an\u00f3nima como se hizo con <code>&lt;mi-boton-2&gt;<\/code> directamente en el m\u00e9todo&nbsp;<code>customElements.define<\/code>.<\/li>\n\n\n\n<li>Una clase en Javascript no es una clase como en otros lenguajes de programaci\u00f3n orientada a objetos, realmente es como un tipo de funci\u00f3n especial que te permite utilizar herencia de prototipos de una forma m\u00e1s familiar y limpia.<\/li>\n\n\n\n<li>En el constructor siempre debemos de invocar la funci\u00f3n <code>super()<\/code>, de esta manera obtenemos la herencia, pues provoca que se invoque este mismo m\u00e9todo en la cadena de prototipos\/herencia. Si no se invoca, el navegador web te mostrara un <code>caught ReferenceError: Must call super constructor in derived class before accesing 'this' or returning from derived constructor<\/code>.<\/li>\n\n\n\n<li>Para establecer estilos se usa la nuevas etiqueta creadas <code>mi-boton<\/code> and <code>mi-boton-2<\/code>. Al ser nuevas etiquetas, cualquier selector de css puede funcionar, hablamos de selector de clase, el id, pseudoselectores y pseudoelementos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Extender la funcionalidad de elementos ya existentes<\/h2>\n\n\n\n<p>Ahora vamos a crear un nuevo elemento basado en uno ya existente, solo pondremos el ejemplo del c\u00f3digo, realmente como mencionamos antes, no todos navegadores a\u00fan soportan este est\u00e1ndar, esperemos que en futuras versiones lo hagan.<\/p>\n\n\n\n<p><iframe style=\"width: 100%;\" title=\"Custom elements, extend: Miboton\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/zEyzaZ\/?height=265&amp;theme-id=0&amp;default-tab=js,result#full\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/zEyzaZ\/\">Custom elements, extend: Miboton<\/a> by Jaime Cervantes Velasco<br \/>\n(<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n\n\n\n<p>Las principales diferencias cuando extendemos la funcionalidad de elementos nativos es que seguimos utilizando el nombre de la etiqueta nativa y agregamos el atributo <code>is<\/code> para indicar que ser\u00e1 del tipo elemento que definimos. Esto en c\u00f3digo HTML. <\/p>\n\n\n\n<p>Pero en c\u00f3digo Javascript es necesario en la definici\u00f3n (m\u00e9todo <code>customElements.define<\/code>), utilizar un tercer par\u00e1metro donde podemos indicar de que elemento HTML vamos a extender, <code>extends<\/code>. Y definir la propiedad <code>is<\/code>  a trav\u00e9s de c\u00f3digo JS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"metodosdelciclodevidadeunelemento\">M\u00e9todos del ciclo de vida de un elemento<\/h2>\n\n\n\n<p>The <strong>custom elements&nbsp;<\/strong>tiene funciones que se ejecutan en un determinado momento de su existencia, de tal manera que el autor puede ejecutar acciones, cambios o inicializaci\u00f3n de datos en uno o mas momentos del ciclo de vida  de un componente.<\/p>\n\n\n\n<p><iframe title=\"Custom Element: Metodos\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/gGqPwJ\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2#full\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/gGqPwJ\/\">Custom Element: Metodos<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n\n\n\n<p>Si revisas la consola de la p\u00e1gina creada por <em>codepen<\/em>, el orden en que son ejecutados estos callbacks es:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"constructor: Cuando el elemento es creadoattributeChangedCallback: Cuando cambia un atributoconnectedCallback: Cuando el elemento es insertado en el documento\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">constructor<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> Cuando el elemento es creado<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FFCB6B\">attributeChangedCallback<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> Cuando cambia un atributo<\/span><\/span>\n<span class=\"line\"><span style=\"color: #FFCB6B\">connectedCallback<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> Cuando el elemento es insertado en el documento<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Para probar <code>disconnectedCallback<\/code> solo inspecciona el elemento <code>&lt;mi-mensaje&gt;<\/code> y elim\u00ednalo. Un mensaje de alerta parecer\u00e1 informando de la eliminaci\u00f3n.<\/p>\n\n\n\n<p>Cuando se crea el elemento, <code>attributeChangedCallback<\/code> se ejecuta al definir por primera vez el atributo antes de que el elemento sea insertado en el DOM.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sincronizacindeatributosypropiedades\">Sincronizaci\u00f3n de atributos y propiedades<\/h2>\n\n\n\n<p>Recuerda que las propiedades y los atributos son cosas diferentes, aunque los atributos se ocupen para reflejar el estado de un elemento, no son lo mismo. Un atributo se ocupa normalmente para declarar informaci\u00f3n del elemento en el c\u00f3digo HTML y reflejar su estado, una propiedad forma parte de la instancia del elemento.<\/p>\n\n\n\n<p>Para obtener un atributo se utiliza <code>element.getAttribute(attributeName)<\/code>, para obtener una propiedad se utiliza <code>element.property<\/code>.<\/p>\n\n\n\n<p>To define an attribute, use <code>element.setAttribute(attributeName, value)<\/code>, to define a property we use <code>element.property = value<\/code>.<\/p>\n\n\n\n<p>Attributes are stored in a property <code>element.attributes<\/code> de la instancia del elemento.<\/p>\n\n\n\n<p>Para entender mejor esto, vamos a crear un ejemplo un poco m\u00e1s complejo, donde se implementa la sincronizaci\u00f3n de atributos, propiedades y el estado del elemento. Este nuevo elemento consta de dos propiedades principales, <code>msj<\/code> and <code>casiVisible<\/code>, estos se sincronizan con los atributos <code>msj<\/code> and <code>casi-visible<\/code>.<\/p>\n\n\n\n<p>Cuando el atributo <code>casi-visible<\/code> est\u00e1 declarado, el elemento se opaca hasta casi&nbsp; desaparecer, adem\u00e1s el borde negro desaparece.<\/p>\n\n\n\n<p>Cuando decimos que se sincronizan, es que un cambio en la propiedad, se refleja en el atributo y viceversa.<\/p>\n\n\n\n<p><iframe title=\"Custom Element: mi-mensaje\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/rGPBVZ\/?height=265&amp;theme-id=0&amp;default-tab=js,result&amp;embed-version=2#full\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/rGPBVZ\/\">Custom Element: mi-mensaje<\/a>by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n\n\n\n<p>Puedes hacer varias pruebas, inspeccionando los elementos, agrega y elimina el atributo <code>casi-visible<\/code>.<\/p>\n\n\n\n<p>Tambi\u00e9n puedes inspeccionar el elemento y modificar el atributo <code>msj<\/code> para ver que sucede.<\/p>\n\n\n\n<p>Las mismas pruebas las puedes hacer con las propiedades, utilizando google chrome inspecciona los elementos y en la consola ejecutas el c\u00f3digo de abajo:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"$0.msj = 'HOLA MODIFICANDO EL MENSAJE';$0.casiVisible = false; \/\/ muestra el elemento$0.casiVisible = true; \/\/ casi oculta el elemento\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">$0<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">msj <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">HOLA MODIFICANDO EL MENSAJE<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">$0<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">casiVisible <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FF9CAC\">false<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ muestra el elemento<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">$0<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">casiVisible <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FF9CAC\">true<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ casi oculta el elemento<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En todos los casos notar\u00e1s cambios en el estado del elemento y en el contenido del mensaje.<\/p>\n\n\n\n<p>En siguientes publicaciones veremos como utilizar el est\u00e1ndar<a href=\"https:\/\/pensemosweb.com\/en\/como-crear-un-componente-web-template-y-shadow-dom\/\"> <strong>template<\/strong> o plantilla y <strong>shadow DOM<\/strong><\/a> (DOM en las sombras), luego veremos el uso <strong>JS modules<\/strong>, para al final crear componentes completos y ver como se comunican entre ellos.<\/p>","protected":false},"excerpt":{"rendered":"<p>        Elementos HTML personalizados, usando custom elements te permite utilizar hoy la tecnolog\u00eda del ma\u00f1ana<\/p>","protected":false},"author":2,"featured_media":3755,"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,68],"class_list":["post-3552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-componentes-web","tag-componentes-web","tag-javascript","tag-intermedio"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3552","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=3552"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3552\/revisions"}],"predecessor-version":[{"id":3844,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3552\/revisions\/3844"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3755"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}