presentable-user2021 / website Goto Github PK

• Provide in-slide activity steps in written form as well

Draw from https://policyviz.com/2016/11/30/style-guides/

https://presentable-user2021.netlify.app/materials/prework/

• Change "break"s in schedule to "intermission" 🎭
• Add credit to Rachel Hudson to each Act for her beautiful lemur illustrations 👩🏽‍🎨

Thanks to

• useR!2021 conference and organizing committee
• our TAs
• our learners
• our technical person: David Yabar
• Liz Hare (for sharing her experiences navigating xaringan slides with a screen reader)
• Duke Lemur Center, Rachel Hudson

Find us on Twitter...

The Start page should include a predominant link to Prework

TAs are people, too!

Probably a small typo in the URL to the preview image

Make Professional, ... a link back to the main page, just in case

• intro - Break out with your group
• style-guide - Break out, on your own
• extras - Break out with your group
• effective - Follow along
• accessible design - Follow along
• intro css - Follow along
• accessible web - Follow along
• more css - Break out with your group
• design components - Break out, on your own

• Slides
• Activity Post
• Supporting Materials

Topic

Utilize CSS & HTML in R Markdown beyond xaringan for clear technical communication.

Learning objectives

• .class, element, #id syntax
• CSS variables, esp the ones by xaringanthemer
• margin vs padding
• Combining CSS rules
  • Everything so far has been a single class, how do we put things together?
  • E.g. .slide-class h2 or .slide-class > h2

• Use darker green
• Add underline to anchors a

• Slides
• Activity Post
• Supporting Materials

Goal

Understand why accessibility is important and what to consider when designing slides

• Structure text and graphical content to be cognitively and functionally accessible to the audience

Material

• accessible products essential for some but useful for all
• principles of inclusive design
• inclusive & accessible design as pertaining to xaringan (alt-text, colors, markdown)

Activity ideas

• check color contrast and color independence of style guide colors, modify as appropriate
• practice writing alt-text and/or improve ineffective alt-text
• check at 200% magnification

• Slides
• Activity Post
• Supporting Materials

Topic

Create consistency with reusable design components.

To motivate: an activity inspired by Can't Unsee: compare two slides on the screen. Which one looks "most correct"? (I think this activity would fit a little better in #7 but I could use it here, too)

How can we create consistency and re-usability?

1. At the text level
   • Using markdown or inline classes, esp color classes, like .yellow[word]
   • 👉 Rely on xaringanthemer and be consistent with structure.
2. At the block level
   • Boxes or groups of content that appear on the slide
   • 👉 Write CSS classes (maybe more than one class!)
3. At the slide level
   • When the whole slide is a little different
   • E.g. the header_background from xaringanthemer
   • 👉 Write a slide-level CSS class in combination with layout: true and template from remark

Activity

Two options (attendees will pick one to work on)

1. Create a quote with attribution box — large quote text, small attribution text
   • Write a CSS .quote and .attribution class
2. Create a slide template for a slide with an image on the right
   • Slide-level CSS for .image-sidebar-right and .image-sidebar-right .attribution
   • Template slide using remark variables for the image and attribution details

Exploration

xaringan-template-layout-with-variables.Rmd

Chrome or Firefox (or Edge, I guess)

• Slides
• Activity Post
• Supporting Materials

Topic

Use features from xaringanExtra, xaringan, and rmarkdown that strengthen clarity and accessibility of technical presentations.

• Presenter notes
• Separate code chunks and their output
  • ref.label trick for code and plots on different slides
  • knitr::fig_chunk("<label>", "<ext>")
• xaringanExtra
  • Panelsets (segue from above)
  • Tile View
  • Editable and Scribble
  • extra css

Activity

• Start with slides that have code, a scatter plot and a line plot (scatter + regression)
• Dress up slides with panelset to flip between the three
• Add scribble and turn it into a guess-the-regression game

• Slides
• Activity Post
• Supporting Materials

Topic

End goal: control the precise placement and size of content on the slide.

This section won't involve break out groups, instead follow-along with short on-your-own tasks:

• Start with small demo slides that uses an extra css file with empty classes
• Put .big[ ] around a word in the slide
• Open the slides in Chrome or Firefox
• Right click on that word and select Inspect element
• What rules are being applied to this element?
• Add a rule for the .big class to set font-size: 2em
• Your turn: set the color to yellow
• Your turn: find another property to change, using Tab
• Copy the rule into the CSS file
  • Aside: can also use a css chunk
• Your turn: Write a new rule called .fade that sets opacity: 0.66;
• Your turn: Put .fade[] around an image
• Anatomy of a CSS rule
• What's the difference between inline and block elements?
• Show using .fade[] around an image inline and around a block
  • Reminder: Use the browser to see what you get
