Insert cell before (⇧⌘↩︎)

2b:null 2c:["$","title",null,{"children":"Começando no Observable | Guilherme Ranoya | Observable"}] 31:T1f6b,Todo documento se inicia com um único bloco do tipo **markdown** que é o próprio título do documento. Ao passar com o mouse abaixo (ou acima) deste bloco, você verá na lateral esquerda o ícone de , que lhe permite criar um novo bloco (em cima, ou em baixo do já existente). Ao clicar, diversas opções de conteúdos e ferramentas serão exibidas para o novo bloco. Ao lado de cada bloco existente, você verá um ícone , que lhe dará acesso ao menu contextual do bloco, e uma seta que lhe apresentará o editor de código do bloco. Para manter o editor sempre aberto, e exibir a programação que gera aquele conteúdo no bloco, basta clicar no ícone no lado esquerdo do editor. O bloco pode conter programação **javascript**, **html**, **markdown**, ou alguma ferramenta pronta do próprio Observable. Para mudar o tipo de linguagem no bloco basta clicar no ícone , ou ao lado do editor, e escolher a linguagem desejada. Experimente criar um novo documento no Observable, clicar no ícone para criar um novo bloco, selecionar a linguagem **javascript** com o ícone , e escrever: ```js hoje = new Date(); ``` Para executar o conteúdo do bloco, utilize o ícone que fica no canto superior direito do editor, ou também na barra inferior da tela do Observable. Se você clicar na opção de fixar o código na tela , terá um bloco com o registro da data de hoje, e logo abaixo o código que produz esta informação:32:T8ba,É importante saber que tudo que você fizer, e todo código que construir no Observable, poderá ser usado online fora do Observable. Ele é um ambiente de desenvolvimento, e aquilo que você cria nele não estará limitado ao próprio Observable. Você pode usar apenas um bloco, múltiplos blocos, ou todos os blocos do seu *notebook* em um site, e este uso é integrado: se você fizer alterações no documento do Observable, ou nos códigos dentro do documento, você verá as mudanças imediatamente refletidas onde é que esteja usando estes códigos online. Os procedimentos para se fazer isso são um assunto para outro momento, mas o importante é que se saiba que o Observable não limitará a aplicação daquilo que você fizer com ele. Para experimentar, modificar e testar variações dos códigos disponíveis em qualquer documento do Observable, você pode fazer uma cópia pessoal, e alterá-la à vontade sem produzir qualquer mudança no documento original. Esta cópia é chamada de **fork**, e é feita ao se clicar neste ícone no topo da página.33:[] 2f:{"id":"d27341f100ac8d6f","slug":"livroobservable-0","title":"Começando no Observable","thumbnail":"20b3aa7dea948f8c491497fb0eb7416b443771bdfb0b544c0b2574098bb21f38","access_level":"public","create_time":"$D2024-05-21T20:15:36.639Z","update_time":"$D2024-05-23T14:36:29.176Z","view_time":null,"first_public_time":"$D2024-05-21T20:15:36.639Z","fork":{"id":"517436f899a23d10","slug":"livroobservable-2","title":"Variáveis","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"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":603,"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,"subscribed":null,"forks":1,"collection":{"id":"0b9e9855c9c4f77f","slug":"livros","title":"Livros","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Começando no Observable","cells":[{"id":0,"value":"# Começando no Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"### Iniciando com programação javascript em notebooks\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":476,"value":"## Como começar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":478,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":510,"value":"hoje = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"```js\nhoje = new Date();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":548,"value":"Se você clicar e arrastar o ícone de um bloco para cima, ou para baixo, moverá o bloco no documento. A posição que ele se encontra, ou a ordem dos blocos, não alteram qualquer resultado no Observable. Toda a cadeia de dependência dos códigos é inteiramente avaliada pela plataforma antes da execução, e ordenada para que se obtenham os resultados desejados.\n\nAgora experimente criar um novo bloco javascript com o seguinte código:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":554,"value":"viewof corRGB = Inputs.color()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":568,"value":"```js\nviewof corRGB = Inputs.color();\n```\n\nE um segundo bloco abaixo com:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":560,"value":"corRGB","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":572,"value":"```js\ncorRGB;\n```\nAgora, para ver como os blocos vão construindo um programa todo distribuído ao longo do *notebook*, crie um novo bloco utilizando a linguagem **html**, e inclua a seguinte instrução:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":579,"value":"

${hoje}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":585,"value":"```html\n

\n $\\{hoje}\n

\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":588,"value":"Você pode arrastar os blocos para cima ou para baixo. Isso não interfere em nada no funcionamento do *notebook*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":592,"value":"\n------\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":594,"value":"### Informações preliminares","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":596,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":601,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"