It's All Been Done Before ...

Lately, I’ve been thinking a lot about the infancy of the Internet — those glory days when the Web was new and everything was different and exciting. Back in 1994, there was no Amazon, no eBay, no PayPal. No broadband. Altavista was the search engine of choice; Google wasn’t even a twinkle in its fathers’ eyes.

The Web was a wild new frontier, full of experimentation and possibility. It was a people place where “information wanted to be free” and people built web sites out of curiosity, altruism, and idealism. It was a world of bright ideas and innovation, when one could get wildly excited about tables, frames, and animated GIFs.

It was a world focused on information sharing, collaboration, and empowerment. You heard a lot of talk about the potential of technology for bringing about social change and “levelling the playing field.” Newsgroups and web forums let people post and share ideas, support one another, and debate important issues.

Then, along about 1997-1998, the corporate world woke up to the profit potential of the Web. In a few short years, the Web was hijacked by big business, commoditized, and transformed into an ecommerce money machine — spelling the end of an era of people power and grass roots innocence.

Soon, nothing wanted to be free. Popular sites began charging for information. Advertising ruled. Then came the consolidations. Big fish gobbled up the smaller fish. Mergers and acquisitions became the order of the day. Only the strong survived.

Then, around the turn of the millenium, a new trend emerged. The blogging phenomenon was born, quietly and with little fanfare — launching a widespread grass roots revolution and a triumphant resurgence of people power. Today, servers everywhere groan under the strain of an estimated 28 million blogs and counting.

These days, I’m experiencing a strange sense of déja vu, coupled with uneasy glimmerings of impending doom. To quote the Barenaked Ladies, it’s all been done before ... Remember Zeal? This novel experiment was based on a breakthrough concept and enjoyed a strong and dedicated user community. It was a forerunner of today’s social bookmarking and tagging sites like Wink, StumbleUpon, and Furl. Today, Zeal is part of the LookSmart network (as is Furl).

The phenomenal growth and impact of blogging; the advent of exciting new technologies; the wild and wooly sense of novelty and innovation; the feeling of community — it all puts me in mind of the heyday of the early Web.

But it’s all still free. The blogging tools, the massive volume of information being pushed out into the blogosphere, the ancillary resources. Sure, some blogs are monetized by AdSense, but this brave new world hasn’t yet sold its soul.

How long til it does? It’s just a matter of time, of course. The corporate hounds are smelling money to be made, and already there are signs that business has awakened to the profit potential of the blogosphere.

Here we go again ...

Web 2.0: Doing the Monster Mashup

I learned a new word recently. According to Wikipedia, mashups are web hybrids that combine content from multiple sources into a single integrated user experience, using APIs, Javascript, and Web 2.0 technologies such as RSS feeds.

I had recognized for a while that this kind of integration is going on, but I didn't know it had a name. Another entry for the jargon dictionaries!

Companies that make their APIs publicly available include eBay, Amazon, Google, Yahoo, Flickr, and Skype, which is why we frequently see mashups pulling content from these sites, along with feeds from Digg, Slashdot, del.icio.us and others.

Typical of this new functionality are sites like Internet Bargain Center, which extracts eBay listings by zip code, and MashMap, a geographic movie listing service. The Flickr amusements I have written about previously here are also examples of mashups.

Already, numerous sites have sprung up to keep track of these hybrids and to announce new mashups as they come onstream. Two notables are Mashup Feed and Programmable Web.

Comments? What do you think of mashups? The greatest thing since sliced bread or a dog's breakfast?

Another Cool Color Tool

I love stumbling across useful online tools and gadgets, especially those that make web design chores easier and more enjoyable. Earlier, I blogged about a useful tool for generating intermediate shades of colour.

Staying on this theme, here's one of the sweetest little color generators I have ever seen. Petr Staníček's site, WellStyled.com, contains a Color Scheme Generator that lets you creates color schemes with a single click of the mouse. Click on one of the color swatches arrayed around the onscreen color wheel and this nifty tool will create a four-colour scheme for you.

