Getting Started with the IU Web Framework

Description of the video:

[00:00:01]
>> Tom: There we go, welcome my name is Tom this is "Getting Started with the IU Web Framework". We're scheduled for an hour and every time I teach this I could probably just keep going because the more I teach it the more familiar I get with the framework, the more I have to teach you so I want to tell you more things.

[00:00:20]

>> Tom: So without, you know, any further stalling we're going to go ahead and jump right into a screen share and start with what is the IU Web Framework.
>> Tom: So you should be able to see my screen now. And a, the IU Web Framework is, basically the simple explanation of what this is, is it's a physical implementation of the IU Style Guide right.

[00:00:53]

>> Tom: So we're going to kind of talk about both of those things as we go, but the IU Web Framework leverages the WCMS to allow you to quickly put together pages that follow the rules of the IU Web Style Guide. Now the other part of this is the [NOISE] line, make sure everyone's muted real quick.

[00:01:21]

>> Tom: So the other part of this is that it's kind of tied to a central repository right, so when branding rules change it should populate your framework site right?
>> Tom: Unless you've broken that sort of inheritance, we're going to talk about how that works so you know what not to break.

[00:01:38]
And we're also going to talk about how to get started with adding content to a framework site, so this is a really entry level thing, entry level introduction to the framework so. First of all how do we get it?
>> Tom: The way we get it is, you have to have a few things in place first, and then you can request a framework.

[00:02:01]
On the framework site, which is just Framework.IU.edu, I'll go ahead and put this chat if you like. That site basically is the documentation, we're going to kind of talk about how that's not entirely the case because there are a couple other places, but this is basically where you go to find out how to use the framework.

[00:02:22]

>> Tom: Under the Request menu the first thing you want to do is had the prerequisites right?
>> Tom: So you have to have a few things in place, you need a group account. You need a Webserve and Webtest account and you need a virtual host with SSL.
>> Tom: So how do we get those things?

[00:02:42]
Well this page will kind of walk you through it. The short sort, the short explanation is you follow the link fill out a form.
>> Tom: When you're approved you follow a link fill out a form.
>> Tom: When you're approved you follow a link fill out a form, that's really about it.

[00:02:57]

>> Tom: So the group accounts are handled on One.IU.edu. My suggestion if you're going to be converting an existing site to a framework site, my suggestion would be get a new group account, don't try to use the same one you're already using. So again it's you know, you go in [NOISE] your request the group account, once you've got it you can go ahead and get started.

[00:03:31]
With the group account you can then come over and request Webserve access, so I'm just going to show you what this looks like.
>> Tom: You could list your accounts. And when you list your accounts you're going to find all of the accounts that you own, so for example here's an account right don't have (web) web hosting, I can apply for web hosting here.

[00:03:56]
And essentially fill out the form. And submit. Right. So first two things you need a group account you need Webserve and Webtest access, today when you request Webserve you get Webtest by default. Once you've been approved for your Webtest the last step is to request a virtual host.

[00:04:21]

>> Tom: Right so the virtual hosts are all the, you know, whatever dot IU dot EDU or whatever dot Indiana do EDU that you do use a like Sports.Indiana.edu, ittraining.iu.edu, UITS.iu.edu. That first part is your virtual host the framework requires this, so you will have to get one of these and it does need SSL, the important part there how do we get that?

[00:04:49]
Make sure you say YES to this question. OK. That's it, so this this does take a while because this is a request that goes through IU Communications and some other folks.
>> Tom: The last one I requested I think I got maybe a dozen different ticket updates in about, throughout a week before it was finally approved, so it's just got to go through a bunch of people and get checked off from a lot of different places.

[00:05:25]
Once you have those things you can then request a framework.
>> Tom: Right, so just to recap for those of you who joined us a little late: at Framework.IU.EDU under Request go to Prerequisites and it'll walk you through the process. You need a group account, you need Webserve and you need a virtual host; so once you go to do the group account you then have to set up the pass phrase and an email, once you've got that then you can get Webserve to go through the process.

[00:05:59]
Because you should just have SSL anyway. That's the way the Web is going these days so. The university requires it for framework sites. Makes connections just a little bit more secure. So once we've got that the request form is relatively simple. So I will. Once you're here you should see a form populate in the bottom half of this page.

[00:06:31]

