Passing the Word

Overview

1. Login to Drupal
2. Click on Create Content, Story
3. Fields:
   1. Title: Name of Show | Semester Year: Episode # (e.g. College Sports Report | Fall 2008: Episode 7)
   2. Tags: e.g. collegesportsreport, stateofevents, undersf, podcasts, videopodcasts, etc.
   3. Body:
      1. Type in an Introduction
      2. Video Player Embed code
      3. Podcast link code
   4. RSS Remote Enclosure settings:
      1. URL: Copy and paste MPEG4 url from video page on Internet Archive
      2. MIME Type: type in video/mpeg
4. Publish and test links

Video Player Embed code

1. Go to the video page on the Internet Archive site (e.g. http://www.archive.org/details/BECA_State_Of_Events_3 )
2. Click on the image with the Click to play Video and big green arrow.
3. Once the video has started to play, click on the menu icon with three bars at the bottom right of the video player and then click on embed this. Copy the embed code and then click on the red [x] icon to close the embed screen.
4. Paste the embed code from the Internet Archive video page into your Drupal post and make the following changes to the default embed code:
   1. autoPlay=false
   2. usePlayOverlay=true
   3. width="320" height="268"

Changes highlighted below in dark orange

Note: These changes 1) prevent the video from automatically playing, 2) add a play icon overlay, and 3) resize the video player to fit within the main body area of the web template.

Download link

Final step is to add a link where viewers can directly download the video file. (Note: You will need to update the link in the highlighted portion of the code.)

1. Copy the following code into your Drupal post below the embed code:
   <a href="http://www.archive.org/download/BECA_State_Of_Events_3/SOE3.mp4">Download</a> (MP4)
2. Go back to the internet archive page for the show you are posting, and copy the MPEG4 link located in the left sidebar of the screen in the View Movie box.
3. Paste the MPEG4 link into the URL portion of your Podcast link code (highlighted in dark orange).
4. Publish the post and make sure that the video player plays and all the links function normally.

If you notice any changes or steps missing in the process described in this post, please post a comment below. Thanks!

Template highlights

• Web Template (Stream player and sidebar widgets)
• Disqus (Comment system)
• AddThis (Bookmarking and Sharing)
• Post labels (Tags and Categories)

Web Template (Stream player and sidebar widgets)

Screenshot of Webtemplate layout.

KSFS Radio stream

Currently using 1pixelout audio player as the website audio player and M3U download link for desktop media players.

Feedburner feed publishing

Feedburner is a website service that provides advanced RSS feed publishing options and statistics.

Site links

Links to important site areas.

Program Guide

Program Guide is updated and published through a shared Google Calendar.

Network links

Links to KSFS Social networking sites (e.g MySpace).

Twitter updates

Automatically generated list of KSFS Twitter updates.

Google Friend Connect

Allows for visitors to post messages to the site using Google, Yahoo, AOL, or OpenID accounts.

Contact Info

Added using Blogger HTML page element.

Monthly Archives. Blogger Layout widget.

Automatically generated list of monthly archive links.

Site Search

Standard site search form.

Categories (Post Labels/Tags)

List (or Cloud) view of post categories/labels.

Blogroll

Lists most recent update from favorite websites.

Followers

Allows Google and Blogger users to follow the KSFS site.

Back to top

Disqus (Comment system)

The Disqus comment system is a web service that allows visitors to post a comment using their preferred online identity (i.e. Facebook, Twitter, etc.). Comment activity is also published to their user account and shared with their network connections.

Screenshot of Disqus comments system.

Disqus: Leave comment using Facebook ID

Example of user logged in to Disqus comments using their Facebook identity.

Screenshot of Facebook user logged into Disqus comments.

Disqus: Leave comment using Twitter ID

Example of user logged in to Disqus comments using their Twitter identity.

Screenshot of Twitter user logged in to Disqus comments.

Back to top

AddThis (Bookmarking and Sharing)

Allows users to easily share or bookmark an existing blog post.

Screenshot of Add This widget (Bookmarking and Sharing).

Back to top

Post labels (Tags and Categories)

Labels can be used to categorize posts by contributor and/or semester (e.g. spring2009, hiphoploveletter). Allows for category views.

Screenshot of Category tags displayed below post.

