Technology As Though People Matter

Photography When The Weather Doesn't Cooperate

support@gbeddow.com (Greg Beddow) — Mon, 21 Sep 2009 22:03:49 GMT

I'm a big fan of being ready to take advantage of opportunities. Of taking the camera along on those outings "just in case". And if I'm not inspired that day by what I'm seeing, that's OK. Sometimes the camera doesn't make it out of the bag. The important thing is it was there, at the ready.

Like a lot of things in life, photography has its challenges: You take the family to the beach, you remembered the camera, but it's a lot windier than you hoped (unless you really like that wind-blown look in your family!). Or you head for the woods to take a hike, and the clouds move in: The sky is dark, everything around you is a monotone, and the camera stays packed away. Bland, uninspired photo conditions, right? But wait a sec. Is it possible you're still missing an opportunity?

You can't control the weather obviously, but in many cases you can not only control your response to it, but actually use that less-than-perfect weather to your advantage. How's that you say? Try this the next time you're challenged by the weather: Pull the camera out anyway. Go ahead, I'll wait while you get it. Begin by taking a few shots of whatever's going on. Establish some context for the outing with a few landscapes. Get some of the dog playing in the ocean. You can be freer if you're shooting digital of course since you can always delete them later, but even with film it's a worthwhile exercise.

Here's what I mean:

Not the most inspired photo, and certainly not the best light, but think of it as loosening up those photo muscles. Next comes the really important part: look beyond the obvious landscape/family/pet shots. Here's an example of something small that caught my eye:

A common beach flower in our area, perhaps an inch across, and one that usually goes unnoticed. Look for subjects like these that stand out against their backgrounds. Pay attention to light direction: it may be cloudy but you still don't want to cast a shadow over your subject. Try getting in as tight as your camera will allow. If you have a macro setting, use it. Otherwise get as close as the camera can focus, then zoom further if needed.

The conditions on the beach one day were cool & windy -- per usual in Northern California -- and by far the most interesting thing going on was an unusual swarm of thousands of ladybugs scurrying across the sand. The challenge was to isolate just one, and to present her (him?) against the open, sandy landscape.

Finally, an example on a cloudy day that's less about close-ups and more about staying open to possibilities -- in this case cropping later to a less traditional, wide landscape orientation:

While it's true that these could have instead been shot in perfect weather, there are actually distinct advantages to shooting on overcast days. For one, unless you're shooting very early in the morning or very late in the afternoon / evening, the sun in a cloudless sky makes for difficult lighting. Most areas will have the same approximate brightness, creating a very flat scene. The highlights can be harsh, with washed-out areas, and deep shadows can drown out, rather than define, the shaded areas. There's simply too wide a dynamic range to effectively capture the scene. Second, on a cloudy day there's a quality to the light in close-ups that suffuses through a scene -- glowing rather than radiating -- that you just can't get on a bright day.

So while you shouldn't overlook close-ups and other less obvious shots regardless of weather, try it especially the next time the weather's not cooperating. You remembered to bring your camera, right?

How do you deal with shooting when the weather's less than ideal? Share your thoughts & tips by jumping in with your comments!

jQuery UI: Web Page Dialogs

support@gbeddow.com (Greg Beddow) — Thu, 03 Sep 2009 19:38:26 GMT

Sometimes you run across something so simple, so easy & beautiful, that you kick yourself and say why haven't I been using this all along? I'm talking about dialogs on your web pages. The kind that provide your reader with "extra" information about something -- not that JavaScript alert() ugliness -- the kind that offer substance, and a bit of style, to your site.

But before getting down to specifics, let's look at the traditional way to expose further information about a phrase, image, or other element of your page: a link to another page:

Click the link, another web page appears. Nothing special. Tried-and-true method for organizing & navigating information on the web, right? The way to get the job done, especially if what you link to is a complex page with its own set of links to other pages, etc. But what if you just have a little more info to expose? Again, you link to a page...or do you? The thing is, the new page is likely a dead end, so you have to click the Back button to continue where you left off. From a visual and cognitive standpoint, you've just imposed two big contextual shifts on your audience: navigate forward to an entirely new page, then navigate back. Sure, you can get away with it occasionally, but after a few of these many people will tire of it and move on.

But what if the "link" keeps you on the same page, and displays a small dialog containing the additional info?

