30:[] 2e:{"title":"Publicando partes ou elementos do notebook online","cells":[{"id":0,"value":"# Publicando partes ou elementos do notebook online","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"### Transformando elementos do notebook em componentes para websites ou publicações online\n\n------\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"Por serem ambientes muito diferentes dos editores de código ou IDEs, os notebooks computacionais não parecem ser plataformas de desenvolvimento de software. Mas aquilo que é construído no Observable não fica preso a ele. Seus códigos ou conteúdos podem ser utilizados como componentes ou elementos de websites ou aplicações web.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"Para que seja possível utilizar algo de um notebook fora do Observable é importante que este conteúdo esteja associado a uma **variável**. Blocos construídos com **markdown** precisam ser construídos em **javascript** utilizando a instrução `md` e blocos em **html** com a instrução `html`.","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"```js\nconteudomd = md`conteúdo no formato markdown`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"```js\nconteudohtml = html`conteúdo no formato html`\n```","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"Estes blocos podem ser, por exemplo, o retorno de uma função:","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"```js\nminhafuncao = function() {\n let conteudo = \"informação dinâmica\";\n\n return html`\\${conteudo}`;\n}\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"*☞ Utilizamos a marcação `\\${ ... }` para incluir informações variáveis dentro de **string templates**, **strings** que podem receber múltiplas linhas de texto.*","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"A associação dos blocos contendo os conteúdos - dinâmicos ou não - do notebook, permitirá que um, ou alguns deles, sejam selecionados para serem transportados para outros contextos.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"O Observable oferece 3 maneiras para que estes blocos possam ser incorporados: utilizando `tags iframe` do **HTML**, que insere o bloco do notebook dentro de um documento **HTML** como uma página externa integrada nele; através de um código **javascript**, que puxa as informações do notebook e faz um enxerto no próprio documento com estes conteúdos; ou como um componente **React**, que é um *framework* **javascript** que trabalha com bibliotecas de componentes, transformando os blocos do notebook em novos componentes para serem utilizados em uma aplicação ou documento web.","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":48,"value":"Utilizando o menu no topo do notebook à direita, temos acesso a opção **Export** > **Embed cells**. Ao selecionar os componentes desejados, o Observable irá prover o código necessário para que ele seja incorporado em um documento ou aplicação web, com um *preview* de como ele será apresentado.","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"

","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}