September 2007 Archives

VOA Foreign Leader Pronunciation Guide

| | Comments (0)

Given certain recent events, the issue of how to pronounce the name of foreign names came up in the news, so I did some research.

It turns out that the Voice of America has a guide to how to pronounce names in the news with Audio snippets

If you need a name from a few years ago, try the search interface in

Reading Student Feeds in Penn State Blogs

| | Comments (1)

If you assign blogs to students, then one issue you have is keeping track of which students has which blog and what they posted.

There are several tools people have been using:

1) A folder in Google reader or other RSS Aggregator
2) Adding links in the sidebar with the Blogroll tool

But I decided to experiment with templates and widgets and I came up with a page which pulls feeds from different sources and lists them in one page.
Screen capture of table with links to student blogs and headlines

As you can see it's actually duplicating code from the Feed widget normally found in the sidebar.
Screen Capture Sidebar with External Links

How To

To get this, I first created a template, inserted a table, then cut and paste the feed widget code in each cell. I should warn you that you may not want to do this unless you're comfortable working with using raw HTML code.

1) I created a new static page in the blogs using the Blogs Index templates called "studentblogs.html". I was able to copy the blog header from the index.html template and change the title.

2) I created a table three cells wide with as many rows as I needed (I used Dreamweaver to help with that).

3) I then copied and pasted the Movable Type feed code below (from the Six Apart Forum) into each table cell.

<div class="module-feed module">
<h2 class="module-header">FEED TITLE HERE</h2>
<div class="module-content">
<MTFeed uri="http://BLOG URL/index.xml">
<ul><MTFeedEntries lastn="5">
<li><a href="&<$MTFeedEntryLink encode_html="1"$>"><$MTFeedEntryTitle$></a></li>

4) To finish the page, I clicked Save and Rebuild The page should be visible within your blog with the document name you gave it (e.g. "studentblogs.html")

5) I used the Blogroll plugin to create a link to this page in the sidebar of my main page.

The process is a bit tedious and I had to test a lot, but now that I have it, I really like it. I can tell which students have posted what at a glance, which is really handing when grading weekly assignments.

Web Background Color Glitches for Penn State Logo

| | Comments (0)

My colleague Dave Stong posted an informative entry on the problems of adjusting the colors of images vs. what the browser displays.

Unfortunately, I know EXACTLY what he's talking about. I create a version of the Penn State logo with a navy blue background to go on a navy blue web page...but the colors are off enough that you get a dorky rectangle around the logo.

On the other hand if you put in a logo with no background color, the edge looks very jagged.

Dave recommends Firefox, but here's what I did for years in Photoshop.

1) Found an image of the Penn State logo and opened it up in Photoshop.
2) I used the paint can to change the background color to match whatever Web hex color value I wanted.
3) When I did a "Save for Web", I set the background color to transparent.

At this point you are left with a logo with a fuzzy blue edge, and the fuzzy blue edge blends in with the background of the Web page and the slight differences go away.

FYI - I eventually created a master file with two layers - a top layer with just the logo and a bottom one for the background color. This made switching background colors a lot easier.

Link Checker Firefox Plugin

| | Comments (0)

One of the great time savers in the Web 1.0 (and 2.0) universe is the "Link Checker" plugin for Firefox.

If you maintain any Web site at all and have a set of external links, this tool is a major godsend. Once you install it, you navigate to any page, then right click and select the Check Page command. Link Checker will hit all the links on that page and color code them for you.

Green highlighted links work; red links are broken; gray links are waiting for the server or are e-mail links; and yellow links are unknown. This will narrow down your problem areas very quickly.

You'll still get broken-link e-mail messages, but hopefully not so many. Thank you kevinfreitas net!

Checking my Junk Mail Box

| | Comments (0)

My current e-mail has semi-decent junk filtering, but alas sometimes it's TOO good. So now I have a new chore...checking the junk box once a week for real messages.

Today when I was checking it, I found at least two messages I needed reply to quickly and about 5-10 messages I did want to read. Ah the irony - a tool which is supposed to make my life easier is making it quirkier.

On the other hand, at least I'm only exposed to the really obnoxious spam only once a week, so there are benefits.

BTW, I urge everyone to check their Junk Mail at least once per week. I really think you may have been missing some very important e-mail sent by me...

Adding Google Maps to a Blog or Web page

| | Comments (2)

It looks like Google finally added an embed code which lets you embed any map you create into your Web page

The Google Map embed instructions are fairly simple - you click "link to this map" to see the code. I recommend using the Preview function so you have exactly the zoom and location you want.

You can also create your own custom maps fairly easily with labeled pins (even color coded) and highlighting key areas. For once the vendor Google has provided decent MyMaps instructions, but I also learned from colleague Chris Millet's video tutorial.

I'm glad to see that Google Maps is letting us embed maps. There are a lot of courses including political studies, sociology, geology, linguistics, history and many others where viewing maps is crucial to understanding events. Now instructors can create maps to fill in the gaps, and it's great that you can zoom in and out. I even created a map to show the students where they went to high school (great for tracking dialects).

I thought I would embed a map as a demo. This shows the zip codes of State College and University Park

View Larger Map

The code looks something like this

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=",-77.844315&spn=0.181863,0.291824&z=11&iwloc=addr&output=embed">
</iframe><br />
<small><a href=",-77.844315&spn=0.181863,0.291824&z=11&iwloc=addr&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Quick and Dirty Color Check for Web Sites

| | Comments (2)

Since Penn State supports both Mac and PC, it is important to make sure Web site colors look decent on both Mac and Windows. The usual quirk is that colors tend to be paler on a Mac and darker on a PC, so sometimes a site looks fine on a PC, but washed out on a Mac (or fine on a Mac and very dingy on a PC).

Part of the difference is that that the gamma for Mac is set to 1.8 default, while on a PC it's set to 2.2 by default (gamma controls how pixels display color). The 1.8 gamma setting is lighter than 2.2.

I am lucky enough to have a two monitors set up on my Mac, so right now I calibrate my primary monitor to the Mac 1.8 gamma and the second monitor to PC 2.2 gamma.

It's not perfect, but since I've done it, I've been able to see some of the weirder color changes between platforms (warm tones are especially dangerous for some reason), and have been able to find decent compromise colors.

If you don't have a spare Windows, it's a good workaround.

A Jakob Nielsen Eyetrack Study

| | Comments (0)

I regularly read the Jakob Nielsen usability newsletter, and this week he presented results from some eyetracking studies from the U.S. Census Bureau site. In the scanning images, red shows frequent hits,

The point that struck me the most was that users were attracted most to navigational elements - either the search box, the left hand navigation buttons, the category links or the links list. Interestingly, the users skipped over the red text with the population countdown and the bottom Annual report link even though they were meant to be highlighted.

According to Nielsen, anything that looks like it could be an ad is typically ignored, so too much highlighting can be just as bad as too little. In this case the red text combined with the large font made the census count look a bit like an ad. Even worse, it's "not navigation", so users are really not paying attention.

I suspect that red text is most problematic on a home page where lots of other navigational choices are presented. It would be interesting to see how users react red text on a page with more information.