Interaction Designer, Creative Technologist, Professor and Researcher
<style>
#navegacao, #miolodinamico {
display: grid;
width: 100%;
grid-template-columns: 180px 1fr;
border: 1px solid grey;
}
#logotipo {
width: 180px;
height: 100px;
background-color: red;
}
#menu {
display: grid;
align-items: center;
text-align: right;
justify-self: end;
width: 480px;
grid-template-columns: 120px 120px 120px 120px;
border: 1px solid red;
}
#miolo {
height: 300px;
}
#rodape {
width: 100%;
height: 100px;
border: 1px solid black;
background-color: grey;
color: white;
}
.menulateral {
width: 180px;
height: 25px;
display: flex;
align-items: center;
border-bottom: 1px solid red;
}
</style>
<div id="navegacao">
<div id="logotipo"></div>
<div id="menu">
<a href='#'>menu 1</a>
<a href='#'>menu 2</a>
<a href='#'>menu 3</a>
<a href='#'>menu 4</a>
</div>
</div>
<div id="rodape">
Rodapé
</div>
producao_css = html`${estilo}`
producao_rodape = html`${rodape}`
producao_miolo = html`${miolocentral}`
codigo = html`
<html>
<head>
${estilo}
</head>
<body>
${inicio}
${miolocentral}
${rodape}
</body>
</html>
`
conteudos = [conteudoA, conteudoB, conteudoC]
capturanumeroconteudo = function () {
let url = new URL(window.location.href);
let options = url.searchParams.getAll("conteudovar");
let dados = options[0];
return dados;
}
novo_miolo = `
${estilo}
<div id='miolodinamico'><div>${menu_lateral}</div><div id='conteudodinamico'>${
conteudos[capturanumeroconteudo()]
}</div></div>
`
producao_novo_miolo = html`${novo_miolo}`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
