30:[] 2e:{"title":"Introdução ao HTML","cells":[{"id":0,"value":"md`# Introdução ao HTML\n\nNo tutorial [introdução ao código](/@robstelling/introducao-ao-codigo), nós olhamos para células que retornam estruturas de dados como números, strings, arrays e objetos. Mas e se quisermos uma retornar uma visualização interativa? Ou apenas algum texto?\n\nSe uma célula retorna um elemento DOM, esse elemento DOM então é exibido.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"html`

Por exemplo, eu usei um elemento parágrafo!

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`Ou usando a API W3C diretamente (você não precisa fazer assim, é muito verboso):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"{\n const p = document.createElement(\"p\");\n p.appendChild(document.createTextNode(\"Eu também sou um elemento \"));\n p.appendChild(document.createElement(\"i\")).appendChild(\n document.createTextNode(\"parágrafo\")\n );\n p.appendChild(document.createTextNode(\"!\"));\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`Muito melhor, você pode escrever em Markdown:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`Eu, tabém sou um elemento *parágrafo*.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`\n\nMarkdown suporta uma variedade de estilos e elementos estruturais, como listas e tabelas. Veja mais no [guia Markdown do GitHub](https://help.github.com/articles/basic-writing-and-formatting-syntax/). \n\n\nUma vez que todas as células no Observable são JavaScript — uma célula “Markdown” é somente uma célula JavaScript com a funcionalidade Markdown [tagged template literal](http://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals) — Células Markdown e HTML pode ser dinâmicas: você pode colocar expressões \\`\\${…}\\` dentro de template literals. Por exemplo, o número favorito abaixo é gerado aleatoriamente.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"md`Meu número favorito é ${(Math.random() * 100) | 0}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`Expressões embutidas também podem ser elementos DOM. Isso permite que você incorpore conteúdo dinâmico dentro do Markdown, como pequenos gráficos em SVG ou notação matemática em LaTeX.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`Eu gosto de Markdown para prosa, mas ${tex`\\KaTeX`} para matemática.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"md`Um sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} é um gráfico em linha com prosa.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"function sparkline(values, width = 64, height = 17) {\n const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);\n const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);\n const context = DOM.context2d(width, height);\n const line = d3.line().x((d, i) => x(i)).y(y).context(context);\n context.beginPath(), line(values), context.stroke();\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`E claro, Markdown também pode ser reativo! \\`now\\` é uma variável reativa built-in da [biblioteca padrão](/@observablehq/standard-library) do Observable cujo valor é a hora atual. Desta maneira, embutindo uma referência para \\`now\\` faz com a célula Markdown seja recalculada continuamente:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`A hora atual é ${new Date(now).toLocaleTimeString()}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`\n\nVocê pode manipular o DOM gerado a partir do Markdown com JavaScript, por exemplo, misturar conteúdo dinâmico e estático. O texto abaixo percorre o esquema de arco-íris do D3.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"{\n const p = md`Arco-íris menos zangados são os *melhores* arco-íris.`;\n p.style.color = d3.interpolateRainbow(now / 1000);\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"md`\nOutro tipo comum de conteúdo dinâmico é o Canvas. O método da biblioteca padrão DOM.context2d retorna um CanvasRenderingContext2D da largura e altura especificadas nos parâmetros (e automáticamente re-escala para monitores de alta resolução). Desenhe usando o contexto e retorne o canvas para exibir no notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"{\n const context = DOM.context2d(128, 128);\n for (let radius = 8; radius < 128; radius += 8) {\n context.beginPath();\n context.arc(0, 0, radius, 0, 2 * Math.PI);\n context.stroke();\n }\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"md`Ou como SVG:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`\nMuitas vezes você utilizará um helper de uma biblioteca como [D3](https://d3js.org) para gerar o conteúdo dinâmico. Vamos abordar bibliotecas third-party em detalhes mais tarde na introdução, mas aqui vai um exemplo rápido gerando círculos coloridos concêntricos em SVG.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"{\n // Cria um quadrado

Eu sou um parágrafo .

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"md`\nTenha cuidado ao aplicar estilos CSS globais: se um estilo afetar a altura de uma célula, o código runtime do Observable pode não notar, a menos que a célula afetada seja recalculada. Por exemplo, se você editar a célula *destacada* acima para ter um tamanho de fonte de 128px, o parágrafo destacado ficará imediatamente maior, mas as células a seguir não serão reposicionadas. Da mesma forma, evite [floats](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Floats) ou lembre-se de limpá-los! (Você pode dizer explicitamente para o runtime recomputar as alturas das células disparando um evento *load*, mas isso não deveria ser necessário na maioria dos casos.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`\nUma célula pode retornar um elemento DOM que já está sendo exibido em outro lugar nesta página. Neste caso, o value inspector é usado, em vez de mostrar o elemento em linha. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"slider // Este slider já foi exibido acima!","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`\nEmbora este notebook dê apenas uma visão superficial geral do tipo de conteúdo que você pode colocar em um notebook Observable, espero que dê uma ideia da vasta gama de possibilidades oferecidas pela web moderna.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"md`----\n\n#### Notas da Tradução\nMar. 2021 - Pequenas correções por [Claudio Esperança](https://observablehq.com/@esperanc)!\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}