WEBSITE USER TRAINING SESSION Bloomfield College, Summer 2012 Created By: Rob Krieger, Webmaster INTRODUCTION This is a step-‐by-‐step guide to using our new website content management system, Drupal. With a content management system (CMS), you can do a number of useful things: 1. 2. 3. 4. 5.
Add a page to your department’s website section Change information on a page Manage drafts and revisions within your department Create a web form that allows students to register for an event Create and add a calendar event
The Webmaster has given you a specific permissions level. You have one of these two Roles: 1. Editor 2. Owner/Editor To get you started, the following image helps to describe the publishing lifecycle:
1
A STEP-‐BY-‐STEP GUIDE FOR WEBSITE EDITORS AND OWNERS Table of Contents: PART I: LOGGING IN AND UNDERSTANDING THE INTERFACE PART II: CREATING AND EDITING CONTENT PART III: BEFORE YOU PUBLISH, SET YOUR PAGE (1) BREADCRUMBS AND (2) ADDRESS PART IV: PUBLISHING PART V: ADVANCED EDITING – CREATING WEBFORMS PART VI: WORKBENCH – OVERVIEW OF OTHER TABS
PART I: LOGGING IN AND UNDERSTANDING THE INTERFACE
1. LOGGING IN
You should have received an email with a username and password. If you didn’t or you can’t find it, your username is the same as the prefix to your email address at Bloomfield: If your email address is:
[email protected] Then your Drupal username is: rob_krieger Your password (just this first time) is: helloworld Please type in your username and password at the following web address: http://bloomfield-‐dev.bloomfield.edu/user
2. THE INTERFACE: WHAT IS WORKBENCH?
Because we’re still in production, when you login you will arrive at a mostly blank page.
2
The first thing we’re going to look at is a little thing called “Workbench.” This is the only part of the interface you need to worry about for now. In the top left corner of the webpage you will see a link.
CLICK: My Workbench A page will load on your screen with tabs across the top, like this: CLICK: CREATE CONTENT (the 2nd tab) This is where you will make changes to your department’s webpages. That was pretty easy. Off to Part II, where you’ll create and edit some content.
PART II: CREATING AND EDITING CONTENT
1. WHAT IS A PAGE IN DRUPAL?
2. CREATE A BASIC PAGE:
A. OVERVIEW & CREATING A BASIC PAGE:
There’s a lot of different content you can create. You can see: Article, Course, Events, etc. For now, we’re going to start with a simple Basic Page. CLICK: Basic Page
3
B. ENTERING INFORMATION
We all know what webpages look like. What may seem like a complex interface (perhaps just because it’s new), should not keep us from remembering what we already know and have confidence in. In Drupal there are different areas e.g. Title, Section, Body, etc., you can enter information into. Each of these areas corresponds to different areas of a webpage. Let’s take a look at a webpage to visualize this. Back to Drupal: you can think of this Basic Page interface like you think of Microsoft Word (or another word processing program): you enter and edit information that you want to save and publish. Instead of printing document like you do with Microsoft Word, in Drupal, you will create a draft that the Webmaster will publish to the web for you when you indicate that you want the page to be published (remember the diagram from above). We will go over the Moderation States later in the session. Microsoft Word vs. Drupal Editing Interface => Very Similar
Let’s look at the “Body” area of your page. It’s where you enter text, images, bulleted lists and other items. Whatever you enter into this area, will appear in your page. In order to easily edit the Body, we will want to change the “Text format” to use an easier editing system, an option known as Full HTML. Don’t worry, you’re not going to be entering HTML or any other computer programming for that matter.
4
PULL DOWN and choose: Full HTML
This opens up an editing area you are definitely familiar with, because it’s exactly like Microsoft Word. This is called a WYSIWYG, which stands for: What You See Is What You Get (WYSIWYG) – Pronounced: WIZ – EE – WIG
Again, this should look very familiar. At this point, any fears you had about using Drupal should disappear, because you are already prepared since you know how to use Microsoft Word. Let’s try to add some content to our page. I’ll walk you through some simple steps.
C. USING THE WYSIWYG
1. USING TEXT: TYPE (In the Body section): My name is … [type your name here]. This is my first webpage. TYPE (In the Body section): This is a list: First Item Second Item Third Item
5
HIGHLIGHT (In the Body section): The words in your list CLICK: The Bulleted List Icon (see image below)
Keep the list highlighted and try a Numbered List… CLICK: The Numbered List Icon (to the right of the Bulleted List Icon) 2. CREATING A LINK: TYPE (In the Body section): The following words will be a link to something: this is a link. HIGHLIGHT (the part that says): “this is a link.” With the phrase above still highlighted… CLICK: The Link icon (see the below image – it looks like a little globe)
This will open up a dialogue box that looks like this:
6
TYPE (1): is where you will put the URL or Web Address of the page you want the text to link to e.g. if you want to make the text link to Google, you would put: google.com in the URL field. CLICK (2): OK. This will confirm that you want to turn the text into a link. 3. INSERTING AN IMAGE: CLICK: The Insert Image Icon (see the image below)
This will open up a window where you can choose a few options for inserting an image:
7
For the purposes of the training session, we’ll upload an image from two different places: from the server and from the desktop. They are very similar processes and they’re both very easy. CLICK: the blue Browse Server button in the window that opened…
A new window will open allowing you to choose an image on the server (which is just another way of saying: our “Media Library”). CHOOSE AN IMAGE: For this exercise, choose the image called h12.jpg as shown in the image
DOUBLE-‐CLICK (on the image): This will choose the image you want. The Image Properties window will reappear. You can see that the image has been selected in the Preview area. In order to put it into your page, you can select the yellowish OK button:
CLICK: OK
8
The image appears in the Body area of the interface. You can edit how where the image sits on the page, or you can increase its size very easily using the WYSIWYG menu (just as you would in Microsoft Word). Try centering, left-‐aligning, etc. If you double-‐click on the image, you can also go back to the Image Properties window, which will allow you to change the size of the image. Take a look… The process to upload an image from the desktop is very similar. Instead of selecting the h12.jpg file from the list, you click the Upload button on the top-‐left.
Drupal will ask you to Choose File:
Select your image from your computer and then click the Upload button. 4. INSERTING A VIDEO: Open up youtube.com (you can go to a different video hosting service, like Vimeo, Google, etc, if you don’t want to use YouTube). Go to a video and click the “Share” button just below the video. Click the “Embed” button. The code in the box that appears can be copied from here (and pasted back into Drupal).
9
After you copy the code by either typing Control + c or Copy from the browser menu, go back to Drupal. Just below the “Body” area, click the link that says: Disable rich-‐text. You will notice that the Body displays code, rather than the normal text that was there before. Paste what you copied from youtube by either typing Control + v or choosing Paste from the browser menu. The final step is to put the Body area back into Rich-‐Text mode. Click the link just below the Body area that now says Enable rich-‐text. When the Body area loads, you will see a rectangular area in the Body that says: Frame. To make sure the video loaded properly, you can go to the bottom of the page and click the button: Save or Preview. If you followed these steps correctly, your video will load. BEFORE SAVING WE NEED TO DO THE NEXT STEP…
D. BASIC PAGE (REQUIRED AREAS): Creating (1) Titles, (2) Sections, (3) Summary
Before we save our page, there are three fields you must fill out or choose from. The image below shows these three areas circled and labeled with number 1-‐3.
1. Title *:
The text you type here will appear at the top of your webpage. Let’s look at an example on the website. For Example: If I type “Nicole Cibelli Demo” in the field, it will appear on the Page. I’ll open up a draft that’s already completed to show you…
10
2. Section *:
If you click on the drop-‐down menu you should see pages that you would expect to have editing or ownership privileges of. Choose the Section for this page based on the users you want to be able to edit the page with. If a user has access to the Section you choose, they will be able to edit the page. NOTE: This section is still in production some areas that you expect to have on your dropdown list, may not be available yet. Please make a note of those if they are obvious. 3. Summary *: Using information for search engines: Let’s take a look at e.g. Google. a. “Meta tags” and why they’re important b. How your page shows up in search engines. BEFORE SAVING WE NEED TO DO THE NEXT STEP…
PART III: BEFORE YOU PUBLISH, SET YOUR PAGE (1) BREADCRUMBS AND (2) ADDRESS
11
1. BREADCRUMBS: PLACE YOUR PAGE IN THE HEIRARCHY
What is a breadcrumb? Let’s take a look at an example page…
As in real life, a breadcrumb is something we leave behind to find our way. On the website, it’s important to do the same so visitors know how to go back to where they came from, or even jump to a related section. Let’s create our Basic Page’s breadcrumb: 1. CLICK: “Menu settings” 2. CHECK: Provide a menu link 3. PULL DOWN: Find the Parent Item See the image below to understand where to click the various areas of the menu…
12
BEFORE SAVING WE NEED TO DO THE NEXT STEP…
2. LINK YOUR PAGE
Linking your page is extremely important. This is how you actually give your page a URL or web address. For example: When you want to go to Academics, it should say: www.bloomfield.edu/academics, otherwise, it links somewhere illogical. We’ll create an address for our Basic Page right now: OPTION 1: bloomfield.edu/328947isdhak-‐ahjkflhsdf-‐59ID23.php OPTION 2: bloomfield.edu/demo/nicole-‐cibelli-‐demo Which one is easier to remember? 1. CLICK: “URL path settings” 2. UNCHECK: “Generate automatic URL alias” 3. ENTER (in URL alias): e.g. academics/library/my-‐new-‐page. For those who want to get a deeper understanding, this is for SEO (Search Engine Optimization) and what is known as “Human Readability,” e.g.
BEFORE SAVING WE NEED TO DO THE NEXT STEP… ALMOST THERE…
PART IV: PUBLISHING
13
1. MODERATION STATES: DRAFT, REVIEW, OR SEND TO PUBLISH
I like to think about this area as a place where revisions happen before publishing i.e. the point at which the Webmaster and the Marketing Department can publish the page. It just so happens that Drupal calls this section, the “Revision information” tab. As an editor or owner/editor, you can create a page, put it into Moderation State of Draft, and once you hit the Save button, it will remain in the system for you to work on anytime you want. Once you put it into Moderation State of Review, it signifies to the Owner of page (a department director, etc) that you want them to look at it. It will appear in the Review area of the Owner’s Workbench tabs. Owners of content and pages do not have to approve the document necessarily at that point, but this gives them the option within the system to know that it means they may want to take a look (unless of course they have figured out a process within their department that editors do not need to send this to a Review state (possibly by email or during the course of a in-‐person meeting). However, once the editor or owner puts their page into Send to Publish state, it signifies to the Webmaster that it should be reviewed and then either sent back to the department for corrections (if there are any to be made that the Webmaster does not have the authority to make), or it’s ready to go and should be published immediately. 1. CLICK: “Revision information” 2. UNCHECK: “Moderation state” and from the pull down, choose the state for this content.
14
NOW WE WILL DISCUSS MODERATION AND LOGISTICS…
2. A SLIGHT DETOUR: HOW TO MIGRATE CONTENT (From Google Docs)
At this point, most users have access to Google Docs, if you have never used Google Docs, please let me know so I can make sure to give you access before the end of this session. A reminder about Google Docs: it allows us to (1) store documents on the web (2) share documents with each other, and (3) edit documents in a collaborative way. 1. Copy from Doc 2. In CMS: Copy as Plain Text 3. Paste from Clipboard
PART V: ADVANCED EDITING – CREATING WEBFORMS
1. WEBFORMS: CREATING A FORM ON YOUR PAGE
15
Click Webform1: There will be 3 areas... 1. Start with creating fields. Differences between fields. Create the form... We’ll go through these and check out a few different field types. 2. E-‐mails: This is your email address (or the box you use to receive emails from people who fill out a form). 3. Form settings: Create a confirmation message. Redirection location: use Confirmation page (this will have the user stay on the page and it will show the message you’ve created). Don’t worry about tokens (you won’t need them for now). Next... Status of this form: Open -‐ means anyone can use it. Closed -‐ means you’ve removed it from the page it’s on. Submission Access: don’t change this for now. Submit Button Text: we will have a protocol for this, but for this session, use “Submit”
PART VI: W ORKBENCH – OVERVIEW OF OTHER TABS
[TAB 3] FILE LIST
[TAB 4] MY SECTIONS [TAB 5] MY DRAFTS
[TAB 6] NEEDS REVIEW
16