30:T49b,
## Parte 2: construíndo o código de produção (o que efetivamente será publicado) O Observable não é capaz (ainda?) de exportar células `HTML` ou `Markdown`; a única fomrma de exportar o código produzido nele para algum *webserver* é utilizando `Javascript`. Para utilizá-lo como o editor do seu site, o código `HTML` precisará ser incluído como uma `string` em uma célula nomeada (uma variável `Javascript`). Primeiro, colocaremos o código do `CSS` (a tag `","pinned":true,"hidden":false,"mode":"html"},{"id":85,"value":"Em seguida, modelamos o código `HTML` para apresentação da navegação no topo do website. Ele já utiliza as definições `CSS` feitas na célula anterior, mas, novamente, é apenas um experimento criado para testar como este elemento deve ficar no website, ou para testar modificações que desejamos fazer no código final.\n\n

\nO website que estamos criando aqui é apenas esquemático. No lugar de um logotipo, colocaremos\napenas um bloco vermelho; no lugar de um menu elaborado, apenas links. Ele é apenas uma forma\nde exemplificar o processo que é o mesmo para o desenvolvimento de coisas simples ou para coisas muito\nelaboradas.\n

\n
","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"

\n\n

\n\n \n\n

","pinned":true,"hidden":false,"mode":"html"},{"id":102,"value":"Os próximo elementos que modelaremos é rodapé, que se resumirá a um bloco quadrado de cor escura com texto branco, para ser colocado no final da página.","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"

\n Rodapé\n

","pinned":true,"hidden":false,"mode":"html"},{"id":114,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"estilo = `\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"A segunda parte será fazer o mesmo processo para os outros códigos desenvolvidos: primeiro a navegação será colocada em uma variável **inicio**, e depois o rodapé em uma variável **rodape**. Estes conteúdos precisam ser incluídos em células Observable separadas, pois é assim que cada componente pode ser exportado para o *webserver*.\n","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"inicio = `\n

\n\n

\n\n \n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"rodape = `\n

\n Rodapé\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"Vamos definir também um miolo central de conteúdo nesta estrutura, da mesma forma como fizemos com as outras partes:","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"miolocentral = `\n

\n\n conteúdo central\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"
\n## Parte 3: testando o resultado aqui mesmo\n\nO código de produção está inserido em variáveis `Javascript`, mas podemos gerar seus resultados aqui mesmo no documento Observable para testar se estão gerando o resultado certo, e podemos também fazer a montagem do site aqui mesmo, para nos certificar de que os componentes estão se articulando corretamente.\n\nPara gerar um output `HTML` pelo `Javascript` no Observable, utilizamos a instrução:\n\n```javascript\nvariavel = html\\` código html \\`\n\n```\n\nIsso exigiria que re-escrevêssemos todos os códigos novamente, mas o `Javascript ES6` possui o recurso de inserir conteúdos de variáveis dinamicamente no código, utilizando o *alias* `$\\{variavel}`. Ao incluirmos, por exemplo, `$\\{inicio}` dentro de uma `string`, o conteúdo será preenchido com o que estiver definido nesta variável.\n\nlogo, para gerar o código `HTML` da navegação, podemos usar a instrução\n\n```javascript\nproducao_navegacao = html`$\\{inicio}`;\n```\n\nComo demonstrado abaixo:","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"producao_navegacao = html`${inicio}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"Estes elementos são, efetivamente, códigos de produção (finais) que podem ser exportados para o *webserver* externo. Faremos a mesma coisa com o `CSS` (tag `