{"id":13,"date":"2025-06-03T16:26:45","date_gmt":"2025-06-03T16:26:45","guid":{"rendered":"http:\/\/codigoyconcreto.es\/?page_id=13"},"modified":"2025-06-03T16:26:45","modified_gmt":"2025-06-03T16:26:45","slug":"simulador-de-sostenibilidad-energetica-para-arquitectura","status":"publish","type":"page","link":"https:\/\/codigoyconcreto.es\/index.php\/simulador-de-sostenibilidad-energetica-para-arquitectura\/","title":{"rendered":"Simulador de Sostenibilidad Energ\u00e9tica para Arquitectura"},"content":{"rendered":"\n

Simulador de Sostenibilidad Energ\u00e9tica para Arquitectura<\/strong><\/h1>\n\n\n\n\n\n\n\nSimulador de Sostenibilidad Energ\u00e9tica<\/title>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\"\/>\n<link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\"\/>\n<style>\n body {\n font-family: 'Roboto', sans-serif;\n background-color: #0a192f;color: #e0f2f7;}\n .container-glow {\n border: 1px solid #0ea5e9;box-shadow: 0 0 15px #0ea5e9, 0 0 5px #0ea5e9 inset;\n border-radius: 0.5rem;\n }\n .input-field,\n .select-field {\n background-color: #1e293b;border: 1px solid #38bdf8;border-radius: 0.375rem;\n padding: 0.5rem 0.75rem;\n color: #e0f2f7;\n width: 100%;\n }\n .select-field {\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 0.5rem center;\n background-size: 1.5em 1.5em;\n padding-right: 2.5rem;\n }\n .btn {\n background-color: #0ea5e9;color: #ffffff;\n padding: 0.75rem 1.5rem;\n border-radius: 0.375rem;\n text-align: center;\n transition: background-color 0.3s ease;\n font-weight: 500;\n }\n .btn:hover {\n background-color: #0284c7;}\n .orientation-btn {\n background-color: #1e293b;\n border: 1px solid #38bdf8;\n color: #e0f2f7;\n padding: 0.5rem;\n border-radius: 0.375rem;\n min-width: 2.5rem;\n text-align: center;\n }\n .orientation-btn.active {\n background-color: #0ea5e9;\n color: #ffffff;\n border-color: #0ea5e9;\n }\n .gauge-container {\n position: relative;\n width: 200px;\n height: 100px;border-radius: 150px 150px 0 0;\n background-color: #1e293b;\n overflow: hidden;\n margin: 0 auto;\n border: 5px solid #0ea5e9;\n border-bottom: none;\n box-shadow: 0 0 10px #0ea5e9;\n }\n .gauge-fill {\n position: absolute;\n top: 100%;\n left: 0;\n width: inherit;\n height: 100%;\n background-color: #34d399;transform-origin: center top;\n transform: rotate(calc(1deg * (var(--gauge-value) * 1.8) - 90deg));transition: transform 0.5s ease-out;\n }\n .gauge-cover {\n position: absolute;\n top: 25%;\n left: 12.5%;\n width: 75%;\n height: 75%;\n background: #0a192f;border-radius: 100% 100% 0 0 ;\n }\n .gauge-text {\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n z-index: 1;\n }\n .gauge-value {\n font-size: 2.5rem;\n font-weight: bold;\n color: #34d399;}\n .gauge-unit {\n font-size: 0.875rem;\n color: #94a3b8;}\n .chart-bar {\n background-color: #0ea5e9;border-radius: 0.25rem;\n transition: height 0.3s ease-out;\n }\n <\/style>\n<\/head>\n<body class=\"p-4 md:p-8\">\n<div class=\"container-glow max-w-6xl mx-auto p-6 md:p-8\">\n<header class=\"mb-8 text-center\">\n<h1 class=\"text-2xl md:text-3xl font-bold text-sky-400 tracking-wider\">SIMULADOR DE SOSTENIBILIDAD ENERG\u00c9TICA PARA ARQUITECTURA<\/h1>\n<\/header>\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n<section class=\"container-glow p-6 space-y-6\">\n<h2 class=\"text-xl font-semibold text-sky-300 border-b border-sky-500 pb-2\">DATOS DEL PROYECTO<\/h2>\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\" for=\"projectName\">Nombre del Proyecto<\/label>\n<input class=\"input-field\" id=\"projectName\" type=\"text\" value=\"Costa\"\/>\n<\/div>\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\" for=\"location\">Ubicaci\u00f3n<\/label>\n<select class=\"select-field\" id=\"location\">\n<option value=\"costa\">Costa<\/option>\n<option value=\"sierra\">Sierra<\/option>\n<option value=\"selva\">Selva<\/option>\n<\/select>\n<\/div>\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\" for=\"buildingType\">Tipo de Edificaci\u00f3n<\/label>\n<select class=\"select-field\" id=\"buildingType\">\n<option value=\"residencial\">Residencial<\/option>\n<option value=\"comercial\">Comercial<\/option>\n<option value=\"educacional\">Educacional<\/option>\n<option value=\"otro\">Otro<\/option>\n<\/select>\n<\/div>\n<div class=\"grid grid-cols-2 gap-4\">\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\" for=\"surfaceArea\">Superficie (m\u00b2)<\/label>\n<input class=\"input-field\" id=\"surfaceArea\" type=\"number\" value=\"150\"\/>\n<\/div>\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\" for=\"numFloors\">N\u00famero de Pisos<\/label>\n<input class=\"input-field\" id=\"numFloors\" type=\"number\" value=\"2\"\/>\n<\/div>\n<\/div>\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\">Orientaci\u00f3n<\/label>\n<div class=\"flex space-x-2\">\n<button class=\"orientation-btn active\">N<\/button>\n<button class=\"orientation-btn\">S<\/button>\n<button class=\"orientation-btn\">E<\/button>\n<button class=\"orientation-btn\">O<\/button>\n<\/div>\n<\/div>\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\" for=\"constructionSystem\">Sistema Constructivo<\/label>\n<select class=\"select-field\" id=\"constructionSystem\">\n<option value=\"concreto\">Concreto<\/option>\n<option value=\"mamposteria\">Mamposter\u00eda<\/option>\n<option value=\"madera\">Madera<\/option>\n<option value=\"mixto\">Mixto<\/option>\n<\/select>\n<\/div>\n<div>\n<label class=\"block text-sm font-medium text-sky-200 mb-1\" for=\"energyFeatures\">Caracter\u00edsticas Energ\u00e9ticas<\/label>\n<select class=\"select-field\" id=\"energyFeatures\">\n<option value=\"vidrios_baja_emisividad\">Vidrios de Baja Emisividad<\/option>\n<option value=\"ventilacion_natural\">Ventilaci\u00f3n Natural Cruzada<\/option>\n<option value=\"aislamiento_termico\">Aislamiento T\u00e9rmico Mejorado<\/option>\n<option value=\"paneles_solares\">Paneles Solares Fotovoltaicos<\/option>\n<option value=\"dispositivos_sombreado\">Dispositivos de Sombreado<\/option>\n<\/select>\n<\/div>\n<\/section>\n<section class=\"container-glow p-6 space-y-6\">\n<h2 class=\"text-xl font-semibold text-sky-300 border-b border-sky-500 pb-2\">RESULTADOS EN TIEMPO REAL<\/h2>\n<div>\n<p class=\"text-sm font-medium text-sky-200 mb-2\">Consumo Energ\u00e9tico Anual (kWh\/m\u00b2)<\/p>\n<div class=\"bg-slate-800 p-4 rounded-md border border-sky-600\">\n<div class=\"flex items-end h-40 space-x-2 justify-around\">\n<div class=\"chart-bar\" style=\"height: 40%; width: 15%;\" title=\"60 kWh\/m\u00b2\"><\/div>\n<div class=\"chart-bar\" style=\"height: 70%; width: 15%;\" title=\"90 kWh\/m\u00b2\"><\/div>\n<div class=\"chart-bar\" style=\"height: 95%; width: 15%;\" title=\"120 kWh\/m\u00b2\"><\/div>\n<div class=\"chart-bar\" style=\"height: 20%; width: 15%;\" title=\"140 kWh\/m\u00b2\"><\/div>\n<div class=\"chart-bar\" style=\"height: 10%; width: 15%;\" title=\"160 kWh\/m\u00b2\"><\/div>\n<\/div>\n<div class=\"flex justify-around text-xs text-sky-300 mt-1\">\n<span>0<\/span>\n<span>60<\/span>\n<span>90<\/span>\n<span>120<\/span>\n<span>140<\/span>\n<span>160<\/span>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"text-center\">\n<h3 class=\"text-lg font-medium text-sky-200 mb-2\">PUNTUACI\u00d3N DE SOSTENIBILIDAD<\/h3>\n<div class=\"relative w-48 h-24 mx-auto mb-2\"> \n<div class=\"absolute inset-0 rounded-full border-[15px] border-sky-600 border-b-transparent rotate-[135deg]\" style=\"clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);\"><\/div>\n<div class=\"absolute inset-0 rounded-full border-[15px] border-emerald-400 border-b-transparent rotate-[135deg]\" style=\"clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); transform: rotate(calc(135deg + (68 \/ 100 * 180deg)));\"><\/div>\n<div class=\"absolute inset-0 flex flex-col items-center justify-end pb-1\">\n<div class=\"text-4xl font-bold text-emerald-400\">68<\/div>\n<div class=\"text-xs text-sky-300\">kWh\/m\u00b2<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div>\n<h3 class=\"text-lg font-medium text-sky-200 mb-2\">Emisiones de CO\u2082 Estimadas<\/h3>\n<div class=\"bg-slate-800 p-4 rounded-md border border-sky-600 text-sm text-sky-100 space-y-1\">\n<p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Mejorar el aislamiento t\u00e9rmico<\/p>\n<p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Optimizar la ventilaci\u00f3n natural<\/p>\n<p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Usar sombreado externo<\/p>\n<\/div>\n<\/div>\n<div class=\"mt-4 md:mt-0\">\n<h3 class=\"text-lg font-medium text-sky-200 mb-2\">RECOMENDACIONES<\/h3>\n<ul class=\"list-disc list-inside text-sm text-sky-100 space-y-1 pl-2\">\n<li>Mejorer el aislamiento t\u00e9rmico<\/li>\n<li>Optimizar la ventilaci\u00f3n natural<\/li>\n<li>Usar sombreado externo<\/li>\n<\/ul>\n<\/div>\n<button class=\"btn w-full mt-6\">\n<span class=\"material-icons align-middle mr-1 text-lg\">download<\/span> DESCARGAR INFORME\n <\/button>\n<\/section>\n<\/div>\n<footer class=\"mt-8 text-center\">\n<a class=\"text-sky-400 hover:text-sky-200 transition-colors\" href=\"#\">\n<span class=\"material-icons align-middle mr-1\">arrow_back<\/span> VOLVER AL MEN\u00da\n <\/a>\n<\/footer>\n<\/div>\n<script>\n \/\/ Gauge update logic (example)\n const gaugeValueElement = document.querySelector('.gauge-value');\n const gaugeUnitElement = document.querySelector('.gauge-unit');\n const gaugeFillElement = document.querySelector('.gauge-fill');\n const co2Recommendations = document.querySelector('#co2Recommendations'); \/\/ Example target for CO2 recommendations\n function updateResults(value) {\n if (gaugeValueElement) gaugeValueElement.textContent = value;\n \/\/ Assuming max score is 100 for the gauge\n if (gaugeFillElement) gaugeFillElement.style.setProperty('--gauge-value', value);\n \/\/ Example: Update CO2 recommendations based on score\n \/\/ This is a very basic example, you'd have more complex logic\n if (co2Recommendations) {\n if (value < 50) {\n co2Recommendations.innerHTML = `\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Considerar aislamiento de alta eficiencia.<\/p>\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Implementar estrategias de ventilaci\u00f3n pasiva.<\/p>\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> A\u00f1adir elementos de sombreado efectivos.<\/p>\n `;\n } else if (value < 80) {\n co2Recommendations.innerHTML = `\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Mejorar el aislamiento t\u00e9rmico.<\/p>\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Optimizar la ventilaci\u00f3n natural.<\/p>\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">arrow_forward_ios<\/span> Usar sombreado externo.<\/p>\n `;\n } else {\n co2Recommendations.innerHTML = `\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">check_circle<\/span> Excelente eficiencia energ\u00e9tica!<\/p>\n <p class=\"flex items-center\"><span class=\"material-icons text-emerald-400 mr-2 text-base\">check_circle<\/span> Bajas emisiones de CO\u2082.<\/p>\n `;\n }\n }\n }\n \/\/ Initial update\n updateResults(68); \/\/ Initial score from design\n \/\/ Event listeners for inputs (example for surface area)\n const surfaceAreaInput = document.getElementById('surfaceArea');\n if (surfaceAreaInput) {\n surfaceAreaInput.addEventListener('input', (event) => {\n \/\/ Dummy calculation: score decreases as surface area increases (needs real logic)\n let newScore = 100 - (parseInt(event.target.value) \/ 5);\n if (newScore < 0) newScore = 0;\n if (newScore > 100) newScore = 100;\n updateResults(Math.round(newScore));\n \/\/ Update chart (dummy example, make it real)\n const bars = document.querySelectorAll('.chart-bar');\n bars.forEach(bar => {\n bar.style.height = `${Math.random() * 100}%`;\n });\n });\n }\n \/\/ Orientation buttons\n const orientationButtons = document.querySelectorAll('.orientation-btn');\n orientationButtons.forEach(button => {\n button.addEventListener('click', () => {\n orientationButtons.forEach(btn => btn.classList.remove('active'));\n button.classList.add('active');\n \/\/ Add logic here to update simulation based on orientation\n });\n });\n \/\/ Add more event listeners for all other input fields to trigger recalculations\n const allInputs = document.querySelectorAll('.input-field, .select-field');\n allInputs.forEach(input => {\n if (input.id !== 'surfaceArea') { \/\/ Already handled\n input.addEventListener('change', () => {\n \/\/ Placeholder for real calculation\n console.log(`Input changed: ${input.id}, New value: ${input.value}`);\n \/\/ Simulate a change in score for demonstration\n let randomChange = Math.floor(Math.random() * 20) - 10; \/\/ Change score by -10 to +10\n let currentScore = parseInt(document.querySelector('.gauge-value').textContent);\n let newScore = Math.max(0, Math.min(100, currentScore + randomChange));\n updateResults(newScore);\n \/\/ Simulate chart update\n const bars = document.querySelectorAll('.chart-bar');\n bars.forEach(bar => {\n bar.style.height = `${Math.random() * 100}%`;\n });\n });\n }\n });\n <\/script>\n\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Simulador de Sostenibilidad Energ\u00e9tica para Arquitectura Simulador de Sostenibilidad Energ\u00e9tica SIMULADOR DE SOSTENIBILIDAD ENERG\u00c9TICA PARA ARQUITECTURA DATOS DEL PROYECTO Nombre […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":1,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/codigoyconcreto.es\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}