web viewabout function point analysis, and click on the word . edit. just below ... do a copy/paste,...

Brief Instructions for updating IFPUG Web Pages using WordPress

By David ThompsonAs of 2/19/2013

1. Basic maintenance rules:

a. always have a back-off position -- the ability to revert edited pages to the way they were before you made edits;

b. test changes thoroughly before moving to production;c. after moving changes to production, examine the result to make sure you got what you wanted;d. use a browser that allows multiple tabs - recommend Mozilla Firefox.

2. Logon IDs and Passwords

a. WordPress Test Domain:i. URL: www.ifpug.org/test/wp-admin/

ii. Username: _________iii. Password__________

b. WordPress Production Domain:i. URL: www.ifpug.org/wp-admin/

ii. Username: _________iii. Password___________

c. Filer Server Control Panel:i. URL: https://gator4098.hostgator.com:2083/

ii. Username:_________iii. Password: ___________

3. Editing an existing page:

a. minor changesi. Log into the WordPress test environment

ii. observe the WordPress dashboard:

iii. Note the main menu in the left column.

1

https://gator4098.hostgator.com:2083/

http://www.ifpug.org/wp-admin/


iv. Select Pages/All Pagesv. Here is the display of All Pages:

These are in sequence by menu hierarchy. Note there are two pages to this display. If the page you want to edit is not shown on page one, advance to page 2 using the "go to next page" arrow in the upper right corner. Or, enter the page name (or part of the page name) in the Search Pages input field and press the [Search Pages] button.

vi. For an illustration, we'll edit the About Function Point Analysis page to make a small change. To do that, hover your cursor over the entry, About Function Point Analysis , and click on the word Edit just below it. Here is what you should see after doing that:

Note the two tabs in the upper right corner of the display - one labeled Visual, the other labeled Text. Visual provides a "wysiwyg" screen for editing. Toggle to the Text display.

2


Here is what you should see after doing that:

This view shows the generated HTML code for this page. To understand HTML code, obtain a thin reference book, such as Learn HTML and CSS with w3schools, and look up the meaning and usage of the HTML tags.

vii. Take a back-off position by selecting the entire set of text displayed, and then doing a copy and a paste to a text file.

viii. Revert to the Visual view. Note the set of page editing tools on the toolbar near the top of the screen.

3


ix. Add a sentence to one of the paragraphs, and click the [Update] button. once the page has been updated, click on the View page link near the top of the display, in the yellow-highlighted box. This will show you what the page will look like when viewed through a browser:

If the browser display looks good, the change was successful. To double-check, open a different browser, such as Internet Explorer, and navigate to this screen, to see if it looks good there also.

x. Use the back arrow to go back to the edit screen.

xi. Open a second tab in Firefox and log in to production.

xii. Follow the same process to apply the change to production. If the change is larger, instead of re-typing the new text in the production edit screen, do a copy/paste, from the screen in the test domain (Text view) into the screen in the production domain (also in Text view). Preview the changed page in the browser view to ensure that what you will put in production is what you wanted.

b. larger changes

i. To delete existing sections of a page, take a back-up position, go into the Text view and carefully delete the text to be removed.

ii. Type or copy replacement words in to a Word document .

iii. In the Visual view, place your cursor where you want the replacement words (or paragraph(s) ) to begin, and open the Paste from Word tool on the toolbar.

iv. Copy the words, sentence(s) or paragraph(s) from the Word document to the clipboard and then paste them into the opened Paste from Word tool text box. Then click on the [Insert] button to insert the added words.

v. save the changes, then repeat the usual inspection and review steps.

4. Adding a new page:

a. Select Pages/Add New from the left-column menu

4


b. In the page that opens, type a page title in the space provided.

c. In the Visual view, type in the text for the new page. Or, type and format the content in a Word document, and then copy/paste into the Copy from Word tool.

d. When the content is added, click on the [Publish] button.

e. Examine the new page by clicking on the View page link.

f. WordPress will automatically add this new page to the main menu:

5


g. To change the position of the new entry in the main menu, go back to Pages/All Pages and select a Quick Edit:

Quick Edit can be used to make minor changes to the attributes of the new page, including where in the menu hierarchy it should go.

h. Clicking on Quick Edit opens the Quick Edit view and shows the options for quick editing,including the Parent; Order; Template; Allow Comments checkbox, and Status. If you want the new page to appear in the main menu, but in a different order, change the order number to a value that positions the item where you want it. 0 is leftmost; subsequent positions to the right increment the order number by one. To place the item in the rightmost position, for this example, change the order number to 11.

i. To make the item a subordinate to an existing main menu item, change the Parent.

and, within the new parent, change the new order number if necessary.

6


Here we'll make the new page a child of the ISBSG page:

Note that the ISBSG page currently has no children. So the Order number for the new page can remain at zero. While we are at it, we'll remove the check mark from the Allow Comments checkbox.

Also note that in the list of pages on the WordPress dashboard, the new page now is listed below the ISBSG page, and indented, to show the parent-child relationship.

Here is how it looks in the browser window:

7


And here is how it looks in the list of pages:

5. Inserting links and graphics in a page:

a. If you already know the URL of the document or graphic you want to include in the page, open a separate browser and type in the complete URL and navigate to the page or document. Note that URLs are case-sensitive in this environment. If you make a typing error when entering the URL (quite possible), correct the error and try again -- continue until the document or graphic is displayed in the browser window. Then copy the URL into your clipboard.

8


b. To embed a link to the document, highlight the words that will contain the link, and select the Insert/edit link tool to paste in the URL:

c. To embed a graphic into the page, place the cursor where you want the graphic, and then click on the [Add Media] button, and click on Insert from URL in the left column of the resulting display. Paste in the URL in the field provided; add a title if you want one, and click on [Insert into page].

d. You may well need to resize the graphic after it is inserted. If it is way too big, toggle the edit page screen to Full Screen mode, grab a corner, and drag it down and in to reduce the size of the embedded graphic. You may need to do this several times until it is right. Alternately, you can go into the Text view and edit the size tag in the HTML.

6. Uploading documents and graphics to the IFPUG file server.

a. Here is where you will need to log in to the file server Control Panel. Enter the URL in a browser tab and navigate to the login screen:

9


b. Once logged in, you will see the Control Panel:

Click on File Manager. This opens up the following display:

To upload a document, double click on the Documents folder. To upload a graphic, double click on the Images folder (double click on the folder icon, not on the folder name). Then click on the Upload tool in the toolbar. This will open a dialog where you can navigate to the document or graphic, then click on [Upload] to copy it up to the folder.

The URL for the uploaded object will be http://www.ifpug.org/FolderName/File Name/, where the file name includes the qualifier. You will benefit much if, prior to uploading, you remove all embedded blanks and special characters from the file name on the drive or server where the file is located. Note that URLs are case sensitive in WordPress.

10


Here is a picture of the upload dialog

7. Adding and Editing Posts.

a. Posts (also called Blog Posts or just Blog entries) appear in the right column of the browser, just below the banner and main menu. A parameter(currently set to 5) controls how many Posts show, and they appear in publication date order, most recent first. Each Post is assigned a Category (selected from a list) and all posts of a given category can be viewed by clicking on the appropriate category in the left column of the browser display. A list of recent posts shows below the list of categories; the length of that list is controlled by a parameter. Below the list of recent Posts is an Archive list, by month.

b. To add a Post, select Posts/Add New from the main menu (left column on the dashboard), type in a Title and then a body of text just like you would when adding a new page. Click on [Save Draft] periodically as you work, if needed, and do a [Preview] when you want to see how the post will look in a browser. Remember to assign a Category by clicking on the most appropriate category in the list of categories, and unclick the check mark in the Uncategorized category.

c. When you are ready to publish the Post, click on the [Publish] button.

d. Next list All Posts, select and do a Quick Edit on the new Post, and uncheck Allow Comments.

e. If you want to keep the Post listed in the dashboard, but don't want users to see it, change the status from Published to Draft. If you want the Post to be published at a future date, change the Date value. If you want to change the order in which the Post appears on the home page, modify the date to fall between the dates of the Posts you want it to be between.

f. To edit an existing Post, find it in the list of all posts and select Edit. Note that these posts will appear in publication date sequence, most recent first. You can also use Quick Edit to modify the attributes of the existing Post.

11


8. Final comments

a. Work slowly and methodically. Allow plenty of time to do you work so that you are not rushing to meet a deadline.

b. Once a page or post is published, open it in another browser, review it carefully, and click on all embedded links to ensure the page will work as intended.

c. Here are some useful references, if you want to read more:

i. Refsnes, Woodward et al, Learn HTML and CSS with w3schools, ISBN978-0-470-61195-1; Hoboken NJ: Wiley Publishing, Inc., 2010

ii. Stephanie Leary, Beginning WordPress 3 - Make great websites the easy way, ISBN978-1-4302-2895-0; New York: Springer Science+Business Media LLC, 2010

iii. Chuck Musciano & Bill Kennedy, HTML The Definitive Guide, 3rd Edition, ISBN1-56592-492-4; Sebastopol, CA: O'Reilly & Associates, 1998 [look for a more current edition]

d. If a page or post is subsequently seen to need revision, go ahead and make it. If it is totally incorrect or otherwise not worthy of appearing on the website, change its status to Draft and fix it before re-publishing it.

e. When working in Visual view, it turns out that "What You See is Not Always What you Get." this can happen when you make multiple editing changes in a paragraph when working in Visual view. So we encourage you to do all editing in a Word document and then paste it just one time using the Copy From Word tool. Alternately, you can often fix a display that is not exactly what you wanted by just editing it in Text view, correcting the bad HTML that is controlling the format of what you see in the browser. Of course, you'll need to understand HTML coding in order to be successful at that.

f. Embedding graphics can be tricky. The best bet is to lay in just one centered graphic between two paragraphs. To lay in two or three graphics side-by-side, you'll need to embed a table and insert the graphics into the table cells. You can wrap text around an embedded graphic by carefully inserting the graphic in the middle of a block of text, and specifying left or right alignment, but the results are seldom exactly what you want.

12