FPCY Web Site Maintenance

This page gives the FPCY web page structure, and describes procedures for updating the site.

Web Page Structure

FPCY web pages are built using a combination of the "php" programming language and regular HTML. "php" is used for what is called "server side includes" to setup the structure of each page -- the background, top bar, bottom bar, and date line at the bottom. If you create pages with KompoZer and use the FPCY page template, then you don't have to worry about the "php" aspects. These are explained here as background information.

Each page contains the following elements, which you can see if you look at the source of a page:

An "href" reference to the "FPCY.css" cascading style sheet, as part of the HTML <head> element. This style sheet sets up the font sizes and colors, background, and dimensions of the main part of each web page. It references "bodybackground.jpg", which contains the background image used on each web page.
A "php include" of the file "FPCY Heading.php". This file defines the top bar for each page.
A "php include" of "FPCY NavBar.php", which defines the buttons on the left side of each page. More about this, below.
A "php include" of "FPCY Footer.php", which generates the "page last updated" message that you can see at the bottom of every page.

The rest of each FPCY web page contains standard HTML, which you can build with KompoZer or any other web page editor. See below for procedures for using KompoZer.

Web Site Structure

The web site is structured with the goal of simplicity -- try to keep it that way!. Some points:

The home page is "index.php".
There are no directories or folders -- all files are stored in the home directory.
All filenames are lower-case, to avoid confusion between upper- and lower-case.
Filenames are as obvious as possible:

Each navigation bar button links to a page that is named to match the text of the button. For example, the "music program" button links to a page called "music program.php".
Files that are updated weekly are named using the format "year month day". For example, "2009 04 26.php" and "2009 04 26.mp3".
Files for church events are named using a common prefix. For example, "Easter 2009 01.jpg" and "Easter 2009 02.jpg" are two pictures shown on the "Easter 2009.php" page.
Related files use the same or similar names.

Use these file extensions:

.php for web pages
.css for the (single) FPCY cascading style sheet
.mp3 for audio recordings
.jpg and .gif and .png for pictures
.pdf for Adobe postscript files of weekly bulletins, The Disciple, and the Annual Report
.3bc and .3bt files are associated with the "3D Button Visual Editor" button generator program (see below)
.mzt is a KompoZer page template

The easy way to find the name of a web page is to display the prior page in a browser, position the cursor on the link to the page you want, and look in the browser status bar.
All files used for site maintenance should be kept on the web site. This includes templates, button files, etc. That way, anybody can takeover the site maintenance at any time without having to reconstruct files "left behind" on someone's computer.
Never assume that you have the latest copies of files on your computer. Always download from the website to make sure you have the current version.

Using KompoZer to Create and Edit Web Pages

KompoZer is a free, somewhat buggy, web page editor. We don't have to use KompoZer but "free" and "running on Macs and Linux as well as Windows" makes it easy....

KompoXer is available at http://www.kompozer.net/

There is a KompoZer User Guide at http://www.charlescooke.me.uk/web/kz-ug-home.htm

To create a new page using KompoZer:

Start the new page via the "down triangle" next to the "New" icon on the composition tool bar. Select "More options ..." and then "A new document based on a template", using "FPCY page template". (This assumes you have copied the file "FPCY template.mzt" from the website to your local disk.)This creates the new page with the standard cascading style sheet, top bar, navigation bar, and footer line.
Immediately do "Edit / Detach from Template". If you don't do this, the KompoZer source page editor doesn't work properly.
Do "Format / Page Title and Properties" to set the Title, Author, and Description of the new page. These are used by web search systems (e.g. Google) to index pages.
Save the page in order to give it a location in the file system. You have to do this before linking to other pages or embedding an image so that the link or embed is relative to the page.
On the very top line of the new page (above the "body" area), enter the text for the page title, and set this text to the "h1" style using thepull-down list next to the "Body Text" input area on the top-left part of the screen.
Enter the "body" text as normal. Use "h1" style for centered bold headings, and "h2" style for bold headings at the left margin.
A horizontal line can be useful to separate sections of long pages, such as "Church Life". Use "Insert / Horizontal Line".

Some other KompoZer hints:

