{"id":13,"date":"2025-12-01T18:54:06","date_gmt":"2025-12-01T18:54:06","guid":{"rendered":"https:\/\/aprendemontessori.com\/?page_id=13"},"modified":"2026-04-03T19:22:53","modified_gmt":"2026-04-03T19:22:53","slug":"trabajando-en-la-web","status":"publish","type":"page","link":"https:\/\/aprendemontessori.com\/","title":{"rendered":"Trabajando en la web"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13\" class=\"elementor elementor-13\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a792626 e-flex e-con-boxed e-con e-parent\" data-id=\"a792626\" 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-d1fb4ac elementor-widget elementor-widget-text-editor\" data-id=\"d1fb4ac\" 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>Web en construcci\u00f3n<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a166e80 elementor-widget elementor-widget-html\" data-id=\"a166e80\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <style>\r\n        .loader-container {\r\n            position: relative;\r\n            width: 200px;\r\n            height: 200px;\r\n        }\r\n\r\n        .workspace {\r\n            width: 100%;\r\n            height: 100%;\r\n            background: white;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .element {\r\n            position: absolute;\r\n            background: #f0f0f0;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 4px;\r\n            opacity: 0;\r\n            transition: all 0.4s;\r\n        }\r\n\r\n        .element.visible {\r\n            opacity: 1;\r\n            border-color: #4285f4;\r\n        }\r\n\r\n        .cursor {\r\n            position: absolute;\r\n            width: 18px;\r\n            height: 18px;\r\n            pointer-events: none;\r\n            z-index: 10;\r\n            transition: all 0.4s ease;\r\n        }\r\n\r\n        .cursor svg {\r\n            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));\r\n        }\r\n\r\n        .click-effect {\r\n            position: absolute;\r\n            width: 30px;\r\n            height: 30px;\r\n            border: 2px solid #4285f4;\r\n            border-radius: 50%;\r\n            pointer-events: none;\r\n            animation: clickRipple 0.5s ease-out;\r\n            opacity: 0;\r\n        }\r\n\r\n        @keyframes clickRipple {\r\n            0% {\r\n                transform: scale(0.5);\r\n                opacity: 1;\r\n            }\r\n            100% {\r\n                transform: scale(1.5);\r\n                opacity: 0;\r\n            }\r\n        }\r\n\r\n\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"loader-container\">\r\n        <div class=\"workspace\" id=\"workspace\">\r\n            <div class=\"element\" id=\"el1\" style=\"top: 20px; left: 20px; width: 80px; height: 20px;\"><\/div>\r\n            <div class=\"element\" id=\"el2\" style=\"top: 50px; left: 20px; width: 120px; height: 50px;\"><\/div>\r\n            <div class=\"element\" id=\"el3\" style=\"top: 110px; left: 20px; width: 60px; height: 30px;\"><\/div>\r\n            <div class=\"element\" id=\"el4\" style=\"top: 110px; left: 90px; width: 60px; height: 30px;\"><\/div>\r\n            \r\n            <div class=\"cursor\" id=\"cursor\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"white\" stroke=\"black\" stroke-width=\"1.5\">\r\n                    <path d=\"M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const cursor = document.getElementById('cursor');\r\n        const workspace = document.getElementById('workspace');\r\n        const elements = [\r\n            document.getElementById('el1'),\r\n            document.getElementById('el2'),\r\n            document.getElementById('el3'),\r\n            document.getElementById('el4')\r\n        ];\r\n        \r\n        let currentStep = 0;\r\n        \r\n        function createClickEffect(x, y) {\r\n            const effect = document.createElement('div');\r\n            effect.className = 'click-effect';\r\n            effect.style.left = (x - 15) + 'px';\r\n            effect.style.top = (y - 15) + 'px';\r\n            workspace.appendChild(effect);\r\n            setTimeout(() => effect.remove(), 500);\r\n        }\r\n        \r\n        function moveCursor(x, y, callback) {\r\n            cursor.style.left = x + 'px';\r\n            cursor.style.top = y + 'px';\r\n            if (callback) setTimeout(callback, 400);\r\n        }\r\n        \r\n        function animateClick() {\r\n            const element = elements[currentStep % elements.length];\r\n            const rect = element.getBoundingClientRect();\r\n            const workspaceRect = workspace.getBoundingClientRect();\r\n            const x = rect.left - workspaceRect.left + rect.width \/ 2;\r\n            const y = rect.top - workspaceRect.top + rect.height \/ 2;\r\n            \r\n            moveCursor(x, y, () => {\r\n                createClickEffect(x, y);\r\n                element.classList.add('visible');\r\n                \r\n                setTimeout(() => {\r\n                    element.classList.remove('visible');\r\n                    currentStep++;\r\n                    \r\n                    if (currentStep % elements.length === 0) {\r\n                        setTimeout(animateClick, 1000);\r\n                    } else {\r\n                        setTimeout(animateClick, 600);\r\n                    }\r\n                }, 800);\r\n            });\r\n        }\r\n        \r\n        setTimeout(animateClick, 500);\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Web en construcci\u00f3n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":10,"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":79,"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/pages\/13\/revisions\/79"}],"wp:attachment":[{"href":"https:\/\/aprendemontessori.com\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}