Back to top

Updated Profile Content Type

Image: Profile landing page and Directory Quick links sidebar block

New data fields (i.e. Advising Duties, Office Hours, etc.) have been added to the profile content type. The addition of these fields allows for improved search engine indexing, data entry, sorting and display, as well as improved layout consistency.

New data fields (by group):

Name

• First
• Last

Job

• Title
• Areas of Expertise
• Advising Area
• Teaching Area

Contact

• Office
• Phone
• E-mail
• Web
• Office Hours

New Position Category and terms

The updated Position category list terms specific only to the profile content type.

Updated Profile List Views

Image: Default Faculty and Staff listing. Link: http://beca.sfsu.edu/faculty-and-staff

All directory views are built and sorted from data contained in the profile content pages. This allows for greater flexibility in content filtering and pre-sorted views. In addition, a fullscreen directory view, that is not confined by the layout limitations of the web template, was created as a resource for users who may need to print or visually scan through the entire directory.

Compact List view (490 pixel maximum width, 3 columns max)

Image: Filtered list view. Note table headings. Link: http://beca.sfsu.edu/faculty

• Faculty and Staff - Lists all currently published department profile pages.
• Faculty Advisers - Lists all currently published Professor, Associate Professor, Professors Emeritae, etc. profile pages.
• Lecturers - Lists all currently published Lecturer, Graduate Assistant, etc. profile pages.
• Staff - Lists all currently published Office Manager, Office Assistant profile pages.

Expanded Directory view (Fullscreen, liquid-layout, no column count limitation)

Image: Expanded Department Directory view. Printer-friendly. Link: http://beca.sfsu.edu/directory

The Directory provides an expanded table view of all currently published Faculty and Staff profile pages with all available profile fields.

The updated Directory view is an expanded table view of all profile data generated and updated from profile data in the Drupal CMS. The Directory view is where you will want to direct anyone who needs to quickly scan or print the department directory.

Profile Pages

Image: Profile page. Link: http://beca.sfsu.edu/faculty/376/scott-patterson or http://beca.sfsu.edu/node/376

Profile pages are the building blocks for the list and directory views. They are also optimized for search engine indexing.

Office Hours

Office hours have been added as an editable text area within each profile page. Once data has been entered into a field, the field heading and content will automatically displayed in the published profile page.

Empty fields

Empty fields and their corresponding headings are not displayed. So if a profile doesn't contain an email or phone number, an empty content heading will not be displayed on the profile detail page.

What about the Google Doc? What's the reason for the change?

The Google spreadsheet was a temporary solution that was not fully supported the Drupal Content Management System. Updates in the Google Doc did not update the profile page and vice-versa. If a user found a profile page through a Google search result, data from the Google Doc would not appear on the profile landing page. Or, if the user landed on the Directory page previously generated from the Google Doc, they would not be able to click through to the faculty profile.

Also, because the data from Google Docs had to jump through a number of hoops before being published to the web, the output was susceptible to bugs.

Drupal on the other hand, is being used exactly for what it was designed for--to manage and publish website content.

Going Forward

Image: Alternate fullscreen view listing only faculty and lecturers. Link: http://beca.sfsu.edu/officehours

These changes will prepare profile data to be shared with the College website in a master web directory. Also, additional custom views (e.g. like office hours) can be easily built as needed.

Update and editing Tips

1. Go to Administer > Content
2. Display only the profile content type by selecting the Type radio button below Show only items where and click Filter.
3. You can then refine the filter by category term (e.g. Lecturer) or published/not published.
4. Click on a name to edit or update. So you don't have to constantly re-filter the content administration screen, try opening the page you want to edit in a new window .

Easy to Remember/Say URLs

• Directory: your site address /directory
• Faculty Advisers: your site address /faculty
• Lecturers: your site address /lecturers
• Staff: your site address /staff

second paragraph

1. Managing a Web Site using the SF State Web Template Design and Dreamweaver Web Template (DWT)
   June 26, 10 a.m. to noon in ADM 103. | RSVP Now
2. Overview of the SF State Web Template Cascading Style Sheets (CSS)
   July 10, 10 a.m. to noon in ADM 103. | RSVP Now

To get future updates about the web template program, join the SF State Web Development e-mail list.