1 Alumni Site Builder Leader Guide by ps94506


									Alumni Site Builder™ Leader Guide

The MIT Alumni Association offers a web-based application in the Infinite Connection that automates the time-
consuming and often complicated task of Website management for alumni volunteers.

Alumni Site Builder™ allows your group to maintain a robust web presence including photos, images, and
downloadable documents without the need for HTML programming. Your group can customize a banner heading
or select from eleven MIT scenes. If your group is using SmarTrans™, the Association's tool for collecting dues
payments and managing events online, links to your SmarTrans™ payment forms can be integrated into your
Alumni Site Builder™ Website. Additionally, event listings created in Alumni Site Builder™ populate the
Association's Events Calendar at: https://alum.mit.edu/calendar/ViewCalendar.dyn (groups may request not to
have events included by emailing alumcalendar@mit.edu).

This guide is designed to simplify the learning process so that you can get started right away. Remember, if you
need help or have questions, let us know! Write to asbhelp@mit.edu or call the dedicated customer service staff at
(617) 452-2500.

Note: This guide is provided as a link on the Site Management page of your Alumni Site Builder™ Website (top
      right). It is downloadable as a PDF document and requires Acrobat Reader to open.

Site Setup
If your club or group is interested in using Alumni Site Builder™ (ASB) to manage your website, please contact
asbhelp@mit.edu to get it set up.

Site Overview
Each Alumni Site Builder™ Website has five sections in which to place content:

    •    Home - a place to highlight information about your group and spotlight timely information.

    •    About - includes a list of your officers and, in club and group sites only, a section on volunteering. The
         About section can be used to describe the history of your group, your goals, and details about key
         volunteers and officers.

    •    Join In (specifically for class and FSILG Websites) or Membership (for clubs, affinity groups, and Enterprise
         Forum chapters) - this section can be used to highlight volunteering and participation for your group. It
         can include a link to a SmarTrans™ dues collection form.

    •    News - a section where groups can place announcements or news stories, describe past events, and include
         board minutes. This section includes a simple photo album.

    •    Events - a place to announce upcoming meetings, reunions, or events and can include links to
         SmarTrans™ event registration forms.

Access Rights
There are two levels of access rights for volunteers in Alumni Site Builder™. When setting up your site, the
Association staff person working with you will need to know which group officers should have what rights:

Edit Privileges   Any officer in the group may be granted access to create and edit any or all of the five sections of
                  the Website.

All Privileges    Webmasters or other officers designated by the group may be granted Publish privileges for any
                  new or edited item within the Website.

Table of Contents

Section                                             Page

Set Up Wizard                                        3
    • Home                                           3
    • About                                          4
       -Introduction                                 4
       -Officers                                     4
       -Volunteering                                 4
    • Join In or Membership                          5
    • News                                           6
    • Events                                         6
    • Review and Publish                             7

Site Management                                      9

 Edit Section                                        9
  • Managing a Section of Your Website               9
  • Creating or Editing an Item on Your Website      10
  • Join In/Membership (add a link to SmarTrans™)    14
  • News                                             14
  • Events                                           15
  • Create a New Event                               15
  • Add a SmarTrans™ Event                           17
  • Contact Us Form                                  17
  • Publishing Items                                 18

 Banner Image Upload                                 19

 Quick Links and Alumni Association Content          21

Public View of Your Website                          24
   • Officers page                                   24
   • Group Event Calendar                            24

Site Set Up Wizard
To shorten the time in setting up your group's Alumni Site Builder™ Website for the first time, we have created a
six-step Site Set Up Wizard. If you are not prepared to input section header content in all five sections at once,
you may skip the Wizard and create your group's Website one section at a time by going to the Site Management
page. The Site Management page is the first page you will see after clicking on the URL for your group's site
(provided by Alumni Association staff) and then clicking on the pencil icon in the bottom right corner.

Note: Required fields are indicated with a red asterisk.
Note: Only officers with Publish privileges have access to the Wizard.