Click the link, the dialog appears (obscuring part of the page, but you can move it), you interact with it briefly, then dismiss it. Still a contextual shift, yes, but a much smaller one.

Until a few years ago this sort of thing was possible on web pages using HTML iframes and such, but cumbersome to implement and prone to glitches in different browsers. These days, however, there are several JavaScript libraries available to ease that pain considerably. Let's take a look at one of them, jQuery UI, based upon the excellent jQuery library.

If you've never used jQuery, you really owe it to yourself to give it a go. Its style may throw you a bit at first, but once learned, rewards you over and over. jQuery UI takes it a step further with highly interactive widgets (including dialogs), animation and more. To whet your appetite and demonstrate how little it takes to get started, here's the entire HTML and scripting for that screen shot above:

    <!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
        <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
        <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
        <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            $("#dialog").dialog();
          });
        </script>
      </head>
      <body>
        <div id="dialog" title="Dialog Title Goes Here">Dialog contents go here.</div>
      </body>
    </html>

That's it! A hand-full of code. Considerably less code is required, actually, if you download the jQuery UI package (more on that later) instead of referencing the individual files on their site. And of course everything in jQuery UI is stylable with CSS. In fact, as we'll see, you can even style many elements before you download jQuery UI!.

So let's look at where you might put some of this goodness to use:

Here's a portion of a web page, with the user about to click on the link "great remodeling project". Instead of linking to another page, how about displaying a jQuery UI dialog with more info?

Now, for a quick demonstration like we did above, it's OK to load the jQuery UI files from their site. But for a production site you really want to host these files on your own site. And because jQuery UI is highly modular, it gives you the opportunity to use only the files you actually need, and even combine those files into a single JavaScript file prior to the download. To top it off, they even let you customize the CSS before downloading. Nice! Here's a portion of what their customization screen looks like at the jQuery UI download page when you choose to design a custom theme:

If you're not interested in using a custom theme you can skip this step of course, but here I decided to make color settings that harmonize with the rest of my site, then clicked Download Theme to bring me back to the main download page. (Note that the resulting CSS file will contain a link back to this page where you can return to make further refinements to your custom theme and download again. Talk about catering to your user!)

Back on the main download page, choose the jQuery UI modules you need based upon the features you'll be using and click the Download button. The site then builds and downloads a zip file containing a single customized, minified JavaScript file containing the modules you chose. If you chose a custom theme there's also your custom CSS file. In addition there are some other files in the zip package which, for our purposes here, we'll ignore. Gather up the files you need and upload them to your site.

Let's take a look at what we have so far. Here's the HTML like before, but for our customized jQuery UI download and with a dialog that opens to display an image:

    <!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="Stylesheet" />  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            $("#dialog").dialog({width:534,height:450});
          });
        </script>
      </head>
      <body>
        <div id="dialog" title="Kitchen Remodel">
          <img src="P1020427.jpg"/>
        </div>
      </body>
    </html>

And here's what the page looks like now:

Now let's see if, instead of a single image, we can spruce things up by displaying a slideshow in the dialog. First I'll show how it's done for the CMS / host for my site, Webvanta, then show a simpler, more generic version based on Flickr that you can use anywhere. Here's the Webvanta version:

    <!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="Stylesheet" />  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            $("#dialog").dialog({width:560,height:450});
          });
        </script>
      </head>
      <body>
        <div id="dialog" title="Kitchen Remodel">
          <div class='span-2 prepend-1' style="display: none;">
            <div id="thumbs" class="navigation">
              <ul class="thumbs noscript">    
                <w:assets:each tag='kitchen-remodel'>
                  <w:if_rendition name='thumb'>
                    <li><a class="thumb" href="<w:path rendition='medium' />">
                      <img src='<w:path rendition="square_thumb" />' />
                    </a></li>
                  </w:if_rendition>
                </w:assets:each>
              </ul>
            </div>    
          </div>
          <div id="outer_wrapper">
            <div id='wrapper'>
              <div class='container'>
                <div id='content_area' class='clearfix'>
                  <div class='span-16 last'>
                    <div id='empty_gallery' style='display:none'>
                      <h2>No images are currently in the gallery</h2>
                      <p>Upload them via Content > Images and Files.</p>
                      <p>When uploading, select the "gallery" tag and check "create thumbnails"</p>
                    </div>
                    <div id='container'>
                      <div id="gallery" class="content">
                        <div id="slideshow" class="slideshow"></div>
                        <div id="controls" class="controls"></div>
                      </div>       
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script type="text/javascript">
            jQuery('div.content').css('display', 'block');
          </script>
        </div>
      </body>
    </html>

