Journals

9.1.08 update: I've posted an overall index of pages to student journals sites. I generated this based on the criteria for where your journal site was supposed to be located on Polaris (i.e., in the comm341 directory one level deep in your public_html director, with the index page titled "index.html"). So the URL will look like this:

http://people.clarkson.edu/~YourUserID/comm341/

Check the link to your site to make sure it works. If it doesn't work because you put it in a different location, you'll need to move it to the correct location. If it doesn't work because I scrozzed the URL somehow, email me to let me know.

Journal assignments are posted here in reverse-chronological order. The journal entries must be completed before the start of class (because they usually complement the reading assignment you need to do before class). Be sure to put the journal title (descriptive text and J number) as well as date due on the assignment.

I've set up a sample journal to show you the basic format for the main journal index page as well as a couple of subpages (one including a sample screenshot, which you'll sometimes need to do for journal entries).

We'll go over more of the specifics during the Dreamweaver tutorial in class, but your journal needs to be in a specific location.

J8: Five Sites for Topical Site Design Inspiriation. This entry is part of the larger topical site project, so see that page for a description of this entry.

J7: Markup Up a Web Biography (Zach's journal assignment covering WDN 9 and 10)

I've attached the pdf explaining the Journal assignment [link]. (As it says at the top of the document, this is for a fictitious website. It's just information that you might find relevant/realistic instead of more information about "John Doe.")

The links I promised in class:
http://htmldog.com - the site I used in class which is useful for quick referencing
http://w3schools.com - a site for more learning-oriented material
http://reference.sitepoint.com/html - a very thorough resource with information about browser support (something we'll talk about later in the course)

(Yes, a definition list would have been appropriate for the above, but that isn't widely supported in email)

Feel free to email me (shephezj@clarkson.edu) if you have any questions about document structure, text elements, the assignment, or the class in general.

J6: Banner Image on Demo Journal Index Page: After we complete the brief Photoshop tutorial on 9.18, you'll need to create a simple banner image for your own journal index page. This is due by 10.2 (which gives you some time to complete it before Fall Recess—don't wait until the last minute). In your list of entries on the index page, you can put an entry for "J6 Banner Image on Journal Index Page." The banner image should be used at the top of your index page as well as the page you create for J6.

In the actual J6 entry page, tell me

• Where you got the image (the URL, title, and photographer)
• What Creative Commons license was used
• What you did to the original image (filters and image effects)
• What font you used for text
• Anything else you did to the image.

Your final banner image should

• Use an image from the Flickr Creative Commons pools. Read the licensing information (you may have to dig around to find it) and follow the licensing information. If you simply need to credit the author, you can do that at the bottom of your index page.
• Crop the image and resize as necessary.
• Include text laid over the image that includes your name and "COMM34 Demo Journal"
• Design the image and text so that it (a) reflects a tone or feeling that you want to convey and (b) is legible. Experiment with different text colors and fonts as well as image effects (including filters and adjustments to hue/saturation, contrast, etc.).
• The resulting .jpg image should be a maximum of 800 x 100.

The example page I set up in class might be helpful to look at if you want your banner image to center (left to right) within the browser window. If you view source on that page, you'll see how the embedded CSS declaration is set up in the <HEAD> section; you'll also need to modify the <IMG> tag within the body section to add in the CSS class.

J5: Respond to Andy Rutledge's "The Employable Web Designer". Read Rutledge's article and compare what he says to your own skills and knowledge. Write a journal entry that describes how your own experiences and plans correspond to Rutledge's claims about the traits someone needs to become a web designer. Obviously, some aspects of your response will need to address what you plan to do, career-wise: If you don't plan to become a professional web designer, are there aspects of Rutledge's list that would still apply? If you do plan on becoming a web designer, are there some areas that you have (or will likely have) more or less experience than others? (I don't plan on counting words for this entry, but it should be somewhere between six and eight substantial paragraphs.)

J4: .htaccess Site Online: Using the information covered during the in-class tutorial, password protect your comm341 folder. I'll give you a userid and password to use in class. This will provide some minimal security for posting materials to the web that you don't want widely available. (Note the word "minimal"—it will prevent casual access, but I wouldn't post extremely private info there if I were you.)

(Note: In an earlier version of this assignment, you told to create and .htaccess protect a new folder called "extra". You can just put the .htaccess protection on your whole comm341 folder (which is what we did in class during the tutorial, so you're probably all set.)

In the list of journal entries on your main journal page, you can just write, "J4: .htaccess protected comm341 folder"

J3: Interface Design and Site Design (WSG 2 and WSG 3)
Analyze (in about 500 words) how the topics discussed in WSG 2 and WSG 3 relate to the web site of your choice. Be sure to think about both “Interface Design” and “Site Design” as defined in the reading. Pick at least three key concepts from each chapter and analyze how well the site implements those concepts (and if it doesn't discuss why that's a good or a bad thing—the concepts are just guidelines, not laws).

Some ideas to consider include: Do the site’s pages include all of the information WSG says is important in order to make pages freestanding? How consistent is the site’s graphic identity/user interface? What elements of the site contribute to or detract from its consistency? Which basic information structure does the site most closely conform to? Why might the other structures work or not work for the site? In what other ways does the site follow the guidelines set forth in WSG 2 & 3? Does the site break any of WSG’s guidelines? How do these breaks affect your user experience for good or bad? 

Be sure to include a link to the site you're analyzing in your entry. (You don't need to include any screenshots.)

J2: Demo Journal Online: See the sample journal pages for correct format/location. Your first actual journal entry (a separate page from the index, linked) will be J3, below. Both J2 and J3 are due on the same day.

In order to get credit for this journal entry (and all subsequent ones), I need to be able to find your pages at this location:

http://people.clarkson.edu/~youruserid/comm341/index.html

Obviously, you'll need to replace the "youruserid" with your own Polaris userid. For the actual entry for J2 on that index page, you can just put "J2: This page." See the sample journal pages for how to link to later journal entries (J3 and after).

J1: Sites You Like, Sites You Hate. Find two websites with good design and two with bad design. You can base some of your like or hate on personal feelings, but you should also try to use some of the basic things we've talked about in class and from WSG 2. Take a screenshot of each. Put screenshot, URL, and write one paragraph describing what you like/dislike about each site (both your personal judgments and from the class discussion/readings).

Print out the journal and bring to class Tuesday. (Later journals will be due online, but this one is print since we haven't covered how to set up a website yet.)

Taking a screenshot in Windows: Press the PrtScn key to put a copy of your screen onto the clipboard. You should then paste the image into a blank Windows Paint or other graphics program and crop out any unnecessary portions (like your Desktop). You will probably also want to resize the image so it's not enormous. You can then copy and paste the image into a Word document as part of your journal entry.

Taking a screenshot in OS X: Press (at the same time) Apple+Shift+4 (the number 4 above the e and r keys, not the 4 on the numeric keypard. Your cursor will turn into a crosshair pointer, which you can use to drag-select the portion of the screen you want to capture. This will create a file on your Desktop called "Picture" plus a number (the number will increase for each subsequent screenshot). Open the file in a basic graphics program or Apple Preview to resize and/or crop as necessary. You can then save the file to disk and import it into your Word document.

There are many more advanced programs for capturing screenshots, but these will work for now.

J0: Introductory Survey. Complete the survey. Pretty straightforward. This gives me a better idea of the level and types of knowledge about design and computing people in class have.