Another Project Done

Building two web sites was the ultimate goal of two of my classes (one web site each, of course). Both are now done and released to the world. They are quasi-semi imitations of commercial web sites, one for an ERP company and the other for a CRM company. There is, however, no rest now as three other projects remain, as well as the last of the small assignments. Speaking of which there are four (X)HTML labs that are done but not posted on the web site; that will have to wait a week or so.

A Project Completed

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

The Flower and the Trimotor

Now is the season of semester projects, heaped one on top of the other, tumbling toward exam week. Two Photoshop projects have been completed and added to the website. The first is a merging of two images in a sort of tromp l’oeil fashion, which took forever (if 16 hours is forever) and a bunch of false starts. But along the way I learned on of the Secrets of the Trade, to wit, find a tutorial or two, go through them, then find suitable images and apply the techniques learned. The second project, that of a Ford Trimotor photo aged several decades took only four hours, including the time spent on the tutorials.

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.

Some Photos ‘Shopped

Photoshop has a wide variety of filters out-of-the-box, as well as innumerable available out on the internet. I’ve posted three more of my experiments with them, one of which also contains effects via adjustment layers; they are the Forsythia in Autumn, Basswood in Spring, and Lake Independence at Dawn.

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.

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.

A Formal Lesson in HTML, Namely Lab the Second for MMDT 1021, Demonstrating the Use of the Paragraph Tag and Alignment Attribute

Napoleon's dispositions of the French army at Austerlitz just after sunset on 1 December 1805. The basic alignment was north-south and faced east.

The right flank was thinly held.
Stretched some three miles along Goldbach Brook were the 6,000 infantrymen of Legrand's division.
In front of them was a thin screen of cavalry tasked with keeping an eye on the movements of the combined Prussian/Russian/Austrian army who were gradually shifting south in an attempt to get around the French flank.

The center was responsible for only a quarter of the battle line. 17,000 infantrymen (the divisions commanded by St. Hilaire and Vandamme) were positioned in two lines of regiments behind Bosenitz Brook from where it emptied into Goldbach Brook to the tiny village of Girschkovitz.
Behind them were 7,400 cavalry under the command of Murat.
A squadron of cavalry was deployed as a screen in front of Girschkovitz.
The center and right flank, except for Murat's cavalry, made up Soult's IV Corps, one third of Napoleon's army.

The left flank, also a mile and a half long, straddled the Olmutz road and was anchored on the heavily fortified hill of Santon hill. It consisted of two corps and the Imperial Guard, more than half of the army.
They were deployed in depth with Lannes' V Corps in front. Lannes placed
Suchet's division in front between Santon and Girschkovitz. Behind him was
Caffarelli's division (on loan from III Corps) which was spread along the banks of Bosenitz Brook, and behind him was
Oudinot's division for a total of 19,200 men.
The Imperial Guard under Bessierres (5,500) were directly behind Oudinot and in front of
Bernadotte's I Corps of 10,500 men.

Napoleon justified his asymmetrical position with a thorough understanding of the local terrain and excellent intelligence gathering. During negotiations between the French and the Allies (Prussia, Russia, and Austria) over the past several days, the latter had allowed the French delegations almost free reign to wander about the Allied camp. Napoleon had good information on the high number of new recruits in the Allied army and their relatively poor training and leadership. He also knew that the Allied army was run by committee and hampered by differences in language. Napoleon countered the Allies' numerical superiority by exploiting this information. The logical avenue of attack for the Allies would be along the Olmutz road, which would give them a chance to pin the French against the Schwarzawa River, hence Napoleon's weighting of his left flank along that road. By deliberately weakening his right flank, Napoleon sought to tempt the Allies to strike there with the intent of turning the French flank and rolling it up to the Olmutz road. Napoleon knew that the terrain on his right flank was well suited for defense and would slow any Allied attack. He also felt that the more impulsive Allied generals would see the temptation but not think through the risks. If the Allies took the bait, he would have the opportunity to inflict upon them a major defeat.

Source: Vincent J. Esposito, A Military History and Atlas of the Napoleonic Wars, 2nd edition. London: Greenhill Books, 1999.

A Graphic Layout

A table governs the layout of the text and images below.

Various types of lists, using mostly military aircraft as list items.		The Mighty Five, prominent Russian composers of the last half of the 19th century are featured in a photo list with links.
	A photo of an M-60 with hotspots that describe the parts of the tank.
An except from an article on the Battle of Marathon using various types of text.		Some of the six headers in a sonata context.

---

The Code:

M-60 Patton Tank

The M-60 tank has three basic parts, a hull, turret, and gun. Click on either of the three parts in the photo below to learn more. The tank in the photo is located in Necedah, Wisconsin, in the park on the south side of state highway 21.

---

The Code:

This post and the three preceding it are interrelated. The image has an image map (hotspots) that are links to the other three posts. In them, I used the local reference capability of the anchor tag to create references and footnotes.

M-68 105mm Gun

