Webdesign para analistas de dados


O objetivo aqui é mostrar como construir páginas interativas, como esta, em que os usuários podem controlar gráficos e cálculos.

Elas são chamadas de apps, aplicativos web, porque são mais dinâmicas do que as páginas comuns, estáticas.

Para construir esses apps é necessário usar as três linguagens básicas da internet: html (a estrutura da página), css (cores, formatação etc.) e javascript (a interação propriamente dita).

Existem pacotes para construí-los diretamente em python (Dash) ou em R (Shiny). Eles criam html, css e javascript automaticamente, a partir de comandos dessas outras linguagens.

No entanto, eles têm dois grandes problemas:

Esses dois problemas somem se você construir seu app usando diretamente html, css e javascript. Você poderá controlar cada detalhe da página e não precisará de um servidor, porque o navegador de quem abrir seu aplicativo possui um interpretador de javascript, inclusive nos celulares.

Portanto, se você tem prazer em programar, é muito mais divertido e poderoso aprender a controlar essas linguagens diretamente. O que precisamos saber sobre html e css é muito simples, pois são apenas marcações, você aprenderá em uma tarde. Javascript, no entanto, é mais complicada.

Por isso, vamos focar apenas no que é importante para fazer o tipo de página que nos interessa. Por exemplo, embora o pacote D3 seja o pacote em javascript capaz de produzir os gráficos mais impressionantes, ele é muito trabalhoso. Vamos preferir utilizar Vega-Lite, um pacote que torna muito mais simples produzir os gráficos de que precisamos. E melhor, podemos fazer gráficos Vega-Lite usando o python ou o R e incorporá-los diretamente em nossa página.

Aulas




[em elaboração]

O VSCode

Baixe o VSCode aqui. Para instalar no Windows, basta executar o arquivo. No Linux, execute o seguinte comando na pasta em que estiver o arquivo (substitua o nome do arquivo ):


        sudo dpkg -i code_1.27.2-1536736588_amd64.deb
    

Ideias básicas sobre HTML

[em elaboração]

Em sua versão mais simples, websites são pastas com alguns arquivos html. A página inicial do site normalmente é o arquivo index.html.

Ideias básicas sobre CSS

[em elaboração]

Ideias básicas sobre Javascript

[em elaboração]

Outras observações

Aqui está uma lista do que usaremos:

Para aprender mais