This is one of the most elegant applications I have seen. Additional features let you select among five types of colour schemes; choose a web-safe palette, if desired; vary the degree of opacity (he uses the term pastel); even view your colour scheme as persons with various types of color vision impairment might see it.

Available color schemes include monochromatic (various tones of the same hue), complementary (two colors diametrically opposite on the colour wheel), analagous (adjacent colours), triads (three equidistant colours), and tetrads (four equidistant colours).

Truly worthy of your favourites list, (though professionals should note that the model used is closer to classic subtractive (pigments-based) color theory than additive (light-based), and that the RGB conversions are approximate).

Another, similar but less full-featured tool recommended by a reader of this blog is Color Schemer Online. It, too, allows you to click on colour swatches and to lighten and darken schemes.

Have a favorite color tool? Let me know about it via comment. And if you enjoy these posts, please support the site by linking to Random Bytes. Sign up for our feed to be sure not to miss anything.

Google the Math Whiz

This falls into the betcha didn't know category. Or maybe you do, if you're a Google junkie like me ...

Besides being the Net's foremost search engine, Google is a math genius. Its handy calculator feature lets you perform quick arithmetic operations. Just click in the Google search field and type your arithmetic statement, using standard spreadsheet operators (+ to add, - to subtract, * to multiply, and / to divide).

Ask Google 4+4/2, for example, and it will dutifully report back 6. (The 6 result is because multiplication and division are performed before addition and subtraction. To change the order of operations, put parentheses around the numbers to be added, as in (4+4)/2. Now Google will respond with 4.)

Metric Conversions Too!

The math functionality is handy for calculating expenses, the sales tax portion of a bill, all kinds of things. But it gets better. Google will also convert metric to imperial and back again. Ask this digital savant, for example, to compute 285 miles in km and it will tell you that the answer is 458.66304 kilometers. Ask it for 78 f in c and it will tell you that it's 25.5555556 degrees Celsius outside (OK, maybe not outside this house).

Use it to convert to/from metric when you're cooking. Google quickly confirms that 4 cups in litres is 0.94635295 litres, that 6 oz in grams is 170.097139 grams, even that 12 teaspoons in cups is 0.25 US cups.

Like this tip? Stay tuned for more great things you can do with Google. Sign up for our feed to be sure not to miss anything. And if you find these posts helpful, please support the site by linking to Random Bytes.

Build a Three-Column Blogger Template!

Update: need a widget-friendly version of this template for New Blogger? See this post.

Some time back, in writing about the many template hacks this blog has undergone, I promised to share how Random Bytes morphed into three columns from the original two-column Minima design created by Doug Bowman. The volume of queries on this topic in my stats tells me that a lot of other Blogger users want this flexibility.

Fortunately, it isn't hard. Switching the default two-column layout to three requires a few modifications to your template. Here's how to proceed:

1. First, back up your current template, just in case anything goes wrong. I usually just copy it to a Notepad file on my desktop. (Open the Template tab, click inside the template area, press Control+A to select the entire document, and Control+C to copy; then switch to Notepad, press Control+V to paste the document, and Save.)
2. Go back to your Blogger template and scroll to the embedded stylesheet at the top. Add a new style to format the left-hand column. Mine looks like this:
   #SidebarLeft {
   position:relative;
   width: 20%;
   padding-right:.5%;
   float:left;
   margin-left:.5%;
   clear: none;
   text-align: left;
   }