KompoZer normally saves files as ".html" but FPCY pages must be saved as .php -- otherwise, the server will not process them as php pages. When opening and saving files, you have to switch the "Save as Type" pulldown to "All File". Otherwise, you can't see the .php files when opening, and they get saves as "xxx.php.html" when saving. (This is a major nuisance.)
Links and embeds should be relative to the current page. On the "Link Properties" or "Image Properties" that you get when you click on the "link" or "image" icon, there is a check box marked "URL is relative to page location". This check box should be selected, and the URL should be a simple file name, for all links and embeds. This happens automatically if you make sure to specify the location of the current page, by saving it, before you establish a link or embed. If the check box is grayed-out, then you need to save the current page.
When pasting text into KompoZer, use "Edit/Paste without Formatting" to avoid copying the fonts from the source document. This permits consistent use of fonts across the entire website.
The following paragraph styles are predefined in the FPCY cascading style sheet. Please use this to maintain a consistent look across the web site

Heading 1 - centered, bold, large headings
Heading 2 - left-justified, bold headings
Body Text - Verdana font, large size, blue

Consider using tables (which will have various rows and columns) to format articles -- especially ones which have both text and a graphic. Tables can be nested.

Monthly Web Site Updates

There are two sets of updates that are regularly made to the web site. One set occurs monthly, and another happens every week. This section describes the monthly updates, which are driven by the contents of The Disciple.

The Disciple editor sends pdf version of the Disciple text around the end of each month. Save a complete copy of the pdf, (see respective links on the Disciple Online and Church Life pages). Also, parse (ie cut and paste ) the Disciple articles to various places on the web site. Here are some guidelines:

Every article about a church event of any kind should go on the "Church Life" page, in addition to a subject page (such as "Music Program"). Currently, we have subject pages for:

Church School
Christian Ed - (headlines from superintendent) - HChurchSchoolCal.php
Music Program
Youth
Adult Education
Mission (Note: missions completed for the current year are under missionongoing.php)

Food Pantry, Jan Peek

Church Business (Note: the respective commissions have separate pages)

(Session, Deacons, Worship Commission, Operations, Communications, and (Congregational) Life Commission)

Pastor Search

Disciple Online

There is a page (DiscipleOnline.php) which has links to the respective articles throughout the site
Also, update the Disciple Archive

Pastor and Pastor Search

Update thePastor, Pastor's message page for our incoming pastor and/or Chris, include any transitional news for the Pastor Search page

Additional pages that may need review, and updating as appropriate:

Alerts
Worship page and
Home page (update the headlines) , and elsewhere as appropriate

The editor also sends us an Adobe .pdf version of The Disciple, formatted using single columns. This should go at the start of the "Church Life" page and also on the "Pastoral Search" page with previous issues of The Disciple.
The editor also sends a Word file containing the monthly church calendar. This should be converted to Adobe .pdf format and put at the start of the "Church Life" page.

Interactive Monthly Calendar

We have an interactive monthly calendar, which is managed via the fpcywebsite@gmail.com account. There is a church calendar, and a community events calendar. Similiar to Microsoft Outlook, the Google calendar supports one time events as well as recurring meetings. Review the bulletin(s) , and Disciple for new meetings, and update the respective calendars via the fpcywebsite@gmail.com account. The webmaster(s) will provide the password.

Weekly Web Site Updates

This summarizes the work done weekly to update the "This Week" and related pages.

Copy existing "this week.php" page to "200x-mm-dd.php" where you substitute the date of the Sunday for "200x-mm-dd.php".
Edit the "past weeks.php" page to contain a pointer to the new "200x-mm-dd.php" page. Easiest way is to copy an existing line and then edit both the text and the link of the copied line.
Edit the "this week.php" page to:

Change the page title via "Format/Page Title and Properties".
Update the date on the title line of the page itself.
Switch to the "Source" tab and do a find to look for an <embed> element. This is what causes the audio of the worship service to play on the page. Update the "src=" attribute of the <embed> element to point to this week's audio file. (You have to do this on the "Source" tab because Kompozer doesn't have any builtin way to edit <embed>s.)
Update the sermon and other information that displays immediately below the audio recording.
The weekly bulletin comes from the Church Office in two Word files. Cut-and-paste them together, deleting some extraneous text that isn't actually printed. Convert the combined file to Adobe .pdf format and update the link in the "this week" file.
Cut-and-paste the "What's Happening this Week" from the Word document.The formatting of this text generally has to be manually corrected once copied into KompoZer. Use "Edit/Paste without Formatting" or paste initially into a plain text document and then copy from there into Kompozer to get a reasonable initial version before manually working on it.

