Blog/Site Technology

The Technology Behind The Site

April 26th, 2009  |  Published in Blog/Site Technology

I am a management and technology consultant by day.  While I used to be a decent software engineer, I rarely get hands-on with technology any more and I miss it.  One of the reasons I built the Redskins Football Card Museum was to get hands-on again and learn as much as I could.  Most of the posts on this blog will be about collecting and/or our beloved Redskins.  However, this post contains the technical details behind the Redskins Football Card Museum.  This site is made up of two components.  The first component is the blog you are reading now.  The second component is the Card Museum itself. 

Everything is hosted at GoDaddy.  It is amazing how much open-source technology GoDaddy puts into your hands for a $4.95 per month web hosting account.  I highly recommend them as a hosting provider for personal and small business accounts.  Because I wanted to stay true to the open source model, this site is hosted on a Linux server at GoDaddy.  The same Linux server probably hosts 5000 sites.

Setting-Up The Blog

I decided to tackle the blog first.  One of the dozens of tools that GoDaddy makes available to web hosting accounts is the blog software WordPress.  A lot of people use free WordPress accounts for their blogs.  These blogs are typically hosted at www.wordpress.org.  However, this blog is self-hosted by GoDaddy on the domain redskinscardmuseum.com.  With a few clicks, GoDaddy installed my very own instance of WordPress.  By self-hosting WordPress, I have a lot more flexibility.

WordPress is highly configurable.  One of the first things you do when you set up a WordPress blog is select a theme.  The theme determines the look-and-feel of the blog.  Writing WordPress themes has become an industry of its own.  So, there are literally hundreds of themes to choose from – all of which can be customized.  I looked at dozens of themes and selected the Blueprint theme published by Fire and Knowledge.  Blueprint gives me a nice wide column for my posts and I like the typography – it is very clean and simple and cross-browser compatible.

Naturally, I had to customize the Blueprint theme.  These themes are made to be customized.  Unfortunately, I do not know much about of Cascading Style Sheets (CSS) and PHP.  However, I was able to hack my way through the changes I wanted to make (adding an image banner to the theme, changing the color scheme, and a few other minor changes) using Rapid CSS 2008 (a CSS and PHP editor).

Once WordPress was installed and I had customized my theme, it was time to explore the thousands of WordPress Plug-Ins that are available.  Again, all of these add-ons are free.  I ended up using the following WordPress add-ons:

  1.  Aksimet.  This add-on prevents spam from showing up in the blog’s comments section.
  2. All-In-One-SEO-Pack.  This add-on handles search engine optimization (SEO) so that my posts are optimized for Google, Yahoo, etc.
  3. Contact Form 7.  This add-on drives the contact form on the blog that you can use to send me messages.
  4. FeedBurner Feedsmith.  This add-on routes all feeds of this blog through FeedBurner so that I can manage all feeds in one place.
  5. Google Analyticator.  This add-on makes sure all of my posts are read correctly by Google Analytics.
  6. Google XML sitemaps.  This add-on generates a new sitemap every time I post and submits the site map to Google.  The sitemap tells Google how to navigate my site when it is evaluating my site for its search engine.
  7. NextGEN Gallery.  This add-on will allow me to insert image libraries into my posts.
  8. SEO Friendly Images.  This add-on puts the appropriate tags on my images to make them friendly to Google, Yahoo, etc.
  9. ShareThis.  This allows you to share a post with your favorite social networking site (the ShareThis icon appears after every post).  I will personally contribute $50 to the favorite charity of someone who uses ShareThis to tweet one of my posts.  After all, Twitter is the hottest thing going now so, if you tweet this, it means this blog is reaching the big time.  I am being a little sarcastic because the hype for Twitter is so strong right now.  But, I am serious about the $50 donation.
  10. WordPress.com Stats.  This add-on will tell me how many hits I am getting on each post and all kinds of other cool stats.
  11. WordPress Database Backup.  This add-on backs up my entire blog anytime I ask it to.
  12. wp-cache.  This add-on caches my posts (by creating static HTML pages) so they can be served out to readers faster.

I learned a lot of cool technologies setting up the blog for this site.  If you are thinking of setting up your own blog, please do not think you have to go through all of this simply to set up a blog.  Remember, one of the reasons I went through the exercise of building the blog and the site was to learn as many new technologies as possible.  At this point, I feel like I could set up a very good website for a small business using WordPress and the other technologies I was exposed to.

 

Imaging My Collection

To prepare for building the Card Museum site, I had to scan everything in my collection that was issued before 1973 plus some more modern material.   Considering that I wanted to create quality scans of the front and the back of every item, I knew I was looking at creating at least 1300 images (the current total is 1447).  This task is what kept from doing this several years ago.