3. Locate the HTML part of the document. To create a left-hand column, as in this blog, open the SidebarLeft div (type <div id="SidebarLeft">) immediately after the <div id="content"> tag. Put a closing </div> before the Main div. This partitions off the left 20% of the screen for a sidebar — now you can put any content you like between this pair of divs. In this blog, I have placed the Archives on the left, along with categories, popular posts, and RSS feed icons. (Note: If you are using another template, the style names may differ, but the same principles apply.)
4. Return to the top of the template and tweak the other main content styles to accommodate the new design element. You'll need to make the central text area narrower and set its left and right margins to auto. You may also need to reduce the width of the existing right-hand column. Experiment with width, padding, and borders of the styles until you have a design that works. Here are the settings I used for this blog:
   #content {
   width:78%;
   margin-top:15px;
   margin-left: auto !important;
   margin-right: auto !important;
   padding:0;
   text-align:left;
   }
   #main {
   width:53.5%;
   float:left;
   padding-left:1.5%;
   padding-right:1%;
   border-left:1px dashed #ccc;
   border-right:1px dashed #ccc;
   }
   #sidebar {
   width:19.5%;
   float:right;
   margin-right:.5%;
   padding-left:.5%;
   }
5. Optional: There may be other styles based on the original Sidebar style that format elements within a column. In Doug Bowman's Minima template, for example, the #Sidebar style is specified with three contextual selectors (ul, li, and p). These control the formatting of bullets and paragraphs in the sidebars. If you want similar formatting for the other side of the screen, locate and clone these styles under the #SidebarLeft designation, as follows:
   
   #SidebarLeft ul {
   margin:0 0 1.5em;
   padding:0 0 1.5em;
   border-bottom:1px dashed #ccc;
   list-style:none;
   }
   #SidebarLeft li {
   margin:0;
   padding:0 0 .25em 15px;
   text-indent:-15px;
   line-height:1.5em;
   }
   #SidebarLeft p {
   color:#666;
   line-height:1.5em;
   }
   
6. Save your template changes and preview your blog. If you're satisfied, re-publish and share your handiwork with the world!

I have provided the complete template here, in case you have problems making the changes described above. Just open the link, view the source code, and save to your desktop or copy and paste into your Blogger template, after deleting the existing code. (Warning: doing this will undo any customization you have done, so you may want to backup first.)

Hope this works for you. If you find these solutions helpful, please consider linking to Random Bytes and sign up for our feed to be sure to receive new articles promptly.

Form Fields Can Really Mess With Your Layout

I was at a friend's house the other day, and got an unpleasant shock when I checked this blog on her computer (XP, running Firefox at 1024 x 768 resolution).

One of the challenges of CSS-based design is the problem of floats jumping around when screen fonts are resized. (You can see it happen for yourself on a lot of blogs and web sites — just press the Control key and scroll the mouse wheel toward you. You may see parts of the screen jump around, especially as the type gets larger.)

I had worked hard to eliminate the problem on this blog, testing the three-column layout on a variety of browsers and at various screen resolutions. (It usually occurs when your floated DIVs and their margins, padding, borders, etc. add up to more than the width of the containing DIV.)

Everything seemed to be working fine on my computer, so I was truly perplexed to once again see a missing right-hand column on her machine, configured identically. It had popped down below the middle column, well off the bottom of the screen. (Tip: if you find this happening on other blogs, try scrolling down to locate the missing content.)

Then it dawned on me: one of the most recent changes I made here was the addition of the FeedBlitz subscription form at the top right of the screen. I hadn't even looked at the code I pasted into my template. The input field had a default size of "26" — too wide for the column. Sure enough, reducing it to "20" solved the problem.

So, another lesson learned: remember to re-test at various screen resolutions and in different browsers whenever you make code changes that could affect site layout. Never assume that — just because you have already thoroughly tested a design — you can rest on your laurels!

Eric Myer's Digital Photo Sleight of Hand

Being a bit of a shutterbug myself, I love surfing photography sites. Here's one that I have been meaning to share with you for a while now.

Eric Myer — not the Eric Meyer of CSS fame — offers a playful little amusement called Stereotypes. Done with Javascript, this innovative game lets you produce composite portraits that result in some truly bizarre-looking individuals. You can even generate a slide show that will combine faces randomly. The strange thing is these digital chimeras look oddly real, like the sort of people you'd expect to encounter at a carnival or lolling about downtown Las Vegas.

