This experiment is part of a project is to develop a simple, HTML5- and CSS3-based method of presenting a multi-case numismatic exhibit, using the physical case dimensions of the cases used at conventions of the American Numismatic Association and others. The use of add-ons, plug-ins, JavaScript, and other browser extensions is avoided; their use adds size and complexity to files, while increasing maintenace and support efforts – all for very little extra benefit. Modern browsers do not need their capabilities enhanced for this type of webpage. Move the cursor over the small image of a case to have large images of an individual item appear – and then disappear as the cursor moves from that item. It is all about images.
The produced webpages are intended for a limited distributiom: the exhibitor and a few experienced exhibitors who volunteer to review exhibits and provide comments to novice exhibitors. Ease of webpage production is paramount, with ease of use secondary but important – nothing else matters. To make this capability accessible to as many exhibitors as possible, we assume images will be taken using a hand held post-2018 smartphone. So expect to see some imperfections in these images: they could be “stretched” to the four corners (or center), could show keystoning, and could be non-uniformly focused.
Of course, someone who wants an archive-quality record of his or her exhibit could take the extra time and expense needed to acquire “perfect” images, and then use those better images with the webpage. But that is not the initial intended use of this project. We are looking for “good enough,” not “perfection.”
This three-case exhibit was entered in Class 18, Local Interest, at the 2018 ANA convention in Philadelphia. It is offered here as a demonstration of the effort to bring a multi-case exhibit to a webpage, showing the visual limitations. We are not seeking comments on this exhibit itself, but comments on the page’s format, operation, and usefulness are appreciated.
Here is a reduced-size image of the first case, with height and width at one-tenth of the original’s (after cutting off some edges, to get width and height a multiple of 10 pixels, and then scaling down to 389 px wide and 299 px high) – after saving this file with a JPEG Quality Parameter value of 85, the file is 35KBytes (which is about 0.7% of the original file’s size). The readability of the title is great and subtitle is okay, the headers are almost readable, and the text and tables are not readable at all. There are seven closeup images of the case’s six items (the last item is too large to fit in one closeup, so two closeups were made). Each presented closeup image has height and width reduced from the original closeup’s, so as to fit in the provided empty space – each file was saved with a JPEG Quality Parameter value of 85 to greatly reduce the file’s size – a separate photograph was taken for each closeup.
Move the cursor over the case until a popup image appears – when you first stop moving the cursor over a popup, a small title box appears for that popup. The top-left corner of a popup covers the top left corner of the original area that is being expanded. To see the original image without any popup, move the cursor off of the case image. For best results, scroll this page so the following small case image is at the top of the browser window, followed by an empty space – enlarge your browser window until you see a bit of what follows the empty space.
Here is the image of the second case, with expanded views of items as the cursor hovers over each.
Here is the image of the third case, with expanded views of items as the cursor hovers over each.
Note: After we have developed a method capable of producing acceptable webpages, we might consider investigating methods which implement different paradigms (such as magnifying the area of a case which is centered around the current cursor position, or having the expanded views cover as little of the case image). Emphasis on the word might.