Syllabus
Web Authoring: Spring 2012

Activities

Taking Credit for the EWP

You'll add a "byline" div or p to your EWP.

A Little More with the Floating

Floating methods and peculiarities demonstrated on demand as needed (or not).

Here are the miserable remnants of last week's float demo.

End of the World Project - Static Grid with FancyZoom

Before proceeding to the next version of the EWP gallery, we'll enhance the static grid version with jQuery and the FancyZoom script. This replaces the "enlarged" link method with something a bit – fancier.

This will be a new, official version of "ewp_grid.htm". So before you start: Save the current version (completed for this week) as "ewp_grid_old.htm", or something like that. Then re-open "ewp_grid.htm" and follow the demo.

1. To begin: you'll need to add the "fancyzoom.js" script to your "js" folder and a link to this script in the HEAD of your HTML file.

2. Don't forget to credit the fancyZoom script.

This gallery uses Steve Smith's jQuery-adapted version of FancyZoom. The code was accessed via http://orderedlist.com/blog/articles/fancyzoom-meet-jquery/ on [current date].

Include the credit information both in an HTML comment near the start of your "gallery" div and in a p element in the "footer" div of your EWP grid page.

3. Next, modify the HTML structure for each of your "figure" divs. As with the plain static grid, each "figure" div contains the preview size image contained inside a link. However, whereas the link in the previous version is to the large size version of the image, the link in the zoom version is to an element located in the same file (i.e., a div on the same page identified by a unique id attribute).

Note: The rel attribute (="enlarged")is no longer included in the link. Be sure to remove this attribute from your code to avoid a conflict with new script.

A few feaures to look at here: (1) id (#) link in the anchor element; (2) the new title attribute in the anchor element; and (3) the span element in the caption.

4. With the "figure" div set up, the next step is to add the divs that contain the large size images. Add these after the closing tag of the "gallery" div.

Note: You may want to enclose this second group of images in a single "zoom-figure" div to help keep your HTML organized. As for styling the large images, keep in mind that the script adds id attributes when the zoom takes effect. We'll use Firebug to understand what happens when it does.

5. Next, add the follow script to the HEAD of your HTML file. This activates the zoom script.

Location Documentary Project Design

You should now a good bit of diverse content across several pages. The next thing to do is work on the design.

Start with fixing the HEADER. Then:

• Body background: darker than wrapper color
• Fonts: must use a font stack with fully styled typography, not the browser default
• Wrapper width: 900px
• Wrapper (or content div inisde wrapper) should have padding
• Wrapper color: white or near white
• Wrapper should be centered inside body
• All images need to be saved at (or very close to) their display size.

Hover state of links should NEVER change the layout of the links (as they do on this page [unless the problem has been fixed]).

CRAP for LDP Survey

Establishing the visual logic of the survey through design will give us a chance to put the CRAP principles to work in resolving a specific presentation problem.

First, let's look at an example of survey design from one of the LDPs.

Next, take a look at this (similar) example from the world of print: Rolex Awards for Enterprise

Next, let's go over this CRAP principles design demonstration based on the Rolex Awards example above.

Finally, let's apply this to one of the LDP surveys.

Activities

Floating Demo

A quick demonstration of the utility and peculiarities of the FLOAT property.

Project Home Pages

Basically a review/rehearsal of what we worked on last week. Create preliminary home pages for your EWP and LDP sites ("ewp_home.htm", "ldp_home.htm"). Use the basic HTML template. Add title, h1, CSS and JS links, "home" ID for the body, and site navigation with the "current" ID for the home page link. Leave the "content" div on each page empty for now. You'll be filling those in soon.

End of the World Project - Static Grid

So far you've completed a basic linear version of the EWP, part two of the project assignment. We'll tweak this a bit further by adding footer content) and go over any problems you might have so far.

Next, we'll move on to the static grid version of the project, which uses CSS for its layout.

You should have the "ewp_grid.htm" you made last week. It should still have linear page content and look like the linear page. But that will change. You should now have three distinct HTML files: "ewp_linear.htm," "ewp_grid.htm," and "ewp_home.htm". (If you need to keep extra drafts of these, give the other drafts numbers. The names of your main [ie., most up-to-date] versions should remain number-free.)

Note: Feel free to divide your "images" folder into sub-folders (e.g., "ldp," "ewp") in order to keep your images separate.

Location Documentary Project

If there is time ...

Activities

Adding Simple JavaScript