Check out Myer's portfolio too. He seems to specialize in portraits, even in his corporate and advertising work. He likes to position his subjects in odd ways or against gaudy backgrounds. The result is captivating. A must-see for anyone interested in portrait work.

Restore Lost Google Ranking with Section Targeting

Have you noticed a change in your Google standing lately? WebLens was among many sites to suffer a nasty clobbering from the latest update of Google's ranking algorithm, code-named Jagger.

This important Google update coincided with a recent re-launch of WebLens, after much work on a new look and feel. I unknowingly published the revised site right around the time that Jagger made its debut. (It was also just before Christmas, which is never a good time to release anything important. What was I thinking!?!)

I watched with mounting bewilderment and dismay as my traffic plummeted and WebLens became virtually unfindable on any of its previously reliable keyword combinations. The site had never had top ranking, but WebLens had, for many years, consistently placed high on several important queries. Now, it was like I had slid right off the map — well, out of Google's universe anyway, despite good use of keywords and careful optimization.

After I calmed down and began to research the issue, I quickly learned about the Jagger update and its impact on the SEO world. A lot of well-established sites took a beating; many dropped steeply overnight. Some, like WebLens, slid into virtual oblivion, unfindable in screen after screen after screen of results.

I began to suspect that my problem was stemming from more than just Jagger. I knew Javascript was an SEO no-no; perhaps the Javascript-intensive nature of the new site was presenting bigger problems for Google than I had expected.

Around this time, I stumbled across an AdSense blog, which recommended Google section targeting as a way to improve ad relevance. This technique involves containing the parts of a page that you wish Google to crawl within a pair of special comment tags.

Would this help Google to bypass the problematic Javascript, I wondered. It took seconds to paste section targets into all my pages and re-submit the site. To my shock, I discovered that my lost ranking was not only restored, but improved, almost immediately. The relevance of the ads served by Google's AdSense program also improved.

Best of all, WebLens' rank in other search engines has also improved — most notably MSN — leaving me wondering whether Google's competitors may be taking these code snippets into account as well.

If you need to boost your Google ranking or Adsense ad relevance, give it a try. Here's how it works:

• Open the page you wish to optimize and locate the text you wish to emphasize
• Paste <!-- google_ad_section_start --> before the words or passage
• Paste <!-- google_ad_section_end --> after the passage
• Save the page and re-submit to Google

You can repeat these paired comments as many times as you need to within the document. Just make sure that every opening comment is closed. If you have a lot of pages to do, use your editor's Find and Replace command to speed things up. (Back up first, just in case. I have wept more than once after a careless F&R.)

One caution: Google does warn that you need to include a significant amount of content within the section targeting tags (insufficient content may result in less relevant ads), and that it is against Adsense program policies to use section targeting to emphasize words that are not relevant to the content of your pages.

Bloggies Voting Closes Soon

Bloggies voting closes at 10:00 PM on Tuesday, January 31st. If you're not familiar with the Bloggies, cruise on over to the 2006 Bloggies Awards site and check it out.

Surfing the Bloggies site is not only a great way to explore some of the Web's top blogs but a guaranteed time gobbler. Cast a vote for your favourites from among dozens of entries. Nominated blogs fall into 30 categories. There are categories covering specific geographic regions like Canada, Asia, Europe, or the U.S. Others are devoted to best podcasts, best photoblogs, or to themes such as best entertainment blog, best political blog, or best tech blog. There are also categories for best humour, best writing, best design, and more.

Some truly wonderful blogs have been nominated. Check it out, if you haven't already.

Blogger Template Hacks: Putting a Logo in Your Header

In an earlier post, I described some of the work I have done to date to customize the default Blogger template for a less off-the-shelf look and feel.

After adding a background graphic, categories, and a post auto-link, I set out to enhance the header. I wanted to make use of this prime screen real estate to promote my feed. This proved easy to do.

It's equally easy to include a logo or other graphic in the header, though how you proceed will depend on whether you retain or replace the existing title text.

