There was an article on Reddit this week encouraging folks to list this early
photography blunders. A common one was the “cover every mm” mistakes – where
you try to get zoom lens that cover the entire range of focal length
possibilities. I know this mistake fairly well, I made it myself.
I started SLR photography in 2008 when, anticipating a Europe trip, I decided
to dump my point-and-shoot camera for a Nikon D80. As with any important
purchase, I researched the topic to death and often came upon Ken
Rockwell’s site.
Here’s the thing. Ken Rockwell is a master of SEO. He will show up on pretty
much any photo-related Google search. I think he has some excellent starting
advice if you are interested in getting the best vacation and family photos out
of your camera. However, I think that his reviews are rather subjective and
lack the more thorough and systematic reviews that you would find on
PhotoZone (a site, I sadly discovered after my
camera purchase) and I do not think his is advice is geared towards someone
pursuing photography as a fine art or career.
The $600 Mistake
Being new to SLR photography, I fell into thinking I would need to cover the
full range of focal lengths, and I didn’t care for carrying around the kit
18-55mm and 70-300mm lenses that were often sold with cameras. So I started
looking at the 18-200mm lens, which today retails
for $950.
I assumed with such a hefty price-tag, this lens would be an upper tiered zoom
lens and at the time folks (such as Rockwell) were raving about how it had
replaced their need for all but exotic lenses.
The truth is, the lens is soft, distorted and never took a shot better than my
little point-and-shoot. As soon as I got home from my trip, I bought a prime
normal lens and rarely ever put the 18-200mm on my camera again.
This learning experience was not all bad. I did get one thing out of the
18-200mm: I learned that I do not need to cover all the focal lengths. Indeed,
I really only need three different prime lenses to cover my shooting needs.
You see, when I got back from Europe I looked through my photos and discovered
an interesting pattern. I shot all my landscapes at 18-24mm, I shot everything
indoors or medium-ranged at 50mm, and I shot all my telephoto shots at 200mm.
Three distinct groups. I really did not need the ranges of 25-49mm and 51-199mm
at all.
Today, I’m moving all of my lenses over to three lenses: Nikkor 35mm DX f/2.8
(or Nikkor 50mm f/1.4 when I get an FX body), Nikkor Micro 200mm f/4, and the
Nikkor 12-24mm f/2.8. Three lenses at a much higher cost and covering a much
smaller range of focal lengths, but worth it because they will take better
shots than the 18-200mm ever did.
There’s Still Some Use for a Super Zoom
So my advice to new photographers? I would recommend that you buy prime lenses
or if it must be zoom – keep the range of the zoom relatively small. As for
the 18-200mm beast? It does serve a purpose. I would suggest renting it for a
week. Take it on vacation or somewhere that you will likely make a lot of
shots. When you get back graph out your most common focal lengths. A pattern
will arise showing what you really need to cover.
Happy shooting.
When I started making websites in the 1990s we had a much smaller set of tools
and a lot of websites were what we would today call “static.” A static site was
nothing more than a folder of html files that contained both the content and
layout of the site. If we wanted to change the layout of our site, we would
either need to get new content or go through each individual file and update
the layout.
Today we have CSS which introduced the paradigm of sperating content from
layout. A site that applies this principle throughout its implementation will
be a site that can easily be “reskined” or “re-templatized” without needing to
port the content from the old site.
I have been working with CSS for some time, but one item about the WC3
standards always eluded me: the requirement for all HTML image tags to have an
alt tag. Why should an image have an alt tag? Afterall, not every image has a
suitable alt tag. Any given site contains drop shadows, gradients, invisible
spacers, little meaningless image flourishes. Should we label each and every
one? Then I realized why this rule is in place: the image tag must be
reserved for content!
Lorem ipsum dolor sit amet, in cum possit oporteat, et vel aperiam apeirian. No
quem graece referrentur eum, ei his case gloriatur appellantur. Nec error
consetetur an, est dicam semper imperdiet ea. Eu duo choro recusabo. Qui at
velit aperiam, volumus sensibus deseruisse ei ius, mea an homero primis
scripta. Ex elit maiestatis signiferumque sea. Mei vidit efficiendi disputando
ex, ei erat soluta sed. Sit at nulla putent, ancillae honestatis eos an. Ius
nisl audire noluisse in, per ea commodo nominati, usu brute adversarium id.
Quem alia tamquam mel at. In atqui admodum vix.
There exists no real reason that the two curved images used to create the
rounded corners on the above div should need an alt tag. Indeed, if we look at
the source code, we would find this solution rather messy:
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 454px; margin: 0 auto;"</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">img</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: left;"</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"example_left.png"</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"Example Upper Left Curve"</span> <span style="color: #66cc66;">/</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">img</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: right;"</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"example_right.png"</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"Example Upper Right Curve"</span> <span style="color: #66cc66;">/</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 340px; background: #dfe5e6; margin-left: 57px; height: 57px;"</span> ></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"clear: both;"</span>><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 434px; background: #dfe5e6; padding: 0px 10px 0px 10px;"</span>></span>Text Here<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
How do we know if an image is layout or content?
An image is content if it conveys a meaning or invokes an action. That is, if
you can
- Call an event on the image (click or mouseover)
- List item Write a caption for the image. If one or two is true, then the
image is content. Otherwise the image is reserved for the dregs of layout.
How should a layout image be reperesented?
Here is where CSS comes into play via the background property and where my
earlier mistake takes place. I had assumed that the background property was
expressed for the purpose of backgrounds! That is, since a div collapses if it
contains no content, then the background property ought to be preserved only
for divs that contain content in which case the background goes behind that
content. My discovery is this: the background property is for *much more than
just backgrounds!
It is best to think of the background tag as a means of adding stylized images
or colored blocks into a design’s layout. So if we desired rounded corners on
our divs we shouldn’t resort to using the image tag, but rather ought to use
the background property on an empty div then add width and height to ensure it
does not collapse such as so:
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 454px; margin: 0 auto;"</span>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: left; width: 57px; height: 57px; background: url('/images/posts/2012-02-21-properly-seperate-content-images-from-layout-using-css/example-ul.png');"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"float: right; width: 57px; height: 57px; background: url('/images/posts/2012-02-21-properly-seperate-content-images-from-layout-using-css/example-ur.png');"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"width: 340px; height: 57px; background: #dfe5e6; margin-left: 57px;"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
<span style="color: #009900;"><<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"clear: both;"</span>></span>
<span style="color: #009900;"><<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>></span>
or as we see in it’s final output:
Lorem ipsum dolor sit amet, in cum possit oporteat, et vel aperiam
apeirian. No quem graece referrentur eum, ei his case gloriatur appellantur.
Nec error consetetur an, est dicam semper imperdiet ea. Eu duo choro recusabo.
Qui at velit aperiam, volumus sensibus deseruisse ei ius, mea an homero primis
scripta. Ex elit maiestatis signiferumque sea.
Mei vidit efficiendi disputando ex, ei erat soluta sed. Sit at nulla putent,
ancillae honestatis eos an. Ius nisl audire noluisse in, per ea commodo
nominati, usu brute adversarium id. Quem alia tamquam mel at. In atqui admodum
vix.
A much cleaner solution to using alt tags! I hope this clears up some
misconceptions about how to properly use the image tag and how to utilize CSS
for layout images.
I saw the trailer to The Secret World of
Arrietty when I went out to watch The
Muppets back in November. Now mind you, I was out on Thanksgiving break
visiting my folks in the frigid north of Escanaba, Michigan. The Northern
Midwest is not know for its taste in eclectic films – theaters up there
typically run the top selling Hollywood flicks of the week and little more. So
you can imagine my delight to see a Studio Ghibli
film being advertised in such a mainstream venue!
It seems that this is a new move for Disney, which according to The Ghibli
Blog,
will be promoting the film with a release in 1,200 theaters this month.
Unfortunately, from what I can find: there is no release scheduled for Sioux
Falls. So I’m either going to have to drive or wait for the DVD release.