We'll use jQuery framework and some simple JavaScript to get external links (those with the rel="external" attribute) to open in a new tab/window.

1. Create a "js" folder on the desktop (or in whichever folder you're using on your local machine).
2. Download jQuery (the "production," i.e., "minified" version); save "jquery.js" file in "js" folder. Note: Click the download button. Copy and paste the code into a new Notepad file. Save the file as "jquery.js" in your "js" folder.
3. Save a new Notepad file as "basic.js" in "js" folder.
4. Then add the following code (script) to your "basic.js" file and save.
   // open rel = external links in a new tab/

$(document).ready(function() {
   $('a[rel="external"]').click( function() {
     window.open( $(this).attr('href') );
     return false;
   });

   $('a[rel="enlarged"]').click( function() {
     window.open( $(this).attr('href') );
     return false;
   });
});

5. Next: Add these two script elements (the code below) to the head of your current LDP and EWP drafts.
   <script src="js/jquery.js" type="text/javascript" ></script>

<script src="js/basic.js" type="text/javascript"></script>
6. Test your links. The external links and enlarged images should open in new tabs rather than in the same tab as the linking file.
7. Upload your new "js" folder and your updated LDP and EWP files to your "drafts" folder on Eden.

Applying More Content and CSS to the Quine Page(s)

We'll work from the expanded Quine exhibition home page we conmtinued to revise last week.

First, we'll set up a site navigation menu for a Quine exhibition web site. Essentially, this is an unordered list (ul) containing relative links to other pages. Because it's a site-level (rather than page-level) feature, it should be located in the "header" div rather than "content" div on the page.

We'll then make a second page, in order to test the site nav. Then, we'll add some new styling using CSS. Among other things, we'll look at two different ways to style and organize the site navigation. We'll stick with the second method, but it's important to understand both methods, which can be applied to many design tasks beyond the site nav.

We'll use the site nav styling to consider some important applications of the CRAP principles covered in the reading for this week.

After the demo, there'll be a CSS workshop. During this, work on completing the CSS intermediate tutorial at HTML Dog, again working with your Quine page(s).

Location Documentary Project

If we have time, we'll; start building a first draft of this page in class. As with other work, start from the basic HTML template. Create and link to an external CSS file. Fill in the title and h1 elements and proceed from there.

Organize your page into sections with h2 and even h3 elements labeling each section. Use the "figure" div pattern for your images. None of your images should be on its own. Each should be inside a "figure" div with a caption identifying the content of the image.

Activities

Applying CSS to the Quine Page(s)

Following the CSS demo (above), practice applying some basic CSS of your own. To help with this, follow the CSS Beginner tutorial at HTML Dog.

As part of this exercise, you'll need to add some more features to the page. In particular: add five or more external in-text (hyper)links to the main introductory text. Give each link a rel="external" attribute as demonstrated above.

When you're finished applying CSS (as much as you can), upload your version of "quine.htm," "quine.css," and any associated image files to your "drafts" folder.

. . .

Note: HTML Dog covers three ways to apply CSS to your HTML file. For this assignment, you'll use an EXTERNAL file (i.e., drafts.css) that you'll link to from the HEAD of each of your html files.

Following HTML Dog, you'll add styling to your body, paragraphs, headers, table, list, etc. Add text styling, color, margins, padding, and borders to the elements of your page. Try to get your page to look distinct but also clean and readable.

For a list of Common Fonts and other useful font-related material, see the Font Resources at Browser News.

For a quick one-page reference, here is a CSS Cheat Sheet.

Activities

Important Preliminary Note

If you are new to this, then work on a PC rather than a Mac in class. All demonstrations in class will use a PC and, in most cases, PC-specific software. We have much to do in class and the instructor will not have time to help you with Mac-specific problems (e.g., saving files properly in TextEdit or transfering files using Fugu or Cyberduck).

SSH, FTP, and Folders

First, if you haven't done so yet, save/copy your Bio Page homework (the HTML file and all your images) to your local desktop (i.e., the desktop of the machine you're using today in class), and open the HTML file in Notepad.

Next, if you haven't done so already, then create an "images" folder on your local desktop for storing your images. Move all your images (i.e., image files) into this new folder, and, as needed, update the SRC links in your HTML file to reflect any change in the image files location. For example, if your HTML code looked like this:

then, once you've moved your image into the "images" folder, you'll need to change the HTML to this:

That way, you instruct the browser to look inside the folder named "images" for your image files (where they should all be at this point).