>> Tom: If you don't, this is happened to me a few times; make sure that you don't have something like an ad blocker or a third party cookie blocker in place because this is coming not from Framework.IU.edu, it's coming from a different IU.edu place. So if you're blocking that sort of reference you're not going to see this form.

[00:06:58]

>> Tom: But again you just basically fill it out, this is where you give it the site name, the Webtest URL which is just your account name, that Webtest.IU.edu and then your production URL which is that virtual hosts that you requested.
>> Tom: Right. If, this is kind of an important thing, if you're using that virtual host already, so in our case we're redesigning our website it's going to be hosted through the framework, we're already using ittraining.iu.edu.

[00:07:29]

>> Tom: I want to make sure I choose YES here, there are some scripts that are going to be run on both Webtest and Webserve under your account, you don't want to run that on Webserve until you're ready to roll your account live otherwise your existing site just won't work anymore.

[00:07:56]
But that's really about it, those are the only real caveats. To this form the rest of it's pretty straightforward. So that's our request process that'll get you a framework; it'll also, if you're not already in the WCMS, it will add you to the WCMS to that site. Yeah the last point, the last thing I was talking about Eliot is the, if you're already using your virtual host you want to make sure to tell them here.

[00:08:31]
OK. Because when they set up a framework, there's a script they run on Webserve and Webtest for your account and it sets up the appropriate redirect, the appropriate include paths and everything needed to run the framework. So essentially the framework's an application and the sets up all the pieces.

[00:08:51]
If you are already using that virtual, tell them here in this question and then when you're ready to go live send a message to, I think it's wmhelp@iu.edu. It's basically webmasters help, right. And tell them "Hey I'm ready to roll this live, what do I need to do?" and they'll be able to help you out with that.

[00:09:21]
All right. So it's about ten minutes of getting the framework.
>> Tom: This whole process, don't expect to decide "I'm going to start the process now and have a framework by the end of the day". This process takes a week or two depending on how busy all of the different folks in the the approval process are right, so give yourself some time don't expect that you're going to have it by the end of today.

[00:09:47]
So now that we've got a framework let's talk about using it OK.
>> Tom: So some of the things that I want to talk about before we jump into the WCMS, remember I mentioned early on that's the it's the physical implementation of the IU Style Guide. The IU Web Style Guide, this is the IU Web Style Guide it's at styleguide.iu.edu.

[00:10:09]
This is basically the, the site that shows you and talks to you about how to do everything the IU way. Right, so if you're creating your site from scratch you can use the resources here to make it yourself, if you're using the framework this kind of shows you all of the different pieces and how they might look.

[00:10:30]

>> Tom: That's also located here on the Framework sites, a lot of those how to use it and this is how it looks pieces are located located at the Framework site as well.
>> Tom: So those are the two places you kind of want to keep in mind as you're going through, you're probably rely on Framework.IU.edu the most.

[00:10:48]
If you can't find your answer there you might jump over to Style Guide, if you can't find your quest, your answer there, highly suggest you join the web community of practice and join their Slack channel.
>> Tom: That's where a majority of the "Hey I'm not quite seeing how to do this" sort of conversations happen.

[00:11:14]
All right. So now what's it look like?
>> Tom: Well to figure that out we need to log into the WCMS. To find your site, in the WCMS, at the top there's a little drop down, this is the site selector. You want to choose your Framework, so you can see that we're pretty heavy users of the Framework at IT Training, but here's my development site this is what I'm going to be using to teach today.

[00:11:52]
And this is basically, for the most part this is what you get right off the bat OK.
>> Tom: You're going to get a folder structure, it's going to have some pieces to it, we're going to talk about those pieces in a minute. But that's it, so this is basically what's going to get copied for you.

[00:12:14]
Before you can actually do anything you need to be able to publish that Framework site right. So to be able to publish it we need to modify our transports. And the transports are not modifiable, you can't change them here in the WCMS.
>> Tom: So the first thing that we're going to do, after we've got our Framework we know we have access to the site, we need to then hop over to another URL which I'm going to pop in and check here.

[00:12:55]
It's the Managers Tools site, wcms.iu.edu/managers. This is not only where you change your pass phrase and your account name for publishing, this is also where you can add users to your site and assign them to groups. But while we're here, the one thing we want to do is head to Manage Transports.

[00:13:21]
If cascade server does not know your login name and pass phrase for Webserve, Cascade Server will not be able to publish to Webserve or Webtest right. So again, here are the sites that I have access to; I'm going to open up the development site and I want to make sure that both of these are pointing to the appropriate place.

