Drupal Demo

Hi everyone, this is Rose Ziech, Web Services Specialist for South Central Library System. Thank you all for coming to the Drupal Demo webinar. I’ll be presenting more information about what Drupal is, why SCLS is offering it for member libraries to use, and how it will affect your library’s web presence. And I’ll show some basics of how to use it.

What is it?

So, to begin, what IS Drupal? Let’s start with a story about that weird name. Drupal started as the personal project of a Dutch college student named Dries Buytaert. He created an online system that he and his friends used for posting news and messages for each other. He wanted to call it “dorp.org” after the Dutch word for “village,” but as the result of a typo when he was registering the domain name, he got “drop.org” instead and decided to keep it. As the site got more popular, he released the software as “Drupal” after the Dutch word for “drop.” Today Drupal has grown far beyond its creator’s original personal website project to be open source software developed by a worldwide community of individuals and organizations. The little blue creature in the bottom corner of the screen is the Druplicon, a little droplet-of-water mascot type symbol that is used within the Drupal community. The droplet-of-water reference also explains the blue color used in many Drupal projects, including this presentation!

What is Drupal?

To get more serious, Drupal is a content management system -- in other words, it’s a tool for building dynamic web sites. And when I say “dynamic,” I don’t just mean visually engaging and frequently updated, though it should be that -- dynamic is also a technical term. Bear with me on the jargon, because I’m going to tell you how Drupal can save time with maintaining your website. The components for each page of a Drupal-powered website are stored in a database on the web server, and when a visitor comes to the website, the Drupal software springs into action to collect up all the components and assemble them into a web page for the visitor. That sounds like a lot of complexity and work, but it also opens up some sweet possibilities -- like the ability to take select parts of a page out of the database and reassemble them in different ways.

Show me something dynamic!

To give a concrete example, let’s play this out with something many libraries want to communicate via their websites -- what’s happening at the library, and when and where and who’s invited. We start with a simple form where you put in all the info for each upcoming event. Drupal stores them all, and we can give it instructions for how to reassemble it into an event calendar, or a list of events appearing on the homepage, or a list of children’s events appearing on the children’s page, or an RSS feed that patrons can subscribe to, or all of the above. You post the info in one spot, and Drupal takes care of putting it all over the place and then removing it when the event is over. It helps get the word out on the website about your programs without cutting too much into the time you need to spend developing those programs.

Why Drupal?

I think the calendar example is pretty persuasive, but there are other reasons why Drupal is a strong choice for handling websites. Let’s imagine our goals for the software SCLS will support for library websites here at the top of this mountain. We want it to be easy for library staff to use, we want the software to support a wide range of different modern features that staff and patrons expect, and we want multiple staff to be able to use the software without having to compete for workstations or pay a lot for software licenses. SCLS has been supporting Contribute and TypePad for maintaining websites, but they both fall short of our goals. There is no magical software that will land us directly on top of that mountain, but Drupal will get us a lot closer. It has a lot of attractive features for managing websites, like user administration, publishing workflow, discussion capabilities, news aggregation, XML/RSS publishing, and a metadata system for using controlled vocabularies (which you can just think of as “tagging” if the words “metadata” and “controlled vocabularies” don’t mean anything to you). SCLS hosts websites for more than 40 libraries, and Drupal is customizable enough to meet a wide range of needs. Other library systems in the state use it for their library websites, and it has a good track record for meeting library website needs.

SCLS Website Services + Drupal

If that sounds cool, but intimidating, please don’t panic -- we’re not going to make you climb the mountain all by yourself. We’ve done a year of research and due diligence and testing to come to the conclusion that Drupal is the new platform we’ll support for building and maintaining websites. We’re proposing that we begin migrating the library websites we host to use Drupal and gradually phase out support for Contribute and TypePad. We’ll give you training on the most basic aspects of how to use Drupal to get you started, and we’ll provide more access and training over time, as you need or want more control over the inner workings of your site. And by moving to Drupal all together, you’ll have a community of peers who are sharing the same experience. By the same token, we’ll only have one platform to support, so if we customize something or develop something for one website, we can offer it for other websites that might benefit from the same feature or technique.

What does Drupal mean for you, personally?

What does the view look like up near the top of the mountain? If SCLS hosts your library’s website, designated staff at your library WILL have access to make changes and updates. I know in the past purchasing website editing software has been a barrier for some libraries, and you’ll be able to use Drupal without purchasing additional software for your workstations. When you use Drupal, you’ll do it through a web browser like Firefox or Chrome or Internet Explorer. You can have multiple people editing the website at once on separate computers. The Drupal software and those hardworking dynamic databases will be installed on the SCLS web server, and we’ll manage software upgrades to Drupal and its modules. And as I mentioned before, we’ll provide training for how to do basic updates and maintenance.

Demo time

If there aren’t any questions, I’ll jump into the demo part of the webinar, which I imagine is the reason most of you are here today. For the demo I’ll be showing you a copy of the real Lester Public Library of Rome website, which is already using Drupal on a day-to-day basis. It’ll look like the real website, but none of the changes I make will show up on the real version. I’ll show you how to access the staff side of Drupal, give you a little tour of the interface, show how to edit a page, how to add an event to the calendar, and how to change a menu link.

So let me switch to a browser window where I have the demo site open. It says Lester Public Library of Rome all over the place, but the address bar has a different URL from the real site. If you look around on the page, there isn’t any visible place to access a staff site -- there isn’t a link or a login form or anything that would outwardly indicate that this site is built with Drupal. To get logged in we’ll use a special separate page that you can find by typing “/user” after the address. Now we see a login form.

Access to Drupal is based on user accounts. When you want to update the website, you’ll log in through the user page on your site with a username and password. So let me log in here.