Once you've made these changes, save your file and then re-save the file ("File > Save as") as "bio_01.htm". This new file is going to be your first draft, saved for later reference, and should not be altered.

Next, close "bio_01.htm" and re-open your original file ("bio.htm" or whatever you've named it). This is the version you'll keep working on today in class (and possibly beyond that).

Using the SSH application, we'll set up folders on Eden for storing and displaying course work. First, I'll demonstrate the process for setting up the folders using the SSH software. Then you'll set up your own folders by following the linked SSH tutorial.

Remember the naming rules!

Once you have the folders set up, upload your Bio Page homework to your new "drafts" folder. Be sure to upload "bio_01.htm", "bio.htm," and your (new) "images" folder. Once you've uploaded the files to Eden, check that they can be viewed on the web. If you go to the URL for either page and the browser window says "FORBIDDEN," you'll need to reset the permissions for either the file or one or more of the encompassing folders to "755".

Next, respond to the "Bio Page" thread on the Class Forum. This is where you'll supply a link to your page so that the instructor and others can access the page. Be sure to check the link(s) before logging out.

Remember that a link to your work needs to be posted in the correct thread in the forum. If the link to your work is missing (or if it doesn't work), your assignment will count as NOT submitted.

Bio Page / HTML Review

Now that you've successfully submited your work via the Class Forum, we'll take a look at a few of your pages – paying attention to (1) how well they meet the content requirements and (2) how well the implement the HTML.

As needed, we'll review the process of putting together a basic bio page. This will give us a chance to go over some HTML basics in more detail than we did last week.

Since image display problems tend to be among the most common on early web pages, we'll take a look at some techniques for fixing your images: both getting them to display and getting them to display properly (or optimally, or reasonably close to that).

If any of your images fail to display, refer to this image display problem checklist.

If your images successfully display, there are still a few things we'll need to check – namely, size, scale, quality, and proportions. To help us to go over these points, we'll use this sample Bio Page: 500 words about Me.

More with Quine

Depending on how much time remains, we'll return to our Quine exhibition website example from last week and begin to take it a bit further. This will become the first stage a continuing exercise that we'll use to practice and expand our use of HTML as well as introduce CSS and some initial scripting.

One thing I want to do with the Quine demo this week is to develop the basic structure from the minimal markup we started with last week to the slightly more structured markup of the basic HTML template that we'll use as a standard starting point for web pages for the rest of the semester.

Activities

Photoshop Review

We'll take a look at some basic features of graphics editing and manipulation, using the Adobe Photoshop application. Specifically, we'll concentrate on features that you'll use to revise images for your personal Bio Page and other work this semester.

This will be a brief review. You'll be expected to know how to do the following (it's a requirement for taking this course):

• Resizing
• Saving for the web
• Copying & pasting
• Working with layers
• Cropping
• Adding text

If you're not familiar with any of the above skills, try one or more of the many online tutorials that cover them. The tutorials can easily be located via Google.

HTML Beginner Tutorial

Web pages are structured using HTML. If you are new to HTML, then complete this HTML Beginner tutorial (at the HTMLDog website) before you start the Bio Page (see below).

For the tutorial (and all subsequent activities), work in Firefox. Do not use IE. If you don't have Firefox installed, get Firefox here.

The tutorial recommends that you use the Notepad program on a PC to write your code. When saving your file, select "All Files" as the "Save as type" option and give your file an "htm" extension (not a ".txt" extension):

If you are working on a Mac, try using TextEdit. To save your HTML file properly in TextEdit, you'll need to set the application to save your file as PLAIN TEXT. You'll find this option on the FORMAT menu:

Also, when you save in TextEdit, give your file an ".htm" extension, not a ".txt" extension. If the program asks if you want to use the ".txt" extension, decline its offer.

Web Bio Page

The Bio Page will be your first substantial web page of the semester. Technically, it uses nothing more than the HTML covered in the above tutorial.

Note: Do not use the page you made in the tutorial for your bio page. Rather, use the basic XHTML template this simplified template for your bio page. Copy this basic code from the text file into a new Notepad file and save as "bio.htm". Then start adding your markup (i.e., HTML) and content.

Complete a draft of the assignment as homework for next week (see below). The content (some writing, some pictures, some online info-gathering) shouldn't be a problem. As for the HTML, if you're new to this (as many of you will be), just do your best with it. Next week, we'll address any major problems. (Also bear in mind that the Duckett book will help; so get the book as quickly as you can.)