tag:blogger.com,1999:blog-34748835606094959962026-10-03T12:44:25.864-07:00Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.comBlogger2760125tag:blogger.com,1999:blog-3474883560609495996.post-5882297353441980842026-09-22T04:13:17.711-07:002026-09-22T04:14:25.086-07:00<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcWihVFQhXwu4SjzXbZsT1CaVKl9nbtbr4FFsB3YIWZgEYBPj85-dneVshSpudIWL2q6Q_UzQIf-I721L-paSThX87E9a-NmiAjrEZKg-xZAU-lT2LetrlBFPanCiAG0GdtziHkEYlNMtV02210FkWIfNGAsEGnULO9zuZ-rWigcziIYnyZhTmIYE8s8/s954/MUS039B.TIF" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="320" data-original-height="954" data-original-width="718" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcWihVFQhXwu4SjzXbZsT1CaVKl9nbtbr4FFsB3YIWZgEYBPj85-dneVshSpudIWL2q6Q_UzQIf-I721L-paSThX87E9a-NmiAjrEZKg-xZAU-lT2LetrlBFPanCiAG0GdtziHkEYlNMtV02210FkWIfNGAsEGnULO9zuZ-rWigcziIYnyZhTmIYE8s8/s320/MUS039B.TIF"/></a></div><div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKH9yqt1lz-IKwkY4rdjuhBcV6zS3QeSiXL5peunX9kwtBqPJpYHH7jaHm_StmYhda_n7qtVeXzfYk-RGA63eYqUVuYDpmZ1K0NfnBrYSi50MZQKQY4l32i6yia86M33MseLKCZrNTjAF-H6oXHB8idqJ0PqMBL-r5hI1P1cB3Y7LlGFjMciML7ZkdKxk/s547/tritono.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="258" data-original-width="547" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKH9yqt1lz-IKwkY4rdjuhBcV6zS3QeSiXL5peunX9kwtBqPJpYHH7jaHm_StmYhda_n7qtVeXzfYk-RGA63eYqUVuYDpmZ1K0NfnBrYSi50MZQKQY4l32i6yia86M33MseLKCZrNTjAF-H6oXHB8idqJ0PqMBL-r5hI1P1cB3Y7LlGFjMciML7ZkdKxk/s320/tritono.jpg"/></a></div><div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHV6qU1CRo/xSap3C7RSXNtesDi2nMqqw/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHV6qU1CRo&#x2F;xSap3C7RSXNtesDi2nMqqw&#x2F;view?utm_content=DAHV6qU1CRo&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Articulaciones musicales </a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-44475189352576087542026-09-20T11:16:00.721-07:002026-09-20T11:16:00.721-07:00<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHVwS3rLvo/fZexHA3_SpUFLLiwmOElgA/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHVwS3rLvo&#x2F;fZexHA3_SpUFLLiwmOElgA&#x2F;view?utm_content=DAHVwS3rLvo&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Juego de Notas Musicales</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-7977733279546980452026-09-18T06:40:14.839-07:002026-09-18T06:43:47.380-07:00<h2 style="text-align: left;">&nbsp;Partitura . Cole Porter. Biografia, historia t todos acordes&nbsp; Video .</h2><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="460" src="https://www.youtube.com/embed/U8q_LGI1H9c" width="554" youtube-src-id="U8q_LGI1H9c"></iframe></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi187jgQLPyDxvnEDEfSbpOHeGaevfzJqKmNfD5AzUpLGR3eYVo1iye8ZoAJknpTm7OQu1i01iycMpWtebEryS2vjGwT3_yAZPhEetU4PGnjIAPCsRjcNe_NOeKR7OFiVI25QA49e2PaKrTps9o4zQvjgmMLHLU_Gen7NpUxDSQ5kO2Zbv-NKaJLSpf4RE/s1191/Beguine%20The%20Beguin%20pag1.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="842" data-original-width="1191" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi187jgQLPyDxvnEDEfSbpOHeGaevfzJqKmNfD5AzUpLGR3eYVo1iye8ZoAJknpTm7OQu1i01iycMpWtebEryS2vjGwT3_yAZPhEetU4PGnjIAPCsRjcNe_NOeKR7OFiVI25QA49e2PaKrTps9o4zQvjgmMLHLU_Gen7NpUxDSQ5kO2Zbv-NKaJLSpf4RE/s320/Beguine%20The%20Beguin%20pag1.jpg" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoRa-N_NhkDz0fO_yGDKzlbWr-0G2WIFGZ0ntLX-INSSBCRMNkEX1joTl6BoVmzv9A5F2pl0tQRzbmCUVdO0Bov3tXPFt87dOSdpFOFrO6UmcOek2dCDUCuSaHyysdEVVZuAYOzn_UyYRAu_-lFGEh239xImrotiKmA38cvwgu_s_sr3DRsda_qdRqY4/s1191/Beguine%20The%20Beguin%20pag2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="842" data-original-width="1191" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYoRa-N_NhkDz0fO_yGDKzlbWr-0G2WIFGZ0ntLX-INSSBCRMNkEX1joTl6BoVmzv9A5F2pl0tQRzbmCUVdO0Bov3tXPFt87dOSdpFOFrO6UmcOek2dCDUCuSaHyysdEVVZuAYOzn_UyYRAu_-lFGEh239xImrotiKmA38cvwgu_s_sr3DRsda_qdRqY4/s320/Beguine%20The%20Beguin%20pag2.jpg" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: <!doctype html> <html lang="es"><head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260918-05-13efa67","C":{"Abril Fatface":"YACgEZbkUVE,0","Alfa Slab One":"YACgEYS9sJU,0","Anton":"YACgEcYqQ-A,0","Archivo":"YACgEZulLoA,0","Arial Narrow":"YAGyDvJ_4Ts,0","Arial Rounded MT Bold":"YAFcfoaHu-s,0","Arial":"YAGyDvJ_4Ts,0","Avenir Next":"YAFcfmNq6UY,0","Baloo 2":"YADK30bC6HQ,0","Bebas Neue":"YACgESME5ew,0","Bricolage Grotesque":"YAFyMcdwzpc,0","Broken Glyph":"YADZ-exUkv0,0","Canva Sans":"YAFdJjTk5UU,1","Caveat":"YALBs2ploWQ,0","Comic Sans MS":"YAFcfvtOAUY,1","Cormorant Garamond":"YAFdJhX-538,0","Courier New":"YAGzXiGs0_8,0","Courier Prime":"YAD1aFjegN8,0","DM Sans":"YAD1aU3sLnI,0","DM Serif Display":"YAD1aYG82rc,0","Forum":"YACgEcnnqB4,0","Fraunces":"YAFdJpU7Kkk,0","Georgia":"YAGzXkO0pEM,0","Ghost Mono":"YAHQutsX00Q,0","Hanken Grotesk":"YAFcfhwp99E,0","Helvetica Neue":"YAFcf6CtJfI,0","Helvetica":"YAFcf6CtJfI,0","IBM Plex Mono":"YAFdJkmvhGI,0","Impact":"YAFcfnjI7Vk,0","Instrument Serif":"YAHFeOnZNEk,0","Inter":"YAFdJvSyp_k,3","Iowan Old Style":"YAGNIFa8j9o,0","Jacques Francois":"YADK3zbC6RM,0","JetBrains Mono":"YAFdJksXcAk,0","Josefin Sans":"YAFdJjvw9Ps,0","Lato":"YAFdJuFCnaw,0","Libre Baskerville":"YACgEUFdPdA,0","Lobster":"YAD8SnSjSFI,0","Lora":"YACgEXvxf8Q,0","Merriweather":"YACgEXvHxxs,0","Montserrat":"YAFdtQi73Xs,0","Nunito":"YAFdJoNRMmU,1","Oleo Script":"YACgEQQ14jI,0","Oswald":"YACgEQY10lw,0","Pacifico":"YADLjORQ1u4,0","Phantom Sans":"YAFdJvgJ5TU,0","Playfair Display":"YAFdJhem5V8,1","Plus Jakarta Sans":"YAGvf3_u0_Q,0","Poppins":"YAFdJjbTu24,1","Press Start 2P":"YAFyGr-8pmQ,0","Quicksand":"YAFdJpYtCxE,1","Raleway":"YAFdJhmxbVQ,1","Roboto Slab":"YAFdJswIKAg,0","Rockwell":"YAFcfyVZnN0,0","Rye":"YACgEdQP21k,0","Segoe UI":"YAHNdRD1Klw,0","Source Sans 3":"YAG4lO1Mj10,0","Source Serif 4":"YACgEfdj394,0","Space Grotesk":"YADZ-dYEmhg,0","Space Mono":"YADW1-vpsoc,0","Times New Roman":"YAGzXW3gftg,0","Times":"YAGzXW3gftg,0","Trebuchet MS":"YAFcfrglpVA,0","UV Display":"YAEdVfSSpYo,0","UV Sans":"YAFdJvgJ5TU,0","Ubuntu":"YACgERDU--Q,0","Verdana":"YAGzXTctYtQ,0","Work Sans":"YAGXhLOKv44,0","Yellowtail":"YACgEYG4kG4,0","ui-monospace":"YAD1aFjegN8,0","ui-sans-serif":"YACkoD1yZN0,0"}}');</script><script src="/_sdk/83d6dfdadcd4750a.telemetry_sdk.js" integrity="sha512-XS4Dvzp6vbagZS9vFErihvr8aO3S0tH78KWUefn06fmL4WYqryBtZj/IOLITYj7dFA4gPVvPg1W/JB1DK3uLNQ=="></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Armonía Hub · Begin the Beguine</title> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&amp;family=Fraunces:opsz,wght@9..144,700;9..144,800&amp;display=swap" rel="stylesheet"> <style> :root{--ink:#17243b;--paper:#fffdf5;--red:#ed4e5f;--reddeep:#c93549;--sky:#63c9ff;--mint:#65dec2;--yellow:#ffe16b;--violet:#ae91f5} *{box-sizing:border-box} body{margin:0;min-width:320px;background:#fff0a9;color:var(--ink);font-family:"DM Sans",sans-serif} button{font:inherit} button:focus-visible,a:focus-visible{outline:4px solid #17324d;outline-offset:3px} .app-shell{width:100%;min-height:calc(100 * min(var(--vh,1vh),1vh));background:radial-gradient(circle at 6% 8%,#ffffffaa 0 8%,transparent 9%),radial-gradient(circle at 90% 25%,#ff9dcc66 0 13%,transparent 14%),linear-gradient(135deg,#fff0a9,#d9efff 50%,#ffe1ef)} .music-banner{width:100%;padding:18px 24px;background:linear-gradient(105deg,#ffe16b,#ff9dcc 48%,#63c9ff);border-bottom:4px solid #fff} .banner-inner{max-width:1500px;margin:auto;min-height:126px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;border:3px solid #fff;border-radius:28px;background:#ffffff55;box-shadow:0 9px 0 #49799d33} .banner-kicker{margin:0;color:#17324d;font-weight:900;letter-spacing:.14em;font-size:12px}.banner-title{margin:4px 0 0;font:800 clamp(30px,5vw,58px)/1 Fraunces,serif;color:#17324d;text-shadow:2px 3px #fff} .song-logo{flex:none;position:relative;padding:13px 18px;border:3px solid #17324d;border-radius:21px;background:#fff;color:#c93549;font:800 clamp(24px,3.6vw,42px)/1 Fraunces,serif;box-shadow:7px 7px 0 #ff8b7d;transform:rotate(2deg)} .song-logo small{display:block;margin-top:5px;color:#294863;font:800 11px "DM Sans",sans-serif;letter-spacing:.08em}.song-logo i{font-style:normal;color:#7a67e8} .site-header{width:100%;background:#17324d;color:#fff;border-bottom:3px solid #fff}.header-inner{max-width:1500px;margin:auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand-badge{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#65dec2;color:#17324d}.nav{display:flex;gap:8px}.nav a{color:#fff;text-decoration:none;font-weight:800;padding:7px 10px;border-radius:10px}.nav a:hover{background:#ffffff2c} .workspace{width:100%;max-width:1500px;margin:auto;padding:24px}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.tile{border:3px solid #17324d;border-radius:25px;background:var(--paper);box-shadow:8px 8px 0 #17324d22;overflow:hidden}.piano-tile,.guitar-tile{grid-column:span 12}.song-tile{grid-column:span 4}.learn-tile{grid-column:span 8} .tile-head{padding:18px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.kicker{margin:0;color:#47748a;font-size:12px;font-weight:900;letter-spacing:.12em}.tile-head h2{margin:5px 0 0;font:800 28px Fraunces,serif}.tile-head p{margin:5px 0;color:#405c73} .piano-scroll,.guitar-scroll{overflow-x:auto;padding:20px}.piano{position:relative;width:1197px;height:195px;margin:auto}.pkey{position:absolute;bottom:0;border:2px solid #17324d;cursor:pointer;font-weight:900;transition:transform .15s,background .15s;display:flex;align-items:flex-end;justify-content:center}.white{z-index:1;width:57px;height:185px;border-radius:0 0 9px 9px;background:#fff;color:#17324d;padding:0 2px 12px}.black{z-index:4;top:0;bottom:auto;width:35px;height:112px;border-radius:0 0 8px 8px;background:#17243b;color:#fff;font-size:10px;padding:0 1px 8px}.pkey.active{background:var(--red)!important;color:#fff!important;transform:translateY(5px);box-shadow:0 0 0 4px #ffe16b}.pkey.tonic-active{background:var(--reddeep)!important} .guitar{position:relative;width:1140px;height:310px;margin:auto;border:6px solid #8b5135;border-radius:18px;background:linear-gradient(#ab7047,#43241d);overflow:hidden}.fret-lines{position:absolute;left:150px;right:10px;top:35px;bottom:22px;display:grid;grid-template-columns:repeat(12,1fr)}.fret-lines span{border-right:3px solid #f4d6a7}.string{position:absolute;left:12px;right:12px;height:3px;background:#ffd85f;box-shadow:0 1px 2px #3a1f16}.gmarker{position:absolute;z-index:3;width:48px;height:31px;border:2px solid #17324d;border-radius:999px;background:#fff;color:#17324d;font-size:10px;font-weight:900;cursor:pointer;transition:.14s}.gmarker:hover{transform:scale(1.12)}.gmarker.active{background:var(--red);color:#fff;border-color:#fff;box-shadow:0 0 0 3px #ffe16b;transform:scale(1.18)} .song-card{width:100%;min-height:265px;border:0;background:linear-gradient(145deg,#ffe16b,#ffb4cf 54%,#8cdcff);padding:20px;text-align:left;cursor:pointer;position:relative}.song-card:hover,.song-card:focus-visible{filter:saturate(1.12);transform:translateY(-3px)}.song-card h2{margin:10px 0 7px;font:800 28px Fraunces,serif}.song-card p{margin:0;max-width:280px;font-weight:700;line-height:1.4}.song-card .big-note{position:absolute;right:20px;bottom:12px;font:800 88px Fraunces,serif;color:#ed4e5f;transform:rotate(-12deg)}.spark{color:#7a67e8;font-size:22px;letter-spacing:5px} .learn-content{padding:0 20px 20px;display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.learn-board{padding:18px;border:3px dashed #63a9d1;border-radius:18px;background:#e9fbff}.learn-board h3{margin:0;font:800 24px Fraunces,serif}.mini-flow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:15px}.mini-flow span{padding:8px 11px;border-radius:12px;background:#fff;border:2px solid #17324d;font-weight:900}.mini-flow b{color:#ed4e5f;font-size:22px}.rose-wrap{min-height:170px;border-radius:18px;overflow:hidden;border:3px solid #17324d}.rose-wrap img{width:100%;height:100%;object-fit:cover} .on-backdrop,.score-viewer-backdrop{position:fixed;z-index:120;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:#17243bdd;backdrop-filter:blur(7px)}.score-viewer-backdrop{z-index:150}.on-backdrop.open,.score-viewer-backdrop.open{display:flex}.on-modal{width:min(1260px,100%);max-height:calc(94 * min(var(--vh,1vh),1vh));display:flex;flex-direction:column;overflow:hidden;border:4px solid #17324d;border-radius:28px;background:#fff8dc;box-shadow:0 24px 70px #0008}.on-head{flex:none;display:flex;justify-content:space-between;gap:16px;padding:17px 22px;background:linear-gradient(100deg,#ff9d82,#ffe16b,#63d9c9);border-bottom:3px solid #17324d}.on-head h2{margin:0;font:800 34px Fraunces,serif}.on-head p{margin:3px 0 0;font-weight:700}.close-btn{width:43px;height:43px;display:grid;place-items:center;flex:none;border:3px solid #17324d;border-radius:13px;background:#fff;color:#17324d;cursor:pointer}.close-btn:hover{background:#ed4e5f;color:#fff} .on-tabs{display:flex;gap:7px;overflow-x:auto;padding:12px 18px 0;background:#fffdf5}.on-tab{border:3px solid #17324d;border-bottom:0;border-radius:13px 13px 0 0;padding:9px 13px;background:#e1f5ff;color:#17324d;font-weight:900;white-space:nowrap;cursor:pointer}.on-tab.active{background:#ed4e5f;color:#fff}.on-body{overflow:auto;padding:20px}.on-panel{display:none}.on-panel.active{display:block}.section-title{margin:0 0 13px;font:800 28px Fraunces,serif} .info-ribbon{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}.info-ribbon span{padding:8px 11px;border:2px solid #17324d;border-radius:999px;background:#fff;font-size:13px;font-weight:900}.info-ribbon span:nth-child(1){background:#ff8b7d}.info-ribbon span:nth-child(2){background:#ffe16b}.info-ribbon span:nth-child(3){background:#65dec2}.info-ribbon span:nth-child(4){background:#b89cff} .score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.score-box{padding:13px;border:3px solid #17324d;border-radius:20px;background:#fff}.score-image-button{width:100%;display:block;padding:0;border:3px solid #17324d;border-radius:14px;background:#fff;overflow:hidden;cursor:zoom-in;position:relative}.score-image{display:block;width:100%;height:340px;object-fit:contain;background:#fffdf5}.score-caption{margin:10px 3px 0;font-weight:900}.score-zoom-hint{position:absolute;right:12px;bottom:12px;padding:7px 10px;border:2px solid #17324d;border-radius:999px;background:#ffe16b;color:#17324d;font-size:12px;font-weight:900}.score-note{margin:14px 0 0;font-weight:700;color:#405c73} .score-viewer{width:min(1420px,100%);height:min(92%,950px);display:flex;flex-direction:column;border:4px solid #17324d;border-radius:24px;overflow:hidden;background:#fff8dc;box-shadow:0 24px 70px #0008}.score-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:linear-gradient(100deg,#ff9d82,#ffe16b,#63d9c9);border-bottom:3px solid #17324d}.score-viewer-head h2{margin:0;font:800 25px Fraunces,serif}.viewer-actions{display:flex;gap:8px}.viewer-nav{border:2px solid #17324d;border-radius:11px;padding:8px 11px;background:#fff;color:#17324d;font-weight:900;cursor:pointer}.score-viewer-body{flex:1;overflow:auto;padding:18px;background:#f5eed9}.score-viewer-body img{display:block;width:auto;height:auto;min-width:100%;max-width:none;margin:auto;background:#fff} .chord-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.chord-card{padding:14px;border:3px solid #17324d;border-radius:20px;background:#effaff}.chord-card:nth-child(3n+2){background:#fff0c4}.chord-card:nth-child(3n){background:#ffe1ed}.chord-card.active{box-shadow:0 0 0 5px #ed4e5f;background:#ffd1db}.chord-top{display:flex;justify-content:space-between;gap:10px;align-items:start}.chord-card h3{margin:0;font:800 24px Fraunces,serif}.chord-type{margin:3px 0 0;font-size:13px;font-weight:900}.note-line{margin:8px 0;font-weight:800}.voicing-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.voicing{padding:8px;border:2px solid #17324d;border-radius:11px;background:#fff;font-size:12px;font-weight:800}.voicing b{display:block;margin-bottom:3px}.mini-piano-block{margin:12px 0;padding:9px;border:2px solid #17324d;border-radius:14px;background:#fffdf5}.mini-piano-label{display:block;margin-bottom:7px;color:#294863;font-size:11px;font-weight:900}.mini-piano-scroll{overflow-x:auto;padding-bottom:3px}.mini-piano{position:relative;width:476px;height:101px}.mini-key{position:absolute;bottom:0;display:flex;align-items:flex-end;justify-content:center;border:1.5px solid #17324d;cursor:pointer;font-weight:900;transition:.14s}.mini-key.white{z-index:1;width:34px;height:95px;border-radius:0 0 6px 6px;background:#fff;color:#17324d;padding:0 1px 5px;font-size:9px}.mini-key.black{z-index:4;top:0;bottom:auto;width:21px;height:57px;border-radius:0 0 6px 6px;background:#17243b;color:#fff;padding:0 1px 4px;font-size:7px}.mini-key.active{background:var(--red)!important;color:#fff!important;box-shadow:0 0 0 2px #ffe16b}.mini-key.tonic-active{background:var(--reddeep)!important}.controls{display:flex;gap:9px;flex-wrap:wrap}.action{border:3px solid #17324d;border-radius:12px;padding:9px 12px;background:#65dec2;color:#17324d;font-weight:900;cursor:pointer}.action.secondary{background:#fff}.action:hover{filter:brightness(1.06);transform:translateY(-1px)} .reading-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.reading-card{padding:18px;border:3px solid #17324d;border-radius:20px;background:#fff;line-height:1.58}.reading-card h3{margin-top:0;font:800 24px Fraunces,serif}.reading-card p{margin:0 0 12px}.porter-art{min-height:250px;padding:24px;border:3px solid #17324d;border-radius:20px;background:linear-gradient(145deg,#243b5d,#7a67e8);color:#fff;overflow:hidden;position:relative}.porter-art .staff{position:absolute;inset:55px -20px auto;transform:rotate(-12deg);height:74px;background:repeating-linear-gradient(to bottom,transparent 0 12px,#fff 13px 15px)}.porter-art strong{position:relative;z-index:1;display:block;font:800 31px Fraunces,serif}.porter-art span{position:relative;z-index:1;font-size:70px}.diagram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.diagram{min-height:180px;padding:15px;border:3px solid #17324d;border-radius:20px;background:#fff;text-align:center}.diagram h3{margin:0 0 10px;font:800 18px Fraunces,serif}.function-flow{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap}.function-flow span{padding:9px;border:2px solid #17324d;border-radius:10px;background:#ff9dcc;font-weight:900}.function-flow b{color:#ed4e5f}.pulse{display:flex;justify-content:center;align-items:end;gap:12px;height:100px}.pulse span{width:48px;border:3px solid #17324d;border-radius:15px 15px 0 0;background:#65dec2;font-weight:900;padding-top:13px}.pulse span:first-child{height:88px;background:#ed4e5f;color:#fff}.pulse span:nth-child(2){height:58px}.pulse span:nth-child(3){height:48px}.mapping{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mapping span{padding:9px;border:2px solid #17324d;border-radius:10px;background:#d9efff;font-weight:900} @media(max-width:850px){.song-tile,.learn-tile{grid-column:span 12}.learn-content,.reading-grid{grid-template-columns:1fr}.chord-grid,.score-grid{grid-template-columns:1fr}.banner-inner{padding:16px}.song-logo{font-size:28px}.on-body{padding:14px}.on-head h2{font-size:28px}}@media(max-width:540px){.workspace{padding:14px}.music-banner{padding:12px}.banner-inner{min-height:142px;align-items:flex-start}.banner-title{font-size:32px}.song-logo{padding:10px;font-size:20px}.site-header .nav{display:none}.tile-head h2{font-size:24px}.diagram-grid{grid-template-columns:1fr}.on-head{padding:13px}.on-tabs{padding-left:10px}.score-image{height:245px}.score-viewer-head h2{font-size:19px}} </style> <script src="https://cdn.tailwindcss.com/3.4.17" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.577.0/dist/umd/lucide.min.js" type="text/javascript"></script> <script src="/_sdk/8de366929c5f3b48.data_sdk.js" type="text/javascript" integrity="sha512-TyQ8k8cZj66xe/aENmn6RyZpdOFZXbAo5+KBG3PeFM+Q4qMTHU8xAqmq4ADClNfPrstgQYV6OzZHwLTnElzB2g=="></script> <script src="/_sdk/0ddbbee1c66b1212.editing_sdk.js" type="text/javascript" integrity="sha512-HQn5LM1yruQSbY78ATUril6QeOJ9xj7KqO64ltLtb4vBwI5Qv3/tloFFOndBPZTNZoeV5xKzuth5y6FTi9crsg=="></script> <script src="/_sdk/765e1fea0cec97ce.resizing_sdk.js" type="text/javascript" integrity="sha512-IRTJnqww0+HQ5V/LlWEQrlD5SrYHaVvaeVoNe8HYQXoaguzUGheSd9+n9s6WOgaTcEH0g37DuINHZ9aqfzWjlw=="></script> </head> <body data-template-id="__page-root" class="w-full" style="background: rgb(255, 240, 169);"> <div class="app-shell"> <section class="music-banner" aria-labelledby="music-banner-title"> <div class="banner-inner"> <div> <p data-template-id="music-banner-kicker" class="canva-text banner-kicker" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 16px;">♫ APRENDE · TOCA · ESCUCHA ♫</p> <h1 id="music-banner-title" data-template-id="music-banner-title" class="canva-text banner-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 32px;">Lo mejor del mundo: la música</h1> </div> <div data-template-id="begin-logo" class="canva-banner song-logo" style="background: rgb(255, 255, 255); color: rgb(201, 53, 73);"> ♫ Begin the Beguine <i>✦</i><small>JAZZ · BAILE · PARTITURA</small> </div> </div> </section> <header data-template-id="header-section" class="canva-header site-header" style="background: rgb(23, 50, 77);"> <div class="header-inner"> <div class="brand"><span class="brand-badge"><i data-lucide="music-2"></i></span><span data-template-id="platform-name" class="canva-text" style="color: rgb(255, 255, 255); font-weight: 800; font-style: normal; font-size: 16px;">PIANO Y GUITARRA VIRTUAL</span> </div> <nav class="nav" aria-label="Navegación"><a href="#instrumentos">Instrumentos</a><a href="#aprende">Aprender</a> </nav> </div> </header> <main class="workspace"> <div class="grid"> <section id="instrumentos" data-template-id="piano-panel" class="canva-panel tile piano-tile" aria-labelledby="piano-title" style="background: rgb(255, 253, 245);"> <div class="tile-head"> <div> <p data-template-id="piano-kicker" class="canva-text kicker" style="color: rgb(71, 116, 138); font-weight: 800; font-style: normal; font-size: 16px;">INSTRUMENTO 01</p> <h2 id="piano-title" data-template-id="piano-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Piano virtual</h2> <p data-template-id="piano-description" class="canva-text" style="color: rgb(64, 92, 115); font-weight: 400; font-style: normal; font-size: 16px;">Pulsa una tecla para escucharla y verla también en la guitarra.</p> </div> </div> <div class="piano-scroll"> <div id="main-piano" class="piano" tabindex="0" aria-label="Piano virtual sincronizado"></div> </div> </section> <section data-template-id="guitar-panel" class="canva-panel tile guitar-tile" aria-labelledby="guitar-title" style="background: rgb(255, 253, 245);"> <div class="tile-head"> <div> <p data-template-id="guitar-kicker" class="canva-text kicker" style="color: rgb(71, 116, 138); font-weight: 800; font-style: normal; font-size: 16px;">INSTRUMENTO 02</p> <h2 id="guitar-title" data-template-id="guitar-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Guitarra virtual</h2> <p data-template-id="guitar-description" class="canva-text" style="color: rgb(64, 92, 115); font-weight: 400; font-style: normal; font-size: 16px;">Afinación estándar Mi–La–Re–Sol–Si–Mi con trastes visibles.</p> </div> </div> <div class="guitar-scroll"> <div id="guitar-neck" class="guitar" aria-label="Guitarra estándar Mi La Re Sol Si Mi"></div> </div> </section> <section class="tile song-tile"> <button id="begin-launch" data-template-id="begin-card" class="canva-card song-card" type="button" aria-haspopup="dialog" style="background: linear-gradient(145deg, rgb(255, 225, 107), rgb(255, 180, 207), rgb(140, 220, 255)); color: rgb(23, 50, 77);"> <span class="spark" aria-hidden="true">✦ ♪ ✧</span> <h2 data-template-id="begin-card-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 25px;">Begin the Beguine</h2><p data-template-id="begin-card-copy" class="canva-text" style="color: rgb(64, 92, 115); font-weight: 700; font-style: normal; font-size: 16px;">Explora dos páginas de partitura, acordes de jazz, piano, guitarra y el mundo musical de Cole Porter.</p><span class="big-note" aria-hidden="true">𝄞</span> </button> </section> <section id="aprende" data-template-id="learn-panel" class="canva-section tile learn-tile" aria-labelledby="learn-title" style="background: rgb(255, 253, 245);"> <div class="tile-head"> <div> <p class="kicker">RUTA DE APRENDIZAJE</p> <h2 id="learn-title" data-template-id="learn-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Aprende conectando sonidos</h2> <p data-template-id="learn-copy" class="canva-text" style="color: rgb(64, 92, 115); font-weight: 400; font-style: normal; font-size: 16px;">Una misma nota puede leerse, tocarse y encontrarse en instrumentos distintos.</p> </div> </div> <div class="learn-content"> <div class="learn-board"> <h3 data-template-id="learn-board-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 19px;">El mismo sonido, tres mapas</h3> <div class="mini-flow"><span>🎹 Piano</span><b>↔</b><span>🎸 Guitarra</span><b>↔</b><span>𝄞 Partitura</span> </div> </div> <div class="rose-wrap"><img data-template-id="decorative-piano-image" class="canva-image" loading="lazy" src="https://images.pexels.com/photos/210764/pexels-photo-210764.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800" alt="Teclas de piano junto a una partitura musical"> </div> </div> </section> </div> </main> </div> <div id="begin-modal" class="on-backdrop" role="dialog" aria-modal="true" aria-labelledby="begin-modal-title" aria-hidden="true"> <section class="on-modal" tabindex="-1"> <header class="on-head"> <div> <h2 id="begin-modal-title" data-template-id="begin-modal-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Begin the Beguine</h2> <p data-template-id="begin-modal-subtitle" class="canva-text" style="color: rgb(41, 72, 99); font-weight: 700; font-style: normal; font-size: 16px;">Una ruta musical entre jazz, baile, partitura y armonía</p> </div><button id="begin-close" data-template-id="begin-close" class="canva-button close-btn" type="button" aria-label="Cerrar Begin the Beguine" style="background: rgb(255, 255, 255); color: rgb(23, 50, 77);"><i data-lucide="x"></i></button> </header> <div class="on-tabs" role="tablist" aria-label="Secciones de Begin the Beguine"> <button data-template-id="tab-label-score" class="canva-button on-tab active" role="tab" aria-selected="true" aria-controls="tab-score" id="tab-score-button" data-tab="tab-score" style="background: rgb(225, 245, 255); color: rgb(23, 50, 77); font-weight: 900; font-style: normal; font-size: 16px;">Partitura</button> <button data-template-id="tab-label-chords" class="canva-button on-tab" role="tab" aria-selected="false" aria-controls="tab-chords" id="tab-chords-button" data-tab="tab-chords" style="background: rgb(225, 245, 255); color: rgb(23, 50, 77); font-weight: 900; font-style: normal; font-size: 16px;">Acordes</button> <button data-template-id="tab-label-piano" class="canva-button on-tab" role="tab" aria-selected="false" aria-controls="tab-piano" id="tab-piano-button" data-tab="tab-piano" style="background: rgb(225, 245, 255); color: rgb(23, 50, 77); font-weight: 900; font-style: normal; font-size: 16px;">Piano</button> <button data-template-id="tab-label-guitar" class="canva-button on-tab" role="tab" aria-selected="false" aria-controls="tab-guitar" id="tab-guitar-button" data-tab="tab-guitar" style="background: rgb(225, 245, 255); color: rgb(23, 50, 77); font-weight: 900; font-style: normal; font-size: 16px;">Guitarra</button> <button data-template-id="tab-label-history" class="canva-button on-tab" role="tab" aria-selected="false" aria-controls="tab-history" id="tab-history-button" data-tab="tab-history" style="background: rgb(225, 245, 255); color: rgb(23, 50, 77); font-weight: 900; font-style: normal; font-size: 16px;">Historia</button> <button data-template-id="tab-label-porter" class="canva-button on-tab" role="tab" aria-selected="false" aria-controls="tab-porter" id="tab-porter-button" data-tab="tab-porter" style="background: rgb(225, 245, 255); color: rgb(23, 50, 77); font-weight: 900; font-style: normal; font-size: 16px;">Cole Porter</button> <button data-template-id="tab-label-details" class="canva-button on-tab" role="tab" aria-selected="false" aria-controls="tab-details" id="tab-details-button" data-tab="tab-details" style="background: rgb(225, 245, 255); color: rgb(23, 50, 77); font-weight: 900; font-style: normal; font-size: 16px;">Particularidades</button> </div> <div class="on-body"> <section id="tab-score" class="on-panel active" role="tabpanel" aria-labelledby="tab-score-button"> <h2 data-template-id="score-section-title" class="canva-text section-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Partitura</h2> <div class="info-ribbon"><span data-template-id="key-info" class="canva-tag" style="background: rgb(255, 139, 125); color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 16px;">Dos páginas para explorar</span><span data-template-id="style-info" class="canva-tag" style="background: rgb(255, 225, 107); color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 16px;">Ambiente: jazz y baile</span><span data-template-id="pages-info" class="canva-tag" style="background: rgb(101, 222, 194); color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 16px;">Lectura en orden: 1 → 2</span><span data-template-id="progression-info" class="canva-tag" style="background: rgb(184, 156, 255); color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 16px;">Acordes: color mayor, menor y dominante</span> </div> <div class="score-grid"> <article data-template-id="score-card-one" class="canva-card score-box" style="background: rgb(255, 255, 255);"> <button class="score-image-button score-open" data-page="0" type="button" aria-haspopup="dialog"> <img data-template-id="score-page-one" class="canva-image score-image" loading="lazy" src="canva://MAHVjRlAkCs/1" alt="Beguine The Beguin pag2.jpg"> <span class="score-zoom-hint">Ampliar página 1</span> </button> <p data-template-id="score-page-one-caption" class="canva-text score-caption" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 16px;">Página 1 · pulsa para ampliar</p> </article> <article data-template-id="score-card-two" class="canva-card score-box" style="background: rgb(255, 255, 255);"> <button class="score-image-button score-open" data-page="1" type="button" aria-haspopup="dialog"> <img data-template-id="score-page-two" class="canva-image score-image" loading="lazy" src="canva://MAHVjUAIp4M/1" alt="Beguine The Beguin pag1.jpg"> <span class="score-zoom-hint">Ampliar página 2</span> </button> <p data-template-id="score-page-two-caption" class="canva-text score-caption" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 16px;">Página 2 · pulsa para ampliar</p> </article> </div> <p data-template-id="score-note" class="canva-text score-note" style="color: rgb(64, 92, 115); font-weight: 700; font-style: normal; font-size: 16px;">Las dos imágenes corresponden a la partitura facilitada para esta actividad. Ábrelas para observarlas con más detalle, sin deformar sus proporciones.</p> </section> <section id="tab-chords" class="on-panel" role="tabpanel" aria-labelledby="tab-chords-button"> <h2 data-template-id="chords-section-title" class="canva-text section-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Acordes de la melodía</h2> <p data-template-id="chords-intro" class="canva-text score-note" style="color: rgb(64, 92, 115); font-weight: 700; font-style: normal; font-size: 16px;">Cada celda conecta la forma del acorde con el piano y la guitarra. Las cuatríadas presentan cuatro notas reales o un voicing coherente de cuatro sonidos.</p> <div id="chord-grid" class="chord-grid"> <article class="chord-card" data-chord="60,64,67" data-tonic="60"> <div class="chord-top"> <div> <h3>C</h3> <p class="chord-type">Mayor</p> </div> </div> <p class="note-line">Notas: Do · Mi · Sol</p> <div class="voicing-row"> <div class="voicing"><b>Tríada</b>Do · Mi · Sol </div> <div class="voicing"><b>Cuatríada</b>Do · Mi · Sol · Do </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="60,64,67,71" data-tonic="60"> <div class="chord-top"> <div> <h3>Cmaj7</h3> <p class="chord-type">Mayor séptima</p> </div> </div> <p class="note-line">Notas: Do · Mi · Sol · Si</p> <div class="voicing-row"> <div class="voicing"><b>Tríada base</b>Do · Mi · Sol </div> <div class="voicing"><b>Cuatríada</b>Do · Mi · Sol · Si </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="60,64,67,69" data-tonic="60"> <div class="chord-top"> <div> <h3>C6</h3> <p class="chord-type">Mayor con sexta</p> </div> </div> <p class="note-line">Notas: Do · Mi · Sol · La</p> <div class="voicing-row"> <div class="voicing"><b>Tríada</b>Do · Mi · Sol </div> <div class="voicing"><b>Cuatríada</b>Do · Mi · Sol · La </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="60,64,67,70" data-tonic="60"> <div class="chord-top"> <div> <h3>C7</h3> <p class="chord-type">Dominante</p> </div> </div> <p class="note-line">Notas: Do · Mi · Sol · Sib</p> <div class="voicing-row"> <div class="voicing"><b>Tríada base</b>Do · Mi · Sol </div> <div class="voicing"><b>Cuatríada</b>Do · Mi · Sol · Sib </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="62,65,69,72" data-tonic="62"> <div class="chord-top"> <div> <h3>Dm7</h3> <p class="chord-type">Menor séptima</p> </div> </div> <p class="note-line">Notas: Re · Fa · La · Do</p> <div class="voicing-row"> <div class="voicing"><b>Tríada base</b>Re · Fa · La </div> <div class="voicing"><b>Cuatríada</b>Re · Fa · La · Do </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="65,69,72" data-tonic="65"> <div class="chord-top"> <div> <h3>F</h3> <p class="chord-type">Mayor</p> </div> </div> <p class="note-line">Notas: Fa · La · Do</p> <div class="voicing-row"> <div class="voicing"><b>Tríada</b>Fa · La · Do </div> <div class="voicing"><b>Cuatríada</b>Fa · La · Do · Fa </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="65,68,72" data-tonic="65"> <div class="chord-top"> <div> <h3>Fm</h3> <p class="chord-type">Menor</p> </div> </div> <p class="note-line">Notas: Fa · Lab · Do</p> <div class="voicing-row"> <div class="voicing"><b>Tríada</b>Fa · Lab · Do </div> <div class="voicing"><b>Cuatríada</b>Fa · Lab · Do · Fa </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="70,74,77" data-tonic="70"> <div class="chord-top"> <div> <h3>Bb</h3> <p class="chord-type">Mayor</p> </div> </div> <p class="note-line">Notas: Sib · Re · Fa</p> <div class="voicing-row"> <div class="voicing"><b>Tríada</b>Sib · Re · Fa </div> <div class="voicing"><b>Cuatríada</b>Sib · Re · Fa · Sib </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="70,73,77" data-tonic="70"> <div class="chord-top"> <div> <h3>Bbm</h3> <p class="chord-type">Menor</p> </div> </div> <p class="note-line">Notas: Sib · Reb · Fa</p> <div class="voicing-row"> <div class="voicing"><b>Tríada</b>Sib · Reb · Fa </div> <div class="voicing"><b>Cuatríada</b>Sib · Reb · Fa · Sib </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="68,72,75,79" data-tonic="68"> <div class="chord-top"> <div> <h3>Abmaj7</h3> <p class="chord-type">Mayor séptima</p> </div> </div> <p class="note-line">Notas: Lab · Do · Mib · Sol</p> <div class="voicing-row"> <div class="voicing"><b>Tríada base</b>Lab · Do · Mib </div> <div class="voicing"><b>Cuatríada</b>Lab · Do · Mib · Sol </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="63,67,70,73" data-tonic="63"> <div class="chord-top"> <div> <h3>Eb7</h3> <p class="chord-type">Dominante</p> </div> </div> <p class="note-line">Notas: Mib · Sol · Sib · Reb</p> <div class="voicing-row"> <div class="voicing"><b>Tríada base</b>Mib · Sol · Sib </div> <div class="voicing"><b>Cuatríada</b>Mib · Sol · Sib · Reb </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="69,72,75,79" data-tonic="69"> <div class="chord-top"> <div> <h3>Am7b5</h3> <p class="chord-type">Semidisminuido</p> </div> </div> <p class="note-line">Notas: La · Do · Mib · Sol</p> <div class="voicing-row"> <div class="voicing"><b>Tríada base</b>La · Do · Mib </div> <div class="voicing"><b>Cuatríada</b>La · Do · Mib · Sol </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="67,72,74,77" data-tonic="67"> <div class="chord-top"> <div> <h3>G7sus4</h3> <p class="chord-type">Dominante suspendido</p> </div> </div> <p class="note-line">Notas: Sol · Do · Re · Fa</p> <div class="voicing-row"> <div class="voicing"><b>Suspensión</b>Sol · Do · Re </div> <div class="voicing"><b>Cuatríada</b>Sol · Do · Re · Fa </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> <article class="chord-card" data-chord="60,63,67" data-tonic="60"> <div class="chord-top"> <div> <h3>Cm</h3> <p class="chord-type">Menor</p> </div> </div> <p class="note-line">Notas: Do · Mib · Sol</p> <div class="voicing-row"> <div class="voicing"><b>Tríada</b>Do · Mib · Sol </div> <div class="voicing"><b>Cuatríada</b>Do · Mib · Sol · Do </div> </div> <div class="mini-piano-slot"></div> <div class="controls"><button class="action listen-chord" type="button">Escuchar acorde</button><button class="action secondary clear-chord" type="button">Borrar</button> </div> </article> </div> </section> <section id="tab-piano" class="on-panel" role="tabpanel" aria-labelledby="tab-piano-button"> <h2 data-template-id="piano-tab-title" class="canva-text section-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Piano: escucha y observa</h2> <article data-template-id="piano-tab-card" class="canva-card reading-card" style="background: rgb(255, 255, 255);"> <h3 data-template-id="piano-tab-card-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 19px;">Dos octavas para cada acorde</h3> <p data-template-id="piano-tab-copy" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">Las teclas blancas y negras conservan la distribución 2+3 del piano. En cada acorde, las notas aparecen iluminadas en ambas octavas y la tónica se distingue con un rojo más intenso.</p> <p data-template-id="piano-tab-copy-two" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">Pulsa cualquier tecla principal o mini tecla: la misma altura musical se ilumina simultáneamente en el mástil de guitarra.</p> </article> </section> <section id="tab-guitar" class="on-panel" role="tabpanel" aria-labelledby="tab-guitar-button"> <h2 data-template-id="guitar-tab-title" class="canva-text section-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Guitarra: trastes y posiciones</h2> <article data-template-id="guitar-tab-card" class="canva-card reading-card" style="background: rgb(255, 255, 255);"> <h3 data-template-id="guitar-tab-card-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 19px;">Afinación estándar y notas equivalentes</h3> <p data-template-id="guitar-tab-copy" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">La guitarra usa las seis cuerdas en afinación Mi–La–Re–Sol–Si–Mi. Al seleccionar un acorde, se muestran en rojo todas sus notas dentro del rango visible, con nombre y traste.</p> <p data-template-id="guitar-tab-copy-two" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">Las múltiples apariciones de una misma nota ayudan a comparar posiciones sin saturar cada celda del acorde.</p> </article> </section> <section id="tab-history" class="on-panel" role="tabpanel" aria-labelledby="tab-history-button"> <h2 data-template-id="history-section-title" class="canva-text section-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Historia de la canción</h2> <div class="reading-grid"> <article data-template-id="history-card" class="canva-card reading-card" style="background: rgb(255, 255, 255);"> <h3 data-template-id="history-card-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 19px;">De Jubilee al repertorio internacional</h3> <p data-template-id="history-copy-one" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">“Begin the Beguine” fue escrita por Cole Porter para el musical Jubilee, estrenado en Broadway en 1935. La canción se convirtió con el tiempo en una referencia muy reconocible del repertorio popular estadounidense.</p> <p data-template-id="history-copy-two" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">Su título se asocia al beguine o biguine, una forma de música y baile de origen caribeño vinculada a Martinica y Guadalupe. La canción evoca ese ambiente de baile con una personalidad propia.</p> <p data-template-id="history-copy-three" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 700; font-style: normal; font-size: 16px;">Diferentes intérpretes y arreglistas la difundieron internacionalmente; por eso conviene entender los acordes de esta actividad como una guía educativa, no como una afirmación de que todos los arreglos usan exactamente la misma armonía.</p> </article> <div class="rose-wrap"><img data-template-id="history-image" class="canva-image" loading="lazy" src="https://images.pexels.com/photos/7097776/pexels-photo-7097776.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=800" alt="Bodegón clásico con violín, velas y partituras musicales"> </div> </div> </section> <section id="tab-porter" class="on-panel" role="tabpanel" aria-labelledby="tab-porter-button"> <h2 data-template-id="porter-section-title" class="canva-text section-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Cole Porter</h2> <div class="reading-grid"> <article data-template-id="porter-card" class="canva-card reading-card" style="background: rgb(255, 255, 255);"> <h3 data-template-id="porter-card-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 19px;">Melodía, ingenio y sofisticación armónica</h3> <p data-template-id="porter-copy-one" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">Cole Porter fue un compositor y letrista estadounidense conocido por su sofisticación armónica, melodías memorables y letras ingeniosas. Su escritura une elegancia teatral, humor y un sentido refinado del ritmo.</p> <p data-template-id="porter-copy-two" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">Entre sus obras más conocidas se encuentran “Night and Day”, “I Get a Kick Out of You”, “Anything Goes”, “You’re the Top”, “I've Got You Under My Skin”, Kiss Me, Kate y Can-Can.</p> </article> <aside data-template-id="porter-art" class="canva-card porter-art" aria-label="Ilustración musical decorativa" style="background: linear-gradient(145deg, rgb(36, 59, 93), rgb(122, 103, 232)); color: rgb(255, 255, 255);"><strong>COLE<br> PORTER</strong><span aria-hidden="true">♫</span> <div class="staff" aria-hidden="true"></div> </aside> </div> </section> <section id="tab-details" class="on-panel" role="tabpanel" aria-labelledby="tab-details-button"> <h2 data-template-id="details-section-title" class="canva-text section-title" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 24px;">Particularidades musicales</h2> <div class="diagram-grid"> <article class="diagram"> <h3>Carácter de beguine</h3> <div class="pulse"><span>1<br> pulso</span><span>2</span><span>3</span> </div> </article> <article class="diagram"> <h3>Funciones armónicas</h3> <div class="function-flow"><span>Tónica<br> C</span><b>→</b><span>Color<br> Fm</span><b>→</b><span>Dominante<br> G7sus4</span><b>→</b><span>Retorno<br> C</span> </div> </article> <article class="diagram"> <h3>Progresión visual</h3> <div class="function-flow"><span>C</span><b>→</b><span>Dm7</span><b>→</b><span>G7sus4</span><b>→</b><span>Cmaj7</span> </div> </article> <article class="diagram"> <h3>Partitura ↔ instrumentos</h3> <div class="mapping"><span>nota escrita</span><span>tecla</span><span>acorde</span><span>traste</span> </div> </article> </div> <article data-template-id="details-reading" class="canva-card reading-card" style="margin-top: 16px; background: rgb(255, 255, 255);"> <h3 data-template-id="details-reading-title" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 800; font-style: normal; font-size: 19px;">Cómo escuchar la melodía sobre la progresión</h3> <p data-template-id="details-reading-copy" class="canva-text" style="color: rgb(23, 50, 77); font-weight: 400; font-style: normal; font-size: 16px;">El carácter de beguine sugiere un movimiento de baile balanceado y elegante. Los acordes mayores aportan brillo; los menores introducen contraste; los dominantes generan dirección; maj7 y m7 añaden color; Am7b5 crea tensión suave; y sus4 retrasa la resolución. Lee primero las dos páginas en orden, escucha el acorde seleccionado y compara cómo las mismas notas aparecen escritas, en el piano y en la guitarra.</p> </article> </section> </div> </section> </div> <div id="score-viewer-modal" class="score-viewer-backdrop" role="dialog" aria-modal="true" aria-labelledby="score-viewer-title" aria-hidden="true"> <section class="score-viewer" tabindex="-1"> <header class="score-viewer-head"> <h2 id="score-viewer-title">Partitura · Begin the Beguine</h2> <div class="viewer-actions"><button id="viewer-prev" class="viewer-nav" type="button" aria-label="Página anterior"><i data-lucide="chevron-left"></i></button><button id="viewer-next" class="viewer-nav" type="button" aria-label="Página siguiente"><i data-lucide="chevron-right"></i></button><button id="score-viewer-close" class="close-btn" type="button" aria-label="Cerrar partitura ampliada"><i data-lucide="x"></i></button> </div> </header> <div class="score-viewer-body"><img id="viewer-image" loading="lazy" alt=""> </div> </section> </div> <script> const displayNames=["Do","Do♯ / Re♭","Re","Re♯ / Mi♭","Mi","Fa","Fa♯ / Sol♭","Sol","Sol♯ / La♭","La","La♯ / Sib","Si"]; const shortNames=["Do","Do♯","Re","Re♯","Mi","Fa","Fa♯","Sol","Sol♯","La","La♯","Si"]; const whitePcs=[0,2,4,5,7,9,11],blackPcs=[1,3,6,8,10],whiteBefore={1:1,3:2,6:4,8:5,10:6}; let audioContext=null,modalTrigger=null,viewerTrigger=null,viewerPage=0; function audio(){if(!audioContext)audioContext=new(window.AudioContext||window.webkitAudioContext)();if(audioContext.state==="suspended")audioContext.resume();return audioContext} function freq(m){return 440*Math.pow(2,(m-69)/12)} function sound(m,duration=.62,delay=0){const ctx=audio(),o=ctx.createOscillator(),g=ctx.createGain(),now=ctx.currentTime+delay;o.type="triangle";o.frequency.value=freq(m);g.gain.setValueAtTime(.001,now);g.gain.exponentialRampToValueAtTime(.14,now+.025);g.gain.exponentialRampToValueAtTime(.001,now+duration);o.connect(g);g.connect(ctx.destination);o.start(now);o.stop(now+duration+.03)} function pcsFor(notes){return new Set(notes.map(n=>Number(n)%12))} function clearSelection(){document.querySelectorAll(".pkey,.gmarker,.mini-key,.chord-card").forEach(el=>el.classList.remove("active","tonic-active"))} function selectNotes(midis,play=true,tonic=midis[0]){ clearSelection(); const pcs=pcsFor(midis),tonicPc=Number(tonic)%12; document.querySelectorAll("[data-midi]").forEach(el=>{const value=Number(el.dataset.midi);if(pcs.has(value%12)){el.classList.add("active");if(value%12===tonicPc)el.classList.add("tonic-active")}}); document.querySelectorAll(".chord-card").forEach(card=>{const own=card.dataset.chord.split(",").map(Number);if(own.length===midis.length&&own.every(n=>pcs.has(n%12)))card.classList.add("active")}); if(play&&midis.length)sound(Number(midis[0])); } function playChord(notes){notes.forEach((m,i)=>sound(m,.82,i*.025))} function pianoKey(root,midi,left,isBlack,compact){ const b=document.createElement("button");b.type="button";b.className=(compact?"mini-key ":"pkey ")+(isBlack?"black":"white");b.dataset.midi=midi;b.style.left=left+"px"; b.textContent=compact?shortNames[midi%12]:displayNames[midi%12]+(Math.floor(midi/12)-1); b.setAttribute("aria-label",displayNames[midi%12]);b.addEventListener("click",()=>selectNotes([midi]));root.appendChild(b); } function buildPiano(){ const root=document.getElementById("main-piano"),start=48,w=57;let whites=0; for(let o=0;o<3;o++)whitePcs.forEach(pc=>{pianoKey(root,start+o*12+pc,whites*w,false,false);whites++}); for(let o=0;o<3;o++)blackPcs.forEach(pc=>pianoKey(root,start+o*12+pc,(o*7+whiteBefore[pc])*w-18,true,false)); root.addEventListener("keydown",e=>{const map={a:60,w:61,s:62,e:63,d:64,f:65,t:66,g:67,y:68,h:69,u:70,j:71};if(map[e.key.toLowerCase()]!==undefined){e.preventDefault();selectNotes([map[e.key.toLowerCase()]])}}); } function buildMiniPiano(slot,notes,tonic){ const block=document.createElement("div");block.className="mini-piano-block"; const label=document.createElement("span");label.className="mini-piano-label";label.textContent="Piano Yamaha · dos octavas";block.appendChild(label); const scroll=document.createElement("div");scroll.className="mini-piano-scroll";const piano=document.createElement("div");piano.className="mini-piano";scroll.appendChild(piano);block.appendChild(scroll); const start=60,w=34;let whites=0; for(let o=0;o<2;o++)whitePcs.forEach(pc=>{pianoKey(piano,start+o*12+pc,whites*w,false,true);whites++}); for(let o=0;o<2;o++)blackPcs.forEach(pc=>pianoKey(piano,start+o*12+pc,(o*7+whiteBefore[pc])*w-10,true,true)); const pcs=pcsFor(notes),tonicPc=tonic%12;piano.querySelectorAll(".mini-key").forEach(key=>{const pc=Number(key.dataset.midi)%12;if(pcs.has(pc)){key.classList.add("active");if(pc===tonicPc)key.classList.add("tonic-active")}}); slot.appendChild(block); } function buildChordPianos(){document.querySelectorAll(".chord-card").forEach(card=>buildMiniPiano(card.querySelector(".mini-piano-slot"),card.dataset.chord.split(",").map(Number),Number(card.dataset.tonic)))} function buildGuitar(){ const root=document.getElementById("guitar-neck"),opens=[40,45,50,55,59,64],tops=[250,210,170,130,90,50],frets=document.createElement("div");frets.className="fret-lines"; for(let i=0;i<12;i++)frets.appendChild(document.createElement("span"));root.appendChild(frets); tops.forEach((top,s)=>{const str=document.createElement("div");str.className="string";str.style.top=(top+14)+"px";root.appendChild(str);for(let fret=0;fret<=12;fret++){const midi=opens[s]+fret,b=document.createElement("button");b.type="button";b.className="gmarker";b.dataset.midi=midi;b.style.top=top+"px";b.style.left=(fret===0?45:150+(fret-.5)*980/12)+"px";b.textContent=displayNames[midi%12];b.setAttribute("aria-label",displayNames[midi%12]+", cuerda "+(6-s)+", traste "+fret);b.addEventListener("click",()=>selectNotes([midi]));root.appendChild(b)}}) } function activateTab(id){document.querySelectorAll(".on-tab").forEach(b=>{const yes=b.dataset.tab===id;b.classList.toggle("active",yes);b.setAttribute("aria-selected",String(yes))});document.querySelectorAll(".on-panel").forEach(p=>p.classList.toggle("active",p.id===id))} function openModal(trigger){modalTrigger=trigger;const modal=document.getElementById("begin-modal");modal.classList.add("open");modal.setAttribute("aria-hidden","false");document.getElementById("begin-close").focus()} function closeModal(){const modal=document.getElementById("begin-modal");modal.classList.remove("open");modal.setAttribute("aria-hidden","true");if(modalTrigger)modalTrigger.focus()} function scoreImages(){return [document.querySelector('[data-template-id="score-page-one"]'),document.querySelector('[data-template-id="score-page-two"]')]} function showViewerPage(){const img=scoreImages()[viewerPage],viewer=document.getElementById("viewer-image");if(!img||!viewer)return;const source=img.currentSrc||img.src;if(source){viewer.src=source;viewer.alt=img.alt||"Partitura · página "+(viewerPage+1)}document.getElementById("score-viewer-title").textContent="Partitura · Begin the Beguine · Página "+(viewerPage+1)} function openScoreViewer(trigger,page){viewerTrigger=trigger;viewerPage=page;const modal=document.getElementById("score-viewer-modal");modal.classList.add("open");modal.setAttribute("aria-hidden","false");showViewerPage();requestAnimationFrame(showViewerPage);document.getElementById("score-viewer-close").focus()} function closeScoreViewer(){const viewer=document.getElementById("score-viewer-modal");viewer.classList.remove("open");viewer.setAttribute("aria-hidden","true");document.getElementById("viewer-image").removeAttribute("src");if(viewerTrigger)viewerTrigger.focus()} document.getElementById("begin-launch").addEventListener("click",e=>openModal(e.currentTarget)); document.getElementById("begin-close").addEventListener("click",closeModal); document.getElementById("begin-modal").addEventListener("click",e=>{if(e.target===e.currentTarget)closeModal()}); document.querySelectorAll(".score-open").forEach(button=>button.addEventListener("click",e=>{e.preventDefault();e.stopPropagation();openScoreViewer(e.currentTarget,Number(e.currentTarget.dataset.page))})); document.getElementById("score-viewer-close").addEventListener("click",closeScoreViewer); document.getElementById("viewer-prev").addEventListener("click",e=>{e.preventDefault();e.stopPropagation();viewerPage=(viewerPage+1)%2;showViewerPage()}); document.getElementById("viewer-next").addEventListener("click",e=>{e.preventDefault();e.stopPropagation();viewerPage=(viewerPage+1)%2;showViewerPage()}); document.getElementById("score-viewer-modal").addEventListener("click",e=>{if(e.target===e.currentTarget)closeScoreViewer()}); document.querySelectorAll(".on-tab").forEach((b,index,all)=>{b.addEventListener("click",()=>activateTab(b.dataset.tab));b.addEventListener("keydown",e=>{if(e.key==="ArrowRight"||e.key==="ArrowLeft"){e.preventDefault();const next=(index+(e.key==="ArrowRight"?1:-1)+all.length)%all.length;all[next].focus();activateTab(all[next].dataset.tab)}})}); document.addEventListener("keydown",e=>{if(e.key==="Escape"){if(document.getElementById("score-viewer-modal").classList.contains("open"))closeScoreViewer();else if(document.getElementById("begin-modal").classList.contains("open"))closeModal()}}); document.addEventListener("click",e=>{ const chord=e.target.closest(".chord-card");if(chord&&!e.target.closest(".mini-key")&&!e.target.closest(".listen-chord")&&!e.target.closest(".clear-chord")){const notes=chord.dataset.chord.split(",").map(Number);selectNotes(notes,false,Number(chord.dataset.tonic));playChord(notes);return} const listen=e.target.closest(".listen-chord");if(listen){const card=listen.closest(".chord-card"),notes=card.dataset.chord.split(",").map(Number);selectNotes(notes,false,Number(card.dataset.tonic));playChord(notes);return} if(e.target.closest(".clear-chord"))clearSelection(); }); buildPiano();buildGuitar();buildChordPianos();lucide.createIcons(); </script> </body></html>both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br />Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-31860654147792941822026-09-11T09:44:52.159-07:002026-09-11T09:44:52.160-07:00<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHU5lEnikU/qSCq2MkEkWJvrHLDnUTuFg/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHU5lEnikU&#x2F;qSCq2MkEkWJvrHLDnUTuFg&#x2F;view?utm_content=DAHU5lEnikU&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Banners de Música Occidental</a> de José Luis Catalán (Lo mejor : la música)<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVeZ3VMJzVbLGjwEMZ8BiXc42VByXS3oIUpGSnJowCMnLX8larsQ2hyphenhyphen0KrwRQijQ3yIRiRhcEu_2Vr1WV3fcGMa56KNI8TlwrOeAjIW_vkwUaFxmFfXHG6Jm8uWKXt-TOtr3PIh97SH2yRuHo0Q31ZCEaFq-AEx_uG-Hzy1TiAHAoPg39zDnK4cRgO0w/s1600/,mqs.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="100" data-original-width="795" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVeZ3VMJzVbLGjwEMZ8BiXc42VByXS3oIUpGSnJowCMnLX8larsQ2hyphenhyphen0KrwRQijQ3yIRiRhcEu_2Vr1WV3fcGMa56KNI8TlwrOeAjIW_vkwUaFxmFfXHG6Jm8uWKXt-TOtr3PIh97SH2yRuHo0Q31ZCEaFq-AEx_uG-Hzy1TiAHAoPg39zDnK4cRgO0w/s1600/,mqs.jpg"/></a></div>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-952336246480209082026-09-11T09:38:02.551-07:002026-09-11T09:38:02.551-07:00<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHU50a2BCs/uyckJ1EWa_WDPghkrSBOfw/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHU50a2BCs&#x2F;uyckJ1EWa_WDPghkrSBOfw&#x2F;view?utm_content=DAHU50a2BCs&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Pentagrama Animated Banner</a> de José Luis Catalán (Lo mejor : la música)<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AEWEgHVP27DM40bRO1wLRcB-_-DSr1z6Xu6jcLBlO0ccXAFCZyvEkWTTTnB4QQygq6HBDVV6HnUSsAz_ww817Y2RX8LOGY06XULqoq7H0d9VFD05GDJp_EryqwJi1sI3l9izFt8GLfAheEdoTjXuQvvMPY8tFe3dr7PI58eQn5Oj1FTx5xi7SzgK-wQ/s1600/,mqs.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="100" data-original-width="795" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AEWEgHVP27DM40bRO1wLRcB-_-DSr1z6Xu6jcLBlO0ccXAFCZyvEkWTTTnB4QQygq6HBDVV6HnUSsAz_ww817Y2RX8LOGY06XULqoq7H0d9VFD05GDJp_EryqwJi1sI3l9izFt8GLfAheEdoTjXuQvvMPY8tFe3dr7PI58eQn5Oj1FTx5xi7SzgK-wQ/s1600/,mqs.jpg"/></a></div>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-66061908660068771442026-09-07T10:17:29.845-07:002026-09-07T10:19:49.408-07:00<p><span style="font-size: x-large;">&nbsp;La nota la: Pinchar el dibujo</span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://aprendermusica.my.canva.site/nota-la" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2958" data-original-width="1366" height="770" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvmAf4GxoNAa5CF72D6w3cexgtuBDU_TD6I1umnFmeOTmumrEa_u1Ukkg2yOmXgQFXne5Yl_NTE173zo0b8d8MtisX1JnrpqbWtY6iNQcGozjf19j6kT35WVF_kEKQaY4LI2qW9jls_UciotpmBcQZQ_CwnX-UwwI7c619zTrdP1kshfP14azquXyOOAs/w583-h770/nota%20la.png" width="583" /></a></div><br /><p></p>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-82083489389882305822026-08-28T10:01:43.799-07:002026-08-28T10:01:43.800-07:00<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMH37CtQvCdEDsYW9KwomgfUeCG-lblMn1ShY7lX40FOHzbdojF71IePuORIbDSbJQkmoXmjQ5UpSpFjF8Ap3u3bPxCoI5_MBts2ZWNwj_narWSeaLJXzRxkquknHPEoq5I5EqirS6ZEThe1wd2Z3BiEW2ttBZcF64D2uH58Z8PgUuD81owAk4x98kYoU/s1600/notas-musicales.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="274" data-original-width="331" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMH37CtQvCdEDsYW9KwomgfUeCG-lblMn1ShY7lX40FOHzbdojF71IePuORIbDSbJQkmoXmjQ5UpSpFjF8Ap3u3bPxCoI5_MBts2ZWNwj_narWSeaLJXzRxkquknHPEoq5I5EqirS6ZEThe1wd2Z3BiEW2ttBZcF64D2uH58Z8PgUuD81owAk4x98kYoU/s1600/notas-musicales.png"/></a></div>6<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHTl5_ia-g/nlVMPWGBbLCv5Ky2_kmjwA/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHTl5_ia-g&#x2F;nlVMPWGBbLCv5Ky2_kmjwA&#x2F;view?utm_content=DAHTl5_ia-g&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Diseño</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-27815151542505017232026-07-18T08:25:52.388-07:002026-07-18T08:25:52.388-07:00<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJI2VCTvBEL5NW4c__82Mom7yfXt-cioOuUaqZZAuMT1yMOI0wBdv2sZ-TsYCynsoCzrwxxrOopf51t_D-5HzuGo_QybF5AyeW5B4B1Zc-sc_GEbCpk2MQjv7EK-Q0ej2j5qWyhkPDIqmawWiqZMYr_4vohQZGDoexbE3W3cly7yvEqwJDgjWPE97sWoA/s1724/lomejor.JPG" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="553" data-original-width="1724" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJI2VCTvBEL5NW4c__82Mom7yfXt-cioOuUaqZZAuMT1yMOI0wBdv2sZ-TsYCynsoCzrwxxrOopf51t_D-5HzuGo_QybF5AyeW5B4B1Zc-sc_GEbCpk2MQjv7EK-Q0ej2j5qWyhkPDIqmawWiqZMYr_4vohQZGDoexbE3W3cly7yvEqwJDgjWPE97sWoA/s320/lomejor.JPG"/></a></div><div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHPvj4bQhg/heOOSlj4vZUq31Ob273MoA/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHPvj4bQhg&#x2F;heOOSlj4vZUq31Ob273MoA&#x2F;view?utm_content=DAHPvj4bQhg&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Quiz tonalidad do mayor. </a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-82835839477283204782026-07-16T09:58:21.926-07:002026-07-16T09:58:21.927-07:00pianom parte 7<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bGw9QRIwezel0ccKc8OXGH60j0zhIQc18_zFpnqGmXYrSJiiozpvUMo3MiSQhk61c4rp5R76LiLNQ0_H2MdUZtObJkJf1YMofsm14hyu0G5PUIo9m4ooJZRdKfHDrZI6pNkqdz2m6_e-UPmAUKL7vA4878PrBkdNVIAvU5ZYjcFnseViBnp3mAiXSqQ/s1600/Screenshot%202019-02-19_20-02-54-805.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="600" data-original-height="380" data-original-width="1600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bGw9QRIwezel0ccKc8OXGH60j0zhIQc18_zFpnqGmXYrSJiiozpvUMo3MiSQhk61c4rp5R76LiLNQ0_H2MdUZtObJkJf1YMofsm14hyu0G5PUIo9m4ooJZRdKfHDrZI6pNkqdz2m6_e-UPmAUKL7vA4878PrBkdNVIAvU5ZYjcFnseViBnp3mAiXSqQ/s600/Screenshot%202019-02-19_20-02-54-805.png"/></a></div><div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHO-zgeY7M/a-cCDez0n3aYWL0_Zcszbw/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHO-zgeY7M&#x2F;a-cCDez0n3aYWL0_Zcszbw&#x2F;view?utm_content=DAHO-zgeY7M&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Parte 7 quiz inversiones</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-66972109458741462312026-06-28T09:23:08.918-07:002026-06-28T09:31:57.879-07:006<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHN3oalaA8/VhJ5oJP-WXXl2jPNzFK6kQ/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHN3oalaA8&#x2F;VhJ5oJP-WXXl2jPNzFK6kQ&#x2F;view?utm_content=DAHN3oalaA8&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Copia de Dibujos musicales en estilo cómic</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-18328603713041173542026-06-28T06:54:33.380-07:002026-06-28T06:54:33.380-07:00Los acordes triadas y cuatriadas de todas tonalidades . el primer gradr con la séptima mayor. <b></b><div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHN3adn07A/Hxteo3YcScyI49JbP-PIcw/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHN3adn07A&#x2F;Hxteo3YcScyI49JbP-PIcw&#x2F;view?utm_content=DAHN3adn07A&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Copia de Este si el mejor de Piano Virtual</a> de José Luis Catalán (Lo mejor : la música)<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5A93TxYbOpYTf1_X3pg7GJ2nknEE9vdTlYLBLkf9XmvBx9Hp7TKe6cDcz__oN5CczdpGKKv4MkRbBjRz_4UyvFsijaSKzfFLEK4zHCrT1F__Br2zHj5GaUTnye2fj2rJravfwjBew6RCJrpSaYYiPjQHTJZva6NqqWdpB6bud2NXVsNnxQkxqxw8WuN8/s341/sol%20mayor.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="130" data-original-width="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5A93TxYbOpYTf1_X3pg7GJ2nknEE9vdTlYLBLkf9XmvBx9Hp7TKe6cDcz__oN5CczdpGKKv4MkRbBjRz_4UyvFsijaSKzfFLEK4zHCrT1F__Br2zHj5GaUTnye2fj2rJravfwjBew6RCJrpSaYYiPjQHTJZva6NqqWdpB6bud2NXVsNnxQkxqxw8WuN8/s320/sol%20mayor.jpg"/></a></div>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-33733815094068112832026-06-28T06:33:27.003-07:002026-06-28T06:33:27.003-07:00<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHNmRAdOyU/BetSU6V283HFgaRGUtIsWA/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHNmRAdOyU&#x2F;BetSU6V283HFgaRGUtIsWA&#x2F;view?utm_content=DAHNmRAdOyU&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Guitarra 1 preferente</a> de José Luis Catalán (Lo mejor : la música)<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhI6GjOf2Kwyvh6QdmcEom3PZ3lhGDHdJ6pA2SeHUJjxaeJQaZwEx7yCXmIYSvZ0A9iLDWDZjB_cUs7M8utCIVV51ckdW95PzlE2_dvXswxJc6KHjFqDYi6vE4EHkjSBRGcHbP382-tzyTcjaxiz4M_9v9jRsBuFl0NtSlUQD0017m-zPZ0ZQCGRfTz8/s784/pua-contrapua2.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="438" data-original-width="784" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhI6GjOf2Kwyvh6QdmcEom3PZ3lhGDHdJ6pA2SeHUJjxaeJQaZwEx7yCXmIYSvZ0A9iLDWDZjB_cUs7M8utCIVV51ckdW95PzlE2_dvXswxJc6KHjFqDYi6vE4EHkjSBRGcHbP382-tzyTcjaxiz4M_9v9jRsBuFl0NtSlUQD0017m-zPZ0ZQCGRfTz8/s320/pua-contrapua2.jpg"/></a></div>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-7907450517614251352026-06-18T05:12:14.693-07:002026-06-18T05:12:14.694-07:00Se puede aprende muy bien , piano interactivo. para poder pasárselo bien y aprendiendo. <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45qLDZsFHK9PEMhwDFTs13TtkntRaq_7IWhMxg3g8JgSxcFcq-AcUTLson_ioWXyw8ZbrGZvZSAUG1_AVvd_Vw_evK34hMrp7JOcz2DnnYTbdQgimPWqOLcz-azp6xSyeScbesdVQVd8LMIyDYIaFryaITnkmpKxsB3VUNVLP3Jwyo1ceXZb7Vg2zGTc/s1530/sib%20triada%20escala.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="513" data-original-width="1530" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45qLDZsFHK9PEMhwDFTs13TtkntRaq_7IWhMxg3g8JgSxcFcq-AcUTLson_ioWXyw8ZbrGZvZSAUG1_AVvd_Vw_evK34hMrp7JOcz2DnnYTbdQgimPWqOLcz-azp6xSyeScbesdVQVd8LMIyDYIaFryaITnkmpKxsB3VUNVLP3Jwyo1ceXZb7Vg2zGTc/s320/sib%20triada%20escala.jpg"/></a></div><div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHKZhNwNmk/CspdOp7EIc4CURX-w6DOuw/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHKZhNwNmk&#x2F;CspdOp7EIc4CURX-w6DOuw&#x2F;view?utm_content=DAHKZhNwNmk&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Copia de Póster de Método de Piano Virtual para Principiantes</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-47415949097500041642026-05-31T06:51:07.149-07:002026-05-31T06:51:07.149-07:00Canción de <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3AUvJYGS-YVA65DxXm0_dGkoutOnO_IFbtHyVjCgDjQ4C-FjPt7GeS57BfkGqIPmFKBNk5NMp4cLtGBihTkenySXI0kquJcIgFacmT8j15zpH2_60Lcim3sGgubNi4gcBF8RnEQ255LpuLi3ME0SwekIQdFKEWGhlRCTGuhr91a1CrQXTHGu2ALWA50/s236/border07.gif" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="320" data-original-height="236" data-original-width="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3AUvJYGS-YVA65DxXm0_dGkoutOnO_IFbtHyVjCgDjQ4C-FjPt7GeS57BfkGqIPmFKBNk5NMp4cLtGBihTkenySXI0kquJcIgFacmT8j15zpH2_60Lcim3sGgubNi4gcBF8RnEQ255LpuLi3ME0SwekIQdFKEWGhlRCTGuhr91a1CrQXTHGu2ALWA50/s320/border07.gif"/></a></div>cumpleaños <div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHLPXb-o8w/6wo1W8zGKexDXAbzQEQYFg/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHLPXb-o8w&#x2F;6wo1W8zGKexDXAbzQEQYFg&#x2F;view?utm_content=DAHLPXb-o8w&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">cumpleaños feliz</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-40286540567173137312026-05-30T10:15:56.802-07:002026-05-30T10:15:56.802-07:00cinco acordes básicos para tocar cientos de canciones<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GzFLKu9jKxuEGltjzn3eX-z0XRUh2uCtmWkBXUASLCBpOJZzxJ5MGjo1yompCcFeFlArHDlEcQWsD3cV8RGWxm6WGiyXfLutxIDVZDNatmrpb91b_YIBP_Aq2pPp8zpxCyJzG9snACgwHStIitaDoBzLcL4_HQH4_8PJdaaxPu_YGeVSk7RV9WVDnMI/s1491/domisol.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="281" data-original-width="1491" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GzFLKu9jKxuEGltjzn3eX-z0XRUh2uCtmWkBXUASLCBpOJZzxJ5MGjo1yompCcFeFlArHDlEcQWsD3cV8RGWxm6WGiyXfLutxIDVZDNatmrpb91b_YIBP_Aq2pPp8zpxCyJzG9snACgwHStIitaDoBzLcL4_HQH4_8PJdaaxPu_YGeVSk7RV9WVDnMI/s320/domisol.jpg"/></a></div><div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHLKf6Imxk/kW7kTc3tKyTlnH6Ozzj8OQ/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHLKf6Imxk&#x2F;kW7kTc3tKyTlnH6Ozzj8OQ&#x2F;view?utm_content=DAHLKf6Imxk&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Guía 5 acordes en piano y guitarra</a> de José Luis Catalán (Lo mejor : la música) Para tocar el 80% de las canciones de música pop, rock y folk solo necesitas dominar 5 acordes abiertos esenciales: Do, Sol, Lam, Mim y Re (C, G, Am, Em y D en la notación anglosajona).🎸 Los 5 Acordes EsencialesSol Mayor (G): El acorde alegre más usado en la música popular.Do Mayor (C): La base de la armonía occidental.Re Mayor (D): Un acorde brillante que aporta resolución.Mi Menor (Em): El acorde menor más fácil de tocar.La Menor (Am): Aporta un toque melancólico y profundo.📊 Por Qué Funcionan: La Magia de los 4 AcordesLa inmensa mayoría de los éxitos musicales se construyen con la progresión armónica I - V - vi - IV. Si tocas en la tonalidad de Sol Mayor, esta fórmula utiliza exactamente cuatro de los acordes de esta lista: Sol, Re, Mi menor y Do.Cambiando el orden de estos mismos cuatro acordes puedes tocar cientos de canciones de artistas como The Beatles, U2, Taylor Swift, Shakira o Coldplay.🛠️ Consejos para DominarlosPisa cerca del traste: Coloca tus dedos justo detrás de la barra de metal, no encima.Arquea los dedos: Usa las yemas para no mutear las cuerdas vecinas.Practica la memoria muscular: Cambia entre dos acordes de forma lenta pero constante.Usa un capodastro: Te permitirá tocar en cualquier tonalidad usando estas mismas 5 posiciones.Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-10559085930577624432026-05-30T09:57:26.317-07:002026-05-30T09:57:26.317-07:00Para aprender rápido. Escala do mayor brillante<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Der6j2d_fpVn4GXmhUqt_-fVZ__GQqcjGp9QiW6ictQjFJ3VvULZF8dFfLlfxhSSSnC7SqtplhqXsTywisbTnrNgxMZFvQa6w0G3MIqhz8pyjXSmKRYTwAB8U-fJQ-YrvA6FOedurT1mKu2_wGXcNVBZrDfLL0PHSUW9VFEVI1kJq99ZtY7X-bg5_3Y/s700/NOTAS%20MUSICALES%20%28212%29.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="477" data-original-width="700" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Der6j2d_fpVn4GXmhUqt_-fVZ__GQqcjGp9QiW6ictQjFJ3VvULZF8dFfLlfxhSSSnC7SqtplhqXsTywisbTnrNgxMZFvQa6w0G3MIqhz8pyjXSmKRYTwAB8U-fJQ-YrvA6FOedurT1mKu2_wGXcNVBZrDfLL0PHSUW9VFEVI1kJq99ZtY7X-bg5_3Y/s320/NOTAS%20MUSICALES%20%28212%29.png"/></a></div><div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;"> <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;" src="https://www.canva.com/design/DAHLIdUMBXE/UVKONWSu_fBj9cPyEn1pwg/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen"> </iframe> </div> <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAHLIdUMBXE&#x2F;UVKONWSu_fBj9cPyEn1pwg&#x2F;view?utm_content=DAHLIdUMBXE&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Copia de Copia de Copia de Piano virtual HTML 2 octavas</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-27855333693951130532026-05-15T07:06:50.905-07:002026-05-15T07:06:50.905-07:00círculo de quintas<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnXbTKwLbx7k0GKpx332g-QxyWUzlwy8t2eMRqlC5yeeL9djbH63I12SYnTUOIdZve0vCk_TzC4oSmke_l0MEd3ggaGKHzE-z4hWCWhptpMN8YuaVKhn4GlvU70iqeTKtSDPi1i0s5IBR3RrwcZhQ1AFAC1OAZX2jG5gCZvn-Mbaon7vin-lxEGypLBtI/s1600/blog.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="74" data-original-width="591" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnXbTKwLbx7k0GKpx332g-QxyWUzlwy8t2eMRqlC5yeeL9djbH63I12SYnTUOIdZve0vCk_TzC4oSmke_l0MEd3ggaGKHzE-z4hWCWhptpMN8YuaVKhn4GlvU70iqeTKtSDPi1i0s5IBR3RrwcZhQ1AFAC1OAZX2jG5gCZvn-Mbaon7vin-lxEGypLBtI/s1600/blog.jpg"/></a></div> <!doctype html> <html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Círculo de Quintas</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&amp;family=DM+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet"> <style> body { font-family: 'DM Sans', sans-serif; } h1, h2 { font-family: 'Playfair Display', serif; } .cof-segment { cursor: pointer; transition: opacity 0.2s, transform 0.2s; } .cof-segment:hover { opacity: 0.85; } .cof-segment.active { filter: brightness(1.3); } @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } .fade-up { animation: fadeUp 0.6s ease-out both; } .fade-up-2 { animation: fadeUp 0.6s 0.15s ease-out both; } .fade-up-3 { animation: fadeUp 0.6s 0.3s ease-out both; } </style> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js" type="text/javascript"></script> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> <script src="/_sdk/resizing_sdk.js" type="text/javascript"></script> </head> <body data-template-id="__page-root" class="w-full min-h-screen" style="background: rgb(26, 26, 46);"> <section class="relative w-full" style="min-height: 280px;"><img data-template-id="hero-image" loading="lazy" class="canva-image absolute inset-0 w-full h-full object-cover opacity-25" src="https://images.pexels.com/photos/2176119/pexels-photo-2176119.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1920" alt="Detailed close-up view of a classic Chickering piano keyboard with elegant dark tones."> <div class="relative z-10 flex flex-col items-center justify-center text-center px-6 py-16"> <h1 data-template-id="page-title" class="canva-text fade-up" style="color: rgb(254, 249, 240); font-weight: 900; font-style: normal; font-size: 52px;">Círculo de Quintas</h1> <p data-template-id="page-subtitle" class="canva-text mt-4 fade-up-2" style="color: rgb(226, 217, 200); font-weight: 400; font-style: normal; font-size: 20px;">Explora las relaciones entre tonalidades de forma interactiva</p> </div> </section> <main class="max-w-4xl mx-auto px-6 py-12 space-y-12"><!-- Circle of Fifths --> <section class="fade-up-2 flex flex-col items-center"> <h2 data-template-id="circle-title" class="canva-text mb-8" style="color: rgb(254, 249, 240); font-weight: 700; font-style: normal; font-size: 24px;">Toca cualquier tonalidad</h2> <div class="relative w-full max-w-lg mx-auto"> <svg id="cof-svg" viewBox="0 0 500 500" class="w-full"></svg> </div> </section><!-- Info Panel --> <section class="fade-up-3 flex justify-center"> <div data-template-id="info-panel" class="canva-card rounded-2xl p-8 w-full max-w-md text-center" style="background: rgb(42, 42, 74);"> <p data-template-id="info-hint" class="canva-text" id="info-hint" style="color: rgb(160, 160, 184); font-weight: 400; font-style: normal; font-size: 16px;">Selecciona una tonalidad en el círculo para ver sus detalles</p> <div id="info-content" class="hidden"> <p id="info-key" class="text-3xl font-bold mt-2" style="color:#fef9f0;"></p> <p id="info-signature" class="mt-3 text-lg" style="color:#a0a0b8;"></p> <p id="info-relative" class="mt-1 text-lg" style="color:#a0a0b8;"></p> </div> </div> </section><!-- Explanation --> <section class="fade-up-3"> <h2 data-template-id="explain-title" class="canva-text mb-4" style="color: rgb(254, 249, 240); font-weight: 700; font-style: normal; font-size: 24px;">¿Qué es el Círculo de Quintas?</h2> <p data-template-id="explain-text" class="canva-text leading-relaxed" style="color: rgb(200, 200, 216); font-weight: 400; font-style: normal; font-size: 16px;">El Círculo de Quintas organiza las 12 tonalidades musicales según intervalos de quinta justa. Cada paso en sentido horario añade un sostenido a la armadura; cada paso en sentido antihorario añade un bemol. El anillo interior muestra los relativos menores. Es la herramienta fundamental para entender modulaciones, progresiones armónicas y relaciones entre acordes.</p> </section> </main> <script src="/_sdk/editing_sdk.js"></script> <script> let audioCtx; function getCtx() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); return audioCtx; } function playTone(freq, dur=0.7) { const ctx = getCtx(); const osc = ctx.createOscillator(); const g = ctx.createGain(); osc.type = 'triangle'; osc.frequency.value = freq; g.gain.setValueAtTime(0.25, ctx.currentTime); g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur); osc.connect(g); g.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + dur); } const keys = [ {major:'Do',minor:'La',sig:'—',freq:261.63}, {major:'Sol',minor:'Mi',sig:'1♯',freq:392.00}, {major:'Re',minor:'Si',sig:'2♯',freq:293.66}, {major:'La',minor:'Fa♯',sig:'3♯',freq:440.00}, {major:'Mi',minor:'Do♯',sig:'4♯',freq:329.63}, {major:'Si',minor:'Sol♯',sig:'5♯',freq:493.88}, {major:'Fa♯/Sol♭',minor:'Re♯/Mi♭',sig:'6♯/6♭',freq:369.99}, {major:'Re♭',minor:'Si♭',sig:'5♭',freq:277.18}, {major:'La♭',minor:'Fa',sig:'4♭',freq:415.30}, {major:'Mi♭',minor:'Do',sig:'3♭',freq:311.13}, {major:'Si♭',minor:'Sol',sig:'2♭',freq:466.16}, {major:'Fa',minor:'Re',sig:'1♭',freq:349.23} ]; const svg = document.getElementById('cof-svg'); const cx=250, cy=250, rOuter=220, rInner=150, rText=185, rMinor=125; const majorColors = ['#c0392b','#e74c3c','#e67e22','#f39c12','#f1c40f','#2ecc71','#1abc9c','#16a085','#2980b9','#3498db','#8e44ad','#9b59b6']; const minorColors = majorColors.map(c => c + 'aa'); keys.forEach((k, i) => { const a1 = (i - 0.5) * 30 * Math.PI/180 - Math.PI/2; const a2 = (i + 0.5) * 30 * Math.PI/180 - Math.PI/2; // Outer segment const path = document.createElementNS('http://www.w3.org/2000/svg','path'); const x1=cx+rOuter*Math.cos(a1), y1=cy+rOuter*Math.sin(a1); const x2=cx+rOuter*Math.cos(a2), y2=cy+rOuter*Math.sin(a2); const x3=cx+rInner*Math.cos(a2), y3=cy+rInner*Math.sin(a2); const x4=cx+rInner*Math.cos(a1), y4=cy+rInner*Math.sin(a1); path.setAttribute('d',`M${x4} ${y4} L${x1} ${y1} A${rOuter} ${rOuter} 0 0 1 ${x2} ${y2} L${x3} ${y3} A${rInner} ${rInner} 0 0 0 ${x4} ${y4}Z`); path.setAttribute('fill', majorColors[i]); path.setAttribute('stroke','#1a1a2e'); path.setAttribute('stroke-width','2'); path.classList.add('cof-segment'); path.dataset.index = i; svg.appendChild(path); // Inner segment const rI2=rInner-2, rI1=80; const pi1=cx+rI2*Math.cos(a1), pi1y=cy+rI2*Math.sin(a1); const pi2=cx+rI2*Math.cos(a2), pi2y=cy+rI2*Math.sin(a2); const pi3=cx+rI1*Math.cos(a2), pi3y=cy+rI1*Math.sin(a2); const pi4=cx+rI1*Math.cos(a1), pi4y=cy+rI1*Math.sin(a1); const pathM = document.createElementNS('http://www.w3.org/2000/svg','path'); pathM.setAttribute('d',`M${pi4} ${pi4y} L${pi1} ${pi1y} A${rI2} ${rI2} 0 0 1 ${pi2} ${pi2y} L${pi3} ${pi3y} A${rI1} ${rI1} 0 0 0 ${pi4} ${pi4y}Z`); pathM.setAttribute('fill', minorColors[i]); pathM.setAttribute('stroke','#1a1a2e'); pathM.setAttribute('stroke-width','1.5'); pathM.classList.add('cof-segment'); pathM.dataset.index = i; pathM.dataset.minor = '1'; svg.appendChild(pathM); // Labels const aMid = i * 30 * Math.PI/180 - Math.PI/2; const tx=cx+rText*Math.cos(aMid), ty=cy+rText*Math.sin(aMid); const label = document.createElementNS('http://www.w3.org/2000/svg','text'); label.setAttribute('x',tx); label.setAttribute('y',ty+5); label.setAttribute('text-anchor','middle'); label.setAttribute('font-size','14'); label.setAttribute('font-weight','700'); label.setAttribute('fill','#fff'); label.setAttribute('pointer-events','none'); label.textContent = k.major; svg.appendChild(label); const mx=cx+rMinor*Math.cos(aMid), my=cy+rMinor*Math.sin(aMid); const mLabel = document.createElementNS('http://www.w3.org/2000/svg','text'); mLabel.setAttribute('x',mx); mLabel.setAttribute('y',my+4); mLabel.setAttribute('text-anchor','middle'); mLabel.setAttribute('font-size','11'); mLabel.setAttribute('font-weight','500'); mLabel.setAttribute('fill','#fff'); mLabel.setAttribute('pointer-events','none'); mLabel.textContent = k.minor+'m'; svg.appendChild(mLabel); }); let activeEl = null; svg.addEventListener('click', e => { const seg = e.target.closest('.cof-segment'); if (!seg) return; if (activeEl) activeEl.classList.remove('active'); seg.classList.add('active'); activeEl = seg; const i = parseInt(seg.dataset.index); const k = keys[i]; const isMinor = seg.dataset.minor; playTone(k.freq); document.getElementById('info-hint').style.display='none'; document.getElementById('info-content').classList.remove('hidden'); document.getElementById('info-key').textContent = isMinor ? k.minor+'m' : k.major; document.getElementById('info-signature').textContent = 'Armadura: ' + k.sig; document.getElementById('info-relative').textContent = isMinor ? 'Relativo mayor: '+k.major : 'Relativo menor: '+k.minor+'m'; }); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9fc2b0a8b197d119',t:'MTc3ODg1Mzg0OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script> </body></html>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-19621500003016818512026-05-15T03:39:04.138-07:002026-05-15T03:41:44.533-07:00Blues en do . Do mib fa fa# sol sib.<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRPcvMOUkxVt7JZyiI56KXI5r-4gKJXTDlKruBG5eAJFWCVLASnm4PZFzFz40F6pKaFh1CjvWt7mlcgW-9FKSYfo6-UhjEPZuaF5T_cr552q_7Eie2yVCtBhz3rHM1ipHePgugSBZw2iliDTmDbFwEOMDPnTQhWNuywJTv5KGITALdbW6Zcy3m0yArNC4/s1447/20260508144134.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" height="320" data-original-height="1447" data-original-width="1440" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRPcvMOUkxVt7JZyiI56KXI5r-4gKJXTDlKruBG5eAJFWCVLASnm4PZFzFz40F6pKaFh1CjvWt7mlcgW-9FKSYfo6-UhjEPZuaF5T_cr552q_7Eie2yVCtBhz3rHM1ipHePgugSBZw2iliDTmDbFwEOMDPnTQhWNuywJTv5KGITALdbW6Zcy3m0yArNC4/s320/20260508144134.png"/></a></div> <div style="border-radius: 8px; box-shadow: rgba(63, 69, 81, 0.16) 0px 2px 8px 0px; height: 0px; margin-bottom: 0.9em; margin-top: 1.6em; overflow: hidden; padding-bottom: 0px; padding-top: 100%; position: relative; width: 100%; will-change: transform;"> <iframe allow="fullscreen" allowfullscreen="allowfullscreen" loading="lazy" src="https://www.canva.com/design/DAHJuB_4TKo/GyCRCc0RmFpEDace_jf_pw/view?embed" style="border: none; height: 100%; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 100%;"> </iframe> </div> <a href="https://www.canva.com/design/DAHJuB_4TKo/GyCRCc0RmFpEDace_jf_pw/view?utm_content=DAHJuB_4TKo&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" rel="noopener" target="_blank">Escala Blues de Do en Mástil de Guitarra Interactivo</a> de José Luis Catalán (Lo mejor : la música)Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-18108732762807249952026-05-12T07:55:07.771-07:002026-05-12T08:00:49.847-07:00<p><a href="https://preview.canva.site/8ab810a8-fc77-441b-8225-ed67749304bb/cursopianogratis.blogspot.com/gu-a-visual-de-teor-a-musical-para-piano/page-3">&nbsp;Nuevo tema. PINCHA EL DIBUJO PARA VER MEJOR EL TEMA</a></p><div class="separator" style="clear: both; text-align: center;"><a href="https://preview.canva.site/8ab810a8-fc77-441b-8225-ed67749304bb/cursopianogratis.blogspot.com/gu-a-visual-de-teor-a-musical-para-piano/page-3" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="480" data-original-width="640" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3bCbUzZMDGwR4klNMZCERL78Kd_p2pKigB10aV6V2wtQBbDX1MCcsJ_mV0No7hJMRXB0qEmm4YH96FtFvPD55_hRsp1tSjs4yOB7wHDcJT5qjholzF2qPhtY-X_VAo0njCQq-Jtn97GJxYcWbtxXrEBKvHUZZA2NLeJM1kq8Ka3q08Fh6Aur71wfnuU/w482-h362/las%20claves.jpg" width="482" /></a></div><br /><p><br /></p> <html lang="es"><head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <title>Teoría Musical Interactiva</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet"></link> <style> body { font-family: 'DM Sans', sans-serif; } .tab-active { border-bottom: 3px solid #1e40af; color: #1e40af; font-weight: 700; } .white-key { width: 48px; height: 160px; background: #fff; border: 1.5px solid #222; border-radius: 0 0 6px 6px; cursor: pointer; transition: background 0.1s; } .white-key:active, .white-key.pressed { background: #dbeafe; } .black-key { width: 32px; height: 100px; background: #1a1a1a; border-radius: 0 0 4px 4px; cursor: pointer; position: absolute; z-index: 2; transition: background 0.1s; } .black-key:active, .black-key.pressed { background: #374151; } .piano-wrap { position: relative; display: flex; } .quiz-option { cursor: pointer; border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px 16px; transition: all 0.15s; } .quiz-option:hover { border-color: #3b82f6; background: #eff6ff; } .quiz-option.correct { border-color: #16a34a; background: #dcfce7; } .quiz-option.wrong { border-color: #dc2626; background: #fee2e2; } </style> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js" type="text/javascript"></script> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> <script src="/_sdk/resizing_sdk.js" type="text/javascript"></script> </head> <body class="min-h-screen" data-template-id="__page-root" style="background: rgb(255, 255, 255);"> <header class="text-center py-6"> <h1 class="canva-text text-3xl font-bold" data-template-id="main-title" style="color: #1e293b; font-size: 32px; font-style: normal; font-weight: bold;">Teoría Musical Interactiva</h1> <p class="canva-text mt-1" data-template-id="subtitle" style="color: #64748b; font-size: 16px; font-style: normal; font-weight: 400;">Aprende las bases de la música: pentagrama, claves, compás y notas</p> </header> <nav class="flex justify-center gap-1 flex-wrap border-b border-gray-200 mb-6 px-4"><button class="tab-btn tab-active px-4 py-2 text-sm" data-tab="pentagrama">Pentagrama</button> <button class="tab-btn px-4 py-2 text-sm" data-tab="claves">Claves</button> <button class="tab-btn px-4 py-2 text-sm" data-tab="compas">Compás</button> <button class="tab-btn px-4 py-2 text-sm" data-tab="notas">Notas</button> <button class="tab-btn px-4 py-2 text-sm" data-tab="piano">Piano</button> <button class="tab-btn px-4 py-2 text-sm" data-tab="quiz">Quiz</button> </nav> <main class="max-w-4xl mx-auto px-4 pb-12"><!-- PENTAGRAMA --> <section class="tab-content" id="sec-pentagrama"> <h2 class="canva-text text-xl font-bold mb-4" data-template-id="penta-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: bold;">El Pentagrama</h2> <div class="canva-text mb-4 bg-blue-50 p-4 rounded-lg border border-blue-200" data-template-id="penta-desc" style="color: #1e40af; font-size: 16px; font-style: normal; font-weight: 400;">El pentagrama está formado por 5 líneas horizontales (numeradas 1 a 5 de abajo a arriba) y 4 espacios entre ellas (numerados 1 a 4 de abajo a arriba). Es la base donde se escribe la música.</div> <svg class="w-full max-w-lg mx-auto" viewbox="0 0 500 200"><line stroke-width="1.5" stroke="#222" x1="40" x2="460" y1="60" y2="60"></line> <line stroke-width="1.5" stroke="#222" x1="40" x2="460" y1="80" y2="80"></line> <line stroke-width="1.5" stroke="#222" x1="40" x2="460" y1="100" y2="100"></line> <line stroke-width="1.5" stroke="#222" x1="40" x2="460" y1="120" y2="120"></line> <line stroke-width="1.5" stroke="#222" x1="40" x2="460" y1="140" y2="140"></line> <text fill="#1e40af" font-size="12" font-weight="bold" x="465" y="64"> 5 </text> <text fill="#1e40af" font-size="12" font-weight="bold" x="465" y="84"> 4 </text> <text fill="#1e40af" font-size="12" font-weight="bold" x="465" y="104"> 3 </text> <text fill="#1e40af" font-size="12" font-weight="bold" x="465" y="124"> 2 </text> <text fill="#1e40af" font-size="12" font-weight="bold" x="465" y="144"> 1 </text> <text fill="#dc2626" font-size="11" x="470" y="74"> esp.4 </text> <text fill="#dc2626" font-size="11" x="470" y="94"> esp.3 </text> <text fill="#dc2626" font-size="11" x="470" y="114"> esp.2 </text> <text fill="#dc2626" font-size="11" x="470" y="134"> esp.1 </text> </svg> </section><!-- CLAVES --> <section class="tab-content hidden" id="sec-claves"> <h2 class="canva-text text-xl font-bold mb-4" data-template-id="claves-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: bold;">Las Claves</h2> <div class="canva-text mb-4 bg-amber-50 p-4 rounded-lg border border-amber-200" data-template-id="claves-desc" style="color: #92400e; font-size: 16px; font-style: normal; font-weight: 400;">La Clave de Sol se coloca en la 2ª línea e indica que esa línea es la nota Sol. La Clave de Fa en 4ª línea indica que la 4ª línea es Fa. Cada clave determina el nombre de las notas en el pentagrama.</div> <div class="flex flex-wrap gap-8 justify-center"> <div class="text-center"> <p class="font-bold mb-2">Clave de Sol</p> <svg height="140" viewbox="0 0 120 200" width="80"><line stroke-width="1" stroke="#222" x1="10" x2="110" y1="80" y2="80"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="100" y2="100"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="120" y2="120"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="140" y2="140"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="160" y2="160"></line> <text fill="#1e40af" font-family="serif" font-size="72" x="30" y="155"> 𝄞 </text> </svg> </div> <div class="text-center"> <p class="font-bold mb-2">Clave de Fa (4ª línea)</p> <svg height="140" viewbox="0 0 120 200" width="80"><line stroke-width="1" stroke="#222" x1="10" x2="110" y1="80" y2="80"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="100" y2="100"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="120" y2="120"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="140" y2="140"></line> <line stroke-width="1" stroke="#222" x1="10" x2="110" y1="160" y2="160"></line> <text fill="#92400e" font-family="serif" font-size="60" x="25" y="145"> 𝄢 </text> </svg> </div> </div> </section><!-- COMPÁS --> <section class="tab-content hidden" id="sec-compas"> <h2 class="canva-text text-xl font-bold mb-4" data-template-id="compas-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: bold;">El Compás</h2> <div class="canva-text mb-4 bg-green-50 p-4 rounded-lg border border-green-200" data-template-id="compas-desc" style="color: #166534; font-size: 16px; font-style: normal; font-weight: 400;">El compás organiza la música en partes iguales de tiempo. El numerador indica cuántos tiempos tiene cada compás y el denominador indica qué figura vale un tiempo. Tipos: binario (2 tiempos), ternario (3), cuaternario (4) y compuestos.</div> <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 max-w-md mx-auto"> <div class="bg-white border rounded-lg p-4 text-center shadow-sm"> <span class="text-2xl font-bold block">2/4</span><span class="text-xs">Binario</span> </div> <div class="bg-white border rounded-lg p-4 text-center shadow-sm"> <span class="text-2xl font-bold block">3/4</span><span class="text-xs">Ternario</span> </div> <div class="bg-white border rounded-lg p-4 text-center shadow-sm"> <span class="text-2xl font-bold block">4/4</span><span class="text-xs">Cuaternario</span> </div> <div class="bg-white border rounded-lg p-4 text-center shadow-sm"> <span class="text-2xl font-bold block">6/8</span><span class="text-xs">Compuesto</span> </div> <div class="bg-white border rounded-lg p-4 text-center shadow-sm"> <span class="text-2xl font-bold block">3/8</span><span class="text-xs">Ternario simple</span> </div> <div class="bg-white border rounded-lg p-4 text-center shadow-sm"> <span class="text-2xl font-bold block">9/8</span><span class="text-xs">Compuesto ternario</span> </div> </div> </section><!-- NOTAS --> <section class="tab-content hidden" id="sec-notas"> <h2 class="canva-text text-xl font-bold mb-4" data-template-id="notas-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: bold;">Las Notas en el Pentagrama</h2> <div class="canva-text mb-4 bg-purple-50 p-4 rounded-lg border border-purple-200" data-template-id="notas-desc" style="color: #6b21a8; font-size: 16px; font-style: normal; font-weight: 400;">En clave de Sol: notas en LÍNEAS (de abajo a arriba): Mi, Sol, Si, Re, Fa. Notas en ESPACIOS: Fa, La, Do, Mi. El Do central va en una línea adicional inferior. La nota La aguda va en una línea adicional superior.</div> <svg class="w-full max-w-2xl mx-auto" viewbox="0 0 560 220"><!-- Staff --> <line stroke-width="1.5" stroke="#222" x1="30" x2="540" y1="60" y2="60"></line> <line stroke-width="1.5" stroke="#222" x1="30" x2="540" y1="80" y2="80"></line> <line stroke-width="1.5" stroke="#222" x1="30" x2="540" y1="100" y2="100"></line> <line stroke-width="1.5" stroke="#222" x1="30" x2="540" y1="120" y2="120"></line> <line stroke-width="1.5" stroke="#222" x1="30" x2="540" y1="140" y2="140"></line> <!-- Clave de sol --> <text fill="#1e40af" font-family="serif" font-size="52" x="35" y="135"> 𝄞 </text> <!-- Do (línea adicional inferior) --> <line stroke-width="1" stroke="#222" x1="90" x2="120" y1="160" y2="160"></line> <ellipse cx="105" cy="160" fill="#222" rx="8" ry="6"></ellipse> <text fill="#222" font-size="11" font-weight="bold" x="95" y="180"> Do </text> <!-- Notas en líneas: Mi(1), Sol(2), Si(3), Re(4), Fa(5) --> <ellipse cx="160" cy="140" fill="#222" rx="8" ry="6"></ellipse> <text fill="#1e40af" font-size="10" x="152" y="155"> Mi </text> <ellipse cx="210" cy="120" fill="#222" rx="8" ry="6"></ellipse> <text fill="#1e40af" font-size="10" x="202" y="135"> Sol </text> <ellipse cx="260" cy="100" fill="#222" rx="8" ry="6"></ellipse> <text fill="#1e40af" font-size="10" x="253" y="115"> Si </text> <ellipse cx="310" cy="80" fill="#222" rx="8" ry="6"></ellipse> <text fill="#1e40af" font-size="10" x="303" y="95"> Re </text> <ellipse cx="360" cy="60" fill="#222" rx="8" ry="6"></ellipse> <text fill="#1e40af" font-size="10" x="353" y="75"> Fa </text> <!-- La (línea adicional superior) --> <line stroke-width="1" stroke="#222" x1="395" x2="425" y1="40" y2="40"></line> <ellipse cx="410" cy="40" fill="#222" rx="8" ry="6"></ellipse> <text fill="#1e40af" font-size="10" x="402" y="33"> La </text> <!-- Notas en espacios: Fa, La, Do, Mi, Sol --> <ellipse cx="450" cy="130" fill="#dc2626" rx="7" ry="5"></ellipse> <text fill="#dc2626" font-size="10" x="443" y="145"> Fa </text> <ellipse cx="470" cy="110" fill="#dc2626" rx="7" ry="5"></ellipse> <text fill="#dc2626" font-size="10" x="463" y="125"> La </text> <ellipse cx="490" cy="90" fill="#dc2626" rx="7" ry="5"></ellipse> <text fill="#dc2626" font-size="10" x="482" y="105"> Do </text> <ellipse cx="510" cy="70" fill="#dc2626" rx="7" ry="5"></ellipse> <text fill="#dc2626" font-size="10" x="503" y="85"> Mi </text> <ellipse cx="530" cy="50" fill="#dc2626" rx="7" ry="5"></ellipse> <text fill="#dc2626" font-size="10" x="522" y="65"> Sol </text> </svg> <div class="mt-4 flex flex-wrap gap-4 justify-center text-sm"><span class="flex items-center gap-1"><span class="w-3 h-3 bg-gray-900 rounded-full inline-block"></span> En líneas</span> <span class="flex items-center gap-1"><span class="w-3 h-3 bg-red-600 rounded-full inline-block"></span> En espacios</span> </div> </section><!-- PIANO --> <section class="tab-content hidden" id="sec-piano"> <h2 class="canva-text text-xl font-bold mb-4" data-template-id="piano-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: bold;">Piano Virtual</h2> <div class="canva-text mb-4 bg-gray-50 p-4 rounded-lg border border-gray-200" data-template-id="piano-desc" style="color: #374151; font-size: 16px; font-style: normal; font-weight: 400;">Haz clic en las teclas para escuchar las 12 notas de una octava. Las teclas blancas son las notas naturales (Do, Re, Mi, Fa, Sol, La, Si) y las negras son sostenidos/bemoles.</div> <div class="flex justify-center overflow-x-auto pb-4"> <div class="piano-wrap" id="piano-keys"></div> </div> <p class="text-center mt-3 text-lg font-bold text-blue-800 h-7" id="piano-note"></p> </section><!-- QUIZ --> <section class="tab-content hidden" id="sec-quiz"> <h2 class="canva-text text-xl font-bold mb-4" data-template-id="quiz-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: bold;">Quiz - 10 Preguntas</h2> <div class="bg-white border rounded-xl p-6 shadow-sm max-w-lg mx-auto" id="quiz-container"> <p class="text-sm text-gray-500 mb-2" id="quiz-progress"></p> <p class="text-lg font-semibold mb-4" id="quiz-question"></p> <div class="space-y-2" id="quiz-options"></div> <div class="hidden mt-6 text-center" id="quiz-result"> <p class="text-2xl font-bold" id="quiz-score"></p><button class="mt-4 px-5 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700" id="quiz-restart">Reiniciar</button> </div> </div> </section> </main> <script src="/_sdk/editing_sdk.js"></script> <script> // Tabs document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('tab-active')); btn.classList.add('tab-active'); document.querySelectorAll('.tab-content').forEach(s => s.classList.add('hidden')); document.getElementById('sec-' + btn.dataset.tab).classList.remove('hidden'); }); }); // Piano const noteNames = ['Do','Do#','Re','Re#','Mi','Fa','Fa#','Sol','Sol#','La','La#','Si']; const whiteNotes = [0,2,4,5,7,9,11]; const blackNotes = [{note:1,pos:0},{note:3,pos:1},{note:6,pos:3},{note:8,pos:4},{note:10,pos:5}]; const pianoEl = document.getElementById('piano-keys'); const noteDisplay = document.getElementById('piano-note'); let audioCtx; function playNote(freq) { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sine'; osc.frequency.value = freq; gain.gain.setValueAtTime(0.5, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.8); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime + 0.8); } const baseFreq = 261.63; // C4 function getFreq(semitone) { return baseFreq * Math.pow(2, semitone / 12); } whiteNotes.forEach((n, i) => { const key = document.createElement('button'); key.className = 'white-key'; key.setAttribute('aria-label', noteNames[n]); key.addEventListener('click', () => { playNote(getFreq(n)); noteDisplay.textContent = noteNames[n]; }); pianoEl.appendChild(key); }); blackNotes.forEach(b => { const key = document.createElement('button'); key.className = 'black-key'; key.style.left = (b.pos * 48 + 32) + 'px'; key.setAttribute('aria-label', noteNames[b.note]); key.addEventListener('click', (e) => { e.stopPropagation(); playNote(getFreq(b.note)); noteDisplay.textContent = noteNames[b.note]; }); pianoEl.appendChild(key); }); // Quiz const questions = [ {q:'¿Cuántas líneas tiene el pentagrama?', opts:['4','5','6','3'], ans:1}, {q:'¿Cuántos espacios tiene el pentagrama?', opts:['3','5','4','6'], ans:2}, {q:'¿En qué línea se sitúa la clave de Fa en 4ª línea?', opts:['3ª línea','2ª línea','4ª línea','5ª línea'], ans:2}, {q:'¿Dónde se escribe el Do central en clave de Sol?', opts:['En la 1ª línea','En una línea adicional inferior','En el 1er espacio','En la 5ª línea'], ans:1}, {q:'Las notas en las LÍNEAS del pentagrama (clave de Sol) son:', opts:['Fa, La, Do, Mi, Sol','Mi, Sol, Si, Re, Fa','Do, Re, Mi, Fa, Sol','Re, Fa, La, Do, Mi'], ans:1}, {q:'Las notas en los ESPACIOS del pentagrama (clave de Sol) son:', opts:['Mi, Sol, Si, Re','Fa, La, Do, Mi','Do, Mi, Sol, Si','Sol, Si, Re, Fa'], ans:1}, {q:'¿Qué indica el numerador en un compás como 3/4?', opts:['La figura unidad','El número de tiempos','El tempo','La tonalidad'], ans:1}, {q:'El compás 4/4 es de tipo:', opts:['Binario','Ternario','Cuaternario','Compuesto'], ans:2}, {q:'¿Cuántas notas tiene una octava cromática?', opts:['7','8','12','10'], ans:2}, {q:'La clave de Sol indica que la 2ª línea es:', opts:['La','Sol','Mi','Re'], ans:1} ]; let qIdx = 0, score = 0, answered = false; const qEl = document.getElementById('quiz-question'); const oEl = document.getElementById('quiz-options'); const pEl = document.getElementById('quiz-progress'); const rEl = document.getElementById('quiz-result'); const sEl = document.getElementById('quiz-score'); function showQuestion() { answered = false; rEl.classList.add('hidden'); const q = questions[qIdx]; pEl.textContent = `Pregunta ${qIdx+1} de ${questions.length}`; qEl.textContent = q.q; oEl.innerHTML = ''; q.opts.forEach((opt, i) => { const btn = document.createElement('button'); btn.className = 'quiz-option w-full text-left'; btn.textContent = opt; btn.addEventListener('click', () => selectAnswer(i, btn)); oEl.appendChild(btn); }); } function selectAnswer(i, btn) { if (answered) return; answered = true; const correct = questions[qIdx].ans; if (i === correct) { btn.classList.add('correct'); score++; } else { btn.classList.add('wrong'); oEl.children[correct].classList.add('correct'); } setTimeout(() => { qIdx++; if (qIdx < questions.length) showQuestion(); else showResult(); }, 1200); } function showResult() { qEl.textContent = ''; oEl.innerHTML = ''; pEl.textContent = ''; rEl.classList.remove('hidden'); sEl.textContent = `Resultado: ${score} / ${questions.length}`; } document.getElementById('quiz-restart').addEventListener('click', () => { qIdx = 0; score = 0; showQuestion(); }); showQuestion(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9faa3fd7b3f2b725',t:'MTc3ODU5NzU2OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script> </body></html>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-60891223302742143292026-05-12T05:54:18.332-07:002026-05-12T07:11:37.678-07:00<h4 style="text-align: left;"><span style="color: #666666; font-size: medium;">Después de muchos meses aprendiendo como puedo enseñar lo que sé de piano , creo que he encontrado el método perfecto. Teoría inteligente , interaciva, videos de como toco el piano, partituras, mp3, midis, usar musescore pues es gratis, aprender a usrlo, lectura con voces virtuales, explicación: videoexplicacion, y mas cosa. He empezado con el dibujo del piano y con las teclas del piano . He puesto los modos pero eso es otra historia. Hay dos páginas a la derecha arriba.</span></h4><div><span style="color: #666666; font-size: medium;">Explicación con video</span></div><div><span style="color: #666666; font-size: medium;"><br /></span></div><div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/6zEYoy-azgo" width="320" youtube-src-id="6zEYoy-azgo"></iframe></div><br /><span style="color: #666666; font-size: medium;"><br /></span></div><div><span style="color: #666666; font-size: medium;"><br /></span></div><div><span style="color: #666666; font-size: medium;"><a href="https://preview.canva.site/74dc1607-0a3b-421f-8f5a-353527bf6dc1/cursopianogratis.blogspot.com/piano-interactivo-notas-y-escalas-visuales/">PINCHAR : LO MEJOR DEL MUNDO LA MÚSICA</a></span></div><div class="separator" style="clear: both;"><a href="https://preview.canva.site/74dc1607-0a3b-421f-8f5a-353527bf6dc1/cursopianogratis.blogspot.com/piano-interactivo-notas-y-escalas-visuales/" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="100" data-original-width="795" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMY90AunMeGhVLau_3pnN56mHahBJ4uRsl7yFk5BwW7CyvV51p1avoSysb5HJrCiid4tTaoZUuzmmTBg3LwTLWDnl2Vt8NbymUvv4ERabX94Kpntak0uqsdqXeqn-PYB2LQEa64fZCH4h8BUynVsgxEis6TvOclbbxffkFNnmFXXjrR1mYgIpp5henYas/s1600/,mqs.jpg" /></a></div> Normalmente tenemos que ir a mi dominio pues alli se verá todo correcto. en el articulo no se ven algunas cosas ir a la direccion pulsando ... &lt;! <html lang="es"><head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <title>Lecciones de Piano</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;family=Playfair+Display:wght@700&amp;display=swap" rel="stylesheet"></link> <style> body { font-family: 'DM Sans', sans-serif; } h1,h2,h3 { font-family: 'Playfair Display', serif; } .piano-key-white { fill: #fff; stroke: #334155; stroke-width: 1.5; cursor: pointer; transition: fill 0.1s; } .piano-key-white:hover { fill: #e0e7ff; } .piano-key-white.active { fill: #a5b4fc; } .piano-key-black { fill: #1e293b; stroke: #000; stroke-width: 1; cursor: pointer; transition: fill 0.1s; } .piano-key-black:hover { fill: #475569; } .piano-key-black.active { fill: #6366f1; } .diagram-white { fill: #fff; stroke: #334155; stroke-width: 1.5; cursor: pointer; transition: fill 0.1s; } .diagram-white:hover { fill: #e0e7ff; } .diagram-white.active { fill: #a5b4fc; } .diagram-black { fill: #1e293b; stroke: #0f172a; stroke-width: 1; cursor: pointer; transition: fill 0.1s; } .diagram-black:hover { fill: #475569; } .diagram-black.active { fill: #6366f1; } .diagram-label { font-family: 'DM Sans', sans-serif; font-size: 14px; fill: #6366f1; text-anchor: middle; font-weight: 700; pointer-events: none; } .diagram-label-black { font-family: 'DM Sans', sans-serif; font-size: 9px; fill: #fbbf24; text-anchor: middle; font-weight: 700; pointer-events: none; } .section-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; } .flying-note { position: absolute; font-size: 42px; pointer-events: none; animation: fly-up 1.4s ease-out forwards; z-index: 50; } @keyframes fly-up { 0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } 50% { opacity: 0.8; transform: translateY(-60px) scale(1.3) rotate(-15deg); } 100% { opacity: 0; transform: translateY(-160px) scale(0.4) rotate(20deg); } } .note-colors { --c0:#ef4444; --c1:#f97316; --c2:#eab308; --c3:#22c55e; --c4:#3b82f6; --c5:#8b5cf6; --c6:#ec4899; } .quiz-option { border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; cursor: pointer; transition: all 0.2s; background: #fff; } .quiz-option:hover { border-color: #818cf8; background: #eef2ff; } .quiz-option.correct { border-color: #22c55e; background: #dcfce7; } .quiz-option.wrong { border-color: #ef4444; background: #fef2f2; } .quiz-option.disabled { pointer-events: none; opacity: 0.7; } </style> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js" type="text/javascript"></script> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> <script src="/_sdk/resizing_sdk.js" type="text/javascript"></script> </head> <body class="min-h-screen w-full" data-template-id="__page-root" style="background: rgb(255, 255, 255);"> <main class="max-w-3xl mx-auto px-4 py-10 space-y-10"> <header class="text-center mb-6"> <h1 class="canva-text text-4xl font-bold mb-2" data-template-id="page-title" style="color: #1e293b; font-size: 32px; font-style: normal; font-weight: 700;">El Teclado del Piano</h1> <p class="canva-text text-lg" data-template-id="page-subtitle" style="color: #64748b; font-size: 16px; font-style: normal; font-weight: 400;">Aprende la disposición de las teclas blancas y negras</p> </header><!-- Diagram 1 --> <section class="section-card p-6 relative" id="diagram1-section"> <h2 class="canva-text text-xl font-bold mb-2" data-template-id="diagram1-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: 700;">Grupo de 2 teclas negras: Do – Re – Mi</h2> <p class="canva-text mb-4 text-sm" data-template-id="diagram1-desc" style="color: #475569; font-size: 16px; font-style: normal; font-weight: 400;">El piano se organiza en grupos repetitivos. El primer grupo tiene 3 teclas blancas (Do, Re, Mi) con 2 teclas negras entre ellas. ¡Toca las teclas para escuchar!</p> <svg class="w-full max-w-xs mx-auto" viewbox="0 0 180 120"><rect class="diagram-white" data-freq="261.63" height="110" rx="3" width="55" x="5" y="5"></rect> <rect class="diagram-white" data-freq="293.66" height="110" rx="3" width="55" x="63" y="5"></rect> <rect class="diagram-white" data-freq="329.63" height="110" rx="3" width="55" x="121" y="5"></rect> <rect class="diagram-black" data-freq="277.18" height="65" rx="2" width="32" x="38" y="5"></rect> <rect class="diagram-black" data-freq="311.13" height="65" rx="2" width="32" x="96" y="5"></rect> <text class="diagram-label" style="fill: #ef4444;" x="32" y="105"> Do </text> <text class="diagram-label" style="fill: #f97316;" x="90" y="105"> Re </text> <text class="diagram-label" style="fill: #eab308;" x="148" y="105"> Mi </text> <text class="diagram-label-black" x="54" y="42"> Do# </text> <text class="diagram-label-black" x="54" y="54"> Reb </text> <text class="diagram-label-black" x="112" y="42"> Re# </text> <text class="diagram-label-black" x="112" y="54"> Mib </text> </svg> </section><!-- Diagram 2 --> <section class="section-card p-6 relative" id="diagram2-section"> <h2 class="canva-text text-xl font-bold mb-2" data-template-id="diagram2-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: 700;">Octava completa con enarmonías</h2> <p class="canva-text mb-4 text-sm" data-template-id="diagram2-desc" style="color: #475569; font-size: 16px; font-style: normal; font-weight: 400;">Cada tecla negra tiene dos nombres: uno como sostenido (#) de la nota inferior y otro como bemol (b) de la nota superior. Por ejemplo, Do# es lo mismo que Reb. ¡Haz clic para escuchar!</p> <svg class="w-full mx-auto" viewbox="0 0 430 140"><rect class="diagram-white" data-freq="261.63" height="130" rx="3" width="58" x="5" y="5"></rect> <rect class="diagram-white" data-freq="293.66" height="130" rx="3" width="58" x="66" y="5"></rect> <rect class="diagram-white" data-freq="329.63" height="130" rx="3" width="58" x="127" y="5"></rect> <rect class="diagram-white" data-freq="349.23" height="130" rx="3" width="58" x="188" y="5"></rect> <rect class="diagram-white" data-freq="392.00" height="130" rx="3" width="58" x="249" y="5"></rect> <rect class="diagram-white" data-freq="440.00" height="130" rx="3" width="58" x="310" y="5"></rect> <rect class="diagram-white" data-freq="493.88" height="130" rx="3" width="58" x="371" y="5"></rect> <rect class="diagram-black" data-freq="277.18" height="75" rx="2" width="34" x="41" y="5"></rect> <rect class="diagram-black" data-freq="311.13" height="75" rx="2" width="34" x="102" y="5"></rect> <rect class="diagram-black" data-freq="369.99" height="75" rx="2" width="34" x="224" y="5"></rect> <rect class="diagram-black" data-freq="415.30" height="75" rx="2" width="34" x="285" y="5"></rect> <rect class="diagram-black" data-freq="466.16" height="75" rx="2" width="34" x="346" y="5"></rect> <text class="diagram-label" style="fill: #ef4444;" x="34" y="125"> Do </text> <text class="diagram-label" style="fill: #f97316;" x="95" y="125"> Re </text> <text class="diagram-label" style="fill: #eab308;" x="156" y="125"> Mi </text> <text class="diagram-label" style="fill: #22c55e;" x="217" y="125"> Fa </text> <text class="diagram-label" style="fill: #3b82f6;" x="278" y="125"> Sol </text> <text class="diagram-label" style="fill: #8b5cf6;" x="339" y="125"> La </text> <text class="diagram-label" style="fill: #ec4899;" x="400" y="125"> Si </text> <text class="diagram-label-black" x="58" y="42"> Do# </text> <text class="diagram-label-black" x="58" y="54"> Reb </text> <text class="diagram-label-black" x="119" y="42"> Re# </text> <text class="diagram-label-black" x="119" y="54"> Mib </text> <text class="diagram-label-black" x="241" y="42"> Fa# </text> <text class="diagram-label-black" x="241" y="54"> Solb </text> <text class="diagram-label-black" x="302" y="42"> Sol# </text> <text class="diagram-label-black" x="302" y="54"> Lab </text> <text class="diagram-label-black" x="363" y="42"> La# </text> <text class="diagram-label-black" x="363" y="54"> Sib </text> </svg> </section><!-- Diagram 3 --> <section class="section-card p-6 relative" id="diagram3-section"> <h2 class="canva-text text-xl font-bold mb-2" data-template-id="diagram3-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: 700;">Grupo de 3 teclas negras: Fa – Sol – La – Si – Do</h2> <p class="canva-text mb-4 text-sm" data-template-id="diagram3-desc" style="color: #475569; font-size: 16px; font-style: normal; font-weight: 400;">El segundo grupo tiene 4 teclas blancas (Fa, Sol, La, Si) con 3 teclas negras. Sus enarmonías son: Fa#/Solb, Sol#/Lab y La#/Sib.</p> <svg class="w-full max-w-sm mx-auto" viewbox="0 0 310 120"><rect class="diagram-white" data-freq="349.23" height="110" rx="3" width="58" x="5" y="5"></rect> <rect class="diagram-white" data-freq="392.00" height="110" rx="3" width="58" x="66" y="5"></rect> <rect class="diagram-white" data-freq="440.00" height="110" rx="3" width="58" x="127" y="5"></rect> <rect class="diagram-white" data-freq="493.88" height="110" rx="3" width="58" x="188" y="5"></rect> <rect class="diagram-white" data-freq="523.25" height="110" rx="3" width="58" x="249" y="5"></rect> <rect class="diagram-black" data-freq="369.99" height="65" rx="2" width="32" x="41" y="5"></rect> <rect class="diagram-black" data-freq="415.30" height="65" rx="2" width="32" x="102" y="5"></rect> <rect class="diagram-black" data-freq="466.16" height="65" rx="2" width="32" x="163" y="5"></rect> <text class="diagram-label" style="fill: #22c55e;" x="34" y="105"> Fa </text> <text class="diagram-label" style="fill: #3b82f6;" x="95" y="105"> Sol </text> <text class="diagram-label" style="fill: #8b5cf6;" x="156" y="105"> La </text> <text class="diagram-label" style="fill: #ec4899;" x="217" y="105"> Si </text> <text class="diagram-label" style="fill: #ef4444;" x="278" y="105"> Do </text> <text class="diagram-label-black" x="57" y="42"> Fa# </text> <text class="diagram-label-black" x="57" y="54"> Solb </text> <text class="diagram-label-black" x="118" y="42"> Sol# </text> <text class="diagram-label-black" x="118" y="54"> Lab </text> <text class="diagram-label-black" x="179" y="42"> La# </text> <text class="diagram-label-black" x="179" y="54"> Sib </text> </svg> </section><!-- Explanation --> <section class="section-card p-6"> <h2 class="canva-text text-xl font-bold mb-3" data-template-id="explain-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: 700;">¿Cómo se repite el patrón?</h2> <p class="canva-text text-sm leading-relaxed mb-3" data-template-id="explain-text1" style="color: #475569; font-size: 16px; font-style: normal; font-weight: 400;">Un piano estándar tiene 88 teclas. El patrón de 7 teclas blancas y 5 negras (12 notas en total) se repite más de 7 veces a lo largo del teclado. Cada repetición se llama "octava".</p> <p class="canva-text text-sm leading-relaxed" data-template-id="explain-text2" style="color: #475569; font-size: 16px; font-style: normal; font-weight: 400;">Las notas suenan igual pero más agudas hacia la derecha y más graves hacia la izquierda. Reconocer los grupos de 2 y 3 teclas negras te permite orientarte inmediatamente en cualquier parte del teclado.</p> </section><!-- Virtual Piano --> <section class="section-card p-6 relative"> <h2 class="canva-text text-xl font-bold mb-2 text-center" data-template-id="virtual-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: 700;">🎹 Piano Virtual – ¡Toca las teclas!</h2> <p class="canva-text text-sm mb-5 text-center" data-template-id="virtual-desc" style="color: #64748b; font-size: 16px; font-style: normal; font-weight: 400;">Haz clic en cualquier tecla para escuchar su sonido y ver las notas volar</p> <div class="overflow-x-auto pb-2 relative" id="piano-container"> <svg class="mx-auto" id="virtual-piano" style="max-width: 100%; min-width: 400px;" viewbox="0 0 520 170"></svg> </div> </section><!-- Quiz --> <section class="section-card p-6"> <h2 class="canva-text text-xl font-bold mb-2 text-center" data-template-id="quiz-title" style="color: #1e293b; font-size: 24px; font-style: normal; font-weight: 700;">🎓 Quiz – ¿Cuánto aprendiste?</h2> <p class="canva-text text-sm mb-6 text-center" data-template-id="quiz-desc" style="color: #64748b; font-size: 16px; font-style: normal; font-weight: 400;">Responde 10 preguntas sobre el teclado del piano. ¡Demuestra lo que sabes!</p> <div id="quiz-container"></div> <div class="hidden text-center mt-6" id="quiz-result"> <p class="text-2xl font-bold mb-3" id="quiz-score"></p><button class="px-6 py-2 rounded-lg text-white font-semibold" id="quiz-restart" style="background: #6366f1;">Reiniciar Quiz</button> </div> </section> </main> <script src="/_sdk/editing_sdk.js"></script> <script> (function(){ /* ===== AUDIO ===== */ let audioCtx; const noteColors = ['#ef4444','#f97316','#eab308','#22c55e','#06b6d4','#3b82f6','#8b5cf6','#ec4899','#f43f5e','#14b8a6','#a855f7','#f59e0b','#ef4444']; const noteSymbols = ['♩','♪','♫','♬','𝅘𝅥𝅮','🎵','🎶']; function getAudioCtx() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); return audioCtx; } function playFreq(freq, el, container, evt) { const ctx = getAudioCtx(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'triangle'; osc.frequency.value = freq; gain.gain.setValueAtTime(0.38, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.2); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 1.2); el.classList.add('active'); setTimeout(() => el.classList.remove('active'), 200); spawnFlyingNote(container, evt); } function spawnFlyingNote(container, evt) { const rect = container.getBoundingClientRect(); const el = document.createElement('span'); el.className = 'flying-note'; el.textContent = noteSymbols[Math.floor(Math.random() * noteSymbols.length)]; const color = noteColors[Math.floor(Math.random() * noteColors.length)]; el.style.color = color; el.style.textShadow = '0 0 8px ' + color; el.style.left = (evt.clientX - rect.left) + 'px'; el.style.top = (evt.clientY - rect.top) + 'px'; container.appendChild(el); setTimeout(() => el.remove(), 1400); } /* Make all diagram SVGs clickable */ document.querySelectorAll('.section-card svg').forEach(svg => { const container = svg.closest('.section-card'); svg.addEventListener('pointerdown', e => { const t = e.target; if (t.dataset && t.dataset.freq) { playFreq(parseFloat(t.dataset.freq), t, container, e); } }); }); /* ===== VIRTUAL PIANO ===== */ const notes = [ {name:'Do',freq:261.63,type:'white'},{name:'Do#/Reb',freq:277.18,type:'black'}, {name:'Re',freq:293.66,type:'white'},{name:'Re#/Mib',freq:311.13,type:'black'}, {name:'Mi',freq:329.63,type:'white'},{name:'Fa',freq:349.23,type:'white'}, {name:'Fa#/Solb',freq:369.99,type:'black'},{name:'Sol',freq:392.00,type:'white'}, {name:'Sol#/Lab',freq:415.30,type:'black'},{name:'La',freq:440.00,type:'white'}, {name:'La#/Sib',freq:466.16,type:'black'},{name:'Si',freq:493.88,type:'white'}, {name:'Do²',freq:523.25,type:'white'} ]; const svg = document.getElementById('virtual-piano'); const ns = 'http://www.w3.org/2000/svg'; const ww=60,wh=155,bw=36,bh=95; let wx=10; const whites=[],blacks=[]; const whiteNames=['Do','Re','Mi','Fa','Sol','La','Si','Do²']; const wColors=['#ef4444','#f97316','#eab308','#22c55e','#3b82f6','#8b5cf6','#ec4899','#ef4444']; let wi=0; notes.forEach(n=>{if(n.type==='white'){whites.push({...n,x:wx,ci:wi});wi++;wx+=ww+3;}}); notes.forEach(n=>{ if(n.type==='black'){ const wb=notes.slice(0,notes.indexOf(n)).filter(x=>x.type==='white').length; blacks.push({...n,x:whites[wb-1].x+ww-bw/2+1.5}); } }); whites.forEach(w=>{ const r=document.createElementNS(ns,'rect'); r.setAttribute('x',w.x);r.setAttribute('y',5);r.setAttribute('width',ww);r.setAttribute('height',wh); r.setAttribute('rx',4);r.setAttribute('class','piano-key-white');r.dataset.freq=w.freq; svg.appendChild(r); const t=document.createElementNS(ns,'text'); t.setAttribute('x',w.x+ww/2);t.setAttribute('y',wh-8);t.setAttribute('text-anchor','middle'); t.setAttribute('style','font-family:DM Sans;font-size:13px;fill:'+wColors[w.ci]+';pointer-events:none;font-weight:700'); t.textContent=w.name;svg.appendChild(t); }); blacks.forEach(b=>{ const r=document.createElementNS(ns,'rect'); r.setAttribute('x',b.x);r.setAttribute('y',5);r.setAttribute('width',bw);r.setAttribute('height',bh); r.setAttribute('rx',3);r.setAttribute('class','piano-key-black');r.dataset.freq=b.freq; svg.appendChild(r); const parts=b.name.split('/'); const t1=document.createElementNS(ns,'text'); t1.setAttribute('x',b.x+bw/2);t1.setAttribute('y',bh-18);t1.setAttribute('text-anchor','middle'); t1.setAttribute('style','font-family:DM Sans;font-size:10px;fill:#fbbf24;pointer-events:none;font-weight:700'); t1.textContent=parts[0];svg.appendChild(t1); if(parts[1]){ const t2=document.createElementNS(ns,'text'); t2.setAttribute('x',b.x+bw/2);t2.setAttribute('y',bh-6);t2.setAttribute('text-anchor','middle'); t2.setAttribute('style','font-family:DM Sans;font-size:10px;fill:#fbbf24;pointer-events:none;font-weight:700'); t2.textContent=parts[1];svg.appendChild(t2); } }); const pianoContainer=document.getElementById('piano-container'); svg.addEventListener('pointerdown',e=>{ const t=e.target; if(t.dataset.freq) playFreq(parseFloat(t.dataset.freq),t,pianoContainer,e); }); /* ===== QUIZ ===== */ const questions = [ {q:'¿Cuántas teclas blancas tiene una octava completa?',o:['5','7','8','12'],a:1}, {q:'¿Cuántas teclas negras hay en una octava?',o:['3','4','5','7'],a:2}, {q:'¿Qué otro nombre tiene la tecla Do#?',o:['Mib','Reb','Fab','Solb'],a:1}, {q:'¿Cuántas teclas negras tiene el grupo de Do-Re-Mi?',o:['1','2','3','4'],a:1}, {q:'¿Cuántas teclas negras tiene el grupo de Fa-Sol-La-Si?',o:['2','3','4','5'],a:1}, {q:'¿Qué es una enarmonía?',o:['Una nota que suena diferente','Dos nombres para la misma tecla','Un tipo de acorde','Una escala musical'],a:1}, {q:'¿Cuántas notas diferentes (contando blancas y negras) hay en una octava?',o:['7','8','10','12'],a:3}, {q:'¿Qué nota está justo a la derecha de Mi?',o:['Re','Fa','Sol','Mi#'],a:1}, {q:'La#/Sib pertenece al grupo de...',o:['2 teclas negras (Do-Re-Mi)','3 teclas negras (Fa-Sol-La-Si)','Ningún grupo','Ambos grupos'],a:1}, {q:'¿Cuántas teclas tiene un piano estándar?',o:['52','66','76','88'],a:3} ]; let currentQ=0, score=0, answered=false; const container=document.getElementById('quiz-container'); const resultDiv=document.getElementById('quiz-result'); const scoreEl=document.getElementById('quiz-score'); function renderQuestion(){ answered=false; const q=questions[currentQ]; container.innerHTML=''; const counter=document.createElement('p'); counter.className='text-xs text-gray-400 mb-2'; counter.textContent='Pregunta '+(currentQ+1)+' de '+questions.length; container.appendChild(counter); const qEl=document.createElement('p'); qEl.className='font-semibold text-lg mb-4'; qEl.style.color='#1e293b'; qEl.textContent=q.q; container.appendChild(qEl); const grid=document.createElement('div'); grid.className='grid gap-3'; q.o.forEach((opt,i)=>{ const btn=document.createElement('button'); btn.type='button'; btn.className='quiz-option text-left'; btn.textContent=opt; btn.addEventListener('click',()=>selectAnswer(i,grid)); grid.appendChild(btn); }); container.appendChild(grid); } function selectAnswer(idx,grid){ if(answered) return; answered=true; const correct=questions[currentQ].a; const btns=grid.querySelectorAll('.quiz-option'); btns.forEach((b,i)=>{ b.classList.add('disabled'); if(i===correct) b.classList.add('correct'); if(i===idx && idx!==correct) b.classList.add('wrong'); }); if(idx===correct) score++; setTimeout(()=>{ currentQ++; if(currentQ<questions.length) renderQuestion(); else showResult(); },1200); } function showResult(){ container.innerHTML=''; resultDiv.classList.remove('hidden'); const pct=Math.round(score/questions.length*100); const emoji=pct>=80?'🎉':pct>=50?'👍':'💪'; scoreEl.textContent=emoji+' '+score+'/'+questions.length+' ('+pct+'%)'; scoreEl.style.color=pct>=80?'#22c55e':pct>=50?'#f97316':'#ef4444'; } document.getElementById('quiz-restart').addEventListener('click',()=>{ currentQ=0;score=0;resultDiv.classList.add('hidden');renderQuestion(); }); renderQuestion(); })(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9fa9b2c7959fec9e',t:'MTc3ODU5MTc5MS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script> </body></html>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-50882950356516500662026-05-12T04:35:52.129-07:002026-05-12T04:35:52.129-07:00Todas notas en la guitarra <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrinw8Sf6edxroxa0HcnLstR3UOWmVUXK2AYa45pPfaCUkFbD0HvI6ih1-iRK0uC2dgmMsBV7VrIA383bvukZSEeatly0eIULMqVoTqKg88NtAdm2QOcfCG0jggAkMIip6SNHY44i4h8A0K68IhRh3OWdchSEGphHPutvEoJzucuHsis_5arXEimvGKWA/s1600/ADS085U.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="509" data-original-width="2000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrinw8Sf6edxroxa0HcnLstR3UOWmVUXK2AYa45pPfaCUkFbD0HvI6ih1-iRK0uC2dgmMsBV7VrIA383bvukZSEeatly0eIULMqVoTqKg88NtAdm2QOcfCG0jggAkMIip6SNHY44i4h8A0K68IhRh3OWdchSEGphHPutvEoJzucuHsis_5arXEimvGKWA/s1600/ADS085U.jpg"/></a></div> <!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Guitarra Virtual</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;family=Fraunces:wght@700;900&amp;display=swap" rel="stylesheet"> <style> body { font-family: 'DM Sans', sans-serif; } h1, h2, h3 { font-family: 'Fraunces', serif; } .fretboard { display: grid; grid-template-columns: 60px repeat(12, 1fr); gap: 0; overflow-x: auto; } .fret-cell { border: 1px solid #444; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.1s; position: relative; font-size: 11px; color: #aaa; } .fret-cell:hover { background: rgba(255,255,255,0.1); } .fret-cell:active { background: rgba(255,255,255,0.25); } .open-cell { background: #1a1a2e; font-weight: 700; font-size: 13px; border-right: 3px solid #f5f5f5; } .string-1 .open-cell, .string-1 .fret-cell { border-bottom-color: #e53e3e; } .string-2 .open-cell, .string-2 .fret-cell { border-bottom-color: #ed8936; } .string-3 .open-cell, .string-3 .fret-cell { border-bottom-color: #ecc94b; } .string-4 .open-cell, .string-4 .fret-cell { border-bottom-color: #48bb78; } .string-5 .open-cell, .string-5 .fret-cell { border-bottom-color: #4299e1; } .string-6 .open-cell, .string-6 .fret-cell { border-bottom-color: #9f7aea; } .fly-note { position: fixed; pointer-events: none; font-weight: 900; font-size: 28px; animation: flyUp 1s ease-out forwards; z-index: 999; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } @keyframes flyUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-120px) scale(1.5); } } .dot { width: 10px; height: 10px; border-radius: 50%; background: #555; position: absolute; } </style> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js" type="text/javascript"></script> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> <script src="/_sdk/resizing_sdk.js" type="text/javascript"></script> </head> <body data-template-id="__page-root" class="min-h-screen"> <header class="text-center py-8 px-4"> <h1 data-template-id="main-title" class="canva-text text-4xl md:text-5xl mb-2"></h1> <p data-template-id="subtitle" class="canva-text text-lg opacity-80"></p> </header> <main class="max-w-5xl mx-auto px-4 pb-12"><!-- Fretboard --> <section data-template-id="fretboard-section" class="canva-section rounded-2xl p-4 md:p-6 mb-10 shadow-2xl"> <div class="flex justify-between mb-2 pl-[60px] pr-1 text-xs text-gray-400"><span></span> <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span> </div> <div id="fretboard" class="fretboard rounded-lg overflow-hidden"></div> <p data-template-id="instructions" class="canva-text text-center mt-4 text-sm opacity-70"></p> </section><!-- Tablature explanation --> <section data-template-id="tab-section" class="canva-section rounded-2xl p-6 md:p-8 shadow-xl"> <h2 data-template-id="tab-title" class="canva-text text-2xl mb-4"></h2> <p data-template-id="tab-desc" class="canva-text mb-4 leading-relaxed"></p> <div data-template-id="tab-example-bg" class="canva-card rounded-lg p-4 font-mono text-sm leading-6 overflow-x-auto"> <pre id="tab-example">e|---0---1---3---| B|---1---0-------| G|---0---0---2---| D|---2---2---0---| A|---3---3-------| E|---------------|</pre> </div> <p data-template-id="tab-explain" class="canva-text mt-4 leading-relaxed"></p> </section> </main> <script src="/_sdk/editing_sdk.js"></script> <script> const NOTE_NAMES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']; const STRING_COLORS = ['#e53e3e','#ed8936','#ecc94b','#48bb78','#4299e1','#9f7aea']; // Open string MIDI notes: E4, B3, G3, D3, A2, E2 (string 1=high E to string 6=low E) const OPEN_MIDI = [64, 59, 55, 50, 45, 40]; let audioCtx; function getAudioCtx() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); return audioCtx; } function midiToFreq(midi) { return 440 * Math.pow(2, (midi - 69) / 12); } function midiToName(midi) { return NOTE_NAMES[midi % 12] + Math.floor(midi / 12 - 1); } function playNote(midi, stringIdx, rect) { const ctx = getAudioCtx(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.value = midiToFreq(midi); gain.gain.setValueAtTime(0.4, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.2); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 1.2); // Flying note const el = document.createElement('div'); el.className = 'fly-note'; el.textContent = midiToName(midi); el.style.color = STRING_COLORS[stringIdx]; el.style.left = (rect.left + rect.width/2 - 20) + 'px'; el.style.top = (rect.top) + 'px'; document.body.appendChild(el); setTimeout(() => el.remove(), 1000); } function buildFretboard() { const fb = document.getElementById('fretboard'); for (let s = 0; s < 6; s++) { const row = document.createElement('div'); row.className = `string-${s+1}`; row.style.display = 'contents'; // Open string const open = document.createElement('div'); open.className = 'fret-cell open-cell'; open.textContent = midiToName(OPEN_MIDI[s]); open.style.color = STRING_COLORS[s]; open.addEventListener('click', (e) => playNote(OPEN_MIDI[s], s, e.target.getBoundingClientRect())); fb.appendChild(open); // Frets 1-12 for (let f = 1; f <= 12; f++) { const cell = document.createElement('div'); cell.className = 'fret-cell'; const midi = OPEN_MIDI[s] + f; cell.textContent = midiToName(midi); cell.addEventListener('click', (e) => playNote(midi, s, e.target.getBoundingClientRect())); fb.appendChild(cell); } } } buildFretboard(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9fa91b1374383ed1',t:'MTc3ODU4NTU3Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-70292822152333568082026-05-07T04:00:09.407-07:002026-05-07T04:00:09.407-07:00 <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6cpqpsJZdjWkP0MIvhrIAECNp9Wagranta7QTMYizzzq0AZ6pjXZQRdkAHzTBUxHzkREEyWP6e0Re8s48sw7b2_Ee5IPlbsRZQ3ewEKBvZD8gyMDKIMWZLlukIbBtha_Y-KeJPdz3VY9wLee6b1cCKTlIf5Fko59DNhIfZJtbvQCS8Z1iPu5jYP7PaU/s1600/Fa.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="366" data-original-width="628" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6cpqpsJZdjWkP0MIvhrIAECNp9Wagranta7QTMYizzzq0AZ6pjXZQRdkAHzTBUxHzkREEyWP6e0Re8s48sw7b2_Ee5IPlbsRZQ3ewEKBvZD8gyMDKIMWZLlukIbBtha_Y-KeJPdz3VY9wLee6b1cCKTlIf5Fko59DNhIfZJtbvQCS8Z1iPu5jYP7PaU/s1600/Fa.png"/></a></div>La tonalidad de do mayor bien explicada. Voy entendiendo como explicar mejor para mayores y pequeños. Con este método hemos dado un salto hacia arriba como presentar los estudios de piano y sobre todo la teoría musical . Poco a poco voy aprendiendo con esfuerzo y tiempo. <!doctype html> <html lang="es" class="h-full"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tonalidad de Do Mayor</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <script src="/_sdk/element_sdk.js"></script> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&amp;family=Source+Sans+3:wght@300;400;600;700&amp;display=swap" rel="stylesheet"> <style> html, body { height: 100%; margin: 0; } body { font-family: 'Source Sans 3', sans-serif; } h1, h2, h3 { font-family: 'Playfair Display', serif; } .tab-active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; box-shadow: 0 4px 15px rgba(99,102,241,0.3); } .tab-inactive { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; } .tab-inactive:hover { background: #eef2ff; border-color: #a5b4fc; } .note-btn { transition: all 0.15s; } .note-btn:active { transform: scale(0.92); } .card { background: white; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .accent-gradient { background: linear-gradient(135deg, #6366f1, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .quiz-option { transition: all 0.2s; } .quiz-option:hover { border-color: #818cf8; background: #eef2ff; } .quiz-correct { background: #dcfce7 !important; border-color: #22c55e !important; } .quiz-wrong { background: #fee2e2 !important; border-color: #ef4444 !important; } </style> <style>body { box-sizing: border-box; }</style> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> </head> <body class="h-full bg-white overflow-auto"> <div class="w-full min-h-full p-4 md:p-8 max-w-4xl mx-auto"> <header class="text-center mb-8"> <h1 id="main-title" class="text-3xl md:text-4xl font-bold accent-gradient mb-2">Tonalidad de Do Mayor</h1> <p class="text-slate-500 text-lg">Guía interactiva completa con audio</p> </header><!-- Tabs --> <nav class="flex flex-wrap gap-2 mb-8 justify-center" id="tabs"><button onclick="showTab('explicacion')" class="tab-btn px-4 py-2 rounded-full text-sm font-semibold tab-active" data-tab="explicacion">Explicación</button> <button onclick="showTab('escalas')" class="tab-btn px-4 py-2 rounded-full text-sm font-semibold tab-inactive" data-tab="escalas">Escalas</button> <button onclick="showTab('modos')" class="tab-btn px-4 py-2 rounded-full text-sm font-semibold tab-inactive" data-tab="modos">Modos</button> <button onclick="showTab('triadas')" class="tab-btn px-4 py-2 rounded-full text-sm font-semibold tab-inactive" data-tab="triadas">Tríadas</button> <button onclick="showTab('cuatriadas')" class="tab-btn px-4 py-2 rounded-full text-sm font-semibold tab-inactive" data-tab="cuatriadas">Cuatríadas</button> <button onclick="showTab('notas')" class="tab-btn px-4 py-2 rounded-full text-sm font-semibold tab-inactive" data-tab="notas">Notas</button> <button onclick="showTab('quiz')" class="tab-btn px-4 py-2 rounded-full text-sm font-semibold tab-inactive" data-tab="quiz">Quiz</button> </nav><!-- Explicación --> <section id="sec-explicacion" class="tab-content"> <div class="card"> <h2 class="text-2xl font-bold text-indigo-700 mb-4">¿Qué es la Tonalidad de Do Mayor?</h2> <div class="space-y-4 text-slate-700 leading-relaxed"> <p><strong class="text-indigo-600">Definición:</strong> La tonalidad de Do Mayor (C Major) es el sistema de organización musical que utiliza la nota <em>Do</em> como centro tonal (tónica). Todas las melodías y armonías gravitan hacia esta nota, creando sensación de reposo y resolución.</p> <p><strong class="text-indigo-600">Armadura:</strong> Do Mayor no tiene alteraciones (ni sostenidos ni bemoles). Utiliza exclusivamente las teclas blancas del piano: <span class="font-semibold">Do – Re – Mi – Fa – Sol – La – Si</span>.</p> <p><strong class="text-indigo-600">Estructura interválica:</strong> Sigue el patrón de tonos y semitonos de toda escala mayor:</p> <div class="bg-indigo-50 rounded-xl p-4 font-mono text-center text-indigo-800 font-semibold"> T – T – ST – T – T – T – ST </div> <p class="text-sm text-slate-500">(T = tono, ST = semitono. Los semitonos están entre Mi-Fa y Si-Do)</p> <p><strong class="text-indigo-600">Grados:</strong></p> <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm"><span class="bg-violet-50 px-3 py-2 rounded-lg text-center"><strong>I</strong> – Do (Tónica)</span> <span class="bg-violet-50 px-3 py-2 rounded-lg text-center"><strong>II</strong> – Re (Supertónica)</span> <span class="bg-violet-50 px-3 py-2 rounded-lg text-center"><strong>III</strong> – Mi (Mediante)</span> <span class="bg-violet-50 px-3 py-2 rounded-lg text-center"><strong>IV</strong> – Fa (Subdominante)</span> <span class="bg-violet-50 px-3 py-2 rounded-lg text-center"><strong>V</strong> – Sol (Dominante)</span> <span class="bg-violet-50 px-3 py-2 rounded-lg text-center"><strong>VI</strong> – La (Superdominante)</span> <span class="bg-violet-50 px-3 py-2 rounded-lg text-center"><strong>VII</strong> – Si (Sensible)</span> </div> <p><strong class="text-indigo-600">Carácter:</strong> Se asocia con luminosidad, pureza, alegría y simplicidad. Es la tonalidad de referencia universal para la enseñanza musical.</p> <p><strong class="text-indigo-600">Relativa menor:</strong> La menor (Am), que comparte las mismas notas pero con centro tonal en La.</p> </div> </div> </section><!-- Escalas --> <section id="sec-escalas" class="tab-content hidden"> <div class="card"> <h2 class="text-2xl font-bold text-indigo-700 mb-4">Escala de Do Mayor</h2> <p class="text-slate-600 mb-4">Haz clic en cada nota para escucharla. La escala mayor se construye con el patrón T-T-ST-T-T-T-ST.</p> <div class="flex flex-wrap gap-3 justify-center mb-6" id="scale-notes"></div><button onclick="playSequence(scaleFreqs)" class="mx-auto block bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-6 py-2 rounded-full font-semibold hover:shadow-lg transition"> <i data-lucide="play" class="inline w-4 h-4 mr-1"></i> Tocar escala completa </button> </div> </section><!-- Modos --> <section id="sec-modos" class="tab-content hidden"> <div class="card"> <h2 class="text-2xl font-bold text-indigo-700 mb-4">Modos de Do Mayor</h2> <p class="text-slate-600 mb-6">Los 7 modos se construyen comenzando en cada grado de la escala. Mismas notas, diferente centro tonal.</p> <div class="space-y-3" id="modes-list"></div> </div> </section><!-- Tríadas --> <section id="sec-triadas" class="tab-content hidden"> <div class="card"> <h2 class="text-2xl font-bold text-indigo-700 mb-4">Tríadas Diatónicas</h2> <p class="text-slate-600 mb-2"><strong>Definición:</strong> Acordes de 3 notas construidos apilando terceras sobre cada grado.</p> <div class="space-y-3 mt-4" id="triads-list"></div> </div> </section><!-- Cuatríadas --> <section id="sec-cuatriadas" class="tab-content hidden"> <div class="card"> <h2 class="text-2xl font-bold text-indigo-700 mb-4">Cuatríadas (Acordes de Séptima)</h2> <p class="text-slate-600 mb-2"><strong>Definición:</strong> Acordes de 4 notas. Se añade una séptima sobre cada tríada diatónica.</p> <div class="space-y-3 mt-4" id="seventh-list"></div> </div> </section><!-- Notas --> <section id="sec-notas" class="tab-content hidden"> <div class="card"> <h2 class="text-2xl font-bold text-indigo-700 mb-4">Todas las Notas</h2> <p class="text-slate-600 mb-4">Piano virtual con las notas de Do Mayor. Toca libremente.</p> <div class="flex flex-wrap gap-2 justify-center" id="piano-keys"></div> </div> </section><!-- Quiz --> <section id="sec-quiz" class="tab-content hidden"> <div class="card"> <h2 class="text-2xl font-bold text-indigo-700 mb-4">Quiz de Tonalidad</h2> <div id="quiz-container"></div> <div id="quiz-score" class="mt-4 text-center font-semibold text-lg text-indigo-700"></div> </div> </section> </div> <script> // Audio const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const noteNames = ['Do','Re','Mi','Fa','Sol','La','Si','Do₂']; const noteFreqs = [261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25]; const scaleFreqs = [...noteFreqs]; const colors = ['#6366f1','#8b5cf6','#a855f7','#ec4899','#f43f5e','#f97316','#eab308','#6366f1']; function playNote(freq, duration=0.4) { audioCtx.resume(); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = 'sine'; osc.frequency.value = freq; gain.gain.setValueAtTime(0.3, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration); osc.connect(gain); gain.connect(audioCtx.destination); osc.start(); osc.stop(audioCtx.currentTime + duration); } function playChord(freqs) { freqs.forEach(f => playNote(f, 1.0)); } function playSequence(freqs, interval=0.35) { freqs.forEach((f,i) => setTimeout(() => playNote(f), i * interval * 1000)); } // Build scale section const scaleContainer = document.getElementById('scale-notes'); noteNames.forEach((name, i) => { const btn = document.createElement('button'); btn.className = 'note-btn w-14 h-14 rounded-xl text-white font-bold shadow-md hover:shadow-lg'; btn.style.background = colors[i]; btn.textContent = name; btn.onclick = () => playNote(noteFreqs[i]); scaleContainer.appendChild(btn); }); // Modes const modes = [ {name:'Jónico (Mayor)', start:0, desc:'Modo natural mayor. Alegre y estable.'}, {name:'Dórico', start:1, desc:'Menor con 6ª mayor. Sonido jazzy.'}, {name:'Frigio', start:2, desc:'Menor con 2ª menor. Sonido español/flamenco.'}, {name:'Lidio', start:3, desc:'Mayor con 4ª aumentada. Luminoso, flotante.'}, {name:'Mixolidio', start:4, desc:'Mayor con 7ª menor. Blues, rock.'}, {name:'Eólico (Menor natural)', start:5, desc:'Escala menor natural. Melancólico.'}, {name:'Locrio', start:6, desc:'Disminuido. Inestable, tenso.'} ]; const modesList = document.getElementById('modes-list'); modes.forEach((m,idx) => { const freqs = []; for(let i=0;i<8;i++) freqs.push(noteFreqs[(m.start+i)%7] * (m.start+i>=7?2:1)); const div = document.createElement('div'); div.className = 'flex items-center justify-between bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-4'; div.innerHTML = `<div><span class="font-bold text-indigo-700">${idx+1}. ${m.name}</span><p class="text-sm text-slate-500">${m.desc}</p></div>`; const btn = document.createElement('button'); btn.className = 'note-btn bg-indigo-500 text-white px-3 py-1.5 rounded-full text-sm font-semibold'; btn.innerHTML = '▶ Tocar'; btn.onclick = () => playSequence(freqs); div.appendChild(btn); modesList.appendChild(div); }); // Triads const triads = [ {name:'C (Do Mayor)', notes:'Do-Mi-Sol', type:'Mayor', idx:[0,2,4]}, {name:'Dm (Re menor)', notes:'Re-Fa-La', type:'Menor', idx:[1,3,5]}, {name:'Em (Mi menor)', notes:'Mi-Sol-Si', type:'Menor', idx:[2,4,6]}, {name:'F (Fa Mayor)', notes:'Fa-La-Do', type:'Mayor', idx:[3,5,0]}, {name:'G (Sol Mayor)', notes:'Sol-Si-Re', type:'Mayor', idx:[4,6,1]}, {name:'Am (La menor)', notes:'La-Do-Mi', type:'Menor', idx:[5,0,2]}, {name:'Bdim (Si disminuido)', notes:'Si-Re-Fa', type:'Disminuido', idx:[6,1,3]} ]; const triadsList = document.getElementById('triads-list'); triads.forEach(t => { const freqs = t.idx.map((n,i) => { let f = noteFreqs[n]; if(i>0 && n<=t.idx[0]) f*=2; return f; }); const div = document.createElement('div'); div.className = 'flex items-center justify-between bg-gradient-to-r from-violet-50 to-fuchsia-50 rounded-xl p-4'; div.innerHTML = `<div><span class="font-bold text-violet-700">${t.name}</span><span class="ml-2 text-xs px-2 py-0.5 rounded-full bg-violet-200 text-violet-800">${t.type}</span><p class="text-sm text-slate-500">${t.notes}</p></div>`; const btn = document.createElement('button'); btn.className = 'note-btn bg-violet-500 text-white px-3 py-1.5 rounded-full text-sm font-semibold'; btn.innerHTML = '▶'; btn.onclick = () => playChord(freqs); div.appendChild(btn); triadsList.appendChild(div); }); // Sevenths const sevenths = [ {name:'Cmaj7', notes:'Do-Mi-Sol-Si', type:'Maj7', idx:[0,2,4,6]}, {name:'Dm7', notes:'Re-Fa-La-Do', type:'m7', idx:[1,3,5,0]}, {name:'Em7', notes:'Mi-Sol-Si-Re', type:'m7', idx:[2,4,6,1]}, {name:'Fmaj7', notes:'Fa-La-Do-Mi', type:'Maj7', idx:[3,5,0,2]}, {name:'G7', notes:'Sol-Si-Re-Fa', type:'Dom7', idx:[4,6,1,3]}, {name:'Am7', notes:'La-Do-Mi-Sol', type:'m7', idx:[5,0,2,4]}, {name:'Bm7♭5', notes:'Si-Re-Fa-La', type:'m7♭5', idx:[6,1,3,5]} ]; const seventhList = document.getElementById('seventh-list'); sevenths.forEach(t => { const freqs = t.idx.map((n,i) => { let f = noteFreqs[n]; if(i>0 && n<=t.idx[0]) f*=2; return f; }); const div = document.createElement('div'); div.className = 'flex items-center justify-between bg-gradient-to-r from-fuchsia-50 to-rose-50 rounded-xl p-4'; div.innerHTML = `<div><span class="font-bold text-fuchsia-700">${t.name}</span><span class="ml-2 text-xs px-2 py-0.5 rounded-full bg-fuchsia-200 text-fuchsia-800">${t.type}</span><p class="text-sm text-slate-500">${t.notes}</p></div>`; const btn = document.createElement('button'); btn.className = 'note-btn bg-fuchsia-500 text-white px-3 py-1.5 rounded-full text-sm font-semibold'; btn.innerHTML = '▶'; btn.onclick = () => playChord(freqs); div.appendChild(btn); seventhList.appendChild(div); }); // Piano const pianoContainer = document.getElementById('piano-keys'); const extNotes = ['Do₃','Re₃','Mi₃','Fa₃','Sol₃','La₃','Si₃','Do₄','Re₄','Mi₄','Fa₄','Sol₄','La₄','Si₄','Do₅']; const extFreqs = [130.81,146.83,164.81,174.61,196.00,220.00,246.94,261.63,293.66,329.63,349.23,392.00,440.00,493.88,523.25]; extNotes.forEach((name,i) => { const btn = document.createElement('button'); btn.className = 'note-btn w-12 h-16 md:w-14 md:h-20 rounded-lg bg-white border-2 border-indigo-200 text-xs font-bold text-indigo-700 hover:bg-indigo-100 active:bg-indigo-500 active:text-white shadow-sm'; btn.textContent = name; btn.onclick = () => playNote(extFreqs[i]); pianoContainer.appendChild(btn); }); // Quiz const questions = [ {q:'¿Cuántas alteraciones tiene Do Mayor?', opts:['Ninguna','1 sostenido','1 bemol','2 sostenidos'], correct:0}, {q:'¿Cuál es la dominante de Do Mayor?', opts:['Fa','Sol','La','Re'], correct:1}, {q:'¿Qué tipo de acorde es el II grado?', opts:['Mayor','Menor','Disminuido','Aumentado'], correct:1}, {q:'¿Cuál es la relativa menor de Do Mayor?', opts:['Mi menor','Re menor','La menor','Si menor'], correct:2}, {q:'¿Dónde están los semitonos en la escala mayor?', opts:['I-II y IV-V','III-IV y VII-VIII','II-III y V-VI','I-II y VI-VII'], correct:1}, {q:'¿Qué modo comienza en el 4º grado?', opts:['Dórico','Mixolidio','Lidio','Frigio'], correct:2}, {q:'¿Qué tipo de séptima tiene el V grado (G7)?', opts:['Mayor 7','Menor 7','Dominante 7','Disminuida 7'], correct:2}, {q:'¿Cuál es la sensible de Do Mayor?', opts:['La','Fa','Sol','Si'], correct:3} ]; let quizIdx=0, quizScore=0, answered=false; function renderQuiz() { const container = document.getElementById('quiz-container'); if(quizIdx >= questions.length) { container.innerHTML = `<div class="text-center py-8"><p class="text-2xl font-bold text-indigo-700">¡Completado!</p><p class="text-lg mt-2">Puntuación: ${quizScore}/${questions.length}</p><button onclick="resetQuiz()" class="mt-4 bg-indigo-500 text-white px-6 py-2 rounded-full font-semibold">Reiniciar</button></div>`; document.getElementById('quiz-score').textContent = ''; return; } const q = questions[quizIdx]; answered = false; container.innerHTML = `<p class="font-semibold text-slate-800 text-lg mb-4">${quizIdx+1}. ${q.q}</p><div class="grid grid-cols-1 md:grid-cols-2 gap-3">${q.opts.map((o,i)=>`<button class="quiz-option border-2 border-slate-200 rounded-xl p-3 text-left font-medium text-slate-700" onclick="checkAnswer(${i})">${o}</button>`).join('')}</div>`; document.getElementById('quiz-score').textContent = `Pregunta ${quizIdx+1} de ${questions.length} • Aciertos: ${quizScore}`; } window.checkAnswer = function(i) { if(answered) return; answered = true; const btns = document.querySelectorAll('.quiz-option'); btns[questions[quizIdx].correct].classList.add('quiz-correct'); if(i === questions[quizIdx].correct) { quizScore++; } else { btns[i].classList.add('quiz-wrong'); } setTimeout(() => { quizIdx++; renderQuiz(); }, 1200); }; window.resetQuiz = function() { quizIdx=0; quizScore=0; renderQuiz(); }; renderQuiz(); // Tabs function showTab(id) { document.querySelectorAll('.tab-content').forEach(s => s.classList.add('hidden')); document.getElementById('sec-'+id).classList.remove('hidden'); document.querySelectorAll('.tab-btn').forEach(b => { b.className = b.className.replace('tab-active','tab-inactive'); }); document.querySelector(`[data-tab="${id}"]`).className = document.querySelector(`[data-tab="${id}"]`).className.replace('tab-inactive','tab-active'); } window.showTab = showTab; // Element SDK const defaultConfig = { main_title: 'Tonalidad de Do Mayor', background_color: '#ffffff', surface_color: '#eef2ff', text_color: '#1e293b', primary_action: '#6366f1', secondary_action: '#8b5cf6', font_family: 'Playfair Display', font_size: 16 }; window.elementSdk.init({ defaultConfig, onConfigChange: async (config) => { document.getElementById('main-title').textContent = config.main_title || defaultConfig.main_title; document.body.style.backgroundColor = config.background_color || defaultConfig.background_color; document.body.style.color = config.text_color || defaultConfig.text_color; const font = config.font_family || defaultConfig.font_family; document.querySelectorAll('h1,h2,h3').forEach(el => el.style.fontFamily = `${font}, serif`); const size = config.font_size || defaultConfig.font_size; document.body.style.fontSize = size + 'px'; document.getElementById('main-title').style.fontSize = (size * 2.2) + 'px'; }, mapToCapabilities: (config) => ({ recolorables: [ { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({background_color:v}); }}, { get: () => config.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({surface_color:v}); }}, { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({text_color:v}); }}, { get: () => config.primary_action || defaultConfig.primary_action, set: (v) => { config.primary_action = v; window.elementSdk.setConfig({primary_action:v}); }}, { get: () => config.secondary_action || defaultConfig.secondary_action, set: (v) => { config.secondary_action = v; window.elementSdk.setConfig({secondary_action:v}); }} ], borderables: [], fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({font_family:v}); }}, fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (v) => { config.font_size = v; window.elementSdk.setConfig({font_size:v}); }} }), mapToEditPanelValues: (config) => new Map([ ['main_title', config.main_title || defaultConfig.main_title] ]) }); lucide.createIcons(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f7fb1a623321bae',t:'MTc3ODE1MTM0My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-91249560319296440322026-05-07T02:46:01.688-07:002026-05-07T02:47:59.042-07:00<p>&nbsp;<a href="https://1drv.ms/b/c/8f07bb15e47050d9/IQDZUHDkFbsHIICPosAAAAAAAZSgwE26uWkr5RFr9o1asL8?e=D5EWjM">Voy a repasar elmétodo Beyer . Para agilizar los dedos . Todos día tocaré al go de Beyer.</a></p><p><a href="https://1drv.ms/b/c/8f07bb15e47050d9/IQDZUHDkFbsHIICPosAAAAAAAZSgwE26uWkr5RFr9o1asL8?e=D5EWjM"><br /></a></p><h1 style="text-align: left;"><a href="https://1drv.ms/b/c/8f07bb15e47050d9/IQDZUHDkFbsHIICPosAAAAAAAZSgwE26uWkr5RFr9o1asL8?e=D5EWjM">IR AL PDF&nbsp;&nbsp;</a><a href="https://1drv.ms/b/c/8f07bb15e47050d9/IQDZUHDkFbsHIICPosAAAAAAAZSgwE26uWkr5RFr9o1asL8?e=D5EWjM">&nbsp;Pinchar el piano</a></h1><div class="separator" style="clear: both; text-align: center;"><a href="https://1drv.ms/b/c/8f07bb15e47050d9/IQDZUHDkFbsHIICPosAAAAAAAZSgwE26uWkr5RFr9o1asL8?e=D5EWjM" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="366" data-original-width="628" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZWOIzZVOy28CbTeReXm4aTUTfmgMN200SqJnPLKzS_RQyulVh0zuFuAlXTYB2jjon-9yq4M6zJBKDz-n4sOGUD0sNEk-UEFKMHl7BlIibCwURDhI5XBIma-1XmflCOjAoNrA7p-HnfmtCaBM5Cw8xt-WAz6gEoCSpeMfw7Byj5mMXogbn97Oz3aNHG4/s320/Fa.png" width="320" /></a></div><br /><p><br /></p> https://1drv.ms/b/c/8f07bb15e47050d9/IQDZUHDkFbsHIICPosAAAAAAAZSgwE26uWkr5RFr9o1asL8?e=D5EWjM <html class="h-full" lang="es"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <title>Beyer Piano Blog</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <script src="/_sdk/element_sdk.js"></script> <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&amp;family=Source+Sans+Pro:wght@400;600&amp;display=swap" rel="stylesheet"></link> <style> body { font-family: 'Source Sans Pro', sans-serif; } h1, h2, h3 { font-family: 'Merriweather', serif; } .white-key { width: 40px; height: 140px; background: #fff; border: 1.5px solid #bbb; border-radius: 0 0 5px 5px; cursor: pointer; transition: background 0.1s; } .white-key:hover, .white-key.active { background: #e0f2fe; } .black-key { width: 26px; height: 90px; background: #1e293b; border-radius: 0 0 4px 4px; cursor: pointer; position: absolute; z-index: 10; transition: background 0.1s; } .black-key:hover, .black-key.active { background: #475569; } .note-highlight { background: #fef3c7 !important; border-color: #f59e0b !important; } .exercise-note { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; margin: 3px; font-size: 14px; } </style> <style>body { box-sizing: border-box; }</style> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> </head> <body class="h-full bg-white overflow-auto"> <div class="w-full h-full bg-white"><!-- Header --> <header class="w-full py-8 px-6 border-b-4 border-amber-400"> <div class="max-w-4xl mx-auto text-center"> <p class="text-amber-600 font-semibold uppercase tracking-widest text-sm mb-2">🎹 Blog de Piano</p> <h1 class="text-4xl md:text-5xl font-black text-slate-800 leading-tight" id="main-title">Método Beyer para Piano</h1> <p class="mt-3 text-lg text-slate-500">Aprende los fundamentos con el método más clásico para principiantes</p> </div> </header> <main class="max-w-4xl mx-auto px-6 py-10 space-y-12"><!-- Qué es Beyer --> <section> <h2 class="text-2xl font-bold text-indigo-700 mb-4 flex items-center gap-2"><i class="w-6 h-6" data-lucide="book-open"></i> ¿Qué es el Método Beyer?</h2> <p class="text-slate-700 text-lg leading-relaxed mb-4">El <strong class="text-indigo-600">Método Beyer Op. 101</strong> es uno de los métodos más utilizados en el mundo para aprender piano desde cero. Fue creado por <strong>Ferdinand Beyer</strong> en el siglo XIX y contiene <strong>106 ejercicios</strong> progresivos que van desde lo más básico hasta un nivel intermedio.</p> <div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 rounded-r-lg"> <p class="text-indigo-800 font-semibold">✨ Características principales:</p> <ul class="mt-2 space-y-1 text-indigo-700"> <li>• Ejercicios graduales de dificultad progresiva</li> <li>• Enfoque en independencia de manos</li> <li>• Desarrollo de lectura musical desde el inicio</li> <li>• Ejercicios cortos y repetitivos para memorizar patrones</li> </ul> </div> </section><!-- Ejemplos de estudios --> <section> <h2 class="text-2xl font-bold text-emerald-700 mb-4 flex items-center gap-2"><i class="w-6 h-6" data-lucide="list"></i> Ejemplos de Estudios Beyer</h2> <div class="grid md:grid-cols-2 gap-4"> <div class="bg-white border-2 border-emerald-200 rounded-xl p-5 shadow-sm"> <h3 class="font-bold text-emerald-800 text-lg">Estudios 1-10</h3> <p class="text-slate-600 mt-1">Solo mano derecha. Notas Do-Sol en redondas y blancas. Posición fija de 5 dedos.</p><span class="inline-block mt-2 text-xs bg-emerald-100 text-emerald-700 px-2 py-1 rounded-full font-semibold">Nivel: Principiante</span> </div> <div class="bg-white border-2 border-emerald-200 rounded-xl p-5 shadow-sm"> <h3 class="font-bold text-emerald-800 text-lg">Estudios 11-30</h3> <p class="text-slate-600 mt-1">Se incorpora la mano izquierda con acordes simples. Negras y corcheas.</p><span class="inline-block mt-2 text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full font-semibold">Nivel: Principiante+</span> </div> <div class="bg-white border-2 border-emerald-200 rounded-xl p-5 shadow-sm"> <h3 class="font-bold text-emerald-800 text-lg">Estudios 31-60</h3> <p class="text-slate-600 mt-1">Ambas manos juntas. Escalas, arpegios básicos y cambios de posición.</p><span class="inline-block mt-2 text-xs bg-orange-100 text-orange-700 px-2 py-1 rounded-full font-semibold">Nivel: Elemental</span> </div> <div class="bg-white border-2 border-emerald-200 rounded-xl p-5 shadow-sm"> <h3 class="font-bold text-emerald-800 text-lg">Estudios 60-106</h3> <p class="text-slate-600 mt-1">Piezas melódicas completas. Dinámicas, articulación y expresión musical.</p><span class="inline-block mt-2 text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full font-semibold">Nivel: Intermedio</span> </div> </div> </section><!-- Piano Virtual --> <section> <h2 class="text-2xl font-bold text-violet-700 mb-4 flex items-center gap-2"><i class="w-6 h-6" data-lucide="music"></i> Piano Virtual - ¡Practica aquí!</h2> <p class="text-slate-600 mb-4">Haz clic en las teclas o usa el teclado <kbd class="bg-slate-200 px-2 py-0.5 rounded text-sm font-mono">A S D F G H J K</kbd> para tocar las notas Do a Do.</p> <div class="bg-slate-50 border-2 border-violet-200 rounded-2xl p-6 flex justify-center overflow-x-auto"> <div class="relative flex" id="piano" style="height: 150px;"><!-- White keys --> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="C4"> <span class="text-xs text-slate-500 font-bold">Do</span> </div> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="D4"> <span class="text-xs text-slate-500 font-bold">Re</span> </div> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="E4"> <span class="text-xs text-slate-500 font-bold">Mi</span> </div> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="F4"> <span class="text-xs text-slate-500 font-bold">Fa</span> </div> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="G4"> <span class="text-xs text-slate-500 font-bold">Sol</span> </div> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="A4"> <span class="text-xs text-slate-500 font-bold">La</span> </div> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="B4"> <span class="text-xs text-slate-500 font-bold">Si</span> </div> <div class="white-key flex flex-col justify-end items-center pb-2" data-note="C5"> <span class="text-xs text-slate-500 font-bold">Do</span> </div><!-- Black keys --> <div class="black-key" data-note="Cs4" style="left: 28px;"></div> <div class="black-key" data-note="Ds4" style="left: 68px;"></div> <div class="black-key" data-note="Fs4" style="left: 148px;"></div> <div class="black-key" data-note="Gs4" style="left: 188px;"></div> <div class="black-key" data-note="As4" style="left: 228px;"></div> </div> </div> </section><!-- Ejercicio --> <section> <h2 class="text-2xl font-bold text-rose-700 mb-4 flex items-center gap-2"><i class="w-6 h-6" data-lucide="target"></i> Ejercicio Beyer Nº 1 - Practica</h2> <p class="text-slate-600 mb-3">Toca las siguientes notas en orden con la <strong>mano derecha</strong> (dedos 1-5). Pulsa <strong>"Iniciar"</strong> y sigue la secuencia:</p> <div class="bg-rose-50 border-2 border-rose-200 rounded-xl p-6"> <div class="flex items-center justify-between mb-4"><span class="text-rose-800 font-bold text-lg">Compás 4/4 · Tempo lento</span> <button class="bg-rose-600 hover:bg-rose-700 text-white font-semibold px-5 py-2 rounded-lg transition flex items-center gap-2" id="start-exercise"><i class="w-4 h-4" data-lucide="play"></i> Iniciar</button> </div> <div class="flex flex-wrap items-center gap-1" id="exercise-notes"><span class="exercise-note bg-blue-100 text-blue-800 border-2 border-blue-300">Do</span> <span class="exercise-note bg-green-100 text-green-800 border-2 border-green-300">Re</span> <span class="exercise-note bg-yellow-100 text-yellow-800 border-2 border-yellow-300">Mi</span> <span class="exercise-note bg-orange-100 text-orange-800 border-2 border-orange-300">Fa</span> <span class="exercise-note bg-red-100 text-red-800 border-2 border-red-300">Sol</span> <span class="exercise-note bg-red-100 text-red-800 border-2 border-red-300">Sol</span> <span class="exercise-note bg-orange-100 text-orange-800 border-2 border-orange-300">Fa</span> <span class="exercise-note bg-yellow-100 text-yellow-800 border-2 border-yellow-300">Mi</span> <span class="exercise-note bg-green-100 text-green-800 border-2 border-green-300">Re</span> <span class="exercise-note bg-blue-100 text-blue-800 border-2 border-blue-300">Do</span> </div> <p class="mt-4 text-sm text-rose-600 font-medium">💡 Dedos: 1(pulgar)=Do, 2(índice)=Re, 3(medio)=Mi, 4(anular)=Fa, 5(meñique)=Sol</p> </div><!-- Ejercicio 2 --> <div class="mt-6 bg-amber-50 border-2 border-amber-200 rounded-xl p-6"> <h3 class="text-amber-800 font-bold text-lg mb-2">Ejercicio Beyer Nº 2 - Saltos</h3> <p class="text-slate-600 mb-3">Practica saltos entre notas alternas:</p> <div class="flex flex-wrap items-center gap-1"><span class="exercise-note bg-blue-100 text-blue-800 border-2 border-blue-300">Do</span> <span class="exercise-note bg-yellow-100 text-yellow-800 border-2 border-yellow-300">Mi</span> <span class="exercise-note bg-red-100 text-red-800 border-2 border-red-300">Sol</span> <span class="exercise-note bg-yellow-100 text-yellow-800 border-2 border-yellow-300">Mi</span> <span class="exercise-note bg-blue-100 text-blue-800 border-2 border-blue-300">Do</span> <span class="exercise-note bg-green-100 text-green-800 border-2 border-green-300">Re</span> <span class="exercise-note bg-orange-100 text-orange-800 border-2 border-orange-300">Fa</span> <span class="exercise-note bg-red-100 text-red-800 border-2 border-red-300">Sol</span> <span class="exercise-note bg-orange-100 text-orange-800 border-2 border-orange-300">Fa</span> <span class="exercise-note bg-green-100 text-green-800 border-2 border-green-300">Re</span> </div> </div> </section><!-- Consejos --> <section class="pb-10"> <h2 class="text-2xl font-bold text-teal-700 mb-4 flex items-center gap-2"><i class="w-6 h-6" data-lucide="lightbulb"></i> Consejos para Estudiar Beyer</h2> <div class="space-y-3"> <div class="flex gap-3 items-start bg-teal-50 p-4 rounded-lg"><span class="text-2xl">🎯</span> <p class="text-slate-700"><strong class="text-teal-700">Practica despacio:</strong> Es mejor tocar lento y sin errores que rápido con fallos.</p> </div> <div class="flex gap-3 items-start bg-teal-50 p-4 rounded-lg"><span class="text-2xl">🔄</span> <p class="text-slate-700"><strong class="text-teal-700">Repite cada ejercicio 5 veces:</strong> La repetición construye memoria muscular.</p> </div> <div class="flex gap-3 items-start bg-teal-50 p-4 rounded-lg"><span class="text-2xl">👐</span> <p class="text-slate-700"><strong class="text-teal-700">Manos separadas primero:</strong> Domina cada mano antes de juntarlas.</p> </div> </div> </section> </main> </div> <script> // Audio context for piano let audioCtx; function getAudioCtx() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); return audioCtx; } const frequencies = { C4: 261.63, Cs4: 277.18, D4: 293.66, Ds4: 311.13, E4: 329.63, F4: 349.23, Fs4: 369.99, G4: 392.00, Gs4: 415.30, A4: 440.00, As4: 466.16, B4: 493.88, C5: 523.25 }; function playNote(note) { const ctx = getAudioCtx(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.value = frequencies[note]; gain.gain.setValueAtTime(0.5, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.8); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 0.8); } // Piano click document.querySelectorAll('[data-note]').forEach(key => { key.addEventListener('mousedown', () => { playNote(key.dataset.note); key.classList.add('active'); setTimeout(() => key.classList.remove('active'), 200); }); }); // Keyboard mapping const keyMap = { a:'C4', s:'D4', d:'E4', f:'F4', g:'G4', h:'A4', j:'B4', k:'C5' }; document.addEventListener('keydown', e => { const note = keyMap[e.key.toLowerCase()]; if (note) { playNote(note); const el = document.querySelector(`[data-note="${note}"]`); if (el) { el.classList.add('active'); setTimeout(() => el.classList.remove('active'), 200); } } }); // Exercise playback const exerciseSeq = ['C4','D4','E4','F4','G4','G4','F4','E4','D4','C4']; document.getElementById('start-exercise').addEventListener('click', () => { const notes = document.querySelectorAll('#exercise-notes .exercise-note'); let i = 0; const interval = setInterval(() => { notes.forEach(n => n.style.transform = ''); if (i > 0) notes[i-1].style.transform = ''; if (i >= exerciseSeq.length) { clearInterval(interval); return; } notes[i].style.transform = 'scale(1.3)'; playNote(exerciseSeq[i]); // Highlight piano key const key = document.querySelector(`[data-note="${exerciseSeq[i]}"]`); if (key) { key.classList.add('active'); setTimeout(() => key.classList.remove('active'), 400); } i++; }, 700); }); // Element SDK const defaultConfig = { blog_title: 'Método Beyer para Piano', background_color: '#ffffff', text_color: '#1e293b', accent_color: '#6366f1', surface_color: '#f8fafc', action_color: '#e11d48', font_family: 'Merriweather', font_size: 16 }; function applyConfig(config) { const title = document.getElementById('main-title'); if (title) title.textContent = config.blog_title || defaultConfig.blog_title; document.body.style.backgroundColor = config.background_color || defaultConfig.background_color; document.body.style.color = config.text_color || defaultConfig.text_color; const font = config.font_family || defaultConfig.font_family; document.querySelectorAll('h1,h2,h3').forEach(el => el.style.fontFamily = `${font}, serif`); } window.elementSdk.init({ defaultConfig, onConfigChange: async (config) => applyConfig(config), mapToCapabilities: (config) => ({ recolorables: [ { get: () => config.background_color || defaultConfig.background_color, set: v => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); }}, { get: () => config.surface_color || defaultConfig.surface_color, set: v => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); }}, { get: () => config.text_color || defaultConfig.text_color, set: v => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); }}, { get: () => config.accent_color || defaultConfig.accent_color, set: v => { config.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); }}, { get: () => config.action_color || defaultConfig.action_color, set: v => { config.action_color = v; window.elementSdk.setConfig({ action_color: v }); }} ], borderables: [], fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: v => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); }}, fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: v => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); }} }), mapToEditPanelValues: (config) => new Map([ ['blog_title', config.blog_title || defaultConfig.blog_title] ]) }); lucide.createIcons(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f7f3f905294ec87',t:'MTc3ODE0NjY3MC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-62220868800058485452026-05-07T01:50:45.432-07:002026-05-07T03:31:57.062-07:00 <html lang="es"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <title>Domenico Alberti - Bajo de Alberti</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <script src="/_sdk/element_sdk.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Lora:wght@400;600&display=swap'); * { font-family: 'Lora', serif; } .title-font { font-family: 'Cormorant Garamond', serif; } html, body { height: 100%; background: linear-gradient(135deg, #f5f1e8 0%, #ede8e0 100%); } .app-wrapper { height: 100%; width: 100%; } .musical-note-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.08; pointer-events: none; overflow: hidden; } .note { position: absolute; color: #8b7355; font-size: 48px; animation: float 8s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; } 50% { transform: translateY(-30px) rotate(15deg); opacity: 0.1; } } .alberti-pattern { display: flex; gap: 8px; justify-content: center; align-items: flex-end; } .note-bar { width: 12px; background: linear-gradient(to top, #c9956f, #d4a574); border-radius: 2px; box-shadow: 0 4px 12px rgba(201, 149, 111, 0.3); animation: pulse 0.6s infinite; } .note-bar:nth-child(1) { height: 20px; animation-delay: 0s; } .note-bar:nth-child(2) { height: 40px; animation-delay: 0.15s; } .note-bar:nth-child(3) { height: 30px; animation-delay: 0.3s; } .note-bar:nth-child(4) { height: 40px; animation-delay: 0.45s; } @keyframes pulse { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.8); opacity: 0.7; } } .card-gold { background: linear-gradient(135deg, rgba(201, 149, 111, 0.15), rgba(212, 165, 116, 0.1)); border: 1px solid rgba(201, 149, 111, 0.4); } .portrait-frame { border: 8px solid #8b6f47; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(201, 149, 111, 0.2); background: #e8dcc8; position: relative; } .portrait-frame::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 30%, rgba(201, 149, 111, 0.08) 100%); pointer-events: none; } .timeline { position: relative; padding-left: 40px; } .timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #8b6f47, transparent); } .timeline-item { margin-bottom: 24px; position: relative; } .timeline-item::before { content: ''; position: absolute; left: -40px; top: 4px; width: 12px; height: 12px; background: #8b6f47; border-radius: 50%; box-shadow: 0 0 12px rgba(139, 111, 71, 0.4); } </style> <style>body { box-sizing: border-box; }</style> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> </head> <body> <div class="app-wrapper overflow-auto"> <div class="musical-note-bg"> <div class="note" style="animation-delay: 0s; left: 5%; top: 10%;"> ♪ </div> <div class="note" style="animation-delay: 2s; right: 8%; top: 30%;"> ♫ </div> <div class="note" style="animation-delay: 4s; left: 10%; top: 60%;"> ♪ </div> <div class="note" style="animation-delay: 6s; bottom: 20%; right: 12%;"> ♫ </div> </div> <div class="relative z-10"> <!-- Header --> <div class="bg-gradient-to-b from-amber-50 to-transparent pt-12 pb-8"> <div class="max-w-6xl mx-auto px-6"> <h1 class="title-font text-5xl font-bold text-amber-900 mb-2 text-center">Domenico Alberti</h1> <p class="text-amber-800 text-center text-lg">Venecia, c. 1710 – 1740</p> </div> </div><!-- Main Content --> <div class="max-w-6xl mx-auto px-6 py-12 space-y-12"> <!-- Portrait Section --> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <!-- SVG Portrait --> <div class="flex justify-center"> <div class="portrait-frame w-72 h-96 flex items-center justify-center"> <svg class="w-full h-full p-4" viewbox="0 0 200 280"> <!-- Background --> <rect fill="#f5e6d3" height="280" width="200"> <!-- Hair --> <path d="M 50 60 Q 50 40 100 40 Q 150 40 150 60 L 150 90 Q 100 100 50 90 Z" fill="#6b5344"> <!-- Face --> <ellipse cx="100" cy="110" fill="#d4b896" rx="35" ry="40"> <!-- Forehead line --> <path d="M 70 75 Q 100 70 130 75" fill="none" opacity="0.5" stroke-width="0.5" stroke="#c99070"> <!-- Eyes --> <circle cx="85" cy="105" fill="#5c3d2e" r="4"> <circle cx="115" cy="105" fill="#5c3d2e" r="4"> <circle cx="86" cy="104" fill="#ffffff" r="1.5"> <circle cx="116" cy="104" fill="#ffffff" r="1.5"> <!-- Eyebrows --> <path d="M 78 98 Q 85 96 92 98" fill="none" stroke-width="1" stroke="#6b5344"> <path d="M 108 98 Q 115 96 122 98" fill="none" stroke-width="1" stroke="#6b5344"> <!-- Nose --> <path d="M 100 105 L 100 125" fill="none" stroke-width="1" stroke="#c99070"> <path d="M 98 125 L 102 125" fill="none" stroke-width="0.8" stroke="#c99070"> <!-- Mouth --> <path d="M 85 140 Q 100 148 115 140" fill="none" stroke-width="1" stroke="#b8705a"> <!-- Cheeks --> <circle cx="70" cy="115" fill="#e8a878" opacity="0.4" r="3"> <circle cx="130" cy="115" fill="#e8a878" opacity="0.4" r="3"> <!-- Neck --> <rect fill="#d4b896" height="15" width="20" x="90" y="145"> <!-- Cravat/Collar --> <path d="M 85 160 L 80 155 L 95 150 L 100 155 L 105 150 L 120 155 L 115 160" fill="#f5deb3" stroke-width="1" stroke="#8b6f47"> <!-- Coat --> <path d="M 70 165 Q 70 200 80 250 L 120 250 Q 130 200 130 165 Z" fill="#5c4033" stroke-width="1" stroke="#8b6f47"> <!-- Coat details --> <circle cx="80" cy="180" fill="#8b6f47" r="2"> <circle cx="90" cy="185" fill="#8b6f47" r="2"> <circle cx="100" cy="188" fill="#8b6f47" r="2"> <circle cx="110" cy="185" fill="#8b6f47" r="2"> <circle cx="120" cy="180" fill="#8b6f47" r="2"> <!-- Highlight --> <ellipse cx="90" cy="95" fill="#ffffff" opacity="0.15" rx="8" ry="12"> </ellipse></circle></circle></circle></circle></circle></path></path></rect></circle></circle></path></path></path></path></path></circle></circle></circle></circle></path></ellipse></path></rect></svg> </div> </div><!-- Biography --> <div class="space-y-6"> <div class="card-gold p-6 rounded-lg"> <h2 class="title-font text-2xl font-bold text-amber-900 mb-4">Compositor Veneciano</h2> <p class="text-gray-800 leading-relaxed">Domenico Alberti fue un compositor, cantante y clavecinista italiano cuya carrera, aunque breve, dejó un legado musical duradero. Nacido en Venecia alrededor de 1710, fue alumno del maestro Antonio Lotti.</p> <p class="text-gray-800 leading-relaxed mt-3">Su obra incluye sonatas para clave, óperas y canciones. Aunque murió prematuramente alrededor de 1740, su nombre quedó inmortalizado en la historia de la música a través del <strong class="text-amber-900">"bajo de Alberti"</strong>.</p> </div> <div class="timeline"> <div class="timeline-item"> <p class="text-amber-900 font-semibold">c. 1710</p> <p class="text-gray-700">Nacimiento en Venecia</p> </div> <div class="timeline-item"> <p class="text-amber-900 font-semibold">1730s</p> <p class="text-gray-700">Compone sonatas para clave</p> </div> <div class="timeline-item"> <p class="text-amber-900 font-semibold">1740</p> <p class="text-gray-700">Muerte, alrededor de los 30 años</p> </div> </div> </div> </div><!-- Bajo de Alberti Section --> <div class="card-gold p-8 rounded-lg"> <h2 class="title-font text-3xl font-bold text-amber-900 mb-6 text-center">El Bajo de Alberti</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <!-- Explanation --> <div class="space-y-4"> <p class="text-gray-800 leading-relaxed">El <strong class="text-amber-900">bajo de Alberti</strong> es un patrón de acompañamiento que se popularizó enormemente en la música del período clásico. Se trata de un arpegio que rompe un acorde en una secuencia repetitiva.</p> <div class="bg-white bg-opacity-50 p-4 rounded border-l-4 border-amber-700"> <p class="text-amber-900 font-semibold mb-2">Patrón típico en Do Mayor:</p> <p class="text-amber-800 font-mono text-lg">Do - Sol - Mi - Sol</p> <p class="text-gray-600 text-sm mt-2">(Primera nota - Quinta nota - Tercera nota - Quinta nota)</p> </div> <p class="text-gray-800 leading-relaxed">Este patrón fue usado extensamente por los grandes compositores clásicos como <strong class="text-amber-900">Mozart, Haydn y Beethoven</strong>. Proporciona un acompañamiento elegante, fluido y rítmico que mantiene la música en movimiento constante.</p> </div><!-- Visual Animation --> <div class="flex flex-col items-center justify-center space-y-8"> <div> <p class="text-amber-900 text-center font-semibold mb-4">Visualización del Patrón</p> <div class="alberti-pattern"> <div class="note-bar"></div> <div class="note-bar"></div> <div class="note-bar"></div> <div class="note-bar"></div> </div> </div> <div class="bg-white bg-opacity-50 p-6 rounded w-full"> <p class="text-amber-900 text-sm font-semibold mb-3">Notación Musical:</p> <div class="font-mono text-amber-800 space-y-1 text-sm"> <p>Do ─┐</p> <p>Sol ┤</p> <p>Mi ┤ Arpegio</p> <p>Sol ┘</p> </div> </div> </div> </div><!-- Usage Info --> <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-white bg-opacity-50 p-4 rounded text-center"> <p class="text-amber-800 font-bold text-lg">Elegancia</p> <p class="text-gray-700 text-sm mt-2">Proporciona movimiento constante sin ser excesivo</p> </div> <div class="bg-white bg-opacity-50 p-4 rounded text-center"> <p class="text-amber-800 font-bold text-lg">Versátil</p> <p class="text-gray-700 text-sm mt-2">Se adapta a diferentes acordes y tonalidades</p> </div> <div class="bg-white bg-opacity-50 p-4 rounded text-center"> <p class="text-amber-800 font-bold text-lg">Duradero</p> <p class="text-gray-700 text-sm mt-2">Sigue siendo utilizado en composiciones modernas</p> </div> </div> </div><!-- Legacy --> <div class="card-gold p-8 rounded-lg text-center"> <h2 class="title-font text-2xl font-bold text-amber-900 mb-4">Legado Musical</h2> <p class="text-gray-800 leading-relaxed max-w-3xl mx-auto">Aunque Domenico Alberti vivió solo 30 años, su contribución a la música fue inmensa. El bajo de Alberti se convirtió en uno de los patrones de acompañamiento más reconocibles y utilizados en la historia de la música clásica, siendo un puente entre el Barroco tardío y el elegante estilo galante que caracterizó el período clásico.</p> </div> </div> </div> </div> <script> const defaultConfig = { title: "Domenico Alberti" }; const config = { ...defaultConfig }; window.elementSdk.init({ defaultConfig, onConfigChange: async (newConfig) => { config.title = newConfig.title || defaultConfig.title; }, mapToCapabilities: () => ({ recolorables: [], borderables: [], fontEditable: undefined, fontSizeable: undefined }), mapToEditPanelValues: () => new Map([]) }); lucide.createIcons(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f7f1b43d7481bae',t:'MTc3ODE0NTE4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html> <p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirf1JdLrdlM7n1QVJd4AvJ859AZetwKMpmJhvI0rcBUxmWrMMr9Z-uNIuTeOJN-80zcmmXSgdaeUL3Xzjjn-bcNaOT-TlzMQnx2clrMc0ck1_5QRnIPrEdNvp7qcekzWFGiml0ZbIM0QR-7iMnGW6x5IcLRQvJ5yeGqQnyyhsMCupaYQpsp2XzmBFF1nM/s450/Domenico_Alberti-min.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="450" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirf1JdLrdlM7n1QVJd4AvJ859AZetwKMpmJhvI0rcBUxmWrMMr9Z-uNIuTeOJN-80zcmmXSgdaeUL3Xzjjn-bcNaOT-TlzMQnx2clrMc0ck1_5QRnIPrEdNvp7qcekzWFGiml0ZbIM0QR-7iMnGW6x5IcLRQvJ5yeGqQnyyhsMCupaYQpsp2XzmBFF1nM/s320/Domenico_Alberti-min.webp" width="320" /></a></div><br /><p><br /></p><p><br /></p><p>El bajo Alberti. Explicación.&nbsp;</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7RVynfuY9Y74N2t8PuzL3b-3JGFXHmSp3ALTwNXbvQq52DuvLJ0SdOYfZbuUl9Z_m3HhgAV-Ialx6SvwR1fsKeqXhf6R2q2zYM7zqzcK38OGLDDeCp5v3jZ6dvINfcOqTD-RBoyK9ADDd6SAWSf1XRbY6Tfe6hpgzB10rz7QCnBownKccDJ-m81KSNE/s1058/7.bmp" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="261" data-original-width="1058" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7RVynfuY9Y74N2t8PuzL3b-3JGFXHmSp3ALTwNXbvQq52DuvLJ0SdOYfZbuUl9Z_m3HhgAV-Ialx6SvwR1fsKeqXhf6R2q2zYM7zqzcK38OGLDDeCp5v3jZ6dvINfcOqTD-RBoyK9ADDd6SAWSf1XRbY6Tfe6hpgzB10rz7QCnBownKccDJ-m81KSNE/s320/7.bmp" width="320" /></a></div><br /><p><br /></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="403" src="https://www.youtube.com/embed/WsqmZ-hdFF0" width="485" youtube-src-id="WsqmZ-hdFF0"></iframe></div><br /><p><br /></p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-1pUdMwcACLBmUbv0ZsYFpvyat60mQDrtXPAgf3uHQpuOzH4_FOj_ZHF0d-dc9ATbejLg5WHuoCTxLzxfQKBEP2STgUO5hSymFaWA-NeXoNwu28oqFJtbpZMlCRfuLZCCbQr7q2IVyhnAoJ2q5Ge8visoozXXZP5rAyIBqslkFnIhrp166f9jq2aaQE/s1058/6.bmp" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="261" data-original-width="1058" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-1pUdMwcACLBmUbv0ZsYFpvyat60mQDrtXPAgf3uHQpuOzH4_FOj_ZHF0d-dc9ATbejLg5WHuoCTxLzxfQKBEP2STgUO5hSymFaWA-NeXoNwu28oqFJtbpZMlCRfuLZCCbQr7q2IVyhnAoJ2q5Ge8visoozXXZP5rAyIBqslkFnIhrp166f9jq2aaQE/s320/6.bmp" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="435" src="https://www.youtube.com/embed/mi175VhJk84" width="523" youtube-src-id="mi175VhJk84"></iframe></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><p><br /></p> <html class="h-full"> <head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <title>Bajo Alberti - Piano Virtual</title> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <script src="/_sdk/element_sdk.js"></script> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Nunito:wght@400;600;700&amp;display=swap" rel="stylesheet"></link> <style> html, body { height: 100%; margin: 0; } body { font-family: 'Nunito', sans-serif; } h1, h2, h3 { font-family: 'DM Serif Display', serif; } .key-white { width: 44px; height: 180px; border: 1px solid #c4b5a0; border-radius: 0 0 6px 6px; cursor: pointer; transition: all 0.1s; position: relative; } .key-white:active, .key-white.active { background: #e8dcc8 !important; transform: translateY(2px); } .key-black { width: 28px; height: 110px; background: #2d2520; border-radius: 0 0 4px 4px; cursor: pointer; position: absolute; z-index: 10; margin-left: -14px; transition: all 0.1s; } .key-black:active, .key-black.active { background: #4a3f38; transform: translateY(2px); } .note-label { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #8b7355; font-weight: 600; pointer-events: none; } .window-panel { background: #faf7f2; border: 2px solid #d4c4a8; border-radius: 12px; box-shadow: 0 8px 32px rgba(45,37,32,0.12); } .window-header { background: #3d3228; color: #faf7f2; padding: 10px 16px; border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: space-between; } .tab-btn { padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; } .tab-btn.active { background: #3d3228; color: #faf7f2; } .tab-btn:not(.active) { background: transparent; color: #5c4a3a; } .tab-btn:not(.active):hover { background: #e8dcc8; } .pattern-note { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 700; font-size: 13px; margin: 3px; transition: all 0.3s; } .pattern-note.highlight { transform: scale(1.3); box-shadow: 0 0 12px rgba(180,120,60,0.5); } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } } .playing-indicator { animation: pulse 0.5s infinite; } </style> <style>body { box-sizing: border-box; }</style> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> </head> <body class="h-full overflow-auto" style="background: linear-gradient(135deg, #f5f0e8 0%, #ebe3d5 50%, #e0d5c3 100%);"> <div class="w-full h-full flex flex-col p-4 md:p-6 gap-4"><!-- Header --> <header class="text-center"> <h1 class="text-3xl md:text-4xl text-[#3d3228] mb-1" id="main-title">Bajo Alberti - Piano Virtual</h1> <p class="text-[#8b7355] text-sm">Aprende el patrón de acompañamiento más usado en música clásica</p> </header><!-- Tabs --> <nav class="flex justify-center gap-2 flex-wrap" role="tablist"><button class="tab-btn active" data-tab="info" role="tab">📖 ¿Qué es?</button> <button class="tab-btn" data-tab="patterns" role="tab">🎵 Patrones</button> <button class="tab-btn" data-tab="practice" role="tab">🎹 Practica</button> </nav><!-- Content Windows --> <main class="flex-1 flex flex-col gap-4 min-h-0"><!-- Window: Info --> <div class="window-panel flex-1 flex flex-col" id="win-info"> <div class="window-header"><span class="font-bold">📖 ¿Qué es el Bajo Alberti?</span> </div> <div class="p-5 overflow-auto flex-1 space-y-4"> <div class="bg-[#f0ebe0] rounded-lg p-4 border-l-4 border-[#b47840]"> <h3 class="text-lg text-[#3d3228] mb-2">Definición</h3> <p class="text-[#5c4a3a] text-sm leading-relaxed">El <strong>bajo Alberti</strong> es un patrón de acompañamiento donde los acordes se tocan como arpegios en un orden específico: <strong>nota grave → aguda → media → aguda</strong>. Recibe su nombre del compositor italiano Domenico Alberti (1710-1740).</p> </div> <div class="bg-[#f0ebe0] rounded-lg p-4 border-l-4 border-[#6b8f71]"> <h3 class="text-lg text-[#3d3228] mb-2">Patrón Básico</h3> <p class="text-[#5c4a3a] text-sm mb-3">Para un acorde de Do Mayor (C-E-G):</p> <div class="flex items-center gap-2 flex-wrap"><span class="pattern-note bg-[#b47840] text-white">C</span> <span class="text-[#8b7355]">→</span> <span class="pattern-note bg-[#6b8f71] text-white">G</span> <span class="text-[#8b7355]">→</span> <span class="pattern-note bg-[#5b7ba8] text-white">E</span> <span class="text-[#8b7355]">→</span> <span class="pattern-note bg-[#6b8f71] text-white">G</span> </div> <p class="text-[#8b7355] text-xs mt-3">Grave → Aguda → Media → Aguda (se repite)</p> </div> <div class="bg-[#f0ebe0] rounded-lg p-4 border-l-4 border-[#5b7ba8]"> <h3 class="text-lg text-[#3d3228] mb-2">Compositores Famosos</h3> <p class="text-[#5c4a3a] text-sm">Mozart, Haydn y Beethoven usaron extensivamente el bajo Alberti en sus sonatas para piano. Escucha la <em>Sonata Fácil K.545</em> de Mozart para un ejemplo clásico.</p> </div> </div> </div><!-- Window: Patterns --> <div class="window-panel flex-1 flex-col hidden" id="win-patterns"> <div class="window-header"><span class="font-bold">🎵 Ejemplos de Patrones</span> </div> <div class="p-5 overflow-auto flex-1 space-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="bg-[#f0ebe0] rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onclick="playPattern('C')"> <h3 class="text-[#3d3228] font-bold mb-2">Do Mayor (C)</h3> <div class="flex items-center gap-1 mb-2" id="pat-C"><span class="pattern-note bg-[#b47840] text-white text-xs">C</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">G</span> <span class="pattern-note bg-[#5b7ba8] text-white text-xs">E</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">G</span> </div> <p class="text-xs text-[#8b7355]">▶ Clic para escuchar</p> </div> <div class="bg-[#f0ebe0] rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onclick="playPattern('F')"> <h3 class="text-[#3d3228] font-bold mb-2">Fa Mayor (F)</h3> <div class="flex items-center gap-1 mb-2" id="pat-F"><span class="pattern-note bg-[#b47840] text-white text-xs">F</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">C</span> <span class="pattern-note bg-[#5b7ba8] text-white text-xs">A</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">C</span> </div> <p class="text-xs text-[#8b7355]">▶ Clic para escuchar</p> </div> <div class="bg-[#f0ebe0] rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onclick="playPattern('G')"> <h3 class="text-[#3d3228] font-bold mb-2">Sol Mayor (G)</h3> <div class="flex items-center gap-1 mb-2" id="pat-G"><span class="pattern-note bg-[#b47840] text-white text-xs">G</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">D</span> <span class="pattern-note bg-[#5b7ba8] text-white text-xs">B</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">D</span> </div> <p class="text-xs text-[#8b7355]">▶ Clic para escuchar</p> </div> <div class="bg-[#f0ebe0] rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow" onclick="playPattern('Am')"> <h3 class="text-[#3d3228] font-bold mb-2">La menor (Am)</h3> <div class="flex items-center gap-1 mb-2" id="pat-Am"><span class="pattern-note bg-[#b47840] text-white text-xs">A</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">E</span> <span class="pattern-note bg-[#5b7ba8] text-white text-xs">C</span> <span class="pattern-note bg-[#6b8f71] text-white text-xs">E</span> </div> <p class="text-xs text-[#8b7355]">▶ Clic para escuchar</p> </div> </div> <div class="bg-[#3d3228] text-[#faf7f2] rounded-lg p-4 text-center"><button class="bg-[#b47840] hover:bg-[#9a6535] text-white px-6 py-3 rounded-lg font-bold transition-colors" onclick="playProgression()"> ▶ Escuchar Progresión Completa (C → F → G → C) </button> </div> </div> </div><!-- Window: Practice --> <div class="window-panel flex-1 flex-col hidden" id="win-practice"> <div class="window-header"><span class="font-bold">🎹 Practica el Bajo Alberti</span> <span class="text-xs opacity-75" id="practice-status">Toca las teclas señaladas</span> </div> <div class="p-4 overflow-auto flex-1 flex flex-col items-center gap-4"> <div class="text-center"> <p class="text-[#5c4a3a] text-sm mb-2">Sigue el patrón iluminado en el piano:</p> <div class="flex gap-2 items-center justify-center flex-wrap"><span class="pattern-note bg-gray-300 text-[#3d3228] text-xs" id="step0">1: C</span> <span class="text-[#8b7355]">→</span> <span class="pattern-note bg-gray-300 text-[#3d3228] text-xs" id="step1">2: G</span> <span class="text-[#8b7355]">→</span> <span class="pattern-note bg-gray-300 text-[#3d3228] text-xs" id="step2">3: E</span> <span class="text-[#8b7355]">→</span> <span class="pattern-note bg-gray-300 text-[#3d3228] text-xs" id="step3">4: G</span> </div> </div><!-- Piano --> <div class="relative flex" id="piano"><!-- Built by JS --> </div> <p class="text-[#8b7355] text-xs text-center">Haz clic en las teclas o usa el teclado (A-K para teclas blancas)</p> </div> </div> </main> </div> <script> // Audio context let audioCtx; function getAudioCtx() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); return audioCtx; } // Note frequencies (octave 3 and 4) const FREQS = { 'C3':130.81,'D3':146.83,'E3':164.81,'F3':174.61,'G3':196.00,'A3':220.00,'B3':246.94, 'C4':261.63,'D4':293.66,'E4':329.63,'F4':349.23,'G4':392.00,'A4':440.00,'B4':493.88, 'C#3':138.59,'D#3':155.56,'F#3':185.00,'G#3':207.65,'A#3':233.08, 'C#4':277.18,'D#4':311.13,'F#4':369.99,'G#4':415.30,'A#4':466.16 }; function playNote(note, duration = 0.4) { const ctx = getAudioCtx(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.value = FREQS[note] || 261.63; gain.gain.setValueAtTime(0.3, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + duration); } // Patterns const patterns = { 'C': ['C3','G3','E3','G3'], 'F': ['F3','C4','A3','C4'], 'G': ['G3','D4','B3','D4'], 'Am': ['A3','E4','C4','E4'] }; let playingTimeout = null; function playPattern(chord) { const pat = patterns[chord]; if (!pat) return; const container = document.getElementById('pat-' + chord); const notes = container ? container.querySelectorAll('.pattern-note') : []; pat.forEach((note, i) => { setTimeout(() => { playNote(note, 0.35); if (notes[i]) { notes[i].classList.add('highlight'); setTimeout(() => notes[i].classList.remove('highlight'), 300); } }, i * 250); }); } function playProgression() { const chords = ['C','F','G','C']; chords.forEach((ch, ci) => { patterns[ch].forEach((note, ni) => { setTimeout(() => playNote(note, 0.3), (ci * 4 + ni) * 220); }); }); } // Piano builder const whiteNotes = ['C3','D3','E3','F3','G3','A3','B3','C4','D4','E4','F4','G4','A4','B4']; const blackMap = {'C3':'C#3','D3':'D#3','F3':'F#3','G3':'G#3','A3':'A#3','C4':'C#4','D4':'D#4','F4':'F#4','G4':'G#4','A4':'A#4'}; const keyboardMap = {'a':'C3','s':'D3','d':'E3','f':'F3','g':'G3','h':'A3','j':'B3','k':'C4','l':'D4'}; function buildPiano() { const piano = document.getElementById('piano'); piano.innerHTML = ''; whiteNotes.forEach((note) => { const wrapper = document.createElement('div'); wrapper.style.position = 'relative'; wrapper.style.display = 'inline-block'; const key = document.createElement('div'); key.className = 'key-white'; key.style.background = '#faf7f2'; key.dataset.note = note; key.innerHTML = `<span class="note-label">${note.replace(/\d/,'')}</span>`; key.onmousedown = () => { triggerKey(note); }; wrapper.appendChild(key); if (blackMap[note]) { const bk = document.createElement('div'); bk.className = 'key-black'; bk.dataset.note = blackMap[note]; bk.onmousedown = () => { triggerKey(blackMap[note]); }; wrapper.appendChild(bk); } piano.appendChild(wrapper); }); } function triggerKey(note) { playNote(note, 0.4); const el = document.querySelector(`[data-note="${note}"]`); if (el) { el.classList.add('active'); setTimeout(() => el.classList.remove('active'), 200); } checkPractice(note); } // Practice mode let practiceStep = 0; const practicePattern = ['C3','G3','E3','G3']; const stepColors = ['#b47840','#6b8f71','#5b7ba8','#6b8f71']; function updatePracticeUI() { for (let i = 0; i < 4; i++) { const el = document.getElementById('step' + i); if (i === practiceStep) { el.style.background = stepColors[i]; el.style.color = '#fff'; el.classList.add('playing-indicator'); } else if (i < practiceStep) { el.style.background = stepColors[i]; el.style.color = '#fff'; el.classList.remove('playing-indicator'); } else { el.style.background = '#d1d5db'; el.style.color = '#3d3228'; el.classList.remove('playing-indicator'); } } // Highlight piano key document.querySelectorAll('.key-white').forEach(k => k.style.background = '#faf7f2'); const targetNote = practicePattern[practiceStep]; const targetKey = document.querySelector(`.key-white[data-note="${targetNote}"]`); if (targetKey) targetKey.style.background = '#f0e6d0'; } function checkPractice(note) { if (document.getElementById('win-practice').classList.contains('hidden')) return; if (note === practicePattern[practiceStep]) { practiceStep++; if (practiceStep >= 4) { document.getElementById('practice-status').textContent = '🎉 ¡Perfecto! Patrón completado'; setTimeout(() => { practiceStep = 0; updatePracticeUI(); document.getElementById('practice-status').textContent = 'Toca las teclas señaladas'; }, 1500); } updatePracticeUI(); } } // Tabs document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const tab = btn.dataset.tab; document.querySelectorAll('[id^="win-"]').forEach(w => { w.classList.add('hidden'); w.classList.remove('flex'); }); const win = document.getElementById('win-' + tab); win.classList.remove('hidden'); win.classList.add('flex'); if (tab === 'practice') updatePracticeUI(); }); }); // Keyboard input document.addEventListener('keydown', (e) => { const note = keyboardMap[e.key.toLowerCase()]; if (note) triggerKey(note); }); buildPiano(); // Element SDK const defaultConfig = { main_title: 'Bajo Alberti - Piano Virtual', background_color: '#f5f0e8', surface_color: '#faf7f2', text_color: '#3d3228', primary_action_color: '#b47840', secondary_action_color: '#6b8f71', font_family: 'DM Serif Display', font_size: 16 }; window.elementSdk.init({ defaultConfig, onConfigChange: async (config) => { document.getElementById('main-title').textContent = config.main_title || defaultConfig.main_title; const bg = config.background_color || defaultConfig.background_color; document.body.style.background = `linear-gradient(135deg, ${bg} 0%, ${bg}dd 100%)`; document.querySelectorAll('.window-panel').forEach(p => p.style.background = config.surface_color || defaultConfig.surface_color); document.querySelectorAll('h1,h2,h3,.window-header span').forEach(el => el.style.color = config.text_color || defaultConfig.text_color); const font = config.font_family || defaultConfig.font_family; document.querySelectorAll('h1,h2,h3').forEach(el => el.style.fontFamily = `${font}, serif`); const size = config.font_size || defaultConfig.font_size; document.getElementById('main-title').style.fontSize = `${size * 2}px`; }, mapToCapabilities: (config) => ({ recolorables: [ { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } }, { get: () => config.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } }, { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } }, { get: () => config.primary_action_color || defaultConfig.primary_action_color, set: (v) => { config.primary_action_color = v; window.elementSdk.setConfig({ primary_action_color: v }); } }, { get: () => config.secondary_action_color || defaultConfig.secondary_action_color, set: (v) => { config.secondary_action_color = v; window.elementSdk.setConfig({ secondary_action_color: v }); } } ], borderables: [], fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); } }, fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); } } }), mapToEditPanelValues: (config) => new Map([ ['main_title', config.main_title || defaultConfig.main_title] ]) }); lucide.createIcons(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f7ef530b7e91bae',t:'MTc3ODE0MzYyNC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0tag:blogger.com,1999:blog-3474883560609495996.post-83430171361614092302026-05-06T10:44:55.278-07:002026-05-06T10:49:30.653-07:00<p>&nbsp;Nuevo estilo</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyj5d_f_vsN1gMhS4hS6ZeZYi7goqvWVhIdGkPPGbY3rsgGdAT9hif8Q7lLTW_umSW6LLABYTfyAA_Sm4oThZOaBff9Rjo9JHJW4Y3z1LNhN9XzFj33GJm9j1eDlOZg7bPlwskhZLbtKHjOq3GRASjpKL8EfFpt8czOGyeUydDvs6CglJvMKfd10f1vE/s920/escala%20re%20menor1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="586" data-original-width="920" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyj5d_f_vsN1gMhS4hS6ZeZYi7goqvWVhIdGkPPGbY3rsgGdAT9hif8Q7lLTW_umSW6LLABYTfyAA_Sm4oThZOaBff9Rjo9JHJW4Y3z1LNhN9XzFj33GJm9j1eDlOZg7bPlwskhZLbtKHjOq3GRASjpKL8EfFpt8czOGyeUydDvs6CglJvMKfd10f1vE/w482-h307/escala%20re%20menor1.jpg" width="482" /></a></div><br /><p>< <!doctype html> <html class="h-full"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com/3.4.17"></script> <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script> <script src="/_sdk/element_sdk.js"></script> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&amp;display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: 'Nunito', sans-serif; } .tab-btn.active { background: transparent; color: #6366f1; border-bottom: 3px solid #6366f1; } .piano-key-white { width: 40px; height: 160px; background: #fff; border: 1px solid #333; border-radius: 0 0 5px 5px; cursor: pointer; transition: background 0.1s; } .piano-key-white:active, .piano-key-white.pressed { background: #6366f1; } .piano-key-black { width: 26px; height: 100px; background: #1f2937; border: 1px solid #111; border-radius: 0 0 4px 4px; cursor: pointer; position: absolute; z-index: 2; transition: background 0.1s; } .piano-key-black:active, .piano-key-black.pressed { background: #6366f1; } .staff-line { height: 2px; background: #2c3e50; width: 100%; } .note-circle { width: 20px; height: 16px; background: #6366f1; border-radius: 50%; } .note-circle.hollow { background: transparent; border: 2px solid #6366f1; } .scroll-note { animation: scrollUp 2s forwards; } @keyframes scrollUp { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(-80px); } } .figure-note { display: inline-flex; align-items: flex-end; flex-direction: column; } </style> <style>body { box-sizing: border-box; }</style> <script src="/_sdk/data_sdk.js" type="text/javascript"></script> </head> <body class="h-full bg-white text-[#2c3e50] overflow-hidden"> <div class="h-full w-full flex flex-col"> <!-- Tabs --> <div class="flex overflow-x-auto bg-gradient-to-r from-[#f8fafb] to-[#ffffff] border-b border-[#e8ebf0] shrink-0 shadow-sm"> <button class="tab-btn active px-4 py-3 text-sm font-bold whitespace-nowrap" data-tab="staff">Pentagrama</button> <button class="tab-btn px-4 py-3 text-sm font-bold whitespace-nowrap" data-tab="clefs">Claves</button> <button class="tab-btn px-4 py-3 text-sm font-bold whitespace-nowrap" data-tab="notes12">12 Notas</button> <button class="tab-btn px-4 py-3 text-sm font-bold whitespace-nowrap" data-tab="piano">Piano</button> <button class="tab-btn px-4 py-3 text-sm font-bold whitespace-nowrap" data-tab="scales">Escalas</button> <button class="tab-btn px-4 py-3 text-sm font-bold whitespace-nowrap" data-tab="figures">Figuras</button> </div><!-- Content --> <div class="flex-1 overflow-auto p-4" id="content"> <!-- STAFF TAB --> <div id="tab-staff" class="tab-content"> <h2 class="text-2xl font-800 text-[#6366f1] mb-4">Pentagrama</h2> <p class="mb-4 text-sm text-[#666]">5 líneas y 4 espacios donde se escriben las notas musicales.</p> <div class="relative bg-gradient-to-br from-[#f8fafb] to-[#eef2f7] rounded-xl p-6 mb-4 border border-[#e0e5f0]"> <svg width="100%" height="200" viewbox="0 0 600 200"> <!-- 5 lines --> <line x1="20" y1="50" x2="580" y2="50" stroke="#888" stroke-width="2" /> <line x1="20" y1="75" x2="580" y2="75" stroke="#888" stroke-width="2" /> <line x1="20" y1="100" x2="580" y2="100" stroke="#888" stroke-width="2" /> <line x1="20" y1="125" x2="580" y2="125" stroke="#888" stroke-width="2" /> <line x1="20" y1="150" x2="580" y2="150" stroke="#888" stroke-width="2" /> <!-- Treble clef symbol --> <text x="30" y="120" font-size="60" fill="#6366f1" font-family="serif"> 𝄞 </text> <!-- Notes on lines: E G B D F --> <ellipse cx="150" cy="150" rx="10" ry="8" fill="#6366f1" /><line x1="160" y1="150" x2="160" y2="90" stroke="#6366f1" stroke-width="2" /> <text x="142" y="175" font-size="12" fill="#666"> Mi </text> <ellipse cx="210" cy="125" rx="10" ry="8" fill="#6366f1" /><line x1="220" y1="125" x2="220" y2="65" stroke="#6366f1" stroke-width="2" /> <text x="202" y="175" font-size="12" fill="#666"> Sol </text> <ellipse cx="270" cy="100" rx="10" ry="8" fill="#6366f1" /><line x1="280" y1="100" x2="280" y2="40" stroke="#6366f1" stroke-width="2" /> <text x="265" y="175" font-size="12" fill="#666"> Si </text> <ellipse cx="330" cy="75" rx="10" ry="8" fill="#6366f1" /><line x1="340" y1="75" x2="340" y2="15" stroke="#6366f1" stroke-width="2" /> <text x="322" y="175" font-size="12" fill="#666"> Re </text> <ellipse cx="390" cy="50" rx="10" ry="8" fill="#6366f1" /><line x1="400" y1="50" x2="400" y2="-10" stroke="#6366f1" stroke-width="2" /> <text x="382" y="175" font-size="12" fill="#666"> Fa </text> <!-- Notes in spaces: F A C E --> <ellipse cx="460" cy="137" rx="10" ry="8" fill="#10b981" /><line x1="470" y1="137" x2="470" y2="77" stroke="#10b981" stroke-width="2" /> <text x="452" y="175" font-size="12" fill="#10b981"> Fa </text> <ellipse cx="500" cy="112" rx="10" ry="8" fill="#10b981" /><line x1="510" y1="112" x2="510" y2="52" stroke="#10b981" stroke-width="2" /> <text x="492" y="175" font-size="12" fill="#10b981"> La </text> <ellipse cx="540" cy="87" rx="10" ry="8" fill="#10b981" /><line x1="550" y1="87" x2="550" y2="27" stroke="#10b981" stroke-width="2" /> <text x="532" y="175" font-size="12" fill="#10b981"> Do </text> <ellipse cx="570" cy="62" rx="10" ry="8" fill="#10b981" /><line x1="580" y1="62" x2="580" y2="2" stroke="#10b981" stroke-width="2" /> <text x="562" y="175" font-size="12" fill="#10b981"> Mi </text> </svg> <div class="flex gap-6 mt-2 text-xs"> <span class="text-[#6366f1]">● Notas en líneas: Mi Sol Si Re Fa</span> <span class="text-[#10b981]">● Notas en espacios: Fa La Do Mi</span> </div> </div> </div><!-- CLEFS TAB --> <div id="tab-clefs" class="tab-content hidden"> <h2 class="text-2xl font-800 text-[#6366f1] mb-4">Claves Musicales</h2> <div class="grid gap-4"> <div class="bg-gradient-to-br from-[#f8fafb] to-[#eef2f7] rounded-xl p-5 border border-[#e0e5f0]"> <div class="flex items-center gap-4"> <span class="text-6xl text-[#6366f1]">𝄞</span> <div> <h3 class="font-bold text-lg text-[#2c3e50]">Clave de Sol</h3> <p class="text-sm text-[#666]">Para instrumentos agudos. La 2ª línea es Sol.</p> </div> </div> </div> <div class="bg-gradient-to-br from-[#f8fafb] to-[#eef2f7] rounded-xl p-5 border border-[#e0e5f0]"> <div class="flex items-center gap-4"> <span class="text-6xl text-[#10b981]">𝄢</span> <div> <h3 class="font-bold text-lg text-[#2c3e50]">Clave de Fa</h3> <p class="text-sm text-[#666]">Para instrumentos graves. La 4ª línea es Fa.</p> </div> </div> </div> <div class="bg-gradient-to-br from-[#f8fafb] to-[#eef2f7] rounded-xl p-5 border border-[#e0e5f0]"> <div class="flex items-center gap-4"> <span class="text-6xl text-[#f59e0b]">𝄡</span> <div> <h3 class="font-bold text-lg text-[#2c3e50]">Clave de Do</h3> <p class="text-sm text-[#666]">Para instrumentos de rango medio. Do central en 3ª línea.</p> </div> </div> </div> </div> </div><!-- 12 NOTES TAB --> <div id="tab-notes12" class="tab-content hidden"> <h2 class="text-2xl font-800 text-[#6366f1] mb-4">Las 12 Notas</h2> <p class="text-sm mb-3 text-[#666]">Toca cada nota para escucharla y ver su nombre.</p> <div class="relative h-20 mb-4 flex items-center justify-center overflow-hidden bg-gradient-to-br from-[#f8fafb] to-[#eef2f7] rounded-lg border border-[#e0e5f0]" id="note-display"> <span class="text-4xl font-800 text-[#6366f1]" id="note-name-display">♪</span> </div> <div class="grid grid-cols-4 gap-3" id="notes12-grid"></div> </div><!-- PIANO TAB --> <div id="tab-piano" class="tab-content hidden"> <h2 class="text-2xl font-800 text-[#6366f1] mb-4">Piano Virtual</h2> <p class="text-sm mb-3 text-[#666]">Toca las teclas para escuchar cada nota.</p> <div class="overflow-x-auto pb-4"> <div class="relative flex" id="piano-container" style="min-width:800px;"></div> </div> </div><!-- SCALES TAB --> <div id="tab-scales" class="tab-content hidden"> <h2 class="text-2xl font-800 text-[#6366f1] mb-4">Escalas</h2> <div class="bg-gradient-to-br from-[#f8fafb] to-[#eef2f7] rounded-xl p-5 mb-4 border border-[#e0e5f0]"> <h3 class="font-bold text-[#10b981] mb-2">Escala Cromática (12 notas)</h3> <p class="text-sm mb-2 text-[#666]">Todas las notas separadas por semitonos:</p> <div class="flex flex-wrap gap-2" id="chromatic-scale"></div><button class="mt-3 bg-[#6366f1] text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-[#4f46e5] transition" id="play-chromatic">▶ Escuchar</button> </div> <div class="bg-gradient-to-br from-[#f8fafb] to-[#eef2f7] rounded-xl p-5 border border-[#e0e5f0]"> <h3 class="font-bold text-[#f59e0b] mb-2">Escala Mayor de Do</h3> <p class="text-sm mb-2 text-[#666]">Do Re Mi Fa Sol La Si Do (Tono-Tono-Semi-Tono-Tono-Tono-Semi):</p> <div class="flex flex-wrap gap-2" id="cmajor-scale"></div><button class="mt-3 bg-[#f59e0b] text-white px-4 py-2 rounded-lg text-sm font-bold hover:bg-[#d97706] transition" id="play-cmajor">▶ Escuchar</button> </div> </div><!-- FIGURES TAB --> <div id="tab-figures" class="tab-content hidden"> <h2 class="text-2xl font-800 text-[#6366f1] mb-4">Figuras Musicales</h2> <div class="grid gap-4" id="figures-grid"></div> </div> </div> </div> <script> // Audio context let audioCtx; function getAudioCtx() { if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)(); return audioCtx; } function playNote(freq, duration) { const ctx = getAudioCtx(); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.value = freq; gain.gain.setValueAtTime(0.4, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + duration); } // Note frequencies starting from C4 const noteNames = ['Do','Do#','Re','Re#','Mi','Fa','Fa#','Sol','Sol#','La','La#','Si']; const noteFreqs = [261.63,277.18,293.66,311.13,329.63,349.23,369.99,392.00,415.30,440.00,466.16,493.88]; const noteFreqsC5 = noteFreqs.map(f => f*2); // Tabs document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', () => { document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden')); document.getElementById('tab-' + btn.dataset.tab).classList.remove('hidden'); }); }); // 12 Notes grid const grid = document.getElementById('notes12-grid'); noteNames.forEach((name, i) => { const btn = document.createElement('button'); btn.className = 'bg-white border-2 border-[#6366f1] rounded-xl p-4 text-center font-bold text-lg hover:bg-[#6366f1] hover:text-white transition'; btn.textContent = name; btn.addEventListener('click', () => { playNote(noteFreqs[i], 1); const display = document.getElementById('note-name-display'); display.textContent = name; display.classList.remove('scroll-note'); void display.offsetWidth; display.classList.add('scroll-note'); setTimeout(() => { display.classList.remove('scroll-note'); display.textContent = '♪'; }, 2000); }); grid.appendChild(btn); }); // Piano - 2 octaves const pianoContainer = document.getElementById('piano-container'); const whiteNotes = [0,2,4,5,7,9,11]; // C D E F G A B indices const blackNotes = [1,3,null,6,8,10,null]; // C# D# _ F# G# A# _ function buildPiano() { // 2 octaves let html = ''; let whiteIdx = 0; for (let oct = 0; oct < 2; oct++) { const baseFreq = oct === 0 ? noteFreqs : noteFreqsC5; for (let w = 0; w < 7; w++) { const ni = whiteNotes[w]; const freq = baseFreq[ni]; const label = noteNames[ni] + (oct+4); html += `<div class="relative inline-block"><button class="piano-key-white" data-freq="${freq}" title="${label}"><span class="absolute bottom-2 left-1/2 -translate-x-1/2 text-xs text-gray-600 font-bold">${noteNames[ni]}</span></button>`; // Black key if (w < 6 && blackNotes[w] !== null) { const bi = blackNotes[w]; const bf = baseFreq[bi]; html += `<button class="piano-key-black" style="left:27px;top:0;" data-freq="${bf}" title="${noteNames[bi]}${oct+4}"></button>`; } html += '</div>'; whiteIdx++; } } pianoContainer.innerHTML = html; pianoContainer.querySelectorAll('button').forEach(btn => { btn.addEventListener('mousedown', () => { playNote(parseFloat(btn.dataset.freq), 0.8); btn.classList.add('pressed'); }); btn.addEventListener('mouseup', () => btn.classList.remove('pressed')); btn.addEventListener('mouseleave', () => btn.classList.remove('pressed')); btn.addEventListener('touchstart', (e) => { e.preventDefault(); playNote(parseFloat(btn.dataset.freq), 0.8); btn.classList.add('pressed'); }); btn.addEventListener('touchend', () => btn.classList.remove('pressed')); }); } buildPiano(); // Scales const chromaticEl = document.getElementById('chromatic-scale'); const cmajorEl = document.getElementById('cmajor-scale'); const cmajorIndices = [0,2,4,5,7,9,11,12]; // C D E F G A B C const cmajorNames = ['Do','Re','Mi','Fa','Sol','La','Si','Do']; noteNames.forEach((n,i) => { const sp = document.createElement('span'); sp.className = 'bg-white border border-[#ccc] px-3 py-1 rounded-lg text-sm font-bold text-[#2c3e50]'; sp.textContent = n; chromaticEl.appendChild(sp); }); cmajorNames.forEach(n => { const sp = document.createElement('span'); sp.className = 'bg-white border border-[#ccc] px-3 py-1 rounded-lg text-sm font-bold text-[#2c3e50]'; sp.textContent = n; cmajorEl.appendChild(sp); }); document.getElementById('play-chromatic').addEventListener('click', () => { noteFreqs.forEach((f, i) => setTimeout(() => playNote(f, 0.4), i * 400)); }); document.getElementById('play-cmajor').addEventListener('click', () => { const freqs = [261.63,293.66,329.63,349.23,392,440,493.88,523.25]; freqs.forEach((f, i) => setTimeout(() => playNote(f, 0.5), i * 500)); }); // Figures const figures = [ { name: 'Redonda', duration: 3, beats: 4, svg: '<ellipse cx="20" cy="20" rx="14" ry="10" fill="none" stroke="#6366f1" stroke-width="3"/>', desc: '4 tiempos — ta (3s)', tas: 1 }, { name: 'Blanca', duration: 1.5, beats: 2, svg: '<ellipse cx="20" cy="20" rx="14" ry="10" fill="none" stroke="#6366f1" stroke-width="3"/><line x1="34" y1="20" x2="34" y2="-15" stroke="#6366f1" stroke-width="2.5"/>', desc: '2 tiempos — ta ta (1.5s)', tas: 2 }, { name: 'Negra', duration: 0.75, beats: 1, svg: '<ellipse cx="20" cy="20" rx="14" ry="10" fill="#6366f1"/><line x1="34" y1="20" x2="34" y2="-15" stroke="#6366f1" stroke-width="2.5"/>', desc: '1 tiempo — ta ta ta ta (0.75s)', tas: 4 }, { name: 'Corchea', duration: 0.375, beats: 0.5, svg: '<ellipse cx="20" cy="20" rx="14" ry="10" fill="#6366f1"/><line x1="34" y1="20" x2="34" y2="-15" stroke="#6366f1" stroke-width="2.5"/><path d="M34,-15 Q42,-5 38,5" fill="none" stroke="#6366f1" stroke-width="2.5"/>', desc: '½ tiempo — 8 por compás (0.375s)', tas: 8 }, { name: 'Semicorchea', duration: 0.1875, beats: 0.25, svg: '<ellipse cx="20" cy="20" rx="14" ry="10" fill="#6366f1"/><line x1="34" y1="20" x2="34" y2="-15" stroke="#6366f1" stroke-width="2.5"/><path d="M34,-15 Q42,-5 38,5" fill="none" stroke="#6366f1" stroke-width="2.5"/><path d="M34,-8 Q42,2 38,12" fill="none" stroke="#6366f1" stroke-width="2.5"/>', desc: '¼ tiempo — 16 por compás (0.19s)', tas: 16 }, ]; const figuresGrid = document.getElementById('figures-grid'); figures.forEach(fig => { const div = document.createElement('div'); div.className = 'bg-[#1a1a2e] rounded-xl p-5 flex items-center gap-4'; div.innerHTML = ` <svg width="50" height="45" viewBox="0 -20 50 45">${fig.svg}</svg> <div class="flex-1"> <h3 class="font-bold text-lg">${fig.name}</h3> <p class="text-sm text-gray-400">${fig.desc}</p> <p class="text-xs text-gray-500 mt-1">${'ta '.repeat(fig.tas).trim()}</p> </div> <button class="bg-[#e94560] text-white w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg play-fig" data-dur="${fig.duration}" data-tas="${fig.tas}">▶</button> `; figuresGrid.appendChild(div); }); document.querySelectorAll('.play-fig').forEach(btn => { btn.addEventListener('click', () => { const dur = parseFloat(btn.dataset.dur); const tas = parseInt(btn.dataset.tas); for (let i = 0; i < tas; i++) { setTimeout(() => playNote(440, dur * 0.9), i * dur * 1000); } }); }); // Element SDK const defaultConfig = { app_title: 'Music Theory Explorer', background_color: '#0f0f23', surface_color: '#1a1a2e', text_color: '#e0e0e0', primary_color: '#e94560', secondary_color: '#53d8a8', font_family: 'Nunito', font_size: 16 }; window.elementSdk.init({ defaultConfig, onConfigChange: async (config) => { const bg = config.background_color || defaultConfig.background_color; const surface = config.surface_color || defaultConfig.surface_color; const text = config.text_color || defaultConfig.text_color; const primary = config.primary_color || defaultConfig.primary_color; const font = config.font_family || defaultConfig.font_family; const size = config.font_size || defaultConfig.font_size; document.body.style.background = bg; document.body.style.color = text; document.body.style.fontFamily = `${font}, sans-serif`; document.body.style.fontSize = size + 'px'; document.querySelectorAll('.bg-\\[\\#1a1a2e\\]').forEach(el => el.style.background = surface); document.querySelectorAll('.text-\\[\\#e94560\\]').forEach(el => el.style.color = primary); }, mapToCapabilities: (config) => ({ recolorables: [ { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } }, { get: () => config.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } }, { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } }, { get: () => config.primary_color || defaultConfig.primary_color, set: (v) => { config.primary_color = v; window.elementSdk.setConfig({ primary_color: v }); } }, { get: () => config.secondary_color || defaultConfig.secondary_color, set: (v) => { config.secondary_color = v; window.elementSdk.setConfig({ secondary_color: v }); } }, ], borderables: [], fontEditable: { get: () => config.font_family || defaultConfig.font_family, set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); } }, fontSizeable: { get: () => config.font_size || defaultConfig.font_size, set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); } }, }), mapToEditPanelValues: (config) => new Map([ ['app_title', config.app_title || defaultConfig.app_title] ]) }); lucide.createIcons(); </script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f79d04740ebf77f',t:'MTc3ODA4OTY4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html> Lo mejor del mundo la músicahttp://www.blogger.com/profile/12078412264719558236noreply@blogger.com0