Retaining the Title Text
If you wish to keep the existing title text, including a graphic in your header is easy. The key here is that you can put HTML, including the <IMG> tag, in Blogger's Title and Description fields. To add a graphic to existing text:

• Open the Settings > Basic tab
• Click in the Title field, to the left of your title text
• Type the <IMG> tag, pointing to the location of the image you wish to use, as in
  <IMG SRC="[your domain and filename]">
• Save your changes and preview your blog

You're done!

Replacing the Title Text
Things get trickier if you want to replace the contents of the Title field with graphically stylized text. Sure, you can paste an <IMG> tag into the field, but if you eliminate the title text, your blog name won’t show up anywhere.

A better approach is to use the CSS Fahrner Image Replacement (FIR) technique, an elegant solution that’s at the heart of CSS-intensive sites like ZenGarden. In a nutshell, the FIR technique uses stylesheets to replace text with an image, essentially hiding the text from standards-compliant browsers.

This is accomplished by creating a style that sets the text to display: none. Then another style displays a background image instead of the hidden text. You use CSS to control the positioning of the replacement image.

This approach introduces accessibility barriers because display: none renders any element with this declaration invisible to certain screen readers (and possibly to search engines as well). Many people are working on FIR variants that address this problem. In the meantime, I decided to try a compromise solution. Feel free to change the settings below to work for you:

• Open your blog template
  
• Place an empty <SPAN></SPAN> container in the Header area, after <$BlogTitle$>. You will use this to hook a style onto in a moment.
  
• Scroll up to the style declaration part of your template, and modify the #blog-title style. (Instead of display:none; I used the attributes below. Setting the font-size to 2% makes the title all but invisible, but keeps it there for search engines and screen readers. At least that’s my theory — I have no way to test this.)
  #blog-title {
  font-size:2%;
  line-height:1.2em;
  font-weight:normal;
  color:#ffffff;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.2em;
  }
  
• Create a new style called #blog-title span, as per the example below. You will need to experiment a bit, but basically this code centers a graphic over the hidden text. The background:url argument specifies the image to use.
  #blog-title span {
  display:block;
  top:0;
  width:334px;
  margin-top:10px;
  margin-right:auto !important;
  margin-left:auto !important;
  z-index:1 !important;
  height:60px;
  background:url("[your domain and filename]") no-repeat;
  cursor:hand;
  }
  
• Save your template changes and preview your blog.

Hope this works for you. For more on Farner Image Replacement, see:

MezzoBlue: Revised Image Replacement
Seamus Leahy: No Span
Well-Styled.com Tutorial (the method I used)
A List Apart: Facts & Opinions About Fahrner
Dave Shea: In Defense of Fahrner
StopDesign Tutorial

If you find these solutions helpful, sign up for our feed to be sure to receive new articles promptly.

More Flickr Magic from KrazyDad

After finding the cool Spell with Flickr entertainment that I blogged about yesterday, I went digging for other things you can do with this popular tool besides simply posting photographs.

Happily, I stumbled across KrazyDad, a compendium of delightful and innovative entertainments brought to you by Jim Bumgardner, author of Flickr Hacks and programmer par excellence.

Jim has devised a number of must-see games, puzzles, and other diversions that you can interact with. Topping the list, for me, are his amazing Flickr innovations, which have to be seen to be believed. Check out Phyllotaxy, and then give Flickr Color Pickr a spin.

KrazyDad also offers a selection of exquisite kaleidoscopic screensavers and the Metascope screensaver maker. This utility scans the web for images on themes you specify and creates a kaleidoscopic screensaver from them. I haven't tried this tool yet, but it's certainly on my growing to-do list, especially as it gets a big thumbs-up from Tara Calishain, author of Google Hacks.

Jim's Springy Thingies is also fun, as is his Spyrographer. Check it out.

Personalize Your Site with a Flickr Photo Title!

