Diseño de barra lateral fija para cuaderno de clase
Completa un diseño de barra lateral fija en un escenario de cuaderno de clase: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.
Tras activar JavaScript, puedes editar, ejecutar y guardar este ejemplo. El código fuente fijado es el siguiente:
<!doctype html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Diseño de barra lateral fija para cuaderno de clase</title>
<style>
:root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Songti SC","Noto Serif SC",Georgia,serif; background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,var(--ink) 7%,transparent) 50%,transparent 50.3%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1180px,calc(100% - 40px));margin:auto;padding:7vw 0}.mast{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,.4fr);gap:5vw;align-items:end;margin-bottom:38px}.mast h1{font-family:"Songti SC",Georgia,serif;font-weight:800;font-size:clamp(42px,9vw,92px);max-width:920px;margin:0;line-height:.94}.eyebrow{display:block;margin-bottom:14px;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.24em}.intro{max-width:58ch;line-height:1.9}.scenario{align-self:start;padding-top:10px;border-top:1px solid var(--ink);font-style:italic}.demo{border-radius:0;border-width:2px;box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 18%,transparent);position:relative;overflow:hidden;min-height:420px;padding:clamp(22px,4vw,48px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 22px);padding:26px 0}.mast{grid-template-columns:1fr}.demo{min-height:340px;padding:18px}}
.panel{padding:16px;border:3px double var(--accent);background:var(--paper)}.stack{display:grid;gap:14px}.row{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:10px;overflow:auto}.action{padding:10px 15px;border:1px solid var(--accent);background:transparent;font-family:Didot,serif;letter-spacing:.06em}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.metric{font-family:Didot,serif;font-size:clamp(36px,8vw,74px);letter-spacing:.04em}.status{min-height:24px;padding:9px;border-inline:1px solid var(--accent);text-align:center}.muted{line-height:1.8}.chip{padding:5px 14px;border-inline:1px solid var(--accent);letter-spacing:.1em}.meter{height:5px;background:var(--line)}.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--secondary))}
.composition-index{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px}.index-mark{display:grid;align-content:space-between;width:76px;padding:16px 10px;border:1px solid var(--line);color:var(--accent);background:color-mix(in srgb,var(--paper) 82%,transparent);text-align:center}.index-mark strong{font:900 34px/1 ui-monospace,monospace}.index-mark span{writing-mode:vertical-rl;font:800 10px/1.2 ui-monospace,monospace;letter-spacing:.18em}.composition-index .demo{grid-column:1;grid-row:1}.composition-index::before{content:"";position:absolute;left:-12px;top:38px;width:5px;height:45%;background:linear-gradient(var(--accent),var(--secondary))}@media(max-width:700px){.composition-index{grid-template-columns:1fr}.index-mark{grid-row:1;width:auto;grid-template-columns:auto 1fr}.index-mark span{writing-mode:horizontal-tb}.composition-index .demo{grid-row:2}}
.sticky-aside-demo{display:grid;grid-template-columns:220px 1fr;gap:20px;height:430px;overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.sticky-aside-demo>aside{position:sticky;top:0;align-self:start;padding:22px;background:var(--ink);color:var(--paper)}.sticky-aside-demo>aside h2{margin:.4em 0}.sticky-aside-demo nav{display:grid;gap:8px}.sticky-aside-demo nav a{color:inherit}.sticky-aside-demo>article{padding:12px 28px}.sticky-aside-demo section{min-height:300px;padding:30px 0;border-bottom:1px solid var(--line);line-height:1.8}@media(max-width:620px){.sticky-aside-demo{grid-template-columns:1fr}.sticky-aside-demo>aside{z-index:2}.sticky-aside-demo nav{grid-auto-flow:column;overflow:auto}}.workflow-spatial{display:grid;gap:16px}.workflow-spatial>header{display:grid;grid-template-columns:1fr minmax(170px,.35fr) minmax(170px,.35fr);gap:18px;align-items:end;padding-bottom:16px;border-bottom:5px solid var(--ink)}.workflow-spatial h2{margin:.2em 0}.workflow-spatial header label{display:grid;grid-template-columns:1fr auto;gap:7px}.workflow-spatial header input{grid-column:1/-1;width:100%}.spatial-grid{display:grid;grid-template-columns:minmax(0,var(--spatial-width)) 20px minmax(180px,1fr);gap:0;align-items:stretch}.spatial-core{min-width:0;transform:scale(var(--spatial-zoom));transform-origin:top left;transition:transform .2s}.spatial-handle{display:grid;min-height:300px;place-items:center;border:0;border-inline:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);cursor:col-resize}.spatial-grid>aside{display:grid;align-content:center;gap:14px;padding:22px;background:color-mix(in srgb,var(--secondary) 14%,var(--paper))}.spatial-grid>aside strong{font-size:clamp(24px,4vw,42px)}@media(max-width:900px){.workflow-spatial>header{grid-template-columns:1fr}.spatial-grid{order:-1;grid-template-columns:1fr}.spatial-handle{min-height:44px;cursor:row-resize}.spatial-core{transform:none}}
</style>
</head>
<body data-aesthetic="editorial" data-composition="field-index">
<main class="page">
<header class="mast"><div><span class="eyebrow">editorial / diseño con barra lateral fija / INTERMEDIATE</span><h1>Diseño de barra lateral fija para cuaderno de clase</h1><p class="intro">Completa un diseño de barra lateral fija en un escenario de cuaderno de clase: incluye contenido real, controles interactivos, retroalimentación de estado clara y un diseño adaptable a distintos tamaños.</p></div><span class="scenario">Cuaderno de clase</span></header>
<div class="composition-index"><section class="demo" aria-label="Área interactiva del diseño de barra lateral fija del cuaderno de clase"><div id="workflowSpatial" class="workflow-spatial" style="--spatial-width:64%;--spatial-zoom:1"><header><div><span class="eyebrow">Cuaderno de clase SPATIAL CANVAS</span><h2>Mesa de ajustes del cuaderno de clase</h2></div><label>Proporción del ancho del lienzo<input id="workflowSpatialWidth" type="range" min="38" max="82" value="64"><output id="workflowSpatialWidthValue">64%</output></label><label>Escala de contenido<input id="workflowSpatialZoom" type="range" min="80" max="120" value="100"><output id="workflowSpatialZoomValue">100%</output></label></header><div class="spatial-grid"><section id="workflowCore" class="workflow-core spatial-core"><!-- 11DZ_CORE_START:layouts-responsive-sticky-aside --><div class="sticky-aside-demo" data-core-bridge="layouts-responsive-sticky-aside" tabindex="0"><aside><span class="eyebrow">STICKY ASIDE</span><h2>Índice del cuaderno de clase</h2><nav><a href="#stickySection0">Registro de clase</a><a href="#stickySection1">Colaboración en cuaderno de aula</a><a href="#stickySection2">Progreso del cuaderno de clase</a><a href="#stickySection3">Recordatorio del cuaderno de clase</a></nav></aside><article id="stickyScroller" tabindex="0"><section id="stickySection0"><h3>Registro de clase</h3><p>El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor.</p></section><section id="stickySection1"><h3>Colaboración en cuaderno de aula</h3><p>El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor.</p></section><section id="stickySection2"><h3>Progreso del cuaderno de clase</h3><p>El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor.</p></section><section id="stickySection3"><h3>Recordatorio del cuaderno de clase</h3><p>El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor. El contenido desplazable sirve para observar cómo la barra lateral permanece visible dentro del contenedor.</p></section></article></div><!-- 11DZ_CORE_END --></section><input id="workflowSpatialHandle" class="spatial-handle" type="button" value="↔" aria-label="Arrastra para ajustar el ancho de la vista previa del ejemplo principal"><aside><strong>Diseño compacto de cuaderno de clase</strong><p>El diseño equilibrado y el diseño inmersivo del cuaderno de clase se reordenarán según el tamaño del lienzo.</p><output id="workflowSpatialStatus">Ancho 64%, escala 100%</output><input id="workflowSpatialApply" class="action primary" type="button" value="Diseño de la aplicación"></aside></div></div><p id="status" class="status" role="status" aria-live="polite"></p></section><aside class="index-mark" aria-hidden="true"><strong>05</strong><span>Cuaderno de clase FIELD INDEX</span></aside></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:layouts-responsive-sticky-aside */
document.querySelectorAll('.sticky-aside-demo a').forEach(link=>link.addEventListener('click',event=>{event.preventDefault();document.querySelector(link.getAttribute('href')).scrollIntoView({behavior:matchMedia('(prefers-reduced-motion:reduce)').matches?'auto':'smooth'});announce('Localizado '+link.textContent);}));
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"layouts-responsive-sticky-aside","selector":"[data-core-bridge=\"layouts-responsive-sticky-aside\"]","mode":"scroll","key":"ArrowDown"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · versión principal '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("scroll",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();const limit=Math.max(1,workflowBridgeControl.scrollHeight-workflowBridgeControl.clientHeight);workflowBridgeControl.scrollTop=workflowBridgeControl.scrollTop>0?0:Math.min(limit,72);workflowBridgeControl.dispatchEvent(new Event('scroll',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowSpatial=document.querySelector('#workflowSpatial');const workflowSpatialCore=document.querySelector('#workflowCore');const workflowSpatialWidth=document.querySelector('#workflowSpatialWidth');const workflowSpatialZoom=document.querySelector('#workflowSpatialZoom');const workflowSpatialHandle=document.querySelector('#workflowSpatialHandle');const workflowSpatialState={width:64,zoom:1,dragging:false};function workflowSpatialDrive(){workflowSpatial.style.setProperty('--spatial-width',workflowSpatialState.width+'%');workflowSpatial.style.setProperty('--spatial-zoom',String(workflowSpatialState.zoom));workflowSpatialWidth.value=String(workflowSpatialState.width);workflowSpatialZoom.value=String(Math.round(workflowSpatialState.zoom*100));document.querySelector('#workflowSpatialWidthValue').textContent=workflowSpatialState.width+'%';document.querySelector('#workflowSpatialZoomValue').textContent=Math.round(workflowSpatialState.zoom*100)+'%';document.querySelector('#workflowSpatialStatus').textContent='Ancho '+workflowSpatialState.width+'%, zoom '+Math.round(workflowSpatialState.zoom*100)+'%';announce('El lienzo de apuntes de la clase se ha reordenado');}workflowSpatialWidth.addEventListener('input',()=>{workflowSpatialState.width=Number(workflowSpatialWidth.value);workflowSpatialDrive();});workflowSpatialZoom.addEventListener('input',()=>{workflowSpatialState.zoom=Number(workflowSpatialZoom.value)/100;workflowSpatialDrive();});workflowSpatialHandle.addEventListener('pointerdown',event=>{workflowSpatialState.dragging=true;workflowSpatialHandle.setPointerCapture(event.pointerId);});workflowSpatialHandle.addEventListener('pointermove',event=>{if(!workflowSpatialState.dragging)return;const rect=workflowSpatial.getBoundingClientRect();workflowSpatialState.width=Math.max(38,Math.min(82,Math.round((event.clientX-rect.left)/rect.width*100)));workflowSpatialDrive();});workflowSpatialHandle.addEventListener('pointerup',event=>{workflowSpatialState.dragging=false;workflowSpatialHandle.releasePointerCapture(event.pointerId);});workflowSpatialHandle.addEventListener('wheel',event=>{event.preventDefault();workflowSpatialState.zoom=Math.max(.8,Math.min(1.2,workflowSpatialState.zoom+(event.deltaY<0?.05:-.05)));workflowSpatialDrive();},{passive:false});workflowSpatialHandle.addEventListener('keydown',event=>{if(!['ArrowLeft','ArrowRight'].includes(event.key))return;event.preventDefault();workflowSpatialState.width=Math.max(38,Math.min(82,workflowSpatialState.width+(event.key==='ArrowRight'?2:-2)));workflowSpatialDrive();});document.querySelector('#workflowSpatialApply').addEventListener('click',()=>{const bridge=workflowBridgeActivate();document.querySelector('#workflowSpatialStatus').textContent='Diseño aplicado · Anchura '+workflowSpatialState.width+'%, zoom '+Math.round(workflowSpatialState.zoom*100)+'% · '+bridge.summary;announce(document.querySelector('#workflowSpatialStatus').textContent);});workflowSpatialDrive();
workflowBridgeReset();
</script>
</body>
</html>