Archive for the 'dailydev' Category

DailyDev: Treemap

July 1, 2010

DailyDev blog series logo - day 11When I saw Mark Luckie’s post “What is a treemap? 5 examples and how you can create one” the other week I thought making a treemap would be a fun exercise for this series, in which I test drive new (to me) Web tools and techniques.

From Luckie:

Treemaps are a growing trend in online data visualization and you’ve likely spotted one or two around the web. But what are they?

Most newsies have probably seen the Newsmap, one of Luckie’s examples.

Treemaps, sometimes written as “tree maps,” display hierarchical information in a series of clustered rectangles, which together represent a whole. The size of each box represents a quantity. Treemaps also can use color to represent any number of values, but it is often used to categorize the various boxes within the treemap.

Be sure to check out the full post on 10,000 Words for more examples and advice on creating your own.

In part to simplify the styling of the chart and in part to brush up on my skills, I decided to build my treemap, illustrating the fiscal 2011 spending plan for the municipality I used to cover, in Flash.

Given that it’s been — let’s just say a while — since I tackled anything approaching serious development in this particular program (this hastily made virtual bell I used to motivate teammates in an all-hands-on-deck Web development session might have been the last interactive I produced), it took me a few days to put the treemap together. Recreating the visualization in HTML/CSS could be a future project, I suppose. I’ve seen enough of this chart for now, though.

Finished Product

Screengrab of treemap city budget visualization made in Flash

Pros

  • Efficiently communicates the basics about the budget. With a quick glance and a few mouseovers users get a good grasp of how the city’s money is divided up and what some of the bigger-ticket areas are.
  • A lot more fun than reading a budget story or scrolling through the spending plan PDF.
  • Doesn’t have to take long to do. Although I didn’t choose either of these options, as Luckie mentioned in his post, Google and IBM have tools that generate treemaps for you.

Cons

  • It can be cognitively difficult for users to compare proportionate shapes with varying aspect ratios. (That’s one reason I made the blocks representing my subcategories squares.)
  • Difficult to optimize for mobile, given reliance on mouseovers, and, in many treemaps, the oh-so-teeny-tininess of the tiniest blocks.
  • Building from scratch and manually doing the math to determine the proportions — like I did (though I did have Google’s tool assist me with the dimensions/layout of the five main blocks) — can be time consuming!

Tip

  • Flash doesn’t allow nested rollovers. Use the hitTest method if you want that behavior. For example, here’s the AS2 I used to get the Parks details to appear on mouseover:
parksMain_mc.onEnterFrame=function()
{
	if(parksMain_mc.hitTest(_root._xmouse, _root._ymouse))
	{
		parksMain_mc.gotoAndPlay(2);
	}
}

Recommend?

  • Yes, but make sure the time it takes to create the treemap is balanced by the time it saves/value it adds for your audience. Also, given the increasing importance of interlinked data on the Web, which I blogged about earlier, it behooves developers to present data in semantically smarter ways than Flash. So, yeah: Do as I say, not as I do.

DailyDev: Business Card QR Code

June 22, 2010

Photograph, taken in front of a mirror, of the front and back side of a business card, with a QR two-dimensional barcode on the back.
A former newspaper guy transitioning to multi-platform journalism, I love, love, love print-digital mashups. So, naturally, I’m excited that QR codes, widespread in Japan and Europe, seem to be catching on in North America.

The two-dimensional bar codes, invented to track auto parts, are being embraced by content DailyDev blog series logo -- day 10producers and marketers because they can be processed by smart phones to steer users to URLs, contact information, map locations and other data. The South By Southwest festival this year used them on conference name badges. A Canadian newspaper recently started printing the codes next to articles to connect print readers to supplementary online content. Anyone in Times Square a couple weeks ago might have noticed QR codes (QR is short for quick response) in advertisements on one of the district’s many electronic billboards.

I decided to apply the technology much like SXSW did and embed my contact information on the back of my business card. To do this, I used a free third-party beta service called PingTags, which links with users’ LinkedIn accounts to create sleek mobile contact pages. PingTags automatically generates the corresponding QR code and even tracks page views for you.

DIYers can make their own QR codes here. There are many free QR code generators available online, but this one has the added feature of allowing creators to change the destination of the code at a later date.

Finished Product

  • The business card itself (the back is reflected in a mirror) is in the image at the top of this post.
  • The QR code pointing to my PingTags page is at left.
  • If youQR code for my PingTags page have an enabled smart phone, go ahead and try scanning the code. If you don’t have a QR reader app, you can download one here.
  • If you don’t have a smart phone capable of reading QR codes, check out the page here.