Blocks of content on your Website pages are organized in Alumni Site Builder™ as "items." While in the Site Set
Up Wizard you will only create a first paragraph for each section of the Website. When created outside the
Wizard, each item may have:

    •   a bolded heading (system default);
    •   a block of text that can accommodate simple HTML such as bold, italic, line break, underline, and
    •   an affiliated photo or image (file size limited to 40k or less; image configuration will be sized to 400 x 300
        pixels if the one uploaded is larger);
    •   an affiliated document that may be downloaded by viewers from your Website. This document may be a
        Word document, Excel spreadsheet, Powerpoint slides, or a PDF file (limited to 2MB or less); and
    •   each item heading can be made into a hyperlink to another Web page.

Note: You may not be given the opportunity to include heading hyperlinks, uploaded documents, or photos in
      each section of the Wizard, but all of these additions may be made using the Site Management tools.

Step One: Home
The first section of the Wizard creates the first paragraph on the home page for your group's Website (see Figure

                                                                                      Figure 1

We have included placeholder text in the Item Text box to get you started and give a sense of the type of content
frequently found on alumni group sites. Edit as necessary or type over the placeholder text.

Use the Browse button to select an image from your own computer to include with this item. If the file is larger
than 40k, it will be rejected. Include a description of the image for visually-impaired web users.

By clicking Continue, you will save your work and move to the next section, About.

Step Two: About
The About section of the Website is a place to include information about your group, its history, and to spotlight
particular members. About is divided into three sections for clubs and Affinity groups, and two sections for classes,
ILGs and Enterprise Forum groups:

    •   Introduction (consider this the "About Us" section) - This descriptive paragraph will always remain at the
        top of the Introduction page, with additional items added below;

    •   Officers (not available for Enterprise Forum groups) - this section is a list of officer roles for your group
        with the names of each volunteer listed as a hyperlink. The hyperlinked names take anyone interested in
        finding out more about the officer to the individual's record in the Online Alumni Directory. This allows
        you to provide contact information for your officers without having it be public (and available to
        spammers). Login to the Infinite Connection is required to access alumni records. Information on this
        page is database-driven and will display officer names provided by your group to Alumni Association staff;

    •   Volunteering (not available for Class and FSILG Websites) - this section should include such topics as
        volunteer "stories," open volunteer positions, information about how to volunteer, and resource materials
        for volunteers.

The Introduction section header cannot be customized. It will always say "Introduction." Text in the Item Text
box will most likely be descriptive text that you leave on the page about your group, while items below the
Introduction section will often be updated. Edit our placeholder text or type over as necessary (see Figure 2).

                                                                                       Figure 2

The Volunteering section appears on the same page as Introduction in the Wizard, but is found via a link on the
right menu in the actual Website. This link appears only on clubs and groups Websites.

By clicking Continue, you will save your work and move to the next section, Join In (classes/ILGs) or
Membership (all other groups).

Step Three: Join In or Membership
MIT undergraduate classes and FSILGs have Join In as the third tabbed section of their Alumni Site Builder™
Website. Clubs, affinity groups, Sloan clubs, and Enterprise Forum chapters have a third tabbed section called
Membership. Both sections represent an opportunity for the group to describe ways to be involved – either by
indicating dues information and membership levels or by promoting a class gift or scholarship fund (see Figure 3).

The page contains an open text box and the ability to upload a related document as the previous sections did. The
text box will create a descriptive paragraph for this page under which additional items can be created. This
paragraph will always remain at the top of the page.

In addition, the page offers a check box option to provide a link to a SmarTrans™ dues payment page. The officer
simply checks the box and an linkable icon will be appear on the Alumni Site Builder™ Join In/Membership page
for his group.

                                                                                            Figure 3

By clicking Continue, you will save your work and move to the next section, News.

Section Four: News
The News section is a place to include stories about the group that aren’t related to upcoming events for which
you have listings in the Events section. Suggestions could be: stories about interesting alumni, updates on giving, a
progress report on a scholarship recipient, and a recap of a past event or board meeting (see Figure 4).

Use the header box, heading link URL, and Item Text to include the first News item in your site. The heading
link URL will create a hyperlink of the item header.

By clicking Continue, you will save your work and move to the final section, Event.

                                                                                             Figure 4

Section Five: Events
The Events section works similarly to About: Introduction and Join In/Membership in that it includes an
introductory descriptive paragraph that will remain at the top of the page, no matter what items are added. This
paragraph should describe the type of events your group holds, a person to contact if someone wants to initiate
planning an event, or any information you want the public to know in the instance that there are no current event
listings (see Figure 5).