I don't have a category for "web silliness" but I probably should, because I seem to stumble across web diversions that range from amusing to downright silly with surprising regularity. I actually have a burgeoning folder of silly sites. The most recent addition merits a mention here, in recognition of its entertainment potential, if not its outright innovation.

Actually, you may find an application in your blog or web site for Erik Kastner's Spell With Flickr, a sweet little script that spells out whatever word or phrase you specify in randomly-generated Flickr alphabetic photographs. (Flickr is, of course, the blogosphere's most popular photo-sharing site.)

Click your browser's Refresh button and your letters will continually update. Kastner even provides the source code, should you want to integrate this utility into your site.

Amazing the things people do with their spare time.

Portrait of an Era Compelling Tribute to the Sixties

I saw the Linda McCartney Portrait of an Era photography exhibit yesterday, and was assailed by mixed emotions: stirred by vivid recollections of coming of age in the 60s; struck by the strength and power, intimacy and vulnerability MCartney captured on film; and saddened by the lengthening passage of time, not to mention growing awareness of my own mortality.

It was a shock to learn that baby Mary, one of the offspring of the union between Paul and Linda, is now almost 40. The photo of her as an infant nestled, sleeping, in her father's lap could have been taken yesterday. That's the "mirror shock" we boomers are increasingly said to be experiencing, and I underwent a healthy dose of it yesterday.

How much of this was because McCartney was a brilliant photographer, and how much was due to an uncomfortable confrontation with the very icons of my youth, I can't say. Opinions about McCartney vary, and not all are kind. To some, she was a gifted artist who captured the very essence of 60s rock and created a lasting visual record of the greatest musicians of our age.

Others dismiss her as "just a groupie" who was in the right place at the right time, lucky enough to meet some legendary performers and capture history in the making. Anyone could have taken those photos, these people will tell you.

I don't agree. The job of photography is not only to chronicle events and eras, but to challenge viewers to stop, think, and feel. McCartney's photographs create a unique sense of time and place and stir a bittersweet nostalgia. These are images so familiar they form a part of our collective psyche. John. Paul. George. Ringo. The Cream. Jim Morrison. Janis belting out a song. Jimi caught mid-guitar flail, arm extended dramatically, as if pointing to the watch tower. David Crosby dreamy and stoned. Grace Slick, tough as nails, bottle of bourbon nearby.

Most are dead now. Viewing McCartney's pictures, I was struck by an overwhelming sense of poignancy, of sadness at all the talent wasted, all the songs that would never be. That was the era of Haight-Ashbury. Of hippies and flower power and psychedelic posters. Of sex and drugs and rock and roll. McCartney sailed through it all, intact, until breast cancer felled her in 1998. Her legacy lives on in these wonderful images.

The exhibit is on at the Royal BC Museum until January 31st. Don't miss it.

Site Crashes Can Be Caused by Third Party Utilities

Man! I feel like I just slid back down to the beginning of the blogging learning curve. The polls are back (at the bottom of the left-hand sidebar, if you want to experiment with them). These little utilities were not causing the hanging problems experienced with this site today. I was too quick to blame and did not investigate carefully enough.

When my blog began hanging and refusing to publish today, I wrongly assumed it was because of the polls. I had included that code in the Blogger template recently, but I also created a blogroll (auto-updating list of favourite sites, for those newer to this than I) around the same time.

My blogroll is hosted at BlogRolling.com. It was a snap to create and install in the Blogger template and — until today — it was working like a charm. I was delighted with the ease with which I could not only create a blogroll but also add new sites on the fly, with a click of the mouse. Infinitely better than hand-coding a bunch of links.

Now, I'm having second thoughts. The BlogRolling.com site is down today and that unhappy circumstance brought my site down too. I'm not just talking about a delay in the site loading, but a crash that produced all kinds of nasty error messages and prevented me publishing at all.

The fix, once I figured out what was happening, was simple enough: First, back up your template. Then, instead of assuming the cause and rushing to delete the suspected offending code, as I did, comment out blocks of code and re-test until you have identified the culprit. As soon as I commented out the BlogRolling script and tried re-publishing, Blogger stopped hanging and behaved itself.

