 Welcome everybody to professional, polished and presentable. Sylvie and I are super excited to bring this to you. We had a lot of fun putting this together, and we hope that you have a lot of fun with us today. And about that, I just want to say a couple of quick words at the beginning about creating a safe environment that everyone can feel comfortable to have fun. So we are going to be following the code of conduct from Usar. It's on our web page. Hopefully you have found our web page already. That will be very helpful and totally necessary to find during this workshop. And you can find our code of conduct there. If anything happens during our tutorial that makes you uncomfortable that you would like to talk to someone about, please feel free to reach out privately to me or Sylvie or any of the people who have TA in their name. They'll be helping us out. We're going to introduce themselves in just a second. Another quick note, we're also recording this session. The video will be available later. Feel free to keep your cameras and microphone off during the main section, but we will be using breakout sessions and going out into those to do some activities. In those sessions, they will not be recorded and you can feel comfortable turning your video and microphone on if you prefer and hopefully interact with the other people in your groups. So with that, let's get started. First of all, my name is Garrick and I work for our studio and I do a lot of tinkering with sharing in things and I'm very happy to be here today. And we're going to have our teaching assistants introduce themselves as well. We'll start with Shannon, please. Hi, I'm Shannon Palleggi. I'm very excited to be learning along with you all today. And please reach out if you have questions that I can help you with. Hi, I'm Patricia. And it's a pleasure to be here. Like Shannon said, any questions that you have, I'm here to help you. Thank you. Thank you both. Okay, and I'm Sylvia and I'm the other instructor for this tutorial today. I'm also very excited to be here. I also enjoy using sharing in a lot. And I'm a researcher at the University of Pennsylvania where I use R every day for data analysis. So with that, let's go ahead and get started. But first we're going to do a little tour of the website so everybody can see where everything is. So this is the people page and we have different tabs along the top toolbar. And if you go to materials, this is where you're going to find an overview of the tutorial. There's three different sections or three different acts. And you would have received a link to the pre-work before today with some tasks to complete before the tutorial. And then there are three additional sections. So act one, act two, and act three, and all covering different aspects of using sharing and to make great presentations. And if you get lost at any point, you can always come back to this materials page and find a schedule on the left-hand side of this in the sidebar with links to each of the different sections. And so I'm going to use that to navigate to the first section or scene one, which is setting the stage and we'll get started. This is what a page looks like. We have a title at the top. We have two link buttons, one for slides and the other for activity. The slides are also found embedded on the page that you can use. You can view in full screen using the full screen button on the bottom right of that window. There's a sidebar again on the left that has the different sections also located in there that you can use to navigate the site. And the activity, which I mentioned is linked at the top. You can also find down below the embedded slides. So there's a little topic section about what we're going to cover and then the activity starts under that. Now this section has about how long the activity is going to take, the materials that you'll want to navigate to in your materials repository that you should have downloaded before the tutorial. And then also indicate the activity mode. So for this first section, for example, we're going to use breakout rooms and everybody in their own breakout room will be able to say hello to one another and then work together as a group to complete the activity, which is also included written in this section and also likely be reflected in the slides for each of the different sections that we go through today. Okay. So setting the stage. We're going to do a little bit of review of sharing in. So welcome everyone. We're going to learn how to make great slides with sharing in today, sharing in friends. And so we're going to review a few things. So what is sharing in sharing in is a package that introduces remark j s j s stands for JavaScript to the our markdown package. And you can see the documentation is linked on the right hand side of this slide. And then remark to yes is as the slide indicates here a simple in browser markdown driven slide show tool that's targeted at people who know their way around HTML and CSS. And if that doesn't sound like you right at this moment, don't worry because by the end of the tutorial, you will know your way around HTML and CSS. So what is CSS just to give a really, really quick overview or an example rather CSS stands for cascading style sheet and it turns functional but rather dull HTML content which is shown on the left hand side of the slide which shows the text but without any styling applied to it. And then on the right hand side, we see that the CSS styling helps transform it into HTML content with style. So it looks very, very different on the right hand side. There's a the same slide, but with styling applied and there's different fonts that you can notice. There is a background image different sizes and some additional aesthetic features. So let's get started. We're going to the first thing I want to do is when you navigate to the first section, which is the introduction and it should be label 01-introduction in your materials repository. That folder has a file within it and our markdown file that's called 01-start. So you can go ahead and open that our markdown file, which will probably look pretty familiar since everyone here is probably at least a little familiar with sharing in. And then the next step will be to run the specific function from the sharing in package called infinite moon reader. So if you run this function, you'll be able to render your slides right in the RStudio IDE if that's what you use to preview the slides today. And so we'll be doing this. We will be following these steps a few different times throughout the tutorial today. So if you're able to render the slides and you run infinite moon reader, you will see, and actually let's just go ahead and do that together. So on this screen, what I'm showing is my IDE, which is RStudio. On the left-hand side, I have the 01-start our markdown file open. And then on the right-hand side, I have my console in the upper right, and I have the files visible on the bottom right. And if anybody has or would like to see this a little bit larger, the text anywhere, whether on the website or in the IDE environment, please let us know and I can magnify it. So in this 01-introduction folder of the materials repository, I have this R markdown file that I opened. And so what I'm going to do is run that function in the console that I mentioned earlier. So that is the sharing in infinite moon reader. And these two are the same. So I'm just going to run infinite moon reader. And then we'll see what happens. There's some messaging that shows up in the console. Okay. And then generally you'll see a line in the output that says output created. And then you'll see it's rendered an HTML version of the slides. And so those slides are visible in the bottom right now in the viewer pane. And so this is what we'll be looking at for the activity that we'll be doing in a little bit. But for starters, let's just go back to the slides. My slides. And we can look at what components start this document. We'll review a little bit of that. So the first section of the R markdown file is the YAML. And so it includes lots of different parameters, including a title, in this case a subtitle, the author, the institute, the date, and so on. And so there's also very specific parameters relating to the output, which is the sharing in slide deck. And so we can see here in this YAML, move my options around the screen a little bit, that there's a slide number format specified. There's also a specific syntax highlighting option for code. We also see that code line highlighting is enabled with true. There's also a ratio that you can specify. It's set to 16 to nine. You can also change that to other sizes. Four to three is another popular one. And then the last section here of the YAML is incremental slide counting is set to true. The next piece of the R markdown file is the set up chunk. And so here what I want to draw your attention to is there are some options that are set at the top of your document that will apply to the rest of the document and the different code chunks. And so you can see that there's a few different ones enabled there, like suppressing warnings and messages. And then there's also a couple of lines that load two libraries. One is font awesome, which is an icon package. And the other is tidy verse, which is a collection of data science packages. Okay, so with that, let's move on to the activity. There's a link in the slide that will take you to the activity. And which will be sharing in scavenger hunt. You can also escape full size slides. If you have that. If that's how you access the slides to come back to the main page. And so if we go. Down to the activity section, you'll find different steps. So at this point, I'll ask that Eric. Have people use our separate into the breakout rooms. And then you can start with this section here labeled sharing in scavenger hunt. So the idea is that you'll explore the HTML slide deck that we rendered. In the IDE. And then see if you can identify these different classes and features that are built into sharing in. So try to look at the HTML slides first and explore those and see if you can pick out visually what some of those classes and features might be. And then check the our markdown file to see if you are correct. If you did find the different things that are included in the site deck. All right, we're about to go into breakout rooms. I'll give a one minute warning when we're about to come back into the main room. Have fun everyone. Okay, welcome back everybody. I think everyone has been time warped back into the main room by now. Hopefully you had fun during that session. And just a reminder that sometime that if you don't have enough time for all of to complete the whole activity that all of the instructions are still going to be on our website and you can follow up with them there. So next up we're going to talk about our style guide. So I'm going to just share the link and I'll open the slides. We're going to talk about making a style guide with a with a package called Sharon in themer. So first of all, do you have your style guide on hand? If you don't, you're going to want to get it real quick. Pull that out. Usually you can find these online depending on your organization or depending on. Or maybe you have to talk to the marketing department, but you can generally do something like Google for your company, branding guides, style guide design guides or something like that. And you had search and you'll get back a branding guide, usually a booklet or a web page that kind of goes through a number of different things that are kind of critical for the brand like colors, typography, fonts, some ideas around logos and design and some examples of promotional materials. So we're going to use all of these together to create a full sharing in theme. If you don't have a style guide for your organization, we've picked out a couple. And then on the pre-work page, one of them that I really like is the gov.uk design system. The US web design system is also a treasure trove of information and the urban institute data visualization style guide has a lot of information about designing for data visualization, which is probably of interest to a lot of people here. So the package we're going to talk about today that helps you go from style guide to sharing in theme is appropriately named Sharon in themer. The basic idea with this package is you start with your basic sharing in theme that looks wonderful, but we'd like it to look a little better and a little bit more kind of matching our style guides, right? So adding in Sharon in themer, you're basically one function call away from a complete sharing in theme with just a few choices that you have to make about colors and typography. So how do you get started with sharing in theme? Once you've installed it, you can use the create new our markdown document dialogue in our studio and you can select from template and then pick ninja themed presentation instead of the regular ninja presentation. Inside of that document, which will get you started and kind of has like a whole lot of different components that can kind of demo your theme. There's an archunk. We've got all sharing in themer and we've said it to include equals false so that the output doesn't show up, but what this does is it basically writes out a complete theme. And here's one of the functions. So you do need to make some choices, right? So we need to pick some functions and there's a whole, there are two families basically of style functions. The first one is a monotone. These four functions kind of hinge around one color. So if there's one dominant color for your color palette, you would use style mono. And then depending on how you want the defaults to be set up, you can use style mono light, dark, accent or accent inverse. So accent is basically a light color or white background with the color, the single color as an accent color. And accent inverse is sort of the inverse of that. So a dark slide background with the one color that you're picking as an accent color. The other option is to use the style duo functions. These are prefixed with style underscore duo. This means there are two colors. You pick a primary color and a secondary color and then how they're combined together is the last bit. So either they kind of dominate the slides of style duo. They're used as accent colors that style duo accent or the inverse and that would be accent inverse. It's easy to play. It's easy to switch these around once you start using them. And for most cases, this function style duo accent is going to be a good choice. It's a good place to start. And that's it. We're just going to jump right into trying to use this. If you go to this link, which I'm going to share in the chat window right now, I'm going to send everybody back into the groups. And we'll walk through using your style guide to create a starting theme with just a couple of steps. So in just one second, we'll go back to the breakout room. We're going to spend about eight minutes on this. So I'll see you everyone back here in eight minutes. Have fun. Okay, welcome back again. I hope that was fun. And just a little reminder, if you're having any trouble, your best bet is to talk to the other people in your breakout group or to directly message one of the TAs. It's a little bit hard for me out in the main group to be able to address questions, but the TAs can jump around and we can work together to answer your questions, which probably the first place to start would be in the breakout group too. So I hope that went well. And you're on your way to having a full, a full style, a full sharing in theme style for your slides. Next up, we're going to talk about sharing in extras. So this is probably like the most fun part for me is to talk about these extra little things that we can do for our slides. So I'm going to talk first about some of the features inside of sharing in that are helpful, some things we can do with our markdown, and then a cool little package that you can use to add little bits and pieces of extra things into your slides. So first I'd like to talk about presenter notes. If you haven't used these before, this is a typical slide. Maybe you're talking about popular cultural references and lemurs and you bring up Madagascar the movie. And you want to have some notes for yourself. So you can add notes to your slides using these three question marks. So sort of like you create a new slide with three backticks, you create a section of presenter notes with three question marks, and then you have a section where you can just type some notes to yourself. Once you get to the actual slide, you can push P and then just push P, and you can get to presenter mode. So you can have your slides next to each other. So you can remember to say that basically the only popular cultural references to lemurs is the Disney movie Madagascar. Okay, so presenter mode tips are great. They don't necessarily need to be just for you. They could be for other people who discover your slides afterwards. You can use them as a way to, as you're working through your slides, write presenter notes to yourself and fill in your slide content. That's another great way to do it. If they are for you, though, I would like to show you a little tip about how you can present while looking at your presenter slides. So this all rests on using a private browser window. So there's like three things in there. First of all, you can use this little icon in our studio. You click that on the preview and open your slides in an actual browser and not inside of our studio. The other thing to remember is that actually we really don't want to use Moon Reader because Moon Reader does the neat thing where it flips back and forth between slides, but sometimes it fights with you. So I actually recommend instead that you put your slides online and then present from there, which is what we're doing here. So try not to use Moon Reader. And I'll show you how to use a private browser window in just a second. You can clone the slides into a new window by pressing C, then you pick the full browser or the clone window to share, and then you press P in the window that you're not sharing. So let's see how this looks. Here I have our slides and I click the slides button and actually I right click and I click open link in new private window. And now you can see you don't actually see all of my little browser icons and extensions and stuff. I push C. Sometimes you have to actually like say, yes, please do open this pop-up and you can kind of resize these. I'll sometimes put these on different windows and you pick one or the other to share in Zoom, for example. Push P to enter presenter mode on the other one. And now they are synced up. So you could imagine your audience is seeing the full slides while you're looking just at the presenter nose in front of you. Great. All right, our next little tip. Code and plots. This is like the greatest hard thing about Sharingan. The awesome part about Sharingan is that you can put your code inside of your slides and you can have the output right there. On the other hand, the less awesome part is sometimes the code, like you really want the code to be readable. You want people to be able to look at it. And you also would like people to be able to see the plot that you made. This is a really great example where the plot is out of frame and this is not great. So how can we show the code in the plot separately? Here are two little things that you can use to do this. So the first is you take your R chunk and you add eval equals false. And then later in another slide, you might reference that chunk using this ref.label chunk option and say we're going to use, this says basically use the code from the lemur weight chunk. And this time I might just turn off the echo and get just the output. So what's really great about this option is it works for anything, not just plots. So any kind of R code output that you want, the R code first and the plot later, you can use this trick. Here's another trick. If what you're trying to do is actually separate plots and the code, you can think about it like this. So in a regular R chunk, we run the code and then knit R or R markdown, basically we'll add in this little bit and say we're going to reference, make an image at using this thing, this file is generated from this R code. So we can do this manually. We don't need to rely on knit R to do this for us. So we can do this by saying fig.show equals hide. This hides any figure output from this chunk. And then we can use this function knit R, this function from knit R, right? Called fig chunk. And here you have to say which chunk and then the type of image that you want in this, in my case I want PNG. So this gives us a lot of flexibility. You could put this on a new slide. You could, for example, make it the background image in another slide and have a full screen plot so that everybody can see your plot well. You can do a lot of really neat things with this. Here's one more kind of cool thing. You could put them on the same slide but in different slides. So here I have the code and I have a little panel that I can flip between the code and the output. And now you're saying how do you do this? So this is a, we can do this with a package called sharing an extra. There are a lot of really exciting things in different slides. There's a lot that sharing an extra can do. Here's a full list-ish. I'm sure there's some things that I left out on this list and it's way too long. So you can come back and explore that later but let's talk about just a few things. So first of all, you just saw how to make panels with a feature called panel set and we'll talk about that again. We can, you can add in a feature called tile view which lets you view an overview of your presentation. So if I push O, I now have a full overview of my presentation and I can kind of just jump around. It makes it easy to go back to a previous slide and it also makes it easy to get back to where we were. You can make your slides editable where you can actually like mark sections as things like I want to type here and I can thanks to editable. So you can edit your slides as you're talking. This is great for taking notes, audience participation, Wi-Fi passwords that you don't know before you start the workshop, that kind of thing. And then finally, scribble. I like scribble. It lets you write on your presentation. So you may have noticed this little pencil icon up here. If I click this, I'm now in scribble mode and I can actually draw on my slides and move around. So when you change slides, the scribble stays with the slide. You can push the S button to jump into scribble mode. You can pick your own colors and say this is now purple. This is pretty cool. And also you could clear the scribble away and start all over. Oh, and there's one more. Once you've made your awesome slides, you can share them online using the share again extra. So you see this in action in our website where you have that little share bar along the bottom that helps you navigate through the slides. And this is a great way to make sure that people find your slides and look through them when you find them online. So how do you get sharing an extra? You're going to use remotes to install it and generally call a function, use sharing an extra. And here you can just list the extras that you want to add. Or sometimes you can add them individually by using individual functions like use underscore scribble. Fantastic. So a real quick introduction to panel sets. For a panel set, you have to call, use, you have to add it to your slides. So here I added it with you sharing an extra. And then you open a panel set kind of set area. You add a panel to that and you can put some content in the panel. It's helpful to give the panel a name, which you can do with a dot panel dash name. And at this point now you can have multiple panels all inside one panel set. And you got something that looks like this. There's one last option, which is this very common situation where you have an archunk that you'd like to put in a panel set and you can do this by wrapping it in panel set and then just adding panel set equals true to the chunk and this is how you get code that looks like this. So we are going to jump into our activity. You get to kind of play around with the things that I just showed you and walk through them. I'll keep the breakout room open until the top of the hour. If at some point though you'd like to get up and go take a break, please feel free to do so and we will start back here again at the top of the hour. So I'll see you all soon. Have fun. Okay, we're going to go ahead and get started with the next section. Can someone confirm that they can see my slides that I'm sharing? Yes, I can. Great, thank you. So this next section, section four, scene four is about effective communication and this section will have active working in your RStudio IDE so you don't need to worry about looking over there or working in there, but it will be interactive in the sense that you'll try to ask questions and encourage people to think about certain things as we go through some specific slides. So effective communication is great because it captures the attention of your audience. It can help convince others of your findings. It can help you teach more effectively if that's something that you do and generally speaking, it helps you reach a broader audience. So how can or how does sharing already help us build effective presentations? So for this section, the next one, we're going to be looking at or using some guidelines, some guidelines for accessibility that were developed by the authors of making scientific content more accessible, which is linked on the slide at the bottom, to explore how these things are intertwined with just effective communication in general and reaching a broader audience. So back to the question of the slides, how does sharing already help us do this? So the first two items on this list, the first one says, use the right markup for your presentation structure. So luckily for us sharing in, because it lets us create slides using our markdown, it already helps us do that sort of thing because we are already familiar with using headings and structuring content for markdown and that in and of itself helps create more accessible output because these things end up being hard coded into the HTML code that goes into creating your slides or other kinds of websites if you're using our markdown in different ways. The second item on this list is the recommendation is to stick to widely used and open file formats. So again, because sharing can help us make HTML slides that we can share openly, we can post them on GitHub, we can post them using Netlify. It already helps us do this, so widely sharing our content openly. So let's dive into these other four items on the list with a little more detail. So this slide is that when we think about creating effective slides, it goes really well and it goes hand in hand with making slides accessible. So there's a figure on the right-hand side of this slide from the inclusive design one-on-one toolkit by Microsoft. And so it's meant to represent this idea that when you're designing for one more constrained situation or a particular user and that you could extend that design and that solution to the broader population. So it's really not ever being made only for one specific group or for one specific individual because when we center accessibility in our design process, we end up extending great features and solutions to everybody. So the figure represents there's a persona that has one arm and so the process will start here with maybe designing a solution for somebody with one arm and that would be considered a permanent disability, for example. But the same kinds of solutions that help that person also help somebody that has a temporary disability, for example, an arm injury. And then following that down the line even further, that also helps people that might be limited by their situation. So maybe somebody is a new parent and they're holding their child and so they only have the ability to use one of their arms, for example. This kind of shows one example of what the process could look like when we're designed for a specific group but then extend these solutions to the broader population. So three of the other principles that are highlighted by this inclusive design 101. The first one is that you recognize exclusion and so that really speaks to tapping into empathy for other people and the experiences that they have and using that to help empower the solutions that we design, keeping those people in mind the entire time. The second one is the one I've alluded to quite a bit which is to solve for one but extend to many. And the third one listed here is to learn from diversity. So when we design documents or presentations or solutions in any other way, it's important to center the people that you are building a solution for and so it's important to ask these communities about or for their input, for their experience because they are the experts with their experiences and those are the experiences that you'd like to help support in the design of your tool or your slides, for example. So design for the mode of delivery is another one of the guidelines. So one of the things I wanted to really highlight here is that when we're making slide decks we don't need to feel constrained by the idea of having everything that we are working on that could maybe live in a publication of some kind. We don't need to feel constrained to fitting that all into a slide deck. And so that really just speaks to how there's different design considerations for slides than for papers or posters and so we're going to learn a little bit more about how to leverage that today. So one of the recommendations that I would have would be to design content with fewer and more focused details. So only focusing on content that is helping carry your message forward. On the right hand side there are some design tips that are adapted from a book by Jonathan Schwabisch called Better Presentations. I really recommend it. It's got great resources and a nice framework to think about. So the design tips are use context-relevant visual aids to help communicate your message. Focus attention and include only the most relevant details. So again, only that information that helps carry your message. And then unify your content by maintaining some consistency in how you lay out the content and structure it. So let's dive in a little deeper as to what that means in practice. So what does it mean in practice when we're using visual aids and sharing in? So on this slide I have four different tabs using panel sets which we got a peek at in the last section. And the first one says not good. So I would say that this slide example is not good. And so let's travel to that specific slide so we can get a closer look at it. And in doing that I'm going to demo a feature of sharing in that's built in that can be really handy. So there's a link here that says example slide calling not good. So I'm going to click that link and that takes me directly to that slide that I had a screenshot of prior. And so there's some content here and generally speaking visually this is not a very visually appealing slide. So let's travel back to the original slide which I've included a link to on the bottom here. And so the reason I'm showing how this can be done is because sometimes you might want to have a diagram or a graphic of some kind some kind of visual representation of data on one slide but you often will want to provide a different way of examining the same data maybe as an HTML table. And so it might be too much to fit on one slide but you can split it up into different slides and then link between them right within sharing it. And so if I hit the letter P to look at my presenter notes on the right hand side you'll see presenter notes for this slide. And so we'll see here there's a heading here that's where the notes for the slide are and then the notes for the next slide are a little bit further down but here we see that we can use markdown within our presentation notes and what I want to draw your attention to here is that the slide with the heading visual not good I've given it a name right underneath where I began the slide so right after the three dashes I give it a name of visual not good and then below that is where I would place my slide content and so I can use that name to then link to that slide anywhere else in the slide deck and the way I would do that is by using the hashtag and then the name of the slide that I'd like to link to. So that's how I'm using these features in the current slide deck. So let's travel back to the first or to the last slide that we were looking at I'm having a hard time clicking this oh well for some reason it's not I'm not able to click this okay so instead I'm going to use I'm going to hit oh and use overview and travel back to that slide instead okay so what would a better version of this be so we started with not good and the next one is good so there's some changes here that make it look a little bit better oops so let's go back to not good and flip to good so we can see that there's something more appealing about the way that the visual good slide looks and then if we take it a step even further there's a better version of this and so I'm going to flip back and forth a few times I want you to see if you can notice what looks different and what you like more potentially so this is good and this is better sometimes and so what I would say to summarize this is that you want to avoid writing a wall of text which was what the not good slide was doing and you want to break up the content and then you I would recommend also adding a visual aid if it's going to help carry the message if it's going to detract from the message then maybe it's not as great of a tool to have at your disposal and the other tip is to turn your visual into a larger background image so we don't need to in this case we don't need to limit ourselves to wherever the image can fit on the right hand side of that slide but if we make it a background image we make a little bit better use of that space and so I say it's better sometimes because not all images are going to look great as a background sometimes it might interfere with the text that's on the slide and that ends up detracting from your message so so that's something to consider when you're designing your slides and so I have a note here that if your text overlaps with the background image and you really would like to use it then maybe consider using some CSS styling to give your text a background for contrast and so we'll go through that a little bit later okay this next one is about focusing attention so this is an okay slide and this is where we left off in the last slide so the last slide we were talking about visuals and using visual aids and so for this one we're going to be talking specifically about how to focus attention and so we're starting with the slide that has some text on the left hand side that's broken up into different paragraphs and we have a large background image on the right hand side so it looks okay but the next one the next one looks a little bit better so I'm going to flip back this one looks okay and this one looks a little bit better part of why it looks better is because it's broken up a little bit more there's bullet points and so there's less text on the slide and it's organized a little bit differently and then it can look even better in some cases if you emphasize the strong points with color or with bold and so if I flip back to good and then better we can see some of those differences that's also a matter of personal preference okay an alternative is although we have to travel here to see it okay the alternative is to incrementally reveal parts of your slide and so you would be showing bullet points whenever you wanted the audience to see them and that can be really helpful as an alternative and then there's a version of this with that's a little bit better if you wanted to emphasize certain parts of your text okay and so I say that this is better sometimes because you can't always use incremental reveals and sharing and there's certain situations where you can use it but not always you can't easily combine incremental reveals with different classes for example and then the other piece and let's go back to the focus I can't do it okay we travel back to our focusing attention slide and so let's take a look at the summary points okay I would recommend structuring your text into smaller pieces and eliminating extra text so again the text that isn't helping you carry your message emphasize important words or phrases with text formatting and use incremental reveals to control the timing of your content but it's important I wrote a note here to provide a version of your slides without incremental reveals for people that use screen readers because in sharing and when this one uses incremental reveals it ends up looking like multiple or reading I should say like multiple different slides with each incremental reveal and that can be pretty cumbersome to navigate using a screen reader the next piece of designing for your mode of communication is to unify your content so when we look at when we think about layout I would recommend being consistent in your use of content content classes placing text and images kind of consistently between slides maybe not having images on the left-hand side and then on the right-hand side and then flipping back to the left-hand side so maintaining some consistency there and balancing the content so that the slide is not too full is going to be helpful also and on the right-hand side there are some tips for structure so leverage some of these markdown features like headings and lists to help provide hierarchy and organization to your content use color, font size and font type consistently this is also not a place where you want to be mixing a whole bunch of things together in one slide deck and then the last tip there is to use a similar style or theme of images or photographs so if you like using illustrations then you may also want to use photographs maybe be a little bit thoughtful about when you use each of them so you're not necessarily flipping back and forth between different styles okay this guideline is use clear and simple figures and graphics so when images and figures are really complicated they can be really difficult for your audience to process while you're presenting which also makes it difficult for you to describe your image out loud as you're presenting if it's really complicated that becomes more difficult and then it also makes it difficult then to describe your image with alternative text which we'll talk about a little later as well and this is the text description of an image that a screen reader would use in reading and then right clearly is another big recommendation for accessibility so engage a broad audience with clear language so this might mean providing descriptive slide headings so instead of a heading saying results or methods maybe give the audience the answer by providing a descriptive heading that tells the audience what you'd like them to know about your slide also introduce and define abbreviations define field specific terminology and then also consider writing to an audience outside of your discipline and even outside of academia altogether so in practice what this looks like is trying to write for an audience between the ages of 12 and 15 years old or maybe at an eighth grade reading level if you're targeting a really broad audience or a 12th grade comprehension level if you're targeting an educated or specialized audience and of course that's context dependent so if we have time which I'm not sure if we do I was going to check the readability of the lemur content that we were looking at in our example slides this is also laid out in the activity so I think maybe I would rather skip that demo and ask you to check the activity for some screenshots of what that process looked like let's move on to the next section which is tightly intertwined with this one which is about accessible design okay so with this section we're going to be looking at the next set of guidelines for accessibility from that same publication that I mentioned earlier so let's start off with a reminder that this section does include an activity and so for this you can just follow along with me on the slides or you can follow along with the material in your materials repository folder so again you'd want to restart your R sessions so that it's a little bit easier to run sharing an infinite moon reader to preview your slides so we'll start here with a quote from Tim Berners-Lee who is the World Wide Web consortium director and inventor of the World Wide Web and he says the power of the web is in its universality access by everyone regardless of disability is an essential aspect so this is really important to keep in mind when we're developing content using our markdown that ends up producing HTML that we can show on the web somewhere this is such an easy thing to do with our markdown that it really takes a little bit of extra intention to make sure that the content that we are sharing in this way is accessible to more people so how do we do this I put down the first guideline from our last section here again because it's so important and that's to make accessible your default mindset and centering accessibility other ones include supporting images with text making sure hyperlinks are clear and unambiguous and choosing colors carefully so let's dive in so this is the same slide as before so again just make sure that you're centering accessibility when you're designing documents right from the get go so that you don't have to come back and edit them later but also so that you keep that frame of mind that you're wanting to share work with as broad of an audience as possible we can support images with text by adding alternative text or alt text and this is a textual description of an image that helps the reader understand an image without seeing it and screen readers or screen reader technology provides voice or braille access to computer text including alt text some of the alt text options for our markdown are listed on the right which includes markdown, our markdown code chunks and then raw HTML also so in practice if we wanted to add alt text with markdown we would use the syntax that we're familiar with which is the exclamation point, square brackets and then parentheses and the alt text would get inserted between the square brackets and so here I have an example of an image on the right hand side of three different lemurs and I'm trying to describe the lemurs in this case and so my alt text reads ring-tailed lemurs with alternating black and white rings along the entire length of their tail and then I also have the file image in the parentheses if we wanted to do this with our markdown and our markdown code chunks we can actually add alt text to an our markdown code chunk output with a new code chunk option that is fig.alt and this was released earlier this year so it's a very exciting edition and then the way that this would look would be for example here I have a code chunk that I've opened with three back ticks and a curly brace and I have here being specified as a language in that code chunk and then I follow that with the fig.alt code chunk option and then I insert my alt text between the quotes and so here is my alt text again which is about the ring-tailed lemurs and I'm describing them and then underneath that I would have the content of the code chunk so in this case I'm adding an image using the nitter include graphics function and that's it and so then I add that to the output of that include graphics function and this is really really handy for any kind of any time you're producing an image output but this works with ggplot as well so whenever you make data visualization you can insert and you should insert alt text for that as well so if you're following along in your materials this section talks about adding a text description to the lemur image slide on the slide that's titled ring-tailed lemurs and so in our 05-start.rmd file there's a section where there's an rmarkdown code chunk and the fig.alt code chunk option is there but it's empty and so the activity is to add alt text to there and just practice doing that so something that that I was asking myself when I first started learning how to write alt text and that I've seen other people ask is you know is it a good idea to use the same alt text for all of the images that are identical I mean if you have one image and you're using it different places is it you know appropriate to copy and paste the alt text into these different these different examples given that it's the exact same image and so the answer is not necessarily because writing effective alt text means that we also need to consider the context in which that image is being used. Sometimes an image is just meant to be decorative but other times it's helping you carry a message and that message needs to be reflected on the alt text so consider that you know what if any important information is the image supposed to help you communicate and I've listed three different resources on this slide that I found really helpful and I use very often to remind myself of what kind of mental checks to make when I'm trying to describe an image given the particular context that I'm in. Another guideline for accessibility is to make sure hyperlinks are clear and unambiguous so our markdown and sharing can help us communicate using hyperlinks because you can insert hyperlinks right in your sharing in slides which is great and we've already seen a lot of examples using that but these links are most useful when they make sense out of context and they should be clearly labeled so this means avoiding links like here click here more read more because on their own they're not really telling us anything it's better to to give them descriptive titles and that's what the next activity is for whether you do it right now or whether you decide to do it later the activity is to edit the link text to be more descriptive so there's a spot in the 05-start our markdown file there's a slide called ring-toed lemurs and so the activity is to replace the link titled here with link text that makes sense out of context and so the chunk that I'm referring to is on bottom half of this slide and currently it reads the Duke Lemur Center provides more information here and so again here is very ambiguous we don't really know what it's referring to and importantly sometimes when people are using screen readers there's a way that they can access all of the links on a page at the same time so that they can browse different links without having to cruise the entire page for example and so it really really helps to have descriptive titles for that reason rather than having a bunch of links that I'll say something that doesn't make sense out of context and then the last one here the last recommendation which is a really important one is to choose colors carefully you want to avoid using color as the only way to indicate priority or importance or interactivity of something on your slide and so we'll want to check for color independence early and often and the way we can do that is by simulating a gray scale display which I'll demo shortly and then you also want to check the colors in your palette for adequate color contrast and so let's go ahead I can demo this color independence check that I do sometimes so I'm opening my slides in a different tab I'll travel back to the slide we were looking at and so in Firefox I can right click and inspect the page that means pulling up some of the fun behind the scenes stuff happening and there's an option here for accessibility so I'm selecting that in the main toolbar and so within that section there's another tab that says simulate and so if I click on that I can simulate a chromatopsia or no color and that puts your content in gray scale and this can be a nice way for one to check if there's anything that you're wanting to stand out but you can't distinguish it because the colors are too similar and so it might end up looking all the same and this is a really really nice check to make if you're creating data visualizations because you can make sure that the things that you want to be distinguished from one another are not relying on color only to do that and then the activity here would be to use one of the different color contrast checkers that I've linked to check the colors in your style guide so I think we can probably break here for that let me go back to our section page there's an activity here so you might have been following along otherwise you can always come back to this page and so the section about color contrast is near the bottom and it says here check your color tally for contrast it's got some guidance on what to look for if you developed a style guide using sharing in femur it has a link to color contrast ratio guidelines and then it also links to three different checking tools that I like to use the first one is great for checking two colors next to each other and then the second two are tools that are specifically made to check multiple colors against each other for contrast it can be really handy if you have multiple colors in your palette to use one of these tools and then I have an example of contrast checking with the web aim contrast checker that you can look at when you want to okay I think I'll stop here alright let's we'll go into the next section and then in about 540 eastern so about sorry 550 we will have another 10 minute break where everyone can kind of get up and stretch a little bit so hang on let me try something a little bit different for this screen share just so that I can make sure that everybody can see all of the things all right Sylvia can you can everyone see this yes oh great okay so we're going to talk about CSS a little bit I love this tweet from Ejin Maka she said I can't believe that a desire to customize shiny apps and my sharing and slides scammed me finally getting a baseline knowledge of CSS and HTML and that is my goal to scam you into learning a little bit of CSS and HTML so we can make our slides pretty so let's do this together you probably want to restart your R session just so there's nothing hiding out in there you can push control shift and F10 that's a hard one for me to do on my keyboard sometimes but it takes a lot of fingers and then you can open the folder control css and 6-start.rmd I'm going to have little breaks where we can step out and try these things so okay so you've probably seen slides that are sliding are marked down for slides that looks a lot like this where you have a pull a dot pull left and a square bracket and then the dot pull right and a square bracket at dot footnote and maybe you've used these and never thought about them or maybe you've used them and wondered where they came from but we're going to find out today so we're going to make our own versions of these and and see how they work okay so the first thing we're going to do is if you're in that 6-start.rmd you're going to run infinite moon reader and then put dot big around some of the words on the slide just pick some words on the slide and put dot big around it so I'll put a minute on the clock and we'll be and go ahead and try that so if everything went well did did the words get big it's pretty cool right and this is one of those places where infinite moon reader is very helpful because it can you can actually see these changes happen live in inside of our studio if you want and if you have a question please just use the chat to submit that and I'll answer them as we go okay so your slides probably looked like this maybe you put the word maybe you put this dot big around the text most endangered that's what I did and that's kind of so you end up with slides that maybe looked sort of like this your most endangered words got bigger pretty cool okay so if you were inside of our studio now we're going to click this little sort of okay so you find your slides and then in the corner there's going to be the upper left corner of the slides window inside of our studio there's a little window with an arrow and if you click that button it opens in a browser and if your browser is Firefox then it will look exactly more or less like what my browser is but also if you could open it in Chrome that's another great place to do this so I'm going to right click anywhere on this slide and just find this option that says inspect and when I inspect it brings up this whole whole lot of stuff that we saw just a second ago when Sylvia showed us the accessibility testing a quick tour on the left or somewhere you'll see a bunch of these kinds of things this part is HTML and this way you can explore what shows up on your page so you can kind of like just scroll through it and see what each element is and we're going to try to find there's also this button right here in the upper left corner and when you pick it it says pick any element from the page and you can actually hover over parts of the page and see what they are so I'm going to do that to find where it says span where it says big where our big is actually applied and you can see on this part which sometimes depending on how big your window is sometimes it's at the bottom you'll find a big I'll put it back over here you'll find a dot big and then you have this part here that says font size 2 so you could try this if you highlight the 2 and push up or down you can change this live and see what happens right so maybe I want this to be like very big and I'll go to M we'll talk about M in a little bit so now your turn to try this do something interesting with the big class try something else if you click in here click somewhere in here you can start typing new rules so you can try color for example and maybe you're going to put you can just like look through this list here and pick a color and then you can slide with with the text you can see that as I change this it will update and you can kind of walk through and find a color that you like so I'm going to put this back on the screen instructions I'll do another minute on the clock and go ahead and try setting the color or the font property ok so I'm just wrapping up I chose green for my color and I found this one I started typing font and I saw that there's a bunch of different things I found font style and I'm going to type italic here and going back here's what my text looks like now ok so we were doing this inside of the browser which means that if I reload the slides in the browser the changes won't this rule won't be saved anywhere so we're going to actually get this out of the browser and into into our markdown so what you can do is you can right click on this rule and firefox I get a menu that gives me copy rule and chrome I think you might have to highlight the whole rule but you can click copy rule back to our studio find the extra.css file and just paste that in there I'll give everyone a few seconds to do that maybe I might even overwrite the big and have my own my new one and when you save it it'll be reloaded ok so now that you're inside of your extra.css file try writing your own rule called .fade so take a look at the rule that we use for big you're going to follow that pattern and you're going to use that to set opacity to 0.66 then when you're done with that go back to your slides and add .fade around the lemur image I'll put two minutes on the clock for everyone ok so hopefully you have something that looks sort of like this you have in your extra.css file you have a new rule for .fade and it they're open curly braces and then you say opacity 0.66 and if you've put that around the lemur image you probably have something you probably have a faded lemur image now in your slides preview you might have to save the the slides are marked down file so that Infinite Moon Reader will do the updating and then you should have a faded lemur on your slides ok so what you just did is you wrote a CSS rule basically so there's a couple of different pieces to this and we'll start at a pretty low level and the idea is that CSS rules start with the selector the selector says helps the browser find a particular thing on the page it helps go looking through the HTML to find something specific and then property is equal to some value so you change some property of the thing that you found and you set it to this new value right in our case maybe we had for the big class we set the font size to 2M whatever an M is and we set the color specifically to cornflower blue there's two other kind of there's one other kind of concept that's sort of important and there's a difference between as far as sharing is concerned there's a difference between these things when they're written on one line and these things that go around two lines the one thing I want to kind of point out is notice that that here this dot big with the brackets looks a lot like this dot big from our CSS rule and that's really the connection between the two of them so this one that is on just a single line this sort of wraps around just a little section of text whereas when you put the class name so this is called a class when you have the dot and then the words afterwards that's called a class when you put the class name and the brackets around a whole section then it actually it actually contains in sort of like a big box all of the content that's inside so let's look at what this source ends up looking like if we open it in the inspector if I'm going to come here again I'll just click on some part of the slide and click inspect and you can see that I have a you can see here is the pull right I'm going to make this a little bit bigger so you can see it we have a enough focus just on the HTML we have a pull right and then and this goes inside of a div so divs go around whole sections of content and then we have our our the cutest with the class big inside of a span tag and spans go around just like a little tiny sections like few a few words for example and the difference here is in terms of CSS and HTML language the span is inline so it's inside the line and a div is a block element so it's a whole big chunk of something that ends up being on the page okay so let's try this I have a second slide in that start.rmd you can take a look at it contains a figure so we can use the the nitter fig chunk trick that we learned a little bit earlier and with infinite moon reader running you can actually write your CSS inside of two style tags this is kind of fun because when you write your CSS there instead of a separate file you see the updates happening live so I invite you to write this angle bracket style a new line and then angle bracket with a backslash or is that a forward slash style angle bracket again and then write your CSS inside of that chunk and I'm going to put three minutes on the clock with these instructions and I'll leave these up these are also on our activity page and and then when the timer is up we'll move into a break and you can get up and stretch your legs and and we'll be back at the top of the hour we're coming back after break I hope everyone got to stretch out a little bit we're going to go ahead and get started again with our new section just section seven about accessibility with CSS and HTML so this one will build on what we learned in the last section which was the intro to CSS we'll be using some of what we learned there to figure out how to leverage CSS and HTML to make our slides more accessible so I'm going to go ahead and go full screen for now so this section has an activity and so you'll be able to find it in the 07 folder and 07-start.rmd file although I did when I was doing this a couple minutes ago I realized that there's a styling sheet missing in that folder and I apologize but it's okay because what I'll do is just demo the process that you would have gone through anyway so don't worry about opening up anything if you don't want to because I think we will definitely need the styling to have a sense of what we're going to cover. Okay so the first part is adding alt text with HTML so we talked about I think a section 5 about how to add alt text with markdown and also with our markdown code chunks what we didn't talk about was how to do it when you just want to insert an image using raw HTML and we can do this by using the alt attribute within an image tag so an image tag is what inserts an image into your document and so generally there is well I think always there's a source where you indicate which file you would like to insert and then you can also use the alt attribute to insert alt right into that image so a fun fact is that common black lemurs which are featured on the right hand side of this slide will coax toxic millipedes to release toxins and then they use these toxins as insect repellent by rubbing the millipedes all over their fur I thought that was a very fun fact and what I'd like to do is open up the browser inspection which I realized because my co-instructor told me it didn't show last time but I'm hoping it shows this time oh I clicked the wrong button I just want to show you what that looks like on the back end so we travel back to our lemur image I'm going to right click anywhere on the slide click inspect again I'm using firefox and so on my browser the inspection shows up on the left hand side versus with Garrett they were showing up on the right hand side but they're the same tools and so what I want to show here is I'm going to use that pick an element feature that Garrett demoed navigate over to the image so we can see it's selected I click there and so it highlights on the left hand side and so we can see here there is an image tag there's a source attribute that points to where that image is located on my computer or I should say an alt attribute or a repository that's building the slides and then there's also an alt attribute here and you can see that I've inserted some alt text so this is what ends up getting read allowed by screen reader technology and in this case I also specify the width because I wanted it to be a certain width and so you can specify that as well okay so the activity asks us to replace the alt attribute and so we can do that together and so here the suggestion is to replace the text that we just took a look at which is a common black lemur with millipede in one hand and flies hovering overhead with a different alt text that better matches the information being conveyed so in the accessible design section earlier we talked about how we don't necessarily use alt text for every image even if it's identical because it really depends on the context and so the alt text that's provided that starts the talks about the millipede and the flies is appropriate for the slide in which it was used which was talking about this fun fact that lemurs use millipede toxins as insect repellent but in this other example I'm not context relevant and so I'm going to copy this alt text from the right hand side and then I'll switch over to my IDE where I have the 07-start rmarkdown file open hold on a second I think I didn't share that time let me try okay there we go so I'm in my IDE right now there's an 07-start rmarkdown file on the left and then my console on the right so I'm going to run Trangin Infinite Moon Reader to preview my slides and I added the style sheet that was missing and so now we see some styling in the slides but if I navigate to the slide that has these lemurs on it okay so this slide talks about common black lemurs are sexually dichromatic so that means that females and males exhibit differently colored fur in this case and so we want to replace the alt text with something that makes a little bit more sense in that context and so I'm going to replace the alt text here on line 40 which talks about the millipede and the flies with the alt text that we pasted or copied over from the example slide which now reads female common black lemur with brown orange fur and white ear tufts and so that seems more appropriate to this particular slide than the last example of alt text and then likewise the male illustration or the illustration of a male has alt text that describes what a male common black lemur looks like okay back on to the slides what about if we want to add alt text to background images so we talked about how to or how it might be really nice to cover your whole slide with whether it's a data visualization or whether it's an image that you like or that helps you convey your message if we want to add it as a background image we know we can do that with sharing in using classes and properties right under the three dashes that create a new slide but there isn't a space there it's not as easy to add and so what we need to do is we need to use some special attributes to a span tag and so these special attributes are roll and aria label and these are both helpful for screen readers when they're navigating the context and reading aloud what's there and so this is an example of what that would look like so we would have a background image on the slide and then we would insert a line of code that could read span and then specify the role as image and then specify that the aria label is the alt text that we would like it to be and then we close span and that will in effect provide alt text for the background image so in practice this would look a little similar to the slide that we're on right now so in this case I have a background image that I've added to the slide and I specified the URL for that image and then I've specified that I want the image to cover the entire slide and then I have some text written in markdown a heading that I'd like to include and then I insert that span with the roll and the aria label oops and so what it ends up looking like is something like this so there's a background image that covers a whole slide and then there's the heading that I specified and then if we wanted to double check and make sure that the alt text got through we could inspect the slide okay let's see where is it so it's in that div there's our heading and then here under p which is paragraph is where we'll find that span tag that we inserted okay another another way that CSS can help us improve the accessibility of our documents is by helping us style links for example so that color isn't the only indicator sometimes style sheets will use color as a way to distinguish a link from other text and it's not enough information for somebody to know that that's a link that's clickable so the most common or the most familiar decoration that we might see for links around the web is text underlining and so we can use a text decoration CSS property to style the element that corresponds to links which is a and a is for anchor so what we would do is we would want to apply some underlining to our link text so we would navigate to the slide title links and we would paste the CSS rule here on the slide into our extra CSS style sheet so I'm going to copy that come back to my IDE open up my extra CSS file which is empty paste the rule in there and before I save I just want to navigate back to the viewer pane and to the specific slide that we're interested in so in this particular example the slide reads styling links and then the text says this is an example of a link and then it says Duke lemur center 100 lemur days 15 to 30 but just looking at this I can't tell what part of this is a link it all looks the same to me and so by adding this class or the CSS rule to our CSS sheet I'm going to save it and then see how things change so the live preview has now updated the slides and added some text decoration to the link which is the underline so now I can tell what's a link and what's not on this slide so for another example that we can use is styling text with uppercase sometimes we might want to use uppercase letters for emphasis or for aesthetics and it can be like the letters individually using the shift key on your keyboard or caps lock but when we do this it can sometimes cause screen readers to read each letter individually like an acronym not all the time but this happens sometimes and so instead what we can do is use a class that I'm calling upper and it's applying this rule which is a text transform and the transformation is uppercase and so anything in this upper class defining is going to get transformed into uppercase and so the upper class produces capitalized words which is what's happening here but they still read like case-sensitive text to a screen reader so the CSS again looks like text transform uppercase and then behind the scenes if we were to inspect this in the browser we would see a span tag and we would see that the class made is applied and then the text within that span is capitalized words but even though they appear to us to be in all caps on the back end it's still case-sensitive so let's take a look at what that is like in our markdown file with the next activity so I'm going to copy this rule from the slide which is that text transform rule and add that to my CSS sheet and so when I save it let's navigate to the example for uppercase okay so now I'm on a slide titled transforming text to uppercase and I haven't saved my sheet yet so the new rule hasn't applied but I'll do that now okay so now the rule has been applied to some of the text in the our markdown file and so now it reads hello there I'm transforming this text to uppercase where the text is capitalized and that appears in our markdown file this way so there's the upper class that's applied to the words this text in square brackets okay here's another example or another view of the same example where in the our markdown file we would see upper being applied to the words this text and then on the right hand side of this slide we see what that would look like as the output the words this text are in uppercase okay and then the last chunk here is about icons so icons like the wikipedia w that I have I'm using as an example in this slide they need to be used with context in mind so the font awesome package is really great because it has a couple or it has multiple different arguments for the function f a which calls on font awesome icons but the one I want to focus on here is the a 1 1 y argument which where a 1 1 y stands for accessibility it's a common abbreviation I'm not sure that's the right word but that's commonly seen around when people are talking about web accessibility so in this case we set a 1 1 y equals to sdm which stands for or a short for semantic and that provides some extra information from for screen readers on the back end so that when a screen reader reads that the icon allowed it will read like wikipedia w and so the example used here is we're specifying the icon with wikipedia dash w and then we're saying that we would like the accessibility argument to be sdm or semantic and so again our code is shown on the top part of the slide and then behind the scenes what this looks like is an svg or scale vector graphic which is inserted as a function of or because of the function f a in the awesome package and we can see that it's applying some other special attributes we talked about before so there's an aria label here that has information that's read aloud to the screen reader which is wikipedia w and then it also has the image attribute which is specifying oh actually this is backwards I think this should say role equals img or image so I need to fix that and then there will be more svg properties associated with creating that icon and then there's a title that's applied that's the same as the aria label which again is wikipedia w but the icons aren't always conveying information for us sometimes the information around the icon is providing the same information and so it's really not necessary to also add that information on the back end for screen readers and so in this case we can use the accessibility argument equals to deco or deco which is short for decorative and that's the default and so in this case a screen reader will skip over the icon altogether and so I want to note that a decorative icon or a decorative image for that matter is appropriate only when it's not the only element that's conveying important information and again here's an example of what the art code the art code that would be written or we're specifying deco as the accessibility argument and then svg behind the scenes looks similar except there isn't the the title of the icon or anything describing the icon because of the special attribute aria hidden which is set to true and so that hides the element from the screen reader and then this last one is inserting is another way to insert icons which is to use right html and so if you travel to the font awesome website for example and you're looking through icons and you copy the html that's provided there readily that styling or that html code will get will cause a screen reader to skip over the icon and so it's really only appropriate when the icon is decorative and so if we wanted to make it accessible to screen readers then we would add some of those special accessibility attributes that we talked about before like role and aria label we're finished here and you can return to this activity whenever you like I would just recommend copying over a sharing and theme or style sheet so that the slides are rendered appropriately all right so let's do this move to the next activity which is going to be learning a little bit more CSS in one second and I will copy the link into the chat okay so we're gonna do we'll talk a little bit about CSS and then at the end we'll have a short activity we'll go back into our breakout rooms again so we've been kind of like walking around but we've been using CSS to do some basic styling and we've been looking at a little bit of HTML but to get really proficient at writing these kinds of classes and working with them inside of sharing and slides we need to learn a little bit more about the structure of HTML so I have kind of the start of a div element here and there are three pieces to this we have the name of the element so this is a div it has a class which is special and in CSS if I want to focus on the fact that it has the class special I'm gonna write dot special for the div I can just write the name of the or for the element I can just write the name of the element but for the class you have to say okay so this element has class special so I'm gonna put a dot in front of it and then this element also has an ID attribute right and it's called it has the ID slide fact this element by ID I'm gonna put a pound in front of that or a number sign or hash or I don't remember the actual name for this icon but we all call it the hash tag or something right so you do hash slide facts so these are three different ways that you can identify the same element with CSS and I've ordered them on this slide from their least specific to most specific so you can have lots of div elements you have lots of paragraph elements you can have lots of other kinds of elements right and they're all sort of the same some of them might have some of them might have classes and those classes make them a little bit more special and identifying them by classes a little bit more specific but an ID is unique so an element or in HTML your IDs should be unique I mean it won't break if they're not but they should be and so an element that's identified by an ID is like that specific element a class might be a certain type of element and then the just by referencing it by name is like the least specific way that you could reference an element so let's think about how we can put these things together so here's something that might come out of a sharing and slide we have a div has a class of pull right and it has a class of fact so what are some of the ways that we could identify this element here are three possibilities we could call it div and CSS right so how do we select this element CSS we could call it div we could call it dot pull right or we could call it dot fact okay what if we want to find the div that has a pull right class and a fact class we can just put all of these identifiers together and because the div part of this was less specific than the class part we're really totally covered if we just drop the div and say look we're looking for a pull right dot fact dot pull right dot fact so if we're writing a CSS rule that's going to change the style of a pull right or an element with pull right in fact as classes we're going to reference it as dot pull right and dot fact and in the difference between the CSS selector and what we actually write in markdown is so small with sharing and so you just would have put little brackets around your content and that's how you would get an element like the one above okay what if we have just a regular old p tag inside of here so like we have a fact and it's pulled to the right and it says lives in trees and that's going to be inside of like a regular paragraph tag there's nothing special about paragraph except for the fact that it's inside of a div with class pull right and class fact so we can the only way we could identify this element is saying it's p at least finding this specific element but we can use the the fact that it's within the fact class div to locate it in this case there is a little tiny space right here and and that's how we go okay we're looking for fact here and then within fact somewhere inside we're going to have our paragraph tag okay let's see how this actually plays out in some slides to make this easy I like put this all in my in the slide so I have a CSS rules over here that I'm going to fill in and I have some markdown for the slides you can see I have a dot fact in line I also have here's our dot fact dot pull rate and a little note and then another fact and another little bit is that our slide itself has the class special okay so if I show you the whole HTML this is a lot to parse so let's look at the slide but I've added little bits of HTML that are kind of the most relevant pieces so the whole slide is going to be inside of a div with the class special up here and then we have an H1 tag for the heading the first heading or level one heading that says interesting lemur facts we have a paragraph and inside of that there's a fact and then our pull for fact and are another paragraph okay so let's try to change the color of the fact and we'll see what happens so if I say color for fact is dark orange we can see that anything that's wrapped inside of fact becomes dark orange the whole paragraph here becomes dark orange and just the little text here that around diurnal or arboreal become orange I can also change the color everything on the slide by doing something like deep pink and now everything on the slide including the slide like all everything that's inside of the slide with class special so this class special finds this slide and now everything is pink you'll notice though that the heading the H1 tag is not right so maybe there's a more specific rule that's overwriting that but I could still say H1 and write a new CSS rule and say color and now I have to think of a third color maroon right there we go so these colors are not the best obviously but you can kind of start to see where what is what is being applied if I actually go to the slide look just looking at the slide this looks great except for the fact that that I'm also changed the heading for like all of the other slides so I've changed the H1 color for every slide in my deck and that's kind of what this reference in an element just by name will do is it's very generic and we'll just target anything that's in H1 so what if I want to just change the H1 on my special slide so I'll call that special already a rule that has that special followed by a space and then the H1 element and this is any H1s that are inside of a dot special or inside of a div with class special will work so now my slide my special slide is very special and my other slides are normal okay so I want to show you another really cool feature of so this is kind of like how you put together the little pieces so you can find stuff on our slides and I happen to know all of these HTML colors but I'm going to show you a kind of interesting way that sharing in themeer can work with you to make coloring these things and doing stuff a little bit more interesting so there's a feature of CSS called CSS variables which means it's ways that you can store information in variables kind of like you can in R it works very similarly so it would work something like this what if I defined a variable called hot pink and I gave it this this color which you just have to take my word for it is hot pink then I can use that variable by instead of referencing like normally you'd have to write out this part and your CSS you'd have to write out the hash ff 41 before but instead you can use var then the double the double slash is the kind of indicator of variable and you can just drop this in right here and now anywhere that you referenced hot pink is going to work so what if I jump back to my slides and I say var hot pink no I need something else like what about forest green just weird like have different colors here for screen and hot pink I put a there it is there hot pink okay this is awesome but the other really cool thing is that and you can also overwrite these things so I could say that on my special slide the hot pink color is actually going to be sky blue and and so just for my special you can rewrite the variable and do this it's also a nice way to kind of make your things sort of your slides easy to change and part of the reason I'm showing you all of this is because this is something that sharing in themer will do for you so each of the so if you look at like one of the style functions each of the style functions you give it colors you give it a bunch of different parameters and sharing in themer will store those in and the way that you find out which ones they are and how to use them is by going to the documentation and you say okay so I gave you a primary color how can I reference that in CSS and for example the primary if you're using a duo theme will be available as a CSS variable called primary and there's a whole bunch of other ones there so one of the other ways that this can be really helpful is to use the colors argument of any of the style functions so a really common thing would be to write out a set of colors and I like doing this in R it's important that you have names that are going to make sense to CSS so you can't use spaces and you can't use dots in your color names but if you give it sensible names like this color will be called orange and this color will be called pink and if I pass it to the colors argument of style duo or any style function sharing in themer will add CSS variables for this it also gives you classes for each of those colors so I had an orange color and it will give you a class that you can use in your R Markdown called orange and also give you one called dot BG dash orange and that will let you change the background so it will change either the foreground or the background color so this is a really nice way of establishing a palette in R that you can use inside of your inside of your CSS you can use it inside of your R Markdown source and now that it's also in R you could also hand this off to a plotting function like ggplot okay so let's jump over to this the activity which I will share in the chat again and we're going to explore practicing using CSS variables and selectors probably about five minutes in our groups and I'll see you back here in just a few minutes everybody have fun with this one okay welcome back I hope that went alright and you got a little bit of practice but there might even be a little bit more that you can do later afterwards so the last thing I want to talk about is how we can bring all of these ideas together in terms of called design components so I invite you to think about your favorite song what is it about your song that your favorite song that makes it something that you would recognize instantly like how long would it take you to to identify it and like what parts of the song are the things that that you remember or think of would you recognize your song or walking by someone who was playing it in the street is it something that you would recognize if you just heard a few notes played by someone on a piano we can do something similar with our slides in terms of making it easy to identify what is going on in them and what we want people to do it's a lot easier to follow somebody when they're consistent and the structure of your slides and where you put the things on your slides guides people's attention as they listen to you where should you look when you're looking at slides with lots of text and lots of different things going on design makes communication easier if you were following what I was showing on the screen and listening to me it was probably harder to hear and harder to understand exactly what was going on because everything was moving around and so the consistency from design helps us to communicate better because it makes it easier to understand what we're trying to communicate it makes it easier for us to follow and we're giving the audience visual clues about things that they should be doing or should be understanding or should be seeing at certain points in time so let's think about the different ways that you can apply design thinking to sharing in slides and the first place is at the textual level so we saw these inline classes you could put around small words and in this way you would you want to try to think about making these consistent using certain colors to signal certain things using bold to signify certain things and and that way you can think about specific words or specific phrases that you want to apply a little bit of design to to signal your intention with them maybe you want blocks of things you want to have a certain column or a certain type of container to signify something like a yellow box or a red box to be a side note or a sidebar or an important thing that you want people to take away from your presentation and so that would be at the black level and finally you could have special types of slides themselves and one of the ways that we've done this throughout our presentations is to change the background color of all of the headings when we thought maybe you there was an activity that you would be doing those have all been blue with white text and then our regular slides are usually a blue text on a white background and these are the three levels of thinking that you want to bring to to your slides as you're designing them to communicate effectively so I've one little tiny trick that I really want to show you and so I'm just going to squeeze it in right now it's this little thing so you can find lots of really great images from a service online called unsplash they are freely usable images it's very helpful if you if you give credit to the people who took the pictures but they're free to use in your presentations and they look beautiful they were the first three images that I used in this slide deck were from there and we've used lots of images from unsplash so you just go to unsplash.com you can search for something like lemurs you get back a bunch of pictures like these and maybe you like this first picture here in the middle of a group of lemurs and say okay I'm going to use that if you actually click on that image you'll see that there's a link you'll go to the web page and there's an ID for that and the web link is something like unsplash.com if you just take that ID and you change the URL and go to unsplash.com you can just get that image directly from unsplash and so you can make very cool slides with very beautiful backgrounds kind of like this one and here I've used the background image and I've given a URL and here linking to source.unsplash.com with the ID if you happen to know the ratio of your slides in my case I'm using widescreen so they're like 16 by 900 you can actually put that after the ID and you can end up with a perfectly framed image so that's a pretty cool little trick that I really just wanted to share with you so for the final activity we're going to kind of put everything together in one of two ways so your job is to pick which one you would like to do for the next activity and you can either take an interesting quote on a boring slide turn it into a fancy quote slide or you can take a regular slide with a little bit of text and turn it into a sidebar image yeah sidebar slide template so from the activity page you can choose either quote slide, so you can take a slide that looks like this and turn it into a slide that looks like this Or you can choose slide templates and take a slide that looks like this and turn it into a slide that looks like this. So I'm gonna send everybody back into the breakout groups for 10 minutes and I'll see you at the end. Okay, I think everyone's back from breakout rooms. I just wanted to take an opportunity to thank, use our organizers for a great conference and letting us have this time to teach a sharing and workshop. And I'd also love to thank our teaching assistants for today, Bill Shannon and Patricia. They were really wonderful in providing support. Thanks also to the technical support that we had today with David, who's wonderful. Also the Duke Lemur Center, Rachel Hudson, the illustrator and a special thank you to Liz here, who's a colleague and friend and has provided a lot of insight and experience into what it's like to navigate sharing and slides with a screen reader. Oh, and thank all of you also. I forgot about that. I very intentionally wanted to thank all of you for showing up, for waking up early, staying up late and spending this time with us. Yeah, so we'd like to say thank you again. We had a great time with you and we hope you've learned something. And I just want to make a note that all of the materials are available online at the website. They'll stay up there for a long time and you can always go back and check out those materials and come back to them.