The 1963 Overton Rebel Yearbook
Notes
|
 |
A few thoughts and insights
that have come from the creation
of this web site.
|
 |
Introduction -
The original purpose for this Notes page was to celebrate the completion
of the new look for the '63 yearbook. Additionally, a detailed
description of the html layout and the development problems and insights
was also to be offered.
The terrorism against the World Trade Center in New York has
changed many things, including the rationale for working on unimportant
things, such as the presentation of this yearbook on the world wide web.
Considering how few individuals will actually benefit from this
presentation, it has been very difficult to find a reason to finish it
after Sept. 11, 2001.
But, knowing that its incompleteness would be a constant nag on
the conscience, it has been finished. The Muse for my second novel sits
on my shoulder and warns me that I should not be distracted lest I miss
some cogent phrase from him that could turn my drab creation into a work
of art.
My answer?
"Yes, Sir!"
|
Overview -
The first '63 yearbook presentation was as simple as it gets. With only
a single index page for selecting page numbers to view, and with only
previous and next page movement, it was easy to use and performed its
function of permitting the one-sized viewing of each and every page of
the yearbook.
The genesis for the second (this) presentation was the
coincident need to create a system for handling the family photographs
that have accumulated through the years. It is an easy process to scan
them into the computer one by one, but, once there, what then?
There are many photo album software products out there for
handling photos, but the format and access of those products I have seen
leave much to be desired. The html language used on the web is very
useful in designing and showing web pages on the internet, but it can
also be used for designing and showing web pages on the home computer.
With a little imagination and effort, photos of any kind can be
presented in any way one desires.
Many family photos are priceless, one-of-a-kind treasures.
Every time one of them is handled brings it a step closer to oblivion.
In addition, the chemicals that make photos what they are deteriorate
normally over time, being particularly sensitive to light. Scanners use
intense light to scan images, light of such intensity that many of the
more vulnerable photos (those using cheaper materials) lose picture
quality each time they are scanned.
Thus, judicious use of the scanner is mandatory, and
the end use of those scans MUST be determined before the scans are done.
To experiment with images and create a presentation, I decided
to use the pages of the yearbook that were already scanned and in the
computer.
|
The Design -
Having learned a little more html since the first yearbook presentation,
and needing to be able to access a large variable number of family
photos, I decided that the most important part of the new design would
be the html directories, the indexes to all of the pages or photos.
Considering the family photos, I also decided that more than
one photo at a time should be presented on a screen view of the photos.
This led to the multiple-pages-per-screen decision for the yearbook.
At first, I limited the number of pages per screen to 1, 2, and
4, but along the way, I added the 6, 8, 12, 16, and 24 pages per screen
views. This decision came after I discovered that many of the page scans
were too large and would take too long to load if more than one were
placed on a screen. The hardest part of the work followed, that of
resizing every page image file so that all of the screens would load
about the same size images files. The size I chose to be optimal was
100K (100,000 bytes), and you will notice that the page pictures on all
screens up to 8 per page load in about the same amount of time.
Resizing the page scans required that every page file be
handled 6 or more times, with the result being more than six times as
many page files. Now, instead of 280 page files, there came to be some
1750page files, meaning 1750 pictures, a number a bit closer to the
number of family photos in the typical family albums.
The actual yearbook has 279 pages, plus the cover and two
endleaves. By not using the actual page 1 and including the two
endleaves as pages, I came up with an even number 280 pages, a number
that is evenly divisible, a necessary requirement for all of the screens
to have the same number of pages on them (a 'necessary' condition I
found a way around later as I added more views).
As the html web pages were created to display the yearbook
pages, I became enamored with the variety of 'patterns' I was seeing as
the yearbook pages were displayed on the screen, and decided to add more
views, thus the expanded views of 12, 16, and 24 yearbook pages per
screen.
It was quite striking to see the yearbook displayed in these
ways. These were views that no one else had ever seen before. It was
almost as though I were conversing with those students and teachers who
designed the pages and put the yearbook together in the form finally
adopted as "The Yearbook". I could imagine hearing them discuss this and
that as they bent over the table spreads of the pages. And, I could hear
the embarrassment of him and her as the final published copy came out
and they saw the mistakes that shouted at them, mistakes they just KNEW
everyone would see and complain about.
The reason I am sensitive to this part of the work done on the
yearbook is because my oldest daughter was the editor of her yearbook,
and I witnessed the agonies she went through getting it out.
Out of respect for all those who have worked on yearbooks, the
web page presentation needed to be pleasant and complimentary to the
yearbook pages, yet still contain a powerful navigation capability so
that any other part of the yearbook would be quickly accessible from any
screen display.
Making these features available for the family photos was
motivation enough to put in the time and effort to create this
presentation form.
|
The Navigation Theory -
Unlike family photos, the yearbook presents an ordered set of objects to
design access to. Even so, the structure of this access can become quite
complicated if that ordered set of pages is offered in more than one
form as objects to access.
In other words, by presenting the pages in a variety of views
and making it possible to get from any view to any other view, the
complexity and number of html web pages increases dramatically. The
great flaw in the html language is that it does not offer any way
whatsoever for performing simple math operations, nor does it provide
for the use of variables. Instead, an html page must be created for each
operation to be performed, the object of the operation (and solution to
the pre-calculated math and variables problem) being another html web page.
Thus, it takes some 3,000,000 bytes of html coding to
accomplish the same task a 30,000 byte program could accomplish using
math and variables. The only reason html is possible nowadays is the
enormous storage capacity available on the internet. Html and this
storage capacity substitute for requiring every person who uses the
internet to learn a programming language.
Though I grumble, it is a fair trade. So MUCH is now available
on the internet, much of it provided by persons who would never have
done so had they had to learn a programming language.
|
The Page View Design -
Although the directories provide the power and flexibility to go
everywhere in the yearbook, the page views themselves are the purpose of
the project. Presenting the yearbook for those who never had one and for
those who have lost theirs is rewarding in itself, but presenting the
yearbook with views that have never been seen before is desert.
Like most good deserts, putting the ingredients together in just
the right way has required quite a bit of effort.
The fundamental goal has been to present every screen view with
a pleasant appearance. Rather than use plain colors as the first
yearbook site had, the decision was made to use the cover of the
yearbook as the background, sized and tiled to fit the screen. It
happens that the gray color of the yearbook cover provides the best
background possible to accentuate the pages. In addition, the background
is fixed so that it does not scroll (move) with the page and captions,
giving the screen a 3-dimensional depth.
The menu bar for the page views was designed so that any other
view could be jumped to from any view, with Previous and Next page links
and with full directory and quick directory links provided for the
current view. Using html frames, this menu bar is frozen in the same
spot at the bottom of the screen. For those with older browsers, a
non-frames web page is also available, with the menu bar at the bottom
of the page image.
The best view of every yearbook page is provided by the
one-page-per-screen view. This is the full-sized, properly proportioned
scan image of every yearbook page. The more-than-one-page-per-screen
views are smaller images sized to fit the screen so that all of the
images can be seen on one screen, even the 24-pages-per-screen view.
Every page image on the more-than-one-page-per-screen views is a
link to the one-per-page view. The reason these links are provided is
that the writing on the smaller images is not easily readable. But, the
page images themselves offer adequate detail for faces and objects to be
identifiable enough to decide if the large image should be looked at.
Thus, the reason for the more-than-one-page-per-screen views: it
is easier and quicker to thumb through the yearbook, looking for just
the page being looked for. All of the web page views load in nearly the
same amount of time, having the image files sized in such a way to make
the total nearly equal for all screens. Using the 8-per-page views, you
can thumb through the entire yearbook in 35 screens, as opposed to
having to go through 280 screens for the one-per-page views.
Obviously, the first time someone looks at the yearbook, all of
the full-sized images will likely be the ones looked at. Later, though,
someone returning to take another look will see the advantage of
thumbing through the yearbook using the more-than-one-page-per-screen
view to find that particular page in mind more quickly.
The directories, quick directories, and the yearbook index links
will also make the finding of particular pages easier.
|
A Few Numbers of Note -
The original yearbook web site had the following characteristics:
1 html directory page
280 html image presentation pages
280 image files in one size
1960 links
16,000,000 bytes total size
The new yearbook web site has the following characteristics:
46 html directories
2550 html image presentation pages
1680 image files in 6 sizes
50 special cut-out image files
50,000 links
65,000,000 bytes total size
Every page view presentation requires an html web page. Since frames are
being used, every page view presentation also requires three other html
pages. This means that four html scripts must be written for every
possible page presentation. In addition, an equal number of html pages
must also be written for use on the home computer in order to design and
test the eventual web site. In addition, since this yearbook is
presented on two web sites, yet another set of html pages must be
designed with different link addresses to work on the additional site.
|
The Html Page Naming Theory -
One of the features of this web site is the easy way provided to jump
from one page view presentation to another. For instance, while viewing
an 8-pages-per-screen view, a single simple mouse click can jump to a
4-pages-per-screen view of the same pages with larger page images.
Accomplishing this is not so simple. This is the reason for the
unusually large number of links and html pages required to make the new
site work the way it does. This also accentuates the inefficiency of
html.
To accomplish this, every html page must be given a different name, and
that means over 50,000 different names. Nearly impossible, of course.
Lowest-common-denominator arithmetic makes such an endeavor thinkable.
The yearbook has 280 pages that are presented. This is a closed set of
objects that must be handled, and they are numerically identified. The
naming convention for the original web site was simple, adding 'page' to
the page number for every html file created, like so: page123.html. When
this file link was called, that html page was loaded, and the image of
page 123 was presented. Within that html page were also links to the
previous html page and the next html page and the index html page.
The new site is quite different, even for calling the one page view
similar to the old web site. In the new site design, a RANGE of view
pages must be the object of every link on every html page. Thus, the
page123.html page above must be named 'page123123.html', or, as it
actually is, 'ma123123.html'.
Deciphered, this name means: 'm' for Memphis; 'a' for
one-page-per-screen, '123123' for pages 123 to 123.
This is meaningless, of course, without the other views, the frame
views, and the requirement that every view be available from every other
view.
A description of another view will help illustrate this. The
8-pages-per-screen view that includes page 123 is named 'mh120127.html'.
Deciphered, this name means: 'm' for Memphis, 'h' for 8-pages-per-screen
('h' being the 8th letter of the alphabet), '120127' for the range of
pages from 120 to 127. When this html page is called, it clears the
screen and loads pages 120 to 127 and loads the menu bar whose links
change to make it possible to call any other page view for this set of
pages.
From this, the html naming design for this set of pages follows:
ma123123.html (1 page 123 to 123)
mb122123.html (2 pages 122 to 123)
md120123.html (4 pages 120 to 123)
mf120125.html (6 pages 120 to 125)
mh120127.html (8 pages 120 to 127)
ml120131.html (12 pages 120 to 131)
mp112127.html (16 pages 112 to 127)
mx120143.html (24 pages 120 to 143)
Any of the view pages with page 123 on it must be able to call any of
these other view pages, and in a similar fashion, every other view page
must be able to call the other view pages with yearbook pages near the
page range displayed on each view page. To repeat with a different page
number, any view page with page 200 on it must be able to call any other
view page with page 200 on it.
These same page ranges must also be available on the directories and
quick directories.
With 50,000 links, this COULD be some tedious typing.
This process can be minimized using lcd arithmetic and creating
tables. Here is the table for the first 30 pages:
As you can see, it is quite complex. Each horizontal line must be placed
into each of the page views of that line. THIS is how they each can call
each other. As you can also see, there are multiple occurrences of the
same page number. This means that every one of these same pages must be
included with the smaller page views because the larger views contain
all of these page numbers. For example, there are 24 occurrences of
mx023023.html, and the reason for this is that page mx023023.html
contains all 24 of the first 23 page images, and each of the single
image pages must be able to call page mx023023.html. Thus, pages
ma000000.html through ma023023.html must each and all be able to call
page mx000023.html since mx000023.html contains all of those images.
The pages are numbered from 000 to 279, making 280 pages. This was
necessary because the actual page one was not included in the
presentation, whereas the left and right endleaves were. The actual page
one was the "This book belongs to..." page with the signature. This
makes the left end leaf page 000 and the right end leaf page 001,
leaving all of the remaining pages with their true page numbers. 280 was
the best choice for the number of pages since it is more easily
divisible than 279.
|
Applying This Design To Family Photos -
Ultimately, this design will find its destiny displaying the family
photos that now sit in boxes and photo albums. Translating it so that it
works with individual photos rather than yearbook pages will require a
great deal of effort, but the end result should make that effort worth
while.
The first task is to decide how each photo is to be named. These names
will have to be numerical just like the yearbook pages, but the sequence
of the numbers must in some way reflect the subject of the photo, unlike
the yearbook pages which were simply in "order". These names must also
reflect a theme and this is something else that was not necessary for the
yearbook.
There must also be due deliberation about whether to write these
filenames on the photos themselves. The preference is to NOT write on
the photos, especially fragile old photos.
The decision to not write on the photos requires that the photos be
named as they are scanned in. So that these names will reflect the
themes and groupings of the name, diligent sorting must be done before
the scanning begins. Once the photos are scanned in and named, it will
be necessary to create an index of the names with the photos attached
so that they can be retrieved as they are needed for the work creating
the computer photo album presentations.
Another requirement that will be likely are other views than the ones
provided for the yearbook. This means creating the naming tables for
such views as 10, 20, and even 50 photos per screen. This may be
necessary for presenting entire themes in one presentation, and can
either be done as a directory or as a page view.
When the scans are finally done, the first (and possibly only) scan must
be the highest quality scan that the scanner can produce. Once this scan
is done, variations of that scan can be created and saved under
different file names, just as the yearbook pages were done, different
sizes created for different page views.
Other than these distinctions, the remainder of the project will be
quite like the yearbook. One facet of the presentation that will
probably receive greater use than the yearbook is the Commentaries page.
For some reason, those viewing the yearbook are reticent to offer
comments about the events occurring at the time the yearbook photos were
taken, but it is likely that family members will be happy to offer
comments about the photos in a family album, just as they do when
looking through a physical photo album.
Last but not least will be the creation of an actual index for the
family photos, presenting it in the same manner as the yearbook index
pages, with instant links to the names and events in the index.
|
Afterward -
All in all, this has been a very rewarding exercise. When an effort is
made and an actual real object is created and the work is completed, the
satisfaction for having done it follows.
This work will be seen and used by very few. The follow-on work with the
family photos will also be seen and used by very few. It is good that
human beings can be possessed of a desire to accomplish something, even
if no rewards follow. So many people do so much and the personal
satisfaction for having done so is enough.
I have learned some new things about html and I am sure they will be
useful in the future as other projects come to mind. Everything I learn
is always followed by the desire to learn more.
Hopefully, I will never stop learning.
Larry Smith
Overton '63
|
The Site Outline -
I. Common links
A. All directories have links to all other directories
B. All quick directories have no thumbnail pictures
C. All pages have links to the home, commentaries, and navigation pages
II. Start Page
A. Table of Contents Links
B. No individual page titles
C. No individual page links
C. Contains links to all directories
D. Contains link to MSN Home Page
III. Master Quick Directory
A. Links to all pages and directories
B. Contains page number links
C. Contains page titles
D. Has no thumbnail picture links
E. Small page, loads quickly
F. Page number links only
IV. Master Directory
A. Links to all pages and directories
B. Contains thumbnail links (5) to all views of each yearbook page
C. Contains titles for every yearbook page
D. Is largest page, loads least quickly
V. Quick Directory 1
A. Quick directory for all one-page per screen views
B. Contains no thumbnails for yearbook pages
C. Page number links with titles
VI. Directory 1
A. Full directory for all one-page per screen views
B. Contains one thumbnail picture link and title for each yearbook page
VII. Quick Directory 2
A. Quick directory for all two-page per screen views
B. No thumbnail links
C. Page number links and titles
VIII. Directory 2
A. Full directory for all two-page per screen views
B. Contains two thumbnail pictures per link and titles for each set of two yearbook pages
IX. Quick Directory 4
A. Quick directory for all tour-page per screen views
B. No thumbnail picture links
C. Page number links and titles
X. Directory 4
A. Full directory for all four-page per screen views
B. Contains four thumbnail pictures per link and titles for each set of four yearbook pages
XI. Quick Directory 6
A. Quick directory for all six-page per screen views
B. No thumbnail picture links
C. Page number links and titles
XII. Directory 6
A. Full directory for all six-page per screen views
G. Contains six thumbnail pictures per link and titles for each set of six yearbook pages
XIII. Quick Directory 8
A. Quick directory for all eight-page per screen views
B. No thumbnail picture links
C. Page number links and titles
XIV. Directory 8
A. Full directory for all eight-page per screen views
B. Contains eight thumbnail pictures per link and titles for each set of eight yearbook pages
XV. 12, 16, and 24 Directories and Quick Directories are built the
same as the others.
|
The Site Structure -
Here follows the physical site layout on the server the site uses:
I. Site address: http://www.fortunecity.com/victorian/stone/848/overton/
A. /overton/ - Files - html directory files
1. hoverhom.htm - Home Page
2. hoverdir.htm - Full Master Directory
3. hoverqdx.htm - Full Master Quick Directory
4. hovercla.htm - Classmates Directory
5. hovercom.htm - Commentaries Directory
6. hovernav.htm - Navigation Help Page
7. hovernts.htm - This File
8. hadir.htm - One Per Page Directory
9. haqdir.htm - One Per page Quick Directory
10. hbdir.htm - Two Per Page Directory
11. hbqdir.htm - Two Per page Quick Directory
12. hddir.htm - Four Per Page Directory
13. hdqdir.htm - Four Per page Quick Directory
14. hfdir.htm - Six Per Page Directory
15. hfqdir.htm - Six Per page Quick Directory
16. hhdir.htm - Eight Per Page Directory
17. hhqdir.htm - Eight Per page Quick Directory
18. hldir.htm - 12 Per Page Directory
19. hlqdir.htm - 12 Per page Quick Directory
20. hpdir.htm - 16 Per Page Directory
21. hpqdir.htm - 16 Per page Quick Directory
22. hxdir.htm - 24 Per Page Directory
23. hxqdir.htm - 24 Per page Quick Directory
24. moverhom.htm - no frame Home Page
25. moverdir.htm - no frame Full Master Directory
26. moverqdx.htm - no frame Full Master Quick Directory
27. movercla.htm - no frame Classmates Directory
28. movercom.htm - no frame Commentaries Directory
29. movernav.htm - no frame Navigation Help Page
30. movernts.htm - no frame This File
31. madir.htm - no frame One Per Page Directory
32. maqdir.htm - no frame One Per page Quick Directory
33. mbdir.htm - no frame Two Per Page Directory
34. mbqdir.htm - no frame Two Per page Quick Directory
35. mddir.htm - no frame Four Per Page Directory
36. mdqdir.htm - no frame Four Per page Quick Directory
37. mfdir.htm - no frame Six Per Page Directory
38. mfqdir.htm - no frame Six Per page Quick Directory
39. mhdir.htm - no frame Eight Per Page Directory
40. mhqdir.htm - no frame Eight Per page Quick Directory
41. mldir.htm - no frame 12 Per Page Directory
42. mlqdir.htm - no frame 12 Per page Quick Directory
43. mpdir.htm - no frame 16 Per Page Directory
44. mpqdir.htm - no frame 16 Per page Quick Directory
45. mxdir.htm - no frame 24 Per Page Directory
46. mxqdir.htm - no frame 24 Per page Quick Directory
B. /overton/ - Sub-Directories
1. /ha/ - one per page html files
2. /hb/ - two per page html files
3. /hd/ - four per page html files
4. /hf/ - six per page html files
5. /hh/ - eight per page html files
6. /hl/ - 12 per page html files
7. /hp/ - 16 per page html files
8. /hx/ - 24 per page html files
9. /pa/ - one per page jpg files
10. /pb/ - two per page jpg files
11. /pd/ - four per page jpg files
12. /pf/ - 6 and 12 per page jpg files
13. /ph/ - 8, 16, and 24 per page jpg files
14. /pt/ - thumbnail jpg files
15. /pc/ - special cut-out jpg files
II. The /overton/ sub-directories
A. /ha/ - one per page html files
1. fa000000.htm - fa279279.htm
2. aa000000.htm - aa279279.htm
3. la000000.htm - la279279.htm
4. ma000000.htm - ma279279.htm
B. /hb/ - two per page html files
1. fb000001.htm - fb278279.htm
2. ab000001.htm - ab278279.htm
3. lb000001.htm - lb278279.htm
4. mb000001.htm - mb278279.htm
C. /hd/ - four per page html files
1. fd000003.htm - fd276279.htm
2. ad000003.htm - ad276279.htm
3. ld000003.htm - ld276279.htm
4. md000003.htm - md276279.htm
D. /hf/ - six per page html files
1. ff000005.htm - ff276279.htm
2. af000005.htm - af276279.htm
3. lf000005.htm - lf276279.htm
4. mf000005.htm - mf276279.htm
E. /hh/ - eight per page html files
1. fh000007.htm - fh272279.htm
2. ah000007.htm - ah272279.htm
3. lh000007.htm - lh272279.htm
4. mh000007.htm - mh272279.htm
F. /pa/ - full size
1. apage000.jpg - apage279.jpg
2. ayearbok.jpg
G. /pb/ - one per page
1. bpage000.jpg - bpage279.jpg
2. byearbok.jpg
H. /pd/ - four per page
1. dpage000.jpg - dpage279.jpg
2. dyearbok.jpg
I. /pf/ - six per page
1. fpage000.jpg - fpage279.jpg
2. fyearbok.jpg
J. /ph/ - eight per page
1. hpage000.jpg - hpage279.jpg
2. hyearbok.jpg
K. /pt/ - thumbnails
1. tpage000.jpg - tpage279.jpg
2. tyearbok.jpg
L. /pc/
1. yearbook.jpg
2. rebel.jpg
|
 |
These notes are offered "as is" and no guarantee is made or implied that the
descriptions and explanations are accurate or usable by others.
You are free to use any part of this web site for your own purposes.
If you know of better ways to do the things done here, please share
your knowledge by email to the address below. Your contribution will be
acknowledged on this notes page.
|
 |
|