As soon as I’m logged in, the screen changes. In the main portion of the page are some tabs that lead to parts of my user account, where I can reset my password, change the email address associated with my account, and manage other things related to my account. I’m not going to go into those in too much detail today.

Instead I want to draw your attention to the toolbar that has appeared at the top of the page. If you recall from a minute ago, that toolbar didn’t show up when I wasn’t logged in. Each of these links in the toolbar lead to different parts of the website that you can manage. Different accounts can have different levels of access to editing a website, so depending on your role, you might have more or less links up in the toolbar based on what you’re supposed to be taking care of in here.

Another thing I want to highlight here are all these links related to “content.” Content refers to the “meat” of a page, usually the part that appears in the main panel. Right next to Content we also have Structure, which deals with how a site is organized. Content and Structure are the bread and butter of Drupal. Anybody who works on a Drupal site will basically have them with every meal. In the far right corner, we’ve also got a link back to my user account page and a link to log out. The gray bar has some shortcuts to things you might need to do frequently.

So let’s attempt a real edit on a page that already exists. The simplest way to do this is to browse to the page that you want to edit, and click on the edit tab that appears under the page title when you’re logged in. The editing screen opens up as an overlay -- you can sort of see very faintly in the background that there is another page open underneath the editing form, and you can also see up in the address bar that it still has the original “using-library” part, but it also has stuff added onto the end of the address referring to the overlay and the fact that we’re editing the page.

So the page we were just looking at, looked like a pretty normal web page, but now that we’re in the editing window, things are broken apart into separate boxes, or fields. There’s a field for the title, a field for the body, which is the big chunk of text that makes up most of the page, and there are tabs at the bottom to control different aspects of how the page gets published. And we have a save button at the bottom.

So let’s start editing. I’m going to show some basic changes you can make with the editing toolbar here in the body field. We’ve got all these buttons to do different things like format text and add links and images. You can also switch between this rich text view and source code view, so you can directly alter the HTML code that appears in the body if you want to. I’m going to show how to apply formatting to text, how to make a link, and how to add an image.

Apply bold & italic formatting to books movies and more

Make a link to library online -- You may alsoreservealibrarycomputer.

Add an image of a computer, resize it, and position it -- image is in Desktop\drupal demo images

Those are the edits I wanted to make for this page, I think I’m done, so I’m going to scroll down and hit save. The stuff in the tabs was set when the page was originally created, and for now it’s all correct, so I’m going to bypass it and simply hit save, which will immediately publish all the changes. If I decided this round of changes wasn’t successful and I didn’t want to publish them, I could simply back out with the back button, or close the overlay to quit editing without saving anything.

Next, let’s go take a look at the calendar. Let’s imagine we have an upcoming event that we’d like to put on here. We’re going to be starting from scratch to add a new event rather than editing something that already exists. To do this, I’m going to use the “Add content” shortcut link. Here I have choices of different types of content that I could create. To create a new calendar event, I’ll choose Event/Program. This should look somewhat familiar after editing a pre-existing page, but there are some different fields that are very specific for events. So this is another operation where we just fill out the form.

Event title: Family Storytime

When: 9/15/2012, 10:00-10:30

Where: Children’s area at the library

Description: Lipsum filler text

Event type: Adult, children’s, teen

Contact: Please contact the library if you require special accommodations to attend this program.

Tabs: no need to change anything here because the presets are all OK.

After saving, the new event will show up on the calendar. If you click on the link from the calendar, it’ll lead to a page displaying all the event info. When I set up this site, I also gave Drupal instructions for additional things that should happen with every calendar event to take all the information we just entered and reassemble it in other places on the website. So if we take a look in some other spots, we’ll also find that this event has been published to the homepage, and to some listings of programs for different audiences, and in RSS feeds for those audience pages.

Another type of website change you might like to make is to change or add links to the menus that might appear on your site. The menus I’m talking about are typically shaped like a row of links near the top of the page or a list of links in a sidebar. These menus are like the main highways for taking visitors from place to place on your website. For example, maybe the library has added a database and wants it to appear in this Books, Movies and More menu. To add that in, we’re going to use that Structure link in the toolbar that I mentioned earlier. Next I’ll click Menus and select the main menu. Just to be sure it’s the right one, I’ll click on “list links,” and I can see that this list does correspond with the menu bar that visitors see. This site uses drop-down menus, so there are indented items showing the hierarchy of what appears in the drop-down for each top-level menu link. For this site, I want to add a link to NoveList Plus in between Literature Resource Center and More Online Resources. There is a shortcut link to do this at the top of the page. And oh look, there’s a familiar-looking form to fill out.

Menu link title: NoveList Plus

Path:

Skip Description and go to Parent link, pick Books movies and more

Weight refers to the position in the list. Low numbers weigh less, and float to the top. Bigger numbers weigh more, and sink to the bottom of the list. But there is an easier way of reordering the link once it’s added to the right menu and saved. (save)

Here’s the easy way to put this link in the right position in the menu. This list is drag-and-drop so you can pick it up and drag it to the position where you want it. And then we have to save the new link order.

Editing existing pages, creating new events, and changing the menus on your site is just a small part of what you can do with Drupal, but they’re some of the more common tasks you might find yourself doing as part of your site’s day to day maintenance. The demo today is just a peek at what it’s like to use Drupal to maintain your website, and we won’t expect you to remember all of it because future training will cover all these concepts and more.

Questions about the demo?

What next?

If you want to use Drupal for your library website, please fill out our survey to indicate your interest. We’ll schedule migrations to accommodate your scheduling needs, with the goal of getting them migrated in the remaining months of 2012 and into the first quarter of 2013. We think Drupal is going to be a valuable tool and can’t wait to start making it available for you!

Questions?

Thank you!