To see this code in action, click here then click the "great remodeling project" link on the page to open the slideshow dialog. I won't go into detail about how this code works (perhaps a future article), but if you're using Webvanta it's a very easy cut & paste of the code, and "tagging" of the images you want to appear in your slideshow.

Finally, here's the more generic Flickr-style slideshow you can use on any site:

    <!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="Stylesheet" />  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            $("#dialog").dialog({width:560,height:450});
          });
        </script>
      </head>
      <body>
        <div id="dialog" title="Kitchen Remodel">
          <object width="500" height="400">
            <param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2Fshow%2F&page_show_back_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2F&set_id=72157621840930765&jump_to="></param>
            <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param>
            <param name="allowFullScreen" value="true"></param>
            <embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2Fshow%2F&page_show_back_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2F&set_id=72157621840930765&jump_to=" width="500" height="400"></embed>
          </object>
        </div>
      </body>
    </html>

There you have it. Easy-to-use jQuery UI dialogs for your site. Mind you, don't make that an excuse to go crazy with them. Use your best judgement, and enjoy!

Are you using jQuery UI dialogs? How about dialogs from other JavaScript libraries? Jump in and post your comments!

How I Learned To Love The Compact Digital Camera

support@gbeddow.com (Greg Beddow) — Fri, 21 Aug 2009 02:30:43 GMT

I've been reflecting recently on why it is I use a compact digital camera these days.

