Examine designs for course layout

[oharac]

As long as we're digging into the details of coreR etc, perhaps this is a good opportunity to see if we want to make any design changes to the overall layout.

Some course layouts to examine:

• Carmen's EDS 220 site and GitHub repo
  • Carmen's site looks very similar in structure to the coreR layout - left side navbar for whole course (with collapsible headers for key sections of the course), right side TOC for each lesson
  • see if the headers for course sections could be incorporated easily - e.g., for coreR have sections for day 1, day 2, etc.
  • maybe an optional named vector for sessions - the name is the course section, the vector element is the lesson filename
• Sam's EDS 212 site and Github repo
  • This site is a different layout - tabs at top with links to syllabus and a dropdown tab for daily materials
  • The pages for the daily materials are similar in basic format - though she uses a very different layout for each day's materials
  • Each day's page includes a table with links to slides and interactive sessions for morning and afternoon.
  • Then the interactive materials are like a Quarto book format as well.
• Sam's new template for all MEDS courses and the Github repo

[camilavargasp]

Another idea here is to create something like this with intro slides to introduce the big picture of what we will cover during the lesson (first walk through the code step-by-step without live coding), then move to "let's do it together" and live code. Finally, if time permits, do a short practice where participants get to apply what we learned.

[camilavargasp]

from @oharac
I like that, and it wouldn't be too hard to do, though it would work best using Quarto slides instead of Google Slides. Quarto slides would be version controllable within the packages, while Google Slides would possibly get out of sync with links, updates, etc.

[camilavargasp]

I 100% agree about quarto slides! Also, they have great functionalities for adding and highlighting code, which is very handy when explaining how each line of code works.

[camilavargasp]

from @oharac
I feel like they're kind of hard to set up if you need lots of images, but for what we're doing, they should not be that bad... once we get to the phase of reviewing specific lessons we can Quarto-ize the Google Slides. Maybe once we've updated the lessons in nceas-training, we should pick one to focus on to create a "gold standard" design for the new organization scheme

[oharac]

I started playing around with CSS and YAML to make the rendered book look a little more like the Learning Hub site

• changing the font to resemble Avenir (which is on the LH site, but not freely available)
• changing the heading colors to match the green on the LH site
• adding a title-block to match the color of the top bar of the LH site - note, we can put an image in there like the gradient background to look even cooler, maybe get the NCEAS butterfly logo on there or the LH hex sticker on there?

Here is a test course that we can use to play around with the aesthetics

[camilavargasp]

This looks great! Love the idea of customizing the book. We have a styling guide we created last year. We probably don't need to use the exact font of the NCEAS website, but have a font that we use across our materials. Find styling guide here: https://docs.google.com/document/d/1TTDdxCXuyqDoY8VaXNbnVCWrf9djwb2dww92lBGJeEo/edit?tab=t.0

[oharac]

haha I hadn't seen your response when I was talking about a style guide this afternoon... but you'd already beaten me to it!

I asked for our nceas-learning-hub org to be a beta tester for the new Github sub-issues feature that just is starting this month - perhaps that is the answer to our project organization questions!