Communication 326: Web Production

Final memo... as sent by e-mail Dec. 14

Thanks and congratulations to those of you who have already alerted me
that your projects are finished! You can stop reading right here...
or check below for last-minute editing ideas. I won't actually be
taking inventory and grading the sites until later in the week, along
with all the story revisions and exams for my 104 classes.

Here's hoping we have enough computers to go around on Tuesday night!
If not, I'm told the (four) Macs at Walker's main lab and the Macs at
Young have the same software. I assume some or all of the PCs in those
labs have Photoshop and Dreamweaver, but the help desk should be able
to tell you for sure.

The Walker lab is open 7a.m.-midnight; Young's doors close at 10,
but I'm told they let people who are already inside
keep working. (I haven't been there, and I don't see a web page
anywhere giving Young lab info.)

Browsing through the unfinished project pages, I'm noticing a few
recurring problems that are especially worth fixing if you will be
using your pages as all or part of a portfolio:

1. The easiest to fix problem is simple editing: Check the SPELLING of
everything on the site. Dreamweaver has a spelling checker, but you
can also copy and paste everything on a page from your browser into MS
Word, check the spelling, re-read for "Pullet Surprise" spelling
errors the checker won't catch, then make any changes in the HTML.
(Nothing spells "amateur" better than typing "profesional" or
"amatuer.")

2. A second problem is text that is hard to read, which can be for a
variety of reasons:
because the type is too small, the background color is too close to
the text color, the text is all-caps, or the line-length is more than
50. Large blocks of centered text are also difficult to read.

3. Third problem: Photos that don't look professional. If you have
original photos make sure they look like something you might see in a
magazine, not like something from a Facebook or MySpace page or family
"how I spent my vacation" scrapbook.

-- If you are using one person's picture (yourself or someone else)
from a group-picture snapshot, crop it all the way down to "headshot"
or "mugshot" proportions, with your face centered. Don't leave things
in a lopsided position showing only one arm or one shoulder. If you
have outdoor shots with a horizon-line visible, make sure the line IS
horizontal, not skewed at an angle. Don't do what I did in this
picture: http://bstepno.wordpress.com
(At least by writing a caption I turned "mistake" into "lesson.")

-- Nothing says "amateur" like redeye. Fixing it is a couple of clicks
with Photoshop

-- Use photo captions to identify people and their relationship to the
subject matter of the page, if it isn't obvious.

-- Use "alternative text" on all images that contain information;
otherwise users of some browsers will just get an "unknown image" icon
on your page.

4. Portfolio tips: Whether you look at these notes now, during your
final "portfolio" course, or sometime before graduation, check my
bookmarks for examples and advice on making a portfolio that helps you
find a job. These portfolio sites and online resumes include student
and pro examples, some heavy on original design, others adapting
blog-style WordPress templates:
http://delicious.com/bstepno/portfolio

Also see the "good and bad resumes" comparison video here
http://www.lynda.com/home/Player.aspx?lpk4=57139

(That's one of several free parts of a longer "Lynda.com" course that
might be a good continuing-education investment.)

Finally, from our own career services office:
http://careers.asp.radford.edu/Resumes/ThePortfolioProgram.html

5. Interactivity & multimedia:
Some of you are using embedded video widgets from YouTube and other
sites. You might want to explore additional widgets available from
Google, Yahoo, Widgetbox and other sources. You can find widgets to
add videos, photo slideshows, RSS feeds -- even football and Nascar
standings.

Obviously, it is too late for you to do much with those on this final
project, but I thought you might want some Web stuff to tinker with
over Christmas break. If you want to go even farther, read on...

Most widgets use small "javascript" programs. Javascript is a
programming language (not just a "mark-up" language like HTML and CSS)
and can be used to make page elements DO things, such as call for
video subscribed from another site. Dreamweaver includes a library of
javascript programs that combine with HTML and CSS to form its "Spry"
widgets and "Behaviors."

You don't have to be a javascript programmer to use Dreamweaver's Spry
tools or paste widget code into the HTML of your page, but be cautious
of scripts that aren't from name-brand sites.

Here are some widgets and articles about them:
http://www.google.com/webelements/
http://widgets.yahoo.com/
http://champions.groupsite.com/post/how-to-embed-a-widget-for-dummies-like-me
http://internet.suite101.com/article.cfm/where_to_find_widgets

If you are interested in understanding javascript itself, the fastest
fun introduction I've seen is by Russ Walter, my original computer
science professor, author of The Secret Guide to Computers -- not
the typical textbook. Here's javascript:
http://www.angelfire.com/nh/secret/30JavaScript.htm

(Russ's whole book is very affordable, and fun.)

Our old friends at w3schools have a more complete tutorial,
http://www.w3schools.com/js/default.asp
including sample code for one of the most popular javascript effects:
Making an image change when you move the mouse over it, by swapping
old and new versious of the image:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_animation

That's it... Apologies for the last-minute information-overload. I
just want to make sure you all got your money's worth.

:-)

This just in:

Shoutjax -- another widget site, recommended by Mike Andrews