[00:13:43]

>> Tom: Now this this development site does not have a production end. So really all I'm working with is Webtest, so the only things you should have to change are here under Server Directory where you put in your username where it says account. For User Name you put in your user name again and then you make sure your passphrase is correct, those should be the only things that you have to change here.

[00:14:12]
Should be the only things you have to change. By default when you get this right out of the box they're both going to kind of look like this with the different URLs and different names, so it'll say Account; you'll basically replace that with your account and you'll give it some default passphrase.

[00:14:36]
Then we're ready to go. So we need, here's the summary up to this point: We need a group account, we need email and a passphrase for that group account, we need Webserve and Webtest for that group account, we need a virtual host, we need to request the Framework, then we need to change our passphrases for Transports.

[00:15:01]

>> Tom: Now if you're going to be developing and not publishing yet to production, you don't have to put the information into your production transport yet.
>> Tom: You can do that later you don't have to do that right off the bat, Webtest is really the only thing you need right off the bat.

[00:15:22]
Last bit of set up then we'll talk about publishing and then we'll start talking about how these some of these assets work.
>> Tom: The last bit of set up is the Settings Block OK, the Settings Block is an oft overlooked piece. Right so we want to make sure that the Settings Block has the appropriate information for our site.

[00:15:49]
So I'm going to go ahead and edit this. Again I'm assuming you're got some familiarity with the WCMS. If you don't you can just kind of watch these, in the base, I'll be using the basic features today so I want to edit the Settings Block. And this basically sets up the global environment for your site, you see you need to give your account name in a few places again.

[00:16:20]

>> Tom: This is again, so that the include paths and all the different back-end pieces that the Framework relies on to function can all find the right stuff. By default the Framework uses PHP. If you're publishing to a site that does not have PHP installed you can try to use Server Side Includes.

[00:16:45]

>> Tom: If you're publishing to a site that doesn't allow any sort of dynamic rendering at all, you could choose NONE and NO and the Framework will still work. This has been designed and developed so it will work in PHP environments, non PHP environments, and no scripting, non-scripting environments as well.

[00:17:07]
So moving on down to get to choose your campus, this has to do with the branding bar. You give it a name, so this will be, I always use this as my example "Tom's Pets". You get to choose which theme you want, this theme determines your secondary color.

[00:17:25]

>> Tom: If you're not familiar with the secondary colors available to you, you go to brand.iu.edu. There is a section for design and colors. This will tell you what those colors are so if you look at the Web colors. It's actually from the style guide, the Web Style Guide, but you can see here the colors right; so you got Gold, Mint, Midnight, Black, Limestone and Majestic.

[00:17:58]
Whichever one you want to use for your secondary color you choose that here for your theme, right. If you're going to be using social media, you want to fill out the social media information, if you're not going to use a particular network remove the information from that field.

[00:18:23]
OK so, if there's information here in these text fields the social media information will be rendered with a link to that particular user name or whatever. If you're not going to use it just remove it.
>> Tom: If you are going to use it add it. If your social network is not listed here, you're going to need a feature request.

[00:18:50]
Once you've got that Settings block edited you go ahead and hit Submit. At that point we're ready to publish right.
>> Tom: So we've gone through the steps to get a Framework, we've gone through the steps to configure the Framework, now I'm ready to publish the entire site, to publish the entire site I publish the base folder.

[00:19:11]
You're only going to see my one destination here which is Webtest, you won't see Webserve by default, I'll show you how to get that to show up later. But you go ahead and hit Submit, that'll send it to the Publisher; my account is configured to take me to the Publisher.

[00:19:28]
Once things are going. That's about it, that's what you need to do. Now we're going to talk about a little bit of how the Framework works as we go along today, but one of the things that you need to be aware of is that you have to have your site published on Webtest.

[00:19:48]
At the very least you need this XML folder and the Settings Block published onto Webtest, well the Settings Block doesn't really publish but you at least need this XML folder OK.
>> Tom: We're going to talk about why in a little bit. So as that's publishing we can keep going.

[00:20:10]

>> Tom: Are there any questions so far? We're up to the set up point, we're ready to start adding some content. And when we start adding contents to the Framework, it really is kind of it's kind of Choose Your Own Adventure. And here's what I mean by that.
>> Tom: The Web Framework is set up in a way to create mobile-first content-first sites right, so the Framework itself has been created with mobile-first practices in mind so it is mobile friendly.