Watch Embedded Tools for Unwanted Behavior

I wrote yesterday about three free online poll creation tools you can use to add interactivity to your blog. I had created and posted sample polls using all three tools in the left-hand sidebar of this blog, so you could experiment and compare results.

I have since taken down the samples because one of them was causing huge delays in downloading. I have no idea which of the three was the culprit, but it was really messing with download speed and overall site performance. Strange, because it wasn't happening yesterday. Maybe three is just overkill.

Another issue I was unaware of yesterday: One of these tools (BraveNet) scatters pop-ups all over the screen. I didn't realize this when I posted yesterday since I usually work with pop-ups blocked.

Lesson learned: it's always a good idea to test any tools you embed in a web site, with pop-ups enabled, to make sure they aren't spewing unwanted garbage all over the screens of your visitors! This will, unfortunately, reflect poorly not on the source of the pop-ups but on you.

So, to anyone I've annoyed with obnoxious advertising , my apologies :-)

Add Interactivity with Online Polls

In poking around Darren Rowse's list of tips for promoting your blog, I came across a post talking about ways to add interactivity. Among the tools and resources Darren has rounded up are links to a couple of online polling tools.

Curious, I tried out both of the tools Darren describes. Both services generate a small piece of Javascript that you paste into your template. Both are highly customizable; both collect data in real-time; both present results graphically; and both allow you to prevent multiple votes.

Personally, I really like the service offered by BlogPoll. The code is generated on the fly and is easy to customize, with a nice onscreen preview feature. About the only downside, for me, is the rather unpleasant advertising in the results screen. I guess that's the price of free.

The service offered by BraveNet is more comprehensive and considerably more difficult to set up and customize. On the plus side, it allows you to create and store multiple polls and even to set up timed rotations among them. The user interface is not as intuitive as BlogPoll's, but they don't bombard you with tacky advertisements.

There are many other companies offering online polling utilities. One worth a look is WebSurveyor. It too is free and easy to customize, and it also offers the ability to store and rotate multiple polls.

Sample polls created using these three tools are displayed (temporarily) in the sidebar to the left for comparison purposes. Feel free to try them out; click View Results to see how each formats and presents responses.

Nikon Goes 100% Digital

Here's a telling portent for the future. Venerable camera manufacturer Nikon announced today that it will stop producing film cameras and focus solely on the digital market. That's a decision with some pretty profound implications.I don't use Nikon, but I have an ancient Canon FTb kicking around. Looks like these wonderful old cameras are rapidly becoming antiques! Soon, you'll have no place to take your film to be developed. Hell, soon you won't be able to buy film! Indeed, most professional photographers I know have long since made the switch to digital. I know only one person who is still using a film camera, and he happily admits to being a luddite.The new digital SLRs make it hard to refute the argument that the old mechanical cameras produced better images. Have a look at the output from the Canon EOS, which captures an astounding 12 megapixels of gorgeous image detail. I'm drooling over this camera, though I must confess I'd have a hard time parting with my FTb. That old friend captured many happy times, as my Canon G6 is doing today.

Blogger Template Hacks: Use Your Header to Promote Your Feed

As you can see if you have stopped by before, I have been busy over the weekend, experimenting with further changes to the Blogger template. The default two columns have now morphed into a three-column layout. I'll be writing about that later.

First, though, a quick note about customizing Blogger's header. The template I chose (Minima) had an attractive but barebones text header, in keeping with the minimalist overall look and feel implied by this template's name.

I wanted to put a logo graphic in the header and make use of the prime top-of-screen real estate to promote my feed. The latter proved easy to do. Including a graphic is a little trickier, and requires using a CSS workaround with some accessibility implications. We'll save that for the next post on this theme.

First, the easy part. To put text and/or a link in the header:

