arrumando slides

curso_gravado/slides classroom/00-preamble.Rmd

@@ -0,0 +1,21 @@
+
+```{r, include=FALSE}
+`%>%` <- magrittr::`%>%`
+blue <- function(x) {
+  glue::glue(
+    '<span style="color:#6495ed; font-weight: bold;">{x}</span>'
+  ) %>% 
+    htmltools::HTML()
+}
+
+colorido <- function(x, cor) {
+  glue::glue(
+    '<span style="color:{cor}; font-weight: bold;">{x}</span>'
+  ) %>% 
+    htmltools::HTML()
+}
+
+options(width = 85)
+
+knitr::opts_chunk$set(fig.align = "center")
+```

curso_gravado/slides classroom/01-ementa.Rmd

@@ -0,0 +1,81 @@
+---
+title: "Dashboards em Shiny I"
+subtitle: "O que vamos ver?"
+author: "<img src = 'https://d33wubrfki0l68.cloudfront.net/9b0699f18268059bdd2e5c21538a29eade7cbd2b/67e5c/img/logo/cursor1-5.png' width = '30%'>"
+output:
+  xaringan::moon_reader:
+    css: 
+      - "default"
+      - "default-fonts"
+      - "https://curso-r.github.io/assets/css/padrao-curso-r.css"
+    lib_dir: libs
+    nature:
+      highlightStyle: github
+      highlightLines: true
+      countIncrementalSlides: false
+      ratio: "4:3"
+knit: pagedown::chrome_print
+---
+```{r setup, include=FALSE}
+options(htmltools.dir.version = FALSE)
+
+link <- function(href, ...) {
+  htmltools::a(
+    href = href,
+    target = "_blank",
+    ...
+  )
+}
+```
+
+## Ementa
+
+- **Módulo 1**: Introdução e conceitos básicos
+  - O que é o Shiny?
+  - UI e server
+  - Inputs e Outputs
+
+
+--
+
+- **Módulo 2**: Reatividade (parte 1)
+  - O que é reatividade?
+  - Valores reativos, expressões reativas e observers
+  - O pacote `reaclog`
+  - Debugging
+
+
+--
+
+- **Módulo 3**: Layouts
+  - Introdução a HTML e Bootstrap
+  - SidebarLayout
+  - NavbarPage
+  - O pacote bslib
+  - O pacote bs4Dash
+
+---
+
+## Ementa
+
+- **Módulo 4**: Reatividade (parte 2)
+  - Novos tipos de obsevers
+  - Novos tipos valores reativos
+  - Validação
+
+
+--
+
+- **Módulo 5**: HTMLWidgets
+  - Tabelas com DT e reactable
+  - Gráficos com plotly e echarts
+  - Mapas com leaflet
+
+
+--
+
+- **Módulo 6**: Miscelânea de exemplos
+  - Download de arquivos
+  - Geração de relatórios
+  - Autenticação
+  - Muitos outros

curso_gravado/slides completos/01-pre-requisitos.Rmd → curso_gravado/slides classroom/02-pre-requisitos.Rmd

@@ -14,7 +14,7 @@ output:
       highlightLines: true
       countIncrementalSlides: false
       ratio: "4:3"
-# knit: pagedown::chrome_print
+knit: pagedown::chrome_print
 ---
 ```{r setup, include=FALSE}
 options(htmltools.dir.version = FALSE)

curso_gravado/slides completos/02-o-que-e-shiny.Rmd → curso_gravado/slides classroom/03-o-que-e-shiny.Rmd

@@ -14,7 +14,7 @@ output:
       highlightLines: true
       countIncrementalSlides: false
       ratio: "4:3"
-# knit: pagedown::chrome_print
+knit: pagedown::chrome_print
 ---
 
 ```{r, child="00-preamble.Rmd"}

curso_gravado/slides completos/02-o-que-e-shiny.html → curso_gravado/slides classroom/03-o-que-e-shiny.html

@@ -4,7 +4,7 @@
     <title>Dashboards em Shiny I</title>
     <meta charset="utf-8" />
     <meta name="author" content="" />
-    <script src="libs/header-attrs-2.19/header-attrs.js"></script>
+    <script src="libs/header-attrs-2.26/header-attrs.js"></script>
     <link href="libs/remark-css-0.0.1/default.css" rel="stylesheet" />
     <link href="libs/remark-css-0.0.1/default-fonts.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://curso-r.github.io/assets/css/padrao-curso-r.css" type="text/css" />

curso_gravado/slides classroom/04-outputs.Rmd

