{"id":44037,"date":"2024-08-02T09:00:54","date_gmt":"2024-08-02T07:00:54","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=44037"},"modified":"2024-07-31T10:41:56","modified_gmt":"2024-07-31T08:41:56","slug":"sdc-drupal-como-le-sacamos-el-maximo-partido","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/sdc-drupal-como-le-sacamos-el-maximo-partido\/","title":{"rendered":"SDC Drupal. \u00bfC\u00f3mo le sacamos el m\u00e1ximo partido?"},"content":{"rendered":"<p>Drupal introdujo el<strong> m\u00f3dulo SDC (Single Directory Components)<\/strong> en su versi\u00f3n 10.1 de forma experimental, pasando a ser estable en la 10.3, lanzada el 20 de junio de 2024. SDC adopta un enfoque basado en componentes, un paradigma ampliamente utilizado por los <em>frameworks<\/em> populares de JavaScript desde hace a\u00f1os.<\/p>\n<p>La base de este enfoque de trabajo es el <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/como-utilizar-la-metodologia-del-diseno-atomico-al-crear-una-web\/\">dise\u00f1o at\u00f3mico<\/a>, que consiste en dividir los elementos de una web en componentes. Los m\u00e1s peque\u00f1os, denominados \u00e1tomos, se combinan para formar mol\u00e9culas, que son estructuras HTML m\u00e1s complejas. Estas, a su vez, se integran para crear sistemas, que constituyen el resultado final visible para los usuarios.<\/p>\n<p>El dise\u00f1o por componentes en Drupal no es algo nuevo: ya exist\u00edan otros m\u00f3dulos y temas que abordaban esta aproximaci\u00f3n de diversas maneras, como Components!, Single File Components, UI Patterns&#8230; La diferencia es que <strong>ahora SDC pasa a ser parte del <em>core<\/em> de Drupal<\/strong>, lo que supone una estandarizaci\u00f3n del proceso de creaci\u00f3n de componentes, marcando un camino a seguir para todos los dem\u00e1s.<\/p>\n<p>&nbsp;<\/p>\n<h2>\u00bfQu\u00e9 mejoras introducir\u00e1 SDC en Drupal?<\/h2>\n<p>El trabajo por componentes mejora la organizaci\u00f3n del c\u00f3digo en Drupal, ya que, con SDC, todos los archivos necesarios para visualizar un componente se encuentran en la misma carpeta, estandarizando el proceso y facilitando la gesti\u00f3n.<\/p>\n<p>Hasta ahora, Drupal y el mundo del front-end no hab\u00edan sido muy amigables para los desarrolladores, lo que requer\u00eda una especializaci\u00f3n en el <a href=\"https:\/\/www.hiberus.com\/crecemos-contigo\/que-es-un-cms\/\" target=\"_blank\" rel=\"noopener\">CMS<\/a> y elevaba su curva de aprendizaje.<\/p>\n<p>Un desarrollador front-end que proviniera de otra tecnolog\u00eda y quisiera trabajar con Drupal ten\u00eda que enfrentarse a muchos conceptos desconocidos. Con la introducci\u00f3n de SDC, eso ha cambiado.<\/p>\n<p>Navegar por m\u00faltiples capas de plantillas Twig, identificar qu\u00e9 CSS y JS se est\u00e1n cargando y desde d\u00f3nde, descubrir qu\u00e9 <em>hooks<\/em> est\u00e1n modificando los datos mostrados y manejar la sobreescritura de librer\u00edas era parte del d\u00eda a d\u00eda del desarrollo front-end en Drupal.<\/p>\n<p>SDC cierra esa brecha, adoptando un paradigma ampliamente utilizado en el desarrollo web.<\/p>\n<h3>Puntos clave<\/h3>\n<ul>\n<li><strong>Estructura Unificada:<\/strong> Todos los archivos relacionados con un componente (CSS, JavaScript, plantillas, configuraci\u00f3n) se agrupan en un \u00fanico directorio.<\/li>\n<li><strong>Generaci\u00f3n de librer\u00edas automatizada:<\/strong> Bajo la carpeta del componente solemos contar con un archivo CSS y JS, el m\u00f3dulo SDC se encargar\u00e1 de cargarlos de forma autom\u00e1tica \u00fanicamente cuando haga falta.<\/li>\n<li><strong>Mejor mantenibilidad:<\/strong> Simplifica las actualizaciones y la depuraci\u00f3n al mantener todos los archivos del componente juntos.<\/li>\n<li><strong>Consistencia:<\/strong> Promueve una estructura estandarizada y organizada para los componentes en todo el proyecto. A nivel visual facilita la estandarizaci\u00f3n de los dise\u00f1os del portal.<\/li>\n<li><strong>Mayor reutilizaci\u00f3n:<\/strong> Facilita la reutilizaci\u00f3n de componentes en cualquier \u00e1mbito.<\/li>\n<\/ul>\n<h2><\/h2>\n<h2>Vamos a la pr\u00e1ctica. \u00bfC\u00f3mo crear un componente con SDC Drupal?<\/h2>\n<ul>\n<li>Habilitar el m\u00f3dulo SDC.<\/li>\n<li>Crear una carpeta llamada \u00abcomponents\u00bb en el tema o en uno de los m\u00f3dulos personalizados.<\/li>\n<li>Pasaremos a definir un nuevo componente.<\/li>\n<li>Crear los archivos relacionados. Deben tener el mismo nombre que la carpeta creada. Vamos a tomar un componente, <em>Card<\/em>, que nos va a servir de ejemplo a lo largo del art\u00edculo.<\/li>\n<\/ul>\n<p>Siguiendo este ejemplo, vamos a citar los archivos necesarios que debe contener esta carpeta:<\/p>\n<ul>\n<li>Metadatos del componente: card.component.yml<\/li>\n<li>C\u00f3digo Twig del componente: card.twig<\/li>\n<li>C\u00f3digo CSS del componente: card.css<\/li>\n<li>C\u00f3digo JavaScript del componente: card.js<\/li>\n<li>Documentaci\u00f3n del componente: README.md<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>\u00bfC\u00f3mo declaramos un componente?<\/h2>\n<p>En el *.component.yml tendremos metadatos con toda la informaci\u00f3n. Es imprescindible que este archivo est\u00e9 en la carpeta del componente para que Drupal pueda detectarlo.<\/p>\n<p>Podemos dividirlo en 3 partes:<\/p>\n<ul>\n<li><strong>Declaraci\u00f3n del componente:<\/strong> Proporciona informaci\u00f3n sobre el componente y es esencial para que Drupal detecte su nombre.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44038\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img115-1024x263.jpg\" alt=\"Declaraci\u00f3n del componente\" width=\"700\" height=\"180\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img115-1024x263.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img115-300x77.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img115-768x197.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img115-1536x395.jpg 1536w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img115-360x93.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img115.jpg 1580w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<ul>\n<li><em><strong>Props:<\/strong><\/em> Son los valores que puede recibir nuestro componente y est\u00e1n tipados. Esto a\u00f1ade una capa de validaci\u00f3n al utilizarlo.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44039\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img130-1024x944.jpg\" alt=\"Props\" width=\"700\" height=\"645\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img130-1024x944.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img130-300x277.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img130-768x708.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img130-360x332.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img130.jpg 1536w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<ul>\n<li><em><strong>Slots:<\/strong> <\/em>Son espacios libres para renderizar HTML, componentes anidados o bloques en Twig, sin ninguna limitaci\u00f3n.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44040\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img131-1024x397.jpg\" alt=\"Slots\" width=\"700\" height=\"272\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img131-1024x397.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img131-300x116.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img131-768x298.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img131-360x140.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img131.jpg 1536w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><em>Props<\/em> y<em> slots<\/em><\/h3>\n<p>Existen dos maneras de enviar datos a un componente: a trav\u00e9s de las <em>props<\/em> (propiedades) o de los <em>slots<\/em> (ranuras). Estos t\u00e9rminos se utilizan para el suministro de datos.<\/p>\n<ul>\n<li><strong><em>Props:<\/em><\/strong> Utilizan una estructura espec\u00edfica para la transmisi\u00f3n de datos al componente, organizada en formato JSON con pares clave-valor. Esta estructura asegura una transferencia de informaci\u00f3n ordenada y predecible.<\/li>\n<li><strong><em>Slots: <\/em><\/strong>Se emplean para manejar datos no estructurados, como componentes anidados, bloques Twig o marcado HTML. A diferencia de las <em>props<\/em>, las ranuras no requieren un formato JSON estructurado y permiten una mayor flexibilidad en el manejo de datos y la estructura HTML.<\/li>\n<\/ul>\n<p>En resumen, las <em>props<\/em> se pueden considerar como campos estructurados, mientras que las <em>slots<\/em> ofrecen flexibilidad para manejar datos m\u00e1s din\u00e1micos y HTML libre.<\/p>\n<p>Hasta ahora, hemos visto los beneficios de SDC y c\u00f3mo crear un nuevo componente. Pero \u00bfc\u00f3mo hacemos que todo esto funcione?<\/p>\n<h2><\/h2>\n<h2>\u00bfC\u00f3mo los utilizamos?<\/h2>\n<p>Lo primero de todo es estructurar nuestro archivo Twig dentro de la carpeta \/card, con las <em>props<\/em> y las <em>slots<\/em> que ya hemos declarado anteriormente.<\/p>\n<p>Es fundamental validar el contenido de las <em>props<\/em> antes de visualizarlo, para evitar renderizar HTML con valores vac\u00edos que puedan alterar la estructura.<\/p>\n<p>Adem\u00e1s, durante el desarrollo, Drupal nos notificar\u00e1 si enviamos un tipo de dato incorrecto en alguna de las <em>props<\/em>, lo cual es un gran beneficio para nuestro flujo de trabajo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44084\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/carbon-23-1024x891.png\" alt=\"Dato incorrecto\" width=\"700\" height=\"609\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/carbon-23-1024x891.png 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/carbon-23-300x261.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/carbon-23-768x668.png 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/carbon-23-1536x1337.png 1536w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/carbon-23-360x313.png 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/carbon-23.png 1618w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Una vez tengamos la plantilla en la carpeta correspondiente, pasaremos a incluirlo desde alg\u00fan punto de nuestro Drupal.<\/p>\n<p>Si estamos familiarizados con Twig, las declaraciones {% include %} y {% embed %} no nos resultar\u00e1n extra\u00f1as, lo que nos facilitar\u00e1 su comprensi\u00f3n. Estas declaraciones nos permiten incluir un componente o anidar varios entre ellos.<\/p>\n<p>Vamos a ver una serie de ejemplos para entenderlo mejor.<\/p>\n<p>En primer lugar, tenemos un ejemplo b\u00e1sico de nuestro componente <em>Card<\/em>, en el que lo incluimos en un tipo de contenido de Drupal. Concretamente es un art\u00edculo en su modo de visualizaci\u00f3n <em>\u201cteaser\u201d<\/em>, en el cual hemos sobrescrito su plantilla Twig con lo siguiente:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44042\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img193-1024x386.jpg\" alt=\"Visualizaci\u00f3n teaser\" width=\"700\" height=\"264\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img193-1024x386.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img193-300x113.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img193-768x290.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img193-360x136.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img193.jpg 1251w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><br \/>\nLa informaci\u00f3n que enviamos ser\u00e1 el propio <em>label<\/em> de la entidad, un campo <em>body<\/em>, una imagen con nombre maquina<em> field_image<\/em> y le proporcionamos informaci\u00f3n para realizar personalizaciones como el tipo de <em>Card<\/em> a utilizar y el tipo de cabecera HTML que necesitamos (h1, h2, h3&#8230;)<\/p>\n<p><strong>El tipo de informaci\u00f3n y la forma de transmitirla variar\u00e1 seg\u00fan el tipo de entidad que estemos manipulando.<\/strong><\/p>\n<p>A continuaci\u00f3n, vamos a usar el mismo ejemplo, pero realizando una anidaci\u00f3n de un \u00e1tomo <em>Button<\/em> junto a la <em>Card<\/em>. Podemos comenzar a apreciar la potencia de este enfoque, que abre un gran abanico de posibilidades.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44043\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img194-1024x665.jpg\" alt=\"Anidaci\u00f3n de un \u00e1tomo Button\" width=\"700\" height=\"454\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img194-1024x665.jpg 1024w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img194-300x195.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img194-768x498.jpg 768w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img194-555x360.jpg 555w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img194-360x234.jpg 360w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2024\/07\/img194.jpg 1251w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Y esto no se queda aqu\u00ed&#8230;<\/h2>\n<p>El anuncio de Starshot marcar\u00e1 un antes y un despu\u00e9s en el ecosistema de Drupal. Su objetivo es convertirse en un producto de c\u00f3digo abierto que haga la instalaci\u00f3n inicial de Drupal mucho m\u00e1s accesible, proporcionando un entorno f\u00e1cil de configurar y con personalizaciones preestablecidas. Esto permitir\u00e1 que desarrolladores sin experiencia previa en Drupal puedan acercarse al CMS con mayor facilidad.<\/p>\n<p>SDC ser\u00e1 una parte fundamental de este producto dentro del llamado Experience Builder, que promete ofrecer un \u00abNext Generation Page Builder\u00bb seg\u00fan la visi\u00f3n de Dries Buytaert.<\/p>\n<p>La reciente implementaci\u00f3n de SDC y la gran acogida que ha tenido por parte de la comunidad est\u00e1n impulsando su evoluci\u00f3n diaria.<\/p>\n<p>Single Directory Components ya es una realidad y est\u00e1 revolucionando los est\u00e1ndares del front-end en Drupal.<\/p>\n<p style=\"text-align: right;\"><em>Art\u00edculo escrito por Marco Villuendas y Alba Mart\u00ednez Labrador<\/em><\/p>\n<p>En hiberus contamos con un departamento de\u00a0<a href=\"https:\/\/www.hiberus.com\/dxp\/drupal\" target=\"_blank\" rel=\"noopener\">expertos Drupal<\/a>\u00a0formado por\u00a0<strong>150 desarrolladores certificados en Drupal\u00a0<\/strong>y somos<strong>\u00a0miembros de la Asociaci\u00f3n Espa\u00f1ola de Drupal<\/strong>. Nuestros\u00a0<strong>m\u00e1s de 10 a\u00f1os de experiencia<\/strong>\u00a0y los m\u00e1s de\u00a0<strong>200 portales desarrollados<\/strong>\u00a0hasta la fecha nos avalan. \u00bfNecesitas un\u00a0<em>partner<\/em> para tu sitio web de Drupal con las mejores garant\u00edas de \u00e9xito? Contacta con nosotros y te ayudaremos.<\/p>\n        <div class=\"row\">\n            <div class=\"block-cta-form\" style=\"background-color: #003664;\">\n                <div class=\"content-cta-form\">\n                    <div class=\"text-cta-form\">\n                        <p class=\"title-cta-form\">\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de SDC y Drupal?<\/p>\n                        <p>Contacta con nuestro equipo de DXP<\/p>\n                    <\/div>\n                    <div class=\"form-fields\">\n                        \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f33973-o1\" lang=\"es-ES\" dir=\"ltr\" data-wpcf7-id=\"33973\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/44037#wpcf7-f33973-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"Formulario de contacto\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"33973\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.5\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"es_ES\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f33973-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/><input type=\"hidden\" name=\"_wpcf7_recaptcha_response\" value=\"\" \/>\n<\/fieldset>\n<div id=\"responsive-form\" class=\"clearfix\">\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"nombre\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Nombre *\" value=\"\" type=\"text\" name=\"nombre\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"apellido\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Apellido *\" value=\"\" type=\"text\" name=\"apellido\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"correo\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Correo corporativo *\" value=\"\" type=\"email\" name=\"correo\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"telf-contacto\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Tel\u00e9fono *\" value=\"\" type=\"tel\" name=\"telf-contacto\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"compania\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Compa\u00f1ia *\" value=\"\" type=\"text\" name=\"compania\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"mensaje\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"Mensaje *\" name=\"mensaje\"><\/textarea><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"politica\"><span class=\"wpcf7-form-control wpcf7-acceptance\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"politica\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">He le\u00eddo y acepto la <a href=\"https:\/\/www.hiberus.com\/politica\" target=\"_blank\"><u>Pol\u00edtica de privacidad<\/u><\/a><\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-full color-acceptance\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"marketing\"><span class=\"wpcf7-form-control wpcf7-acceptance optional\"><span class=\"wpcf7-list-item\"><label><input type=\"checkbox\" name=\"marketing\" value=\"1\" aria-invalid=\"false\" \/><span class=\"wpcf7-list-item-label\">Me gustar\u00eda recibir comunicaciones de marketing de Hiberus y sobre sus productos, servicios y eventos.<\/span><\/label><\/span><\/span><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div class=\"column-half\">\n\t\t\t<p><input class=\"wpcf7-form-control wpcf7-submit has-spinner\" type=\"submit\" value=\"Contacta con nosotros\" \/>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"form-row\">\n\t\t<div id=\"campos_ocultos\" class=\"hidden\">\n\t\t\t<p><span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new1\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new1\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new1\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new2\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new2\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new2\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new3\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new3\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new3\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new4\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new4\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new4\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"oculto_analitica_new_p\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text\" id=\"oculto_analitica_new_p\" aria-invalid=\"false\" value=\"\" type=\"text\" name=\"oculto_analitica_new_p\" \/><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<!--end responsive-form--><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"<p>Drupal introdujo el m\u00f3dulo SDC (Single Directory Components) en su versi\u00f3n 10.1 de forma experimental, pasando a ser estable en la 10.3,&#8230;<\/p>\n","protected":false},"author":396,"featured_media":44075,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,232],"tags":[25,32],"class_list":{"0":"post-44037","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-portales-dxp","9":"tag-cms","10":"tag-drupal"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/44037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/users\/396"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=44037"}],"version-history":[{"count":7,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/44037\/revisions"}],"predecessor-version":[{"id":44086,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/44037\/revisions\/44086"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/44075"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=44037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=44037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=44037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}