{"id":9106,"date":"2024-09-03T16:04:44","date_gmt":"2024-09-03T22:04:44","guid":{"rendered":"https:\/\/urbanista.mx\/?page_id=9106"},"modified":"2025-10-27T16:02:17","modified_gmt":"2025-10-27T22:02:17","slug":"firma-electronica-urbanhub","status":"publish","type":"page","link":"https:\/\/urbanista.mx\/en\/firma-electronica-urbanhub\/","title":{"rendered":"Firma Electr\u00f3nica | urbanhub"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9106\" class=\"elementor elementor-9106\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e3aedf e-flex e-con-boxed e-con e-parent\" data-id=\"3e3aedf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-03cd92f e-con-full e-flex e-con e-parent\" data-id=\"03cd92f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-dd1d3e3 e-flex e-con-boxed e-con e-child\" data-id=\"dd1d3e3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03ccb5e elementor-widget elementor-widget-heading\" data-id=\"03ccb5e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Firma Electr\u00f3nica<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-026f616 elementor-widget elementor-widget-text-editor\" data-id=\"026f616\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Rellena con tus datos y mira en tiempo real tu firma electr\u00f3nica:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d973754 elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"d973754\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;button_width&quot;:&quot;100&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"9106\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"d973754\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"\" \/>\n\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tNombre\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Nombre Completo\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-cargo elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-cargo\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tCargo\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[cargo]\" id=\"form-field-cargo\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Cargo\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-tel elementor-field-group elementor-column elementor-field-group-telefono elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-telefono\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tTel\u00e9fono\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t<input size=\"1\" type=\"tel\" name=\"form_fields[telefono]\" id=\"form-field-telefono\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Tel\u00e9fono\" required=\"required\" pattern=\"[0-9()#&amp;+*-=.]+\" title=\"Only numbers and phone characters (#, -, *, etc) are accepted.\">\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tEmail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"Email\" required=\"required\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-acceptance elementor-field-group elementor-column elementor-field-group-field_2319141 elementor-col-100 elementor-field-required\">\n\t\t\t\t\t\t\t<div class=\"elementor-field-subgroup\">\n\t\t\t<span class=\"elementor-field-option\">\n\t\t\t\t<input type=\"checkbox\" name=\"form_fields[field_2319141]\" id=\"form-field-field_2319141\" class=\"elementor-field elementor-size-sm  elementor-acceptance-field\" required=\"required\">\n\t\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-sm\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Send<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5e0f6ed e-flex e-con-boxed e-con e-child\" data-id=\"5e0f6ed\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22474fa elementor-widget elementor-widget-heading\" data-id=\"22474fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u00bfC\u00f3mo implementar tu firma electr\u00f3nica?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6027d1d elementor-widget elementor-widget-video\" data-id=\"6027d1d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;play_on_mobile&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"http:\/\/urbanista.mx\/wp-content\/uploads\/2024\/08\/Tutorial-Firma-electronica.mp4\" autoplay=\"\" loop=\"\" controls=\"\" muted=\"muted\" playsinline=\"\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-27cee1f e-flex e-con-boxed e-con e-parent\" data-id=\"27cee1f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be0fa46 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"be0fa46\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Tu firma aqu\u00ed \u21b4<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61d3bc4 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"61d3bc4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Selecciona tu firma y p\u00e9gala en tu correo:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b413f44 e-con-full e-flex e-con e-child\" data-id=\"b413f44\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-3083804 e-con-full e-flex e-con e-child\" data-id=\"3083804\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83be7ab elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"83be7ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<body>\r\n  <div id=\"firma\" style=\"width: 100%; height: auto; background-color: white;\">\r\n    <span style=\"text-align: center; color: white;\"> \r\n      <p>DESDE AC\u00c1<\/p>\r\n    <\/span>\r\n    \r\n   <table style=\"height: auto; width: 90%; border-collapse: collapse; background-color: #0e4e98; border: 2px solid #0e4e98; margin: 0 auto;\">\r\n  <tbody>\r\n    <tr>\r\n      <td style=\"width: 30%; vertical-align: middle; padding: 20px; border: none;\">\r\n        <p style=\"margin: 0; font-size: 35px; font-weight: bold; font-family: 'Bebas Neue', sans-serif;\">\r\n          <span id=\"name\" style=\"color: #ffffff;\">Christian Ruiz Guti\u00e9rrez<\/span>\r\n        <\/p>\r\n        <p style=\"margin: 0; font-size: 25px; font-family: Arial, sans-serif;\">\r\n          <span style=\"color: #ffffff;\"><em id=\"cargo\">Desarrollador<\/em><\/span>\r\n        <\/p>\r\n      <\/td>\r\n      <td style=\"width: 30%; vertical-align: middle; padding: 20px; text-align: left; border: none;\">\r\n        <p id=\"telefono\" style=\"margin: 0; font-size: 20px; color: #ffffff; font-family: Arial, sans-serif;\">\r\n          <strong>Tel\u00e9fono:<\/strong> 9711090531\r\n        <\/p>\r\n        <br>\r\n        <p id=\"email\" style=\"margin: 0; font-size: 20px; color: #ffffff; font-family: Arial, sans-serif;\">\r\n          Email: correo@gmail.com \r\n        <\/p>\r\n      <\/td>\r\n      <td style=\"width: 30%; text-align: center; padding: 10px; border: none;\">\r\n        <p>\r\n          <img decoding=\"async\" src=\"http:\/\/urbanista.mx\/wp-content\/uploads\/2024\/09\/urbanhun-blanco.png\" alt=\"UrbanHub Logo\" width=\"85%\" height=\"auto\" \/>\r\n          <br \/><br \/>\r\n          <a style=\"color: #ffffff; font-family: Roboto, sans-serif; font-size: 20px;\">urbanhub.com.mx<\/a>\r\n        <\/p>\r\n      <\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td style=\"padding: 0; text-align: center; border: none;\" colspan=\"3\">\r\n        <!-- Aqu\u00ed puedes agregar contenido adicional si es necesario -->\r\n      <\/td>\r\n    <\/tr>\r\n  <\/tbody>\r\n<\/table>\r\n\r\n\r\n    <span style=\"text-align: center; color: white;\"> \r\n      <p>HASTA AC\u00c1<\/p>\r\n    <\/span>\r\n    \r\n  <\/div>\r\n<\/body>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c37d78f elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"c37d78f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div style=\"text-align: center; margin: 20px 0;\">\r\n  <button id=\"downloadBtn\" style=\"padding: 10px 20px; font-size: 16px; cursor: pointer;\">Descargar Firma<\/button>\r\n  <div id=\"status\" style=\"margin-top: 10px;\"><\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n<script>\r\ndocument.getElementById('downloadBtn').addEventListener('click', function() {\r\n    var status = document.getElementById('status');\r\n    status.textContent = 'Generando imagen...';\r\n\r\n    var table = document.querySelector('#firma table');\r\n    if (!table) {\r\n        status.textContent = 'Error: No se encontr\u00f3 la tabla.';\r\n        return;\r\n    }\r\n\r\n    html2canvas(table, {\r\n        scale: 2,\r\n        useCORS: true,\r\n        allowTaint: true,\r\n        backgroundColor: '#0e4e98'\r\n    }).then(function(canvas) {\r\n        var link = document.createElement('a');\r\n        link.download = 'firma.png';\r\n        link.href = canvas.toDataURL('image\/png');\r\n        link.click();\r\n        status.textContent = 'Firma descargada con \u00e9xito!';\r\n    }).catch(function(error) {\r\n        console.error('Error:', error);\r\n        status.textContent = 'Error al generar la imagen.';\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81c58ef elementor-hidden-widescreen elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-text-editor\" data-id=\"81c58ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>En versi\u00f3n mobile la representaci\u00f3n en tiempo real puede alterarse, sin embargo puede ajustarse en y se aplica correctamente en &#8220;escritorio&#8221;<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3f0bd42 e-flex e-con-boxed e-con e-parent\" data-id=\"3f0bd42\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-adc8215 elementor-widget elementor-widget-html\" data-id=\"adc8215\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    function updateElementContent(elementId, value) {\n        const element = document.getElementById(elementId);\n        if (element) {\n            if (elementId === 'name' || elementId === 'cargo') {\n                element.textContent = value;\n            } else if (elementId === 'telefono') {\n                element.innerHTML = `<strong>Tel\u00e9fono:<\/strong> ${value}`;\n            } else if (elementId === 'email') {\n                element.innerHTML = `<strong>Email:<\/strong> ${value}`;\n                \/\/ Actualizar tambi\u00e9n el enlace de correo\n                const emailLink = document.querySelector('a[href^=\"mailto:\"]');\n                if (emailLink) {\n                    emailLink.href = `mailto:${value}`;\n                }\n            }\n        }\n    }\n\n    function setupFieldListener(inputId) {\n        const inputField = document.getElementById(`form-field-${inputId}`);\n        if (inputField) {\n            inputField.addEventListener('input', function() {\n                updateElementContent(inputId, this.value);\n            });\n        }\n    }\n\n    \/\/ Configurar listeners para cada campo\n    setupFieldListener('name');\n    setupFieldListener('cargo');\n    setupFieldListener('telefono');\n    setupFieldListener('email');\n\n    \/\/ Funci\u00f3n para actualizar todos los campos al cargar la p\u00e1gina\n    function updateAllFields() {\n        const fields = ['name', 'cargo', 'telefono', 'email'];\n        fields.forEach(field => {\n            const input = document.getElementById(`form-field-${field}`);\n            if (input) {\n                updateElementContent(field, input.value);\n            }\n        });\n    }\n\n    \/\/ Llamar a la funci\u00f3n de actualizaci\u00f3n al cargar la p\u00e1gina\n    updateAllFields();\n});    \n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Firma Electr\u00f3nica Rellena con tus datos y mira en tiempo real tu firma electr\u00f3nica: \u00bfC\u00f3mo implementar tu firma electr\u00f3nica? http:\/\/urbanista.mx\/wp-content\/uploads\/2024\/08\/Tutorial-Firma-electronica.mp4 Tu firma aqu\u00ed \u21b4 Selecciona tu firma y p\u00e9gala en tu correo: DESDE AC\u00c1 Christian Ruiz Guti\u00e9rrez Desarrollador Tel\u00e9fono: 9711090531 Email: correo@gmail.com urbanhub.com.mx HASTA AC\u00c1 Descargar Firma En versi\u00f3n mobile la representaci\u00f3n en tiempo real [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9106","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/9106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/comments?post=9106"}],"version-history":[{"count":0,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/9106\/revisions"}],"wp:attachment":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/media?parent=9106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}