[00:20:51]
But the pieces that allow you to create content really help you showcase your content for the Web.
>> Tom: So one of the things that we're working with in IT Training is we're converting all of our old PDF materials into HTML materials through the Framework. Well in the first iteration they're not going to be written for the web.

[00:21:14]
But down the line they will be, writing for the web is different than writing for a book OK.
>> Tom: And that's one of the things that's hard for a lot of folks to understand, you can kind of look and see that in a play here you can see how there are small chunks of content, individual pieces right.

[00:21:32]

>> Tom: That's how you write for the web; smaller, consumable chunks, people don't like to read the web so the less you give them to read the better. Let's talk a little bit about how this all works. Under the Layout tab there is a description of how the layout for pages works, this is really how it works.

[00:21:54]

>> Tom: We're going to be creating individual pieces of content called Chunks, we're going to talk about different types of Chunks as we go starting with the most common and pretty much going into we run out of time. The Chunks get grouped together in sections, you can kind of see the sections visually represented on this page, you've got a section up here at the top.

[00:22:13]
You get a section down here in the red and a section below that. Each section is just a group of Chunks, a logical group of Chunks. You string multiple sections together and you get an entire page, you can actually see this if you go to one of the Main Campus landing sites right.

[00:22:36]

>> Tom: So here's a section. If I keep scrolling down I've got another section here, I've got another section here and another section a little bit further down.
>> Tom: So you can kind of see how everything's set up section by sections. And again this is kind of talking about all the different pieces we're going to talk about this is we go.

[00:23:06]
Let me try Indiana.edu. No they don't have the secondary navigation either OK.
>> Tom: So let's talk about how to create some assets, so again we're going to be trying to keep this in mind and I'm gonna start by creating a page OK. Just a simple page. In the Framework (I'm sorry), in the WCMS under the New menu, everything that's in the top level of this new menu; meaning Event, External Link and so on these are Framework specific assets.

[00:23:48]

>> Tom: These are the assets that you want to use for the Framework, you can still use these assets under default for other purposes right. So if you need a folder to organize screenshots or images or whatever, you can create that folder here from under Default you have to keep in mind though if you use the Default folder it will not be able to show up in navigation period.

[00:24:12]

>> Tom: You won't be able to, for that we want to use this folder here. So I'm going to create a folder for my cats. Because why not, I just need something to create a folder for. So I'm going to leave it in the top level and I'm gonna call it Cats.

[00:24:37]
I need to give it a display name, this is what's going to show up as the URL, the clickable portion.
>> Tom: Short Display Name doesn't really do anything right now, but it might be a good idea to include it.
>> Tom: And then you get to choose where in the navigation this lives: Primary, Secondary or not in the navigation.

[00:24:57]
So let's come back to the Framework site. Primary Navigation is right here. Secondary Navigation is right here. So depending on where I want this to show up I'll choose the appropriate radio button, so since this is basically main content for my site I'm going to want it to appear in the Main Navigation, Primary Navigation.

[00:25:27]
So I'll go and leave it set to Primary. When you create a folder you also get its default Index page. So we'll go ahead and submit. It's going to give me my folder. But notice I've also got this default Index page, I'm gonna go ahead and click on this to show you what this looks like.

[00:25:50]
And remember I have not, I've told this that I want this folder to show up in my Primary Navigation. It's not there. Why is it not there? Well it's not there because I have not; One: published it, Two: I have not published my XML folder. OK.
>> Tom: When you change navigation in any way; so meaning you either add a link, you add a page or move a page, reorganize the folder, when you change the page you have to publish this XML folder to Webtest.

[00:26:29]
This is the same for Production it goes to Webtest. If it's not on Webtest your navigation won't work. So that XML folder gets published to Webtest. Should just kind of blip through, now when I go to the Index of my cat folder, I should see in my Cats folder my Felines link in the main navigation.

[00:26:50]
All right so I'll say that again. When you change navigation in any way. You have to publish that XML folder, otherwise your changes will not take effect. Got that? If there are any questions about it let me know. But this is essentially what you get by default, you can see I've got a sample secondary; I've got Profiles, News, Events, Content Chunks, an External Belt link.

