Step 1. Move bookmarks to delicious.com

About 2 years ago I moved all my bookmarks to delicious.com, a ’social bookmarking’ service which stores your bookmarks and enables you to access, share and organize (via tagging) these bookmarks over the web. Over time it’s become second nature to save anything interesting I find to my delicious account.

Step 2. Install delicious.com browser extension

Whilst delicious (and its ilk) can be used via the web interface, things really get interesting when you install the relevant browser extensions. These give you an experience much like regular browser-based bookmarking, but with synchronization and superior bookmark search.

• Official Delicious Bookmarks extension for firefox (any OS). Best.
• Official Delicious Bookmarks Add-on for Internet Explorer (windows)
• Unofficial DeliciousSafari plugin for Safari (mac)
• Unofficial Bookmarks app for iPhone

Step 3. Specify “everyday” bookmarks

We all have bookmarks we use everyday. Delicious allows me to group mine together by applying a common tag (I use the tag “me”). I then tell the Delicious Bookmarks extension for firefox that the “me” tag denotes my favourites and viola! All my everyday bookmarks appear in Firefox’s toolbar. Better still, any additions or edits I make to this list of favourite bookmarks are propagated across all my browsers and computers.

Step 4. Bring on the favicons!

Although the Delicious extension for Firefox is great, it pays too much head to Firefox conventions for my liking. Specifically it doesn’t display favicons on mac (firefox doesn’t do toolbar favicons on mac by default) and doesn’t offer the ability to hide toolbar labels (which take up space). Luckily Firefox is highly customizable so I’ve managed to put together a simple Firefox extension which overrides these design decisions (and fix an intermittent “huge favicon” issue on mac Firefox). Behold: my Delicious Bookmarks Toolbar extension.

By the way, if you thought this blog post was written simply as an excuse to link to that simple extension, you’d be right.

This spherical panorama captures the complete scene; from the zenith (above my head) to the complete horizon to the the nadir (under my feet). No photographic paraphernalia (camera, tripod, photographer) distracts the viewer from the scene. What kind of magical camera does this? Well, with the right know-how, software and technique any camera will do. This is because spherical panoramas are simply an amalgamation of many regular photographs. Here’s the kit I used to make my example panorama.

Tripod fitted with a Nodal Ninja 5 panoramic tripod head supporting a Canon 5D mark II with Canon 16 - 35mm f2.8L lens

To get started we need a sequence of regular photographs which cover the entire scene. Typically this involves taking several ‘rows’ of images, each containing a constant number of images (columns). The number of rows and columns required depends on the lens used but nevertheless the angle between rows should be consistent, as should that between each column (made easy by using a panoramic tripod head, e.g. Nodal Ninja 5). In addition, a zenith shot (directly up) and two (complimentary) ‘nadir’ shots (directly down) are required. Here’s the sequence of images I used to produce my sample panorama.

zenithsky rowhorizon rowground rownadir (taking two at opposites enables later removal of feet & shadows)

The rest of the spherical panorama creation process is all in software. I plan to cover the details in a future screen-cast, but for now here’s a quick overview:

1. Ensure ‘consistent colour’ across shots by correcting white-balance discrepancies (tip: remember to lock white-balance, exposure, shutter-speed, focal length and focus while shooting). Also correct any vignetting (dark edges) and chromatic aberration (coloured fringing on detail). For these tasks I use Canon’s bundled DPP software (if Lightroom’s vignetting correction tools were better, I’d use it instead).
2. Import the corrected images into a stitching tool (after trying a few apps I finally ponied up for a copy of PTGui). By creating control-point pairs (i.e. locating similar features in different photographs) I give PTGui the necessary information to correctly align, warp, composite and blend the all images (except for the zenith and nadir) into a single ’stitched’ equirectilinear result.
3. In photoshop I work a little magic to combine the two original nadir shots (which both contain my legs and feet) into a single feet-free nadir image
4. Using PTGui again I produce another equirectilinear image, this time containing only the warped ground (from the composited nadir) and sky (from the zenith shot)
5. Back in photoshop I combine both equirectilinear images into a single image (’patching’) and apply any necessary retouching (e.g. making horizons dead-level and apply colour-corrections) to produce the pièce de résistance: the final (70+ megapixel) image.