To create a slide show and upload it to the FPCY website:

1) Create a video/slide show

Create a directory

Put the photos and videos into this directory. (Note: it is helpful to rename the photos so that they are sorted in the same order that you wish them to appear). Note: a good configuration is 10 photos per minute, about 5 - 7 seconds per slide. A typical FPCY hymn, sung by the congregation, is approximately 2 minutes.

Open Windows Live Movie Maker
Within Movie Maker, create a title slide (optional)
Select the photos (or video) from the previously created directory.
Add music -- select the sound track (usually an MP3 file) . (optional)
Share it (upload) to Youtube.

2) Embed the video in a web page

(In Komposer) Create / edit a table within the desired web page, so that there is a cell to accept the video.
Within the cell, (in the "normal" tab), create an upper marker and a lower marker. This will make locating the appropriate location within the source code MUCH easier.
(from YouTube), copy the embedded code.
(in Kompozer, in the source tab) paste the embedded source code between the upper and lower markers. Change the dimensions to height: 200 ; and width 250. Note: there are two instances where these dimensions must be changed.
(in Kompozer, in the normal tab), remove the upper and lower markers. Center the video.

Save.

Audio Recordings

These notes are for working with Windows/XP. This may be easier on a Mac!

Worship Services are recorded on audio CDs in .wav format. There seems to be some variability among computers as to how well they read and write such audio CDs. So check your results the first time you use a new computer to do this. If you have problems, try reducing the CD recording speed in the Windows Media "Burn / More Options" menu item.

Use Windows Media Player to rip the original audio CD onto your hard drive. Make sure to set the rip options to rip in "WAV (Lossless)" format. Do this in Windows Media Player via the "Rip / More Options" menu item.

Also use Windows Media Player to burn audio CDs from a .wav file -- either the original audio or an enhanced version you create with Audacity (see below). Make sure you burn CDs from .wav files since these have noticeably better and louder sound.

The audio must be converted to .mp3 format for the web site. There are two ways to do this:

Rip the original CD a second time, this time setting the rip options to .mp3 format.
Export an .mp3 file using Audacity, as described below.

Working with Audacity

Audacity is free sound-editing software for Windows, Macs, and Linux, available at http://audacity.sourceforge.net/. You also need the LAME .mp3 encoder, available at http://audacityteam.org/wiki/index.php?title=Lame_Installation.

Audacity is very easy to use, and is well documented via tutorials and a WIKI at http://audacityteam.org/wiki/index.php?title=Audacity_Wiki_Home_Page.

Use Audacity to boost the sound of quiet sections of the worship service. The software displays a time-line showing the volume of the recording. Start by selecting the entire recording (ctrl-a) and then do "Effect/Amplify..." to amplify the entire recording. Then look across the time-line, pick out sections that are very quiet, select them individually, and do "Effect/Amplify..." to fix them. Remember that the people who will receive the recordings may be hard of hearing.

Once you've edited the sound, do "File / Export as WAV" and "File / Export as MP3" to create files for burning to CD and for posting on the web site.

Duplicating Recordings

There is a CD (and DVD) recorder in the church office, on top of a file cabinet on the left as you enter the room. It is very easy to use. Put your original CD in the top drawer, blanks in any of the 5 other drawers, and press the "enter" key. Copies are created in parallel, and take under 5 minutes.

The Navigation Bar Buttons

There does not seem to be a free button editor, so I purchased "3D Visual Button Editor". This is a summary of how to use that editor to edit the navigation bar buttons.

There are two sets of buttons, one for buttons that use large font and one for buttons that use a smaller font. The latter is used when needed to fit all the text on a button.

After starting "3D Visual Button Editor", do "Tools/Options" and set the "Exported pictures destination folder" to wherever you want the button images to be stored. Now do "Button / Load Template" and then select either "FPCY large font button.3bt" or "FPCY small font button.3bt" Do "Background / Load Image" and select "headingbackground.jpg". This is needed because the background shows through around the rounded corners of the buttons. Move the background image so that it overlaps the sample button.

Do "Collections / Edit Collections", press the "Load Buttons List" and select either "FPCY buttons large font.3bc" or "FPCY buttons small font.3bc". Change the text of the buttons as desired, then press "Save buttons list" and "Generate collection". This generates a complete new set of buttons of the specified font. Make sure you upload these to the website.