[00:27:20]
These are all analogous to those, those particular places in the folder structure.
>> Tom: So my Content Chunks is this Chunks folder, if I don't want it in my navigation I remove it from my navigation or I remove it from the site.
>> Tom: So they'll show up by default, you can remove them later, it's not a big deal.

[00:27:40]
So let's go ahead and edit this and start talking about some of these chunks. So. Now there were in and we can start working with our our content, this is essentially what you're going to see. Right so for the display name; you're going to give this page whatever name you want to display as a hyperlink text or in the title bar, any of those types of things.

[00:28:15]
Right so these are my cats. Whatever. "Learn about the cats" sure why not?
>> Tom: Now the Index page is always going to be of the same navigation as the folder, just because when you click on the folder you see it, Index won't show up in any of the other navigation.

[00:28:44]
So you can choose Primary or not and it's not going to change the fact that you'll still be able to get this, the Index page from the navigation. Now whether or not it's a wide page is a different question altogether. A wide page is a page that does not have secondary navigation.

[00:29:05]
So this is a page with secondary navigation. Secondary navigation. If I can get my annotation tools to turn on, there we go, is right here that's the secondary navigation.
>> Tom: That is created by having siblings to this page. OK so when I click on Layout, all of these are siblings of this main page in the layout folder, that make sense?

[00:29:36]
So if there are going to be no siblings you can turn this into a wide page.
>> Tom: If you tell it to be a wide page and there are siblings, this is what happens. You see how that's bad, content's covered up by the navigation.
>> Tom: That's what happens for a wide page or a breakout section if there's sibling navigation, don't do that.

[00:30:08]
You can kind of leave some internal notes. These will show up on the page in the WCMS, they will not publish. OK. You can determine how this page gets displayed via Facebook Twitter, Facebook and Twitter, these don't show up in the page itself these are metadata pieces.
>> Tom: So you can choose that featured image, you can choose the title and description.

[00:30:34]
You see this when you go to a page that's on some social media link that someone has shared; it's got that image, it's got a title, it's got some description text, this is where you set up for both Facebook and Twitter. If you want to have your page be shareable you can check the Share link; share this page and it'll put up the social media icons so that you can share it for whatever ones you sort of filled in here.

[00:31:04]
The banner is what appears at the top of the page. So if I look at let's say the Layout page here. This Layout page basically doesn't have a banner, there's nothing here.
>> Tom: Let me see if I can find something, I can, I could show you something. The banner, this page does have a banner, the banners is this image OK.

[00:31:30]

>> Tom: So the banner is just that chunk at the top, below the navigation, above the content.
>> Tom: Some of the stuff that we're doing it doesn't use an image for the banner, instead it uses text so I can give you a sneak preview. You won't be able to actually follow me here.

[00:31:55]
But I will give you just a brief overview of what this look like with a banner. So you can kind of see here. This is our banner, it's text. And then here's the content right, this is a work in progress.
>> Tom: So you can choose if you've got an image banner or a text banner, if you've got no content here you won't have a banner.

[00:32:22]
Right, the page is not required to have a banner. You can if you like.
>> Tom: And then we start getting to where we set up our sections. Remember a section is a group of chunks. So in each section. First of all we, we'll talk about this type of section in a minute, we're going to stick with On The Page for now because they work the same as attached sections.

[00:32:51]
You have some details. In this detail section you can choose a color for your section. You don't want to put a background color in your first section it just looks terrible. So leave your first section on a page with no background. You can arrange your chunks in grids.

[00:33:16]
Determine whether it's a breakout section, what's a breakout section?
>> Tom: With the second section on this page, the crimson section, that's a breakout section.
>> Tom: Notice it's going underneath where the navigation would be if it were longer. So you kind of have to keep those types of things in mind; you can create wider sections as long as you're not going to obsecure them with your secondary navigation.

[00:33:43]
You can determine whether to have space or horizontal rule at the bottom of the section, you can give each section its own header and choose its level, you cannot choose H1 here because the H1 is the title of the page.
>> Tom: So, let me go back to the Framework page.

[00:33:59]

>> Tom: The H1 is basically this right here. So you can't actually have another H1, which is why the only, the first thing you can select is an H2. You don't have to use a section header, you don't have to use a section background, background image, you don't have to arrange things in grids you can arrange things just fine by floats.

[00:34:23]
This is actually really confusing to a lot of people if you're arranging your chunks in grids but then you choose some of the floating options in the chunks, they're not going to, they don't behave together.
>> Tom: So if you choose grids it's going to ignore the chunk, the floating options you choose in the next section.

