HTML & CSS Web Art Triptych with Original Analog Sources

by Cooper Dozier, 2011 & 2018

Enter PFS Home

[ [ List of project pages at bottom ] ]
This is a newly search engine optimized version of a project for a Bellarmine University course in Web Art in 2011. Correct, complete, and up to date code was emphasized and positioning and image optimization were covered extensively. The project requirements included a fixed width dimension of 780 pixels so that everyone, including those with old technology, could have a good UX/design experience. Titles, and, alt tags were required as well, though I don't think I did a very good job with them back then.

The artwork consists of 3 pages of with a fixed position container and absolute positioned panes superimposed (overlapping in one place). No z-index's are used, the element are instead sorted strictly by order of appearance in code. The images are constructed from a mix of drawn on, scanned, and cropped blank paper collage (accounting, graph, tracing, black) and drawn on clear acetate, drafter's and painter's tape, and small label stickers, featuring ballpoint and marker. Real and imaginary symbols and writing, an imaginary device, charts, and a storm variously feature. The animated links do not appear instantly and must be reloaded to see the appearing animation again, although the hover animation of course always works.

The textbook we used was very good, but I cannot recall the title today (3/7/2018). The doctype we were using at the time was XHTML 1.0 Strict. Aside from this newly created page, the changes I've made are mainly invisible on the surface. I made additions and alterations of image alt-text, title tags, meta description tags, page & image URLs, and the project directory name, as well as other SEO relevant changes site-wide. The <doctype> declarations have all been changed to html (for HTML 5) without any degradation of the style or layout I have found. I've changed CSS IDs and classes for legibility as well as moving all the images into the page instead of as CSS backgrounds so as to apply descriptive alt text (note: this works fairly simply with absolutel positioned and sized elements ASSUMING the fill image exactly matches the frame size and you don't have any pesky text or other stuff you need to work around the images).