{"id":16565,"date":"2025-11-07T15:41:35","date_gmt":"2025-11-07T21:41:35","guid":{"rendered":"https:\/\/urbanista.mx\/?page_id=16565"},"modified":"2025-11-07T16:11:25","modified_gmt":"2025-11-07T22:11:25","slug":"matriz-comparativa","status":"publish","type":"page","link":"https:\/\/urbanista.mx\/en\/matriz-comparativa\/","title":{"rendered":"Matriz Comparativa – C\u00f3mo evaluar proveedores de alojamiento corporativo"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tDescargar <\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Visor de PDF<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n background: white;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n overflow-x: hidden;\r\n }\r\n\r\n .pdf-container {\r\n width: 100vw;\r\n min-height: 100vh;\r\n background: white;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px;\r\n }\r\n\r\n .page-container {\r\n margin-bottom: 20px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n width: 920px;\r\n max-width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n position: relative; \/* Importante para posicionar la capa de texto *\/\r\n }\r\n\r\n .pdf-canvas {\r\n width: 100%;\r\n height: auto;\r\n background: white;\r\n display: block;\r\n }\r\n\r\n \/* Estilos para la capa de texto *\/\r\n .textLayer {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n overflow: hidden;\r\n opacity: 0.2;\r\n line-height: 1.0;\r\n }\r\n\r\n .textLayer > span {\r\n color: transparent;\r\n position: absolute;\r\n white-space: pre;\r\n cursor: text;\r\n transform-origin: 0% 0%;\r\n }\r\n\r\n .textLayer .highlight {\r\n margin: -1px;\r\n padding: 1px;\r\n background-color: rgba(180, 0, 255, 0.2);\r\n border-radius: 4px;\r\n }\r\n\r\n .textLayer .highlight.begin {\r\n border-radius: 4px 0px 0px 4px;\r\n }\r\n\r\n .textLayer .highlight.end {\r\n border-radius: 0px 4px 4px 0px;\r\n }\r\n\r\n .textLayer .highlight.middle {\r\n border-radius: 0px;\r\n }\r\n\r\n .textLayer .highlight.selected {\r\n background-color: rgba(0, 100, 255, 0.2);\r\n }\r\n\r\n .floating-controls {\r\n position: fixed;\r\n bottom: 5%;\r\n right: 3%;\r\n z-index: 9999;\r\n opacity: 0.9;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .floating-controls:hover {\r\n opacity: 1;\r\n transform: translateY(-3px);\r\n }\r\n\r\n .btn {\r\n background: rgba(33, 150, 243, 0.9);\r\n border: none;\r\n color: white;\r\n padding: 15px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 20px;\r\n width: 60px;\r\n height: 60px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\r\n }\r\n\r\n .btn:hover {\r\n background: rgba(33, 150, 243, 1);\r\n transform: scale(1.1);\r\n box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);\r\n }\r\n\r\n .loading {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n text-align: center;\r\n color: #666;\r\n font-size: 16px;\r\n z-index: 999;\r\n }\r\n\r\n .spinner {\r\n border: 3px solid #f3f3f3;\r\n border-top: 3px solid #2196F3;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 20px;\r\n }\r\n\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n .page-info {\r\n position: fixed;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: rgba(0, 0, 0, 0.7);\r\n color: white;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 14px;\r\n opacity: 0.7;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 1024px) and (min-width: 768px) {\r\n .pdf-container {\r\n padding: 15px;\r\n }\r\n \r\n .page-container {\r\n width: 90%;\r\n max-width: 90%;\r\n }\r\n \r\n .btn {\r\n width: 55px;\r\n height: 55px;\r\n font-size: 18px;\r\n }\r\n \r\n .page-info {\r\n font-size: 13px;\r\n padding: 6px 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .pdf-container {\r\n padding: 10px;\r\n }\r\n \r\n .page-container {\r\n width: 90%;\r\n max-width: 90%;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .floating-controls {\r\n bottom: 8%;\r\n right: 5%;\r\n }\r\n \r\n .btn {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 16px;\r\n padding: 12px;\r\n }\r\n \r\n .btn:hover {\r\n transform: none;\r\n }\r\n \r\n .loading {\r\n font-size: 14px;\r\n padding: 0 20px;\r\n }\r\n \r\n .spinner {\r\n width: 35px;\r\n height: 35px;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .page-info {\r\n font-size: 12px;\r\n padding: 6px 12px;\r\n bottom: 15px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .pdf-container {\r\n padding: 8px;\r\n }\r\n \r\n .page-container {\r\n width: 95%;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .floating-controls {\r\n bottom: 10%;\r\n right: 8%;\r\n }\r\n \r\n .btn {\r\n width: 45px;\r\n height: 45px;\r\n font-size: 14px;\r\n padding: 10px;\r\n }\r\n \r\n .page-info {\r\n font-size: 11px;\r\n padding: 5px 10px;\r\n bottom: 12px;\r\n }\r\n }\r\n\r\n @media (max-height: 500px) and (orientation: landscape) {\r\n .floating-controls {\r\n bottom: 15px;\r\n }\r\n \r\n .page-info {\r\n bottom: 10px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"loading\" id=\"loading\">\r\n <div class=\"spinner\"><\/div>\r\n Cargando PDF...\r\n <\/div>\r\n\r\n <div class=\"pdf-container\" id=\"pdfContainer\" style=\"display: none;\">\r\n <\/div>\r\n\r\n <div class=\"page-info\" id=\"pageInfo\" style=\"display: none;\">\r\n P\u00e1gina 1 de 1\r\n <\/div>\r\n\r\n <div class=\"floating-controls\">\r\n <button class=\"btn\" onclick=\"downloadPDF()\" title=\"Descargar PDF\">\r\n \u2b07\r\n <\/button>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\r\n <script>\r\n const pdfUrl = 'https:\/\/urbanista.mx\/wp-content\/uploads\/2025\/11\/Matriz-comparativa.pdf';\r\n let pdfDoc = null;\r\n let totalPages = 0;\r\n\r\n \/\/ Configurar PDF.js\r\n pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\r\n\r\n function getOptimalScale() {\r\n const screenWidth = window.innerWidth;\r\n \r\n if (screenWidth <= 480) {\r\n return 1.2;\r\n } else if (screenWidth <= 767) {\r\n return 1.3;\r\n } else if (screenWidth <= 1024) {\r\n return 1.4;\r\n } else {\r\n return 1.5;\r\n }\r\n }\r\n\r\n async function loadPDF() {\r\n try {\r\n const loadingTask = pdfjsLib.getDocument(pdfUrl);\r\n pdfDoc = await loadingTask.promise;\r\n totalPages = pdfDoc.numPages;\r\n\r\n document.getElementById('loading').style.display = 'none';\r\n document.getElementById('pdfContainer').style.display = 'flex';\r\n document.getElementById('pageInfo').style.display = 'block';\r\n\r\n document.getElementById('pageInfo').textContent = `P\u00e1gina 1 de ${totalPages}`;\r\n\r\n for (let pageNum = 1; pageNum <= totalPages; pageNum++) {\r\n await renderPage(pageNum);\r\n }\r\n\r\n } catch (error) {\r\n console.error('Error cargando PDF:', error);\r\n document.getElementById('loading').innerHTML = '\u274c Error al cargar el PDF<br><small>Intenta descargar el archivo<\/small>';\r\n }\r\n }\r\n\r\n async function renderPage(pageNum) {\r\n try {\r\n const page = await pdfDoc.getPage(pageNum);\r\n const scale = getOptimalScale();\r\n const viewport = page.getViewport({ scale: scale });\r\n\r\n \/\/ Crear canvas\r\n const canvas = document.createElement('canvas');\r\n const context = canvas.getContext('2d');\r\n canvas.height = viewport.height;\r\n canvas.width = viewport.width;\r\n canvas.className = 'pdf-canvas';\r\n\r\n \/\/ Crear contenedor para la p\u00e1gina\r\n const pageContainer = document.createElement('div');\r\n pageContainer.className = 'page-container';\r\n pageContainer.appendChild(canvas);\r\n\r\n \/\/ Crear capa de texto\r\n const textLayerDiv = document.createElement('div');\r\n textLayerDiv.className = 'textLayer';\r\n textLayerDiv.style.width = canvas.width + 'px';\r\n textLayerDiv.style.height = canvas.height + 'px';\r\n pageContainer.appendChild(textLayerDiv);\r\n\r\n \/\/ Agregar al contenedor principal\r\n document.getElementById('pdfContainer').appendChild(pageContainer);\r\n\r\n \/\/ Renderizar la p\u00e1gina (canvas)\r\n const renderContext = {\r\n canvasContext: context,\r\n viewport: viewport\r\n };\r\n\r\n await page.render(renderContext).promise;\r\n\r\n \/\/ Renderizar la capa de texto\r\n try {\r\n const textContent = await page.getTextContent();\r\n const textLayer = pdfjsLib.renderTextLayer({\r\n textContent: textContent,\r\n container: textLayerDiv,\r\n viewport: viewport,\r\n textDivs: []\r\n });\r\n await textLayer.promise;\r\n } catch (textError) {\r\n console.warn('Error renderizando texto de p\u00e1gina', pageNum, ':', textError);\r\n }\r\n\r\n \/\/ Observador para actualizar el n\u00famero de p\u00e1gina visible\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const pageIndex = Array.from(document.querySelectorAll('.page-container')).indexOf(entry.target);\r\n document.getElementById('pageInfo').textContent = `P\u00e1gina ${pageIndex + 1} de ${totalPages}`;\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n\r\n observer.observe(pageContainer);\r\n\r\n } catch (error) {\r\n console.error('Error renderizando p\u00e1gina:', pageNum, error);\r\n }\r\n }\r\n\r\n function downloadPDF() {\r\n const link = document.createElement('a');\r\n link.href = pdfUrl;\r\n link.download = 'https:\/\/urbanista.mx\/wp-content\/uploads\/2025\/11\/Matriz-comparativa.pdf';\r\n link.target = '_blank';\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n }\r\n\r\n \/\/ Re-renderizar cuando cambie la orientaci\u00f3n\r\n window.addEventListener('orientationchange', () => {\r\n setTimeout(() => {\r\n location.reload();\r\n }, 100);\r\n });\r\n\r\n \/\/ Cargar el PDF al iniciar\r\n loadPDF();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Descargar Visor de PDF Cargando PDF… P\u00e1gina 1 de 1 \u2b07<\/p>","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-16565","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/16565","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=16565"}],"version-history":[{"count":0,"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/pages\/16565\/revisions"}],"wp:attachment":[{"href":"https:\/\/urbanista.mx\/en\/wp-json\/wp\/v2\/media?parent=16565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}