Note: This section accepts up to 500 characters.

                                                                                         Figure 5

Section Six: Review and Publish
Upon saving changes in the Events section, you will come to a Preview of the sections you have now created.
Even though they will appear on distinctly separate pages on your site, the Preview page will show them separated
by black borders which represent sections. The name of the section appears in the top right corner of each box
(see Figure 6).

                                                                                 Figure 6
You are given the opportunity to edit each section before Publishing in the Content Summary. Should you decide
to change or add photos or documents to any of the five sections, simply click Edit in that section and be taken to
an Edit page for that section.

Note: If the Wizard is exited before the content is published, it will appear as a link on the Site Management

If everything on the Preview page appears as you want it to, click Publish. If you click Cancel, you will not
complete the Publish at this time. All of your entries will be saved and will appear in their respective sections the
next time you go to the Site Management page. When items are available for publish, each of the sections that has
a pending item will appear in the Edit Section with two red asterisks after it.

Note: To view the public view of what you have input/created at any time, click on the banner heading on any
      page in the Site Management/officer area and it will take you to the Website.

Site Management
There are three sections on the Site Management page from in which you can modify and add to your site. They

    •   Edit Section
    •   Banner Image Upload
    •   Alumni Association Content or Quick Links

Edit Section
The top portion of the Site Management screen is where you will go to create, edit, and publish items. Each
section is edited individually. In each new item, a photo and/or document can be added and the item heading may
be made a hyperlink to another Website (see Figure 7).

Note: If you are an officer who does not have Publishing rights, you will only be able to create and edit items.
Note: If you are an officer with Publish rights, the new/edited items ready for publish will be indicated by
      section with two red asterisks.

                                                                                                       Figure 7

Managing a Section of Your Site
Before creating or editing an item, you will choose which section for which you want to add content. Click on
the section name in the Edit Section portion of the Site Management screen. This will bring you to an interim
screen where the site section (Home, About, Join In or Membership, News, and Events) can be managed. Each of
the current items will be listed by its heading with task options listed below and to the side of the heading (see
Figure 8).

                                                                                             Figure 8

Each item is delineated by a black border. You made Edit, Delete, Create an Item Above, Create an Item Below,
Move Up, or Move Down each item on the page.

1)      Edit – this function allows you to make changes in the heading, text, photo, or document associated with
        a particular item.

2)      Delete – permanently remove the item from your group’s Website.

3)      Create an Item Above – create a new item on this page that will appear above the item in which you
        clicked the task link.

4)      Create an Item Below - create a new item on this page that will appear below the item in which you
        clicked the task link.

5)      Move Up – reorder the items currently on the page by moving the one for which this task is selected
        above the item directly above it. This task will only appear if there is more than one item on the page.

6)      Move Down - reorder the items currently on the page by moving the one for which this task is selected
        below the item directly below it. This task will only appear if there is more than one item on the page.

Creating or Editing an Item on Your Site
The process for creating an item in the Home, Introduction, Volunteering (clubs and groups only), Join In or
Membership, and News sections are identical and the screens look alike except for the heading. On each Create
or Edit Item page, you can add or change the heading for the item, make the heading a hyperlink, create or edit
the content text, and upload an associated photo and/or document (see Figure 9).

                                                                                 Figure 9

1)   Heading – what do you want the story or item called? The heading will appear in bold on your Website.

2)   Heading Link (URL) – would you like the heading to be a link to another web page? An example of how
     you might use this would be to include a short paragraph of a story on your Website with the heading
     linking to the full story elsewhere on the internet. You could include a short blurb about your classes’
     reunion activities and make the heading a link to your class page on the MIT Alumni Association Website.

     When you utilize this feature, the heading of your story will appear in bold and underlined on your
     Website. This task is optional.

3)   Image – if this is a new item or you are editing an item that does not have a photo uploaded, you have the
     opportunity to upload one from the internet or your own hard drive. This task is optional. The image must
     be in .jpg, .gif, or ,png format and not over 10MB in size. If the file is more than 300 pixels in width by
     400 pixels in height, it will be resized to fit these dimensions.

     If you are editing an existing item with a photograph, you will have the opportunity to save it, replace it,
     or remove it.

