August 2009

Devil is in the details

Notes from Web Editors Q & A Meeting

 

The Devil is in the Details

Little things that can make your life easier and your Web site better


https/login

Remember this to see a quick version of the anonymous site or if it looks like you have been logged off.

  1. Sometimes it helps to see your screen in both login and non-login views, so you can see how the page looks while you're working on it.

    To see a quick version of your site anonymously, I suggest you open two Firefox tabs pointing to the same page. Login to the site in the one, which will give you a URL with "https" at the beginning (for example, https://www.ed.psu.edu/educ/) . In the second tab, paste the same URL, but this time, remove the "s" from the "https" at the beginning (for example, http://www.ed.psu.edu/educ/). Doing this will show you a non-logged in view, or anonymous view of the same page.
  2. At times, when you're logged into the site, but as you navigate pages, you suddenly come to a page and find that you're not logged in. Simply click the "log in" link in the bottom right corner of the page or add an "s" after "http" in the URL window at the top and hit "enter." Doing either will cause the page to refresh with a logged in view.

 

Paste as Plain Text

If you are pasting text into the web site from Microsoft Word or other word processing program, or if you are importing text from another Web site, you should use the Paste as Plain Text button. This is icon in the edting toolbar that looks like a clipboard with a letter "T".
Paste as Plain Text image
Go to the original source of the text you want to paste (Word, other web site, etc.) and highlight it. Copy the selection. Then go to  your Web page and make sure you are in the editing tab. Then click on the Paste as Plain Text icon.  This opens a new window titled "paste as plain text". Paste the text in this window, and select OK.

You might have found that copying text from Microsoft Word or from other Web sites brings over some unwanted code. Using this icon will help alleviate the issues that come with that extra code.

 

PDF Update

This might sound repetitive, but this is the most handy tool on the site, and it can benefit everyone.
If you have a PDF file posted on your site, and you want to replace it with a newer version, the process is easy. Follow the instructions under the subhead Updating a PDF (or other file) on the site on the Help page titled Working with PDF's.

By following this procedure, you will not need to worry about publishing a new version, removing old versions, or updating links to the new version.

 

Links

To link to a page that is within the College of Education Web site:

You may be tempted to just cut and paste the URL into the address bar of the link dialog box, but you should instead click "browse server." Browse to the page you wish to link to in this way:

  • Highlight the text that you'd like to be the link.
  • Click on the icon in the toolbar that shows a globe and a closed chain link.
  • A new dialog box titled "Link" opens. (See "Link" image below.)
  • Select the "browse server" button. (See 1 in the link image below.)
  • Another window will open. (See Browser image below.)
    • You will use this window to browse the server for the page you wish to link to.
    • The right part of the window shows other items that are in the folder of the page you are editing. (See  A in the browser image below.)
    • The left part of the window shows other folders that are at the same level of navigation as the folder you are in (so 1 level up from the page you are editing). (See B in the browser image below.)
    • The folder icon that is "open" on the left side corresponds with the folder that you have open (the right part of the Links window). (See C in the browser image below.)
    • In the left part of the window, the folder shown at the top, which contains an "up" arrow, allows you to navigate upward in the site. (See D in the browser image below.)

 

To link to a page outside the College of Education site:

Simply type or paste that page's Web address in the URL box of the Link window. (See 4 in the link image below.)

 

To get linked items to open in a new browser window:

Select the Target tab in the Links window. (See 2 in the link image below.) Select "New Window" from the drop down box.


To link an e-mail address:

In the Links window, in the Link Type box, select E-mail, and type or paste the desired e-mail address in the box. (See 3 in the link image below.)

 

Note: When linking to any URL, it is best to represent the link with words, rather than showing "link language" such as a URL.

Link Image

Link Image2


Browser Image

Browse Image

Adding Images

Images seem like a big deal, don't they? They are really easy to add to your site.
Refer to the instructions on the Help page titled Adding Images to Your Site.

Remember that the Photo Gallery is a growing database of College photos, taken in varying contexts. You don't need to login in order to view the photos.  If you identify a photo you'd like to use, simply copy the URL and paste it into the body of an e-mail request to Randy Persing, who will format the photo.  Be sure also to give Randy the URL of the Images folder in your site.  If you want a caption, provide the text to Randy at this time.  He typically turns around a formatted photo within 24 hours. 

For accessibility purposes, alt tags are an important component of images. To add alt tags, click on the yellow icon in the toolbar, Image Properties.  In the Alternative Text box, you can add or change the alt tag.

 

Headers and Styles

 

Using a variety of headers and text stylings adds interest to your page and makes the page easier for a reader to scan it.

  • The H2 heading is the title at the top of your page.
  • Lower-level heads (H3 and H4) help break up the page and make it less monotonous.
  • When a person's name is in the text, it helps to use bold, or even add a link to that person's page on the College's online directory.
  • Bold is also a style that can be used sparingly to add interest and help important concepts stand out.
  • Italics can be used to draw attention to a word, phrase, or sentence.
  • Avoid using ALL CAPS. Usability studies have shown that this style is difficult to read. The convention of using all caps is a carryover from the old typewriter days, when bold and italics were not options.
  • Normal style is larger, spacier, and easier to read than text that is not assigned a style.