@@ -0,0 +1,63 @@
+---
+title: "Dashboards em Shiny I"
+subtitle: "outputs"
+author: "<img src = 'https://d33wubrfki0l68.cloudfront.net/9b0699f18268059bdd2e5c21538a29eade7cbd2b/67e5c/img/logo/cursor1-5.png' width = '30%'>"
+output:
+  xaringan::moon_reader:
+    css: 
+      - "default"
+      - "default-fonts"
+      - "https://curso-r.github.io/assets/css/padrao-curso-r.css"
+    lib_dir: libs
+    nature:
+      highlightStyle: github
+      highlightLines: true
+      countIncrementalSlides: false
+      ratio: "4:3"
+knit: pagedown::chrome_print
+---
+
+```{r, child="00-preamble.Rmd"}
+
+```
+
+## Outputs
+
+Os outputs são definidos na UI e criados no server. 
+
+Cada tipo de output é definido por uma função do tipo `*Output()`.
+
+```{r, echo = FALSE, eval=TRUE, out.width="100%"}
+tibble::tribble(
+  ~Função, ~`Saída`,
+  "plotOutput()", "Gráficos",
+  "tableOutput()", "Tabelas",
+  "textOutput()", "Textos"
+) |>
+  reactable::reactable(
+    sortable = FALSE
+  )
+```
+
+---
+## Funções render
+
+Para criar um output, precisamos das funções do tipo `render*()`. Essas funções têm o papel de:
+
+- receber o código que gera um output;
+
+- transformar sua saída em um código HTML.
+
+Na grande maioria dos casos, teremos o par `visualizacaoOutput()` `renderVisualizacao()`. 
+
+```{r, echo = FALSE, eval=TRUE}
+tibble::tribble(
+  ~`*Output()`, ~`render*()`,
+  "plotOutput()", "renderPlot()",
+  "tableOutput()", "renderTable()",
+  "textOutput()", "renderText()"
+) |>
+  reactable::reactable(
+    sortable = FALSE
+  )
+```

