{"id":35855,"date":"2023-10-30T10:15:26","date_gmt":"2023-10-30T09:15:26","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=35855"},"modified":"2023-11-28T11:11:51","modified_gmt":"2023-11-28T10:11:51","slug":"que-son-los-design-tokens-ventajas-de-usarlos-en-diseno-ux-ui","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/que-son-los-design-tokens-ventajas-de-usarlos-en-diseno-ux-ui\/","title":{"rendered":"Qu\u00e9 son los Design Tokens. Ventajas de usarlos en dise\u00f1o UX &#038; UI"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">La <strong>optimizaci\u00f3n del tiempo en los flujos de trabajo y la consistencia en los proyectos<\/strong> son dos objetivos fundamentales a tener en presentes durante la ejecuci\u00f3n de cualquier proyecto, sobre todo, en aquellos con un desarrollo y una escalabilidad mayor. Para lograrlo, es de vital importancia trabajar con un buen sistema de dise\u00f1o que <strong>gu\u00ede, referencie y facilite la comunicaci\u00f3n entre todos los miembros involucrados<\/strong>. Y no hay un buen sistema de dise\u00f1o sin unos buenos <\/span><i><span style=\"font-weight: 400;\">tokens <\/span><\/i><span style=\"font-weight: 400;\">pero, \u00bfqu\u00e9 son los <\/span><i><span style=\"font-weight: 400;\">tokens<\/span><\/i><span style=\"font-weight: 400;\">?,\u00a0 \u00bfpor qu\u00e9 son tan importantes?, \u00bfc\u00f3mo se crean? A continuaci\u00f3n, te damos las respuestas a todas estas preguntas.<\/span><\/p>\n<h2>\u00bfQu\u00e9 es un token?<\/h2>\n<p><span style=\"font-weight: 400;\">Al igual que sucede con los sistemas de dise\u00f1o, existen numerosas definiciones, m\u00e1s o menos complejas, sobre qu\u00e9 entendemos por \u201c<\/span><i><span style=\"font-weight: 400;\">token<\/span><\/i><span style=\"font-weight: 400;\">\u201d<\/span> <span style=\"font-weight: 400;\">o \u201c<\/span><i><span style=\"font-weight: 400;\">design token<\/span><\/i><span style=\"font-weight: 400;\">\u201d.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">El concepto como tal surgi\u00f3 en <\/span><a href=\"https:\/\/www.hiberus.com\/ecommerce\/salesforce-commerce\"><span style=\"font-weight: 400;\">Salesforce <\/span><\/a><span style=\"font-weight: 400;\">de la mano de Jina Anne, quien lo define, b\u00e1sicamente, como &#8216;\u00c1tomos visuales del sistema de dise\u00f1o, entidades con nombre que sirven para almacenar atributos de dise\u00f1o&#8217;.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tomando esta idea y otras muchas que circulan en nuestro ecosistema digital, podemos definir un token como<strong> la \u00fanica fuente de la verdad de la que manan <\/strong><\/span><strong>entidades con nombre<\/strong><span style=\"font-weight: 400;\"><strong> que almacenan valores en bruto de elementos indivisibles de un sistema de dise\u00f1o<\/strong>, como son los colores, tama\u00f1os de tipograf\u00edas, estilos, altos de l\u00ednea, estilos de bordes, sombras, radios de bordes, media queries, iconos, etc. Se usan en lugar de valores <\/span><i><span style=\"font-weight: 400;\">per se<\/span><\/i><span style=\"font-weight: 400;\"> y se almacenan en un <\/span><span style=\"font-weight: 400;\">formato agn\u00f3stico<\/span><span style=\"font-weight: 400;\"> tecnol\u00f3gicamente para que se puedan usar en cualquier plataforma, reemplazando a los valores codificados.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Por ejemplo, un estilo tipogr\u00e1fico no est\u00e1 compuesto solamente por tipo y cuerpo sino que, adem\u00e1s, cuenta con otros atributos como son el alto de l\u00ednea, el interletraje y el peso tipogr\u00e1fico. Cualquier cambio en algunos de ellos provoca un cambio en todo el sistema y, por tanto, deben estar definidos, comprendidos y compartidos por todos de manera \u00e1gil y sencilla. Aqu\u00ed es donde radica el verdadero valor del <\/span><i><span style=\"font-weight: 400;\">token<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35860 size-full aligncenter\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/token-1.png\" alt=\"\" width=\"602\" height=\"232\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/token-1.png 602w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/token-1-300x116.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/token-1-360x139.png 360w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/p>\n<p style=\"text-align: center;\">Fuente: <a href=\"https:\/\/www.linkedin.com\/pulse\/la-importancia-de-los-design-tokens-daniel-ram%C3%ADrez\/\">La importancia de los Design Tokens<\/a><\/p>\n<p>De todo ello extraemos dos grandes ideas:<\/p>\n<ul>\n<li><strong>Fuerte v\u00ednculo con <em>Atomic Design,<\/em><\/strong> puesto que uno no tiene sentido sin el otro. Los tokens van un paso m\u00e1s all\u00e1 diseccionando cada uno de los atributos que forman el componente m\u00ednimo e indivisible de la metodolog\u00eda <em>Atomic Design<\/em>.<\/li>\n<li><strong>Metodolog\u00eda agn\u00f3stica<\/strong>: con los tokens conseguimos almacenar todas las decisiones de dise\u00f1o en entidades con un formato de datos estructurado (normalmente JSON o YAML), pudi\u00e9ndose utilizar en cualquier proyecto, independientemente del lenguaje de programaci\u00f3n utilizado.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35856 size-full\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/extending-atomic-design.png\" alt=\"\" width=\"591\" height=\"212\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/extending-atomic-design.png 591w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/extending-atomic-design-300x108.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/extending-atomic-design-360x129.png 360w\" sizes=\"auto, (max-width: 591px) 100vw, 591px\" \/><\/p>\n<p style=\"text-align: center;\">Fuente: <a href=\"https:\/\/bradfrost.com\/blog\/post\/extending-atomic-design\/\">Extending atomic design<\/a><\/p>\n<h2>Ventajas de usar design tokens<\/h2>\n<p>Llegados a este punto, podemos hacernos idea de cu\u00e1les pueden ser los beneficios que nos aportar\u00e1 el trabajo con <em>design token<\/em>.<\/p>\n<ol>\n<li><strong>Comunicaci\u00f3n dise\u00f1ador &#8211; desarrollador<\/strong>. Al trabajar con una \u00fanica fuente de conocimiento, se da una alineaci\u00f3n perfecta entre dise\u00f1o y desarrollo. Entre ellos se comunican con el mismo lenguaje, lo que evita errores de interpretaci\u00f3n del dise\u00f1o por parte del desarrollo.<\/li>\n<li><strong>Coherencia y consistencia en la escalabilidad del proyecto<\/strong>. Esta conexi\u00f3n entre los diferentes equipos implicados en el desarrollo de un producto consigue una perfecta flexibilidad en su escalabilidad, adapt\u00e1ndose a las necesidades de cada momento y sin riesgo de perder consistencia.<\/li>\n<li><strong>Agilidad<\/strong>. Al trabajar con datos estructurados lo que se permite es una transformaci\u00f3n autom\u00e1tica en consumibles para equipos de dise\u00f1o, desarrollo o, incluso, para los websites de documentaci\u00f3n, ya que todo queda correctamente documentado para el sistema de dise\u00f1o. Todo ello de manera r\u00e1pida y sencilla, simplificando la toma de decisiones y los costes de producci\u00f3n.<\/li>\n<li><strong>Documentaci\u00f3n y mantenimiento<\/strong>. Como consecuencia de todas las anteriores ventajas, resulta obvio que facilita y simplifica el mantenimiento. Del mismo modo, permite documentar de forma fiable qu\u00e9 hay, por qu\u00e9 y c\u00f3mo funciona cada componente dentro de un sistema de dise\u00f1o.<\/li>\n<li><strong>Reducci\u00f3n de la curva de aprendizaje<\/strong>. El uso de un solo lenguaje facilita la incorporaci\u00f3n de nuevos usuarios al proyecto. Gracias a los design tokens estas nuevas incorporaciones se familiarizar\u00e1n de r\u00e1pida, sencilla y c\u00f3modamente con el proyecto, sin necesidad de largos y complejos per\u00edodos de adaptaci\u00f3n.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35857 size-full\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/con-un-lenguaje-comun.png\" alt=\"\" width=\"602\" height=\"273\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/con-un-lenguaje-comun.png 602w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/con-un-lenguaje-comun-300x136.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/con-un-lenguaje-comun-360x163.png 360w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35858 size-full\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/sin-un-lenguaje-comun.png\" alt=\"\" width=\"602\" height=\"273\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/sin-un-lenguaje-comun.png 602w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/sin-un-lenguaje-comun-300x136.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/sin-un-lenguaje-comun-360x163.png 360w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/p>\n<p style=\"text-align: center;\">Fuente: <a href=\"http:\/\/www.alfonsomorcuende.com\/es\/archive\/\">Alfonso Moncuerde<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35861 \" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/narrative.png\" alt=\"\" width=\"602\" height=\"375\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/narrative.png 602w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/narrative-300x187.png 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/narrative-360x224.png 360w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/p>\n<p style=\"text-align: center;\">Fuente: <a href=\"http:\/\/www.alfonsomorcuende.com\/es\/archive\/\">Alfonso Moncuerde<\/a><\/p>\n<h2>\u00bfC\u00f3mo dise\u00f1amos un token?<\/h2>\n<p>Como ya hemos visto, los <em>tokens <\/em>nos ayudan a <strong>construir las unidades m\u00e1s peque\u00f1as de un dise\u00f1o at\u00f3mico<\/strong>. A la hora de comenzar a realizar un<em> Design token<\/em> hemos de tener presente que estamos documentando y exponiendo todas las decisiones que m\u00e1s tarde se convertir\u00e1n en opciones para el resto del equipo de dise\u00f1o y desarrollo, y que pueden y deben ser compartidas, mantenidas y reutilizadas de manera sencilla. La idea es reducir las decisiones a las que tu sistema de dise\u00f1o posibilita, manteniendo as\u00ed la <strong>escalabilidad y consistencia del producto<\/strong>, y dando alternativas en caso de que sea necesario romper los patrones.<\/p>\n<p>De este modo, deberemos <strong>normalizar y documentar todos aquellos elementos que sirven para construir \u00e1tomos<\/strong>. Podemos partir con:<\/p>\n<ul>\n<li><strong>colour<\/strong> (background, text, border, etc.)<\/li>\n<li><strong>typography<\/strong> (family, line-height, font-size, etc.)<\/li>\n<li><strong>drop-shadow<\/strong><\/li>\n<li><strong>gradient<\/strong><\/li>\n<\/ul>\n<p>Ahora, pensemos en las decisiones de dise\u00f1o que no siempre se representan visualmente como un ente aparte e independiente.<\/p>\n<ul>\n<li><strong>spacing\/layout<\/strong><\/li>\n<li><strong>border-radius<\/strong><\/li>\n<li><strong>border-width<\/strong><\/li>\n<li><strong>z-index (depth)<\/strong><\/li>\n<li><strong>opacity<\/strong><\/li>\n<li><strong>time<\/strong><\/li>\n<\/ul>\n<p>Muchos de estos <em>tokens <\/em>pueden ser <strong>reproducidos y documentados en tu software de dise\u00f1o UI favorito<\/strong>, Figma, Sketch o Adobe XD.<\/p>\n<p>Las siguientes im\u00e1genes muestran el <strong>c\u00f3digo de los diferentes atributos<\/strong> -decisiones tomadas por los diferentes equipos implicados- para la representaci\u00f3n de un componente, en este caso un <em>button <\/em>(izquierda); por su parte, (imagen derecha) vemos c\u00f3mo se documenta todo ello en su sistema de dise\u00f1o. De este modo, en el caso de que necesitemos realizar alg\u00fan cambio en ese componente, tan solo ser\u00e1 necesario modificar los valores del atributo afectado en el c\u00f3digo, una vez hecho esto, se genera un nuevo token y listo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35862 size-full\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/codigo-token.png\" alt=\"\" width=\"285\" height=\"227\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35863 size-full\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/codigo-token2.png\" alt=\"\" width=\"277\" height=\"334\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/codigo-token2.png 277w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/codigo-token2-249x300.png 249w\" sizes=\"auto, (max-width: 277px) 100vw, 277px\" \/><\/p>\n<p style=\"text-align: center;\">Fuente: <a href=\"https:\/\/didoo.medium.com\/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa\">How to manage your Design Tokens with Style Dictionary, Cristiano Rastelli<\/a><\/p>\n<h2><strong>\u00bfC\u00f3mo implementamos Design Tokens?<\/strong><\/h2>\n<p>Al implementar <em>Design token<\/em> debemos tener en cuenta lo que hacemos en dise\u00f1o y en desarrollo, simult\u00e1neamente. La librer\u00eda o UI kit de Sketch o Figma de tu <em>Design token <\/em>deber\u00eda estar sincronizada con el c\u00f3digo que provees a los <em>developers <\/em>(componentes, patrones, templates, etc) o al menos medianamente al d\u00eda.<\/p>\n<p>Todas estas decisiones las hemos de transformar a un formato agn\u00f3stico que pueda ser le\u00eddo por <strong>cualquier lenguaje de programaci\u00f3n<\/strong>; normalmente se utiliza el formato JSON. Existen diferentes aplicaciones como <a href=\"https:\/\/github.com\/salesforce-ux\/theo\">Theo<\/a> (Salesforce) o <a href=\"https:\/\/amzn.github.io\/style-dictionary\/#\/\">Style Dictionary<\/a> (Amazon) que realizan esta labor y distribuyen los <em>design tokens<\/em> en varios formatos, manteniendo s\u00f3lo un archivo de configuraci\u00f3n que escribir\u00e1 Sass, Less, XML, SWIFT, etc. Es aqu\u00ed donde radica el verdadero poder de usar <em>design token<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-35864 size-full\" src=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/implementacion-tokens.jpg\" alt=\"Diagrama de Design Tokens\" width=\"602\" height=\"360\" srcset=\"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/implementacion-tokens.jpg 602w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/implementacion-tokens-300x179.jpg 300w, https:\/\/www.hiberus.com\/crecemos-contigo\/wp-content\/uploads\/2023\/10\/implementacion-tokens-360x215.jpg 360w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/p>\n<p style=\"text-align: center;\">Fuente: <a href=\"https:\/\/gonzalo-vasquez-correa.medium.com\/design-tokens-en-tu-design-system-90498eeafd49\">C\u00f3mo dise\u00f1amos un Desig token, Gonzalo V\u00e1squez (Medium)<\/a><\/p>\n<p>\u00bfQuieres conocer m\u00e1s sobre <em>design tokens<\/em>? \u00bfNecesitas implantar esta metodolog\u00eda en tu compa\u00f1\u00eda? En hiberus tenemos un<a href=\"https:\/\/www.hiberus.com\/agencia-digital\/usabilidad-y-experiencia-de-usuario\"><strong> \u00e1rea especializada en proyectos UX<\/strong><\/a>. Nuestro equipo analizar\u00e1 tus necesidades y te asesorar\u00e1 en los pasos a realizar para conseguirlo, <strong>mejorando la usabilidad y conversi\u00f3n de tu proyecto digital. <\/strong>No dudes en contactarnos, \u00a1en <a href=\"https:\/\/www.hiberus.com\/agencia-digital\">hiberus Digital<\/a> estaremos encantados de ayudarte!<\/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 UX\/UI?<\/p>\n                        <p>Contacta con nuestro equipo de User Research, User Experience y User Interface<\/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\/35855#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>La optimizaci\u00f3n del tiempo en los flujos de trabajo y la consistencia en los proyectos son dos objetivos fundamentales a tener en&#8230;<\/p>\n","protected":false},"author":331,"featured_media":35869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_ayudawp_aiss_exclude":false,"footnotes":""},"categories":[3,230],"tags":[31,143,189,91],"class_list":{"0":"post-35855","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-negocio-electronico","8":"category-ux-analitica","9":"tag-diseno","10":"tag-diseno-web","11":"tag-experiencia-de-usuario","12":"tag-usabilidad"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/35855","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\/331"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/comments?post=35855"}],"version-history":[{"count":9,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/35855\/revisions"}],"predecessor-version":[{"id":35975,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/posts\/35855\/revisions\/35975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media\/35869"}],"wp:attachment":[{"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/media?parent=35855"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/categories?post=35855"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiberus.com\/crecemos-contigo\/wp-json\/wp\/v2\/tags?post=35855"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}