4)   Image Description – use this field to name the photo or describe its contents. The purpose of this is to
     provide accessibility to sight-impaired internet users.

5)   Item Text – this is where you type (or paste) your story. You may include up to 4000 characters in this
     field and it can be formatted with simple HTML.

     Note: If the story is pasted from a text document that has been formatted, Alumni Site Builder™ will
           not maintain your formatting. If you wish to have line breaks, bold, or italics, you will need to
           include them as simple HTML.

     Simple HTML Tips
     HTML code can be used in Item Text field. For bold, include <b> and </b> before and after the text to
     be bolded. For italics, the characters are <i> and </i>. If you wish to include a paragraph break, use

     Links to other web pages and "mailto" links can be used here. Specifically, an anchor tag (<a>) may be
     used with the "href" attribute. The value for that attribute must start with "http://", "https://", or
     "mailto:" The closing anchor tag (</a>) is also needed. Examples of acceptable links include:

     <a href="http://alum.mit.edu">MIT Alumni Association</a>
     <a href="https://www.amazon.com">Amazon.com</a>
     <a href="mailto:jdoe@alum.mit.edu">email Jane Doe</a>

     The information after the web address will appear as the name of the hyperlink.

     Auto-formatting to Turn Off or Reformat
     - straight quotes with smart quotes
     - ordinals with superscript
     - fractions with fraction character
     - symbol characters with symbols
     - the "Replace text as you type" option, since that replaces text such as (C) to symbols

6)   Related Document – is there a Word, Excel, Powerpoint or PDF document that relates to this story?
     Examples would be a report on the treasury of the group with a spreadsheet of budget projections
     uploaded or a story about a membership drive in which participants can download a form and mail in with
     a check. This task is optional.

     Browse the documents on your hard drive by clicking Browse and selecting the document to be uploaded.

7)   Document Description – enter a description for the document you’ve just uploaded. This description will
     be the name of the link end users will use to download the document.

8)   Click Save. You are prompted on the next screen to "Submit for Publish" (see Figure 10).

                                                                                                 Figure 10

9)      The Submit Page for Publish screen is a text box that creates an email sent to the officers with Publish
        rights. If you do not choose to complete this step, your work will be saved, but officers with Publish rights
        will not know there is new content until they go into the Site Management screen and see red asterisks
        (see Figure 11).

                                                                                               Figure 11

Note: If you have Publish rights, the Save function will take you back to the Edit screen for the section. You
      will be prompted to Preview and Publish.

Join In or Membership
The Join In or Membership page is unique in that it is integrated with the SmarTrans™ application. If your group
is using SmarTrans™ to collect dues payments, you may provide a link to that payment screen on the Join In or
Membership page of your Website.

On the Create or Edit Item page in the Join In or Membership section, you will have the standard fields for
creating an item. Additionally, there is a check box with the text “Include Join or Pay Dues Online Now!" button
(sample on right) that links to SmarTrans™ dues form.” Next to this text and checkbox is a red circle.

If the box is checked, the red circle will appear on your Join In or Membership page. The circle is a live
hyperlink to your SmarTrans™ dues collection form.

Note: The dues collection form must be created in SmarTrans™ before clicking the box within Alumni Site

Creating and Editing items in News works just like all other sections. The unique feature of News is the Photo
Album. If you wish to edit or add to the Photo Album, you will click on Edit Photo Album from the Edit News

1)      The next screen will indicate whether or not there are photos in the album. Click Add Photo to add.

2)      Use the Browse button to look on your hard drive or on a photo Website on the internet for the photo
        you wish to upload.

3)      Text from the Photo Description field will provide a caption for each photo on the public Website. Enter
        descriptive text and click Save. If Cancel is clicked, the photo will not be saved.

You may upload up to 10 photos in your album. If you wish to change the photos at any time, choose the Delete
button next to any photo and then go through the process described above to add a new one. Once a photo has
been deleted, it is removed from your Website (see Figure 12).

                                                                                           Figure 12

The Events section is unique in that it is integrated with both the SmarTrans™ application and the MIT Alumni
Association Events Calendar. The main Events page will include a fixed paragraph of description at the top of the
page (Event Page Descriptive text). If the Wizard was completed, this text will already be on the page. If not, it
can be created by clicking on Events in the Edit Section area (see Figure 13).