Years ago I used 35mm SLR (single-lens reflex) cameras like the Olympus OM-10 and OM-G. And before that I used a fully manual 35mm Leica. The quality of these cameras was, and still is, just phenomenal. (I think there was even a black and white box camera back there somewhere, but its name escapes me now.) When I had plenty of outdoor light, such as on backpacking trips, I remember choosing slower films like Kodachrome for the OM-10 to "give us those nice bright colors" like the song says; for everyday use a faster film like ASA 200 or 400 so I could shoot in lower light if I needed. I remember the anticipation of returning from these outings, waiting for my film to be processed and to see those prints or slides. Alas, much has changed since then. Kodachrome has been discontinued, another victim of the digital age. And the cameras? I'm not sure what's happened to the Leica. The OM-G, fully functional as far as I know, sits idle in my garage. The OM-10 got some hard use and eventually developed a light leak. (The box camera? Not sure. Perhaps it's stashed away in the attic of a family member.)

OK, enough reminiscing. Chances are you've already made the switch from film to digital, or perhaps never even used a film camera, and you don't need me to tell you why to go digital. But why a compact digital camera? I can already hear the purists out there nay-saying this wanna-be class of camera, lumping its owners in with the ignorant masses. For the record, I have nothing against the bigger cameras; I may return to them myself some day. But let's take a look at why you might consider 'going compact'. And if you already have its larger sibling, a digital SLR, why you might consider using a compact at least part of the time.

A whimsical image like this says a lot about why I use a compact digital. Dogs are notoriously difficult to photograph, and ours is no exception. They're constantly on the move, walking, running, sniffing, looking this way and that. Sure, you can wait until they sit or lie down. But most photos made that way look posed, or they don't say anything about the nature of that particular dog and, well, they're boring. In this case we were walking on the beach that day, with Festus a short distance away and catching up to us from behind. So I thought I'd try the time-honored technique of anticipating when something interesting might happen. Almost in a single motion I pulled the camera from my pocket, stopped, kneeled down to "dog level" without turning around, and as our dog came from behind and turned toward me to see what I was holding (the camera), I took the shot. There wasn't time to even glance at the composition in the LCD. This is where it helps to know your camera, including its zoom settings -- in this case its widest setting, and to practice taking "blind" shots like this now and then. It's also where, during later review of your photos, you need to stay open to possibilities: at first glance you see a photo "ruined" because half the dog's face is cropped out of the picture (it really was shot that way, no cropping later); with another look, something far more interesting emerges.

Here's another example. This time it was the rare occasion when our dog was sitting still; it was the movement of the other dog, and owner, which presented the challenge -- and opportunity. I had looked toward the water at the moment when the two were perhaps at the right edge of this photo, walking toward the left, so I thought I'd give it a try and quickly took a single shot. I'm not sure whether I checked the image I had captured on the camera's display, but when I got home and dowloaded it I knew right away it was a keeper.

"But," you protest, "you can just as easily take shots like these on larger cameras." And, I might add, quite possibly of better quality too (the photos here are compressed, reduced resolution versions), though certainly today's compact digital cameras can produce excellent images. Those are both valid arguments, but what they miss is whether you would have taken them with that big SLR. Sure, you can devote specific outings to taking pictures and getting some great shots. But my contention is that the vast majority of folks who own an SLR pack it to record a specific event, or only for those "special" people, places and outings in their lives. To me that's opportunity lost for every time you don't have the camera with you. The moment happens, and you have no way to take advantage of it because you didn't want to haul around that big camera. What if, instead, you just brought a camera with you, in your pocket, whenever you go somewhere more interesting that, say, the corner grocery store (although you could do that too!). Or if you do have the big camera with you, consider bringing the compact too for those spontaneous moments. It helps blur the line between "photo outing" and "everyday life". It encourages you to look, really look, at the world around you, and appreciate the photographic opportunities it presents every day.

And to be ready when the moment happens.

What's your camera of choice? Do you bring it with you pretty much wherever you go? Jump in and join the discussion!

Why I'm 'Giving It All Away' - The Creative Commons License

support@gbeddow.com (Greg Beddow) — Mon, 17 Aug 2009 19:49:38 GMT

I told a friend of mine the other day I decided to license the photos and other content on my web site under the Creative Commons License.

Being an artist and therefore, rightly, concerned about theft of her own work, she stared at me in disbelief.

Many people conclude such a move to be synonymous with just “giving it all away”, and in a sense it is, but there’s more to it than that. First, I’ve chosen a version of the license that provides for attribution. In short, you’re free to share and remix the work, pretty much to your heart’s content, so long as you attribute it back to its author (me). Seems only fair, and not so much to ask really. There’s even a handy snippet of HTML on the license page containing a link back to my site, which you can use for citing the work. Second, and here’s the really interesting part, the license provides that you agree to license your reuse under similar terms. Like dropping a pebble into an infinite lake, the waves keep spreading forever. Finally, let’s say you decide that great photo you took of Yosemite is suitable for commercial licensing, but you’ve already licensed it under Creative Commons. No problem. You can’t revoke the previous, more permissive, license someone may already have for the photo, but you can change the licensing of the photo for uses in the future.

But what if someone else profits from their reuse you say? Great! What if they profit and I don’t? Again, great. Nothing here to preclude that. In fact, if someone else profits from my work, the more it contributes to the sharing of ideas and general discussion. The value of the work increases. What it really boils down to is this: if you want to minimize the influence of your work, keep it private, hoard it, limit its use, place onerous conditions on its use; if you want to maximize its influence, do everything in your power to get it to as many people as you can, as often as you can.

How are you licensing your work? Other feedback? Join the discussion!

Building A Web Site Using Webvanta

support@gbeddow.com (Greg Beddow) — Wed, 05 Aug 2009 03:35:51 GMT

Recently I had the pleasure to build a web site using a service that’s in public beta: Webvanta. (Full disclosure time: the company’s founders, Michael Slater and Chris Haupt, are former colleagues of mine, and I’ve done contract programming for them.) It's a great way to build content-rich web sites -- without programming, although you can if you really want.

OK, there are a few things I’d like to see improved in Webvanta; more on that later. But, for what I suspect are a sizable percentage of web designers out there, the service offers a streamlined way to get up and running quickly -- and has the backend infrastructure to grow with you as your site, and traffic, grow. Plus your clients can edit and reorganize information on the site themselves without any technical knowledge.

Webvanta takes care of all the web hosting, backups & other maintenance with no up-front fees, and the service is free while you develop your site. If you’re a professional web designer they throw in free support, and there’s plenty of documentation and video tutorials available to all. Once your site is live, monthly fees range from $29 to $99 ($19 for small non-profit sites). Community features include user commenting, RSS feeds, sharing with other sites, and a blog facility.

So what better way to explore a service that helps you build web sites than … to actually build a web site? (Hey, they don’t call me Obvious Man for nothing!)

After signing up this is what my site looked like initially. It came pre-populated with a few pages and menu navigation between them -- all customizable of course. Note that control panel strip you see across the top is only visible when the admin (you) are logged into the site. It’s what gives you access to uploading files and otherwise modifying your site.

So now I was faced with a choice: I could customize the Webvanta CSS, or start over with my own. The first option is good if you’re building your site for the first time. The latter is the way to go if you have an existing site you’re converting, or if you have your own preferred layout. In my case I wanted to see how flexible Webvanta could be if I started from my own styling and, if needed, bring in portions from Webvanta.

Now, in no way do I consider myself a web designer. So my first step was to hunt down a layout for my site; in short order I had one I liked (from Metamorphosis Design), uploaded its CSS file, and copied its HTML into the home page of my site.

At this point I concentrated for a bit on Webvanta’s pages, templates and snippets. Webvanta pages represent the basic visual organization of your site:

From the Pages control panel you can edit existing pages (several, as seen above, are already provided for you), add new pages, move them around in the menu hierarchy, and delete them. The lower portion of the screen reflects all the pages stored in the system, while the upper portion reflects the pages that appear in the menu hierarchy. The menu system tracks your changes, so if you move a page in the menu hierarchy, the menus on your site automatically reflect the new position. All pages are fully editable, so you can make them look any way you want. Some pages, like the result of a search on your site or the “page not found” page, are system-generated and don’t ordinarily belong in the menu hierarchy (and these too can be customized to look however you want).

Webvanta templates provide the overall visual structure of a page. For example you can have a template that defines a menu across the top of the page, a 2-column layout for the body, and a footer containing copyright and other info. In my case I decided to clone the built-in “Two-Column (narrow right col)” template into a new template called “My Two-Column (narrow right col)”, then modify it to reflect the (Metamorphosis) layout I’m using:

They’re somewhat difficult to see in this image, but you’ll notice various tags in templates like this one (and many snippets) that start with “w:”. I won’t describe here how these WebvantaScript tags work (perhaps the subject of a future article) except to say they provide powerful, easy-to-use access to the Webvanta CMS. For simple sites like this one you can get by using the built-in WebvantaScript that you’ll find in the templates and snippets; for more complex sites you’ll definitely want to check out the documentation and tutorial videos.

Next it was time to start entering and styling some placeholder content. Each Webvanta page is associated with a (single) template, or can inherit whichever template its parent uses. In my case I wanted a consistent look throughout the site. So I set my home page to use the new template I just created, put some placeholder content in the page, and set all the other pages (including the system-generated ones, like search results) to inherit their templates from their parent. In short order I had every page on the site using a consistent (new) layout, and tweaks to that layout could now be done in one place rather than throughout the site:

Finally, Webvanta snippets represent small chunks of data -- plain text, HTML or WebvantaScript -- that can appear in more than one place on your site. Once defined, you can reference the snippet from multiple places:

A number of snippets come pre-configured that represent, for example, the HTML for the heading on each page. In my case I cloned 4 of the built-in snippets, “header”, “html_head”, “footer” and “kb_inline_search_form” into “my_header”, “my_html_head”, “my_footer” and “my_kb_inline_search_form”, then modified them to match my layout, and set the “My Two-Column (narrow right col)” template to use the new snippets.

At this point I had a fully functional web site, but I took the extra step to refine it further with integration into the Webvanta menu system (which of course the Metamorphosis layout knew nothing about), and integrate it into their page editing “body” and “right” tabs for easier page editing. Total time: about 2 days.

So where can Webvanta be improved? For starters, the admin user interface can be a bit clunky at times. (Webvanta’s CTO Chris Haupt says this is a high priority on their backlog.) Second, the blog system currently lacks a tagging feature (again, on their radar) and blog image handling is mildly awkward: you must first upload your image, then come back to your blog entry and reference the URL (more integrated support would be helpful). For tracking your site usage, there’s some built-in support for Google Analytics, and other analytics are supported so long as they only require JavaScript, not PHP or other server-side support. And finally there was one minor glitch I hit while building the site: I wasn’t able to change the login email address of my site admin -- although I was able to add a new user login with the desired email address (they’re working on a fix).

The site otherwise feels very solid. Performance was good to excellent, both in admin mode and general site usage, and tech support is very responsive. I give it a solid 4 out of 5 stars.

Have you built any sites using Webvanta? How does it compare to other systems you’ve used? Feedback on this article? Join the conversation!

whnqxd94vc

support@gbeddow.com (Support) — Sun, 09 Aug 2009 03:44:29 GMT

whnqxd94vc