[00:34:43]
So that's a section, those are section wide settings, then we get into the chunks.
>> Tom: Each section can have as many chunks as you like and the chunks are of a particular type right.
>> Tom: So like we showed here in this diagram a single chunk is an individual piece of content, you put multiple chunks together you get a section, you put multiple sections together you get a page.

[00:35:07]
So what are the chunks?
>> Tom: Well here are the different chunks that we have available to us, there are lots of them. You can see them all listed here, we're going to talk about some of them as we go.
>> Tom: The most common is text and the text chunk basically gives you a WYSIWYG editor and allows you to create content, so here's a text chunk.

[00:35:28]
This is content being driven by a text chunk. Text chunks can have headings. And then text content. Right so let me just let's just talk about a text chunk at first.
>> Tom: So you choose type of chunk which is text by default, and then here are the options you've got: like I said you can give it a heading, choose a level; set it's position, this is the position property that's ignored if you're using grids.

[00:36:00]
If you're using grids it's just going to use either half-grid or third-grid, whatever you choose, and just arrange the chunks automatically. If you want this to sort of be divisible by however you like, don't use floats instead use position.
>> Tom: So here's some content. "My cats are the coolest demons on the planet" Write a note, let's just start with that.

[00:36:43]

>> Tom: So by default these things turn into paragraphs. When you create a hyperlink you want to make sure it gets the e-mail style, so I want to select it. And just be sure it gets the email style, this email style obfuscates the email address so it can't be picked up by spam bots.

[00:37:05]
So again the way I did that is I selected it. And then chose Email style from the Styles menu here. That's essentially what a text chunk allows you to do, now there is some other stuff kind of built in here. Like a Call To Action button. What would you choose a hyperlink to another website, so let's say "the planet".

[00:37:37]

>> Tom: We want to link to something, I did that without talking about it, you just choose the little hyperlink icon. It allows you to link internally which means it's an asset inside Cascade Server or externally meaning it's not in your Cascade Server site. So let's say "the world" is Google.com, that's it, that's how you create the hyperlink.

[00:38:00]
You select the text you want to make into the link, click the link button, go from there. The important thing to remember is if you're creating in a mail-to link you have to put in that email class to obfuscate it. So let's talk about Call To Action buttons, these can be kind of confusing.

[00:38:24]
First thing is you've got some text, I want to turn this into a Call To Action button.
>> Tom: Here's what I mean by a Call To Action button, if I look at the front page of the Framework. Well no this is the front page of the Framework. And I look in the second section, that button, that's a Call To Action button.

[00:38:47]
To create a Call To Action button, the first thing you have to do is, you have to remove the structure from the content.
>> Tom: So right now this is a paragraph. First thing I have to do is remove that paragraph by clicking the dropdown menu and click in Format.

[00:39:08]
Second thing is to turn this into a hyperlink. So I'll select the content, hit the Link button. Let's just say this is going to link to my home page just because it needs to go somewhere. Then I select the hyperlink and turn it into a button. OK has to happen in that order, so here it is again.

[00:39:38]
First thing to do is to remove the formatting. Second thing is to turn this into a link. Then we select the link in the Styles dropdown turn it into a button. OK. That's how you create a Call To Action button. Questions about that? It's a really common question we get in the Framework help channel.

[00:40:23]
So. I'm going to turn this into a left, left floated half chunk. Questions about text chunks? I'm gonna show you how to start adding chunks.
>> Tom: We're going to talk next about the, the, well let's talk about a panel next. So I'm gonna go ahead and collapse this group.

[00:40:54]
It's going to kind of help keep things a little more organized. When I click the plus under the chunk I get a new chunk, when I click the plus under section I get a new section, so click the plus under chunk. It'll give me a new chunk, so you can see this is my text chunk that I just created, my next chunk I'm going to turn into a panel.

[00:41:19]
Now panels are basically....here, this is a panel right.
>> Tom: So you can see that we're using panels for our exercise files.
>> Tom: A panel just basically a call out of some sort that has a heading, some text, maybe a Call To Action but doesn't have to have a Call To Action button.

[00:41:48]
You can if you want. So when I open this up it looks like it's got exactly the same options as the text chunk because it does right, we can give it a header, the header is what kind of shows up as the label of the panel. Call them by their name.