• Add .bottom-right to the CSS classes around the image
• Use position: absolute to put the image absolutely where you want it
• Pixels vs ems
• Your turn: choose values that you like for bottom and right, then copy the rule into the stylesheet
• Your turn: Use .bottom-right together with the knitr::fig_chunk() trick (already set up) to put a plot in the bottom right corner
  • Will lead to discovering the biggest difference between inline and block: block elements have a height and a width
  • Use width to size the plot appropriately

• There is currently too much information packed into some slides
• Increase font size

The full view port height makes a very large empty container on mobile.

• Slides
• Activity Post
• Supporting Materials

Goal

Preview a slide deck with inf_mr() that has a customized title slide and helpful setup code chunk

• Use infinite_moon_reader() for quick iteration with xaringan slides
• Setup for success using xaringan's built-in settings

Material

• review YAML
• review content classes (e.g. .pull-left[ ], class: inverse)
• review syntax (e.g. --- is a new slide, ??? adds presenter notes)

Activity ideas

• run inf_mr()
• adjust slide ratio
• customize parameters in YAML
• create basic title slide using parameters and content classes

Follow the iyo lead

Fantastic materials, both in terms of the content, the pedagogy, and the design!

I'll be teaching a large introductory statistics course at UC Berkeley in the spring and am looking for a web framework for our course website. I'm very inspired with what you created here for the workshop. What was your overall impression of using the Apero theme? Would you use it again for a subsequent workshop? Any lessons learned?

Many thanks!

We need to explicitly make a note about needing to also install showtext with xaringanthemer. It's in Suggests because it's not a hard dependency, but it's required by the xaringanthemer template and by the ggplot2 theming stuff.

• Slides
• Activity Post
• Supporting Materials

Goal

Leverage CSS & HTML to make baseline theme more accessible

Material

How to...

• increase font size
• style links
• add alt-text to background images
• describe an icon <i> with aria-label
• use text-transform for UPPERCASE instead of hand-typing it out

Activity ideas

• practice the new techniques shown

• Slides
• Activity Post
• Supporting Materials

Topic

Create a complete theme for xaringan based on your institution or organization's style guide

• xaringanthemer helps you build a complete set of styles for your slides
  • Start with one or two colors: style_duo_* or style_mono_*
  • The rest of the function name describes how those colors create the starting theme
  • The defaults are a starting point
• The xaringanthemer template helps during the process and includes examples of nearly every slide component.
• How to use xaringanthemer
  • (these things are done for you in the template)
  • Set css: xaringan-themer.css in the YAML header
  • Call style_* in an R chunk
  • OR create the xaringan-themer.css file in a separate R script
• Translating a style guide to slides: keep it simple
  • Recreate the look and feel, but it doesn't need to be perfect
  • Don't use every color or every font
    • Example slides that uses every color in the palette
    • Example slides that use just one (or two) colors for emphasis
  • Strive for visual consistency

Activity

This activity can be a bit longer with a guide to move participants through

1. Bring your own style guide (or use one of our favorites)
2. Create a new R Markdown document from xaringanthemer's Ninja Themed Presentation template.
   • I might put the template in the starter kit with a note that you can get to the same place using the R Markdown template.
3. Colors: Use your style guide to pick one or two primary colors to be used throughout your slides.
   • Is one color dominant? Try style_mono_accent()
   • Are two colors commonly paired together? Try style_duo_accent().
4. Typography: style guides typically prescribe specific fonts for headings and text body.
   • Which fonts does your style guide recommend?
   • Sans serif fonts are typically easier to read on screens and at a distance. If your style guide uses both serif and sans serif fonts, try to use serif for the headings. Keep in mind that you can deviate a little for the sake of legibility.
   • Find your recommended fonts on https://fonts.google.com (or a font that is close)
   • Use the _font_google arguments of the style_ functions, together with google_font() to set the fonts for text, heading and code.
5. More Colors: Does your style guide include a palette?
   • Copy those colors into a named vector, e.g. c("plum" = "#8B668B")
   • Color names need to be one alpha-numeric word (plus - or _, but no .)
   • Pass the vector to the colors argument in style_
   • Use the color in your slides: .plum[hello].
6. Explore the other arguments, change a few colors
7. Bonus: Use theme_xaringan() to create a plot that matches the theme

• Slides
• Activity Post
• Supporting Materials

Goal

Understand how to organize content to help focus your audience's attention

Material

• using content classes
• writing descriptive titles (i.e. give your audience the answer)
• add presenter notes
• use incremental reveals (a11y caveat here)
• declutter
• if it's not critical don't include it (use backup slides)
• present graph & html table versions (with backup slides, but panelsets could also be good for this)

Activity idea

• identify and talk through all of the different ways an ineffective slide could be made better. what xaringan tools do you already have that you could use?

Hi,

This is not a problem/bug issue.

In the web page Index.RMarkdown code, you have nice text boxes created with :

::: activity-step

How does this work ?

Thanks!