Maintenance

Return to home page

This page is about how to update the U3A Bermagui website, especially the timetable.

The website is hosted by U3A Network NSW: that means they rent space on a server (a large computer with some public access), and the network administrator (netadmin) has used some of that space to set up our website. The overall look of the pages (theme) has been set up by netadmin and we don't have to worry about it.

The website is managed using content-management software called WordPress. There is an editing page (the dashboard) which you can log into with a username and password - get that locally or from netadmin.

Most of our pages don't change much and can be edited via the dashboard's built-in editor, similar to a word processor. How to use the built-in editor

Exceptionally, the Timetable page with thirty-odd courses needs to be updated 4x per year. The timetable is created in an Excel workbook - from that  we make a page for the website, with hover links to show details of each course.  The page is then uploaded: How to publish to the website.

Excel has a feature called macros that allows repetitive jobs to be done automatically. A little macro called Sub U3Anew() has been written for this job. You need to install it in your Excel program.   How to get and use the U3Anew macro


How to use the built-in editor

Back to Maintenance page

There's a basic principle of website maintenance: get the material right on your own computer (the local computer), save a local backup copy, and then publish (paste or upload) to the website. Every little change on the website takes a few seconds, so minimise the number of changes; the website is on someone else's computer, so keep backups safe on your own.

You should also realise that web pages look different in different browsers (they render differently). Most people see your pages in Internet Explorer, so always check the finished page in IE.

We'll discuss the basics of how to edit the News and Dates page. Other pages are similar, but don't need much editing anyway - except the Timetable page which is automated.

First click on this link: http://bermagui.u3anet.org.au/news-and-dates to see what's on the page now - some items will be out of date. If you've been given material to add, you should edit it locally for easy viewing. You can do that in Word, etc, but there is freeware called KompoZer for writing web pages which is easy to use and more suited to web pages. (KompoZer is very similar to the website's built-in editor, but is on your computer.)

Try to arrange the material so viewers can see what's there without scrolling. Instead of lists, spread items across the page.

If you have several long items, put short notes at the top with links to more material below. In KompoZer, select the heading for the section and click the Anchor button at the top. Then at the end of the short note, type "more >>", select it, click the Link button at the top, choose the heading from the list, and click OK.

(For adding pictures, see below.) Save the finished page and open it in IE to see how it looks.

Click on this link: http://bermagui.u3anet.org.au/wp-admin to get the login page in your browser (Internet Explorer or whatever). Bookmark it (In IE, Favorites >Add to Favourites or drag the icon in the Address line at the top to the Links bar). Enter the username and password you've been given and log in. (The browser should remember for next time.)

On the left, under the Pages heading click Pages; under the News and Dates page click Edit. A page window comes up with symbols. Click the  symbol (Maximize, 4 rows down, 2nd from right) to get a larger editing window.

Select text you want to delete and press your Delete button.

Copy your finished text from KompoZer, right-click in page window > Paste.  (A box may come up with instructions "...You are required to paste it again in this window...") . Click the same  symbol (Minimize) to reduce the window. Click the Update button on the right (very important). [If the page were a new one, the button would say Publish.]  NOTE: pasting can undo previous formatting entries, and you might have to redo them in the built-in editor.