[00:42:11]
So this will be, let's say it's an H2. And we want this one to go to the right, one half. Right. So that's essentially what, panels are pretty simple. They're basically small WYSIWYG editors or small WYSIWYG content, again you don't want to be putting a whole lot of content in a panel.

[00:42:54]
You just want to add a few bits here and there. Does that make sense? Any questions so far? Now the rest of the pieces, they're pretty much, pretty much the same.
>> Tom: We're going to talk about a few, a few that kind of break that sort of model; but for the most part: Text, Pull Quote, Panel and Call Out for the most part work the same way right.

[00:43:37]

>> Tom: So you end up with the same sorts of fields, some sort of editor for the content and you just put it together. We're gonna create a new section and we're going to talk about a couple other pieces. So I'm going to click that plus for the section.

[00:43:55]
Which will give me a new section below the first, this is where these internal labels become helpful.
>> Tom: So this is "Intro to the cats and their names". I don't know what this is going to be, this is going to be something. Some kind of section. Whoa. Did you all hear that?

[00:44:25]

>> Tom: Someone just made a sound. I have no idea what it meant. So let's talk about a couple of these panels, these chunks that are different, we're going to start with an interactive panel. An interactive panel is like a panel, so basically it's displayed like a panel. So let me show you this.

[00:44:54]
The documentation here. So the interactive panel, it kind of looks like a panel except the whole panel is a button. OK so it's got a heading, subheading and then the whole thing is a button. So let's say "Meet Roark" why not. Heading 3, position it left. I want this to be a third because there are three of them.

[00:45:36]
And then we'll link to his page. So essentially, let's say I wanted to make this be three across, I would choose another interactive panel. And say.....it'll be left. Third...you know whatever and we can link to Komodo's page. So those are interactive panels, another type of chunk we'll talk about while we're here is a video chunk.

[00:46:46]
So as soon as I get a new chunk. The video chunk allows you to embed a video from a video streaming site. So you get to choose where this lines up, so this will be a left-align video as well that's a third. And in the video type, this is a little, so if you're getting a new Framework you'll also see an option for Kaltura here.

[00:47:13]

>> Tom: I haven't updated this Framework site to have Kaltura yet but you can do YouTube video, HTML5 or Kaltura video. So if I use YouTube, all you do is put in, here let me kind of make this happen so. If we go to YouTube. And I'll just find a video.

[00:47:46]
Maybe. It's slowing down! So we want to find something about a black cat. Why not?
>> Tom: So you grab the URL. Pop it in here, we'll say yes it's widescreen. And then the caption is basically a description of the video. And that's our video chunk. YouTube, Vimeo and Kaltura all work the same way you just paste in the URL.

[00:48:38]
HTML5 video is a little different because you actually have to upload the videos to the Framework site and then link them on the HTML5 videos. So I'll add a chunk so we can see what that looks like. Not really going to do a lot with the chunk once it's up.

[00:48:56]
Just to kind of show you what that looks like.
>> Tom: So if I chose video and then I chose HTML5 video, you'll see that my options are for: the thumbnail which is an image, the H264 MP4 video, the web in video, and a caption.
>> Tom: Questions about video chunk or interactive panels?

[00:49:39]
Gonna go ahead and get rid of that last video chunk. Then I'll submit so we can see that this all looks like. Right so there's no, there are no siblings so we don't get the secondary navigation.
>> Tom: Here's my text chunk. That should not look like that. I'll work on that in a moment.

[00:50:17]
Here's the cats being called by name: Roark, Komodo, and then there's my video. So let's fix a few things here. I wonder if I accidentally set that text to be a Call To Action button? Alright so here we are, here's our intro to the cats. Let's take a look here.

[00:51:04]
[INAUDIBLE] That's weird that shouldn't be doing that, maybe I broke it in the CSS. So here I want that one to be left. This one to be right. You know what let's just turn this into a grid section. So we can see how that works. Because that's really what I want this to be.

[00:51:51]

>> Tom: So when you're just putting two pieces in, you don't necessarily want to use a grid.
>> Tom: When you're putting more than two sections and you want them to be side by side that's where the grid comes in handy. So it doesn't matter what I set on these they'll still show up as a grid.

[00:52:26]
So there we see a grid, that's a little better. All right. Let's see. I'm gonna talk briefly about three different, three more blocks and I think we're probably going to be towards the end of our time, and then I'll talk a little bit about how to not break the Framework if you're kind of modify it a bit.

