St. John’s United Methodist Church

This is to introduce you to working on the web site: posting announcements, adding an announcement to the Upcoming Events list, working with pictures, graphics, and attachments, and creating pages.

To get started we’ll get you logged in, and update your profile.

Login from the home page

Near the bottom right of the home page, under “My St. John’s”, click on Login.

Forgot your username or password?

Or maybe you’ve never known your username or password? Not a problem… just click on the “Forgot your password” link on the Login page, and then enter the email address at which you receive News and Notes each week. We’ll send you a confirmation email, with a special link to confirm that you want a new password. After you click that link, we’ll send an email with your username and a new password right away. Note that User Names and Passwords are case sensitive!

Once you’ve logged in

When you first login as an editor, you’ll see the Site Admin dashboard. Notice it lists the most recent announcements (”Posts”) as well as recent links to our site (”Incoming Links”) and Comments.

You can explore the Site Admin features using the “menu bar” that’s just under the title:

Editing your profile

Select “Profile” from the menu bar shown above. There are several useful things to setup here:

1) Select your full name as your “Display name”.

When you post an announcement, an email is sent to interested readers, and your name will appear at the bottom of the email in the form you select here. It’s also the way your name displays for other editors to see “who posted what.” Alternatively, you can set an appropriate Nickname, click on Update Profile, and then select it to be your Display name.

2) You can set a new password at the bottom of the right column. Please pick a password that only you will remember — we don’t want anyone hacking the site.

3) Turn off the so-called “visual rich editor” by clearing the box at the bottom of the left column. We found that editor to be rather quirky, as described in this post.

Click on “Update Profile’ in the bottom right corner to save your changes.

Subscriptions

From the Profile sub-menu, select the option to manage your Subscriptions.

Here you can select the categories for which you’d like to receive an email alert, whenever there’s a new Post. You can also control the format of those alerts (text-excerpt, full-text, or full-HTML.)

Click on “Update Preferences” if you want to save any changes to your subscriptions.

Posting an announcement

To post a new announcement, select “Write” from the menu bar:

This brings up the Write Post screen, also called the Post editor. If you’ve turned off the “visual rich editor”, as described above, then you’ll see this screen for writing and editing announcements:

For those of you who know html, this editor is nice because it figures out paragraphs based on white space. No need for <p> tagging. And if you want to learn some html, it helps you learn the basics of bolding, italics, blockquotes, images and lists.

OK, let’s get started writing! Click in the Title area and enter a short title for your post. We use normal capitalization rules for titles. You don’t need to include an event or announcement date in the title — we’ll take care of that elsewhere in just a bit. And don’t worry about making your title “unique”; if you want your announcement titled “Trustees Meeting,” that’s not a problem. Just make the title reasonably informative and try to keep it to no more than 7-8 words or about 50 characters. Less is fine!

Click in the Post area and you can type your announcement or paste in text from your clipboard. Leave a blank line between paragraphs. And note that you can’t use “blanks” or “tabs” to indent text. We’ll show you how to indent, below. For now, just ignore the button bar (the “buttons” under the word Post).

Here in the Post would be a good place to mention any dates and times. It’s not essential to include the year — the system will display the date you posted the announcement, somewhere on the page.

To save and preview your work — without publishing it to the world quite yet — click on the “Save and Continue Editing” button:

This will save what you’ve entered so far, and redraw the “Write Post” screen with a Post Preview below the editor. Scroll down to see what your announcement will look like:

You can continue to edit your announcement, “Save and Continue Editing”, and preview how it will look.

Your Privacy Responsibilities as a Web Editor

Please familiarize yourself with our Privacy Policy. The intent is that before identifying an individual in an article on this web site, the author is responsible to obtain that individual’s permission. Identifying means using someone’s name, home address, email address, telephone number, age, birthday or photograph — in any combination which might be used to identify, locate, or contact that individual. Requesting and granting permission can be a simple matter, for example by email or verbally.

That means you need to know how to review the list of people who have said “yes” or “no” about being identified on the web site. Here’s how: If you’re an editor, you should be able to see the Manage Pages list, and search it for the word Privacy. In particular, look for the page “People who can and cannot be identified on the website”. Anytime someone gives you permission to use their name on the website, or says “no”, please add their name to that list (or email webservants [at] stjohnsdover [dot] org with the information.) Before you publish your article, please check that each person you are identifying has been listed as consenting to have their name or contact information published.

If you do not have permission to identify someone on the website, then do not use any combination of information by which they might be identified, such as: first and last name; any addresses including email; phone numbers; or first name in combination with age, birthday or picture.

Assign Categories

Before you “Publish” your announcement, please assign some appropriate categories so that people can find your post. Readers can browse the web site by category, using the Categories list on the lower right section of the front page. If you’ve never browsed by category, give it a try, so you see how categories work! Registered users can also subscribe to email alerts for categories of interest, on the Subscriptions page.

Your post can be listed under multiple categories. On the Write Post screen, look for the Categories box on the right side, and click the white + to open it.

(If you get a warning box pop-up, choose whatever option looks like “proceed… don’t throw away my work”. )

