A Project Completed

The first of the end-of-semester projects is done, tested, and released. Four more to go. Back to work.

Last Dreamweaver Lab

This, the last lab (#9) for the class, introduced us to the process of submitting data to a server application. Our instructor has written a short program that echoes back the information the form sends; next semester I'll learn how to write one myself using PHP and mySQL. If you should be tempted to try the form, enter fictitious data. The program on the server does not, I’m told, store anything in a database, but it is still good practice to not give out any personal information unless you really understand where it is going.

Cascading Style Sheets

This week’s installment is all about cascading style sheets, which you won’t see just by viewing the mini web sites (there are two, Lab 7 and Lab 9). But if you were to look at the HTML code behind each page, you would see only content. All of the formatting, except for the table structures, is done in a separate CSS file. For Lab 7, this meant designing one of the ten web pages (HTML file and CSS file), then simply referencing that CSS file to do all of the formatting on the other nine web pages, a considerable time saver. As I built the other nine pages, I came across a problem or two and a design tweak or two. To correct the problems and tweak the design, I made the change in the style sheet alone and the change was automatically applied to all pages.

Lab 7 is an attempt to build something similar to a commercial web site, with an emphasis on structural unity between pages and ease-of-use. The set of pages includes an introductory page, one about the company, one on contacts, one on service, and one for each product. Since I am not in a position to actually sell anything, the product line is a bit whimsical. In a future class I’ll learn how to connect a database to a web site which will remove the need for managing a fair amount of content on each HTML page.

Embeds

The highlight of this week’s Dreamweaver assignment was learning how to embed video, so I had to go create one. And being in possession of music notation software (Finale), I had to write a sound track. I chose not to rent or build a soundstage, however; the kitchen fit the bill nicely, the bill being $0.00. Also, the film is more of a short subject rather than feature length; the cast did not want to spend a lot of time on the project.


The other two parts of the assignment also have to do with embedding, namely an mp3 (a playlist was my choice) and a small program (Java applet). No reporters were embedded because none seemed interested. The Java applet was written during a class I took ten years ago. In the class I am taking now we have not yet progressed beyond applications that run from the command line. Towards the end of the semester I should have some newly-minted Java applets to show.

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.

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.