[00:53:02]
Yeah the video will be eventually be available, it'll be hosted on the Framework.IU.edu site as well as somewhere in our IT Training site.
>> Tom: It will be easier to get to from Framework.IU.edu. So. As soon as my computer decides to load the page, here we go. The last couple chunk types that I want to talk about.

[00:53:30]
I'm gonna I add one more section.
>> Tom: They're the Accordion, the Call To Action chunk, and an Image chunk because they are a little different as well. So I'm going to go ahead and get rid of all of these chunks.
>> Tom: You basically get the same number of chunks as the previous section had every time you get a new section.

[00:54:05]
So first of all let's kind of look at what these do. So if I look at the Accordion chunk. The Accordion chunk is basically for collapsible content, so when you click on it it expands, you click on the accordion again and it collapses. Right. That's an accordion chunk.

[00:54:34]
The Call To Action chunk, where is it?
>> Tom: If you're going to have multiple Call To Action buttons together, the Call To Action chunk will display them side by side up to three, your maximum is three. So if you're going to have multiple Call To Actions in a single band, single section of your site, use the Call To Action chunk.

[00:55:03]
The image chunk. Allows you to create different types of image content. So you can create just a single image. Which gives you just a large image and a caption. You can create an image essay which gives you several images together that allows you to give a caption. And a photographer.

[00:55:34]
And then a slide show gives you a scroll-able, this is not automatically scroll-able. For pretty good reasons if you want to kind of see why, you can hop into the Community of Practice link.
>> Tom: But this allows you to have a series of images that the user can kind of scroll across with captions and attribution as well.

[00:56:02]
So how do these work if we were to create them? Well the first thing you do is you choose the appropriate chunk type. So I'm creating an accordion, each accordion has a label and then the content for that piece.
>> Tom: So if I look back at my accordion example the label is what goes on the fold.

[00:56:26]
And the content is what goes inside the fold. You can create as many as you like.
>> Tom: There's no way to pick one to be expanded, it's just they all come collapsed ,you keep clicking the check or the plus sign to get more folds. When you're done, you move on to your next chunk.

[00:56:47]
So that's an accordion. The Call To Action chunk, each Call To Action has a label and a URL, the URL can be either internal or external. Internal you use the browser. External you type it in, not both. So that's the Call To Action chunk, remember up to three buttons.

[00:57:21]
And the last one I told you we would talk about is Image. I've got one minute. The image choose the type. A single slideshow or an essay, and then they they pretty much all work this way; there's an Image Browser, a Caption and some Attribution. So single is just one a slideshow, you can choose multiples.

[00:57:49]

>> Tom: So you basically keep adding, just like you keep adding chunks you keep adding slides. And for the essay you get to choose the large image, two smaller images, a caption and attribution.
>> Tom: So that brings us to 12:15, I do want to briefly talk about how to not disassociate your Framework from the main repository.

[00:58:21]
So that if you do end up modifying it in a way, in any way. You don't end up breaking that sort of inheritance. A lot of the modifications to CSS are fine. As long as you're not changing the main CSS, so if I come up here to the assets folder under CSS there's a site CSS file.

[00:58:49]
That's where you want to make your CSS modifications, same with JavaScript there's a site JavaScript file. And these are for inside the WCMS so I wouldn't mess with those. Now if you're the type who wants to change the way things are structured. So let's say these chunks don't meet your needs completely and you need to restructure them, these chunks are built on data definitions.

[00:59:18]
So the data definitions are located here. And then they're styled using Velocity. So the Velocity is located here, Page....Chunks.
>> Tom: So if you're going to modify the Velocity as soon as you, I'm going to show this to you, as soon as you change this include that you're about to see soon as you change this import you've broken your site from the mothership So you're basically kind of responsible for keeping your text chunks up to date on your own so you can kind of see this is pointing to the AI you frame web-S comment folder.

[01:00:04]
You've got the eye you frame web-S common site that's available to you that you can read. When you're in that site you do have access to all of the pieces so the branding bits the P.H.P. events the velocity That's next and cell bits kind of look at those you can't change these.

[01:00:23]
But those are what's available. You know what you can change. We can talk about that a lot more. But that's kind of like a next level framework classes how to appropriately modify things in the framework. All right are there any questions. All right great thanks for coming.