We assign all posts to the (you guessed it) All Posts category. That’s where you can see everything that’s ever been posted. All Posts is selected automatically when you write a new post. It was originally the “general” category.

We have two additional types of categories. You can use both topical and age-based categories, as appropriate:

Topical categories (hopefully at least one of these applies!):

• Opportunities: this is for any announcement that needs “helpers” — a chance to volunteer
• Education, finance, hospitality, music, outreach, PSPR, sermons, trustees, witness, worship: use these as needed, and contact Mike Capern if you see a need for other categories
• News ‘n Notes: all registered users of the site are setup to receive articles in this category by email, so we’ve promised to keep it “low volume” — primarily Pastor Mark’s weekly letter, plus urgent notices
• Sermons: this has started as the home page of weekly sermons, but it could be broadened to include Sermons, Meditations, and Reflections if we have other interested contributors.

Age-based categories (optional): Select foradults, forkids, and/or foryouth if your announcement or event is focused on members of a particular age and stage. The forallages is for announcements and events that aim to bring people of all ages together — including inter-generational and family-oriented events. We only assign these categories if they really apply. That way, when a visitor browses the category (from the front page category links) they find entries that are very relevant. We don’t assign these in combination with News & Notes or Sermons.

Publish your Announcement

Now that you have proof-read your announcement (in the preview area) and assigned categories, you’re ready to publish it to the world. When you click on “Publish”, the announcement is added to our front-page “News” section, and an email alert is mailed to folks who’ve subscribed to the categories you assigned. No big deal… go ahead…

How to add your announcement to Upcoming Events

The items that show up in the front page list of Upcoming Events are just normal “posts” that have an really simple Event date & time. You set the Event date & time in the “Write Post” page, just below where you select Categories, on the right side under “RS Event.” Click on the white + to expand the box, if needed, and then fill in all the date and time fields carefully:

Watch out for the 24-hour clock! You may not want to hold your event at 5am

If you have a repeating event, just put in the first occurence. You can come back and update the RS Event for the next time, after that.

Adding a photo or graphic

When you use a photo, please credit and copyright. E.g. “Photos: (c) 2008, Bob Johnson. Used by permission.”

Before uploading, use your favorite photo editor to
* crop & straighten the photo
* adjust the contrast
* resize the photos to absolute maximum 1600 pixels (in the larger dimension) - 1200 or 1400 should be fine for more most
* save in jpg format, with a filename that is all lower case, e.g. la-mission-1234.jpg (might have to go to Explorer and rename it - some programs insist on putting parts of the filename in UPPER case)

In the website editor (”Write Post”),
* click the Upload tab, and fill in File (browse and select it) and a Title, then click the Upload button. (The “Description” doesn’t ever seem to be displayed anywhere, so don’t bother with it.)
* when the photo has been uploaded, the editor will switch to the Browse tab, and display the thumbnail of your pic.
* the photo is not inserted into your story yet… it’s just saved on the web server, ready to use now
* in the Page Content (editor window) position the cursor at the place you want to insert your photo. Note: it’s a good idea to insert the image at the very beginning of the paragraph you’re fitting it into. This ensures that the top of the image lines up with the top of the paragraph in which you place the image.
* in the Browse tab, click on the thumbnail of your photo … the photo options and commands will pop-up (preferred options shown below in *bold*):
– *Using Thumbnail* or Using Original;
– Not Linked or *Linked to Image* or Linked to Page;
– Send to Editor;
– Delete;
– Close Options

Once you’ve selected your options, click “Send to Editor”. The html code is inserted in the Page Content window, at the cursor. You may have to scroll down to find the new code, if the editor jumps back to the top of the article.

Assuming you selected the options recommended above — Using Thumbnail, and Linked to Image — here are minor adjustments to the new code:
* to cause the picture to be opened in a new window, when someone clicks on the thumbnail — after <a class=”imagelink”, please add target=”_blank” before the href=….
* optionally, to float the picture over to the left or right, with text flowing beside the image — after <img id=”image###”, add align=”left” or align=”right”, before src=…

Here’s a link to the HTML image tag syntax. http://www.w3schools.com/tags/tag_img.asp if you’re really interested!

To Do

This article is a work-in-progress. Here are some more things we should write up briefly…

<blockquote> for indenting

<div align=”center”> for centering

<div align=”right”> for right aligned text

Using the uploader for images, and for attachments

Avoid tables (columns), if at all possible.

Editing the front page articles (Welcome, and Front page right side)

Centering and large photos don’t work well on the 2-column home page layout.

“Pages” vs. “Posts” (announcements)

Write email addresses in this obfuscated style: fredblogs [at] stjohnsdover [dot] org

In general, create links to other web sites so that they open in a new browser window or tab
- <a target=”_blank” …

It would be nice to break this article down into smaller chunks using sub-pages.

Sometimes you get a “blank screen” or incomplete screen after clicking Save or Publish.. haven’t determined why.. seems to be ok to hit the back button and re-Save / Publish it. Alternatively, you can open a new browser window and see if the changes “took.”