Pros

  • Make your business card more interesting and more useful to your contacts.
  • Make a static business card dynamic by changing the content the code points to.
  • Look technically hip without needing a lot of technical know-how.

Cons

  • Many users don’t have phones capable of reading QR codes or don’t know that they do.
  • Other mobile apps like Google Goggles and Bump can arguably more efficiently accomplish the functionality achieved in this example.
  • The codes look kinda cool — I think so at least — but aren’t going to be winning any beauty pageants. (SpyderLynk‘s paid SnapTag service offers a more aesthetically pleasing alternative.)

Tip

  • Be creative! Put QR codes on T-shirts, napkins, greeting cards, Twitter icons, tattoo them on your skin. The sky’s the limit. OK, maybe not that last one.

Recommend?

  • Yes, but bear in mind that a lot of people look down upon QR codes as gimmicky — and often times, they’re right. Don’t use a QR code where a shortened URL will do.

DailyDev: Photoshop Fake HDR

June 16, 2010

I’ll have to get out with a tripod sometime and try it the scratch-made way, but today I faked a high dynamic range photo in Photoshop using this tutorial.

Finished Product

HDR image

Photoshop faked HDR image of the Raleigh (N.C.) Convention Center

Original image

Original image of the Raleigh (N.C.) Convention Center, before getting the fake HDR treatment in Photoshop.

Pros

  • Mimic the human eye and then some by making extremely light and extremely dark areas visible at once.
  • Create dramatic-looking photographs.
  • Potentially rescue poorly exposed images.

DailyDev blog series logo -- day 9Cons

  • Fun to play around with, but for everyday Web publishers, limited practical applications.
  • It takes time and talent to keep the HDR image from looking too fake.
  • Even proper HDR images are controversial in some photography circles.

Tip

  • Experiment. Don’t be scared to deviate from the tutorial recipe. Every photograph is different. Plus, there’s always several ways to skin a cat in Photoshop. Oh, and always save your original .psd!

Recommend?

  • To mess around with, why not? A more subtle application than this could be used to correct over/under exposure in photo illustrations. This technique should be avoided in news photos, however; it’s distorting reality.

DailyDev: Google Motion Chart

June 13, 2010

I checked out Google’s Motion Chart gadget — for illustrating changes in multiple variables over time — in school last fall but never produced a complete, functioning chart. Today I did. It visualizes each of the 32 World Cup nations’ per capita GDP, life expectancy and World Cup wins for the last half-century.

The steps:

Screengrab of Google Docs spreadsheet

  1. Following the format above, enter data into a Google Docs spreadsheet.
  2. From the “Insert” menu, choose “Gadget” and click on the “Motion Chart” option. For range, enter the top-left cell of your data set and the bottom-right cell of your data set (including field labels), like this: “Sheet1!A1:E193″ Click “Apply”.
  3. Preview your chart, give it a title, choose what variables by default appear on which axis, fiddle with some other options, such as whether the scatter plots are colored or sized according to a variable. When you’re satisfied, click “Apply” one more time, then grab the embed code by clicking on the arrow in the upper-right corner of the gadget box and choosing “Publish Gadget.”

Finished Product

Screen grab of Google Motion Chart gadgetPros

  • Create revealing interactive charts without any coding.
  • Can import .csv files directly into the Google Docs spreadsheet, saving you from tedious data entry.
  • Chart automatically changes as your spreadsheet does.

DailyDev blog series logo -- day 8Cons

  • Requires large data sets to be effective.
  • Can improperly suggest correlation, causation or trends.
  • Minimal control over styling.

Tip

  • Don’t think of Google Motion Chart only as a presentation medium. It can be a useful reporting or research tool for spotting noteworthy patterns.

Recommend?

  • Yes, but only for visualizing data over significant time spans — whether you’re dealing in hours, days, months, years, you’re going to want a lot of reference points — where trends will be noticeable and meaningful.

DailyDev: Custom 404 Error Page

June 11, 2010

DailyDev blog series thumbnail logo -- day 7It’s Friday, and apparently there’s some kind of big sports tournament going on, so, I kept today’s DailyDev simple. I made a custom Page Not Found 404 error page for my portfolio site — something I should have done a long time ago.

Here are the steps:

  1. Create the HTML page and save it in your site root as “notfound.html.”
  2. Add a line reading “ErrorDocument 404 /notfound.html” to your  site’s .htaccess file. (Error pages on non-Apache servers are configured differently, according to this tutorial. Site owners should contact their Web host.)

Here is the

Finished Product

Screengrab of custom Page Not Found 404 error page

