 Okay, welcome everybody to the next amazing edition of the Global Moodle Mood, it's good to see you all here. I was here last year thinking what an amazing conference and here I am again, so thanks for inviting me again. I hope you won't leave disappointed this time. So my name is Greg and I'm going to talk to you about the UI components your course page can't live without. Okay, as promised in the abstract during this presentation and the conference you'll have access to my Moodle portfolio where you can see more examples. There's only as much as you can fit into a 10 minute presentation so I only chose a couple of examples. The QR code to log in is here. You can just type in either use the QR code, type Moodleportfolio.com and use these credentials to log in. It's guest.account-1 and there's 10 of these accounts. So please pick one, don't all use one, the same account. Last year my site crashed when everybody logged in at the same time so if you have problems getting in just wait a little bit and refresh the page and if things are not showing up as they should just wait a little bit and you will get in eventually and like I said there's a benefit to navigating to that site because you can see more. Okay, so just a couple of prerequisites. To understand everything I say and to be able to do it later on in your own modules you need to have basic understanding of HTML and CSS. You need to look at code and kind of try to know what it does and how to copy and paste it. You need to be a Moodle admin or at least no one because there's some things that need to be set up beforehand before you can add these components. Everything is in my portfolio page, all the explanations you will need. Again, this is a very short session that acts as a demo more than an actual workshop and then you need to have editing access to your module page and that's really it so let's move on. So first we are going to look at these UI components or web components or UI web components that there's sometimes they're called what they are and what they do. Then I'm going to briefly talk about how and where in the actual course page you can add them. The most exciting part will be the examples I'm going to show you and then we'll move on to conclusions. Okay and obviously if there's time for questions then we'll have a few questions. So when we navigate a VLE or a website for that matter we very often come across these consistent elements like buttons, drop-down menus, nav bars, links, cards, etc. And they help us to navigate the website faster but they also help to organize information contained in that website. They're good for navigation etc. But before if you wanted to add these elements you had to kind of code them from scratch. You have to write all the code yourself but recent developments and using some of the frameworks you can see here you can now just quickly copy and paste code that was that's consistently written and from for example from documentation. That's going to make sure that your components will always look the same or you can quickly apply classes to your existing elements and just quickly turn them into a component like a button for example. And you might at this point think to yourself well hold on Greg but you know Moodle already has these when I go to settings page or when I go to activity page buttons are already there and the coordinates and everything and yes you would not be mistaken but very often I feel that when you go down to the course page level and just remove all the navigation around it just picture course page that's where these components can also be added and that will also help a lot with organizing a course page and that's where the idea for this came from. Also it's good to see Sam here from Catalyst that kind of that session is inspired by her last year sessions but Bootstrap made me really think about it and dive deeper into these other frameworks. So as you can see here Bootstrap is one probably the most popular framework has the most number of components also tools that will allow you to make these components responsive like Flexbox and Grid. Shoelace are kind of a newcomer kind of Bootstrap wanna be but also becoming more popular with some additions to Bootstrap doesn't have the layout options but also very powerful and Font Awesome it's an icon library and lotty files is animations and you could argue kind of that these two last ones are just for graphics etc but I think they're actually components on their own because they can be styled they can be combined they can take attributes and again if you navigate to my portfolio you will see examples of that. Okay moving on so where can I add these things in my Moodle page? So label would be a good starting point if you want to have them displayed on the course page obviously you could create a whole page with these on the page resource activity description field that's also one good place to have them almost every activity or resource on Moodle has that field and you can choose to display it on a course page if you wish a quiz question and really anywhere where you can see a text editor that allows you to switch to that HTML view and start coding in that text editor and that's about it so now let's look at some examples now the most exciting part so tags would be very easy it's one example that's very easy to create tags provide extra information about the activity very often I like to tell students if an activity is tracked about the if it's graded if it's if it's if there's a certain amount of time they should spend on it and all that extra information they're more visual you can choose them to just to be displayed on the course page and if you want to provide more information you can just also and as you becoming more familiar with bootstrap and these are the components you can activate them on popovers so you can just create a button that shows the student this message when the button is clicked and you can get a little bit more into that message than just just a tag okay quickly essentially buttons so Moodle allows to link to an activity or resource or a section particular section and this helps especially when you have a lengthy pages and students have to scroll up and down up and down the scroll of death you can create a like a links menu on top of the page and then you can create a link back to that top of the page so students can jump instead of having to scroll I know Moodle 4.0 deals with that really well has that spy scroll I think that's the right name for it but not everybody is on Moodle 4.0 and above so if you still below where if I'm my portfolio still on Moodle 3.9 I am going to upgrade soon but you can create a quick links menu cards very powerful components what cards do very well they help you to combine text images and links together in a consistent and responsive way I have seen in the past courses where people struggle with wrapping text around the images and on a desktop page it looks good but once you start once you start scaling the page on mobile devices the text kind of weirds with wraps around the the the image in a weird way so cards are a standard for including kind of text images and links together timelines also one of my favorite components and here we see well timelines are really good not just for presenting information that is chronological but also step-by-step instructions frameworks etc and here we have an example of a card based timeline and each card has an image a collapsible accordion so these things can be collapsed and a link in the footer of the card now this is all responsive I can't show it to you right now here because this is a PPT but if you go to my portfolio either use the browser tools to scale the page or just grab the page and make it a little bit narrow and see how these cards respond to scaling of the page because they are fully responsive as bootstrap lets you do that with the flexbox layout moving on accordions also one of my favorites accordions what they really do they help to collapse content obviously that's very useful when you have lengthy pages with walls of text but you can also include images in it obviously when you collapse content there's issues because the content disappears but what accordions do very well is that they got visual indication that something's collapsed I think that Chevron icon now is a universal symbol for something being collapsed so hidden and also as you can see here you can have the headers different color and all that code is already written for you you don't have to write it from scratch you just copy paste it and if you become as you become more proficient with bootstrap you can change these colors you can add these icons and also the image and the text here in that accordion is fully responsive so again try to scale the page and see how these reposition and how they even you know launch the page on a mobile device and lotty files last but not least my favorite I think in my opinion the most powerful component I like animations I work with video a lot and I noticed that pages like brilliant dot org all these other pages now use these very bite-sized chunks these animations to explain concepts mostly science driven and in the past if you wanted to have an animation on the on the page you'd have to mess around with video I there was a period when people were using gifts gifts can only be looped or played once that's not ideal lotty files allow you to deploy this at this animation and trigger it on a number of a range of user interaction so you can have it on click on scroll etc so again this is not playing because I use the gift but in my page you will see four examples of these animations and all of them triggered separately okay so just conclusions to conclude what why you should why should you care and why is this good for you to learn and do in your own pages so obviously these as I said improved course page navigation and the look and feel of a page make it more organized make it more look look more like it's kind of design following the modern web design standards and things like that can always try something new that's where the inspiration for this came from me I you know I just got at some point got tired applying the same templates and I just wanted to try something new and learn to code that seems to be a very desirable skill now everyone wants to learn to code that there's a lot of transferable skills in that learning bootstrap would not only allow you to to learn skills for Moodle but any other web site that you're working on a web project etc etc and just to conclude in my portfolio page there are links to my code pen if you're on code pen add me I'll follow you back fork my projects change them tweak them and and share them and share some of this open source goodness with with the community okay that's it for me folks thank you very much that was fast and let's take some questions I see some you X experts here in the audience so please go easy on me I'm just kind of starting in you X and you I hi are you familiar with these text filter plugins in Moodle that administrators create templates because that's a really great way to distribute this kind of code snippets like administrators can I think like our filter codes and generic or let you do that I'm not 100% sure but there's at least two text filter plugins where administrators can just put a lot of HTML and users just select them it used to be possible inside after it also I'm sure it's now possibly in tiny MC as well because that's just the most easiest way for average teacher to get stuff I'm not familiar with it what's it called again text it's you know for text filter plugins in Moodle you know the concept of filter plugins oh yeah yeah these two filter plugins that I know of where administrators can create templates okay have placeholders in the templates like you yeah can have all the HTML and like for a car to have so the teacher only feels in this is the picture for the car this is the text for the car it gets the car inserted automatically that's a very good idea thanks yeah it would definitely help if you want to include these as part of a template so people wouldn't have to copy and paste the text that would be there for them and they can just change the link to the image and that's it yeah very good idea thanks thank you yes I would completely back up generic code and filter codes especially it does make life an awful lot easier snippets is the other plug-in as well that allows you to put that code in and then the teacher just fills in the information that they need my question to you as somebody works in video is what's the best way to make video responsive in a Moodle course there seems to be a constant nightmare for a lot of stuff they copy and embed code sometimes it responds sometimes it doesn't they have to work with i-frames I'm just wondering how do you how do we make that simple I always encourage people to use for video either these dedicated video hosting sites like Panopto for example all these this stuff that plugs into Moodle Panopto media media site you because there's a whole range of them because they offer a lot more than just playback they and they these pages are fully responsive they are tested on portable devices and they offer way more than just playback they have smart chapters they have cc generations they have previews of slides and all these things students need when they watch when they watch a video not to mention added interactivity quiz questions on playback and stuff like that so I always encourage I always push people for using these because my university and probably your institution is already using one they're probably paying for one why not using it you know again like I said in my presentation embedding video is really tricky sometimes on pages working with i-frames and trying to assign either fixed size or 100% of the container gets messy but I always encourage people to do that all right thank you very much