Drupal Introduction and Quick Start Lab Session Transcript WEBVTT Kind: captions Language: en-US 00:00:01.920 --> 00:00:05.200 And can somebody give me a thumbs up I can see, Henry like can you see my screen 00:00:05.200 --> 00:00:08.560 now that I went into - perfect okay thank you. All right, so 00:00:08.560 --> 00:00:12.960 welcome to UCSF Site Builder Training this is our Drupal Introduction and 00:00:12.960 --> 00:00:16.960 Quick Start Lab session and I'm Jill Wolters the Web Standards 00:00:16.960 --> 00:00:21.680 Program Manager. I work out of IT Services in a team called 00:00:21.680 --> 00:00:25.440 Web Services. John Kealy is my supervisor and I have 00:00:26.400 --> 00:00:28.480 a lot of other co-workers that work on our team. 00:00:29.280 --> 00:00:33.680 And Drupal is the name of a content management system that we use here. 00:00:34.560 --> 00:00:38.880 We also use CMS as the acronym for Content Management System. 00:00:40.080 --> 00:00:45.680 And Drupal is used at a lot of higher ed places, like Stanford uses Drupal. 00:00:45.680 --> 00:00:48.880 Of course, they customize it with their own branding like you'll see we customize 00:00:48.880 --> 00:00:52.960 ours with our branding. And this session is for Drupal 7. 00:00:53.680 --> 00:00:57.680 There are some folks at our university that are still on a previous version 00:00:57.680 --> 00:01:01.840 that will look a little bit different than what I show you 00:01:01.840 --> 00:01:06.560 and then there's also a few sites in our university that have moved to Drupal 8 00:01:06.560 --> 00:01:09.360 because they're customers of ours and working with our developers. 00:01:10.240 --> 00:01:13.360 But if you've heard any rumors that Drupal 7 is 00:01:13.920 --> 00:01:17.200 having an end of life later this year, that's true 00:01:17.200 --> 00:01:20.960 but at UCSF we will be supporting it for another couple years 00:01:20.960 --> 00:01:23.440 so have no fear, there is still support available. 00:01:24.480 --> 00:01:29.600 And so let's get started. I usually start off with a short PowerPoint presentation 00:01:30.160 --> 00:01:33.360 and then the bulk of the session is all live so 00:01:34.000 --> 00:01:36.960 you can watch me as I demo what we're going to do. 00:01:38.320 --> 00:01:42.240 So here's a review why do we have websites and it's basically to 00:01:42.240 --> 00:01:46.960 communicate with our customers. So it's to attract patients, faculty, 00:01:46.960 --> 00:01:50.880 students, alumni, researchers, 00:01:50.880 --> 00:01:56.480 donors, informing our community, informing the community at large, which a lot of us 00:01:56.480 --> 00:02:01.360 are starting to do now with COVID-19. So keep your audience in mind. We usually 00:02:01.360 --> 00:02:04.720 recommend that if you feel that you have a lot of 00:02:04.720 --> 00:02:09.600 different audiences, maybe you need a couple different websites. Because the 00:02:09.600 --> 00:02:12.640 the tone and voice that you would use for a researcher is going to be 00:02:12.640 --> 00:02:18.560 something quite different than say for a parent of a student who is thinking 00:02:18.560 --> 00:02:22.320 about coming to our university and maybe English isn't their first language. 00:02:22.320 --> 00:02:26.400 So you can see how there might be a whole spectrum of language that you would use 00:02:26.400 --> 00:02:28.160 for different audiences. And by that I mean 00:02:28.800 --> 00:02:31.920 at in the U.S., the reading level is eighth grade level 00:02:31.920 --> 00:02:35.840 and so some people jump to the conclusion that oh, since we're a 00:02:35.840 --> 00:02:40.960 university in higher ed, we can we can speak at a much higher 00:02:40.960 --> 00:02:43.360 level than that. But that's not always the case so 00:02:43.360 --> 00:02:47.120 always keep your audience in mind and try and focus your 00:02:47.120 --> 00:02:52.080 your message to that audience. And then responsibilities of website 00:02:52.080 --> 00:02:55.120 owners, this is the list of web standards that 00:02:55.760 --> 00:02:59.680 my role is responsible for. And so I'm going to walk through what some of these 00:02:59.680 --> 00:03:02.080 are. Some of them have legal liability with them 00:03:02.960 --> 00:03:08.000 like accessibility. So we want to make sure that all of our content 00:03:08.000 --> 00:03:13.680 is accessible to folks and by that we don't want to put any barriers up for 00:03:13.680 --> 00:03:17.920 people that have disabilities. Like somebody who's blind we want to 00:03:17.920 --> 00:03:22.640 make sure that sometimes things like 00:03:22.640 --> 00:03:28.080 fancy javascript, they they might get blocked. Their assistive technology 00:03:28.080 --> 00:03:31.040 can't latch onto that and they might not be able to 00:03:31.040 --> 00:03:36.160 to get to content. Or somebody who's deaf, if we don't have closed captioning on 00:03:36.160 --> 00:03:40.800 our video, that puts a barrier to content for them. 00:03:41.520 --> 00:03:44.560 That there was a recent, well not so recent, but 00:03:45.120 --> 00:03:49.280 one of our sister campuses, UC at Berkeley, had a lawsuit brought against 00:03:49.280 --> 00:03:53.280 them for having video content that did not have captions. 00:03:53.280 --> 00:03:56.800 And their intent was to share all the 00:03:56.800 --> 00:03:58.960 knowledge that they had, and put all of their 00:03:58.960 --> 00:04:01.600 educational videos out online for the whole world. 00:04:02.160 --> 00:04:07.360 Which was a you know a great um a great thought but then when a lawsuit came 00:04:08.080 --> 00:04:14.960 and the the way it worked out was you either need to caption all these 00:04:14.960 --> 00:04:18.160 videos or take them down and because the cost was 00:04:18.160 --> 00:04:21.280 so great to make to provide all that captioning, they 00:04:21.280 --> 00:04:26.160 decided to put it behind a password. And in effect that reduced their 00:04:26.160 --> 00:04:29.200 audience, but it also reduced their liability and 00:04:29.200 --> 00:04:31.840 so when we have things behind a password 00:04:32.720 --> 00:04:35.920 usually students and staff have other avenues to 00:04:35.920 --> 00:04:38.400 go to instead of bringing a lawsuit against the 00:04:38.400 --> 00:04:42.160 university. If it's a student they can go to Student Disability Resources 00:04:42.160 --> 00:04:43.440 and ask for accommodation. 00:04:45.520 --> 00:04:49.680 Our co-workers and staff can go to HR to ask for accommodation. 00:04:49.680 --> 00:04:53.840 So to ask for accommodation might mean they need it in another format 00:04:53.840 --> 00:04:57.200 and we would work quickly to to provide that for them. 00:04:57.200 --> 00:05:01.680 So there is a link there to the digitalaccess.ucsf.edu website. 00:05:02.320 --> 00:05:07.120 And that's a site my predecessor put up and I've been maintaining it and it has 00:05:07.120 --> 00:05:10.080 lots of information on how to make things 00:05:10.080 --> 00:05:13.680 accessible. So like you want to make sure any pdfs that you put up on your website 00:05:13.680 --> 00:05:19.440 are accessible. So I'm going to wrap that one up with 00:05:19.440 --> 00:05:22.480 a mention of the WCAG AA standard. 00:05:22.480 --> 00:05:26.880 WCAG stands for Web Content Accessibility Guidelines. 00:05:26.880 --> 00:05:29.680 That you can find all this information on that on that link. 00:05:30.320 --> 00:05:34.000 And there are three levels of standard, single A, double A (AA) and 00:05:34.000 --> 00:05:42.320 triple A (AAA). AAA is the hardest to to comply with and so our University of 00:05:42.320 --> 00:05:46.560 California policy for accessibility says we have to 00:05:46.560 --> 00:05:50.560 meet up to level double A so we have to meet single level 00:05:50.560 --> 00:05:54.880 A criteria and double A criteria and this is the bulk of the work that I 00:05:54.880 --> 00:05:59.520 usually do, is helping people make their, learning how to make their materials 00:05:59.520 --> 00:06:03.760 accessible. Now with COVID-19  I'm being pulled into doing some 00:06:03.760 --> 00:06:08.560 communications for for the frontline communicators and so 00:06:08.560 --> 00:06:12.880 my accessibility piece has kind of been pushed to the 00:06:12.880 --> 00:06:16.800 side. So if you've got material that you need to 00:06:16.800 --> 00:06:19.840 make accessible for COVID-19, I'm definitely there to help you. If it's 00:06:19.840 --> 00:06:22.320 other kinds of material, we might have to wait until 00:06:23.840 --> 00:06:29.440 things die down a little bit. So second responsibility of website owners is 00:06:29.440 --> 00:06:31.920 about branding. We want to make sure that we maintain 00:06:31.920 --> 00:06:36.480 UCSF's branding identity and that's so people that come to our 00:06:36.480 --> 00:06:39.520 websites trust that it's one of our sites because we have the same look and 00:06:39.520 --> 00:06:42.560 feel. There is also a link to Identity here 00:06:43.200 --> 00:06:46.880 and there's a different brand for the campus side and a different brand for 00:06:46.880 --> 00:06:50.080 the medical side. So if you go to that website you will 00:06:50.080 --> 00:06:53.760 find information about that. There's also 00:06:53.760 --> 00:06:57.760 color palettes. There's a digital color palette that we have incorporated in our 00:06:57.760 --> 00:07:00.400 Drupal template It's also what you would want to keep in 00:07:00.400 --> 00:07:05.440 mind if you're going to put PDFs online. Use that color palette because 00:07:06.480 --> 00:07:10.240 all the colors have been vetted for accessibility and the color combinations 00:07:10.240 --> 00:07:13.120 work together and there's some good line some good 00:07:13.120 --> 00:07:17.200 guidelines there to follow. The third one on the slide is about 00:07:17.200 --> 00:07:20.640 intellectual property. We don't want to violate copyright laws - 00:07:20.640 --> 00:07:25.040 again legal liability here. I have a story about someone at our 00:07:25.040 --> 00:07:28.160 university had taken a picture of the Golden Gate Bridge to put 00:07:28.160 --> 00:07:31.920 on their site. And just because you can go out on the web and find 00:07:31.920 --> 00:07:34.880 images and right click and save them and put them up on your site 00:07:36.240 --> 00:07:39.520 means that you really should apply due diligence for that. 00:07:39.520 --> 00:07:44.240 Make sure that you're using an image that is copyright free. 00:07:44.240 --> 00:07:48.720 Google has a search function, I believe it's under settings or tools where you 00:07:48.720 --> 00:07:51.840 can select that you want to find images that 00:07:51.840 --> 00:07:56.560 are available to be freely used. And I use I 00:07:56.560 --> 00:07:59.680 I follow that guideline a lot because what happened when 00:07:59.680 --> 00:08:02.640 somebody used that picture of the Golden Gate Bridge on their website 00:08:04.160 --> 00:08:07.520 it was an image from Getty and Getty photos are 00:08:07.520 --> 00:08:10.640 beautiful, high quality photos but they also come with a cost 00:08:11.280 --> 00:08:15.680 and so Getty sends out a little bot that crawls the web 00:08:15.680 --> 00:08:19.680 looking for an invisible watermark on their images to find out if their images 00:08:19.680 --> 00:08:22.000 are being used in a legitimate way or not. 00:08:22.000 --> 00:08:25.520 And if they're not, they can send you a cease and desist letter, 00:08:25.520 --> 00:08:29.200 they could send you an invoice. So do your due diligence. 00:08:29.200 --> 00:08:35.360 Just because like right now if you see pictures of UCSF maybe on the news that 00:08:35.360 --> 00:08:38.960 you want to put on your website, you might want to contact that news 00:08:38.960 --> 00:08:43.200 agency and make sure that it's okay and find out where who owns that image and 00:08:43.200 --> 00:08:48.400 if it's if it's okay for you to use. So I can't stress that one enough. Also 00:08:48.400 --> 00:08:53.200 privacy. Again with this one there's some laws that apply to privacy. 00:08:53.200 --> 00:08:56.560 HIPPA, which I'm sure you're familiar with, making sure that 00:08:57.280 --> 00:09:03.680 we keep our health information secure. So do not use a Google form 00:09:03.680 --> 00:09:08.880 to to have people send in their name and their email and 00:09:08.880 --> 00:09:11.040 their interest in your health study because 00:09:12.000 --> 00:09:15.040 even it seems so innocent, but even having 00:09:16.240 --> 00:09:22.560 a person's name and some kind of health issue associated with that, if that gets 00:09:22.560 --> 00:09:29.040 out there it can cause privacy issues. And so 00:09:30.080 --> 00:09:33.440 it may sound you know really, you know not 00:09:34.000 --> 00:09:37.840 not not that big of a deal just to get a name and you know get more interested in 00:09:37.840 --> 00:09:41.920 your HIV study but that kind of association, if it's out on 00:09:41.920 --> 00:09:44.720 Google, they're not known for their privacy. 00:09:45.760 --> 00:09:49.840 So we have two areas or two different 00:09:50.720 --> 00:09:56.640 ways that have been vetted by UCSF to to gather that kind of information and 00:09:56.640 --> 00:09:59.920 one of those is, you can find both of them under 00:09:59.920 --> 00:10:05.040 myaccess.ucsf.edu, one is called Qualtrics survey, begins 00:10:05.040 --> 00:10:08.880 with "Q". I use that one a lot for surveying, 00:10:10.000 --> 00:10:13.360 like my committee members, it's pretty easy to use. 00:10:13.360 --> 00:10:18.160 There's another one called RedCap r-e-d-c-a-p 00:10:18.160 --> 00:10:21.600 and that one is used a lot by our research community. 00:10:22.160 --> 00:10:25.520 And again both of those are available under myaccess.edu. 00:10:25.520 --> 00:10:31.680 myaccess.ucsf.edu. One other privacy law you need to be aware of is the FERPA law 00:10:31.680 --> 00:10:34.880 and that grants privacy rights to our students. 00:10:34.880 --> 00:10:38.480 So if you're going to have a website and you want to have a page about your staff 00:10:39.280 --> 00:10:42.480 be very cautious about putting the student information. 00:10:42.480 --> 00:10:46.000 I would recommend that you send them an email say "we'd like to 00:10:46.720 --> 00:10:52.800 feature your name and your photo on our site are you okay with that" 00:10:52.800 --> 00:10:56.800 then you have a paper trail. Should you leave your job, pass that on to the 00:10:56.800 --> 00:11:00.240 to your supervisor or the next person that takes over 00:11:00.240 --> 00:11:04.000 to show that you were allowed that because the FERPA law is pretty 00:11:04.000 --> 00:11:08.000 stringent. Even parents are not allowed to call the university and ask about 00:11:08.000 --> 00:11:11.200 their student grades. All student information is private 00:11:11.200 --> 00:11:17.600 and in our directory.ucsf.edu, if you look up a student they might not 00:11:17.600 --> 00:11:22.400 be in the directory because they have to opt in to have that information 00:11:22.400 --> 00:11:26.320 available. So I wanted to let you know about that one. 00:11:26.320 --> 00:11:29.760 And the very last one is security. We want to make sure our sites 00:11:29.760 --> 00:11:33.520 are secure and there's a link to a policy here. 00:11:34.960 --> 00:11:41.200 If you use our Drupal template we, our team, takes care of applying security 00:11:41.200 --> 00:11:46.560 patches on a weekly basis and so if you are set up as an admin you 00:11:46.560 --> 00:11:50.240 might be getting these notification notifications that there is a security 00:11:50.240 --> 00:11:53.920 patch to apply. And it will, if you try to follow that 00:11:53.920 --> 00:11:57.440 link it's just gonna kind of lead you to a dead end but 00:11:57.440 --> 00:12:00.880 I want to make you aware that you do not have to take any 00:12:00.880 --> 00:12:03.840 action on security patches for Drupal. You don't 00:12:03.840 --> 00:12:06.800 need to take any action if you're getting any kind of notifications like 00:12:07.680 --> 00:12:11.280 "oh there's new feature updates" that's all taken care of by our team. 00:12:11.840 --> 00:12:16.160 So I want to compare using our template with using something like Squarespace or 00:12:16.160 --> 00:12:21.040 Wix. Those are some other web hosting sites 00:12:21.600 --> 00:12:24.400 and we can't be a hundred percent sure that they're 00:12:24.960 --> 00:12:29.280 following the stringent security policies that we do. So that's why 00:12:29.920 --> 00:12:33.920 we like to push people to use our Drupal Hosting, 00:12:34.640 --> 00:12:37.840 that way it's it's less of a burden on you. 00:12:38.480 --> 00:12:42.160 So that's a wrap up of the web standards and policies 00:12:42.720 --> 00:12:47.440 briefly. Once you have content on your website and you want to 00:12:47.440 --> 00:12:52.960 talk about any of these issues please feel free to contact me and I 00:12:52.960 --> 00:12:57.120 usually do a lot of monthly sessions on 00:12:57.120 --> 00:13:00.160 accessibility and those are kind of dwindling down 00:13:00.160 --> 00:13:04.240 right now but we heart I hope to start bringing those back as 00:13:04.240 --> 00:13:07.760 soon as we get through this as soon as the 00:13:08.320 --> 00:13:10.080 what do they say, as soon as it flattens out. 00:13:13.680 --> 00:13:16.720 So here's a little plug for one of the tools that I 00:13:17.760 --> 00:13:20.880 I use for accessibility, it's called Siteimprove. 00:13:20.880 --> 00:13:24.880 And it monitors your site for accessibility compliance against the web 00:13:24.880 --> 00:13:27.680 the WCAG, the Web Content Accessibility Guidelines 00:13:28.320 --> 00:13:31.040 and I'd be happy to review that tool with you. 00:13:31.840 --> 00:13:35.840 Take a look at our events page, there's there's going to be a Siteimprove 00:13:35.840 --> 00:13:40.720 Kickoff meeting next Monday I hope, unless I'm pulled away but that 00:13:40.720 --> 00:13:42.640 might also be something that I record for 00:13:43.600 --> 00:13:47.280 for future use. And Siteimprove is also great 00:13:47.280 --> 00:13:50.080 it will it has an analytics module, it has 00:13:50.640 --> 00:13:54.240 a Quality Assurance module which will check for broken links and possible 00:13:54.240 --> 00:13:57.920 misspellings and so it's a great tool all around to 00:13:57.920 --> 00:14:04.240 use for your website management. Here is our training agenda as soon as 00:14:04.240 --> 00:14:08.240 we finish the slideshow. I'm going to go into my test environment 00:14:08.240 --> 00:14:13.680 I want to let you know that the the website that I use, there's just a 00:14:13.680 --> 00:14:15.840 teeny tiny couple things that are a little bit different 00:14:17.680 --> 00:14:21.120 so I will I will make note of that as we go through that 00:14:21.120 --> 00:14:24.880 but hopefully everybody's logged in. I'll show you how to configure 00:14:25.840 --> 00:14:29.360 your admin account and then we'll jump into the Site Wizard. 00:14:29.360 --> 00:14:31.600 And there's a couple things on this agenda that are 00:14:32.880 --> 00:14:36.640 vocabulary words that are unique to this content management system like Starting 00:14:36.640 --> 00:14:40.480 Points and Blocks. And we'll be reviewing all of those and 00:14:41.440 --> 00:14:45.120 today's session is really just how to how to get into 00:14:46.000 --> 00:14:49.920 you have a a blank slate I know some of you already have content 00:14:49.920 --> 00:14:53.120 but this um the session's geared to those that have a blank slate 00:14:53.760 --> 00:14:58.640 and I'll be showing you how going through the interface not 00:14:58.640 --> 00:15:00.960 I won't be able to go into every nook and cranny but we'll be 00:15:01.680 --> 00:15:06.160 taking a look at at least what you need to get a quick start to put a website 00:15:06.160 --> 00:15:08.880 together. And we'll be making quick decisions when 00:15:08.880 --> 00:15:13.280 we pick colors and we'll be going into a photo library 00:15:13.280 --> 00:15:16.240 from UCSF where there's images that we can use on 00:15:16.240 --> 00:15:19.840 our websites. And we'll just be making quick decisions just as 00:15:19.840 --> 00:15:24.160 just so you can see how this all works together. And the very last part of this 00:15:24.160 --> 00:15:26.880 session is the public service announcements, 00:15:26.880 --> 00:15:32.480 that's how to get help and support after this session so 00:15:34.480 --> 00:15:41.840 that ends the slideshow. And 00:15:44.640 --> 00:15:48.160 here is my screen with my Site Builder site. 00:15:52.240 --> 00:15:55.360 I just want to do one more confirmation if somebody could 00:15:55.920 --> 00:15:58.400 let me know if you can still see my screen okay. 00:16:04.640 --> 00:16:07.840 All right I think I heard a "yes", thank you. 00:16:08.640 --> 00:16:12.880 Perfect, all right so this is what it looks like when you have a brand new 00:16:12.880 --> 00:16:21.840 site and we click on Let's Get Started 00:16:23.200 --> 00:16:28.400 and you want to enter your site's info. So this word Site Builder here in the 00:16:28.400 --> 00:16:32.160 field reflects what you will see up here in the top left corner. 00:16:32.160 --> 00:16:36.000 I'm going to change the name just so you can see how how that change takes effect. 00:16:36.000 --> 00:16:39.120 I'm going to change it from Site Builder to Training 00:16:39.680 --> 00:16:43.840 Test site. And you want to make sure you have a legitimate 00:16:43.840 --> 00:16:46.320 email name in here for your admin's email 00:16:48.400 --> 00:16:51.840 and hit next. And here we are at the color theme. This has been 00:16:52.800 --> 00:16:57.760 put together by Identity and we have a basic color palette with our navy and 00:16:57.760 --> 00:17:02.080 blues and shades of black, white, and gray and you 00:17:02.080 --> 00:17:06.000 get to pick your primary color and your secondary color by clicking on a color chip. 00:17:06.000 --> 00:17:08.960 I'm going to click on the blue chip for 00:17:08.960 --> 00:17:13.280 my primary color. And I'll pick red for my secondary color. 00:17:13.280 --> 00:17:17.120 We can always come back and change  these, so I'm going to make some quick 00:17:17.120 --> 00:17:22.640 decisions here and hit next. And we have the home page banner. 00:17:23.280 --> 00:17:28.320 And we have five choices of banners. There's also an option where you don't 00:17:28.320 --> 00:17:32.960 even have to apply a banner but let me walk you through what these are. 00:17:32.960 --> 00:17:37.520 So the first two you can see are more 00:17:38.400 --> 00:17:41.120 have more of a focus on text with a big text block. 00:17:41.680 --> 00:17:45.840 And the second one, kind of the same thing, with an image tucked behind it. 00:17:46.560 --> 00:17:51.120 The third one has an image on the left and a text block on the right. 00:17:52.240 --> 00:17:55.520 The fourth one is just that they're swapped out, 00:17:55.520 --> 00:17:58.000 text on the left and a picture on the right. 00:17:58.560 --> 00:18:03.760 And the fifth one is sometimes known as the slide carousel, 00:18:03.760 --> 00:18:07.200 the slide banner, or the hero. I never heard the term hero 00:18:07.200 --> 00:18:11.360 before I came to UCSF but this is what a lot of folks in University of 00:18:11.360 --> 00:18:15.520 Communications call this kind of set up. And this is what I'm going to 00:18:15.520 --> 00:18:17.680 demonstrate. You can see as I click on each of them, 00:18:18.480 --> 00:18:22.880 it puts a blue line around it to tell me I've selected it . So I'm going to select 00:18:22.880 --> 00:18:26.320 the last one, that's what I want to demonstrate and underneath, 00:18:26.960 --> 00:18:30.800 it has a choice of animation speed. This is how many seconds it will be between 00:18:31.840 --> 00:18:35.040 your slide carousel moving from the first image to the second one 00:18:35.040 --> 00:18:40.480 to the third etc. And because I'm in accessibility, I believe the user should 00:18:40.480 --> 00:18:44.800 control their experience so I  like to set mine to no autoplay. 00:18:46.320 --> 00:18:49.440 Because if somebody has a cognitive disability, 00:18:50.000 --> 00:18:55.440 having something change in 14 seconds might not be enough time for them, or it 00:18:55.440 --> 00:18:59.840 might cause confusion. I'm a very visual person and the first 00:18:59.840 --> 00:19:02.080 time I look at your images in the slide carousel 00:19:02.080 --> 00:19:05.840 I definitely need more than 14 seconds to take in and look around what I want 00:19:05.840 --> 00:19:09.600 to see. So kind of think of people, too, on a 00:19:09.600 --> 00:19:13.760 continuum. Just because they have a disability might be a reason why 00:19:13.760 --> 00:19:17.680 you want to do this or just for other types of users, too. I'm going to 00:19:17.680 --> 00:19:21.360 set mine to no autoplay. I also want to point out it's really 00:19:21.360 --> 00:19:24.240 tiny right now but you can see a left and a right arrow 00:19:24.240 --> 00:19:27.920 on that image so that's what I mean by the user controlling their experience. 00:19:27.920 --> 00:19:30.800 They can hit previous or next and go in the order 00:19:30.800 --> 00:19:34.000 that they want. So I'm going to select "no autoplay" and 00:19:34.000 --> 00:19:38.560 I'm going to click on Next. And we have a choice of a sidebar 00:19:38.560 --> 00:19:44.080 appearing on the left or the right. It seems like the right sidebar 00:19:44.080 --> 00:19:47.680 is more prevalent these days but it's it's your 00:19:47.680 --> 00:19:52.160 your choice. Hit next and then you can have your 00:19:52.160 --> 00:19:56.000 sidebar filled with white as the background color or gray. 00:19:56.000 --> 00:19:58.240 Again pick one and hit next. 00:20:00.320 --> 00:20:02.880 And just make this a little smaller, there we go. 00:20:03.760 --> 00:20:08.560 Typography style - you can see that the body text is the same choice for both of 00:20:08.560 --> 00:20:11.040 these. It's just your headings are a little bit different. 00:20:11.680 --> 00:20:18.720 And pick the one that you want and hit next. And here is where you can add 00:20:18.720 --> 00:20:22.240 social media links. If you have a Facebook or a Twitter feed 00:20:22.240 --> 00:20:26.000 or a YouTube channel, you can go grab that url and paste that 00:20:26.000 --> 00:20:28.240 in here. I'm not going to demonstrate that one 00:20:28.240 --> 00:20:33.920 but that's how that works. And hit next. 00:20:33.920 --> 00:20:37.520 Logo options. Logo options  means what's going to appear 00:20:37.520 --> 00:20:40.880 here in the top left. Since I haven't applied my setting yet, my name 00:20:40.880 --> 00:20:44.800 the name hasn't changed yet but this word Site Builder up here 00:20:44.800 --> 00:20:49.040 is what is a place where you could upload a custom logo. 00:20:49.840 --> 00:20:53.200 I just want to make you aware that Identity 00:20:53.200 --> 00:21:00.720 is very particular about logos and they on their site identity.ucsf.edu 00:21:00.720 --> 00:21:04.240 they have a section about logos and proper use of the logo. 00:21:04.240 --> 00:21:08.000 And if you work with them they might give you something called a logo lockup 00:21:08.720 --> 00:21:11.840 and that just means they've usually got the UCSF logo 00:21:11.840 --> 00:21:18.000 locked together with the the text or an image from your department and they are 00:21:18.000 --> 00:21:21.280 put together in what they  call a custom logo and so 00:21:21.280 --> 00:21:25.040 you would click here to upload that. And we'll be uploading other kinds of 00:21:25.040 --> 00:21:28.320 images, so it's the same kind of uploading process. But I'm not going to 00:21:28.320 --> 00:21:31.520 demonstrate that one today. I'm going to leave mine as text here. 00:21:32.160 --> 00:21:35.600 Hit next and then navigation. You can have 00:21:36.400 --> 00:21:41.840 your navigation sticky. Yes and you answer yes or no and the 00:21:41.840 --> 00:21:46.080 best way to explain that is to demonstrate that. 00:21:46.800 --> 00:21:49.920 I'm going to take you to the UCSF homepage 00:21:49.920 --> 00:21:53.520 and by the navigation I mean these words that start with Brand Guide 00:21:53.520 --> 00:21:57.360 and go all the way to FAQ so that's the navigation area. 00:21:57.360 --> 00:22:02.720 As I scroll there we go this, I'm sorry I'm on the Identity site. 00:22:02.720 --> 00:22:08.880 This one is sticky. You can see how that's stuck there up at the top as opposed to 00:22:08.880 --> 00:22:12.880 the University homepage. Their navigation starts with About 00:22:12.880 --> 00:22:16.480 and goes to News and Media. When I scroll on this one 00:22:16.480 --> 00:22:19.600 you can see how that is not sticky and it 00:22:19.600 --> 00:22:23.440 it scrolls away. So whatever your preference is 00:22:25.120 --> 00:22:30.080 pick that and hit Next. And meta tag image. This is how 00:22:30.080 --> 00:22:34.720 you could put up an image along with your social media account. 00:22:34.720 --> 00:22:38.880 Again, it's choosing a file and choosing an image and uploading that 00:22:38.880 --> 00:22:40.960 which we'll be going through later so I'm going to 00:22:42.480 --> 00:22:47.040 leave that one as is. And I get a "nicely done" 00:22:47.040 --> 00:22:53.840 message. Save and Continue and this is where, hopefully, you don't 00:22:53.840 --> 00:22:57.840 get anything like this. This is my test environment being a 00:22:57.840 --> 00:23:02.080 little bit odd and usually I should be able to go 00:23:02.080 --> 00:23:07.440 back to home. Get, here, let me see about login 00:23:07.440 --> 00:23:07.940 okay 00:23:11.360 --> 00:23:14.880 let me log in here. I think this is just some steps that 00:23:15.440 --> 00:23:18.800 I have to do for my environment. Let me go back to home. 00:23:20.400 --> 00:23:26.560 All right, hopefully, we're this is where you finished off. And it says "Welcome to 00:23:26.560 --> 00:23:30.480 your new site". Home page. There we go 00:23:31.440 --> 00:23:37.360 all right. I want to talk to you about Starting Points so 00:23:38.400 --> 00:23:42.880 those of you with a new site we're going to create a Starting Point by looking 00:23:42.880 --> 00:23:46.560 in the top of our editing menu for the word Structure. 00:23:47.440 --> 00:23:52.400 And then clicking on Starting Points and I'll review what these different 00:23:52.400 --> 00:23:55.760 starting points are. So we have starting points for Blogs, 00:23:55.760 --> 00:24:01.600 Events, News, Profile and Publications. I'm going to talk about what each one is 00:24:02.160 --> 00:24:07.120 and we are definitely going to do a demo of profile and take that one 00:24:07.120 --> 00:24:11.280 all the way. So blog you can have you can create a 00:24:11.280 --> 00:24:14.720 custom blog. Let me take you to our 00:24:15.760 --> 00:24:23.040 our team's Websites site home page. We have a blog. 00:24:23.600 --> 00:24:28.640 We don't call it a blog per se, we call it News and Events. 00:24:30.240 --> 00:24:36.480 And here you go. This is our blog. Every time an author puts up an article 00:24:37.120 --> 00:24:40.320 it applies the date. We can apply different 00:24:40.320 --> 00:24:43.920 topic tags that we want on there. Over on the right, 00:24:43.920 --> 00:24:48.480 this is done automatically, each time we add an author or a topic 00:24:48.480 --> 00:24:52.240 or a blog it puts together this navigation here in the right sidebar. 00:24:52.240 --> 00:24:56.720 So you want to read blogs by John  Kealy, you can click on his name, 00:24:58.000 --> 00:25:04.800 see a little blurb about the topic, you can click on that topic and read the 00:25:04.800 --> 00:25:10.000 whole article. You want to read about John, you can 00:25:10.000 --> 00:25:14.880 click on his name and read his bio. You can see all the 00:25:14.880 --> 00:25:18.240 posts done by him. So all of this is kind of done behind 00:25:18.240 --> 00:25:21.920 the scenes. Like I said, every time we add an author or we add a post, 00:25:21.920 --> 00:25:25.200 all of this magically gets put together. So that's what 00:25:25.200 --> 00:25:30.160 a blog looks like. In this template under Events 00:25:30.160 --> 00:25:34.720 we have two flavors. We have Site-specific Events or we have UCSF Calendar 00:25:34.720 --> 00:25:38.800 Events. Site-specific Events are, let me take you 00:25:38.800 --> 00:25:41.840 back to our events page, 00:25:43.200 --> 00:25:49.680 looks like this. It puts together a brief overview of what the different 00:25:49.680 --> 00:25:55.680 events are. When you click on the event you see the information that you put in. 00:25:55.680 --> 00:25:57.760 So you guys are probably familiar with this, even. 00:25:57.760 --> 00:26:02.480 This is what we're doing today. And let me go back to the template here, 00:26:02.480 --> 00:26:07.040 there's also UCSF Event Calendars. Let me just click into this and, 00:26:09.120 --> 00:26:12.320 sorry I did not want to click into this one. I just wanted to say that 00:26:13.760 --> 00:26:17.840 to use this one you need to have a free account 00:26:17.840 --> 00:26:22.240 with UCSF calendar. If you go to calendar.ucsf.edu 00:26:22.240 --> 00:26:29.360 you can apply for apply to add events to their calendar and then if 00:26:29.360 --> 00:26:32.960 you use this feature, it does a data pull which pulls in 00:26:32.960 --> 00:26:35.520 information from the calendar into your site. 00:26:35.520 --> 00:26:40.400 So if your role is a lot of a marketing/ communications type person, and you 00:26:40.400 --> 00:26:44.320 send information out to lots of different channels, think of using this. 00:26:44.320 --> 00:26:48.160 If you put something on the UCSF events calendar instead of manually putting it 00:26:48.160 --> 00:26:51.840 in again on your page you can have a data pull and bring that in. 00:26:52.960 --> 00:26:57.520 The News is also two flavors: Site-specific news that you would manually 00:26:57.520 --> 00:27:03.040 create and then there's UCSF News this is the one I want to click on and 00:27:03.040 --> 00:27:06.160 show you that you can choose what areas that you 00:27:06.160 --> 00:27:10.640 want to pull in news from. So it's the UCSF news site 00:27:11.840 --> 00:27:14.800 that you're pulling information from so you can narrow it down to 00:27:15.600 --> 00:27:21.600 you know, multiple areas. One one area, you can select multiple 00:27:21.600 --> 00:27:27.440 topics. Let's see I'm on a Mac, I'm going to do 00:27:27.440 --> 00:27:31.440 control click to click a couple different ones, to select 00:27:31.440 --> 00:27:35.520 multiple topics. There's a little information right here 00:27:35.520 --> 00:27:40.480 how to do that on a PC or on a Mac and then create a starting point. I'm not 00:27:40.480 --> 00:27:42.800 going to take this one all the way through but I do want to show you 00:27:42.800 --> 00:27:47.840 a little bit what this looks like if I create a starting point. 00:27:49.120 --> 00:27:53.360 Give it a minute here, I get a success message in the top. 00:27:53.360 --> 00:27:56.800 There's a green check mark and it says UCSF news is installed. 00:27:58.240 --> 00:28:01.440 I just wanted to start showing you what some of these 00:28:01.440 --> 00:28:06.160 success messages look like. Let me move down to 00:28:06.160 --> 00:28:10.000 Profile. Definitely going to take this one 00:28:10.000 --> 00:28:14.240 all the way through as a demo. There is another data pull that's called Profiles 00:28:14.240 --> 00:28:18.720 integration. If I click on that one, I get a choice of 00:28:18.720 --> 00:28:22.240 what style do I want my Profile page to be. It can be 00:28:22.240 --> 00:28:26.080 in Grid style, which is kind of like yearbook style, 00:28:26.080 --> 00:28:30.000 you know columns and rows of people with their pictures. Or Expanded, 00:28:30.000 --> 00:28:33.040 also in my language, I call that row by row. 00:28:33.920 --> 00:28:37.200 I'm going to start with Grid and I'll show you how we can always come back and 00:28:37.200 --> 00:28:39.680 change that. I'm going to create a starting point for 00:28:39.680 --> 00:28:43.840 this one and 00:28:47.520 --> 00:28:50.240 when this is successful, I should get a success message, 00:28:55.920 --> 00:28:59.920 there we go, this success message is a little bit cryptic. It says LDAP server 00:28:59.920 --> 00:29:03.600 configured with a green check mark next to it. LDAP 00:29:04.160 --> 00:29:10.640 server is our directory service. Profiles pulls from the information 00:29:10.640 --> 00:29:15.920 from the directory, it pulls in information from profiles.ucsf.edu. 00:29:15.920 --> 00:29:18.720 If you're in the research area you're probably familiar with that. 00:29:19.440 --> 00:29:26.160 And it also pulls from CTSI again if you're heavily on the 00:29:26.160 --> 00:29:28.800 research side, you'd be you'd be familiar with that. 00:29:29.680 --> 00:29:33.040 And so this was a feature that a lot of people asked for, like 00:29:33.680 --> 00:29:37.040 hey you know Profiles is so robust with all this great information 00:29:37.680 --> 00:29:42.480 I hate to manually type this all again into my website or copy and paste, so 00:29:42.480 --> 00:29:47.520 we created this data pull and we, besides the success message that shows right 00:29:47.520 --> 00:29:49.760 here, if you take a look in my navigation I 00:29:49.760 --> 00:29:53.840 have a home and I also now have something for People. 00:29:54.880 --> 00:29:57.760 And we'll work through that. The last one is 00:29:58.480 --> 00:30:03.120 a publication starting point. If I click on this one 00:30:03.120 --> 00:30:09.040 this allows you to go find URLs of featured publications that you want 00:30:09.040 --> 00:30:13.120 to appear in a sidebar of one of your pages. 00:30:13.120 --> 00:30:16.800 You can only have the top three. I'm not going to demonstrate this one 00:30:16.800 --> 00:30:19.040 all the way through, but I wanted to let you know that one is there. 00:30:20.640 --> 00:30:25.680 So now we've gone through the Starting Points. I'm going to go back 00:30:25.680 --> 00:30:26.640 to my home page. 00:30:28.960 --> 00:30:35.200 And click on home page here. I think this might be a little bit of a 00:30:35.200 --> 00:30:39.200 different screen for - that you might not see. I go to, I'd Like 00:30:39.200 --> 00:30:44.880 to Create a Page and then hopefully, those of you that are 00:30:44.880 --> 00:30:50.000 following along that have a new site, are on your home page that looks like 00:30:50.000 --> 00:30:54.400 this. You can see I changed my name of my site 00:30:54.400 --> 00:30:55.840 Remember it was Site Builder now it's 00:30:55.840 --> 00:31:00.160 Training Test Site there that appears. This is also a link that serves as home 00:31:00.160 --> 00:31:03.520 for any of your pages, your users can click on this to get back 00:31:03.520 --> 00:31:08.880 to the home page. So I want to add a slide banner to the 00:31:08.880 --> 00:31:11.600 top of the page. So I need to click on that little 00:31:11.600 --> 00:31:16.800 triangle to expand the interface so I can see about 00:31:16.800 --> 00:31:20.480 adding images. First thing you want to add to the hero template 00:31:21.200 --> 00:31:25.120 is change this default from Secondary Page Banner to Home Page Slider 00:31:26.800 --> 00:31:29.440 because our task right now is to create 00:31:29.440 --> 00:31:35.120 that slider banner, aka hero, aka slide carousel on our Home page. 00:31:35.120 --> 00:31:38.400 So therefore we want to make sure that this says Home Page and 00:31:38.400 --> 00:31:43.040 first thing it says is choose a file. I'm going to stop here on this page 00:31:43.680 --> 00:31:47.600 and talk to you about the Brand Photo Library. 00:31:47.600 --> 00:31:54.560 I'm opening up another tab to MyAccess. I've already logged in. I'm looking for a 00:31:54.560 --> 00:32:00.240 Brand Photography Library. If you've never been here, let's see if 00:32:00.240 --> 00:32:03.760 you've never used it, it might not be showing on your list. You might have to 00:32:03.760 --> 00:32:06.880 go under Manage Favorites which will show you the 00:32:06.880 --> 00:32:10.800 complete list of everything, and you'll find Brand Photo 00:32:13.120 --> 00:32:16.160 Library, Brand Photography Library. There we go, 00:32:19.280 --> 00:32:25.440 and I have been to this page before, ah, actually maybe I have not on the home 00:32:25.440 --> 00:32:29.760 computer on this setup that I have, so this is good. Before we begin 00:32:30.400 --> 00:32:35.360 we have to accept cookies, so anything that has a red star next to it 00:32:35.360 --> 00:32:42.320 we want to click this to show that we are accepting the required cookies 00:32:42.320 --> 00:32:45.680 to continue on to the Brand Photo library. 00:32:52.320 --> 00:32:57.200 Great, all right, so I'm at the Welcome to UCSF's Brand Photo Library. 00:32:57.840 --> 00:33:02.640 At the very top there's the navigation and I want to click on assets 00:33:04.000 --> 00:33:10.480 and if anybody is struggling with permissions to get in here, usually it 00:33:10.480 --> 00:33:13.200 works for everybody but sometimes, if you're brand new 00:33:13.200 --> 00:33:15.680 or maybe there's some other odd, weird reason, 00:33:16.800 --> 00:33:21.760 you can always email Identity@ucsf.edu to get permissions for this. 00:33:22.400 --> 00:33:24.960 So I clicked on Assets at the top 00:33:24.960 --> 00:33:28.160 and I'm looking in the main area for the Brand Photo Library 00:33:29.040 --> 00:33:31.600 and I'm going to click on that 00:33:33.760 --> 00:33:37.120 and I'm going to pause for just one moment, 00:33:37.120 --> 00:33:39.520 because somebody wrote something in chat. 00:33:40.720 --> 00:33:43.920 And this is, when I look at this it's going to be available 00:33:43.920 --> 00:33:45.360 for everybody to see. So I 00:33:47.920 --> 00:33:51.280 oh "Who provides the content for UCSF news?" Good question. 00:33:51.280 --> 00:33:55.200 That's the, I don't have exact names but 00:33:55.920 --> 00:33:59.280 those are the people that write for that, so if you've got a connection to those 00:33:59.280 --> 00:34:04.320 people you could feed them story ideas to get them to publish stories about you 00:34:04.320 --> 00:34:07.600 then therefore you could pull in that data to appear on your 00:34:07.600 --> 00:34:09.920 News site. I want to just mention something about 00:34:09.920 --> 00:34:12.880 the chat. I'm probably not going to be checking it until 00:34:12.880 --> 00:34:15.680 the end just because of this recording 00:34:16.640 --> 00:34:19.840 so bear with me if I if I'm not paying attention to that. 00:34:20.560 --> 00:34:23.600 So here we are in the Brand Photo Library. We've got 00:34:23.600 --> 00:34:26.640 three folders: Emotion, Environment and Science 00:34:27.440 --> 00:34:30.400 and we're just going to pick one at random. We're going to make some quick 00:34:30.400 --> 00:34:34.640 decisions just so you can understand how this works. I'm, 00:34:36.000 --> 00:34:38.960 since I'm building something for my home  page and these images are going to be 00:34:39.520 --> 00:34:42.240 fill the whole screen and to look really nice on a very 00:34:42.880 --> 00:34:47.840 large screen, we want to pick images that are more wide than they are tall. 00:34:48.960 --> 00:34:53.840 And so I'm targeting this one. I want to take this image, so I'm going to double 00:34:53.840 --> 00:34:58.080 click on the file name, and it opens up a dialog box about this 00:34:58.080 --> 00:35:02.080 image in particular. First thing I want to do is my due 00:35:02.080 --> 00:35:05.440 diligence and make sure it's okay for me to use this image on my 00:35:05.440 --> 00:35:10.080 website. So there's a section called Usage Rights 00:35:10.080 --> 00:35:15.840 Usage Terms and it says "includes usage for UCSF websites 00:35:16.480 --> 00:35:20.960 and other things. So again if you're a marketing communications type person 00:35:20.960 --> 00:35:24.480 that's putting together a big campaign where you're going to be using all of 00:35:24.480 --> 00:35:28.640 these types of channels take a close look at this. 00:35:29.600 --> 00:35:33.840 For example, my intent today is just to use it on a website but if I were to use 00:35:33.840 --> 00:35:37.760 it um on paid ad placements I would see that I 00:35:37.760 --> 00:35:40.720 cannot use this. And usually in marketing you want 00:35:40.720 --> 00:35:46.080 everything to be consistent so just keep an eye on on the requirements. 00:35:47.360 --> 00:35:50.240 So I've done my due diligence, I'm going to use this for a website. 00:35:50.960 --> 00:35:54.960 There is in the top right a series of icons. The first one, 00:35:55.520 --> 00:35:59.520 if I hover over that, it shows this download and for those 00:35:59.520 --> 00:36:02.800 that are on a PC I've seen this happen a couple times where 00:36:03.440 --> 00:36:07.200 you can't see the download image. It's almost as if it's a white icon on a 00:36:07.200 --> 00:36:10.160 white background. But if you hover your mouse in the 00:36:10.160 --> 00:36:13.600 general area you should see at least a pop-up that will 00:36:13.600 --> 00:36:18.080 indicate that you're at the download area. So I'm going to download this image 00:36:20.320 --> 00:36:24.080 and I get another dialog box. Select your download options: 00:36:24.080 --> 00:36:27.840 the desired preset always defaults to Original which is a high-res 00:36:27.840 --> 00:36:31.840 image. It's too big to put on your website, so you'll want to choose one of 00:36:31.840 --> 00:36:35.280 the web-optimized options. We've got two of them here. 00:36:36.000 --> 00:36:38.560 For just remember the bigger the number 00:36:38.560 --> 00:36:41.840 the better the resolution will be for your 00:36:41.840 --> 00:36:44.080 on-screen experience. So since I want this to be 00:36:44.960 --> 00:36:48.400 on a wide screen like I said, and take up the majority of the real estate on the 00:36:48.400 --> 00:36:54.080 screen, I'm going to go for web-optimized 1320 pixels. 00:36:54.080 --> 00:36:57.440 And I'm going to scroll down to the bottom to the submit button. 00:36:58.640 --> 00:37:02.320 And there is Terms of Use. I promised the folks at Identity 00:37:02.320 --> 00:37:07.520 I would read this out at least once so you want to "Please read and click 00:37:07.520 --> 00:37:10.480 accept to proceed. When downloading photos you agree to 00:37:10.480 --> 00:37:14.880 One, represent the subjects in these photos accurately, please view caption 00:37:14.880 --> 00:37:18.400 information to ensure you are using the photo in the appropriate context. 00:37:18.400 --> 00:37:21.520 For example do not use a med student in a patient contact. 00:37:22.400 --> 00:37:26.480 Number two, refrain from using photos for commercial slash paid advertising 00:37:26.480 --> 00:37:30.640 without further licensing from the photographer. Violating the terms of 00:37:30.640 --> 00:37:35.280 use may result in liability. Number three, accept and comply with the terms and 00:37:35.280 --> 00:37:38.560 conditions for use, yet another URL you can go to, I'm 00:37:38.560 --> 00:37:41.920 not going to do that at this time, and number four, please contact 00:37:41.920 --> 00:37:46.000 identity@ucsf.edu if you have  any questions regarding usage." 00:37:46.000 --> 00:37:49.360 I've done that a lot because when I was new 00:37:49.360 --> 00:37:54.080 I was like, oh you know this is, it says I can use it for a website, can I 00:37:54.080 --> 00:37:57.280 use it for a PowerPoint presentation? So I did my due diligence 00:37:57.280 --> 00:38:03.840 and reached out to them and and asked that question. So we hit accept 00:38:04.960 --> 00:38:08.320 and you might see things flashing on your screen like a download is about to 00:38:08.320 --> 00:38:11.280 happen or it's waiting for downloads or you 00:38:11.280 --> 00:38:18.240 just, our download just happened and I'm on a Mac 00:38:18.240 --> 00:38:21.360 and I can see in my bottom left corner a jpeg has downloaded. 00:38:22.640 --> 00:38:26.160 So I'm going to consider that successful and I'm going to 00:38:26.800 --> 00:38:30.080 close out of this dialog box with the x in the top right corner. 00:38:30.880 --> 00:38:33.760 And I'm going to do this two more times and just do it a little bit faster. 00:38:34.400 --> 00:38:37.680 so I'm going to look for another image that 00:38:37.680 --> 00:38:41.360 is wider than it is tall double click on the name 00:38:42.880 --> 00:38:46.080 do my due diligence, look at rights usage terms. 00:38:46.640 --> 00:38:51.360 This one includes usage for UCSF websites which is my intent at this time. 00:38:51.360 --> 00:38:52.960 I'm going to find that download button. 00:38:55.120 --> 00:38:58.720 I'm going to change my desired preset to 00:38:58.720 --> 00:39:03.680 web optimize 1320 pixels. Just a note on the other size 00:39:03.680 --> 00:39:07.120 that would be appropriate, if you were going to use a picture on a website that 00:39:07.120 --> 00:39:09.280 had text surrounding it, using the lower 00:39:09.280 --> 00:39:13.840 number and hit submit and accept. 00:39:16.000 --> 00:39:22.400 And I waiting to see things download. That looks successful. I'm going to close 00:39:22.400 --> 00:39:23.600 out and I'll do one more 00:39:26.000 --> 00:39:30.720 I have found I've where I've picked images in the past 00:39:30.720 --> 00:39:35.360 that were actually bigger than the limit for the website 00:39:36.960 --> 00:39:44.720 so I think I'm gonna use this one double click on it look at the 00:39:44.720 --> 00:39:49.600 rights usage terms: includes usage for websites click 00:39:49.600 --> 00:39:54.560 download in the top right, change my desired preset to 00:39:54.560 --> 00:39:58.160 web optimized 1320. Hit submit and accept. 00:40:01.520 --> 00:40:04.400 And we'll pause here for a minute while that download happens. 00:40:09.680 --> 00:40:15.440 Great. Okay, so now I'm gonna head back to my template and I'm gonna 00:40:15.440 --> 00:40:19.760 start adding these images into the home page. So I here I am on my 00:40:19.760 --> 00:40:23.520 home page, I have hero template home page slider 00:40:23.520 --> 00:40:26.240 selected and now I'm going to click on the Choose File 00:40:26.240 --> 00:40:32.480 under the word Image. All of my images should have come to my 00:40:32.480 --> 00:40:37.680 download folder. I have mine set to view these in a 00:40:37.680 --> 00:40:40.000 list where I can see the date modified so I 00:40:40.000 --> 00:40:42.720 can be sure I've I've picked something from today. 00:40:43.920 --> 00:40:49.760 And I'm going to choose the first one and after I've chosen it I should get 00:40:50.320 --> 00:40:53.680 a truncated version of the file name showing here. 00:40:53.680 --> 00:40:54.880 Then I click on upload. 00:40:59.280 --> 00:41:02.720 And if that's successful. I get a little thumbnail preview. 00:41:02.720 --> 00:41:07.040 And there's a little crosshair on this preview. The crosshair 00:41:07.040 --> 00:41:11.520 represents the focal point of the image and also where it might be cropped. So 00:41:11.520 --> 00:41:15.360 if I were to look at this image on a phone with a much smaller screen, 00:41:16.240 --> 00:41:19.280 I want to make sure certain areas aren't cropped out. 00:41:19.280 --> 00:41:25.360 So the focus of this image for me is kind of the space between the two 00:41:25.360 --> 00:41:28.240 the two faces. So I'm going to move that there. 00:41:29.360 --> 00:41:33.440 And I'm going to skip the rest of what goes in here and I'm going to go 00:41:33.440 --> 00:41:35.200 straight to the Add a New Slide. 00:41:37.440 --> 00:41:40.640 And the interface opens up and provides me the same 00:41:40.640 --> 00:41:47.840 type of deal here. I click on choose file get my next image. 00:41:48.880 --> 00:41:51.840 I can see the image name is there now. I click on upload. 00:41:54.000 --> 00:41:57.440 I can move my focal point a little more between their faces. 00:41:58.480 --> 00:42:02.320 And this time I want to show you what adding a title looks like. 00:42:03.040 --> 00:42:05.040 I'm just going to put in this is adding a title, 00:42:09.200 --> 00:42:15.840 and it will, let's see, and the text, 00:42:16.720 --> 00:42:24.240 the text is white by default. Just a little tip there, and I'm going to 00:42:24.240 --> 00:42:30.160 click add a new slide and go through the same steps again, picking 00:42:30.160 --> 00:42:33.440 a third image, uploading it. 00:42:36.640 --> 00:42:40.160 I'm going to put the focal point on the instructor's face. 00:42:41.760 --> 00:42:47.920 A tip about faces, try and aim for like the nose, and the eyes area. If this was a 00:42:47.920 --> 00:42:50.160 picture, like a portrait picture of somebody 00:42:51.120 --> 00:42:54.400 that's really important, to try and get it like right on the nose or by the eyes. 00:42:54.960 --> 00:42:58.000 If it's if it's on the chin that's the focal area 00:42:58.000 --> 00:43:02.800 and so you looked at it on a phone the forehead might be cropped off, 00:43:02.800 --> 00:43:07.600 So kind of keep those things in mind. Here I'm just going to add another title. 00:43:08.160 --> 00:43:11.440 I'm going to show you what link text looks like. I'm going to make a link to 00:43:11.440 --> 00:43:12.400 UCSF home 00:43:15.360 --> 00:43:18.080 and I'm going to put in the URL for UCSF home 00:43:20.320 --> 00:43:21.440 and I've added 00:43:23.600 --> 00:43:28.160 three slides now. Yeah, three images I'm gonna 00:43:28.160 --> 00:43:33.440 scroll all the way down looking for the save button here in the 00:43:33.440 --> 00:43:33.940 bottom. 00:43:35.920 --> 00:43:42.400 And hit save and this is what a an error message looks like. It's 00:43:42.400 --> 00:43:45.280 usually read with a exclamation point inside of a red 00:43:45.280 --> 00:43:50.640 triangle. "Title field is required.: Here is the title field, so I'm going to 00:43:50.640 --> 00:43:55.840 put in the word "home" although I don't like to have a title on 00:43:55.840 --> 00:43:59.360 my home page. So I can bypass the system by clicking 00:43:59.360 --> 00:44:02.960 the next check box which says "Hide the title on the page." 00:44:03.680 --> 00:44:07.680 Which I'm going to do. And scroll down and hit save. And then 00:44:07.680 --> 00:44:11.680 fingers crossed everything works, and my homepage has been created! I get 00:44:11.680 --> 00:44:15.920 the success message, I see my image, I see my forward and next 00:44:15.920 --> 00:44:20.000 buttons. I did not put a a time limit on that so 00:44:20.000 --> 00:44:24.000 I can control my experience and hit the previous button on the left or the next 00:44:24.000 --> 00:44:28.400 button on the right. I wanted to show you what the title 00:44:28.400 --> 00:44:32.240 looks like.This is not good accessibility because 00:44:32.240 --> 00:44:35.040 it's white text against some white background and so the 00:44:35.040 --> 00:44:39.840 color contrast rati is not that great so I 00:44:40.480 --> 00:44:44.080 from an accessibility point of view, I would say try to 00:44:44.800 --> 00:44:48.160 if you're going to use these images, kind of think of them as eye candy 00:44:48.720 --> 00:44:55.920 more than than important information. I like to leave 00:44:56.640 --> 00:45:00.720 titles off of mine and put any important information in the 00:45:00.720 --> 00:45:04.320 in the content area which would be below the slide. 00:45:04.320 --> 00:45:07.840 The slide carousel let me go to my third one. 00:45:08.720 --> 00:45:13.040 This is what it looks like if you have a link. Let's test the link and see if it works. 00:45:13.040 --> 00:45:17.840 Yep, perfect. 00:45:18.560 --> 00:45:24.240 And I think I need to, I think I need to log back into my site 00:45:28.240 --> 00:45:34.720 so so you can see how links work it will open it 00:45:35.440 --> 00:45:38.400 on top of it, it will open whatever this link is 00:45:39.760 --> 00:45:43.600 within that same window and you might want to link 00:45:43.600 --> 00:45:47.520 maybe to maybe your mission statement or you know something within your site or 00:45:47.520 --> 00:45:51.920 maybe you want to link outside of your your site too, but that's how that would 00:45:51.920 --> 00:45:52.420 work. 00:45:55.680 --> 00:45:56.180 And 00:45:58.960 --> 00:46:02.720 one thing about images that I wanted to mention. Let me just go back 00:46:02.720 --> 00:46:06.880 in to edit mode. There's whenever you're in edit mode 00:46:07.600 --> 00:46:14.240 or when you're logged in as an admin, you can see the the Yeti icon that's 00:46:14.240 --> 00:46:17.760 this little Bigfoot character here. 00:46:19.120 --> 00:46:23.280 And you should be able to see a view in an edit so if I go into edit mode 00:46:25.760 --> 00:46:28.800 and you're like, oh hey, where's, how would I 00:46:28.800 --> 00:46:33.760 swap out an image? I have to remember to click the little triangle next to the 00:46:33.760 --> 00:46:38.160 slider banner and the first time I saw this I was like 00:46:38.160 --> 00:46:42.000 what? Turns out you have to click on the the 00:46:42.000 --> 00:46:44.000 pencils that represent each image 00:46:46.800 --> 00:46:50.960 and then it'll look more familiar to what you had just put in. 00:46:50.960 --> 00:46:53.840 So if you wanted to delete one, there's a little trash can here. 00:46:54.720 --> 00:47:01.040 If you want to add a new image use the add a new slide, let me just show 00:47:01.040 --> 00:47:03.040 you how that brings up the interface where 00:47:03.040 --> 00:47:06.480 you can go pick another image, So we picked some, we made some quick 00:47:06.480 --> 00:47:09.920 decisions on what images we want, if you want to go back and take some 00:47:09.920 --> 00:47:13.920 more time find better images, know how you can come in here delete 00:47:13.920 --> 00:47:17.040 what you don't want and go through the process of adding new 00:47:17.040 --> 00:47:22.400 ones. So that's how adding the slide banner works on your 00:47:22.400 --> 00:47:26.080 home page. One other thing about images: 00:47:26.640 --> 00:47:30.800 some Content Management Systems allow you to drop and drag 00:47:30.800 --> 00:47:33.280 images. Say you might have Finder or 00:47:35.600 --> 00:47:38.640 some kind of File Explorer window open and you want to 00:47:38.640 --> 00:47:42.080 drag it over. It looks like it can be done. 00:47:42.080 --> 00:47:44.480 And it will seem like it's a success but it's 00:47:45.120 --> 00:47:49.120 it's um it's not a good idea to do that with this kind of template 00:47:49.760 --> 00:47:54.160 it's going to pull in a whole lot of extra information that makes your web 00:47:54.160 --> 00:47:58.560 page load really slow. So if you were 00:47:59.600 --> 00:48:03.440 if you're experiencing like really slowness of your image and you put in a 00:48:03.440 --> 00:48:06.640 ticket, the first thing they're going to ask you is, probably, did you just 00:48:06.640 --> 00:48:12.080 add some images? And and if you say yes, they might say did 00:48:12.080 --> 00:48:15.120 you drag and drop them in? And if you say yes, they'll say that's 00:48:15.120 --> 00:48:17.680 not the proper way to do it let me show you how to delete them and 00:48:18.320 --> 00:48:21.520 and the proper way to add them, which we just went through. 00:48:22.560 --> 00:48:25.360 and another thing about adding images, let me just 00:48:26.480 --> 00:48:28.240 show you some comic relief here. A 00:48:32.640 --> 00:48:38.320 when you add images, sometimes they don't appear right away and 00:48:39.040 --> 00:48:41.440 so we tell you to Keep Calm and Clear your Cache. 00:48:42.800 --> 00:48:47.840 It's a real thing. Let me go back and show you how to clear your cache. 00:48:48.640 --> 00:48:55.120 Under the Yeti icon there is an option for flush all caches and you 00:48:55.120 --> 00:48:58.000 can just click that. Just because there's fly-outs on 00:48:58.000 --> 00:49:03.440 these doesn't mean you actually have to always necessarily drill down to them. So 00:49:03.440 --> 00:49:06.160 i would just click here to flush all caches if I 00:49:06.160 --> 00:49:10.240 knew I had put up an image and it wasn't appearing. Or if I had edited some 00:49:10.880 --> 00:49:16.400 some text and it wasn't reloading, I would go into the Yeti and 00:49:16.400 --> 00:49:17.600 hit flush all caches. 00:49:20.400 --> 00:49:27.280 So now we've got a home page. Let me just go back to home and 00:49:27.280 --> 00:49:30.960 we're going to start creating what we call stubs of pages. If you've got a 00:49:30.960 --> 00:49:34.720 content strategy, you probably have an idea of some of the 00:49:34.720 --> 00:49:37.520 pages that you want to add, like, oh, I want to add a Mission 00:49:37.520 --> 00:49:42.400 page I want to add a page About Us. We're going to be adding pages and we're 00:49:42.400 --> 00:49:47.280 going to I'm going gonna be calling the titles according to the feature 00:49:47.280 --> 00:49:50.960 that I wanna show you. So I'm gonna create some that are 00:49:50.960 --> 00:49:54.000 called like Video or Columns because that's the features 00:49:54.000 --> 00:49:59.760 we're gonna we're gonna demo. Some because of the starting points 00:49:59.760 --> 00:50:06.080 and the way they name pages, there's some particular file, particular names of 00:50:06.080 --> 00:50:09.440 pages that you want to avoid. Like don't create another home page. 00:50:11.200 --> 00:50:14.640 Don't create another People page because the system 00:50:14.640 --> 00:50:18.080 already creates those types of pages. Some other reserved names 00:50:18.080 --> 00:50:19.440 are Events 00:50:22.000 --> 00:50:25.840 and publications so try to avoid using those. 00:50:26.400 --> 00:50:30.880 You in theory, you can, but it it just gets a little bit messy 00:50:31.600 --> 00:50:35.120 so especially if you create another home page, 00:50:35.680 --> 00:50:39.360 it's all in this Content Management System it's usually always better 00:50:39.360 --> 00:50:43.040 to go in and edit a page or unpublish a page, 00:50:43.040 --> 00:50:48.720 or somehow turn it off instead of deleting, so that's a big red flag if 00:50:48.720 --> 00:50:52.640 there's something that says delete, really really think twice about 00:50:52.640 --> 00:50:54.960 doing that. There's only one exception and I'll tell 00:50:54.960 --> 00:50:59.600 you about that later. But always always kind of stop and think 00:51:00.480 --> 00:51:04.640 yeah, I probably don't want to delete that, oh and also while we're here 00:51:04.640 --> 00:51:08.640 talking about going back in to make edits to your 00:51:08.640 --> 00:51:12.720 homepage, which we did. If you wanted to make changes to like 00:51:12.720 --> 00:51:16.160 the color theme or any other thing that we picked out 00:51:16.160 --> 00:51:22.240 during the Site Builder Wizard, it's up here under the word Appearance, you have  00:51:22.240 --> 00:51:23.440 a choice you can go through the Site 00:51:23.440 --> 00:51:28.000 Builder Wizard again or you could just go to Settings UCSF 00:51:28.000 --> 00:51:31.440 Site Builder and you can see everything that we 00:51:31.440 --> 00:51:34.720 looked at was, is available here on the left. So if you want to just target, 00:51:35.360 --> 00:51:38.560 oh I just want to change the color theme, and change this blue to orange, 00:51:39.440 --> 00:51:43.360 and remember to hit Save Configuration. So that's a 00:51:43.360 --> 00:51:50.080 another way you can get back so back to creating content. 00:51:50.080 --> 00:51:53.920 This is how you add a page. You go to Content > I'd like to Create a 00:51:54.640 --> 00:51:55.200 Page. 00:51:57.680 --> 00:52:02.320 And I'm gonna create stubs of pages so first, I'm just gonna 00:52:02.320 --> 00:52:05.440 enter some titles without putting any content in there. 00:52:05.440 --> 00:52:08.320 So we're going to be talking about videos so I'm going to create a Videos 00:52:08.320 --> 00:52:10.720 page. I'm going to scroll on by the content 00:52:10.720 --> 00:52:14.240 area for now and before I hit the Save button I'm 00:52:14.240 --> 00:52:17.840 going to check this box here that says Provide a Menu Link. 00:52:19.040 --> 00:52:22.640 I'm going to skip over the rest of this and just go to Save. 00:52:23.440 --> 00:52:28.240 And by checking that box Provide a Menu Link, you can see I now have a menu item 00:52:28.960 --> 00:52:32.000 up here with Home and People. I have Videos as well. 00:52:32.000 --> 00:52:36.000 So let's create a couple more. Content > I'd like to Create a Page. 00:52:37.360 --> 00:52:40.480 Another item we'll be playing with is called 00:52:40.480 --> 00:52:45.200 Columns. I'm going to scroll on down click Provide a Menu Link, hit 00:52:45.200 --> 00:52:50.880 save. There's Columns. I'm going to add another one. Go to 00:52:50.880 --> 00:52:55.680 Content oops, I'm sorry Content > I'd Like to Create a 00:52:55.680 --> 00:52:56.180 Page. 00:52:58.320 --> 00:53:00.560 and I'm going to call this one Practice. 00:53:02.720 --> 00:53:07.120 Scroll on down, hit Provide a Menu Link and before I hit Save this time, I want 00:53:07.120 --> 00:53:10.320 to show you the secret about publishing 00:53:10.320 --> 00:53:14.480 options. Here in the bottom right. right above the 00:53:14.480 --> 00:53:19.680 Save button is Publishing Options and you can see that everything is 00:53:19.680 --> 00:53:25.200 checked as Published by default. At the end of this class, at the end of 00:53:25.200 --> 00:53:29.280 the session, since we're making really quick choices 00:53:29.280 --> 00:53:32.240 and and not putting proper content in yet at this 00:53:32.240 --> 00:53:35.440 time, you probably want to unpublish all of your pages 00:53:35.440 --> 00:53:39.840 at the end of this session. When you unpublish them, the public won't see them, 00:53:40.480 --> 00:53:44.640 they'll be removed from your menu and only people that log in and can see this 00:53:44.640 --> 00:53:49.520 menu will have access to see unpublished pages. I'm going to keep this 00:53:49.520 --> 00:53:52.160 one published so we can continue to work. 00:53:53.600 --> 00:53:59.760 And now I've got some things put together here, I've got 00:53:59.760 --> 00:54:03.840 start of a navigation. I've got some pages they're all empty 00:54:03.840 --> 00:54:06.480 right now. so let's put some content into those. 00:54:08.080 --> 00:54:15.440 Let's go to the Columns page. I click on the link. I'm there. 00:54:15.440 --> 00:54:18.080 I see the title, nothing no content so I'm going to go 00:54:18.080 --> 00:54:23.840 into the edit mode by clicking the Edit tag over on the far left. 00:54:24.560 --> 00:54:27.920 And we're going to explore this content area. 00:54:27.920 --> 00:54:32.080 There is a list of different tools that you can use when 00:54:32.080 --> 00:54:35.280 when you're in the content area. And I'll quickly walk you through what those are. 00:54:36.000 --> 00:54:40.800 This is the Source button if you're familiar with working with HTML 00:54:40.800 --> 00:54:44.720 this is how you can turn on the source. I don't have any content now so it's 00:54:45.360 --> 00:54:50.800 not going to show anything at this point. But you toggle off and on for source 00:54:51.760 --> 00:54:55.120 format. This is where you can mark things up. 00:54:55.760 --> 00:54:58.960 Then you put text in it's going to come in as normal but if you want to mark 00:54:58.960 --> 00:55:02.000 things up, as headings, this is how you can add structure to 00:55:02.000 --> 00:55:05.760 your page. This is really important for accessibility, to add proper structure to 00:55:05.760 --> 00:55:09.680 your page. Instead of just making something 00:55:09.680 --> 00:55:13.120 bold and a bigger font, use these headings 00:55:14.160 --> 00:55:16.640 so somebody that uses assistive technology there, 00:55:17.680 --> 00:55:21.520 like a screen reader a blind person will use a screen reader as their assistive 00:55:21.520 --> 00:55:24.800 technology they might instead of letting the screen 00:55:24.800 --> 00:55:28.080 reader read every darn thing on the page they might 00:55:28.080 --> 00:55:32.160 say, use a keyboard shortcut to tell their 00:55:32.160 --> 00:55:34.880 screen reader "give me a list of all of the headings" 00:55:34.880 --> 00:55:38.640 and the headings will be read out loud to them. So it's a much quicker way 00:55:38.640 --> 00:55:42.240 for them. It's the equivalent of us scanning a page 00:55:42.240 --> 00:55:46.320 visually and looking for those those big headings and things that stand out this 00:55:46.320 --> 00:55:50.400 is a way to structure a page for a blind user to 00:55:51.040 --> 00:55:54.800 get a list of different headings. The next group 00:55:54.800 --> 00:55:58.320 are things that are pretty familiar from Word like bold, italic, 00:55:58.320 --> 00:56:04.160 underline, strikethrough, typically used a lot in blogs and this 00:56:04.160 --> 00:56:06.880 last one though, might not be familiar to you this is to 00:56:06.880 --> 00:56:11.600 remove format. So if you're copying and pasting something in from 00:56:11.600 --> 00:56:14.240 like a Word document and you want to strip out all the formatting 00:56:15.040 --> 00:56:18.560 once you've put it in in the content, you can select it all 00:56:18.560 --> 00:56:21.600 and click this button to remove the formatting. 00:56:23.280 --> 00:56:26.480 As we move on we've got the alignments for left, center and right. 00:56:27.520 --> 00:56:34.240 We have numbering and bullet lists, indentations, and then this 00:56:34.240 --> 00:56:37.120 last piece is what we call the WYSIWYG toolbar. 00:56:37.840 --> 00:56:40.480 WYSIWYG is the acronym for What You See Is What You Get. 00:56:41.200 --> 00:56:45.760 And it starts off with a way to add a link, 00:56:45.760 --> 00:56:49.120 a way to remove a link, how to add anchors, 00:56:49.840 --> 00:56:57.360 images, videos, pasting from Word, inserting 00:56:57.360 --> 00:57:03.040 a horizontal line, inserting special characters, let me click on that one. 00:57:03.040 --> 00:57:07.520 You get a character map of different characters that you might want to use, 00:57:08.800 --> 00:57:11.840 that may or may not be available on your keyboard. 00:57:12.560 --> 00:57:16.400 Cancel out of that. And the last one, the little 00:57:16.400 --> 00:57:20.960 gear, the little widget, this is where all the cool stuff is. 00:57:20.960 --> 00:57:27.040 Under here is where you can add things like a quote and it will stylize it for you, 00:57:27.040 --> 00:57:29.520 can add columns, that's what I want to show you next, 00:57:30.320 --> 00:57:34.400 featured content, and collapse items. So we'll we'll work through some of those. 00:57:35.120 --> 00:57:38.800 Let's instead of doing just two columns, let's do three columns. 00:57:38.800 --> 00:57:42.480 So I click on that and I get a dialog box for how I want to add 00:57:42.480 --> 00:57:45.440 my three columns. The first part is the layout, this is the 00:57:45.440 --> 00:57:48.000 percentage of the width of the three columns on your page. 00:57:48.880 --> 00:57:51.680 If you want them to be equal widths, you can choose 00:57:52.240 --> 00:57:54.560 the choice where the numbers are the same. 00:57:55.440 --> 00:57:59.600 That's what I'm going to demonstrate and I highly suggest you play around with 00:57:59.600 --> 00:58:01.920 the background color. They all default to transparent 00:58:02.560 --> 00:58:06.160 but you can pick some colors from the color palette. They should all work well 00:58:06.160 --> 00:58:10.400 together. And hit ok and it gives you three 00:58:10.400 --> 00:58:15.680 columns and it's filled with some placeholder text you can 00:58:16.480 --> 00:58:22.640 you can delete and type over. So let's let's work with adding 00:58:23.360 --> 00:58:27.520 an email link I'll just put in some text that says Email 00:58:27.520 --> 00:58:36.160 Is and highlight that, and we'll go to the link icon, 00:58:36.160 --> 00:58:39.040 click on that and decide what kind of link we want. 00:58:39.840 --> 00:58:46.080 I want this link to be an email link. I get a couple different options so 00:58:46.080 --> 00:58:50.960 where is this email going to go to, you want to put in a legitimate 00:58:50.960 --> 00:58:51.460 email address. 00:58:54.400 --> 00:58:57.760 These are optional if you want to put in a message 00:58:57.760 --> 00:58:59.840 subject line for your user. 00:59:02.560 --> 00:59:06.400 Keep in mind they can always change that but I'll just demonstrate that 00:59:06.960 --> 00:59:14.080 this is a subject line. You could put in some starter text for 00:59:14.080 --> 00:59:18.160 them if you wanted to. I'm going to leave this one blank. The 00:59:18.160 --> 00:59:21.520 cool thing is this choice right here under button 00:59:21.520 --> 00:59:24.960 link style, it defaults to none and here's a list 00:59:25.680 --> 00:59:29.200 and it's not very descriptive. So I highly encourage you 00:59:29.200 --> 00:59:32.000 after this session go in and play with links and 00:59:32.640 --> 00:59:39.040 see how how these all look. So I'm gonna pick large white 00:59:39.040 --> 00:59:45.840 full width. So in your mind you might be thinking of what this might look like 00:59:46.480 --> 00:59:50.320 "large white full width". I'm going to choose that and I'm going to click on ok. 00:59:52.240 --> 00:59:57.760 And you can see large means all caps. I type this in in 00:59:58.480 --> 01:00:02.400 mixed case and it put them all to uppercase. That's what it meant by 01:00:02.400 --> 01:00:07.840 large and it also bumped up the font size a little bit than what their 01:00:07.840 --> 01:00:11.200 default was. I compare it with the second column it's 01:00:11.200 --> 01:00:16.640 white text and it is the full width of the container that it's in with a 01:00:16.640 --> 01:00:24.480 little bit of a little bit of space on either side of it if I go to 01:00:24.480 --> 01:00:28.640 the second column. Let's practice putting an image in. 01:00:29.200 --> 01:00:31.760 I'm going to wipe out the text that is there. 01:00:32.480 --> 01:00:37.360 Make sure my cursor is blinking in there. I'm going to go to the image icon 01:00:37.360 --> 01:00:42.160 in the WYSIWYG toolbar and the first time I saw this it was very 01:00:42.160 --> 01:00:45.280 confusing. I'm like IRL for my image? What does that mean? 01:00:45.280 --> 01:00:49.520 So it means just kind of follow along. Click the next button. 01:00:49.520 --> 01:00:50.160 browse the server. 01:00:53.040 --> 01:00:57.920 If you have a blank website, you're not going to have any images 01:00:57.920 --> 01:01:02.480 in here. If you have already have content and images on your site. you're going to 01:01:02.480 --> 01:01:05.920 see this, so for those of you that don't have any 01:01:05.920 --> 01:01:08.640 images yet. let me walk you through this interface. 01:01:09.520 --> 01:01:13.440 First, you click on Upload and then Choose File 01:01:14.320 --> 01:01:18.640 and this is going to open up your file browser in your on your computer. 01:01:19.840 --> 01:01:26.480 And you want to make sure you pick a jpeg and open. 01:01:28.160 --> 01:01:29.840 And then you will click the Upload button 01:01:34.320 --> 01:01:38.000 and it'll give you a a preview of what that image looks 01:01:38.000 --> 01:01:42.960 like. And it will also highlight it in your list of images. 01:01:44.720 --> 01:01:48.560 I'm going to do a quick switcharoo because this image is quite 01:01:48.560 --> 01:01:52.240 quite large for putting it inside of a little column. 01:01:52.240 --> 01:01:57.360 I have I happen to have a file here, and then you click on Upload 01:02:00.320 --> 01:02:07.920 and then you click on Insert File and if if it's found an image 01:02:07.920 --> 01:02:12.960 you should have a URL, some text in there don't worry about what it says. 01:02:13.920 --> 01:02:16.640 Alternative text, this is very important for accessibility. 01:02:17.680 --> 01:02:21.680 Again a screen reader user is not going to be able to see your image so if 01:02:21.680 --> 01:02:25.440 there's something important about that image 01:02:25.440 --> 01:02:27.040 you want to describe what that is. 01:02:30.640 --> 01:02:34.080 And it will tell you the height and width 01:02:34.080 --> 01:02:35.040 you you could 01:02:38.560 --> 01:02:41.680 you could reset the size. I highly recommend not 01:02:41.680 --> 01:02:45.360 messing with image sizing here in this program. It's better to 01:02:46.560 --> 01:02:50.480 open a photo or an image editing software like Photoshop or 01:02:50.480 --> 01:02:53.520 Preview or something like that if you need to really adjust your height and 01:02:53.520 --> 01:02:56.400 width. You have choices for alignment, you have 01:02:56.400 --> 01:03:00.800 choices to caption and image caption, and image I'm just going to go with 01:03:00.800 --> 01:03:05.840 alternative text and hit on OK and there I have an image inside 01:03:05.840 --> 01:03:08.800 of a column. Let's 01:03:11.200 --> 01:03:19.520 scroll down. I'm going to hit save and view what I've got here. So I've got 01:03:19.520 --> 01:03:22.880 an email link. Let's see how that works. I'm going to click on that 01:03:24.000 --> 01:03:29.840 and in theory it should open up an email client on my computer. 01:03:31.280 --> 01:03:37.920 There we go with the with the the name that you the email address 01:03:37.920 --> 01:03:41.920 that you put in there is in is put there in the "To". There's 01:03:41.920 --> 01:03:45.920 that subject line that I pre-populated and I chose not to 01:03:45.920 --> 01:03:49.600 put anything in the subject to let the let the user 01:03:49.600 --> 01:03:53.120 add whatever they want. So there you go, that's how an email link 01:03:53.120 --> 01:04:06.240 works and there's my picture. I want to show you a site it's 01:04:09.840 --> 01:04:11.840 I think I have it open, yeah the Tobacco 01:04:14.160 --> 01:04:21.120 Control Research and Education site. They have used the two columns 01:04:21.120 --> 01:04:27.120 here on their page and they've put in an image, they've put in text, they've put in 01:04:27.120 --> 01:04:30.800 links over here, another image, more text, more 01:04:30.800 --> 01:04:33.040 links. Just wanted to show you how that could 01:04:33.040 --> 01:04:38.800 be incorporated in the whole the whole website on a web page. 01:04:38.800 --> 01:04:42.160 They used a different slider at the top, they use the one with image on the left 01:04:42.160 --> 01:04:45.520 and the text on the right and therefore the 01:04:45.520 --> 01:04:47.920 Previous and Next buttons move over here with the text. 01:04:48.480 --> 01:04:54.720 They put a link in here in their in their slide carousel. 01:04:56.320 --> 01:04:59.600 So back to our pages. back to our template 01:05:00.400 --> 01:05:04.080 let's let me show you what responsive design is. 01:05:04.080 --> 01:05:07.760 So that's how is the page going to look when it 01:05:07.760 --> 01:05:14.720 shrinks down to fit onto an iPhone or any kind of phone device. I'm gonna just 01:05:16.240 --> 01:05:20.080 pseudo demonstrate that by changing the size of my browser window 01:05:20.880 --> 01:05:26.400 and showing you what the columns do, keep an eye on the column on the right 01:05:26.400 --> 01:05:30.800 with the text in it as it starts to shrink you'll see the 01:05:30.800 --> 01:05:34.160 text will wrap around, to remain in that 01:05:34.160 --> 01:05:37.360 column. And then there's going to be a point 01:05:37.360 --> 01:05:41.760 where the columns end up stacking on top of each other 01:05:43.040 --> 01:05:44.400 to fit on a phone. 01:05:46.880 --> 01:05:50.240 So perhaps you might have seen some websites 01:05:50.240 --> 01:05:54.880 where on your phone maybe the the text looks like it's hanging off on the right- 01:05:54.880 --> 01:05:58.320 hand side, that means they did not have good 01:05:58.320 --> 01:06:02.000 responsive design. So, we have that built into our template. 01:06:02.000 --> 01:06:05.040 Another reason to use our template and 01:06:07.760 --> 01:06:12.800 let me go back into edit mode because now that I have content here I 01:06:12.800 --> 01:06:16.320 can show you a little bit more about that first button that shows the 01:06:16.320 --> 01:06:19.840 source code. If I click on source code, there we go, we're in the 01:06:19.840 --> 01:06:24.560 HTML source where we can see how things are marked 01:06:24.560 --> 01:06:28.320 up to create our our columns. 01:06:29.520 --> 01:06:32.640 You can see there's where I created my email link 01:06:35.760 --> 01:06:41.520 with the text "Email Us", it's nested in an anchor tag with my email address 01:06:41.520 --> 01:06:44.320 nested inside of paragraph tags, nested inside of a div 01:06:45.120 --> 01:06:48.720 for the first column. There's a second column, third column, 01:06:48.720 --> 01:06:51.120 they're all nested inside of another div tag. 01:06:52.160 --> 01:06:55.680 So sometimes we need to go into the source code 01:06:55.680 --> 01:07:02.240 for some trouble-shooting but there you go, we've got a good page 01:07:02.240 --> 01:07:04.560 going here. I want to 01:07:07.120 --> 01:07:11.680 also mention sometimes when folks are adding images, if you get an 01:07:11.680 --> 01:07:16.240 Access Denied message, let me show you how to resolve that. 01:07:16.240 --> 01:07:22.960 I'm going back to my websites.ucsf.edu page and I'm going to Help 01:07:23.520 --> 01:07:29.120 and Frequently Asked Questions. Here's my favorite keyboard shortcut 01:07:29.120 --> 01:07:31.280 when I'm looking on a web page, I do Control F 01:07:31.280 --> 01:07:36.080 on a Mac and I'll look for a keyword about "access denied". 01:07:37.840 --> 01:07:42.000 Oh, there we go, this is what I was talking about. 01:07:42.000 --> 01:07:45.840 I get access denied when accessing the browser server to retrieve images." If you 01:07:45.840 --> 01:07:49.520 click on that there's a way that you can 01:07:52.000 --> 01:07:55.280 you can resolve that. So I just wanted to point out we'll we'll 01:07:55.280 --> 01:07:59.200 look at more more of the Help page and more of the FAQs later, but 01:07:59.760 --> 01:08:02.480 just wanted to mention that that is available there. 01:08:03.600 --> 01:08:07.680 And I want to show you I'm going to create another page. 01:08:07.680 --> 01:08:09.840 So I'm going to go to Content > I'd like to Create a Page 01:08:12.320 --> 01:08:15.440 and in the Content area here we're going to play with 01:08:16.240 --> 01:08:23.840 collapsing items. You might have seen that under here, under the widget 01:08:26.160 --> 01:08:27.680 hmm let me just 01:08:32.160 --> 01:08:35.120 oh I know I need to actually 01:08:37.280 --> 01:08:40.480 I'm creating a page first before I get into the content part 01:08:40.480 --> 01:08:46.240 so I'm going to call this one Collapsing Items 01:08:48.320 --> 01:08:55.040 and I'll scroll all the way down to provide a menu link hit save 01:08:56.800 --> 01:08:58.560 all right I'm going to come back in and edit, 01:09:01.120 --> 01:09:04.960 get rid of that stuff okay now my widgets available. 01:09:05.680 --> 01:09:09.120 And we're going to explore what collapse items are. 01:09:09.680 --> 01:09:13.200 These are sometimes also called accordions. It will 01:09:13.200 --> 01:09:17.840 give you an area where you can type in text. 01:09:17.840 --> 01:09:20.720 So a lot of people will use these for FAQs. 01:09:21.440 --> 01:09:23.680 so you can type in a question 01:09:25.840 --> 01:09:29.200 I'm going to type, I can't always talk when I type , so here what's the best 01:09:29.200 --> 01:09:34.080 practice for number of 01:09:35.280 --> 01:09:36.000 menu items 01:09:38.400 --> 01:09:41.760 and then over here on the right, if it's not expanded, I click on that 01:09:42.400 --> 01:09:47.840 to enter the content for the answer which is five to seven items 01:09:50.800 --> 01:09:55.520 and I'm going to scroll down and before I hit save I want you to notice 01:09:55.520 --> 01:10:01.600 that I'm leaving mine expanded versus collapsed. However you 01:10:01.600 --> 01:10:03.280 save it is how it's going to appear. 01:10:05.360 --> 01:10:10.960 If I want to go back in and make that always show up as collapsed I need to 01:10:10.960 --> 01:10:15.120 manually come in here, collapse it. Let me hit save 01:10:15.120 --> 01:10:17.200 again and we'll take a look at what that looks 01:10:17.200 --> 01:10:21.920 like. Now it's up to the user to expand that to see the information. 01:10:23.280 --> 01:10:27.920 That best practice for a number of menu items that's for up here, if you 01:10:27.920 --> 01:10:31.280 start to get more than that, later on I'm going to show you how we 01:10:31.280 --> 01:10:37.440 can tuck items under each other so you can have a cleaner look up there and 01:10:37.440 --> 01:10:40.800 another this, is this, comes from usability studies, and another 01:10:41.520 --> 01:10:43.840 thing that comes from usability studies is 01:10:45.120 --> 01:10:49.440 when if you use too many FAQs and you have them all 01:10:49.440 --> 01:10:55.760 collapsed, if your user tries that Control F keyboard 01:10:55.760 --> 01:10:59.040 finding shortcut, if I were to look for the 01:10:59.600 --> 01:11:02.720 number seven it's not going to find it because 01:11:02.720 --> 01:11:04.400 this information's collapsed. 01:11:06.880 --> 01:11:12.400 When it's open, it's there so if everything is collapsed you're in 01:11:12.400 --> 01:11:15.760 theory, like hiding content from your users that 01:11:15.760 --> 01:11:20.240 might not be aware that things expand and collapse. So this is good for 01:11:20.240 --> 01:11:23.680 you know, maybe have just three of these and maybe leave them, 01:11:23.680 --> 01:11:27.920 consider leaving them expanded so people that are scanning, can quickly 01:11:27.920 --> 01:11:33.200 quickly find the information. On our websites.ucsf.edu page we used to have 01:11:33.200 --> 01:11:37.760 all of our FAQs in this format and so if people were looking 01:11:37.760 --> 01:11:41.760 for certain keywords that were only in the answer, but not in the question 01:11:41.760 --> 01:11:45.600 that Control F functionality did not work for them. So we were 01:11:45.600 --> 01:11:48.160 essentially hiding content from our users. So we went with a 01:11:49.040 --> 01:11:52.400 a different way. We decided to use anchor tags. 01:11:52.400 --> 01:11:56.320 Let me just take you over here to show you again what that 01:11:56.320 --> 01:11:59.840 what that is. So here's all of our questions 01:11:59.840 --> 01:12:03.920 listed in a couple different sections and as we scroll down 01:12:05.200 --> 01:12:07.840 we repeat the questions again with the text 01:12:10.080 --> 01:12:13.280 so if I scroll back up here this is a link 01:12:13.840 --> 01:12:19.600 to a certain part of this page. It just jumps me down here to that same 01:12:19.600 --> 01:12:23.760 repeated question with the answer. So that's how anchor 01:12:23.760 --> 01:12:27.040 tags work. And now everything is showing, nothing is 01:12:27.040 --> 01:12:29.440 collapsed because we went away from that method. 01:12:30.000 --> 01:12:32.720 And every everything is available and 01:12:32.720 --> 01:12:38.080 searchable, so that's how collapse items work. 01:12:41.520 --> 01:12:48.160 And let's move on to our Video page. We 01:12:48.160 --> 01:12:53.920 do not have a video streaming or video hosting service here at UCSF so 01:12:54.480 --> 01:13:01.440 the recommendation is that videos live on YouTube or DailyMotion or Vimeo. 01:13:01.440 --> 01:13:05.680 And that we we bring them in using this method. So I'm going to edit my Video 01:13:05.680 --> 01:13:06.180 page 01:13:08.160 --> 01:13:10.720 and get my cursor blinking here in the content area. 01:13:11.280 --> 01:13:15.520 Go to the video icon, looks like a circle with a triangle in it. 01:13:15.520 --> 01:13:19.040 if you hover over it it says "insert a YouTube, Vimeo or DailyMotion video." 01:13:19.680 --> 01:13:23.280 I click on that and get the dialog box and it's asking for a URL. 01:13:24.080 --> 01:13:26.080 So I need to open up another tab 01:13:28.320 --> 01:13:35.760 and I'm going to go to Google and I'm going to search for "UCSF video" 01:13:42.000 --> 01:13:45.680 and this is my favorite one, the first one that shows up. I want to click 01:13:45.680 --> 01:13:52.160 on the video that I want. Okay click on the video that I want, probably 01:13:52.160 --> 01:13:55.920 pause it, and you want to capture that URL that's 01:13:55.920 --> 01:13:59.840 up there in the menu bar and copy that. 01:14:01.120 --> 01:14:04.000 Come back to your template and paste that in. 01:14:06.560 --> 01:14:10.320 You can choose to align it on your page. Since this is the only thing on the page 01:14:10.320 --> 01:14:16.720 I'm just going to let everything default. I might go down to half size just for 01:14:16.720 --> 01:14:22.720 network reasons today and click ok. And you can see the keyframe of the 01:14:22.720 --> 01:14:25.440 video. You don't see a play button or anything, 01:14:25.440 --> 01:14:29.200 sometimes the View mode is a little bit different than what we see in Edit mode 01:14:29.200 --> 01:14:32.400 and that's true in this case. I'm going to scroll on 01:14:32.400 --> 01:14:33.520 down and hit save. 01:14:36.560 --> 01:14:39.760 And now my video player does have a play button. 01:14:40.800 --> 01:14:46.400 I can play it, I can, I have access to the play and the pause 01:14:46.400 --> 01:14:50.960 button. I have access to closed captioning. There we go 01:14:50.960 --> 01:14:53.440 another accessibility - this is a great example of 01:14:53.440 --> 01:14:57.520 a video with accessibility. It's the closed captioning also known as the 01:14:57.520 --> 01:15:03.600 subtitles that can be turned off or on. Works great for like I said 01:15:05.760 --> 01:15:09.360 people that have, are hard of hearing they like to have these on 01:15:09.360 --> 01:15:13.600 so they can read that. It works great in situations that are very noisy like at 01:15:13.600 --> 01:15:16.720 the airport usually they have TV monitors with news 01:15:16.720 --> 01:15:19.200 playing and they usually have the subtitles turned on so 01:15:19.200 --> 01:15:26.640 people can read those. If you're, when I used to ride BART on my 01:15:26.640 --> 01:15:31.280 phone, if I forgot my headset, I didn't want to blast everybody with a video so 01:15:31.280 --> 01:15:35.040 I would turn off my volume and I would read the closed captions so 01:15:35.040 --> 01:15:37.520 again a lot of these accessibility features 01:15:37.520 --> 01:15:41.520 reach out to everybody, all all types of users. 01:15:41.520 --> 01:15:45.280 So there we go, we've got a video in there. That's how the videos work. 01:15:47.920 --> 01:15:55.920 Let's let's see we've done an image and we've added links. Let's let's work 01:15:55.920 --> 01:16:01.040 on managing our menu up here. So we've got, I've got one, two, three, four, 01:16:01.040 --> 01:16:05.840 five, six things. I'm almost about at the limit of of what I should have up there. 01:16:06.880 --> 01:16:10.240 But you can see these came in in a really weird order. 01:16:10.240 --> 01:16:14.560 I created my Home page first, and I did the People starting point next, 01:16:14.560 --> 01:16:19.760 and so they're not in alphabetical order. They're not in the order of creation. 01:16:19.760 --> 01:16:24.480 It's just random. So a way to manipulate these is 01:16:26.240 --> 01:16:29.520 consider this our navigation area and there is 01:16:29.520 --> 01:16:34.240 always a usually in all sections, there's a little widget that 01:16:34.240 --> 01:16:37.760 can be invoked. If you put your cursor in the top right 01:16:37.760 --> 01:16:41.360 corner, so there's a widget right there over the word People, I'm going to click 01:16:41.360 --> 01:16:46.000 on that and a menu choice came up I want to 01:16:46.000 --> 01:16:47.840 choose List Links 01:16:50.000 --> 01:16:53.360 and here is a list of everything in my Main Menu. 01:16:54.640 --> 01:16:57.200 These all correspond to exactly what you see up here. 01:16:57.760 --> 01:17:01.520 So if I want to move these around, let's say I want to try and get these in 01:17:01.520 --> 01:17:02.560 alphabetical order. 01:17:07.920 --> 01:17:12.400 Let's move People above Practice. I'm clicking on the little move icon 01:17:13.200 --> 01:17:15.840 and pulling it up there, above the word Practice. 01:17:16.560 --> 01:17:19.600 It's also dragging something else along with it that is 01:17:20.160 --> 01:17:25.920 part of the Content Management System so we want that to to behave as it did - 01:17:26.480 --> 01:17:31.520 coming along. Let's say I want to tuck Videos underneath Practice, 01:17:31.520 --> 01:17:35.440 as if my menu I was getting too many items and I want to have 01:17:36.080 --> 01:17:40.400 these as fly outs underneath the menu item I can click on that 01:17:40.400 --> 01:17:44.240 little move icon and push it to the right so it's indented. 01:17:45.040 --> 01:17:51.120 All right I think I've got these kind of by alpha although I kind of 01:17:51.120 --> 01:17:53.840 would like Home to be at the top so I'm going to move that. 01:17:53.840 --> 01:17:58.080 I'm going to go by alpha and then I've got Videos tucked underneath and I'm 01:17:58.080 --> 01:18:04.000 going to hit Save Configuration and take a look. There we go, Home page is 01:18:04.000 --> 01:18:08.640 showing up now first. Practice is where I tuck Videos under so 01:18:08.640 --> 01:18:12.800 you can see how that provides another fly out and 01:18:13.440 --> 01:18:17.360 on that Videos page it also provides away for me to 01:18:17.360 --> 01:18:18.480 get back to Practice 01:18:20.800 --> 01:18:25.040 which has nothing in it at the moment. But that's how you can move those around. 01:18:25.040 --> 01:18:30.000 So we just looked at a list of our links. I want to 01:18:30.000 --> 01:18:33.360 take a moment to go back and show you a list of all of the content that we've 01:18:33.360 --> 01:18:36.960 added so far. I'm going to click on the word Content. 01:18:36.960 --> 01:18:39.840 Nothing else under the flyout, just Content. 01:18:40.480 --> 01:18:43.040 And now here's a list of everything I've I've built today. 01:18:43.600 --> 01:18:47.440 And you can see there's a Title, it's all, they're all pages, 01:18:48.720 --> 01:18:54.720 the published status is yes. Let me show you how you can hide these 01:18:54.720 --> 01:18:59.760 or unpublish them. So let's say I don't want columns 01:18:59.760 --> 01:19:05.120 to show because maybe it's a page that it's just a practice page and I don't 01:19:05.120 --> 01:19:08.880 want anyone to see it. I'm going to go into the Operations 01:19:08.880 --> 01:19:09.600 edit mode. 01:19:12.080 --> 01:19:16.480 And I'm going to scroll down towards the save button to the Publishing Options 01:19:16.480 --> 01:19:23.840 and choose that. And unclick Publish and hit save and just as a reminder 01:19:23.840 --> 01:19:28.560 we're on the Columns page, and it was up there in the menu when I 01:19:28.560 --> 01:19:31.280 turned off published and hit Save. Columns 01:19:32.560 --> 01:19:38.240 is now not there, it's not in our menu. So that is you can always go back to 01:19:38.240 --> 01:19:38.800 Content 01:19:42.080 --> 01:19:48.400 and you can see the publish status is no. You can always go back into edit and 01:19:49.280 --> 01:19:50.320 republish it again. 01:19:52.480 --> 01:19:56.480 So this might work great in the scenario of, oh, you know, we're changing our 01:19:56.480 --> 01:20:00.400 mission. Let's leave our current mission page up there as it is and let's 01:20:00.400 --> 01:20:05.200 create a mission two page and let's work on that, you know, on your 01:20:05.200 --> 01:20:08.320 own or with a team until you get it approved and ready to 01:20:08.320 --> 01:20:11.920 go. Then you could publish the new one and you can 01:20:11.920 --> 01:20:16.320 unpublish the old one. So that's that's one of the odd things 01:20:16.320 --> 01:20:19.920 about this Content Management System and the way the process that we 01:20:19.920 --> 01:20:24.560 have is set up. Everything is live so don't freak out if your site is new 01:20:24.560 --> 01:20:28.800 and you're putting this weird content up today. You probably have 01:20:28.800 --> 01:20:32.080 not advertised your URL, you probably have not done a 01:20:32.080 --> 01:20:35.360 publicity campaign that you have a new website yet, so it's probably only, 01:20:36.000 --> 01:20:39.680 it's only between, you know, you and your team and it that you have a site right 01:20:39.680 --> 01:20:41.680 now, but like I said, at the end of the session 01:20:42.240 --> 01:20:44.480 I'd probably recommend that you go in and 01:20:45.600 --> 01:20:48.640 edit these and unpublish them until you get some some 01:20:49.200 --> 01:20:52.400 actual legitimate content content up there. 01:20:54.240 --> 01:20:57.280 Next, I want to show you, I'm going to take you back to 01:20:58.720 --> 01:21:02.240 Tobacco, really quick, I want to show you how they 01:21:04.640 --> 01:21:05.140 have 01:21:10.640 --> 01:21:13.840 their sidebar. They chose their sidebar to appear on the right 01:21:14.960 --> 01:21:22.000 and it's filled with gray and they, a sidebar is composed of 01:21:22.000 --> 01:21:27.840 blocks. They have one block right here with a some text and an email link. 01:21:28.400 --> 01:21:31.600 They have another block here with a heading and 01:21:33.120 --> 01:21:36.960 links to some other pages. They have another block here. 01:21:36.960 --> 01:21:41.120 This is the featured Publication Starting Point that I showed you earlier. 01:21:41.120 --> 01:21:44.880 Just a reminder, Starting Points are available under the word Appearance. 01:21:46.160 --> 01:21:51.840 And they chose to populate it with Publications, Quick Links and 01:21:52.560 --> 01:21:56.480 another block so. Back to, let's go 01:21:57.280 --> 01:21:59.680 to our Practice page 01:22:06.480 --> 01:22:09.840 and create some blocks. So 01:22:11.920 --> 01:22:16.320 actually we really don't, doesn't really matter what page we're on 01:22:16.320 --> 01:22:19.040 because we're going to create a block and blocks 01:22:19.760 --> 01:22:23.840 are pieces of content that by default will appear on every page. 01:22:26.400 --> 01:22:30.000 So there are, there is logic where you can turn it off and on 01:22:30.640 --> 01:22:33.760 but to create a block we go up to the top where it says Structure > 01:22:34.480 --> 01:22:41.280 Blocks > Add a Block. And my Blocks today, I'm going to do one 01:22:41.280 --> 01:22:42.640 that's called new phone number. 01:22:45.600 --> 01:22:49.840 And I usually like my block title or I suggest block title and block 01:22:49.840 --> 01:22:53.600 description match, at least as if you're a beginner at this. 01:22:53.600 --> 01:22:57.280 And then you, anything that has a red star is required. 01:22:57.280 --> 01:22:59.840 So we do have to have something in Description and we do have to have 01:22:59.840 --> 01:23:05.840 something in Body. 01:23:09.840 --> 01:23:15.040 Let's get some text in there and very important before we hit save, 01:23:15.040 --> 01:23:20.640 there's a section called Region Settings and the default is always "none" so we 01:23:20.640 --> 01:23:24.160 want to make this block appear in the sidebar so 01:23:24.160 --> 01:23:28.080 I'm choosing sidebar and here 01:23:28.080 --> 01:23:31.200 is the logic where you could choose to have it 01:23:31.200 --> 01:23:34.800 only appear on certain pages. I'm going to go with the default of it appearing 01:23:34.800 --> 01:23:39.200 on all pages and hit save block, and hopefully I get a 01:23:39.200 --> 01:23:41.440 success message. "The block has been created." 01:23:42.320 --> 01:23:46.560 Here's a list of blocks that belong on my page and you're probably thinking hey 01:23:46.560 --> 01:23:48.960 wait, we just created one. What are all of these? 01:23:48.960 --> 01:23:52.560 These are all the pieces of your Content Management System that 01:23:52.560 --> 01:23:56.000 create the areas on your site so even if they're not 01:23:56.720 --> 01:24:03.040 filled with any content yet, try and avoid being OCD and wanting to clean 01:24:03.040 --> 01:24:06.640 these things up like, "oh, main main menu level one, I don't know 01:24:06.640 --> 01:24:08.560 what that is. I 'm gonna hit delete." Don't delete that. 01:24:09.120 --> 01:24:15.760 That contains the login piece so when you go when a log in as an 01:24:15.760 --> 01:24:18.720 admin, if you delete that that's gone and 01:24:18.720 --> 01:24:20.720 you'll have to put a ticket in and ask to have that 01:24:21.360 --> 01:24:26.160 restored. So these are, it's a little overwhelming to see all 01:24:26.160 --> 01:24:30.560 this at first. But just remember we created a block and we said we want 01:24:30.560 --> 01:24:34.080 it to appear in the sidebar. Here's my new phone number block. 01:24:35.600 --> 01:24:39.600 Here's something else that I, it's really good that they didn't let me delete this, 01:24:39.600 --> 01:24:43.600 again this kind of follows along with the new phone so just don't worry about 01:24:43.600 --> 01:24:46.800 it let it, let it hang out but let's test that we 01:24:46.800 --> 01:24:49.760 can see our sidebar. So I'm gonna at random go to 01:24:49.760 --> 01:24:56.080 any page, my home page, there's my block underneath the slider. Let's go to 01:24:56.080 --> 01:25:01.120 Collapsing Items and see if the block is there. There it is. Good! So far so good. 01:25:01.120 --> 01:25:04.480 Let's create another block I'm going to go to Structure > 01:25:04.480 --> 01:25:11.840 Blocks > Add Block and I'm going to call this one new Address. 01:25:14.160 --> 01:25:15.600 And a little body text 01:25:23.360 --> 01:25:27.520 and remember before you hit save go to Region Settings, 01:25:27.520 --> 01:25:30.800 change it from none to sidebar and hit save. 01:25:31.440 --> 01:25:36.880 And fingers crossed we'll go to a page and we should have two sidebars or two 01:25:36.880 --> 01:25:40.960 blocks in our sidebar. Let's say, oh, I'm not really sure I like 01:25:40.960 --> 01:25:44.080 that red. So let's do a reminder of how to change 01:25:44.080 --> 01:25:47.760 colors. And I'm going to go to Appearance 01:25:48.320 --> 01:25:55.360 Settings > UCSF Site Builder. Go to the color theme and that red was 01:25:55.360 --> 01:25:58.960 under the secondary choice. Let's say I want purple instead. 01:25:58.960 --> 01:26:03.760 Hit Save Configuration. Let's go to one of our pages. 01:26:04.640 --> 01:26:08.640 And you can see how that changed so again another thing you might want to do 01:26:08.640 --> 01:26:11.760 outside of this session, see where colors get applied. Know how 01:26:11.760 --> 01:26:13.280 you can go back in and change them. 01:26:16.560 --> 01:26:22.880 If you want to edit any of these these blocks again you can invoke that 01:26:22.880 --> 01:26:27.520 little widget to show, I was kind of trying to hover in the 01:26:27.520 --> 01:26:30.000 imaginary dotted line that I couldn't see 01:26:30.000 --> 01:26:32.400 around that block to get that widget to show. 01:26:33.200 --> 01:26:37.440 And the choices under the widget are just one it's Configure Block, 01:26:37.440 --> 01:26:40.800 takes you back to the same page where you can make 01:26:40.800 --> 01:26:46.640 edits to your text. It's the Region Settings are still at 01:26:46.640 --> 01:26:50.240 sidebar which is what we want, and hit save block. 01:26:50.240 --> 01:26:53.360 And then our changes are made. You could also 01:26:53.360 --> 01:26:59.200 go in to Configure Block and if you don't want it to show, instead of 01:26:59.200 --> 01:27:03.840 deleting it, I highly recommend you just change it to None. 01:27:05.280 --> 01:27:09.040 It's gone. If you want to bring it back go to Structure > 01:27:10.000 --> 01:27:13.360 Blocks. I'm just clicking on Blocks not any fly-out 01:27:13.360 --> 01:27:17.840 and I'm getting the list of all of them. I'm looking in the 01:27:19.040 --> 01:27:22.720 it was in the sidebar. I'm scrolling down to the bottom where there's a disabled 01:27:23.440 --> 01:27:29.760 section and it was the new address bar 01:27:29.760 --> 01:27:32.560 that I want to bring back into my sidebar 01:27:33.200 --> 01:27:36.240 so I would highly recommend using, changing it to none 01:27:36.240 --> 01:27:40.000 versus changing it to delete. There's plenty of room on the server. 01:27:40.000 --> 01:27:46.480 no need to worry about saving space. Hit Block. Let's 01:27:46.480 --> 01:27:50.640 come back and make sure it's back there. It is. So that's how Blocks work. 01:27:51.760 --> 01:27:55.600 Next is the People page. Right now, if we go to People 01:27:56.560 --> 01:27:59.040 it says there's no people currently available to display. 01:27:59.760 --> 01:28:06.480 We created a Starting Point earlier on. Again, Starting Points are under 01:28:06.480 --> 01:28:08.640 Structure > Starting points. I'm not going to click 01:28:08.640 --> 01:28:10.560 on it, that's just to tell you where they are. 01:28:11.280 --> 01:28:16.000 Now to create a page for People, we go to Content > I'd like to create a 01:28:17.040 --> 01:28:22.800 UCSF person is the choice that we want and we want to put in a UCSF email 01:28:22.800 --> 01:28:30.800 address and hit submit. 01:28:37.360 --> 01:28:41.840 And it's going out to the Directory, it's going out to profiles.ucsf.edu, 01:28:43.040 --> 01:28:48.640 and it's going out to CTSI and globalprojects.ucsf.edu, 01:28:48.640 --> 01:28:52.160 finding all the information it can about this person and scraping it 01:28:52.160 --> 01:28:56.080 and pulling in that data to create this page. So there we go, 01:28:56.080 --> 01:28:59.760 we have Dr. Volberding here with his name displayed. 01:28:59.760 --> 01:29:02.800 There's his headshot and his focal point is at his chin. 01:29:03.360 --> 01:29:06.480 Remember I recommend moving that more towards the 01:29:06.480 --> 01:29:10.320 nose or the eyes. So I clicked in the new focal area that I want 01:29:11.440 --> 01:29:15.600 and there's all kinds of things that you can do 01:29:15.600 --> 01:29:19.600 and can't do. You could you could upload another 01:29:20.400 --> 01:29:24.080 headshot photo if you wanted to have a picture of him maybe instead of the suit 01:29:24.080 --> 01:29:27.440 and tie you want him in his lab coat or you want 01:29:27.440 --> 01:29:31.680 a more casual picture. You you know how to add files now 01:29:31.680 --> 01:29:33.760 you can go through that process of choosing a different file. 01:29:34.400 --> 01:29:40.800 Sometimes our titles reflect what is in HR and sometimes it's a little bit 01:29:40.800 --> 01:29:44.080 cryptic. So you can retype a department name or 01:29:44.080 --> 01:29:48.560 you can retype contact info and title. 01:29:49.200 --> 01:29:51.840 And you could put in an extra thing about what you do. 01:29:53.760 --> 01:29:56.880 I'm going to keep all the defaults. I want all of his publications 01:29:56.880 --> 01:29:59.840 to come in because that's the point of this data pull. I don't have to do 01:29:59.840 --> 01:30:02.240 anything manual. This is all going to do the work for me. 01:30:02.880 --> 01:30:07.120 Here is the LDAP data area. This is what comes from the directory. 01:30:07.120 --> 01:30:10.640 You can see it's all kind of grayed out. We can't we can't 01:30:10.640 --> 01:30:14.160 we can't change anything. I'm highlighting this and hitting the delete 01:30:14.160 --> 01:30:17.200 key and I I can't change anything. I'm going to 01:30:17.200 --> 01:30:19.840 scroll all the way down to the bottom and just hit save. 01:30:23.680 --> 01:30:27.440 And I get the success message that his page has been updated. 01:30:27.440 --> 01:30:31.760 There it is with his headshot, his name, all the stuff he does, 01:30:31.760 --> 01:30:38.480 all the publications, on and on. What's great is when Profiles updates 01:30:38.480 --> 01:30:41.360 occur once a week, your website's going to go 01:30:41.360 --> 01:30:44.400 out and find that information and pull it in. 01:30:44.400 --> 01:30:48.000 So in the old days we would have to kind of keep an eye on 01:30:48.000 --> 01:30:51.280 when things were changing and we'd have to come back and copy and paste things 01:30:51.280 --> 01:30:54.560 in. And there's always room for human error and 01:30:54.560 --> 01:30:57.440 so this is a feature a lot of people ask for and 01:30:58.320 --> 01:31:01.680 and there it is. Let me demonstrate one more 01:31:01.680 --> 01:31:05.440 time. So Content > I'd like to create a > UCSF 01:31:05.440 --> 01:31:08.960 Person. And I'm going to put my own email 01:31:08.960 --> 01:31:12.400 address in there, oops, I thought I had a shortcut to put 01:31:12.400 --> 01:31:19.200 in my email address. Okay and I hit Submit 01:31:21.920 --> 01:31:25.280 and here's something interesting first thing is 01:31:26.720 --> 01:31:30.640 there's a success message that it went out to profiles to look for some data 01:31:31.200 --> 01:31:34.640 but there is none that exists for this person me 01:31:34.640 --> 01:31:37.200 makes sense I'm not in profile so it's skipping 01:31:37.840 --> 01:31:42.080 and then there's a warning message and it says the email release 01:31:42.080 --> 01:31:44.720 has been restricted and the telephone number is restricted 01:31:45.280 --> 01:31:49.440 so I personally went into the the directory under my account 01:31:49.440 --> 01:31:52.080 and said I only want my phone and my email to show for 01:31:52.640 --> 01:31:58.240 internal people and if you get anything that says restricted or you 01:31:58.240 --> 01:32:00.880 might get something for denied especially if it's a student that you're 01:32:00.880 --> 01:32:03.360 trying to put in remember when I talked about the FERPA law 01:32:03.920 --> 01:32:09.680 they are not in the directory unless they decide to opt in and only if they 01:32:09.680 --> 01:32:13.200 opt in will this functionality work and if you 01:32:13.200 --> 01:32:17.120 want to try and get around it and manually create a student page again 01:32:17.120 --> 01:32:21.760 remember to ask for their permission so here's my info 01:32:24.240 --> 01:32:27.440 there's no headshot showing for me i could choose one if I wanted to 01:32:28.320 --> 01:32:36.880 um I can just put in you know what I do and hit save and now we have 01:32:38.000 --> 01:32:41.840 my page not quite as robust as Dr. Volberding's 01:32:41.840 --> 01:32:48.800 let's look at the complete people page here we are remember I chose grid style 01:32:48.800 --> 01:32:53.760 so it's going to start building a couple people in the first 01:32:53.760 --> 01:32:55.760 row and then it's going to add another row with 01:32:55.760 --> 01:32:58.960 a couple more people if your people don't have head shots 01:32:59.680 --> 01:33:03.120 it's gonna there's gonna always be like some trapped white space 01:33:03.120 --> 01:33:06.720 so if I wanted to change this back from grid to the other way 01:33:08.000 --> 01:33:09.520 i can go to appearance 01:33:13.280 --> 01:33:16.640 I'm sorry I'm going to the starting point I go to structure 01:33:16.640 --> 01:33:17.520 starting points 01:33:21.040 --> 01:33:25.680 and I'm going to go to profile I'm going to click on profiles integration 01:33:27.360 --> 01:33:30.960 I'm going to change the style from grid to expanded 01:33:30.960 --> 01:33:34.640 remember expanded is also known as row by row 01:33:35.360 --> 01:33:39.360 and this is a little bit misleading it says create starting point I'm really 01:33:39.360 --> 01:33:42.320 editing my starting point I'm going to click on that button 01:33:43.200 --> 01:33:47.280 we'll go back to the people page as soon as it says this is successful 01:33:48.560 --> 01:33:51.920 all that server configured remember the cryptic message but there's a green 01:33:51.920 --> 01:33:55.360 check mark so it's telling us that it was 01:33:55.360 --> 01:34:00.320 successful. I go to People and now here we are, row by row 01:34:01.360 --> 01:34:05.920 which might look a little bit better because some people, like I said, might 01:34:05.920 --> 01:34:10.400 have headshots and might have a a nice body of text to go with their 01:34:10.400 --> 01:34:14.160 name. So that's how you can change that so the 01:34:14.160 --> 01:34:19.840 order is always alpha by last name. Let's say I'm the PI 01:34:19.840 --> 01:34:23.200 of this research lab and I want to be at the top of the list. 01:34:23.840 --> 01:34:28.400 So here's how we change that. I'm again trying to invoke that little 01:34:28.400 --> 01:34:31.040 widget to show up in the top right corner 01:34:31.040 --> 01:34:34.640 of the dotted line around my information. I click on that widget 01:34:35.280 --> 01:34:40.000 and I'm going to go into edit. Here is the only place where I would feel safe 01:34:40.000 --> 01:34:43.200 to delete something, because you saw how easy it was to add a person. 01:34:43.920 --> 01:34:47.760 Any other time it says delete I try to find another way to either 01:34:48.400 --> 01:34:51.520 hide it, unpublish, change it to none, something like that. 01:34:52.240 --> 01:34:53.520 Anyway back to editing. 01:34:56.800 --> 01:35:01.200 Down the bottom, towards the save button, this is also under Publishing Options, 01:35:01.200 --> 01:35:06.720 for people pages. I can have myself "sticky 01:35:06.720 --> 01:35:09.760 at the top" of the list. So you heard that vocabulary word used 01:35:09.760 --> 01:35:15.120 in this context before, "sticky." We'll make sure something stays and this 01:35:15.120 --> 01:35:17.120 is going to make me stay at the top of the list. 01:35:17.680 --> 01:35:21.120 I hit save and we'll test make sure that worked. 01:35:21.120 --> 01:35:25.040 So there I am at the top. You can have up to three people 01:35:25.040 --> 01:35:28.080 "sticky at the top" of the list. Those three people 01:35:28.080 --> 01:35:31.600 are going to be sorted by last name alpha and then the rest of the people 01:35:31.600 --> 01:35:35.440 sort by alpha. So that's how Profiles work. 01:35:37.280 --> 01:35:41.840 And this only works for UCSF folks. 01:35:46.080 --> 01:35:53.200 Next I want to. talk about let me just take a moment to 01:35:53.200 --> 01:35:55.200 just review my notes and see if there was 01:35:55.200 --> 01:35:56.880 anything I left off. 01:36:00.720 --> 01:36:04.800 Okay I'm going to go to to our public service announcements piece now. 01:36:06.080 --> 01:36:09.840 Here's some important information about these websites. 01:36:11.120 --> 01:36:14.720 We've talked about not deleting things. Remember 01:36:15.360 --> 01:36:20.800 don't delete the home page! Edit it instead. Let's go back to home, 01:36:22.240 --> 01:36:27.600 go into edit. If I want to manipulate my slide banner, 01:36:28.240 --> 01:36:32.880 remember to click on the pencils to get into edit mode, 01:36:33.680 --> 01:36:39.360 to either use the trash can to delete, or use the add a new slide to add a new 01:36:39.360 --> 01:36:42.160 slide. In theory you don't have to have a slide 01:36:42.160 --> 01:36:46.720 carousel. You could delete all of these. There's some nicely done home pages that 01:36:46.720 --> 01:36:49.760 don't have a slide carousel. Just because it's there doesn't mean you 01:36:49.760 --> 01:36:55.920 have to use it. But that's how you would edit your home page. Again don't, don't 01:36:55.920 --> 01:37:01.680 delete it, don't create another one! Go in and edit it. Remember 01:37:01.680 --> 01:37:07.520 if you want to hide any of your pages go into edit mode and 01:37:08.560 --> 01:37:14.080 look for the publishing options below to uncheck published and hit save. 01:37:15.680 --> 01:37:21.520 And backups backups are done every night for all these websites 01:37:22.320 --> 01:37:24.800 but the backups are only kept for three days 01:37:25.520 --> 01:37:28.560 so if you mess something up on your site and you need 01:37:28.560 --> 01:37:32.080 a restore of your site because you've got a lot of content and you want it. 01:37:33.120 --> 01:37:36.720 You need to restore it. Put in a ticket as soon as you can. 01:37:38.560 --> 01:37:42.160 If uh and also keep three day weekends in mind. 01:37:44.640 --> 01:37:51.040 We if you have one coming up tomorrow so if you messed something up today and 01:37:51.040 --> 01:37:53.760 you waited till Monday to ask for a restore 01:37:56.000 --> 01:37:59.920 you might lose two days if you wait that long because it might, it'll probably 01:37:59.920 --> 01:38:03.360 it'll restore Sunday's and Saturday's and tomorrow. 01:38:03.360 --> 01:38:07.360 So don't be afraid to put in a ticket. I'm going to take you to our 01:38:08.560 --> 01:38:15.840 websites.ucsf.edu webpage and take you to the Help page 01:38:16.720 --> 01:38:20.160 and walk you through everything that we have. Here this is 01:38:20.160 --> 01:38:23.680 your support after this session. We don't have somebody 01:38:23.680 --> 01:38:26.880 on the phone able to answer your questions 01:38:26.880 --> 01:38:30.960 every minute of the day, so I want to make sure you understand what we do have 01:38:30.960 --> 01:38:34.000 available. We have the Frequently Asked Questions. 01:38:34.640 --> 01:38:37.360 Let me just take you there one more time. I'm going to just open this up in a new 01:38:37.360 --> 01:38:38.240 window real quick. 01:38:41.840 --> 01:38:45.200 So let's say like I need a refresher on how to 01:38:45.200 --> 01:38:47.840 how do I make somebody sticky at the top of the people page? 01:38:49.120 --> 01:38:52.080 You can look through here and try and find that. Or you can do my favorite 01:38:52.080 --> 01:38:55.440 shortcut CTRL F to bring up keywords and maybe look for 01:38:55.440 --> 01:38:58.880 the word Profile. we can see there's 12 occurrences of 01:38:58.880 --> 01:39:03.520 profiles on this page and we can keep moving around as we try 01:39:03.520 --> 01:39:05.280 to find that information. 01:39:07.280 --> 01:39:10.960 And here it is how can I customize a People page to list the PI first. 01:39:11.520 --> 01:39:14.960 Find the Publishing Options, select sticky at the top 01:39:15.760 --> 01:39:16.400 and there you go. 01:39:20.800 --> 01:39:26.000 The next, next we have two columns of information. The first one is about 01:39:26.000 --> 01:39:29.440 specific to Site Builder, a repeat again of the 01:39:29.440 --> 01:39:33.440 FAQs. Another great one is the Drupal Group on Chatter. 01:39:34.960 --> 01:39:41.680 Let me open that up. This is based on the theory that we all help 01:39:41.680 --> 01:39:44.160 each other and help people answer questions, so 01:39:44.160 --> 01:39:47.680 sometimes you might see me answering someone's questions, a lot of 01:39:47.680 --> 01:39:50.800 times you might not see me available to answer questions. 01:39:52.720 --> 01:39:56.080 Now looks like I've been answering some questions lately here but you can see 01:39:56.080 --> 01:39:58.240 like here's somebody from my team, Eric Guerin. 01:39:58.240 --> 01:40:02.560 He's one of our developers. He answered a question for Fiona. 01:40:03.280 --> 01:40:09.360 This site has a search bar up here. I found it not to be very helpful. Here's 01:40:09.360 --> 01:40:13.360 my work around. If I'm trying to find a question that somebody might have asked 01:40:14.800 --> 01:40:17.600 I will scroll all the way down to the bottom of the page. 01:40:18.240 --> 01:40:22.160 And I don't know if you saw it but there for a second it said loading so it's 01:40:22.160 --> 01:40:26.320 loading more information I do this a couple times just to get it 01:40:26.320 --> 01:40:30.560 to load a bunch of content and then 01:40:30.560 --> 01:40:35.040 let's do my CNTLF trick and let's say we wanted to find 01:40:35.040 --> 01:40:40.400 something about maybe access denied. 01:40:43.360 --> 01:40:50.560 And we here we found one and. There's somebody answering and people 01:40:50.560 --> 01:40:54.160 working working together. So we encourage you to 01:40:54.160 --> 01:40:57.840 use this as a way to find answers and also to contribute back to the community. 01:40:57.840 --> 01:41:01.120 Once you get a better understanding of this so we 01:41:01.120 --> 01:41:07.120 can all help each other. And let's look at our Events 01:41:07.120 --> 01:41:09.040 page. I think we looked at that really quickly. 01:41:10.640 --> 01:41:14.160 Here's today's session. Here's what will be happening. 01:41:15.120 --> 01:41:19.040 Hopefully on April 7th, if things die down, if not I'm going to just do another 01:41:19.040 --> 01:41:23.200 recording because we want to try and keep our events alive. 01:41:23.200 --> 01:41:29.680 Even if we have to do them as recordings if not as live zoom. Although my favorite 01:41:29.680 --> 01:41:32.480 is always working with people one-on-one and seeing their face and 01:41:33.040 --> 01:41:37.360 working together. That's the way I work best. So I can't wait till we can all do 01:41:37.360 --> 01:41:42.480 that again and back to our Help page. Here's the 01:41:42.480 --> 01:41:44.880 very important thing about submitting an IT 01:41:44.880 --> 01:41:48.320 ticket. Let me take you to this link before I go 01:41:48.880 --> 01:41:52.320 to that link it's going to say we're going to click on something 01:41:52.320 --> 01:41:55.120 that says "report something that just isn't working right" 01:41:55.680 --> 01:41:58.960 and we're going to make sure that we select that it's a UCSF Drupal Hosted 01:41:58.960 --> 01:42:03.040 website. And these tickets get routed to our Web 01:42:03.040 --> 01:42:08.160 Services Group under the direction of John Kealy. And 01:42:08.160 --> 01:42:14.640 we also have offshore staff in India that work on these tickets. so please 01:42:14.640 --> 01:42:18.720 don't send an email right to me especially during this time 01:42:18.720 --> 01:42:22.480 I have to make COVID-19 my priority then my second 01:42:22.480 --> 01:42:26.400 priority is accessibility, and Site Builder 01:42:26.400 --> 01:42:30.640 support kind of falls a little bit lower than that. 01:42:30.640 --> 01:42:33.360 So this is how you can get the best immediate support. 01:42:33.920 --> 01:42:37.760 Click on submit an IT ticket. Click on the get IT Help. 01:42:39.520 --> 01:42:47.520 It should populate the form with your information and as we scroll 01:42:47.520 --> 01:42:50.160 down "type of help" we want to make sure we 01:42:50.160 --> 01:42:55.520 choose "UCSF Drupal Hosted Website." And under more 01:42:55.520 --> 01:42:58.560 information, please, please, please always put in the 01:42:58.560 --> 01:43:01.200 URL of what you're struggling with. That will 01:43:01.200 --> 01:43:05.200 save an extra point of contact with someone to say 01:43:05.200 --> 01:43:07.600 what what's your URL or can you send the link? 01:43:07.600 --> 01:43:10.080 So put that in and then if you can be more 01:43:10.720 --> 01:43:15.200 descriptive to, you know, something like I'm getting access denied when I'm 01:43:15.200 --> 01:43:19.120 uploading an image or I'm getting access tonight when I try to 01:43:19.120 --> 01:43:21.520 log in. I could log in the other day but I can't now. 01:43:21.520 --> 01:43:25.920 I successfully added somebody via Profiles the other day 01:43:25.920 --> 01:43:30.000 and now it's not working. So the more specific you can be the more helpful 01:43:30.000 --> 01:43:34.240 that is to our team and feel free to use this 01:43:34.880 --> 01:43:38.400 for how-to questions, for feature requests 01:43:38.400 --> 01:43:41.040 and for actual you know technical support 01:43:43.760 --> 01:43:44.260 and 01:43:48.400 --> 01:43:52.320 next paragraph is about our monthly Users Helping Users session. 01:43:53.520 --> 01:43:56.560 It's not on our Events page right now I'm not sure 01:43:56.560 --> 01:43:59.520 how our developers are going to handle this 01:44:00.480 --> 01:44:06.640 during the COVID-19 crisis so you can always go back to this idea of 01:44:06.640 --> 01:44:12.240 submitting an IT ticket. There is an inquiry form that you can 01:44:13.040 --> 01:44:19.120 fill out. You can still fill it out now where you can put in your issue and you 01:44:19.120 --> 01:44:23.600 know, tell them what version of Drupal you're using if your 01:44:23.600 --> 01:44:27.040 site looked like mine and the navigation was the same 01:44:27.040 --> 01:44:32.240 you're using Drupal 7 Site Builder. You can also say "I don't know" but here's 01:44:32.240 --> 01:44:36.960 where you can also put in an issue and so when this session runs 01:44:36.960 --> 01:44:39.680 once a month it's usually a two-hour session hosted 01:44:39.680 --> 01:44:42.880 by one of our developers. They usually break the first hour into 01:44:42.880 --> 01:44:46.480 beginner questions and the second hour into more advanced questions. 01:44:47.120 --> 01:44:50.800 And first questions answered are the ones that are submitted if the person 01:44:51.920 --> 01:44:58.400 is present during the session and then they will also you know let people 01:44:58.400 --> 01:45:01.040 ask questions ad hoc throughout the session. 01:45:01.680 --> 01:45:05.840 And if you are a beginner and you don't want to stick around for the second half 01:45:05.840 --> 01:45:08.560 you know, no no hurt feelings when they meet in 01:45:08.560 --> 01:45:11.920 person if you were to get up and leave for the second half 01:45:11.920 --> 01:45:16.240 that's okay. Although if you have the time and the 01:45:16.240 --> 01:45:19.200 interest this is how I learned. I would attend 01:45:19.200 --> 01:45:21.680 everything I could even if it was above my head 01:45:21.680 --> 01:45:25.680 and start to learn what the questions were people were asking even if I didn't 01:45:25.680 --> 01:45:28.640 understand the solution. I started to understand the language and the 01:45:28.640 --> 01:45:32.880 vocabulary so that's very helpful and 01:45:34.560 --> 01:45:40.400 we also have within our Web Services Team we have an in-house agency 01:45:40.400 --> 01:45:48.240 and here's a website consultation form that you can fill out about the 01:45:48.800 --> 01:45:54.000 the website help that you need and what timing you're looking at. Just so you 01:45:54.000 --> 01:45:58.480 know, their pipeline is full until late spring and that was 01:45:58.480 --> 01:46:02.160 before COVID so some of our team is being pulled off to 01:46:02.160 --> 01:46:06.640 help with COVID-19 communications, so that might be that 01:46:06.640 --> 01:46:10.240 pipeline might be full for a little bit longer but you can still feel free to 01:46:10.240 --> 01:46:12.640 fill out this request and they can get back to you 01:46:12.640 --> 01:46:16.320 and let you know what the situation is. Don't be afraid of this thing at the 01:46:16.320 --> 01:46:19.600 bottom that asks you to put in a speed type or your chart account. 01:46:20.960 --> 01:46:28.640 You don't get charged for your initial session or an initial you know speaking 01:46:28.640 --> 01:46:31.040 with them and that's when they just they'll decide 01:46:31.040 --> 01:46:33.920 like are you the right kind of client for what we do. 01:46:34.560 --> 01:46:41.360 And if we're if our pipeline is full we have third-party outside vendors 01:46:41.360 --> 01:46:44.560 that we work with that we can refer you to. 01:46:45.280 --> 01:46:49.360 So that's the consultation form for our in-house agency there is a charge but 01:46:49.360 --> 01:46:53.200 not for the initial conversation but for work 01:46:53.200 --> 01:46:56.720 that they do. There's another link here to the Brand 01:46:56.720 --> 01:46:59.840 Identity website. Let me take you there real quick because I want to 01:46:59.840 --> 01:47:07.840 show you under print and digital, here there's the digital color palette 01:47:08.640 --> 01:47:11.760 when it should be used for remember if you're going to put 01:47:11.760 --> 01:47:15.920 a pdf on the website you want to make sure you're using the digital color 01:47:15.920 --> 01:47:19.600 palette. Not the regular or print one. 01:47:21.040 --> 01:47:25.040 I'm going over here on the left, they have their sidebar on the left they have 01:47:25.040 --> 01:47:29.680 a nice little block here that says digital colors pdf guidelines. I'm 01:47:29.680 --> 01:47:32.320 clicking there on that link that says digital colors 01:47:32.320 --> 01:47:38.400 section and here's a whole pdf about 01:47:39.600 --> 01:47:41.520 the different colors that you should use. 01:47:43.920 --> 01:47:49.520 And if you're into HTML code it's usually the hexadecimal values that 01:47:49.520 --> 01:47:54.960 you use to to identify the different colors 01:47:55.920 --> 01:48:00.880 like this blue color is #007cbe for example 01:48:03.440 --> 01:48:05.200 and back, back 01:48:08.640 --> 01:48:10.400 trying to get back to my Help page here 01:48:13.680 --> 01:48:20.960 one second. I think I lost it, let me go back in 01:48:22.720 --> 01:48:29.520 websites.UCSF.edu, back to the help page. Let me make this bigger, okay. 01:48:30.720 --> 01:48:33.200 Second column of text is about the Drupal Community. 01:48:34.080 --> 01:48:38.160 There is a Slack workspace, so if you're a Slack user 01:48:38.160 --> 01:48:42.320 and I think if you're not one, you will probably want to be one, soon especially 01:48:42.320 --> 01:48:44.160 with all the telecommuting that we're doing. 01:48:44.160 --> 01:48:48.640 There's one where you can ask questions, there is the Drupal group on Chatter. 01:48:48.640 --> 01:48:51.600 Same thing, same link from over here on the left 01:48:52.480 --> 01:48:56.000 in the left column that we looked at. I gave you the hint of making the page, 01:48:56.720 --> 01:49:00.000 getting a lot of content to reload, by scrolling and then using the Control F 01:49:00.000 --> 01:49:05.520 to find your topic. There is a Drupal Users Group. 01:49:06.480 --> 01:49:08.160 We didn't see any on the event page 01:49:10.320 --> 01:49:14.560 just because of COVID-19 right now. There's also a local San Francisco 01:49:14.560 --> 01:49:18.640 Drupal Users Group Meetup. It's not officially associated with UCSF, 01:49:18.640 --> 01:49:23.120 but if you're familiar with Meetup.com, you can find it under there. They 01:49:24.320 --> 01:49:27.840 were typically hosted at the Mission Center Building 01:49:28.480 --> 01:49:31.760 after hours once once a month, with pizza and 01:49:33.440 --> 01:49:34.880 soda. And then 01:49:37.040 --> 01:49:43.360 there is Drupalize Me Guides. Again, not officially associated or 01:49:43.360 --> 01:49:47.040 endorsed by UCSF. Let me just pop that one open, 01:49:49.200 --> 01:49:53.360 and this is something I do not personally 01:49:53.360 --> 01:50:00.160 use. It's above and beyond what I need as a content editor. I can pretty much 01:50:00.880 --> 01:50:04.720 do everything I need with what I, to create a basic website with what I 01:50:04.720 --> 01:50:09.360 walked you through today. This is for those of you that really 01:50:09.360 --> 01:50:12.400 want to get into Drupal. So like today's session was 01:50:12.400 --> 01:50:17.120 really geared towards UCSF users, this is geared towards Drupal users in 01:50:17.120 --> 01:50:19.760 general, and so it may be above and beyond with 01:50:19.760 --> 01:50:24.160 with what you need and it might also be giving you information 01:50:24.160 --> 01:50:28.080 that might not be available working within our template. So 01:50:28.880 --> 01:50:32.640 if your if your job is a developer full time, this might be 01:50:32.640 --> 01:50:36.080 something for you. But if you're more marketing/communications and 01:50:36.080 --> 01:50:40.160 building a simple website, it might not be for you. 01:50:40.160 --> 01:50:47.120 So so today's session was really to, Quick Start Lab, we call it Quick 01:50:47.120 --> 01:50:50.480 Start because it's, we quickly went through the interfaces, 01:50:50.480 --> 01:50:52.960 the interface. We didn't go into all the nitty gritty 01:50:52.960 --> 01:50:56.960 details, but hopefully we gave you enough information to show 01:50:56.960 --> 01:51:00.560 you how how the content toolbars work, 01:51:01.680 --> 01:51:06.160 some of the navigation items up here at the top and 01:51:07.200 --> 01:51:10.320 how to read, you know, how to rearrange things. So 01:51:10.320 --> 01:51:16.080 I hope that this gave you a jump start or a quick start to what 01:51:16.080 --> 01:51:19.840 you need to do. One other thing I want to mention is 01:51:21.360 --> 01:51:27.520 let's say you want to have a donation link on your page, you'll want to work 01:51:27.520 --> 01:51:32.080 with University Development Alumni Relations, 01:51:32.960 --> 01:51:37.040 also known as UDAR. Let me just quickly find their page for you. 01:51:38.400 --> 01:51:42.320 They will give you a a donation code 01:51:45.760 --> 01:51:48.400 so you could have a little Give button on your page 01:51:49.200 --> 01:51:54.320 and they would customize it to, so people can make a gift to your 01:51:54.320 --> 01:51:56.960 specific area. So if your area is not on here, 01:51:57.680 --> 01:52:01.200 they can work with you to to get that listed so that's, 01:52:01.200 --> 01:52:04.320 you would work in partnership with them because that's a secure 01:52:05.120 --> 01:52:09.840 setup where people can securely put in their credit card 01:52:09.840 --> 01:52:11.520 information to donate to your cause. 01:52:15.280 --> 01:52:20.480 And one last note about some people are like, oh, what about 01:52:20.480 --> 01:52:23.360 private sites? Right, I want this behind password. 01:52:24.080 --> 01:52:27.280 If you remember when I took you to the blog 01:52:28.080 --> 01:52:31.920 there happened to be a blog item from John Kealy 01:52:32.480 --> 01:52:38.560 about creating a private secured site with MyAccess. 01:52:39.440 --> 01:52:44.000 He starts off right at the, let me go back. 01:52:44.000 --> 01:52:45.600 There is a little blurb here. 01:52:48.320 --> 01:52:51.680 This is not the correct method for using HIPPA or FERPA 01:52:52.400 --> 01:52:55.600 data, but it is a way to put up a private site. 01:52:56.240 --> 01:53:00.160 Another thought that you might want to do, is maybe you just have some 01:53:00.800 --> 01:53:04.080 a public-facing website but you have a couple files that are going to be 01:53:04.080 --> 01:53:07.920 private. You might want to just link to those and 01:53:07.920 --> 01:53:13.600 have them placed in Box so your users you could have, 01:53:14.320 --> 01:53:16.800 you could have a link that 01:53:20.800 --> 01:53:26.640 like like "View our SOPs" and then you might say 01:53:26.640 --> 01:53:29.920 something like this you know, requires MyAccess 01:53:30.880 --> 01:53:36.640 login. And you would you would build a link and you would put in the 01:53:37.280 --> 01:53:40.800 link from your Box URL in there so that's 01:53:41.360 --> 01:53:45.680 that's one way where you could have a little bit of privacy for some of 01:53:45.680 --> 01:53:46.180 your things. 01:53:48.400 --> 01:53:54.000 I'm gonna, that pretty much wraps up all the information I wanted to give you. 01:53:54.000 --> 01:53:56.960 I'm gonna open up the Chat just to see what we've 01:53:56.960 --> 01:54:00.560 got going on in here. And 01:54:05.200 --> 01:54:12.000 okay, great, thanks Anthony, and "I tried to add a 01:54:12.000 --> 01:54:15.120 block to the home page and now it's just blank white. And I can't 01:54:15.120 --> 01:54:19.760 get anything. I try to upload it and it's just blank." Okay, I'd say you probably 01:54:19.760 --> 01:54:23.920 need to put in a ticket and our team will help resolve that for 01:54:23.920 --> 01:54:27.200 you and then this one, "I'm unable to see the 01:54:27.200 --> 01:54:30.400 pages after I have published them. Is there a screen I can go to that shows 01:54:30.400 --> 01:54:34.720 all the pages I have created and allows me to move them around?" Yeah, 01:54:34.720 --> 01:54:38.480 let me just demonstrate that again really quick. So if you go back to 01:54:38.480 --> 01:54:41.120 Content and just click on the word Content, 01:54:41.120 --> 01:54:45.520 nothing else that flies out, this gives you a list of the pages that 01:54:45.520 --> 01:54:47.920 have been created and there's a column that will tell you 01:54:47.920 --> 01:54:52.720 the publishing status so if you don't see it, perhaps your publishing status is 01:54:52.720 --> 01:54:57.200 no. You could go back in and edit that page 01:54:59.600 --> 01:55:06.800 and change the publishing options to what to what you need. And I see one 01:55:06.800 --> 01:55:11.040 more coming in. Let's see what we've got. Great, 01:55:11.040 --> 01:55:15.200 all right, thank you, Christy: "Able to redo my web page it looks 01:55:15.200 --> 01:55:19.920 much more legitimate." Awesome, great well, thank you all so much. 01:55:19.920 --> 01:55:27.600 I appreciate your participation and I look forward, to hopefully meeting 01:55:27.600 --> 01:55:32.320 you one day in person. Thanks so much. Stay safe. Virtual 01:55:32.320 --> 01:55:35.120 fist bump and we'll talk to you later.