Pros

  • Design one page, cover an infinite amount of potential broken links/typos/misspellings.
  • Make the error a little less jarring for users, provide guidance that may help them find a relevant page, maybe even make them laugh a bit.
  • Encourage (or automate [No. 6]) feedback so you know when your site’s not working properly.

Cons

  • You’re spending time making a page you never want anyone to see!
  • Many who do see it are probably just going to instantly hit the back button anyway.
  • If your Web server gets lots of requests for invalid files, a larger custom error page rather than the generic one can start nipping away at your bandwidth quota.

Tip

  • If your Web host has you edit your .htaccess file through a form interface, like mine does, you still need to make sure you precede the custom 404 page’s filename with a slash to indicate it’s in the root: “/notfound.html”.

Recommend?

  • Yes.

DailyDev: Geotagging

June 10, 2010

DailyDev series thumbnail logo -- day 6Location, location, location. With the coming mobile revolution, I’ve written before, the mantra increasingly applies to a lot more than real estate. It behooves Web publishers to start semantically geotagging their content. For today’s DailyDev, I assigned locational information to a Web page, a WordPress blog post and a Flickr set.

WEB PAGE

I used geo meta tags to indicate the location of the speech that was the subject of this live coverage page.

  1. The “geo.position” meta tag uses latitude and longitude coordinates. I grabbed the coordinates for the event location from Google Maps. I simply switched to “My Maps,” toggled to satellite view, placed a marker over the appropriate building and grabbed the coordinates by clicking on the marker, then on “more,” then on “send.” The latitude and longitude are part of the link in the “Message” window.
  2. The “geo.placename” and “geo.region” meta tags use city, state and country information. Nothing fancy there.
  3. Putting it all together, I added the three meta tags to the <head> section of my HTML document.

Finished Product

<meta name="geo.position" content="36.109018; -79.506705" />
<meta name="geo.placename" content="Elon, NC" />
<meta name="geo.region" content="US-NC" />

WORDPRESS POST

  1. WordPress support has an easy-to-follow tutorial on how to enable and apply geotagging.
  2. Once geotagging is enabled, a "Location" window will appear at the bottom of all "Edit Post" pages. You can enter in a street address, select a location on a Google map, or have your computer detect your location.
  3. As long as "This post's location is public" is checked, the location will be recorded the next time you save your post.

Finished Product

Screengrab of WordPress.Com window for geotagging a blog post

FLICKR

Geotagging Flickr content is even simpler thanks to the photo sharing site's interactive map interface.

  1. Log in to your Flickr account and click "Organize & Create" in the menu at the top of the page.
  2. In the dropdown in the lower-left corner, select the set or other grouping of photos you want to geotag. If you want to see all photos that haven't been assigned a location, choose "Your non-geotagged content."
  3. Click the "Map" tab at the top of the screen and drag and drop your photos into the appropriate locations on the map. You can quickly navigate to a specific address by typing it into the search box in the upper-right.

Finished Product

Screen grab of geotagged Flickr photo set.

Pros

  • Manual geotagging is pretty simple to do, as the above examples indicate.
  • More and more Web services and platforms are automating geotagging. If you tweet (eat your heart out, New York Times), for instance, you've probably noticed Twitter's location feature.
  • Geotagging makes your content more useful to you and others, especially mobile users.

Cons

  • No standardized way of geotagging Web content has emerged.
  • Services that attempt to automatically pick up users' location are often inaccurate.
  • There are a whole host of privacy concerns for those sharing as well as collecting locational data.

Tip

Recommend?

  • Yes. The location train is revving up. It's time to get on.

DailyDev: ProPublica’s ChangeTracker

June 8, 2010

DailyDev thumbnail logo -- day 5ProPublica’s award-winning ChangeTracker mashup, which it uses to follow edits to The White House’s website, can still be cloned to monitor the site of your choice, just be sure not to try to follow this tutorial, as I attempted to. The Yahoo! pipe it says to use is busted. Here are the revised steps, still largely based on the aforementioned tutorial.

  1. Create a free Versionista account.
  2. Log in to Versionista and enter the url of the page you want to track in the blue box at the bottom of the page. Click “Monitor this URL.”
  3. You’ll be taken to a new page. With a free account, you can monitor up to four more URLs if you wish. If they’re from the same site you just entered, add them here. If they’re from a different site, complete step four, then repeat steps 2 through 4 for the other site.
  4. Click “options” at the top of the screen. Check “Make this site archive public.” Copy the url under the checkbox and save it for later.
  5. Go to ProPublica’s ChangeFeeder page to create an RSS feed for each site you’re monitoring. Paste into the box the url you copied in step 4 and append it with “all”. It should look something like “http://versionista.com/pub/19600/1/all&#8221;.
  6. To give the feed a cleaner URL and to receive stats for it, run it through FeedBurner.
  7. If you wish, use FriendFeed to publish your feed on a Twitter stream.

