PCTalk.info

by **Spock** » Fri 2006 May 12 11:42

If you are following this series of tutorials, you should have at least finished HTML Programming for beginners 3 - Thumbnail program before trying to tackle this one.

The program we will be talking about is this one:

Code: Select all: <HTML> <HEAD> <TITLE>Photo Driver</TITLE> <style type="text/css" media="screen">  </style> </HEAD> <BODY> <div class="main"> <H3 Align="left">CV_0124: Quiet Water Park Fountain, Annapolis, MD. Shot with a 300mm Lens at 1/4000s to see shutter speed difference. </H3> <div class="menuBar"> <a class="menuButton" href="CV_0123.htm"> Previous Picture </a> <a class="menuButton" href="../Thumbnails.htm"> Thumbnails Menu </a> <a class="menuButton" href="CV_0015.htm"> Next Picture </a><br><br> <a class="menuButton" href="../Photos/CV_0124.jpg" > Fit Picture to window. The Backspace key will return here. 'X' in upper right corner closes. <br><br> <img src="../Photos/CV_0124.jpg"></A><br><br> </div> <pre> Camera Make Canon Model Canon EOS DIGITAL REBEL XT Orientation Upper Left X resolution 72/1 Y resolution 72/1 Resolution unit inches Date/time 4/16/2006 3:33:16 PM YCbCr positioning co-sited Image Image description Artist Copyright Exposure time 1/4000 s F-number f/8 Exposure program Shutter Priority ISO speed ratings 1600 Date/time original 4/16/2006 3:33:16 PM Date/time digitized 4/16/2006 3:33:16 PM Component config YCbCr Shutter speed value 1/4000 s Aperture value f/8 Exposure bias value 0.00 EV Metering mode Pattern Flash Flash did not fire, compulsory flash mode Focal length 300 mm User comment Colorspace sRGB Pixel X dimension 1728 Pixel Y dimension 1152 Focal plane X res. 1728000/874 Focal plane Y res. 1152000/582 Focal plane res. unit inch Custom Rendered Normal process Exposure mode Auto exposure White balance Manual white balance Scene capture type Standard Miscellaneous Exif version 2.21 FlashPix version 1.0 Canon Maker Notes Macro mode Normal Flash mode Flash not fired Continuous drive mode Single Focus mode AI Focus Image size Medium Easy shooting mode Manual Contrast High Saturation High Sharpness High ISO Unknown Metering mode Evaluative AF point selected Unknown Exposure mode Tv priority White balance Flash Flash Bias 0 EV Image type Canon EOS DIGITAL REBEL XT Firmware version Firmware 1.0.3 Owner name C. M. Vining Camera serial number 2EF0-03CD5 </pre> <br><br> <H6 Align="left">Copyright GNR Associates.</H6> </div> <script language="JavaScript" type="text/javascript">  </script> </BODY> </HTML>

by **Spock** » Fri 2006 May 12 11:43

Code: Select all: <HTML> <HEAD> <TITLE>Photo Driver</TITLE> <style type="text/css" media="screen">  </style> </HEAD>

As you can see, the header is almost non-existent consisting of simply a title and the call to the cascading style sheet which causes a similar look and feel for the entire package of programs.

Since this is such a simple section, I am going to use this space to discuss folder placement and relative versus absolute references.

If you look at the folders that the project is located in, you will see a cascade of folders similar to the following:

2006PhotoProject
--Drivers
--Graphics
--Photos
----d50
----niknd501
--Thumbnails

The complete lURL to the first folder and the first program is:
http://pctalk.info/2006PhotoProject/index.htm

That doesn't seem like much until you realize that to use absolute references could lead to not only a lot of unnecessary typing but also would add an increase in the possibility of mistakes.

As reference, let's look at the relative reference in the script above. The program the script resides in is in the Drivers folder. The complete absolute reference to the style sheet would be:
http://pctalk.info/2006PhotoProject/style.css

yet the relative reference, which is what I use almost exclusively throughout this project, is simply:
../style.css

Q: Why is this better?
A: It's better because you don't have to go back out to the Internet to find the file. You are giving the browser information that allows it to search within your directory tree for the file needed. It doesn't need to leave your site at all, so finds the required file extra fast.

Q: How can I get away with doing it this way?
A: I am using an old DOS trick.

./ (single dot-slash) indicates the same folder that the currently running program resides in.

../ (double dot-slash) indicates the parent folder to the current folder that the currently running program resides in.

Using this, we can traverse the folders up and down to indicate where any required program might be located. Since the style sheet is, in fact, in the parent directory (folder) all we need is "../<filename>". If it were in the Graphics folder, we would then have to use "../Graphics/<filename>".