• Open the Settings > Basic tab
• Click in the Description field and add the new text, including any HTML. Include a link to your feed, if desired.
• Here's the trick: if you wish to format the new text differently, as I have, surround it with a tag that you can hook some CSS on, such as STRONG or EM.
• Save your changes and switch to the Template tab.
• Locate the #Description style and make room below it.
• Clone the style and add a contextual selector (i.e. STRONG) that defines the formatting you wish to apply to the added material. Here's what I used:

#description strong {

display:block;
font-weight:bolder;
text-align:center;
padding-top:15px;
color:#ed7321;

}

Hope you found this tip helpful. I'm hoping to post later today on the second part of this process: embedding a graphic in your blog header. If you're enjoying these posts and want to make sure you don't inadvertently miss anything, subscribe to my feed and get new material automatically.

Supercharging Blogger Categories

Whew! More to say on Blogger categories. I have been immersed all day in further refining Daniel Chong Jyh Tar's amazing Blogger category fix, which I have implemented on this site and blogged about twice already.

Dan's workaround is based on Blogger's search feature, which itself derives from Google search syntax. In a previous post, I wrote about how to tweak your query before using Dan's code generator by employing a phrase search (enclose term in double quotation marks) or by brainstorming a list of words separated by Google's OR operator ( I ). This worked, but I still wasn't happy with the results. I have been experimenting further, and have discovered a couple of important things:

• Because it's the Google search (or some variation thereof), you can use the exclusion operator (-). This is great, because you can tell Blogger to pull up all the pages containing one of a set of words, but NOT another word. Just add the word you wish to exclude at the end of the query code in the Blogger template before the final quotation mark. Precede the word with a minus sign. You can exclude multiple words. Just place a minus sign before each, like so: -hack -hacks. This is a great workaround, and I used it to prevent the Blogger template hacks from appearing in the Tools and Resources category. Take a look at the code here.


• The only hitch I found is that Blogger seems to have some sort of word limit, and you may have to remove a couple of words from your list of ORs. This is strange because Google extended its notorious 10-word limit t0 32 words a long time ago. Doesn't seem to work in Blogger though. If you have trouble getting your exclusion to work, try eliminating a couple of the words in your list of ORs.


• I also got strange results combining a phrase with a set of ORs and an exclusion, as in this example: "web design" I HTML I CSS -hack -hacks. Blogger produced completely erroneous results, though this works typed directly in the search field rather than the template. This needs further tweaking, and the Blogger people could certainly improve the query language.


• In the process of re-working my categories yet again, I began to realize how much careful thought you must put into word choice as you write, since the words you use become the keywords Blogger search will use to achieve logical, intuitive topic clustering. Search engines are very literal: if you have used the word tool in talking about, say, a light meter for a camera (using this site as an example), that posting will show up under both Photography I Photoshop and Tools I Resources. That might be OK, but it might also make your topic clustering less intuitive to readers.

Hope you found this post helpful. Stay tuned for more. Even better, subscribe to my feed and get more on this topic automatically.

Blogger Template Hacks: Auto Embed Links

A couple of days ago, I wrote about some of the changes I have been making to the Blogger template. One of these took minor effort but has already produced big results.

The Blogger default template is designed to generate basic information for each item you post: title, the post itself, date, permalink, and various other footer-type fields. Blogger lets you insert images and format text easily enough, but that's about it.

One of my goals for this blog is to support WebLens and to introduce people to the resources there, and I was quickly getting tired of hand-coding links. Fortunately, it's easy to embed a link in the template that gets inserted automatically into each new post. You see the result at the top of this post, and the WebLens stats are already confirming that it's working.

Your auto-content could be anything: a link, a photo, a small piece of text. I used a web badge in this case, made with Luca Zappa's Brilliant Button Maker.

The key is to put the code in the right place in the template. For it to appear below the date, place your code after the <⁄BlogDateHeader> tag.

This little tweak creates all kinds of possibilities, especially for anyone concerned with blog traffic or site promotion. Hope you find this helpful. Stay tuned for another template hack later today. Even better, subscribe to my feed and get it automatically.