A Maryland native, I decided to use ChangeTracker to monitor changes to recent blog and news items on the campaign websites for Maryland’s governor and his challenger, who are reversing roles from four years ago.

Finished Product

Neither of these was working perfectly last I checked. You can get an idea for what’s supposed to happen by clicking “this change” for the “June 7, 2010 7:28 PM” change on the O’Malley feed. It’s a lame change — new tweets! — but you get the idea.

versionista screengrab

Pros

  • Once you find out the tutorial you’ve been trying to follow is no longer operable, this isn’t that much work to pull off.
  • You can catch website changes you’d never notice unaided, all without visiting pages umpteen times a day.
  • Versionista helps transparency advocates practice what they preach by providing a way to share interactive archives of their own websites.

Cons

  • Like I said, I still haven’t gotten this working perfectly. This could be a problem on my end, but I’ve already invested more time than I intended in this exercise.
  • To take full advantage of ChangeTracker and monitor more than five Web pages requires a paid Versionista account.
  • Even with a tool automating the first step, culling through dozens of mundane updates to find one interesting one is still tedious!

Tip

  • Think about the sites you choose to track. ChangeTracker works well for static pages with lots of text, less well for dynamic pages with a lot of multimedia.

Recommend?

  • For those with more patience and time than me, definitely. ProPublica has used ChangeTracker in its reporting several times. ChangeTracker is a useful enough tool for novices but there’s no telling how expert developers could extend what Versionista and ProPublica have put together.

DailyDev: Fixing Orphans With CSS

June 6, 2010

DailyDev series thumbnail logo -- day fourFor my next DailyDev, I’m working on cloning ProPublica’s ChangeTracker mashup to track changes to the campaign websites of Maryland’s governor and his challenger.

To make sure it works and to have something to show, I’m waiting for the pages I’m monitoring to be updated. So, I’m in a holding pattern on that.

In the meantime, here’s a simple CSS technique I used to get rid of orphans in a blog post on my portfolio site.

If you don’t know what orphans are, have a look at the screengrab below:

Screengrab of blog post with orphans at the end of list items.

You got it, the orphans are the last lines of each list item. Not pretty, right? Fortunately, I happened upon this CSS tutorial showing how to use the overflow property to get rid of them.

Following the tutorial, I wrapped each of the problem list items in a new div with the id “noOrphans,” like this:

<div id="noOrphans">
<li class="blogItem">
<strong>Here's the scoop: You can't scoop yourself:</strong>
Stop thinking in terms of print versus Web, us versus them. Start thinking in terms of one multi-platform news organization. To promote this culture, get your print/broadcast and Web staff interacting and crossing over into each other's roles.
</li>
</div>

I then created a new CSS rule for that div setting the overflow property to hidden, like this:

#noOrphans {
	overflow: hidden;
}

See, I said it was simple. Here's the

Finished Product

Screengrab showing blog post with orphans corrected.

  • I could have accomplished the same thing with a class rule, but, as you can see from the HTML, I already had a class applied to the list items.

Pros

  • Really simple to do.
  • Can be accomplished with minimal extra markup.

Cons

  • If every other list item or paragraph requires an orphan-canceling div or class, your markup will start to get cluttered.

Tip

  • If you have lots of orphans, tweak your design and leverage the CSS cascade to keep your markup clean. In my example, for instance, if most of my list items had orphans, I might consider increasing or decreasing the padding or margins of their parent elements, or just forget about having the text wrap so each list item automatically squares off.

Recommend?

  • Yes.

DailyDev: Custom Twitter Background

June 3, 2010

DailyDev blog series thumbnail logo -- day 3I’ve been meaning to take a stab at a custom Twitter background for a while but was always unsure what dimensions would be best to accommodate varying screen resolutions. This Mashable post, which I used as my guide, recommends 1600px by 1200px. The left column where text popularly goes should be less than 240 pixels wide, the post suggests.

While branding is typically the main motivation behind custom Twitter backgrounds, I was going for function more so than form here.

I have two Twitter accounts, a personal account and one I created for school. I maintained both during the first part of my grad program but have since started feeding all my everyday tweets to my personal handle, reserving my old school account for live tweeting.

I wanted the custom background to convey this so that anyone who stumbles upon my school account doesn’t miss that it’s not my main handle.

Finished Product

Screengrab of customer Twitter background

  • I used Photoshop to create the image. I employed a gradient background and some basic layer effects on the text and icon to achieve some depth. The Twitter bird is from this free set.

