Spread the Word

Site Feed



Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Friday, April 28, 2006

Stalled Email Feed Needs Manual Restart

Here's a heads-up. I noticed a huge drop in my feed stats last night. Bigger than could be explained by a few people unsubscribing, which of course happens constantly. People check out a feed for a few days, then decide it's not for them. I've seen those little daily quivers in my stats. This time, though, the number of subscribers plunged dramatically. On checking further, I noticed that FeedBlitz, the email feed service that I use, was not in the list.

When I logged into FeedBlitz to check, I learned that the feed was stalled. At some point in the last few days, the feed must have been down when FeedBlitz attempted to access it. What's worse — and here's what's important to know — you have to restart it manually from the FeedBlitz dashboard. It won't restart by itself!

To reset it, click on manage your subscriptions. The feed name will appear beside a group of icons. A stalled feed will have a red icon beside it, rather than the usual green. You need to turn it green again, which you can do by clicking on the green check mark.

This little burp has got me wondering if the same thing can happen with the dozens of feed readers and aggregators that people are using to access this blog.

I guess, in the grand scheme of things, it's not a big deal, but it's a pain.

Thursday, April 27, 2006

Keotag: Metasearch for Social Bookmarking Sites

Every once in a while, an idea so original — so brilliant in its simplicity — breaks out of the pack of Digg and del.icio.us clones debuting daily online that you're left wondering how come nobody thought of that before? Keotag is just such a site, offering a unique but obvious twist that may become to social bookmarking sites what Technorati has been to the blogosphere.

(In case you've been living in a cave the last few years, social bookmarking is a Web 2.0 phenomenon. Sites like Digg, del.icio.us, Furl, Raw Sugar, Shadows, Ma.gnolia, and too many more to name here, allow people to create "social networks," whereby they can save, share, tag, rate, and comment on each other's web favourites.)

So, how do you extract value from these sites? I, for one, have no time to spend searching, browsing, or monitoring them all. Enter Keotag. Essentially a social bookmarking metasearcher, this nifty little tool allows you to simultaneously query over a dozen of the top social bookmarking sites on any tag or keyword, finding sites recommended by people rather than produced by search engine algorithms or seo manipulations.

Keotag also offers links and tag generators for several of the more popular social bookmarking sites.

Want more of these sites? These two lists will keep you going for a while:

If you found this post useful, sign up for our feed for more on this topic. And if you're enjoying Random Bytes, please support us with a link from your blogroll.

Monday, April 24, 2006

Cookie Joins the Blogosphere

You know blogging's hit the big leagues when cartoon characters embrace the trend. The latest funny pages character to jump on the bandwagon is perennial teen, Cookie — of Blondie fame — seen today blogging in comic strips everywhere. Cookie isn't the first; she follows in the footsteps of Between Friends and Doonesbury, both of which have poked light-hearted fun at blogging ethics (or lack thereof).

I'm sure these intrepid bloggers aren't the only ones. Do you know of cartoon bloggers I have missed? Drop a comment here and let me know.

Friday, April 21, 2006

Dont Click It: Interface Breakthrough or Usability Nightmare?

I stumbled across an interesting experiment in user interface design a couple of days ago that may make you re-evaluate your relationship with your mouse. How hooked are you on clicking that button? Can you explore a web site without using your index finger? How easily can you navigate when deprived of a mouse click and a keyboard? How will you feel about the experience? Should you even care?

We are so accustomed to the point and click approach to navigation that clicking on something that interests us is second nature, almost instinctive. Or so believes the Institute for Interactive Research. They built an experimental Flash-driven site to learn more about how people interact with content, and whether there's a better way.

DontClickIt is a content-rich site that will challenge you to experience it fully. It provides background information about the rationale for the project and several user interface experiments you can participate in. It even lets you spy on others who have visited the site.

This is a site you will either love or hate. I imagine many people click away after only a few seconds. If you can stick it out and get the hang of it, there's some very interesting content there. So, what's your take? Visit DontClickIt and drop a comment back here. Web breakthrough or usability nightmare?

Tuesday, April 18, 2006

Two Techniques for CSS Transparency

