To install click the Add extension button. That's it.

The source code for the WIKI 2 extension is being checked by specialists of the Mozilla Foundation, Google, and Apple. You could also do it yourself at any point in time.

Kelly Slayton
Congratulations on this excellent venture… what a great idea!
Alexander Grigorievskiy
I use WIKI 2 every day and almost forgot how the original Wikipedia looks like.
Live Statistics
English Articles
Improved in 24 Hours
Added in 24 Hours
What we do. Every page goes through several hundred of perfecting techniques; in live mode. Quite the same Wikipedia. Just better.

List of jazz institutions and organizations

From Wikipedia, the free encyclopedia

This is a list of notable jazz institutions and organizations.

YouTube Encyclopedic

  • 1/3
    104 717
    1 557
  • Templates, Themes and All that Jazz
  • Walima Halal Hone Keliye Kya Humbistari Zaroori Hai By Adv. Faiz Syed
  • Explained Pictures with Jeffrey Scudder | The New School


Michelle Lattke: That’s not Hannibal Lecter [laughs with audience]. We’re the E-team. I work with a team of awesome people at Pasco eSchool, and we’re the E-team, so we’ve each taken on an A-Team name, and I’m Hannibal Smith. [laughs] I’m not going to eat anyone today. My presentation today is Templates, Themes, and All That Jazz! What I wanted to show you today is a solution that we have come up with in our institution that we are kind of fond of, and we wanted to share it out and let other people see it, for whatever it’s worth. Hopefully, you will find that it may be something you want to use, or adapt, or take because I want to give it to you if you’re interested. I’m going to show you what we did to jazz up our courses, how we used the Global CSS and Google Fonts to do that, and then how we took it to the next step to put those things together and share those templates to Commons. First let me just tell you a little bit about Pasco eSchool. I work for Pasco County Schools, which is a very large district in Florida. We have approximately 70,000 students. More specifically, I work for the district’s virtual school. At Pasco eSchool, we have a K-5 program that is fully online curriculum, and then we also have secondary courses — anywhere from American Sign Language and Creative Writing to Career Ed and all kinds of other things. We have some full-time students who do our program as their whole school experience, and then we have, additionally, across all of our programs, something like 35,000 semester enrollments. Those aren’t full-time students, but maybe it’s like a 1/6th of a schedule, something like that. Divide that number out, and it’s still a lot of kids. [laughs] We’ve been using Canvas since 2013. Why did we want to do more templates? I’m sure you’ve seen other template solutions out there -- there’s a lot of really amazing solutions out there. The ones that we looked into were at times maybe a little bit too difficult for our K-12 teachers to use. They had too many features, so they were too focused on, maybe, the course design as it would work in a higher ed environment. We were getting a lot of requests from teachers that they wanted the learning environment to be more fun. I can appreciate that since I’m a fun kind of person, but the way they were handling the “fun” aspect is they were going into a PowerPoint and making a slide with a bunch of pictures on it and then taking a screen shot of that and putting into their course. If anybody knows about accessibility, that’s totally not accessible at all. We wanted to move away from that and create something that met their desire for “funness,” but was still accessible, which is really important. We also learned that there was no one thing that fit everyone. Everyone wanted something just a little bit different, so we wanted to accommodate for that, too. We also knew our teachers are not HTML gurus, so asking them to do HTML view and then put in some code was not their favorite thing in the world. So let me show you what it looks like, and then we’ll get into how we did it. There’s no music, but I just wanted to give you a quick scan of some of the different looks that we have for the different subjects. Art, blue, red… [silence] We initially started this because it was very much, like, for a younger audience or a K-5 audience. Then as we started rolling out the solution, we realized, well, actually, this doesn’t have to be all rainbows and cute fingerprinting writing. We can make something for a much more grownup audience but still use the same concept. This is actually something that’s going to be used for Professional Learning, but it’s using the same strategy that we used for the younger audience. What did we do to make this happen? We used three elements: we used Google Fonts, which is what I’m going to show you first (how we did that), and we used the Account Level CSS. What we did, specifically, with the Account Level CSS is instead of doing specialized IDs in the CSS, or specialized styles, we just took the things that were already in the Rich Content Editor -- like H2, H3, H4 -- and we are applying styles to those, so that teachers don’t go in and have to apply styles to it themselves. Then, lastly, so that they don’t have to go in and put anything code-wise in there, we’re building collections of these pages and then pushing them to Commons, so they can download it into their course and then have something to work with. Okay, so Google Fonts. What did we do to get this to work? If you’ve ever used Google Fonts before in a web development environment, usually what Google Fonts wants you to do is it wants you to apply some code in the <head> tag of your HTML. We don’t have the ability to do that, per se, in every page of Canvas because you don’t have access to the <head> tag of that page. You have to use CSS instead, and it’s quirky because when you try to implement Google Fonts with CSS, it needs different files for different browsers. It took us a while to figure out which combination of files would work in all browsers. Also, by default, when Google Fonts gives you the information, they give it to you as HTTP, which then creates a Mixed Content error. Then when you go into Canvas, and you look at that page, it’s not showing the cutesy font that you thought you picked, so then you have to edit the code just a little bit to add an “S” on there. Google will still go to the file if you change it to HTTPS, and then you don’t get the Mixed Content errors. The steps that we used to do this are: you would go to the Google Fonts website, and once you’re there, you would navigate through, find the font that you like, and then you would select the Quick Use button for that font. That will bring you to a page that tells you all the generic things about how you would use that font. Instead of looking at any of those things they tell you, you’re going to do one thing. You’re going to go to the area where it says Add This Code to Your Website and you’re going to just grab that specific URL (that I’ve highlighted there -- you don’t need that whole bit, you just need the URL) and then you’re going to paste that URL into Firefox. Now, why Firefox, you ask me? That is because the thing that gets returned when you paste that into Firefox is the correct set of fonts that will work in all the browsers. It’s browser-specific, so if you paste it in Chrome or Safari or Internet Explorer, it will return to you what that browser needs. If you grab it only from Safari, then it’s only going to work in Safari. For whatever reason, Firefox pulls down all the ones that you need for it to work in all the browsers. Do that, paste it into Firefox. That’s going to return some code. It’s going to bring up, instead of a page in the browser, a little bit of CSS. You’re going to copy that code, and that’s the code that’s going to get pasted into your custom CSS. Let me show you what that code looks like -- it looks like this. It will say “@font-face” at the top, and over here where I have circled in yellow-green, or whatever that color is, that’s where you would change the HTTP to the HTTPS. If you do exactly that, copy it, change the “S” in there, and slap that in your custom CSS file, that’s going to be what allows you to use those Google Fonts. Once you are all jazzed-up about your Google Fonts, now you need to figure out how to use them and apply them to your pages. Now, the next part I’m going to tell you about is how we use the CSS in our pages. Now, I want to warn you that I am an outside-of-the-box thinker [laughs], and I know enough to be dangerous, but I am by no means a CSS expert-of-all-time, so if you are, I apologize if I have done anything that violates the rules of goodness, and I encourage you to take my code and make it better. With that said, here’s what we did. Again, as I mentioned, we wanted to make it so that all the teachers had to do was use the Rich Content Editor and nothing else -- no coding, just the Rich Content Editor. What we did is, we took the ID selectors, and we made an ID selector for a single div on the page (sometimes two divs, but not anything the teacher has to do). We made a special ID that’s going to control the whole theme with that one little, teeny ID on the whole page, and that’s going to control the style for the whole page. I’ll show you what that means in a minute. The second thing we did is we paired that style with the elements selector. We took the H3, the A-tag, the H2 tag -- all those tags that are available to you in the Rich Content Editor -- and we applied styles to those, so that they get controlled by the CSS. The last thing that we did is, we didn’t want this filing to get out of control and hard to read, so we used a naming convention. We used the naming convention to make it so that if we ever wanted to make more themes, it’s super easy, because we just copy one of the other themes and just switch out the images that we want to use in that theme. It takes about 3 seconds to make a new theme. Here’s an example of one of the themes. This is our Pasco blue-striped theme. For our secondary programs, we wanted to create colors so they could match their school colors. As you can see, this is what it looks like when you’re looking at it in Canvas. It’s saved, it’s there. This is what it looks like when you go to the Rich Content Editor. Over on the left-hand side (I’m terrible at left and right), that’s what it looks like when you’re editing the page. All the teacher is going to have to do is -- you have to give them a little bit of style guide, so if I go back right here, the sample that we give them tells them what to do. See how at the top is says, This is an H2! This is an H-4! It tells them so that they can just print that out, print out the sample, and then they know exactly what they have to apply. Then when they go in here, if they want to make one of those nifty blue bars, they just highlight it and hit H4 in the Rich Content Editor. If they want to make one of those nifty call out boxes with the cute little lines on it, they just highlight the text and make it an H3. Now, how does this all happen? When you go to HTML view, at the very top, there are two little divs. That “pasco-blue-stripes” ID, that’s what controls all the style on the page. Now, you’re probably asking me, doesn’t the teacher have to put that there? If we didn’t have Commons, yes, the teacher would have to put that there. Because we have Commons, I can make a series of pages, put them in Commons, and they can just download them. Then they just put their content in -- whoop-de-do -- and they don’t have to put any div stuff in there, that’s already there. Because it only lives at the top and the bottom, it’s very hard for them to totally mess up the page and delete it. When they edit the page, as I was explaining, the things that are circled are things that we’ve styled. When they edit the page, they just pick the thing that they want to style -- a list, the header elements, the links and the images -- and then they style it up. Now, what is our strategy for if you do totally mess it up? The Canvas pages are wiki pages. The genius element of that is that you’ve got this little gear with your view page history. We just tell them that if you make a change, and you just totally mess up your page, go back to the previous version -- it’s one click, and then you’re back. What does it look like in Mobile? In Mobile Browser it looks exactly the same. We’ve applied our styles in a way that will react responsively, and so it looks the same, but just gets a little squishier. In the app, it doesn’t. If you know about the app, the app isn’t able currently to pull in styles from your custom CSS, but one of the reasons we used the H2, H3, H4 tag is because those represent a matter of importance, right? An H2 is more important than an H3 is more important than an H4, so, by the way HTML works, it’s going to natively make an H2 bigger and more bold and an H4 slightly less big. Even though we don’t get the cutesy styling, we still get a page that makes sense because they’ve implemented the H2s, H3s, and H4s. Then, what’s next, right? We wanted to make sure that these could then be put together into collections of pages. Our Instructional Design team could take these templates, and we could put the little div tags in there and make a nice teacher web page or a curriculum template, and share that out to Commons. Then when they pull it in, all the styles are already applied, and they just have to fill in the blanks. Here’s an example of a modules page from a curriculum template that we made. Essentially, we talked to our Curriculum Department and found out exactly what elements that each unit should have, built out those pages, and then shared it to our Pasco Commons. Here’s the teacher website. This would be for the teachers that are breaking into Canvas. Obviously, we want teachers to use Canvas really interactively and engagingly with students, but sometimes they need a way to break in the door, right? They need a way to get into Canvas that’s a little, maybe, easier to get started. This gives them the ability to just say, “Bloop! I want to pull this in and make it kind of like a teacher web page -- it’s a place where my students could get and access resources, and it looks cute, and all I have to do is add my teacher-specific content.” Again, we can share this to Commons for an institution, and they could pull it in and get started. Now, I want to mention one thing that is important, and that is that, as you heard me describe, we’re applying these styles to our custom CSS, right? If I share these templates with anyone in my institution, they will look cute and pretty. If I share these templates that I’ve put together -- not the cute look, but the collections of pages that we’re sharing to Commons -- if I were to share them with all of Canvas, you would still get all the pages and what was said on those pages, but if you hadn’t added my special CSS to your institution, then you wouldn’t get all the cutesiness. If you decide to use a similar solution to this in your institution, I would encourage you to share things to Commons with your users across your institution, but be careful about sharing it outside of your institution (I normally would be, like, Share everything outside of your institution!, but just because these are specifically styled elements that are tied to your specific CSS, you just have to be careful with who you’re sharing it with and make sure that they have the same styles that you have. Here’s the magic area [laughs] where you can download our code. This is just a course in our instance of Canvas. This course has an example of all the templates that are in this file we’re sharing with you, and then at the bottom of the modules, it will say “download this code.” It gives you the CSS code, the Google fonts, and all the image files that we used and, I think, the five or six templates that we are offering in this course. I don’t know that you would want to use them, exactly, because you might have different needs, but what I’m hoping is that you’ll be able to look at it and take the idea back to your institution and style it how you would want to use it in your school or community. I know I have about ten minutes left, so I wanted to make sure and leave enough time for questions. I want to go ahead and open the floor up to questions and see what questions you have. [un-miked audience question] Michelle: Do you mean the look of the templates or the collections of pages themselves? This blue one -- the idea behind the color-scheme ones were to match the high school color schemes. We didn’t want to do two-tone color schemes because everybody has two colors, and we’d have like seventy different color schemes, so we just did single-color color schemes. It turns out that some of the ones we developed for elementary were ones the high school teachers liked. A lot of the people like that one that looks like a composition book, that’s a really popular one. The ninja one that was in the original one, that’s actually for our school -- we’re the eSchool Ninjas (go Ninjas!). That was for a lot of the other ones. You could legitimately -- if you feel like this background looks too juvenile or whatever -- you have total control over that because with CSS, you can essentially just pull the image out and leave it white, or leave it a solid color, or whatever. Yes. Sorry? Oh no, sorry about that. I got a little “clicky”-happy. Give me one sec. [silence] Okay, you had a question. [un-miked audience question] Michelle: Ah! Okay, so the question is, how do you get to your custom CSS for your institution? In your institution’s account -- either for the master root account or for the sub-account -- if you have access as an admin to that sub-account, you can go to the settings for that sub-account or account, and about three quarters of the way down the page are two boxes, one that says “add custom CSS” and one that says “add custom JavaScript.” Essentially, you put in a URL to where your custom CSS is. If you have somewhere at your institution where you could host that little CSS file, you would put it there, and you’d copy the link, and then you would paste it right into that box. [un-miked audience question] Michelle: I suppose you could… It doesn’t work? Okay. I know that at one point (I don’t want to say this), but at one point, I think maybe Canvas would sometimes host your -- Yes. Amy’s saying yes. I think if you don’t have a place where you can host your CSS or JavaScript files, Canvas will post them for you. Yes. Yes, you. [un-miked audience question] Michelle: Oh, from Commons. Okay, good question. The question is, are these downloaded as pages or courses? A little bit of both. For example, for our eSchool folks, their courses are all different, but we wanted them all to have the same home page, so we upload one page to the Commons as a templated home page. For other people, we’ve uploaded a whole course to the Commons that’s built out with all these templated pages in it. For example, that Curriculum template is like a whole, entire, giant course with multiple units in it that we’ve put up to the Commons with the templates applied to them. Then, sometimes, we’ll just do a little module—like, this is the module, and we’ll send those up to the Commons. Really, the use of the styles is flexible, so you can use it in any collection of pages that you want. [un-miked audience question] Michelle: Correct, correct. The question is do the images live on some other place. That’s right. I’ve kept my images very small. All those things that are big backgrounds are repeated in small versions of repeated images. Essentially, I wanted to keep the load time very short, so we have a little server, a secure HTTPS server -- it’s just a little webserver. We just throw all the stuff up on there and then put the link in our custom CSS line, and off we go. Sure. Yes, in the back. [un-miked audience question] Michelle: That’s a great question. The question is, am I concerned at all with the new look of Canvas? I think it’s always something you have to look out for. I think because this is just leveraging CSS and not leveraging, like, elements of the JavaScript, it’s going to be better. Again, because we’re only doing things like adding styles to H3, H4, H5, those things are going to continue to live in the Rich Content Editor. All we’ve done is, sort of, overloaded those elements of the Rich Content Editor, and I imagine even in the new look of Canvas that the Rich Content Editor is still going to be around. We haven’t used more complex elements that I think would be affected by that, but you never know. Yes. [un-miked audience question] Michelle: Good question. The question was, did Canvas create the custom CSS’s for me? No, I’m just a nerd, and I knew enough about CSS to be dangerous. If you look at the code that I have there, I think you can learn a little bit about it, and the thing that’s nice about it is that if you like the same look but just want to flip out the picture or flip out the color, you could leave it exactly as it was but just change it out to meet your “look” that you wanted. Any other questions? I think we’re down to… [un-miked audience question] Michelle: The question is, I was talking about pages, but could you use it in assignments or somewhere else that the Rich Content Editor is? The answer is yes, you can use it anywhere the Rich Content Editor is. You just have to make sure those div tags are there, and then that will get saved when you share to Commons, or pass it on to a teacher, or whatever. If you’re the instructional designer, you just put those two little lines of code at the top and bottom, and it files the whole page -- page, assignment, directions of a quiz, a list -- wherever there’s Rich Content Editor. Last question. Yes. [un-miked audience question] Michelle: Say it one more time, I didn’t quite hear you. [un-miked audience question] Michelle: Ah, I see what you’re saying. You’re asking whether the templates are overwriting content that’s in pages. I don’t think that would be an issue. What I would say is, most of the people that are pulling down stuff from Commons are pulling it into a brand new course. If they were pulling it into a course that had existing content, it would still be added as new content because it wouldn’t be linked to their existing content. If you were trying to take a page that had existing content and style it with this, you actually do have to do a little bit of HTML. What you would do is, you would take your existing page, flip it to HTML view, just put those two little div tags at the top and two little div tags at the bottom, save it, and then that would style the whole page, but it doesn’t overwrite any of the content. Thank you guys so much! [audience applause] I appreciate you staying until 5:30 on the last day! Have a great night.











See also


This page was last edited on 27 November 2018, at 04:18
Basis of this page is in Wikipedia. Text is available under the CC BY-SA 3.0 Unported License. Non-text media are available under their specified licenses. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc. WIKI 2 is an independent company and has no affiliation with Wikimedia Foundation.