patching the warped nadir and zenith onto the stitched panorama in photoshop

At first glance this appears to be a regular photo, but in fact it covers 360° horizontally and 180° vertically (i.e. the entire scene). So how does it justify the ’spherical’ and ‘edge-less’ tags? Well, the most effective way to present such an image is to wrap the rectangular image around an imaginary sphere and give the viewer control of a virtual camera placed at the orb’s centre. Rotating the camera simulates ‘looking’ in the original scene. There are no limits on where the camera may look and no visible edges or seams.

the distortion in the equirectilinear image disappears when the image is wrapped around a sphere (inside which the viewer’s virtual ‘camera’ rotates)

Spherical panoramas really take on a new dimension when combined with software like the PangeaVR iPhone app I’ve mentioned before. Wherever I am I can show friends exactly what my favourite places are like by handing them the phone and saying “drag the image with your finger”. No other explanation, instruction or intervention is required for me to show friends overseas what the beach I learned to surf at is “really like”. Of course, the panoramas can also be viewed in a web browser. Below are links to a few panoramas I’ve created in the past few months from images taken on my Christmas holiday back home.

Hopefully I’ll have more to add to my panoramas page soon.

<html>
<head>
<title>'Millenium' era</title>
<style type="text/css">
div.redSubHead {
  color: red;
}
p.greyText {
  color: #666;
}
td.columnHeaderCell {
  font-weight: bold;
}
td.oddRowCell {
  background: #eee;
}
td.evenRowCell {
  background: #ddd;
}
</style>
</head>
<body>

  <div class="redSub">sub 1</div>
  <p class="greyText">blah</p>
  <table>

    <tr>
      <td class="colHeader">A</td>
      <td class="colHeader">B</td>
    </tr>

    <tr>
      <td class="oddRow">1</td>
      <td class="oddRow">2</td>
    </tr>
    <tr>
      <td class="evenRow">3</td>
      <td class="evenRow">4</td>
    </tr>
  </table>

</body>
</html>

<html>
<head>
<title>'Semantic' era</title>
<style type="text/css">
.section h2 {
  color: red;
}
.section p {
  color: #666;
}
.section thead th {
  font-weight: bold;
}
.section td {
  background: #ddd;
}
.section tr.odd td  {
  background: #eee;
}
</style>
</head>
<body>
  <div class="section">
    <h2>sub 1</h2>
    <p>blah</p>
    <table>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
        </tr>
      </thead>
      <tr class="odd">
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
  </div>
</body>
</html>

One pillar of the ’semantic’ technique is the sparing application of class attributes, primarily to container elements. Elements are ‘caught’ using CSS ‘descendant’ selectors (multi-part) which target hierarchies rather than using simple class selectors which require a directly applied class attribute. Using descendant selectors respects the hierarchical nature of the DOM but makes writing bulk CSS quite tricky. Why? Mainly because CSS stylesheets (and style blocks) are fundamentally rule lists, but the DOM elements which our descendent selectors target are obviously trees. How do we bridge the gap between these fundamentally different structures?

Enter ‘ragged’ CSS

In 2006 I (then a contracting developer) found myself filling the shoes of a fantastic design contractor whose contract was up but sadly not extended (project managers eternally underfund and misunderstand UI). I was the new ‘CSS guy’ for a project with scores of developers, hundreds of pages and crippling compatibility/accessibility requirements. I wasn’t really qualified for the task, but my predecessor gave me a CSS tip that got me through: “don’t sweat the properties, focus on rule hierarchies”.

This rule-centric approach is most clearly evident in the CSS formatting style I picked up on that project and used ever since; a style I call ‘Ragged CSS‘.

.section h2 {
  color: red;
}
.section p {
  color: #666;
}
.section thead th {
  font-weight: bold;
}
.section td {
  background: #ddd;
}
.section tr.odd td  {
  background: #eee;
}