The M-60A1 and A3 are armed with the British-designed L7 105mm L/52 gun. Midway along the barrel is an eccentrically-mounted bore evacuator. The bore evacuator serves to reduce propellant gas leakage into the turret after firing.¹ The ammunition has a fixed cartridge case and includes, besides the standard armor piercing discarding sabot and high explosive rounds, several special-purpose rounds such as high explosive squash-head and white phosphorus.²

1. Wikipedia: Bore Evacuator

2. Wikipedia: Royal Ordnance L7

M-60 Turret

Three crew members occupy the M-60’s roomy turret, with the gunner on the right, the commander seated behind him, and the loader on the left side of the 105mm gun.¹ The small commander's cupola mounts an M-85 .50 caliber machine gun with 900 rounds of ammunition. Fire control includes an M21 ballistic computer, AN/VVG-2 laser rangefinder, AN/VSG-2 thermal sights, and Mercury-Cadmium-Telluride (HgCdTe) IR detector for passive night and dust vision.²

1. Patton-mania: M60 Patton

2. FAS Military Analysis Network: M60 Series Tank

M-60 Hull

The cast steel hull of the M-60 tank is divided into three compartments. The front compartment houses the driver, the middle is the turret well, and the rear contains the engine. The tank is powered by a V-12 air-cooled diesel engine, the Continental AVDS-1790 that develops 750 hp. The suspension consists of six aluminum road wheels and three return wheels. There is an escape hatch on the underside of the hull.¹ The engine and suspension combine to give the M-60 a cross-country speed of up to 10-12 mph and a road speed of about 30 mph with a range of some 300 miles. It can climb a 36 inch vertical step and a 60% gradient. A fording kit allows the vehicle to enter up to 90 inches of water; without it the tank can ford a 48 inchdeep stream.²

1. Wikipedia: M60 Patton

2. Army Technology: M60A3 Main Battle Tank

The Code:

Photo List

The Mighty Handful

• Mily Balakirev
• Alexander Borodin
• Caesar Cui
• Modest Mussorgsky
• Nikolai Rimsky-Korsakov

The Code:

This list combines images and links.

Three Lists But No Liszt

Lesson Seven, Chapter One in Cearley’s Book

In Which the UL, OL, an DL Tags are Used

Lists of Ordered and Unordered Nature

• Unordered List
  
• Ordered List
  
• List of Words and Their Definitions
  
• Nested List
  

An Unordered List, Yet Orderly in Appearance

Some U.S. Naval Aircraft Used in World War II

• F4F Wildcat
  
  
  
  1. F4F-3
     
  2. F4F-4
     
  
  
• SBD Dauntless
  
• TBD Devastator
  
• TBF Avenger
  
• F6F Hellcat
  
• F4U Corsair
  

An Ordered List, By the Numbers

Some Aircraft Ordered by Number of Engines, Ascending

1. F4F Wildcat
   
2. B-25 Mitchell
   
3. Ford Trimotor
   
4. He-177, which had only two propellors each of four blades and two engine nacelles, but inside each engine nacelle, which were, incidentally, mounted one one each wing, where two engines mounted end-to-end such that the drive shafts were linked. This was not a satisfactory arrangement; if memory serves, it was prone to fire do to inadequate cooling.
   
5. I know of no five-engined airplane.
   
6. B-47
   
7. Alas, I am ignorant of any seven-engine aeroplane.
   
8. B-52 Stratofortress
   

A List of Words and Their Definitions, But Without Etymology and Examples of Usage

Military Aircraft Types (Not Compacted)

Fighter

An airplane optimized for dogfighting.

Fighter Bomber

An aircraft design suitable for dogfighting but also capable of ground attack.

Torpedo Bomber

This type of airplane carries one or more torpedos for use against ships.

Dive Bomber

A type of airplane stressed to withstand steep dives in order to deliver a single bomb on a small target.

Military Aircraft Types (Compacted)

Fighter

An airplane optimized for dogfighting.

Fighter Bomber

An aircraft design suitable for dogfighting but also capable of ground attack.

Torpedo Bomber

This type of airplane carries one or more torpedos for use against ships.

Dive Bomber

A type of airplane stressed to withstand steep dives in order to deliver a single bomb on a small target.

Aircraft Types and Examples: A Nested List

• Fighters
  
  
  
  1. P-38 Lightning
     
  2. P-40 Warhawk
     
  3. P-47 Thunderbolt
     
  4. P-51 Mustang
     
  5. P-80 Shooting Star
     
  
  
• Bombers
  
  
  
  1. B-17 Flying Fortress
     
  2. B-25 Mitchell
     
  3. B-26 Maurader
     
  4. B-29 Superfortress
     
  5. B-36 Peacemaker
     
  
  
• Transports
  
  
  
  1. C-46
     
  2. C-47
     
  3. C-130
     
  4. C-5
     
  5. C-17
     
  
  

Creator...........: David Rupp
Created On........: 24 December 2009
Last Modified By..: David Rupp
Last Modified On..: 5 January 2010
 