First, I needed a scanner.  After doing some research in the PSA message boards, I decided to buy an Epson 4490 flatbed scanner.  The people in the forum were right; it produces tremendous images of cards.  The scanner cost about $150 and I recommend it highly.

I am certainly not an expert on digital imaging.  Again, while searching the PSA message boards, I came across an article that proved to be invaluable.  It taught me what I needed to know about scanning.  The article can be found here.  Do not take on a large scanning project without reading this article.  The author, Al Fasoldt, is spot on with his recommendations.

I used the Epson Scanning Software that came with my scanner to produce the images.  I used the following settings:

Original
                Reflective
                Document Table
                Photo

Destination
                24-bit color
                Best
                120 dpi (I used 100 dpi for items bigger than 5×7)
                Document Size:  Adjust Automatically
                Original
                100%
                Trimming: On

Adjustments
                I checked all of the adjustments except Color Resolution.  Do not use Color Resolution.

 

I used Photoshop Elements 7 for any image editing that I had to do.  One thing I did to make the images quite a bit smaller without sacrificing any quality is to use Photoshop Elements to process every image.   I used Photoshop Elements to save every picture for the web using Jpeg-Medium quality and to apply a sharpening mask.

I made sure that I used meaningful names for my image files.  I used the format of YYYY-Manufacturer-CardNum-LastName-Side.  So, when I scanned the 1952 Bowman Large card of Sammy Baugh.  The resulting file names were:

1952-Bowman-Large-30-Baugh-Front.jpg
1952-Bowman-Large-30-Baugh-Back.jpg

Having meaningful names makes it a lot easier to manage hundreds of image files.  Make sure that you do not have any spaces in your file names.  Naming files like this also helps slightly with search engines.  I used the image viewer Irfanview to do a lot of imagine management tasks including batch renaming.  It is a tremendous tool and it is free.

I have a number of items such as Redskins Newspaper Posters, McDonalds Redskins Posters, etc. that are very large and cannot be scanned using a flatbed scanner.   These are some of the items that I enjoy the most and I really wanted to include them on the site.  As usual, FedEx Office (formerly Kinkos) came to the rescue. 

I discovered that many FedEx Office locations have professional quality, sheet feed, large format, color scanners.  These devices cost about $15,000 and I was thrilled to find out that I could use one that was about 15 miles from my house.  I brought my materials and a flash drive to FedEx Office.  The clerk showed me how to use the scanner and left me on my own.  I was able to scan about 65 oversize items.  The quality was perfect.  You do have to watch your money here.  FedEx Office likes to charge $7.50 per scan.   However, since I went in late at night (after 10:00 p.m.) and did all the work myself and treated the manager nice, they charged me 50 cents per scan.  I walked out with a full flash drive containing images of my favorite collectibles.  I was thrilled.  I used Photoshop Elements to resize these images.  The scanner I used for these images was an Oce TDS-450.  If you go down this route, make sure your FedEx Office has a color scanner.  Some locations only have black and white large feed scanners.

I had a few items, like my Sunoco Stamp Album, that couldn’t be fed into a sheet feed scanner and were too big for a flatbed scanner.  For these items, I used my trusty (and very old) Olympus D-490 Zoom Digital Camera.  I took pictures in a brightly lit room and edited them with Photoshop Elements.

 

Building The Site

Once I had imaged my collection, it was time to build the site.  The site consists of approximately 150 HTML pages and 1300 images.  I used Serif WebPlus X2 as my visual HTML editor and site builder.  This package cost me about $60 and was more than worth it.  It mimics the interface of Word for Windows so the learning curve is reasonable.

Well before I got to this stage, I had designed the layout and navigation for my site.  I had also used Photoshop Elements and some of my images to create the image banners for the blog and the site.

The Serif WebPlus X2 tool was able to do everything I wanted it to do including adding the appropriate Google Analytics code to every page so I can use Google Analytics to monitor traffic to my site.

As I mentioned, I used this tool to create approximately 150 HTML pages and the navigation I need between pages.  Serif WebPlus X2 generates HTML that is cross-browser compatible and complies with all of the major standards.  It has an FTP client embedded in it that made publishing all of these pages to my GoDaddy hosting account a breeze.

Back To Our Regular Programming

I realize that was a lot of technology to digest.  However, I have received some questions about what it took, from a technical perspective, to build this blog and the Card Museum.  So, I thought it made sense to take some time and document what I did before I forgot it all.

Tomorrow, we will get back to our main topic of Redskins football card collecting with an article on the trade that brought Sonny Jurgensen to the Redskins.