To me this is almost second nature, so I'm not going to discuss it in here further. If it is still confusing, please don't hesitate to ask for further clarification in the HTML Programming: Comments topic.

by **Spock** » Fri 2006 May 12 11:44

Code: Select all: <BODY> <div class="main"> <H3 Align="left">CV_0124: Quiet Water Park Fountain, Annapolis, MD. Shot with a 300mm Lens at 1/4000s to see shutter speed difference. </H3> <div class="menuBar"> <a class="menuButton" href="CV_0123.htm"> Previous Picture </a> <a class="menuButton" href="../Thumbnails.htm"> Thumbnails Menu </a> <a class="menuButton" href="CV_0015.htm"> Next Picture </a><br><br> <a class="menuButton" href="../Photos/CV_0124.jpg" > Fit Picture to window. The Backspace key will return here. 'X' in upper right corner closes. <br><br> <img src="../Photos/CV_0124.jpg"></A><br><br> </div>

This section is the main part of the program. There are only 5 items that need to be customized for each picture:

1. The Reference Picture Name shown near the top in the <H3 Align="left">CV_0124 section,

2. The Previous Picture driver file name (if it exists),

3. The Next Picture driver file name (if it exists),

4/5. The actual full sized picture name replaced twice.

It seems really simple (and it is), unfortunately, the more intellectual you are, the more boring it is. I used to consider myself luck to get 10 of them done before I caught myself nodding off to sleep. And I had to create almost 1700 of the darned things for my last Photo Album DVD Project! :shock:

by **Spock** » Fri 2006 May 12 11:46

Code: Select all: <pre> Camera Make Canon Model Canon EOS DIGITAL REBEL XT Orientation Upper Left X resolution 72/1 Y resolution 72/1 Resolution unit inches Date/time 4/16/2006 3:33:16 PM YCbCr positioning co-sited Image Image description Artist Copyright Exposure time 1/4000 s F-number f/8 Exposure program Shutter Priority ISO speed ratings 1600 Date/time original 4/16/2006 3:33:16 PM Date/time digitized 4/16/2006 3:33:16 PM Component config YCbCr Shutter speed value 1/4000 s Aperture value f/8 Exposure bias value 0.00 EV Metering mode Pattern Flash Flash did not fire, compulsory flash mode Focal length 300 mm User comment Colorspace sRGB Pixel X dimension 1728 Pixel Y dimension 1152 Focal plane X res. 1728000/874 Focal plane Y res. 1152000/582 Focal plane res. unit inch Custom Rendered Normal process Exposure mode Auto exposure White balance Manual white balance Scene capture type Standard Miscellaneous Exif version 2.21 FlashPix version 1.0 Canon Maker Notes Macro mode Normal Flash mode Flash not fired Continuous drive mode Single Focus mode AI Focus Image size Medium Easy shooting mode Manual Contrast High Saturation High Sharpness High ISO Unknown Metering mode Evaluative AF point selected Unknown Exposure mode Tv priority White balance Flash Flash Bias 0 EV Image type Canon EOS DIGITAL REBEL XT Firmware version Firmware 1.0.3 Owner name C. M. Vining Camera serial number 2EF0-03CD5 </pre> <br><br>

There is one last thing that makes this project a true Photographers Album, the EXIF data. Above you will notice the EXIF data for the picture the driver was created for. I knew there were potentially hundreds of these, so I wanted some quick and easy way to insert the data requiring no additional formatting.

The <pre></pre> tag set accomplishes this. I simply highlight and copy the EXIF data and then paste it between the beginning and ending <pre> tags. Any formatting from the original display program is retained. All you need do now is add any missing data and you are basically finished.

by **Spock** » Fri 2006 May 12 11:47

Code: Select all: <H6 Align="left">Copyright GNR Associates.</H6> </div> <script language="JavaScript" type="text/javascript">  </script> </BODY> </HTML>

The final bit of code is simply a copyright notice at the bottom of everything and the Last Modified script that is at the bottom of all the programs.

When doing these, I will have one in my editor already saved. I will then make the modifications for the next photo in the series and us Save As to save it as a new file.

Q.E.D.

I hope you found this tutorial useful. Feel free to copy the programs or ask for a zipped file containing everything except the actual pictures. I will make a zipped copy available to Dave when everything is finished and all the pictures, copyright notices, captions, etc are in place.

I will be starting another series of tutorials about the Cascading Style Sheet but that might have to wait until I return from Florida, around the 10th or 11th of June.

PCTalk.info

HTML Programming for beginners 4 - Drivers

HTML Programming for beginners 4 - Drivers

Who is online