On the Edit Events page, you have the option to Add Event (new) or Add/Edit the Event Page Descriptive text.
When the Events page displays on the Website, it will include the descriptive text on the top, followed by an
Event List. The list will display events in chronological order with nearest date first. This list is made up of short
descriptions (less than 250 characters), date, and a photo if uploaded.

The heading for this event is a hyperlink to the Event Detail page. This page will include the photo and long
description of the event, plus contact information for the event planner, location, time and a related document, if
uploaded. Any event added via the Add Event function will automatically populate the MIT Alumni Association
Events Calendar (http://alum.mit.edu/ne/calendar/Index.dyn). If you do not wish an item to appear in this
calendar, send an email to alumcalendar@mit.edu.

                                                                                                         Figure 13

Create a New Event
To create a new event (not related to SmarTrans™) in Alumni Site Builder™, click on Add Event from the Edit
Events page and then click on Create A New Event (see Figure 14). Follow the instructions below to create a new

                                                                                        Figure 14

1)   Event Contact Information - this is the contact person for the event, his or her phone, and email.

2)   Event Information - enter the name of the event. Upload a photo, if applicable. This might include a
     photo of your venue or speaker. Remember to name the photo by using the Image Description field.

     Complete the Short and Long Description fields. The short description will appear on the main Events
     page on your Website. This should be a “teaser” to elicit interest in more detailed information. The long
     description will display if the name of the event is clicked on. It should include details such as speaker
     biography and the description of venue or activity. You may include a hyperlink to a map in this section.
     See linking instructions in number 5 of Creating or Editing an Item on Your Site on page 12.

     Add the date/time of the event. The Publish Date is the date you want the event to appear on your
     Website. If your group plans far in advance, you may not wish for the item to appear until a month or
     two before it is scheduled.

3)   Attach Related Document – upload a document if applicable to your event.

4)   Event Location – include the name of the location, street, city, and state.

5)   Save the event. If you do not have Publish rights, you are prompted on the next screen to "Submit for
     Publish" (see Figure 11).

6)   The Submit Page for Publish screen is a text box that creates an email sent to the officers with Publish
     rights. If you do not choose to complete this step, your work will be saved, but officers with Publish rights
     will not know there is new content until they go into the Site Management screen and see red asterisks.

Add a SmarTrans™ Event
If your group is using SmarTrans™, events from that application are automatically linked to Alumni Site
Builder™. If you wish to include those events on your Website, click on Add Event from the Edit Events page.
Any events created in SmarTrans™ will appear on the next page, Add a SmarTrans™ Event to your Events Page
(see Figure 15).

                                                                                                   Figure 15

Select the event from the list that you would like to publish on your Website by clicking on the Add to Event
Page link. You will be brought to a page with a summary of your SmarTrans™ event on the bottom half of the
screen and fields for entry on the top half. The event description from SmarTrans™ will serve as the Long
Description for this event.

Enter a Short Description to appear on your main Events page and upload any applicable photo or document. Save
the event. If you do not have Publish rights, you are prompted on the next screen to "Submit for Publish" (see
Figure 11).

Contact Us Form
On the bottom of each page of your Website in the far right corner is a Contact Us button. This link takes the end
user to an email form used to contact the group. These emails will go to all officers with Publish rights the Primary
contact for the group and any other officer names you have provided for this purpose to the ASB Help Desk Staff.

To set up the Contact Us form, click on Contact Us in the Edit Section area and follow these steps:
1)      The item will display with the system-default text. Click Edit to customize the message text for your
        group. This message will appear above the top of the email fields the end user will see. You can use the
        message text to suggest reasons why someone would want to get in touch (such as volunteering) and to
        create expectations on response time.

        Note: The text box on this page will accept up to 500 characters.

2)      Save when finished editing. If you do not have Publish rights, you are prompted on the next screen to
        "Submit for Publish" (see Figure 11).

3)      The Submit Page for Publish screen is a text box that creates an email sent to the officers with Publish
        rights. If you do not choose to complete this step, your work will be saved, but officers with Publish rights
        will not know there is new content until they go into the Site Management screen and see red asterisks.