Pros

  • Give your Twitter page a personal touch or communicate important information with minimal extra effort.
  • Brand yourself or your organization across multiple spaces by matching the look/feel of your website, print campaign, etc.
  • Non-designers can outsource the job to free online background generators.

Cons

  • Since you’re dealing with a fixed image, it’s impossible to get the dimensions perfect for every resolution.
  • Mobile users, a fast growing segment of your and any audience, don’t benefit from your custom background. Nor do your established followers, really. Once I start following someone, at least, it’s not often I click through to his or her page.
  • You can’t hyperlink the text. A good use of Twitter backgrounds is to promote your other online spaces, but, whenever I see this I have to fight my instinct to click on the words.

Tip

  • Don’t make your background too texty. It’s against the 140-character spirit of Twitter.

Recommend?

  • For organizations, definitely. It’s a can’t-miss opportunity to extend your brand and get important information in front of your audience. An attractive background that efficiently communicates what your org is all about can make all the difference when a user is deciding whether to become a follower.
  • For individuals it can be beneficial for the same reasons, but, to me, overly packaged personal backgrounds often come across as pretentious — especially those with large photos of the user identical or similar to his or her profile picture a few pixels away.

I’m a fan or more subtle personal backgrounds — especially large landscape or cityscape photos — that serve a design function and reflect the user’s personality but let his or her tweets, profile bio and website link speak for themselves.

DailyDev: HTML5 Video

June 2, 2010

DailyDev day 2 thumbnail imageEditors delight in turning this

Macbeth was very ambitious. This led him to wish to become king of Scotland. The witches told him that this wish of his would come true. The king of Scotland at this time was Duncan. Encouraged by his wife, Macbeth murdered Duncan. He was thus enabled to succeed Duncan as king.

into this

Encouraged by his wife, Macbeth achieved his ambition and realized the prediction of the witches by murdering Duncan and becoming king of Scotland in his place.

(If the example looks familiar, it should. It’s from Strunk and White.)

Developers delight in turning this

<object type="application/x-shockwave-flash" height="320" width="480" data="http://stephencearley.com/video/interviewing.swf" type="application/x-shockwave-flash">
<param value="http://stephencearley.com/video/interviewing.swf" name="movie"/>
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://stephencearley.com/video/interviewing.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>

into this

<video src="http://stephencearley.com/video/interviewing.ogv" controls>
</video>

That's the markup for HTML5 video. Beautiful, isn't it? (Be sure and soak it in before reading on. You'll see why.)

The above code will display a video in the latest versions of Firefox, Opera and Chrome. But that's it. You need to append the markup for the video to display in recent Safari, iPhone or Android releases. You need to append it further — with that busy Flash object embed from two boxes up — for the video to show in earlier versions of the above browsers, and, crucially, until Internet Explorer 9 comes out next year, in the world's most popular browser.

If you're using Firefox 3.5 or above, Opera 10.5, Chrome5 or recent Safari, iPhone or Android browsers, go ahead and check out the

Finished Product

Screengrab of HTML5 video

  • This page includes an annotated version of the full markup as well as the actual video.

If you're not using one of the above browsers, download one! Firefox, Opera, Chrome and Safari are each free.

If you want to try this yourself, I strongly encourage you to read this chapter from the "Dive Into HTML5" online book. It's long but totally worth it. It's extremely informative, covering basics about digital video — starting with the difference between containers and codecs — as well as the HTML5 stuff, and doing it all in a way that's accessible to n00bs without being condescending.

Pros

  • Even before HTML5 as a whole is officially supported, developers can publish video in a clean, plug-in-free, standards-based format.
  • It's a way to display video on the Flash-less iPhone/Pad.
  • Videos can be controlled with Javascript for some real nifty interactivity.

Cons

  • Not supported on all browsers yet. No standardized codec.
  • Having to develop for multiple codecs, still create a Flash backup, decreases the net benefit to workflow efficiency.
  • Lots of accessibility potential. But right now, it's mostly just that, potential.

Tip

  • Use the poster attribute to customize the preview frame. This can be any image — it doesn't have to be a frame from the video.
<video src="http://stephencearley.com/video/interviewing.ogv" poster="http://stephencearley.com/video/poster.jpg">

Recommend?

  • Yes and no. For the average developer, it's worth waiting until some of the issues mentioned above get worked out. But, make no mistake, especially with <video> tag support coming in IE9, HTML5 video should be ready for primetime soon. If you choose, you can already view most YouTube videos in HTML5. Vimeo also has an HTML5 player in beta.
Follow

Get every new post delivered to your Inbox.