One of the trickiest things to control, in a CSS-driven design, is the transparency of the interaction between foreground and background content. Browser inconsistency — most notably IE's stubborn refusal to comply with standards — only adds to the challenge. I was struggling with this until I ran across Stu Nicholls' CSS Play web site. This site abounds with powerhouse CSS demos, including some great cascading menu effects and the best examples I have seen of the differing transparency approaches possible with CSS.

Background

(For the non-techies in the crowd, the term transparency — also called opacity — refers to how much of the background is visible through the foreground on a web page. Until the emergence of CSS, web designers had limited control over transparency. We could use transparent GIF images, which offer all or nothing in terms of transparency (i.e. the background is either 100% transparent or 100% opaque), or we could resort to the PNG graphic format, which offers true alpha transparency but limited browser support. (For details, and for some useful IE PNG hacks, see A List Apart's posting about the PNG format). The only other solution has been a kludgy workaround involving placing a lightened duplicate of the background image in the foreground. Nicholls illustrates this approach as "method 3" on his page of opacity demos.

Clever CSS3 Transparency Hack to the Rescue

One of the solutions that Nicholls demonstrates ("method 1') utilizes a clever cross-browser code hack that marries IE and Mozilla proprietary code with an opacity property that is part of the CSS3 working draft. It is an elegant solution that affords complete control over degree of transparency. This technique essentially involves creating and styling two DIVs — one to contain the background and a second to hold the foreground text (if they were in the same DIV, the foreground text would be transparent too). The HTML looks something like this:
<div id="sidebarLeft"> </div> <div id="leftwords">
<H3>Left Column</H3>
...
</div>

Note that the "sidebarLeft" DIV is empty. Its sole job is to provide a hook to hang a style on, in this case one called "sidebarLeft." This style is formatted as per normal, in terms of padding, margins, width, height, etc. but, then — and here's where the magic happens — for a transparent effect, the CSS snippet below is added.

#sidebarLeft{filter: alpha(opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
-moz-opacity: 0.75; opacity:0.75;
}

Another style (#leftwords) formats the text block placed against the background. To illustrate how this hack works, I have prepared a new version of the three-column template discussed here earlier with this opacity effect for the left sidebar. Feel free to download the template, called White True Opacity, and experiment with level of transparency. To do so, open the template and change the values highlighted in orange above to any number between 1 and 100. Change the values highlighted in blue to a number between 0 and 1. Lower numbers will make the item more transparent; higher numbers, less so. Save and reload the page.

Shown as "method 1" on Nicholls' site, this transparency effect is cool, but be aware that it uses techniques that are not standards compliant and which lack wide browser support.

Low-Tech Transparency for the Rest of Us

Fortunately, there is another technique that designers have long resorted to, and which doesn't break any browsers. It's a low-tech workaround that's quick and easy to implement. It, too, is a "hack" — using a PhotoShop trick to create a 50x50 tile that fakes the appearance of transparency. Firda Beka shows how it works here, and offers a nice selection of ready-made 50x50 background tiles you can grab and save. To use these in a stylesheet, just add this declaration to the style for the element you wish to format:

background:url(filename.gif);

where filename.gif is the 50x50 semi-transparent GIF you just made or downloaded. Save your work and re-load the page. Try it with several of Firda's 50x50 sample tiles. Whether the resulting effect is gorgeous or hideous will depend largely upon other foreground and background colours in your design. You can experiment with this technique using this template, called White Fake Opacity, if you like. Just replace the GIF that I used with a colour of your choosing.

Please feel free to use either or both of the designs I have posted here. To put your own stamp on them, just save them to your desktop, open, and modify the styles as needed, and substitute your copy for the placeholders. If you're hand-editing the code, be careful not to delete any of the DIVs, or you'll break the layout. And if you're finding these posts useful, please support Random Bytes with a link from your blogroll.

Monday, April 17, 2006

Logo-Surf Web 2.0 Sites with BuzzShout

A couple of days ago, I posted about an interesting Web 2.0 social bookmarking service. With Web 2.0 constituting the latest Internet craze, many people are keen to track emerging players in these hot new technologies. While there are lots of Web 2.0 lists out there, the newest site to join the fray offers an entertaining twist.

BuzzShout is a new directory that provides user-rated and reviewed listings of Web 2.0 sites. You can browse the list by tag cloud, alphabetically, or by user rating. Alternatively, check out BuzzShout's LogoSurf page. It offers an entertaining way to explore the web's newest leading-edge applications, while retaining the ability to focus your interest by clicking on a tag cloud.

If you're into Web 2.0, this site is one to keep an eye on.

Saturday, April 15, 2006

ESPN and Orbitz Team to Offer Sports Travel

Now there's a marriage made in heaven. ESPN and major travel booking site Orbitz have teamed to provide ESPN Sports Travel, a travel booking site catering to sports fans. Whether it's hockey, soccer, basketball, or golf, sports buffs can look up schedules and book trips without leaving the ESPN site.

In addition to sports news, schedules, and statistics, the new site offers a sports trip planner, with upcoming dates for all kinds of sports events. To help in researching your planned destination, ESPN has published 16 city guides, with plans in the works for another 34. The guides cover off local stadiums, arenas, golf courses, local sporting events, and more.

The site can be found at ESPN Sports Travel. For hundreds of other city guides and travel planning resources, see WebLens travel tools.

Friday, April 14, 2006

Stumbling Onto Web Treasure

Wow. Am I tired. I stumbled onto StumbleUpon last night, staggering bleary-eyed into bed at 2:00 a.m. Even then, I could barely tear myself away from the computer (not a good sign). Actually, I've been aware of this site for a while as I have noticed traffic originating there in my stats. Last night, I decided to take the time to explore it. My surfing habits will never be the same again, thanks to this Web 2.0 service.

Like Digg, del.icio.us, and many others, StumbleUpon is a social bookmarking tool that allows users to tag and rate recommended sites and build community around themes. It offers a huge selection of categories, which you can explore from a toolbar. The system learns your preferences quickly, and you are presented with a limitless selection of quality sites on any subject that interests you.

Unlike typical traffic exchanges, there's no timer, no advertising or spam sites, and no junk. The stumbled upon sites are fun and innovative, with good spam control and no annoying pop-ups. I made the mistake of exploring the photography category, and spent several hours stumbling through some exquisite eye candy. Here are just two of the many gems I discovered:

Stay tuned for more great photographic finds and other social bookmarking tools. And if you enjoyed this post, sign up for our feed for more on this topic.

Wednesday, April 12, 2006

At-a-glance Global Page Rank Info!

Anyone struggling to optimize site content for better search engine positioning will sooner or later have reason to obsess over Google's secretive Page Rank formula, the numerical weighting the search giant assigns pages in order to sequence results. I have long wished there was an easier way to determine page rank than viewing each WebLens page, one at a time, in the Google toolbar. Now there is.

As reported yesterday in SearchEngineWatch, WebMasterEyes is a handy little utility that overlays Google page rank icons on every link in any page viewed onscreen. The result is literally an at-a-glance overview of the page ranks of all pages linked from anywhere. Try it yourself. This one's a keeper!

The only down side is the rather slow response time. But when you think about the job this little tool is doing, it's not an unreasonable wait.

Addendum: Some people claim a page rank of 5 or better is key to getting high placement. But, as SearchEngineWatch observes, "Google PageRank is not the final say in ranking well in Google. Google claims it is used for determining crawl frequency and other ranking aspects. But many SEO professionals have uninstalled the Google toolbar, to make a statement about PageRank's worth."
Found this information helpful? Sign up for our feed so you won't miss future postings.

Friday, April 07, 2006

Have You Backed Up Your Blog?

I've been having too many heart-pounding moments lately, courtesy of Blogger, which lost yesterday's post twice. This happened first in the middle of saving, and then — after painstakingly rebuilding the whole thing — Blogger trashed it again upon attempting to publish. On investigation, I learned that I'm not alone in my frustration; Blogger routinely not only loses/fries posts, but has been known to wipe out entire blogs, according to this post. Fortunately, my research led to several ways to back up, not just Blogger blogs, but those of Wordpress, Typepad, and Moveable Type as well:

  • Use an offline browser utility to copy the entire blog to your local hard drive. Several such programs exist. HTTrack is recommended by many bloggers for the Windows platform; WebGrabber for Mac users. I downloaded HTTrack and this little freeware program worked like a hot damn. It was quick to install and easy to use. Just follow the onscreen prompts and it will make a complete copy of your blog on your local hard drive. It took about ten minutes to back up my blog, which I can now surf offline if I want. Everything's there — formatting, all the posts, the archives, comments, internal and outbound links, even web badges are where they should be. This little utility is worth its weight in gold.
  • Use Blogger itself. There's no obvious and easy way to backup from the Dashboard but, buried in Blogger's help menu is this knowledgebase article, bearing somewhat complicated (and, in my opinion, risky) instructions for re-writing your template to publish all your posts to a single page, which you can then save to your local hard drive. This won't work if you've been blogging for a while, and your number of posts exceeds the limit Blogger places on the index page. (Agent BedHead offers a simplified version of these instructions which she will email to you, with versions available for all major blogging platforms.)
  • Email Posts to yourself. Digital Inspiration lists several ways to back up. Among them are instructions outlining how to configure Blogger's settings to automatically email posts to you. You can then set your mail rules to intercept and filter these into a folder.
  • Get the WayBack Machine to crawl your blog. It's as simple as going to their site and submitting your blog address. They are a little vague, though, about the availability of stored pages should you need to restore your blog down the road.

Note: In the course of rummaging around for blog backup solutions, I also stumbled across w.Bloggar, a freeware tool for composing blog posts offline. This would have prevented the problems I had yesterday with Blogger losing posts upon saving and/or posting. I have tried composing in WordPad and pasting into Blogger's editing window, but that's not an entirely satisfactory solution. I have downloaded w.Bloggar to experiment with, and I'll let you know how it works out. In the meantime, Digital Inspiration has nothing but good things to say about w.Bloggar.

Thursday, April 06, 2006

Promote Your Feed With an Autodiscovery Link

I learned recently that I wasn't taking full advantage of the power of this blog's RSS feed. Yes, I've burned a feed and scattered links to it throughout this blog, even in the header. But I wasn't taking advantage of a powerful feature in this blog's template: using the autodiscovery link to point to my RSS feed location. Inserted into your blog by the <$BlogMetaData$> tag, this bit of code tells news readers and web browsers the location of your feed address. By default, it points to Blogger's original Atom feed. This could result in people unwittingly signing up on the old feed and your feed stats being wildly inaccurate.

Since RSS is more popular than Atom, you may want to ensure that autodiscover points there. If you're a FeedBurner user, there's no need to worry about abandoning Atom users, since FeedBurner's SmartFeed service automatically translates your feed into a format compatible with any feed reader. Just be sure this feature is enabled in your FeedBurner Optimize options.

Tweaking the Autodiscover Tag

To make autodiscover point to your RSS feed, you need to modify the Blogger template. Here's how, courtesy of a post in the FeedBurner forums:

  1. Load your blog onscreen and view its source code (click View Source from your browser menu).
  2. In the header area at the top of the file, locate a block of code that looks similar to this:







  3. Copy the entire block of code (there could also be a couple of <style> and/or <script> tags following this that you may also want to include).
  4. Close the View Source window and open your blog template.
  5. Back up your template before proceeding further (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 a text editor, press Control+V to paste the document, and Save).
  6. Locate the <$BlogMetaData$> tag near the top of the template and delete it.
  7. Replace it with the block of code you copied in step 3.
  8. Look for a line similar to the following in the code you just pasted:
    <link rel="alternate" type="application/atom+xml" title="Your Blog" href="http://yourblog.blogspot.com/atom.xml" />
  9. Change the URL in orange above to the address of your FeedBurner feed, as in:
    <link rel="alternate" type="application/atom+xml" title="Your Blog" href="http://feeds.feedburner.com/YOURFEEDNAME" />
  10. Save your changes and re-publish your blog.

    Note: to see the changes in View Source, you may first have to clear your browser's cache.

According to FeedBurner, this technique works whether your blog is hosted by Blogger or on your own server. For more information, please see:

I hope you found this tip useful. If you enjoy these posts, please support Random Bytes with a link from your blogroll. Sign up for our feed to ensure you don't miss future postings.