Publishing Items
If you are an officer with publishing rights, you will receive an email each time new items have been created or
others have been edited, unless officers with edit/create rights do not complete this step. When you log in to the
Site Management page, each of the sections for which there is new content will appear in the Edit Section area
with two red asterisks after the section name.

Click on the section you wish to Preview and Publish. You may Preview/Publish or Discard Changes. Each
section must be published individually. When changes are discarded, they are not saved.

Banner Image Upload
The banner image is the image that runs horizontally across the top of the Website. The banner lets the public
know whose site they are on. You have two options with regards to banners. On the Site Management page,

    •   Select from one of eleven images of the campus we have created by clicking on the “existing banner
        styles” link under Banner Image (Figure 16) and we will customize it with your group's name or
    •   Create an image of your own and upload it to the Website.

                                                                                                    Figure 16

Choose a Banner Image
If you wish to use one of our images, click on the Existing Banner Styles link under Banner Image on the Site
Management page.

                                                                                                      Figure 17

On the Choose a Banner page (Figure 17), scroll down and review the options. When you have decided, indicate
your selection by clicking on the radio button next to the descriptive banner name. By clicking Submit, you will
send an email to Alumni Association staff with your choice. The banner will be customized with your group name
and added to the site within 3 business days.

Upload a Banner Image
If you have Photoshop, Quark, or another design program and can create your own, size the image to 116 pixels
in height and 736 pixels in width. Any image within 5 pixels of these dimensions will load successfully. If your
image does not conform with the site's size requirements, it will be rejected. Remember to include your group
name somewhere within the image.

Click Browse and find the image on your desktop. Select the image and click Submit. The next screen will give
you a preview of what the image will look like. If it looks as you wish, click Publish (Figure 18).

                                                                                                 Figure 18

Alumni Association Content (or Quick Links)
This section allows you to link to key areas of interest on the Alumni and MIT Websites. You may create the
various links on any or all of your Website pages. Click on Quick Links under Alumni Association Content on
your Site Management page to make selections (see Figure 19).

                                                                                                       Figure 19

On the Edit Alumni Association Content page, you may select the items you would like to appear on your
Website from a table of items we believe will be of interest. You may use the checkboxes under each Section
heading to place the image or link on all pages in that section (see Figure 20).

                                                                                                      Figure 20

The top 3 items, which appear in black and are not links, create dynamically generated images on your website in
the right tool bar. Placement of these images is created by the system. If you were to select all three - Infinite
Connection, Search Alumni Directory, and Top Stories MIT, the images would appear in that order. Each of the
images have functionality such as Update Your Info or Search the Alumni Directory (see Figure 21).

Note: The Top Stories from MIT image pulls in an RSS Feed of the top four stories from MIT. It is auto-
      refreshed by the system.

                                                                          Figure 21

Note: The Search box above the 3 Association items is a site search for your Website.

The table of Association Content items also includes many links to useful pages on the Association and MIT
Websites. Each of the links is live within the Edit Alumni Association Content page, so if you are not sure what
the referenced page is, you can click the link and view before adding it to your site.

Once you have made your selections, click Publish. Links will appear on the selected pages above the Site Search

Public View of Your Website
The finished version of your Website will have all of the robust information, photos, and documents that you have
taken the time to input and upload. It will also include links to the MIT Alumni Association and MIT campus
sites, if you have chosen to include them.

Two sections of your website will include information you did not input.

Officers page
In the Officers section of About, the end user will find a list of your officers. Alumni officer names will be
hyperlinked into the Online Alumni Directory (see Figure 22). If the end user clicks on a name, they will get the
Infinite Connection login screen and then the individual’s record.

                                                                                                      Figure 22

In this way, you are able to keep contact information (email, address, and phone) for your officers private and
unavailable to internet sniffers and spammers. Should a non-alumnus wish to get in touch with your group, they
can use the Contact Us form.

Group Events Calendar
On the top of the Events page in Alumni Site Builder™ is a link to a Calendar displayed in a month view (see
Figure 23). This calendar is provided to give your end users a quick view of all events coming up for your group

on a monthly basis. It defaults to the current month and will include links on each day that an event has been
created, either in Alumni Site Builder™ or SmarTrans™.

                                                                                                          Figure 23

The calendar can be navigated by clicking on Last Month/Next Month links or by selecting the month and year
and clicking the    button.


To top