Programming for the Web

As a graduate student in the late 80s, I became one of the first beta test users of the Northwestern University email/Internet system.  (my email address was: jah@nwu.edu)   Things were different then.  The Internet consisted of just a few locations, delivered as plain text to terminals with a connection.  The only half-way interesting thing (the only thing, really) I can remember from those times were the newsgroups—forums where topics from sports, computers—especially computers-- and many other interests could be discussed.  Over the next few years, some of my friends at universities around the country obtained email and long-distance, almost instantaneous, email communication became possible.   Before long, the Internet went graphical.  It was quickly populated with thousands of commercial sites.  In fact, there was so little content of interest online, I dismissed it as just a big advertising venture.  It was easy to ignore.   A few yeas later, in the early 90s, I began a hobby of writing web sites using the HTML programming language.  I never did anything serious with this until 2005 when I created the University of Florida Saxophone Studio web site.  This site is based on a template provided by the university that I highly customized by editing the HTML code.  I continue to maintain this site by editing the HTML.  http://www.arts.ufl.edu/music/saxophone/
 

Since then, I’ve read a lot more on HTML, XHML, CSS, web design, information architecture, etc., and I've created a few more web sites:

► An individual account at UF which serves as an index to my various professional pursuits, and hosts some documents for the Executive Committee of the North American Saxophone Alliance.  http://plaza.ufl.edu/jhelton/

► A site for my duo, http://plaza.ufl.edu/jhelton/saxcello/  This site has proven very useful for marketing the duo for concerts and tours worldwide.  I created this site from a generic template for a two-column page layout. This took a bit more work than my earlier sites since this template was very basic and included no content or placeholders.

► The Onyx Saxophone Quartet site: http://plaza.ufl.edu/jhelton/onyx/index.html  This was the first site I composed entirely from scratch.   I now see a lot of room for improvement here, but am not sure when I'll find the time to get back to it.  I spent a lot of time making the graphic buttons and header image.

► Recently, I created http://www.jonathanhelton.com.  This site was created on the Blogger Blog site using their content management system.  It is easy to set up, customize and run a blog at blogger.com, but it took a lot of work to edit it so it looks and acts like a “normal” web site.

► I’ve also created a new site for the Duo at:  http://heltonthomasduo.blogspot.com/  Another adapted blog site.

Original duo site.

New duo site.

Last week’s project was to re-create my personal site (jonathanhelton.com) for use on another web server.  The blogger-based site is rather complicated.  It has all the code in one file and uses a number of convoluted if/then statements, javascript, etc. to display the different “pages.”  Plus, there’s all that blog code that I don’t need for my site.  The design is pretty straightforward, so I thought I could clone it by writing code from scratch.  After a bit more research and several hours of trial and error, I think I’ve succeeded.  Take a look at my clone site at: http://plaza.ufl.edu/jhelton/jh/index.html
 

The tricky parts were:

► The navigation buttons.  Emulating the look and function of those on the blogger site took some work.  I knew the basic CSS technique of creating navigation buttons from an unordered list, but getting everything to line up, getting the entire “button” to change colors when you hover the mouse over it, making the entire box clickable, hiding the dotted outline that appears around the link when you return to a page, making the borders look good, matching, colors, etc. all took some time.

►Aligning the CD images on the discography page with the associated text also took a few minutes to figure out. The text and the images all wanted to behave their own way.  A few CSS class designations later, and now it works great!

The rest of the design was pretty straightforward.  It was a good XHTML/CSS project.  I gained a much better understanding of how to position and format things with CSS, creating a clean, useful, and standards-based, web site.