curso_gravado/slides classroom/04-outputs.html

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="" xml:lang="">
+  <head>
+    <title>Dashboards em Shiny I</title>
+    <meta charset="utf-8" />
+    <meta name="author" content="" />
+    <script src="libs/header-attrs-2.26/header-attrs.js"></script>
+    <link href="libs/remark-css-0.0.1/default.css" rel="stylesheet" />
+    <link href="libs/remark-css-0.0.1/default-fonts.css" rel="stylesheet" />
+    <script src="libs/core-js-2.5.3/shim.min.js"></script>
+    <script src="libs/react-18.2.0/react.min.js"></script>
+    <script src="libs/react-18.2.0/react-dom.min.js"></script>
+    <script src="libs/reactwidget-1.0.0/react-tools.js"></script>
+    <link href="libs/htmltools-fill-0.5.8.1/fill.css" rel="stylesheet" />
+    <script src="libs/htmlwidgets-1.6.4/htmlwidgets.js"></script>
+    <link href="libs/reactable-0.4.4/reactable.css" rel="stylesheet" />
+    <script src="libs/reactable-binding-0.4.4/reactable.js"></script>
+    <link rel="stylesheet" href="https://curso-r.github.io/assets/css/padrao-curso-r.css" type="text/css" />
+  </head>
+  <body>
+    <textarea id="source">
+class: center, middle, inverse, title-slide
+
+.title[
+# Dashboards em Shiny I
+]
+.subtitle[
+## outputs
+]
+.author[
+### <img src = 'https://d33wubrfki0l68.cloudfront.net/9b0699f18268059bdd2e5c21538a29eade7cbd2b/67e5c/img/logo/cursor1-5.png' width = '30%'>
+]
+
+---
+
+
+
+
+
+
+## Outputs
+
+Os outputs são definidos na UI e criados no server. 
+
+Cada tipo de output é definido por uma função do tipo `*Output()`.
+
+<div class="reactable html-widget html-fill-item" id="htmlwidget-039306edd8531e120e9f" style="width:auto;height:auto;"></div>
+<script type="application/json" data-for="htmlwidget-039306edd8531e120e9f">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"Função":["plotOutput()","tableOutput()","textOutput()"],"Saída":["Gráficos","Tabelas","Textos"]},"columns":[{"id":"Função","name":"Função","type":"character"},{"id":"Saída","name":"Saída","type":"character"}],"sortable":false,"dataKey":"95ce439547cd7a89b6510a272b555bb5"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
+
+---
+## Funções render
+
+Para criar um output, precisamos das funções do tipo `render*()`. Essas funções têm o papel de:
+
+- receber o código que gera um output;
+
+- transformar sua saída em um código HTML.
+
+Na grande maioria dos casos, teremos o par `visualizacaoOutput()` `renderVisualizacao()`. 
+
+<div class="reactable html-widget html-fill-item" id="htmlwidget-5115bd3c8f7b0304448d" style="width:auto;height:auto;"></div>
+<script type="application/json" data-for="htmlwidget-5115bd3c8f7b0304448d">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"*Output()":["plotOutput()","tableOutput()","textOutput()"],"render*()":["renderPlot()","renderTable()","renderText()"]},"columns":[{"id":"*Output()","name":"*Output()","type":"character"},{"id":"render*()","name":"render*()","type":"character"}],"sortable":false,"dataKey":"6d6df165aab9bf41c4435c5245c637dc"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
+    </textarea>
+<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
+<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
+<script>var slideshow = remark.create({
+"highlightStyle": "github",
+"highlightLines": true,
+"countIncrementalSlides": false,
+"ratio": "4:3"
+});
+if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) {
+  window.dispatchEvent(new Event('resize'));
+});
+(function(d) {
+  var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler");
+  if (!r) return;
+  s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }";
+  d.head.appendChild(s);
+})(document);
+
+(function(d) {
+  var el = d.getElementsByClassName("remark-slides-area");
+  if (!el) return;
+  var slide, slides = slideshow.getSlides(), els = el[0].children;
+  for (var i = 1; i < slides.length; i++) {
+    slide = slides[i];
+    if (slide.properties.continued === "true" || slide.properties.count === "false") {
+      els[i - 1].className += ' has-continuation';
+    }
+  }
+  var s = d.createElement("style");
+  s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }";
+  d.head.appendChild(s);
+})(document);
+// delete the temporary CSS (for displaying all slides initially) when the user
+// starts to view slides
+(function() {
+  var deleted = false;
+  slideshow.on('beforeShowSlide', function(slide) {
+    if (deleted) return;
+    var sheets = document.styleSheets, node;
+    for (var i = 0; i < sheets.length; i++) {
+      node = sheets[i].ownerNode;
+      if (node.dataset["target"] !== "print-only") continue;
+      node.parentNode.removeChild(node);
+    }
+    deleted = true;
+  });
+})();
+// add `data-at-shortcutkeys` attribute to <body> to resolve conflicts with JAWS
+// screen reader (see PR #262)
+(function(d) {
+  let res = {};
+  d.querySelectorAll('.remark-help-content table tr').forEach(tr => {
+    const t = tr.querySelector('td:nth-child(2)').innerText;
+    tr.querySelectorAll('td:first-child .key').forEach(key => {
+      const k = key.innerText;
+      if (/^[a-z]$/.test(k)) res[k] = t;  // must be a single letter (key)
+    });
+  });
+  d.body.setAttribute('data-at-shortcutkeys', JSON.stringify(res));
+})(document);
+(function() {
+  "use strict"
+  // Replace <script> tags in slides area to make them executable
+  var scripts = document.querySelectorAll(
+    '.remark-slides-area .remark-slide-container script'
+  );
+  if (!scripts.length) return;
+  for (var i = 0; i < scripts.length; i++) {
+    var s = document.createElement('script');
+    var code = document.createTextNode(scripts[i].textContent);
+    s.appendChild(code);
+    var scriptAttrs = scripts[i].attributes;
+    for (var j = 0; j < scriptAttrs.length; j++) {
+      s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value);
+    }
+    scripts[i].parentElement.replaceChild(s, scripts[i]);
+  }
+})();
+(function() {
+  var links = document.getElementsByTagName('a');
+  for (var i = 0; i < links.length; i++) {
+    if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) {
+      links[i].target = '_blank';
+    }
+  }
+})();
+// adds .remark-code-has-line-highlighted class to <pre> parent elements
+// of code chunks containing highlighted lines with class .remark-code-line-highlighted
+(function(d) {
+  const hlines = d.querySelectorAll('.remark-code-line-highlighted');
+  const preParents = [];
+  const findPreParent = function(line, p = 0) {
+    if (p > 1) return null; // traverse up no further than grandparent
+    const el = line.parentElement;
+    return el.tagName === "PRE" ? el : findPreParent(el, ++p);
+  };
+
+  for (let line of hlines) {
+    let pre = findPreParent(line);
+    if (pre && !preParents.includes(pre)) preParents.push(pre);
+  }
+  preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted"));
+})(document);</script>
+
+<script>
+slideshow._releaseMath = function(el) {
+  var i, text, code, codes = el.getElementsByTagName('code');
+  for (i = 0; i < codes.length;) {
+    code = codes[i];
+    if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) {
+      text = code.textContent;
+      if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) ||
+          /^\$\$(.|\s)+\$\$$/.test(text) ||
+          /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
+        code.outerHTML = code.innerHTML;  // remove <code></code>
+        continue;
+      }
+    }
+    i++;
+  }
+};
+slideshow._releaseMath(document);
+</script>
+<!-- dynamically load mathjax for compatibility with self-contained -->
+<script>
+(function () {
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src  = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML';
+  if (location.protocol !== 'file:' && /^https?:/.test(script.src))
+    script.src  = script.src.replace(/^https?:/, '');
+  document.getElementsByTagName('head')[0].appendChild(script);
+})();
+</script>
+  </body>
+</html>