 Hello and welcome to create beautiful balanced learning content with the components for learning plug-in. My name is Rujé Sagu, I work, I'm from Barcelona and I work as a user experience designer and front-end developer. I specialize in learning environments, meaning I create courses, themes and plug-ins mainly for learning institutions and mainly with Moodle. Sorry, I was here. Also, I'm an instructional designer, I've always been. I was an instructional designer way before I learned to code. So I know how it feels to have a precise idea for a course and not being able to implement it because you don't have the tools. I've experienced that pain myself and that was the reason for me to start learning development in the first place. And so I did it. I learned HTML, then CSS, then JavaScript, then PHP, and it's been quite a 10-year period. Now I finally can safely build my own Moodle themes and plug-ins. So when I did not have those skills I always wished that there was some solution that could help instructional developers to quickly apply meaningful and balanced design content to their materials with ease and simplicity. So now that I can code, I just built it and I called it components for learning. So what is components for learning? Well, it's a free plugin specially designed for Moodle that allows you to use a collection of visual components directly in the Atto Editor. What you see here in this image is the model window that shows after clicking on the plugin button in the Atto Editor. For those at the end of the room, I'll take a moment to read them aloud. Those are the key concepts, the tip, the reminder, attention, quotes, do-and-don cards, reading context, example, figure, tag, estimated time, due date, procedural context, grading value, expected feedback, all-purpose card, and inline tag. So, as you can see, all the available components are aimed to meet the educators' needs. We'll see more about them later on. Just tell you that you can find the plugin, obviously for free, in the Moodle plugins directory, and download it and install it through the site's administration. And, as you can see, it supports all the latest Moodle versions, and once installed, you can start using it with no further settings needed. Just simple as that. Ok, but let's see in action. Let's imagine we are working on this material for all learners. We are in the Atto Editor here. Let's see we want to give them a tip, and we want it to visually differentiate from the regular text. All we need to do is select the piece of text we want to turn into a tip, this area here, and cut it like that. Ok, then we click on the Components for Learning button, we choose the tip component, and we replace the baseholder text with the text we just got. Ok, so, when we save, this is how it displays. Well, as easy as that. Thank you very much. That was unexpected. Ok, then let's see another example. In this case, let's imagine we want to add a quote to reinforce a particular idea. And, for instance, let's take a fragment from On the Origin of Species by Charles Darwin on the Gutenberg project in this case. All we need to do is choose and select the original quote, and copy it. Then, again, we click on the Components for Learning button, we choose the quote, the quote component, and we got this placeholder text again. We just replaced it with the text we copied. And finally, in this case, we have to add the author's name and the title of the work, and that's all. And then, just like before, when we save, we have this format already applied. Ok, our goal here is to provide our learners with a cohesive design for every type of content. The main principle is simple and connects with the fundamentals of design. We always use the same visual components for the same type of content. That way, students will effortlessly learn to identify them and assign every type of content with a single meaning, always the same. And in no time, this meaning, will become unconscious for them. The same way we'll know a small X cross at the top right of the corner of a window means closing it, closing the window, or the three lines in a row mean display the menu and all these kind of patterns. And this is how we help reduce the learners' cognitive load, which is one of the main goals of every instructional designer, as you all know. Ok, in the previous cases, I show you two examples of contextual components. Contextual components helps us assign the meaning to a particular content regarding its context in relation to the main flow. Something exemplifies an idea, or something summarizes an idea, something highlights an idea, this kind of stuff. Ok, and those are usually the most common and the most relevant in the learning process. Ok, but there are also two other types of components. I call them procedural components and also evaluative components. Procedural components are specifically intended to give students input on the learning process they are involved in. For instance, let's imagine we want to specify the estimated time a learner can expect to invest in a particular activity. We could place it here in the rectangle. And again, well, as before, all we need to do is click the button, choose the corresponding component, and we replace the content of the placeholder's text. And that's it. We save it and we see it like that. Ok, i final, final, let's take a look at the evaluative components, which I just mentioned a minute ago. Evaluative components are intended to inform the learners about any aspect regarding grading feedback from the teacher or other related considerations linked to evaluation. Ok, in this case, yeah, I'm not going to explain again because it's always the same. Just copy, click the button, select the component, ok, but just for you to see how it works. Imagine in this case we want to provide an expected feedback and we again select the text and do all the things. Ok, here we select the corresponding component and well, here we are. This one would be the expected feedback component. This is how we see it. Ok, at this point of the presentation it would be relevant to introduce you to the project site. It took me a long time to get it ready, but finally what it published last week, just in time. And on the site you will find a detailed description of the project along with its main goals and characteristics in general. And as you will see there components for learning is an open learning project, meaning that is free and that is available for everyone. The plugin itself is licensed GPL as the rest of the Moodle core software and all the contents on the site are free available under Creative Commons license. Also on the site you can find a guide that will help you browse through all available components and choose the most treated for every situation. Let's see an example, a quick example and I'll finish. Let's say we wanted to use the key concept in a material. Ok, but however we may not be entirely sure that this is the component we really need for that particular case. So we go and visit the guide and this is what we find. And as you can see in this case our assumption was correct as highlighting an idea is in fact the purpose of the key concept component. And we also see there a demo just before on how it will display once applied. Most components may have slightly different purposes so this is important and I guess the guide will have you covered in all this matter. Also another interesting feature in the guide is the provision of recommended and discouraged use cases for most of the components. I must say it's really interesting because those are based in real user testing mostly by teachers at Instituto Guarda Catalunya who have committed to this project and are using a very similar extended collection of those components. So those recommendations were added after detecting some confusing use patterns to help avoid confusions that raise naturally. And also there is a final aspect in the guide that I find particularly useful which are real life examples for every component. As you can see here you can find them at the bottom of the page. You just need to click to each one to open them in a moral window like that. And you see that particular piece of example so it can help you disambiguit and proceed. And that's it. Well, finally just let you know that this project has just started and I'm very, very interested in your input as educators. I'd love to know what components you miss and what kind, I mean any kind of involvement would be more than appreciated. Because this is a living project, you know, it's just the start now. And if you wish to get involved in the project in any way you will find my contact in the site. It's Roger at componentsforlearning.org. And if you install the plugin, I encourage you to follow the Twitter account at comfortlearning to get updates on new components available or tutorials and also to get in contact and make suggestions. Also, again, I would like to thank all the teachers at York who helped me during the last years and without them that would have happened impossible. And also I would like to specially thank to Justin Hunt, which plugin was used in this case to make the base code for this plugin. So this is also me, my professional site and my Twitter account. Thank you very much. Thank you, Roger. What a great plugin. I think we all enjoyed looking at that. We have questions. Hi. Hi. That's a couple of questions. Question and suggestion. The question. The styles, the colors and the... Are they visible on the mobile application? In the mobile? No, in the mobile app. In the mobile app? No, it's not. No, because this is... Yeah, that's a thing. This is made over the actual editor, meaning that it's all HTML and CSS and a bit of JavaScript. And the mobile app works entirely different. So... Yeah, I'm afraid... I mean, I'm not an expert at this matter, but maybe... I don't know. Maybe that would be a custom integration that you may need to ask to the providers, the Moodle app providers, but no. Sorry, this is... What it has is... All the styles are also usable. I mean, it's responsive. It's completely responsive. If you use Moodle in a mobile, it will display correctly. Okay. Just in the browser. In the browser. That's a suggestion. Maybe you have some input from your teachers on the institute. I am having a .. I mean. Click on the button, you get a panel, put the content. And then when you... Have a button, enter a button, and you get the content on the text. Cack, I mean, venting to add a logarithm. Skipping the placeholder's text. Yeah, I tried it, I must confess, but I mean that would require another level of development skills which I don't have because most of these kinds of features needs to be embedded in the tool itself, in this case it's actual. I'm not sure it's that easy, it would require further custom development also. Okay, we have another question, I think here somewhere, no? Congratulation, Roger, in my case I've been doing all my own CSS styles sometimes for some activities, but never a plugin. And the only question maybe is for people from university, have you give to them the patterns of the tools you are using, so in their own presentations, not in Moodle, they use the same styles? Do you know that? Well, yeah, well it's a bit more complicated, but in some way yes, because there was a design system prior to the implementation of the plugin, and you could take the design system and use it in any context you like, but it's not done or not already done, or it has not been needed to do until now, so it's done, but it's not implemented. Okay, thank you. Thanks, Roger, that looks really useful. Thank you. So when you're adding templates, I presume it is adding CSS and HTML, and is there any way that that's protected? Of course, using templates in the past I've found that people can easily delete like a bracket or something and it completely messes things up and they don't know how to fix it, is there any sort of protection around the CSS and HTML, or can it just be deleted? Well, yeah, kind of, because, yeah, the last version, the published official version, what I did is use, when you, if you look at the CSS that lies behind it, you will see that there are some, every component is preceded, and there's also, after it, a paragraph with a special class that makes it difficult for the user to get messed with the process. I mean, when you present a, there, a new paragraph appears. So I kind of hacked the way I solve this matter and use this, I mean, well, it's a very simple and not high tech solution, but it's proven useful. Yeah, sounds good. Okay, there was a question, yes, up here. Hi, and thanks for the presentation, the plugin is very interesting. I want to know, you say that it works with Atto, but I have a lot of users that use the TMCA also, and I think, I don't know if you try to also add the button for the TMCA editor, or not if you think to do in the next future, or no. Yeah, well, I guess it will be mandatory, kind of mandatory, so I will make the changes to adapt it also to TinyMC, because, well, I don't know how it will work, but I will try to make it the most similar possible. And if I understood correctly, I think 4.1 version will still have Atto included, but I guess 4.2 closes Atto, and so it will, I will have to attend these changes, and I expect very soon that will be done. Thanks. Yes, another question over here. Sorry. Thank you very much for the talk. It looks really nice. Thank you. One question I had as a student, if I see these components, is there any possibility for contextual information or tool tips to see what it means so I can get to learn it, what it means? Or are there plans to implement? Like if you hover over the icons to see this should be a quote or something? I recommend you to start with the guide, you know, in the site of the project, you will find the guide, and it includes a detailed explanation of every case. And also I am planning to release, as soon as I can, a series of video tutorials explaining each of them briefly to avoid users have to mingle with all the techniques, but I don't know again how it will be possible to get it done. Ok, thank you. Thank you. Yes, hello. Thank you for the wonderful presentation. Do you work with Bootstrap, or are you planning to work with Bootstrap, and do you add more elements from it? Sorry, Bootstrap or the second part? Do you want to add more elements from the Bootstrap framework? Yeah, that's interesting, because I've already done it, and thanks to this man here. Yeah, because the situation when I started doing these components was that the Yogg, the Institute of Catalonia, already was working with Bootstrap. So I added some components, which what I did was a bridge between Bootstrap and this more simple version. And what we did was applying the design system to all the tabs, tables, all this kind of more Bootstrap-y things. I think it worked well, and obviously all this will work over Bootstrap, because it's made to work on Mural 3.3DOT, whatever, and it will be no problem with that. Thanks, and we have a question here from Martin. Just a very quick one. Another congratulations, it's really nice. Thank you very much. On your website, do you have an example of an entire course that you've built where we can see your entire vision all together with everything applied? Okay, I'm also working in it, yeah. I'll try to do that. It's a shame that I don't have time to browse the world more thoroughly. But when I was talking about real-life examples, that's what I meant, because all of them are fragments that you may as well have taken from a course. And it's a bit like a start on this kind of road you suggest, but I hope I will also have the time, and that would be the best solution for everyone to easily boarding and starting to use it.