Skip to content

Commit

Permalink
added banner slide directing visitors to new course website
Browse files Browse the repository at this point in the history
  • Loading branch information
@samanthacsik
samanthacsik committed Dec 20, 2023
1 parent dc43ac8 commit bc55f5c
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 27 deletions.
43 changes: 21 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,14 +399,19 @@
<div class="slides">


<section id="title-slide" class="slide level2 center" data-menu-title="~~~ Title Slide ~~~" data-background="#053660"><h2></h2>
<section id="banner" class="slide level2" data-menu-title="~~~ BANNER ~~~" data-background="#053660"><h2></h2>
<p><br><br></p>
<p><span class="custom-title">These EDS 430 (Intro to Shiny) materials are no longer maintained!</span></p>
<p><span class="custom-subtitle2">Please visit the new <a href="https://ucsb-meds.github.io/EDS-430-Intro-to-Shiny/">course website</a> if you’re looking for the most up-to-date versions of these slides</span></p>
<p><span class="custom-subtitle3">Thank you <i class="fa-solid fa-face-smile" title="smiling face" aria-label="face-smile"></i></span></p>
</section><section id="title-slide" class="slide level2 center" data-menu-title="~~~ Title Slide ~~~" data-background="#053660"><h2></h2>
<p><span class="custom-title">EDS 430 - Intro to <img src="images/shiny_text.png" alt="The word 'Shiny' in cursive lettering, which is the logo used by Posit for the shiny package." style="display: inline-block; margin: 0; position: relative; top: 25px; width:130px;height:90px;"></span></p>
<p><span class="custom-subtitle"><em>Building reactive apps &amp; dashboards</em></span></p>
<div class="columns">
<div class="column" style="width:50%;">
<p><span class="body-text baby-blue-text"><strong>Published:</strong> Oct 10, 2022</span></p>
</div><div class="column" style="width:50%;">
<p><span class="body-text baby-blue-text"><strong>Last updated:</strong> Oct 17, 2023</span></p>
<p><span class="body-text baby-blue-text"><strong>Last updated:</strong> Dec 20, 2023</span></p>
</div>
</div>
<hr class="hr-teal">
Expand Down Expand Up @@ -1939,7 +1944,7 @@
</div>
<div class="cell">
<div class="cell-output-display">
<div class="countdown" id="timer_e2e161e4" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown" id="timer_b8b9adbc" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown-controls">
<button class="countdown-bump-down">−</button><button class="countdown-bump-up">&amp;plus;</button>
</div>
Expand Down Expand Up @@ -3008,7 +3013,7 @@
</div>
<div class="cell">
<div class="cell-output-display">
<div class="countdown" id="timer_f733848a" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown" id="timer_f4f73255" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown-controls">
<button class="countdown-bump-down">−</button><button class="countdown-bump-up">&amp;plus;</button>
</div>
Expand Down Expand Up @@ -3294,7 +3299,7 @@
</div>
<div class="cell">
<div class="cell-output-display">
<div class="countdown" id="timer_ca433cbc" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown" id="timer_f42943e9" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown-controls">
<button class="countdown-bump-down">−</button><button class="countdown-bump-up">&amp;plus;</button>
</div>
Expand Down Expand Up @@ -3874,18 +3879,12 @@
</section><section id="other-hosting-options" class="slide level2" data-menu-title="Alternative ways to host apps"><h2></h2>
<p><span class="slide-title">Other ways to host your Shiny apps</span></p>
<hr>
<p class="body-text-s">
<a href="https://www.shinyapps.io/">shinyapps.io</a> is not the only Shiny app hosting service (though it’s the easiest to get started with and the only one we’ll be covering in detail in this workshop).
</p>
<p><a href="https://www.shinyapps.io/">shinyapps.io</a> is not the only Shiny app hosting service (though it’s the easiest to get started with and the only one we’ll be covering in detail in this workshop).</p>
<p class="body-text topbr">
<strong>Posit also offers the following:</strong>
</p>
<p class="body-text-s">
<span class="teal-text"><i class="fa-solid fa-angle-right" title="a bullet point" aria-label="angle-right"></i></span> <a href="https://posit.co/products/open-source/shinyserver/">Shiny server</a> is an open source server which you can deploy for free on your own hardware. It requires more setup and configuration, but can be used without a fee. The Bren and NCEAS servers are configured with Shiny Server for hosting for some in-house apps.
</p>
<p class="body-text-s topbr">
<span class="teal-text"><i class="fa-solid fa-angle-right" title="a bullet point" aria-label="angle-right"></i></span> <a href="https://posit.co/products/enterprise/connect/">Posit connect</a> is a paid product that provides an advanced suite of services for hosting Shiny apps, Quarto and R Markdown reports, APIs, and more.
</p>
<p><span class="teal-text"><i class="fa-solid fa-angle-right" title="a bullet point" aria-label="angle-right"></i></span> <a href="https://posit.co/products/open-source/shinyserver/">Shiny server</a> is an open source server which you can deploy for free on your own hardware. It requires more setup and configuration, but can be used without a fee. The Bren and NCEAS servers are configured with Shiny Server for hosting for some in-house apps.</p>
<p><span class="teal-text"><i class="fa-solid fa-angle-right" title="a bullet point" aria-label="angle-right"></i></span> <a href="https://posit.co/products/enterprise/connect/">Posit connect</a> is a paid product that provides an advanced suite of services for hosting Shiny apps, Quarto and R Markdown reports, APIs, and more.</p>
</section><section id="hosting-recommendations" class="slide level2" data-menu-title="App hosting recommendations"><h2></h2>
<p><span class="slide-title2">So how should <em>I</em> host my app?</span></p>
<hr>
Expand Down Expand Up @@ -4264,12 +4263,12 @@
<path d="M88 0C74.7 0 64 10.7 64 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C120.5 112.3 128 119.9 128 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C119.5 47.7 112 40.1 112 24c0-13.3-10.7-24-24-24zM32 192c-17.7 0-32 14.3-32 32V416c0 53 43 96 96 96H288c53 0 96-43 96-96h16c61.9 0 112-50.1 112-112s-50.1-112-112-112H352 32zm352 64h16c26.5 0 48 21.5 48 48s-21.5 48-48 48H384V256zM224 24c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C232.5 112.3 240 119.9 240 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C231.5 47.7 224 40.1 224 24z"></path></svg> Break
</p>
<p class="caption-text">
<em>Next, we’ll finish up v1 of our app by adding some intro text to the landing page</em>
<em>Next, we’ll start building out a shiny dashboard!</em>
</p>
</div>
<div class="cell">
<div class="cell-output-display">
<div class="countdown" id="timer_e6eea072" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown" id="timer_4a4806fc" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown-controls">
<button class="countdown-bump-down">−</button><button class="countdown-bump-up">&amp;plus;</button>
</div>
Expand Down Expand Up @@ -4608,8 +4607,8 @@
<div id="tabset-7-1">
<div class="cell">
<div class="cell-output-display">
<div class="leaflet html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-4d842d78fb093cdf914d" style="width:960px;height:480px;"></div>
<script type="application/json" data-for="htmlwidget-4d842d78fb093cdf914d">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["Esri.WorldImagery",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addMiniMap","args":[null,null,"bottomright",150,150,19,19,-5,false,false,false,true,false,false,{"color":"#ff7800","weight":1,"clickable":false},{"color":"#000000","weight":1,"clickable":false,"opacity":0,"fillOpacity":0},{"hideText":"Hide MiniMap","showText":"Show MiniMap"},[]]},{"method":"addMarkers","args":[[70.032,70.236,70.17,70.233,70.27,70.267,70.032,70.09699999999999,70.247,70.113,70.246],[-152.194,-152.186,-152.785,-151.339,-151.355,-151.387,-152.194,-152.074,-151.478,-152.077,-152.141],null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},["Site Name: HarryPotter <br> Elevation: 12.3 meters (above SL) <br> Avg Depth: 2.3 meters <br> Avg Lake Bed Temperature: 5.6 deg Celsius","Site Name: Hipbone <br> Elevation: 21 meters (above SL) <br> Avg Depth: 2 meters <br> Avg Lake Bed Temperature: 10.7 deg Celsius","Site Name: Iceshove <br> Elevation: 20.3 meters (above SL) <br> Avg Depth: 1.8 meters <br> Avg Lake Bed Temperature: 10.9 deg Celsius","Site Name: L9817 <br> Elevation: 16.1 meters (above SL) <br> Avg Depth: 2.6 meters <br> Avg Lake Bed Temperature: 5.9 deg Celsius","Site Name: L9819 <br> Elevation: 8.2 meters (above SL) <br> Avg Depth: 1.7 meters <br> Avg Lake Bed Temperature: 5.6 deg Celsius","Site Name: L9820 <br> Elevation: 9.5 meters (above SL) <br> Avg Depth: 1.1 meters <br> Avg Lake Bed Temperature: 5.5 deg Celsius","Site Name: LittleAlaska <br> Elevation: 28.9 meters (above SL) <br> Avg Depth: 1.2 meters <br> Avg Lake Bed Temperature: 5.2 deg Celsius","Site Name: LowerSnowman <br> Elevation: 27.4 meters (above SL) <br> Avg Depth: 1.2 meters <br> Avg Lake Bed Temperature: 7.2 deg Celsius","Site Name: M9925 <br> Elevation: 14.7 meters (above SL) <br> Avg Depth: 0.9 meters <br> Avg Lake Bed Temperature: 7 deg Celsius","Site Name: MiddleSnowman <br> Elevation: 26.3 meters (above SL) <br> Avg Depth: 1.1 meters <br> Avg Lake Bed Temperature: 6.4 deg Celsius","Site Name: Serenity <br> Elevation: 12 meters (above SL) <br> Avg Depth: 3.9 meters <br> Avg Lake Bed Temperature: 10.7 deg Celsius"],null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"setView":[[70.249234,-152.048442],6,[]],"limits":{"lat":[70.032,70.27],"lng":[-152.785,-151.339]}},"evals":[],"jsHooks":[]}</script>
<div class="leaflet html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-540c0736562f4272b778" style="width:960px;height:480px;"></div>
<script type="application/json" data-for="htmlwidget-540c0736562f4272b778">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["Esri.WorldImagery",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addMiniMap","args":[null,null,"bottomright",150,150,19,19,-5,false,false,false,true,false,false,{"color":"#ff7800","weight":1,"clickable":false},{"color":"#000000","weight":1,"clickable":false,"opacity":0,"fillOpacity":0},{"hideText":"Hide MiniMap","showText":"Show MiniMap"},[]]},{"method":"addMarkers","args":[[70.032,70.236,70.17,70.233,70.27,70.267,70.032,70.09699999999999,70.247,70.113,70.246],[-152.194,-152.186,-152.785,-151.339,-151.355,-151.387,-152.194,-152.074,-151.478,-152.077,-152.141],null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},["Site Name: HarryPotter <br> Elevation: 12.3 meters (above SL) <br> Avg Depth: 2.3 meters <br> Avg Lake Bed Temperature: 5.6 deg Celsius","Site Name: Hipbone <br> Elevation: 21 meters (above SL) <br> Avg Depth: 2 meters <br> Avg Lake Bed Temperature: 10.7 deg Celsius","Site Name: Iceshove <br> Elevation: 20.3 meters (above SL) <br> Avg Depth: 1.8 meters <br> Avg Lake Bed Temperature: 10.9 deg Celsius","Site Name: L9817 <br> Elevation: 16.1 meters (above SL) <br> Avg Depth: 2.6 meters <br> Avg Lake Bed Temperature: 5.9 deg Celsius","Site Name: L9819 <br> Elevation: 8.2 meters (above SL) <br> Avg Depth: 1.7 meters <br> Avg Lake Bed Temperature: 5.6 deg Celsius","Site Name: L9820 <br> Elevation: 9.5 meters (above SL) <br> Avg Depth: 1.1 meters <br> Avg Lake Bed Temperature: 5.5 deg Celsius","Site Name: LittleAlaska <br> Elevation: 28.9 meters (above SL) <br> Avg Depth: 1.2 meters <br> Avg Lake Bed Temperature: 5.2 deg Celsius","Site Name: LowerSnowman <br> Elevation: 27.4 meters (above SL) <br> Avg Depth: 1.2 meters <br> Avg Lake Bed Temperature: 7.2 deg Celsius","Site Name: M9925 <br> Elevation: 14.7 meters (above SL) <br> Avg Depth: 0.9 meters <br> Avg Lake Bed Temperature: 7 deg Celsius","Site Name: MiddleSnowman <br> Elevation: 26.3 meters (above SL) <br> Avg Depth: 1.1 meters <br> Avg Lake Bed Temperature: 6.4 deg Celsius","Site Name: Serenity <br> Elevation: 12 meters (above SL) <br> Avg Depth: 3.9 meters <br> Avg Lake Bed Temperature: 10.7 deg Celsius"],null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"setView":[[70.249234,-152.048442],6,[]],"limits":{"lat":[70.032,70.27],"lng":[-152.785,-151.339]}},"evals":[],"jsHooks":[]}</script>
</div>
</div>
</div>
Expand Down Expand Up @@ -4663,8 +4662,8 @@
<div id="tabset-8-1">
<div class="cell">
<div class="cell-output-display">
<div class="leaflet html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-48bab210c89fb963c204" style="width:960px;height:480px;"></div>
<script type="application/json" data-for="htmlwidget-48bab210c89fb963c204">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["Esri.WorldImagery",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addMiniMap","args":[null,null,"bottomright",150,150,19,19,-5,false,false,false,true,false,false,{"color":"#ff7800","weight":1,"clickable":false},{"color":"#000000","weight":1,"clickable":false,"opacity":0,"fillOpacity":0},{"hideText":"Hide MiniMap","showText":"Show MiniMap"},[]]},{"method":"addMarkers","args":[[70.032,70.233],[-152.194,-151.339],null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},["Site Name: HarryPotter <br> Elevation: 12.3 meters (above SL) <br> Avg Depth: 2.3 meters <br> Avg Lake Bed Temperature: 5.6 deg Celsius","Site Name: L9817 <br> Elevation: 16.1 meters (above SL) <br> Avg Depth: 2.6 meters <br> Avg Lake Bed Temperature: 5.9 deg Celsius"],null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"setView":[[70.249234,-152.048442],6,[]],"limits":{"lat":[70.032,70.233],"lng":[-152.194,-151.339]}},"evals":[],"jsHooks":[]}</script>
<div class="leaflet html-widget html-fill-item-overflow-hidden html-fill-item" id="htmlwidget-ab09c93688131ad20352" style="width:960px;height:480px;"></div>
<script type="application/json" data-for="htmlwidget-ab09c93688131ad20352">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addProviderTiles","args":["Esri.WorldImagery",null,null,{"errorTileUrl":"","noWrap":false,"detectRetina":false}]},{"method":"addMiniMap","args":[null,null,"bottomright",150,150,19,19,-5,false,false,false,true,false,false,{"color":"#ff7800","weight":1,"clickable":false},{"color":"#000000","weight":1,"clickable":false,"opacity":0,"fillOpacity":0},{"hideText":"Hide MiniMap","showText":"Show MiniMap"},[]]},{"method":"addMarkers","args":[[70.032,70.233],[-152.194,-151.339],null,null,null,{"interactive":true,"draggable":false,"keyboard":true,"title":"","alt":"","zIndexOffset":0,"opacity":1,"riseOnHover":false,"riseOffset":250},["Site Name: HarryPotter <br> Elevation: 12.3 meters (above SL) <br> Avg Depth: 2.3 meters <br> Avg Lake Bed Temperature: 5.6 deg Celsius","Site Name: L9817 <br> Elevation: 16.1 meters (above SL) <br> Avg Depth: 2.6 meters <br> Avg Lake Bed Temperature: 5.9 deg Celsius"],null,null,null,null,{"interactive":false,"permanent":false,"direction":"auto","opacity":1,"offset":[0,0],"textsize":"10px","textOnly":false,"className":"","sticky":true},null]}],"setView":[[70.249234,-152.048442],6,[]],"limits":{"lat":[70.032,70.233],"lng":[-152.194,-151.339]}},"evals":[],"jsHooks":[]}</script>
</div>
</div>
</div>
Expand Down Expand Up @@ -5441,7 +5440,7 @@
</div>
<div class="cell">
<div class="cell-output-display">
<div class="countdown" id="timer_6750e150" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown" id="timer_c470e597" data-update-every="1" data-play-sound="true" tabindex="0" style="right:0;bottom:0;font-size:2em;">
<div class="countdown-controls">
<button class="countdown-bump-down">−</button><button class="countdown-bump-up">&amp;plus;</button>
</div>
Expand Down Expand Up @@ -10151,7 +10150,7 @@
This is a Quarto Presentation. To learn more, visit <a href="https://quarto.org" class="uri">https://quarto.org</a>.
</center>
<center>
<span style="font-size: 60%;"><em>If you see mistakes or want to suggest changes, please create an <a href="https://github.com/UCSB-MEDS/customizing-quarto-websites/issues">issue</a> on the source repository.</em></span>
<span style="font-size: 60%;"><em>If you see mistakes or want to suggest changes, please create an <a href="https://github.com/UCSB-MEDS/EDS430-Shiny/issues">issue</a> on the source repository.</em></span>
</center>
</div></aside></section>
</div>
Expand Down
17 changes: 15 additions & 2 deletions index.qmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,19 @@ format:
- meds_styles.scss
---

## {#banner data-menu-title="~~~ BANNER ~~~" background="#053660"}

<br>
<br>

[These EDS 430 (Intro to Shiny) materials are no longer maintained!]{.custom-title}

[Please visit the new [course website](https://ucsb-meds.github.io/EDS-430-Intro-to-Shiny/) if you're looking for the most up-to-date versions of these slides]{.custom-subtitle2}

[Thank you {{< fa face-smile title="smiling face" >}}]{.custom-subtitle3}

---

## {#title-slide data-menu-title="~~~ Title Slide ~~~" background="#053660"}

[EDS 430 - Intro to <img src="images/shiny_text.png" alt="The word 'Shiny' in cursive lettering, which is the logo used by Posit for the shiny package." style="display: inline-block; margin: 0; position: relative; top: 25px; width:130px;height:90px;"/>]{.custom-title}
Expand Down Expand Up @@ -246,7 +259,7 @@ countdown::countdown(

<div class="page-center vertical-center">
<p class="custom-subtitle bottombr">`r fontawesome::fa("mug-hot", fill = "#d2e3f3", a11y = "sem")` Break</p>
<p class="caption-text">*Next, we'll finish up v1 of our app by adding some intro text to the landing page*</p>
<p class="caption-text">*Next, we'll start building out a shiny dashboard!*</p>
</div>

```{r}
Expand Down Expand Up @@ -416,5 +429,5 @@ knitr::include_graphics("images/sparkle.gif")
::: aside
<center>This is a Quarto Presentation. To learn more, visit <https://quarto.org>.</center>

<center><span style = 'font-size: 60%;'>*If you see mistakes or want to suggest changes, please create an [issue](https://github.com/UCSB-MEDS/customizing-quarto-websites/issues) on the source repository.*</span></center>
<center><span style = 'font-size: 60%;'>*If you see mistakes or want to suggest changes, please create an [issue](https://github.com/UCSB-MEDS/EDS430-Shiny/issues) on the source repository.*</span></center>
:::
Loading

0 comments on commit bc55f5c

Please sign in to comment.