Read the Music While You Listen

This week’s Dreamweaver lab assignment (number 5) has three objectives:

• create a auto-stretching web page
• build a set of swapable images
• add a sound file on the page

The auto-stretch part has the cornices and pedestals of ionic columns with a solid color that adjusts to the window size as the column (it’s actually a table cell with a solid background color). The cross beam at the top is setup the same way. The music control buttons are there by virtue of the underlying audio file (Shockwave flash). The page number buttons change color when you move the mouse pointer over them, which also causes the related page of music to display between the columns; that’s the swapable image bit. The sound and the score images are therefore synchronized only by the reader’s music reading and mouse movement skills.

Website Reorganization

Five days late, but I have redone the home page as well as the whole structure of the web site, including easier navigation, several “about” pages, and a site map. The content has been expanded to include three other classes I’m taking: HTML, Image Editing, and Intro to Computer Graphics. Adding in Java will be next, maybe over Spring Break.

Table Layout

The latest lab (#4) assignment for the Dreamweaver class focuses on using a table to control the layout of a web page. The content is a little eccentric, but the underlying table complete with rollover buttons does work. There are five pages (Lab 4 Home, Soprano, Alto, Tenor, and Bass) each of which shares the same layout. The only difference is one button on each page is not active (e.g., the Soprano button in the Soprano page). From a usability standpoint, the buttons should be graphically more obvious (there are seven of them, six on the left side and one for Mr. Shelley on the right). I had to skip ahead to the end of the book for the Photoshop class to learn how to slice an image and save the slices (actually rectangles) as separate images each of which was placed in a cell on the underlying table. For the buttons, there are two images in the cell, one is displayed when the mouse pointer is on the cell, the other when the mouse moves off the cell.

The video of the music is almost illegible; I didn't spend much time on it and it shows.

Later today I may have the site home page re-done with a table layout. Unfortunately, I've outgrown the Lockhart ranch; there just aren't enough buildings.

Many thanks to the volunteer proofreaders out there (not their :-).

Ancestral Migrations

The third lab assignment in my Dreamweaver class is published to the website. The parameters of the lab involved a lot of navigation links and hotspots on images. For content I focused on the Harney branch of my ancestors as they moved from the East Coast to the Rocky Mountain area. Initially I thought it would be appropriate to use maps from the approximate period, but my choice of maps turned out to be less than ideal. If I rework the content, I’ll use brown and white maps with minimal landmarks to allow the migration route to show up better. I should have know that from the beginning, having spent so many years reading the West Point Atlas of American Wars. But the lab is due now, so no time to make that kind of change. The text is also rather sparse, since that was not the focus. Another reason to rework this set of web pages would be to flesh out the information presented and maybe add some photographs. I’m also not particularly happy with the background photo and not because it is from an entirely different branch of the family. I just don’t like the repeating image idea. Using a table to form the basic layout would have been a better idea, but it would have taken me longer to figure out and it wasn’t part of the spec.

Doo-Wop Loop

Computer languages all share three essential characteristics; they execute some set of commands through sequence (one after another to the end, then stop), selection (if something is true, do this, otherwise do that), and iteration (do these commands until the cows come home). In Java, one of the languages I’m learning, iteration comes in three flavors:
- a for loop, where the computer is told to iterate a specific number of times;
- a while loop which first tests to see if the loop should be entered in the first place, then if it is, to iterate until some condition is true, such as freezing temperatures in some nether region;
- and a do while loop which is very similar to the while loop except it always iterates at least once.
Now, there is speculation in some circles, or so I’ve heard, that there is (or was) a fourth kind of loop that is similar to the do while loop and tends to be used only on specialized SATB computers (and its variants, such as SAB or SSATB). Here is an example:

doo {

} wop (soloText.compareTo(“friends”) == 0);

The SATB type computers are actually clusters of several computers, sometimes as few as four or five, sometimes as many as 20 or 30. One of the computers is designated the controller and will execute commands of considerable variety and complexity (not shown in the example above) while the other computers run the commands shown, over and over in a doo-wop loop.

Find the Difference

Learning Photoshop requires a large amount of repetition, not unlike learning to sing or paint. As a way of reinforcing that, the latest little project is to take a photo and make a modified copy that has various additions, changes, and deletions. Take a shoe, for example, and change its color, or rotate a cup about its vertical axis, or make a copy of a car in the background and put it somewhere else on the photo. All of that fundamentally involves developing the ability to use a couple dozen different selection methods (or so it seems; I haven’t actually counted them), learn which pixels to include or exclude at the edge of the selection, put the selection on a new layer and then using one or more of the many color, size, and orientation manipulation methods to alter the selection. The result of the project is to present the before and after images and see if someone else in the class can spot all the changes. So I present to you, dear reader, my modest attempt, which contains nineteen changes. See how many you can find.

The original photo (click on it to see a larger version):

And the modified version:

The photo is of the Ca D’Zan in Sarasota, Florida, built by John Ringling of circus fame.

Background, Image Map, and More

The web site has a new look; I’ve learned how to add background images. The main page has a background picture I took in Wyoming (near the Big Horn River) that is 70% transparent (done using Photoshop). The image on top of it is from the Lockhart Ranch farther downstream on the river in Montana if I remember correctly. I’ll have to change the image in a couple of weeks because there are more than three lab assignments in the course.

Lab 2, just completed, had the goal of creating a mini-website with at least four pages, background image, different fonts and colors, and navigation links (e.g., Home). Beyond that any content was acceptable. Hence the rather eclectic mix of subject matter. I also gave the Lockhart Ranch image and image map, which defines specific areas of the image as clickable links (also known as hotspots). Move the mouse over the image and you’ll see the mouse pointer change to a hand and a little pop-up box with Lab 1 or Lab 2 appear. Click and you go to the appropriate web page.

Our intrepid instructor walk though an example where he explained some computer terms (bit, byte, nybble, word), so I played off of that a bit (or a nybble). I also took an HTML exercise that appeared in this blog earlier and re-jiggered it. If I get really clever (and learned in the tools of the web) I might rework it again using an animated map.

A bit of trivial drivel: at the bottom of the home page is “Palestrina Build 20100202”. This is a version indicator. Rather than using Revision A or Version 1.2, I chose the typical software development convention of using a build number. All the pieces of the web site that you see now regardless when they were created, together represent a single “build” of the web site as of 2 February 2010 (20100202 = YYYYMMDD). Because I like music, I also threw in Palestrina because he died on 2 February.

Class Starts

The first three weeks of class has been nothing short of a drenching. From the fire hoses of instructors has come a tsunami of knowledge through which only now am I learning to swim. Since the classes are all primarily vocational in nature, as opposed to academic, repetition is key. Figuring out how much repetition is enough to learn, say, the syntax of the printf method (a Java programming thingee that formats what the user sees on the screen) or to become familiar with the lasso tool in Photoshop (great for rounding up pixels that need to be included when selecting one apple from many in a photo) is just as important. I could, and have, spent hours selecting and extracting objects from a photo, only to find it was too much; I should have stopped and move on. It’s all just too much fun.

The most visible of my classes for you, the reader, will be Dreamweaver and XHTML. The former is Adobe’s development tool for web sites and the later is the coding language that governs the layout of a web page. I have a web site: RuppOnline.net, where all of my Dreamweaver assignments are posted. The method for turning in assignments is not turning in paper, as those of us who attend school in the last millennium did, but to post to the web site. You see what the instructor sees. I am starting to join the 21^st century. I have latitude to add other items to the web site, so long as it is kept separate from the Dreamweaver assignments, so results of Photoshop, Illustrator, and maybe even Java will appear there.

Right now, all you will see is Lab 1, a simple set of web pages with things one typically finds on the Internet, such as text, images, video, and music. I’m working on Lab 2, which adds some more features and should be operational by the end of the day tomorrow.