If you want to add pictures, you must first upload them to the server - see the section How to publish to the website. Then in the page window, click the Insert/Edit Image button - the Shared Images window will come up: choose your image and click insert. BUT, a better way to add a page of pictures is to make the page locally, upload it (and its images) to the folder /wp-content/uploads on the server, and put a link to it on the News and Dates page: type in a caption like Pictures of our event, select it, click the Insert/Edit Hyperlink, click Shared Documents on the left of the window that comes up > choose the page of pictures, and click Apply. (You can put a small picture next to the caption to catch people's eye.)

Advanced: You can paste a table from Excel into KompoZer. Then go Tools > Markup cleaner. After that, you can format the table to look nice (look under the Table menu). Then copy and paste the table into the built-in editor. It can need a bit of cleaning up. Very advanced: to avoid losing your nice formatting, click the KompoZer Source tab and select all the html code from <table to </table>. Then, in the site's built-in editor, click the Source tab and paste the code in the right place. Update immediately - if you make any other changes the editor might undo your formatting!


How to get and use the U3Anew macro

Back to Maintenance page

The timetable, involving 20-odd courses, has to be changed every term. The Excel macro U3Anew() has been written to automatically write a timetable page with hover text for each course. [Technically, the website Timetable page doesn't actually change, but redirects to an uploaded page.]

The macro is tailored for a timetable supplied on tab Sheet1 of an Excel workbook.  It will search for headings to construct the web page:
"Day", "Course Title", "Name', 'Surname", "Dates", "Time", "Location2", "Phone", "Mobile" & "Course Description".
Location2 is usually the town where the course is held.  The others you should understand from a previous timetable.

How to get and install the macro:

This bit is fiddly. If you're very inexperienced, get help - it only has to be done once. The instructions are for Excel 2010, but should work for all later versions.

Create a new folder (called Pages or what you like) where the workbook will be saved (as Timetable.xls). Click this link: Sub_U3A.zip and save to the new folder. Right-click the .zip file > Extract all. In the wizard, Click Next. In Select a Destination, trim off the end (\Sub_U3A.zip) to extract to the Pages folder - the extracted files will be Sub U3Anew().bas (the macro) and Test_macro.xls (to test the macro if you haven't got a timetable yet).

Now you're going to get a look behind the scenes at Excel. On the Developer Tab, click Visual Basic at the left:


[If the Developer tab isn't visible, right-click the ribbon and choose "Customize the Ribbon".  On the right, under Main Tabs, click the box next to Developer to put a tick.]

In the picture below, you can see the top left window with VBAProject (PERSONAL.XLS). This is a special Excel workbook where macros are stored for use in every workbook. If your editor already has a PERSONAL.XLS like that, you can skip the next step of creating one.

Top left of VB editor

If there's no PERSONAL.XLS, go back to the Developer Tab and click the Record Macro button:

Under "Macro name" put Create_personal or whatever you like; under "Store macro in", choose "Personal Macro Workbook". A little blue square will replace the Record Macro button; click it to stop the recorder:


Go back to the Visual Basic Editor - now you should see PERSONAL.XLS.

Under PERSONAL.XLS, right-click Modules > Import File, browse to the Pages folder and select U3A().bas > Open. A new Module should appear - double-click it. At the top of the right window you should see "Sub U3Anew()" (as in the pic of the Visual Basic Editor above). File > Save PERSONAL.XLS to save your imported file.

Go back to Excel > right-click the ribbon and choose "Customize the Ribbon". In the middle, under "Choose commands from", select "Macros" from the drop-down list.  On the right, click "New Tab" near the bottom.  Select "New Tab (Custom)", click "Rename" and name it "Macros".

Select "New Group (Custom)", click "Rename" and delete the name at the foot of the dialog > OK.  In the middle Macros column, select PERSONAL.XLSB!U3A and click "Add >>" between the columns to add it to the new Custom Group.  With PERSONAL.XLSB!U3A selcted, click the Rename button and rename it U3A or whatever you like.  Choose a button from the box (I use the flags symbol) > OK.  Your Macros Tab will look like this:

If you already have a workbook with the timetable, you can test the macro on that: otherwise open Test_macro.xls. Click the U3A button. After a while Test_macro should show two extra tabs called Newsletter and Details, and the Pages folder should open with a web page called Timetable-detail.html. You can be fairly confident the macro has run OK - double-click Timetable-detail.html to see it and be sure.

ADDITIONAL NOTE:

After you've published the timetable to the server, there may be late changes - courses may be added or dropped. By far the fastest way is to edit the


How to publish to the website

Back to Maintenance page

Having created the Timetable_details page, we have to publish (upload) it to the website. We have specially been granted File Transfer (FTP) access to do this - you need to get the separate username and password for this.

CAUTION: working on the server is very final. There's no recycle bin - if you delete something, it's gone. Keep local backups (ie, on your computer). If you publish a file with the same name and extension as one already there, the old one will be over-written (replaced). Otherwise, if you're careful, it's just like Windows Explorer, but you have to wait while files upload.

It's easiest to upload the Timetable_details.html page  using the excellent free program FileZilla. You should download and run the latest  FileZilla_n.n.n_win32-setup.exe.

The picture shows the FileZilla windows when connected to the website:

At bottom left are the files in the local Pages folder. You can see that from the window above it, which also shows the full path. (Double-clicking the yellow folder with two dots goes up a level.) At bottom right are the files in the remote uploads folder (ie, on the server) - notice they're the sort of files you expect. You can see what folder from the window above it, which also shows the remote path /wp-content/uploads. The very top window shows the "conversation" between FileZilla and the remote computer.

Your first job is to set up FileZilla to find the local folder and the website: then you bookmark the site for future use. You can set up a different bookmark for a different job (eg publishing a page for redirection from the News & Dates page).

In FileZilla, File > Site Manager > New Site.

General Tab:
Host = 198.89.126.17
Servertype = FTP - File Transfer Protocol
Logontype = Normal
User = bermagui@u3anet.org.au
Password = Webadmin password minus the final "0"

Advanced Tab:
Servertype = Default
Bypass proxy = unchecked
Default local directory = [Browse] to the usual folder with files you upload, eg C:\...\Pages
Default remote directory = /wp-content/uploads

Click Connect.
There should be conversation at the top, with finally "Connected" or "Directory Listing Successful" If everything looks good, Bookmarks > Add bookmark > Site-specific bookmark > Name = Uploads.

In the bottom-left window you should see the page Timetable-detail.html you've created. Drag it to the bottom-right window,  OR just double-click it.  Conversation begins at the top, and after a while (depending on your upload speed), the file will appear in the bottom-right pane, indicating it's published. The conversation will finally say "Directory Listing Successful".  If there's already a file on the server with the same name, you'll be asked whether you want to replace it.

If you want to look at a file on the server, double-click it, but it won't open - it will be saved to the local folder. Then right-click the local version > Open. (If you double-click it, it will be published to the server.)

Open the U3A Bermagui website in IE, click on the Timetable link on the right to see if your new timetable page appears, and mouse over some of the links to test.

Uploading to the website from Documents by Readdle for the iPad

The free app Documents by Readdle for iPad has the ability to upload files.  This allows you to update the timetable or newsletter while away from the PC by over-writing the ones already on the website.  There should be an Android app with the same function.  (There's no way to automatically create the timetable page on the iPad, though.)

1. In Network, + Add Account

2. Title = "U3A" (or whatever),
    Host = 198.89.126.17 (as in FileZilla > File > Site Manager > General tab),
    Login = "bermagui@u3anet.org.au" (User on the above tab of FileZilla),
    Password = the webadmin password, minus the final "0"
    Login path = "/wp-content/uploads"

3. Save.  That completes the account setup.

4. To upload a file, Edit > select the file > Upload > Upload to U3A.  A list is shown - you should recognise the contents of your uploads folder.

6. > Upload.  Popup "Upload of 1 item started", then popup "[filename] has been uploaded".

7.  If the file already exists, you'll be prompted "Are you sure you want to replace the file "..."?

How to get and edit images

Back to Maintenance page

Images sent you for display on the website often come too big - 100KB is plenty big enough for our images, and 140KB should be the maximum unless for some special reason.

I suggest you save supplied images in a separate folder. If you move the pointer over the image you'll get a tooltip with the size (in bytes or KB: 1 KB = 1000 bytes). If much more than 100KB, you need to resize the image. There is excellent freeware called Irfanview to do this easily (download Irfanview on the right of its home page).

Once you've installed it, double-clicking any image should open it in Irfanview (otherwise open Irfanview and browse to your supplied images folder). Image > Information > Disk size shows the size of the file. If it's too big, Image > Resize/Resample > on the right, click Half > OK. File > Save As > In the File name line add HALF at the end; in the Save as type line choose JPG - JPG/JPEG Format. In the JPEG/GIF save options box on the right, slide the Save quality to 100 (good). > Save. Point to the new file to see if it's small enough. Repeat if necessary. (Advanced users will find other methods.)

Once the graphic is small enough, copy/paste it to the course_details folder and rename it course-name-course-leader.jpg, choosing the actual name from the Filenames tab of Timetable.xls. Open the corresponding course-name-course-leader.html page and you should see the image there.

If you have a number of images to resize, you can batch process them in Irfanview.  Here are instructions adapted from http://mecrunchy.blogspot.com.au/2008/04/guide-to-resizing-multiple-images-with.html

In Irfanview, open one of the images to be resized.
File > Thumbnails
In Tumbnails, Ctrl A twice to select all the images in the folder.
File > Start batch dialog with selected files

In the Batch conversion dialog, choose Output Format 'JPG - JPG/JPEG Format'. Then tick 'Use advanced options'.

Click on the 'Advanced' button.
Tick 'RESIZE'. Then choose "Set new size as percentage of original" and try setting Width and Height to 30%.  This will reduce 1.2MB jpgs to about 100KB.
Tick the three boxes underneath ("aspect", "resample", "don't enlarge").
> OK.

Browse to the folder where you want the resized images to be saved.
Check the images you want have been added (or, add more).
Press 'Start Batch' button. Wait a moment, and all your files will be resized.