The code:





In the first DIV tag the align=”center” element was not being recognized. In the previous post, I thought that the header tag align element was being overridden either by Blogspot or the blog template while the DIV tag’s use of align was unaffected. Now I discover a new twist. I removed the double quotes around the align value (center), and by golly the dang thing works. From what I have read so far, this does not seem to be proper HTML behavior; center as an element value must have either single or double quotes. Having just written that, I tried the single quotes, and it worked! Then I reverted back to the double quotes, and it worked!?!? Interesting behavior.

The local reference (href=”#aaa”) works quite nicely. Since each post is a separate HTML file, managing label names to avoid collisions should be easy. The ordered and unordered lists also behave nicely, even with nesting. The COMPACT element does have any effect in IE8, but then it is deprecated now and I shouldn’t be using it.

Finally, I left most of the structure in the code which produced a fair number of blank lines, but it is not unbearable.

Blocks of Text

Lesson Six, Chapter One in Cearley’s Book

In Which the DIV, BLOCKQUOTE, PRE, and ADDRESS Tags are Used

The Battle of Marathon

By David Rupp

Events Leading Up To the Battle
(An Excerpt)

Relying on the advice of Hippias, the former Athenian tyrant who accompanied the expeditionary force, the Persians sailed from Eretria and landed near Marathon in part because it was one of the most convenient debarkation points for cavalry[1]. Liddell Hart points out the brilliance of this move from a strategic point of view.

Thereby they could calculate on drawing the Athenian army towards them, thus facilitating the seizure of power in Athens by their [the Persian’s] adherents, whereas a direct attack on the city would have hampered such a rising, perhaps even have rallied its forces against them; and in any case have given them the extra difficulty of a siege.[2]

Herodotus cites the report that the Alcmaeonidae were plotting to surrender Athens to the Persians, but does not believe it. He does allow that a signal was made to the Persians indicating Athens would submit. Rawlinson is not convinced by Herodotus’ defense of the Alcmaeonidae.[3] Having drawn the Athenian army into the open, Liddell Hart postulates Datis then planned to fix the Athenians with a covering force, re-embark the remainder of the army and sail around to Phalerum and thus either walk into Athens unopposed or at least meet with only token resistance.[4]

Col 1 Col 2 Col 3 Col 4 Col 5 Col 6 Col 7 Col 8 Col 9
---------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ----------
Row 1: DIV
Row 2:
Row 3:
Row 4:
Row 5:

        Col 1      Col 2      Col 3      Col 4     
        ---------- ---------- ---------- ----------
Row 1:  PRE
Row 2:
Row 3:
Row 4:
Row 5:

[1] Herodotus, The Persian Wars. Trans. by George Rawlinson, New York, 1942, VI:102, p. 474.
[2] B. H. Liddell Hart. Strategy. New York, 1967, page 27.
[3] Herodotus, VI:121-4, pp. 483-4 and note 28.
[4] Liddell Hart, p. 27-28.

The code, with the text elided:

The first two lines of this post should be centered. It appears that Blogger, or the blog template, overrides or ignores ALIGN elements unless used in the context of a DIV tag (see third, fourth, and fifth lines of this post). The red author text (line four) is probably driven by the blog template.

Headers and Paragraphs

To learn some of the fundamentals of HTML, I've started working through Kent Cearley's book HTML 4, published back in the earlier days of the Internet at the end of the last millennium. The book has been occupying the bookshelf since then, having been purchased at a time when it appeared I would be doing some web programming. That didn't happen; requirements analysis and business process re-engineering happened instead.

As this is a blog and not a purpose-built web site, I will also learn what HTML tags work in the context of Blogspot and what the idiosyncrasies are, such as the interpretation of structured (human-readable) code discovered in the previous post.

On to the first exercise, or more precisely, the fifth lesson in chapter 1. The blog template dictates how the headers (h1 - h3) display, but they do work, as does the paragraph tag.

[h1] The Sonata Form

[P] There are many variants on the structure of the sonata form. This example is just that, an example.

[h2] Exposition

[h3] First Subject

[P] The keyboard sonata of the classical era typically has the principle thematic material stated in the tonic key.

[P] The mood of the first subject is often motivic and forceful in nature.

[h3] Transition

[h3] Second Subject

[h3] Coda

[h2] Development

[h3] Dominant Key

[h3] Supertonic Key

[h3] Subdominant Minor Key

[h3] Subdominant Major Key

[h3] Supertonic Minor Key

[h3] Supertonic Major Key

[h3] Dominant Key

[h2] Recapitulation

The code, in a human-friendly form, is in the image below. I present it as an image so that it is not interpreted as code.

A Simple Table

Built using HTML table tags.
Why are there a number of blank lines between this one and the table itself?

Question	Answer
Not Found	42
Query	Response

Each line of HTML code is interpreted as a blank line. The code for the table above is written on 14 lines. The same code concatenated into one line:

Question	Answer
Not Found	42
Query	Response