28:null 29:["$","title",null,{"children":"Scriba com Notebooks | Guilherme Ranoya | Observable"}] 2e:T466,Para criar outlines com textos pequenos, como estes no documento, utilize a classe "small" que já faz parte do Scriba. Basta incluí-la através de uma tag span:
```html @ < Outline ```
Para incluir informações que mudam dinamicamente em espaços demarcados, como o outline, as referências, ou em layouts divididos em 50%, esconda as marcações do Scriba com a classe "hide". Ao alterar o conteúdo de uma célula, o Observable reescreve seu conteúdo, reinserindo a marcação no conteúdo. Para resolver isso a classe "hide" foi criada. Basta incluí-la através de uma tag span:
```html ```
É importante que toda marcação do Scriba seja seguida de um espaço. Os intepretadores *markdown* também precisam muitas vezes que o conteúdo pule linhas para ser entendido como um novo parágrafo. Para evitar que os conteúdos acabem desalinhados, coloque as marcações do Scriba no final do conteúdo/células do notebook, e não no início. Não faz diferença para o Scriba o lugar onde as marcações estão colocadas na célula.2f:[] 2c:{"id":"818f4a240d8f5b5e","slug":"teste-scriba","title":"Scriba com Notebooks","thumbnail":"a0e957e820b633ffab91ac699efe5bae502372aa7655217f8caaaa622a5991c4","access_level":"public","create_time":"$D2026-01-26T13:21:23.427Z","update_time":"$D2026-02-14T21:20:17.777Z","view_time":null,"first_public_time":"$D2026-01-26T13:23:12.092Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":403,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"cf724edb2945891c","slug":"textos-e-discussoes","title":"Textos e discussões","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Scriba com Notebooks","cells":[{"id":0,"value":"# Scriba com Notebooks\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"## \n@< \n-+- \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## -+- Este documento é um notebook computacional","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"!<5 Notebooks\n\n@{introdução}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"Este documento foi escrito no [Observable](https://observablehq.com), que é uma plataforma para desenvolvimento de notebooks computacionais. O notebook computacional que contém este material pode ser acessado através [deste link](https://observablehq.com/@ranoya/teste-scriba).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"@{linguagens} Uma das características dos notebooks computacionais é que eles misturam textos explicativos, normalmente utilizando linguagem *markdown*, com código de programação sendo processado no documento, apresentando resultados e respostas nele.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"Através dos notebooks do [Observable](https://observablehq.com) é possível criar documentos dinâmicos utilizando código *javascript*, e formatar os resultados através de códigos *markdown* ou *html*. Isto significa que é possível construir diagramas e imagens vetoriais com tecnologia *svg* através do próprio código.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"@> O criador do [Observable](https://observablehq.com) é o mesmo da biblioteca de visualização [Data Driven Documents / D3](https://d3js.org)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":212,"value":"As imagens abaixo são capturadas de uma base de dados através de programação, onde constam ${dados.length} artefatos. 8 deles são escolhidos aleatoriamente cada vez que este documento é apresentado. O próprio número ${dados.length}, que informa o número total de artefatos, pode vir a ser alterado caso novos artefatos sejam incluídos nesta base. Ele também é apresentado no texto dinamicamente através de programação.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":" \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"-.- \n\n+++ \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"@{artefatos} \n\n@< Artefatos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"html`\n-.- \n\n${variaartefatos(dados)}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"-.- \n\n+++ \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":282,"value":" \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"Através de um notebook computacional é possível criar diversas formas de interação com os dados, e à partir delas, apresentar informações de maneiras mais interessantes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":275,"value":"Abaixo utilizamos a coluna de referência do Scriba para construir uma ficha catalográfica com informações registradas sobre cada um dos ${dados.length} artefatos capturados da base de dados:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":265,"value":"@{seletor} \n\n@< Seletor","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"viewof indice = Inputs.range([0, dados.length - 1], {\n step: 1,\n value: 73\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"@{ficha} \n\n@< Ficha","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"

Título: ${dados[indice].nome} ${dados[indice].subtitulo}
\nAno: ${dados[indice].ano}

\nGênero Narrativo: ${dados[indice].genero.replace(/\\,$/,\"\")}
\nTipologia: ${dados[indice].tipologia}
\nProdução: ${dados[indice].produtora}
\nLinguagem: ${dados[indice].linguagem.replace(/\\,$/,\"\")}
\n

\n\n@> ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":" \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"@{scroll} \n\n!<11 Scroll","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"Outra opção interessante para discussão de artefatos analisados é fixá-los na tela enquanto o texto explicativo que lhes faz referência corre ao longo do scroll. No próximo exemplo, dividiremos o layout em 50% através das marcações do Scriba, e fixaremos um conjunto de imagens de artefatos da produtora Sierra na coluna direita, enquanto uma explicação sobre seu papel histórico é apresentada na coluna esquerda:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":314,"value":"%< A Sierra On-Line, fundada em 1979 por Ken e Roberta Williams, foi uma das empresas mais influentes na consolidação dos jogos de aventura como gênero central da indústria. Em uma época em que os jogos eletrônicos ainda estavam em sua infância, a Sierra ousou experimentar com narrativas complexas e mecânicas inovadoras, abrindo caminho para experiências interativas que iam além da ação arcade.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"!%>10 \n\n${quatrosierra(dados)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"%< Seu primeiro grande marco foi Mystery House (1980), considerado o primeiro jogo de aventura gráfico da história. Ao combinar texto com imagens rudimentares, a Sierra inaugurou uma nova forma de contar histórias nos computadores pessoais, tornando a experiência mais imersiva e acessível para jogadores que buscavam algo além da imaginação textual.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"%< Durante os anos 1980, a empresa lançou séries icônicas como King’s Quest, que se tornaria um dos pilares do gênero. Esses jogos não apenas introduziam mundos ricos em fantasia, mas também exigiam do jogador raciocínio lógico e exploração cuidadosa, características que definiriam o estilo point & click.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"%< A Sierra também foi pioneira em integrar elementos narrativos mais maduros e humorísticos em suas criações. Leisure Suit Larry, por exemplo, trouxe um tom irreverente e adulto, mostrando que os jogos poderiam dialogar com públicos diversos e explorar temas além da fantasia tradicional.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"%< Outro aspecto fundamental foi a inovação tecnológica. A Sierra investiu em interfaces gráficas cada vez mais sofisticadas, evoluindo do simples uso de comandos de texto para sistemas de apontar e clicar. Essa transição redefiniu a forma como os jogadores interagiam com os mundos virtuais, tornando a experiência mais intuitiva.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"%< Além dos avanços técnicos, a empresa também se destacou por sua visão empresarial. A Sierra criou revistas e materiais de apoio que ajudavam a construir uma comunidade em torno de seus jogos, fortalecendo o vínculo entre jogadores e desenvolvedores.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":381,"value":"%< A influência da Sierra se estendeu para além de seus próprios títulos. Ao estabelecer padrões de qualidade narrativa e mecânica, ela inspirou outras desenvolvedoras a investir em aventuras gráficas, consolidando o gênero como um dos mais populares da década de 1980.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"%< Mesmo com a evolução da indústria e a ascensão de outros gêneros, os jogos da Sierra permaneceram como referência histórica. Muitos jogadores e designers atuais reconhecem que a base da narrativa interativa moderna foi construída sobre os alicerces que a empresa estabeleceu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"%< O legado da Sierra On-Line não se resume apenas aos títulos lançados, mas também à sua capacidade de mostrar que os videogames podiam ser uma forma legítima de arte narrativa. Ao unir tecnologia, criatividade e ousadia, a empresa ajudou a transformar a percepção cultural sobre os jogos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":392,"value":"%< Em resumo, a Sierra On-Line foi muito mais do que uma desenvolvedora de jogos: ela foi uma visionária que moldou o futuro da indústria. Sua importância nos anos 1980 reside na coragem de experimentar, na habilidade de contar histórias envolventes e na criação de experiências que continuam a inspirar gerações de jogadores e criadores.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"%< Texto gerado com inteligência artificial para fins ilustrativos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":" \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"@{truques} \n\n@< Truques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"@< Dados","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"Apêndice\n\n@{apêndice}","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"import { gsdata, imagefromallsources, selecte, shuffle } from \"@ranoya/datat\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"dados = gsdata(\n \"https://docs.google.com/spreadsheets/d/15lB-WclGe0WVET1yg94tZMOc5zVi6lufmv0vQZyXmYA/edit?gid=0#gid=0\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"@> Todos os dados capturados","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"variaartefatos = function (arr) {\n let code = `

`;\n\n let lista = shuffle(arr.length, 8);\n\n for (let i = 0; i < 8; i++) {\n code += `

`;\n }\n\n code += `

`;\n\n return code;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"@> Função para apresentação dos primeiro 8 artefatos aleatórios","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"quatrosierra = function (arro) {\n let code = `

`;\n\n let arr = selecte(arro, \"sierra\");\n\n let lista = shuffle(arr.length, 4);\n\n for (let i = 0; i < 4; i++) {\n code += `

`;\n }\n\n code += `

`;\n\n return html`${code}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"@> Função para apresentação de 4 artefatos aleatórios da Sierra","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"