.section { }
  .section h2 { color: red; }
  .section p { color: #666; }
  .section table { }
    .section thead th { font-weight: bold; }
    .section td { background: #ddd; }
      .section tr.odd td { background: #eee; }

It differs from the common ‘tall’ CSS formatting style in only a few (primarily cosmetic) ways:

1. One line per rule, one rule per lineThere may be hundreds of rules, but each will only have a handful of properties.
2. Indent CSS rules to represent target element hierarchyA block of markup (e.g. a calendar) will typically involve several rules (perhaps dozens). Indenting rules more clearly indicates how their properties will cascade.

3. Make rules for ‘landmark’ elements (empty rules if necessary)Adding an empty rule for element’s whose classes are used in subsequent selectors makes indentation hierarchy far clearer (improves readability).
4. ‘namespace’ your rules to avoid conflictClass names may be repeated on large projects unintentionally. Target ‘abc’ class elements inside ‘xyz’ class elements using a ‘.xyz .abc’ selector rather than a global ‘.abc’ selector to avoid tainting someone else’s unrelated ‘abc’ class.
5. Avoid element prefixes sparingly in your selectorsDon’t use a 'span.content' selector where a plain '.content' selector will do. Dogmatic prefixing (i.e. increasing specificity unnecessarily) makes your rules unnecessarily vulnerable to otherwise inconsequential markup changes (changing the span to a div for instance).

I’ve been using this formatting style for a few years now and it’s made complex CSS development a snap (browser quirks aside). If you’re writing ‘tall’ CSS (or using a tool which generates it), give ragged CSS a go on your next project. Your future self (and/or your successor) will thank you for it!

Australia in Google Earth iPhone app

Anyway, the conversation inevitably turned to questions about ‘the outback’, the facet of Australian life which seems to intrigue other nationalities most. Questions typically follow the “Did you live in the outback?” “Have you been there?” “What is it?” “Pet kangaroo?” line (No, not sure, umm, dog person). My difficulty in answering ‘outback’ related questions is that, like most Aussies I know (other South-East Queensland types), I have no firm definition of ‘the outback’ to go on. I’ve camped in some arid and desolate spots (by European and American standards) in Australia (technically not ‘outback’ due to their proximity to the coast), but I’ve never been close to or ‘beyond the black stump‘, let alone into the ‘Never Never‘.

Living in a a disconcertingly rainy country has made me think about the Australia’s arid interior more and more. To keep my hands busy during a skype chat this morning, I fired up the Google Earth desktop client to check out Google’s satellite imagery resolution for the Australian interior. Not bad as it turns out, particularly in areas in the many stripes of 60cm DigitalGlobe imagery (red-tinged for some reason). Even in areas covered by the lower resolution CNES Spot satellite images, the novelty of being able to make out individual trees soon gives way to wonder at the strange patterns visible from space.

26°18′16.99″ S, 123°02′09.02″ E Lake Carnegie, an ‘ephemeral lake’ in WA (image scale: 10km across)	29°55′33.45″ S, 127°01′55.77″ E The endless Nullarbor plain of SA/WA (image scale: 112km across)
24°00′47.77″ S, 137°00′42.19″ E Fire-ravaged Simpson desert, NT (image scale: 38km across)	22°21′04.26″ S, 128°58′56.72″ E Massive Lake Mackay, Great Sandy Desert, WA/NT (image scale: 111km across, rotated)

Wind, water, sand, salt, erosion and fire have all shaped the interior with scant evidence of human existence. In particular, note that the Nullarbor shot above covers an area roughly 112km x 63km with no buildings, rivers, lakes or hills. Now that’s desolation!

Whilst assembling the above screen-grabs I noticed that Google Maps seems to use a different database of satellite imagery than Google Earth at zoom levels below 13. This leads to a slightly odd disconnect when viewing Uluru in google maps at zoom level 12 and then zooming once to view Uluru at zoom level 13.

Uluru in Google maps (zoom level 12)

Uluru in Google maps (zoom level 13)

Photo of Uluru (credit rplzzz, flickr)

True to form, the wordpress team had managed to release several point releases since my last post, making this the 3rd post in a row preceded by a wordpress upgrade. My goal is to have the next post up before WordPress 2.7 hits. I’m doomed.

At this point you really hope the rest of the upgrade guide is up to scratch

Everything went pretty smoothly (except for a last minute scramble to find a size 00 philips screwdriver). ExtremeTech’s Upgrade your macbook pro’s hard-drive came in very handy, with only a few deviations necessary to effect the switcheroo.

Here’s a quick list of the necessary bits and pieces I ended up using:

• Macbook Pro (Rev C, circa Jan ‘07)
• The upgrade guide loaded on the iPhone
• A new 2.5″ SATA drive (Western Digital 250Gb scorpio)
• a basic 2.5″ USB enclosure to enable ad-hoc pillaging of the old drive
• Tiger DVD
• Vista DVD
• Torx T-6 screw-driver
• size 00 and size 0 phillips screwdrivers
• 2 x WD passport 250Gb passport drives (one with Mac & PC app installers, the other for Time Machine)

Having the guide on the iPhone proved very handy, and luckily I had a size 0 phillips screwdriver to hand (the recommended size 00 didn’t seem right for the job). Now I’m cruising along nicely with fresh Tiger/Vista installs and throwing RAW files around without a care (hard-drive rationing is like solitary confinement, it warps the mind).

Most curious onlookers are sold after a whistle-stop tour of SMS, Web and Google Maps. However some stubborn folks haughtily demand what makes ‘it so special anyway?’, so I do my solemn best to give them the personalised excuse they need to justify their inevitable purchase. Twitterific seems to be the killer app for folks on twitter (twits?) and the common craft intro to twitter video quickly converts the non-twits. Productivity obsessives (guilty) have trouble restraining themselves when they see remember the milk and reqall. Some nuts are tougher to crack.

The final trick I have up my sleeve (besides games, but that’s cheap) is PangeaVR (app-store link).

PangeaVR iPhone app displaying ‘boat house‘ panorama from panedia.com

It’s not the most snappily-named app, nor the most seductively dressed but it’s the app that’s come closest to eliciting an audible ‘wow’ from me. In short PangeaVR allows you to view immersive photographs by rubbing your finger on the touch-screen. Drag left to look left, up is up etc. Spin around, zoom in, stare at a foreign sky. See the world not as the photographer frames it, but as they saw it (there’s a big difference). Revisit the places of your youth. Take a peek at that fantasy vacation spot. Show your friends the home town you never shut up about.

PangeaVR is (amazingly) free, though I reckon that with a less imposing UI metaphor (PangeaVR’s current UI is based around an intimidatingly long list of ‘portfolios’) and a Koi Pond-like price tag, PangeaVR could be a major money spinner for Pangea software (should they choose to go that route). The coolest part about PangeaVR as it stands though is that publishing your own panoramas through the system is also free and (theoretically) within reach of anyone with a digital camera (preferably with a wide lens and a bracket head), a PC and time! Brian Greenstone and the Pangea software guys responsible for this app/system deserve major kudos for their open-handed approach.

Now I should point out that this isn’t the first time I’ve encountered panoramic photography, so my praise isn’t just that of the VR ingénue. I’ve toiled to stitch my own panoramas in the past only to have users unable to load the Quicktime/flash/java plug-in necessary to view them or confused that they must ‘click & drag’ the photo (to which they are unaccustomed) to ‘pan’ the image (some very unhelpful lingo). In the end I gave up and started outputting stitched images as static JPEGs. What makes PangeaVR worth mentioning is that it harnesses people’s natural tendency to touch screens (even when they really shouldn’t) and the ability of even the most timid digital immigrant to comprehend the ‘move the picture with your finger’ concept.

My next move is to devise a workflow for producing my own spherical panoramas without splashing out on any specialist equipment.

Just a quick post (to offset my last ridiculously long post on stitching panoramas with Hugin). I’ve finally posted the photos from my recent trip to Salzburg & Munich. It took a few weeks (spare-time) to cull (from ~400 to 85), caption, tag, geocode, post-process and upload the images.

I’m still using the workflow described in Photography ‘08 (ditching iphoto) with a few minor modifications:

• Re-reading the metadata into Lightroom after geocoding in PictureSync. Otherwise Lightroom is unaware of the geotags and may subsequently overwrite them.
• I’ve also started exporting temp images from Lightroom (which have the ‘develop’ settings applied) as PictureSync seems unable to accurately apply the crops/tone adjustments defined in Lightroom. The temp images are uploaded and deleted.

Enjoy the pics. Also check out Robert’s pictures of the hike.