JasonMorrison.net

I wanted to revisit an earlier post comparing LEDs, CFLs and traditional incandescent bulbs. I found two different values for the power and light output of the Lemnis Lighting Parox II bulbs, and same folks at work were wondering the same thing.

I decided to bust out my trusty Kill-A-Watt and see how much power the bulb was really drawing.

I watched the meter for a bit and it never went above 4 Watts. So that’s a bit of a bonus. Out of curiosity I decided to plug my CFLs in and see how much power they actually drew.

The 15W CFL spiked to 18W for a second but then settled in at 12W. After a while it climbed up to 13W and would have presumably stayed there. The 7W CFL globe settled at 5W. The incandescent was the odd one of the bunch, measuring 63 W instead of 60W. So when you replace those old lightbulbs, you may be saving a little more than you think.

Here’s the updated spreadsheet:

Again, the total lumen output might not be directly comparable because the LED bulbs really only emit light from a half globe, while the other bulbs cast light in almost all directions. Depending on the fixture this might make the LED seem brighter in comparison.

One of the great things about working at Google is the company’s commitment to the environment. This week for Earth Day the company gave each employee two LED light bulbs – much more efficient than regular old incandescent bulbs and better in some ways than the twisty compact fluorescent (CFL) bulbs I already have around the house.

Energy efficiency is one thing, but how do all these different lights compare visually? Three important measures to look at are the color temperature, the color rendering index (CRI), and the light output in lumens. I’ll talk a bit about both and explain a simple science demonstration you can do in your own home.

(more…)

The Obama administration’s just finished “Open for Questions“, where the President answered questions suggested and voted by the general public over the web. This is pretty cool – political openness, interaction, and democracy via the web. It’s also interesting to me because the site uses Google Moderator, a product we use at work all the time.

What’s not quite so cool is that Moderator apparently doesn’t play well with the rest of the web. I’m not sure why it was designed this way (and if I did know, I probably couldn’t tell you anyway). The design is the exact opposite of unobtrusive javascript. That’s fine for highly interactive web apps but it would be nice to see the mostly text content in Moderator made searchable just like any other collection of web pages.

(more…)

The web has evolved into this amazing place filled with user-created content, blogs, wikis, photo sharing sites, and users can enter comments on just about all of them. But there’s a problem – commenting in Blogger, Flickr, and some random self-hosted WordPress blog requires you to create user accounts or type in tedious contact information separately in each one.

As a user, you probably want to spend your time commenting rather than remembering usernames and passwords.  As a blogger, you no doubt want to make it as easy as possible for your readers to comment on your posts.  What we need is some really powerful identity management system to make this all possible.

OpenID is an attempt at creating such a system that seems to be growing quickly.  Instead of hundreds of usernames and passwords you have a simple URL that you control.  I just added it to my WordPress blog to see if it’s helpful, and I’ll walk you through the steps you need to take to use it and allow your commenters to use it too.

How to use your blog as your OpenID

First off, you need to get an OpenID.  Luckily, you probably already have one.  Major sites like Blogger, LiveJournal, Flickr, and Yahoo are supporting OpenID so you can just go with what you have.  You can also go with a specific provider.  Which one should you use?  It doesn’t really matter, since you can use your site’s URL as your OpenID and switch providers whenever you want.

Now that you have a URL, you need to use delegation to allow your site’s URL to stand in.  In WordPress, this means opening up the header.php and adding a few lines to your <head> section.  If you’re using Google’s Blogger (like me), the links would look something like this:

<link rel=”openid.server” href=”http://draft.blogger.com/openid-server.g” />
<link rel=”openid.delegate” href=”http://blogname.blogspot.com/” />

One side note – if you view the source of this page, you won’t see these lines.  I’m using my root domain instead.

For more information, see this post by Sam Ruby.

How to use OpenID for comments in WordPress

This part is simple – like everything else you want to do with WordPress, there’s a plugin.  Just download and install the WP-OpenID plugin and activate it.

You should notice a little OpenID icon in the fields for the comments below this post.  Go a head and test it out.

You may have noticed the snazzy poll I posted on my blog the other day.  There’s a number of different survey and poll plugins for WordPress but all the ones I’ve looked at have caveats and limitations.  You can also use a service like SurveyMonkey but it has some data limitations for free accounts.  Instead, I used Google Docs and Spreadsheets to create a survey quickly and easily.  Here’s how to do it.

1. Getting to Google Docs and starting your form

We’re going to assume you have a Gmail account or have signed up for some other Google service already.  Go to http://docs.google.com.  Click on New -> Form

2.  Creating your form

This is actually pretty easy, and the online help does a pretty good job explaining what to do.  You have a number of options when creating a question – you can make it multiple choice, full text, or even a numerical scale, and you can mark some questions as required.  If you’re looking for the “Add question” button, it’s up at the top of the page rather than below the last question.

3.  Publishing the survey on your site

After you’ve created your form, use the More Actions button to find the Embed option.  Just copy this iframe into your blog post – it’s that simple. You’ll get code that looks something like this:

<iframe src=”http://spreadsheets.google.com/embeddedform?key=ppevxmL24UqnRb77Xy3AOWg” width=”310″ height=”1044″ frameborder=”0″ marginheight=”0″ marginwidth=”0″>Loading…</iframe>

You can change the height and weight to better fit your blog template.  Keep in mind that some blogging software will not let you post HTML code and others, like WordPress, require you to use the HTML view.

If you can edit your template or sidebar you can even include the poll on every page, instead of just putting it in a post.

4.  Getting data

Here’s where it gets really cool – the data is automatically collected into a spreadsheet that you can share, edit online, or export to Microsoft Excel.  It’s pretty easy to export CSV for a statistical package like SPSS too.

There’s an optional fifth step, creating a chart or graph to let your users see the results, that I’ll cover later.  If you can’t wait just jump back to my post about urban usability and read about how I created the time-series chart there.

Nelson reminded me today that I didn’t have a favicon for this site. I took a few moments and created the amazing little pencil that’s sitting in the address bar above.

For all the non-techies and new webmasters out there who have stumbled across this page, a favicon is the little icon that show up next to a web site’s URL and next to the page’s title in your bookmarks. They’re very small (16 by 16 pixels) but they can add a dash of branding to your site and are a helpful visual signal for bookmark navigation, increasing the information scent.

Want to create your own favicon? You can draw one pixel-by-pixel at this site, but I’d recommend busting out Photoshop and creating one yourself. Try to pick initials, a logo, or an object that can be expressed very simply – I used an apple for Mealographer, for example. You can go as simple as a couple of squares that fit your site’s color scheme and still create a memorable association for your users.

Modern browsers like Firefox allow you to use .gif and .png files directly, with some code like this:

<link rel="shortcut icon" type="image/png href="http://www.jasonmorrison.net/favicon.png" />

That means you can have an animated favicon… just make sure you’re doing it for some useful or artistic purpose, otherwise you will annoy your users.

From what I’ve heard Internet Explorer still has some issues, so you may want to use the older .ico format. This site will convert the image for you.

<link rel="shortcut icon" type="image/ico" href="http://www.jasonmorrison.net/favicon.ico" />

If you want to get really crazy, you can use Javascript to dynamically alter the favicon, which is great if you want to play Defender on the smallest display ever.

Spam, it’s not just for breakfast and email anymore.  Webspam is a huge problem – if you run a blog or a forum, you’re probably familiar with the gobs and gobs of gibberish being posted all over the web by spammers.

This humble blog, which only gets a few hundred visitors per day, has had over 17,000 spam comments since I moved over to Wordpress last year.  Having your site inundated with comment spam can be just as big a headache as getting hacked.  No one wants to spend hours every day sorting the good posts from the bad.  I’ve already written about how to totally clear out a spammed forum and erase all traces of it’s reputation-marring existence, but the best solution is prevention.

Here are some steps you can take to help prevent spam on your blog or forum.

Keeping Spam off Your Blog

This section assumes you’re hosting your own blog and can add plugins and make configurartion changes, and my examples will be WordPress-heavy because I’m more familiar with WordPress.

Option 1:  Close or restrict comments. Most blogs give you some options to restrict who can comment on articles.  In Wordpress, you can require that users create accounts to comment under Settings -> General.  This might not help too much since I’ve seen hundreds of automated user accounts created right alongside the spam.

You can also require that comments are approved before they appear – in Wordpress look under Settings -> Discussion.  This will stop your blog from being graffitied without your knowledge but also requires manual effort.  You can also disallow trackbacks and pingbacks, which are really cool in theory but a major avenue for automated spam.

You can also shut down comments completely, or disable comments on old posts.  At that point you may be throwing the baby out with the bathwater, but it’s certainly effective.

Option 2:  Make sure commenters are real people with a captcha. Even if you’re not familiar with the term, you’re familiar with captchas.  They’re the little widgets at the end of a form where you have to decipher some scrambled text from an image.  Many blogs have captcha options built in, but if you’re looking for a captcha plugin be sure to balance usability with security.

I’ve used the Did You Pass Math plugin with some success.  Jeff Atwood has used an extremely simple captcha for years on his high-traffic blog.  Recaptcha is a really cool project that helps fight automatic posting and digitize old books at the same time.

Option 3:  Use an automatic filtering system. If you’re using Wordpress, I have three words for you:  Akismet, Akismet, Akismet! Seriously, Akismet is so good at automatically marking spammy commetns and trackbacks that it’s almost scary.  If you’re not using WordPress, you may still be able to find an Akismet plugin for your blogging platform.  There are other systems worth trying as well such as Spam Karma but I have less experience with those.

Keeping Spam off Your Forum

Again, I’m assuming you are hosting the forum yourself or can otherwise make config changes.  I’ll use phpBB (version 3) as an example because I’ve used it in the past.

Option 1:  Restrict user accounts. This can be a tough call, because when you start a forum you want to make it as easy as possible for people to join in the discussion.  Unfortunately, allowing anyone to register and begin posting without any admin approval also opens the door for spammers.

In phpBB this setting can be found in the Administration Control Panel under Board Configuration -> User Registration Settings.

Option 2:  Again with the captchas. Captchas aren’t 100 percent garanteed to remove spam but they do help.  If your forum software doesn’t have a captcha or a captcha plugin, I would seriously consider upgrading to a version that does or switching forums completely.  I know it’s a huge pain but waking up one morning to find 10,000 spam posts is even worse.

In phpBB3 look under Board Configuration -> User Registration Settings for a setting called “Enable visual confirmation for registrations” and make sure it’s turned on.  You can change the details under Board Configuration -> Visual confirmation settings.

Option 3:  Try to find an automatic filtering system. This is harder than for blogs.  There was an Akismet phpBB mod but it’s apparently not being maintained.  There’s a workaround involving the Spam Words mod that you can read about here.  The Spam Words mod might be worth trying on it’s own too.  Here’s a thread with more options for phpBB2, search around and find what’s available for your forum software.

Even without automated filtering, you can try to slow down the spammers by setting a time limit between posts (most human beings don’t type as quickly as spambots do).  Other options, such as disallowing links and BBCode, are pretty drastic but might make your blog less enticing.

Just for fun:

Spam, spam, bacon, and Spam

I just wrote a post about buying a new camera, and because I want to compare specs on several different cameras and lenses, I’m going to need a spreadsheet.  Luckily there are some great online spreadsheet programs to chose from.  I’m going to use this as an opportunity to explore how to use Google Docs and Spreadsheets in blog posts.

Before you get started I’m assuming you already have a Google Docs spreadsheet ready to go.

1.  You can always just link to the document. By default your docs will be private so you’ll need to make them available to your readers.  To do so you’ll need to either go to the Share tab and check “Anyone can view this document WITHOUT LOGGING IN at:” or go to the Publish tab and publish the doc. Either way you’ll get regular URL to post, like this one:  http://spreadsheets.google.com/ccc?key=ppevxmL24UqmeiZSbqIU1DQ&hl=en

Links aren’t very exciting though, so how can you embed into a post instead?

2.  You can embed the content into the post.  If you’re wondering how to do it in Wordpress, one solution I’ve come across is the Inline Google Docs plugin at Broken Watch.  This plugin gets the actual text/html of the spreadsheet and places it inline in your post.  So if you have a wide blog template, or a spreadsheet with relatively few columns, it should blend right in.  On the other hand, there’s no editing or other fun.

Here’s an example of what the output looks like:

NOTE: I had to disable this, it was throwing errors once I upgraded to WordPress 2.7. You mileage may vary.

3.  You can put the doc directly in the page with an iframe. This works really, really well with Google Presentations but is a bit trickier with a doc and even less optimal with a spreadsheet. You’ll get the best-looking results if you publish the document and use the published URL in the iframe. On the other hand if you use the shared URL collaborators should be able to make changes right in your blog post.

You’ll want to create some code like this:

<iframe src=”http://spreadsheets.google.com/pub?key=ppevxmL24UqmeiZSbqIU1DQ” width=”500″ height=”400″></iframe>

Make sure you put the code in the “HTML” editing mode of Wordpress rather than “Visual” mode.  As a result you can see some of the info I’ve gathered about possible camera / lens combinations in the spreadsheet below.

The main issue here is the relatively small iframe window size. If you use a wider blog template this technique might work really well.

Why bother? Spreadsheets aren’t the most exciting thing in the world for most people, but play around with all the features of Google Docs and Spreadsheets and you’ll see why this can be pretty cool.  You can embed questionnaires and surveys, cool charts and graphs with Gadgets, and anything else you can think of.

Earlier I wrote a bit about what to do when your site has been hacked or spammed to the point where Google and Firefox start warning visitors away from your site.  If you find you site deleted from Google search results completely, you’ll want to file a reconsideration request.

Luckily, the Google Webmaster Central blog has a great post on how to make a request to get back into Google.  The post includes a step-by-step video.  You can also check out the Google Webmaster Help group if you have questions.

In part 1 we created a simple heat map in Photoshop to figure out which neighborhoods would be good places to look for a new house. But distance from work and school isn’t the only factor worth considering. We can always add more radial gradients to show proximity to favorite restaurants, family members, and the like. But that’s really just more of the same.

Think about the things that make a neighborhood a pleasant place to be – low crime, low pollution, parks nearby, friendly neighbors – some of those things can be quantified and mapped. We’ll have to wait for demographers to release official neighborhood friendliness metrics after the next census, but let’s see if we can find some of the other data.

Step 3: Highlight on-map elements

At least one of the new factors we want to look at is already available on our map – parks. All the parks on the map are in one of two shades of green. Use the Magic Wand Tool to select park areas and then Select -> Similar. You can see how I’ve selected the parks in the example below.

Now we’re going to do something similar to the concentric circles in step 2. Choose Select -> Modify -> Expand. You might have to play around with the number of pixels you expand by – for the scale I was working at, 20 pixels looked like close walking distance. Now use the fill tool with a low opacity to fill the area with the same color you used for the circles.

You can then repeat the expand and fill steps as many times as you like to build a heat map of park proximity. Don’t forget to change the blending mode to Multiply to match your other layers.

You can follow similar steps for other on-map elements, like shopping centers, college campuses, bodies of water – it all depends on what you like to be near and what’s available on your base map.

Step 4 – Pulling in data maps

First, a disclaimer: this isn’t a tutorial on how to automatically pull data from a server and have Photoshop map it for you (but keep watching my blog for a similar project in the future). Instead, we’re going to pull data maps from other places on the web and fit them over our heatmap.

The hardest part of this next step is finding the maps. The number and quality of maps available depends on your location, but in general the best two places to look are county and city websites and nearby colleges. If you don’t find what you’re looking for under “Maps” try looking for “GIS,” planning departments, or property information. Also, many government web sites have poor search systems – try doing a Google search with the site operator instead. For example, a search for Cuyahoga County might look like this: site:cuyahogacounty.us maps gis.

For this example, I’m going to grab a map from Case Western Reserve University’s NEO CANDO site. Another good source for the Cleveland area is the the Cuyahoga County Brownfields GIS server. My wife and I both have graduate degrees and we really value education – so I’m going to grab a map of the percentage of people with bachelor degrees or higher by census tract.

Now that we have a data map, we need to clean it up a bit and add it to our base map. Open the data map in Photoshop and use the Magic Wand tool to select the black and gray areas – the lines and numbers. Use Select-> Similar to make sure uoi have most of it selected and hit Delete. Now Select All, Copy and Paste it into your map as a new layer.

You’ll might want to use the Magic Wand and Select-> Similar again to clear out all the white area around the map and leave it transparent, but you don’t have to – you’re going to change the layer blending mode to Overlay like the other layers anyway. At this point, I can almost guarantee that the data map will be much smaller than your base map. Chose Edit -> Transform -> Scale to stretch it to fit. There’s no sure-fire way to do this, just keep stretching until you have a good fit to known boundaries like coastlines and major streets.

Here’s the result:

Step 5 – Bring it all together

Now that we have all these different layers, it’s time to pull them all together in one heat map.  You have a few options on how to do this.  If you make all the layer visible at the same time your going to get a lot of very blue areas.  Instead, try lowering the opacity of each layer based on who important it is to you.  You can see an example of my Cleveland area map below.

If you want to make the strongest areas of the heat map more visible, start by making your base map invisible while leaving all your other layers up.  Go to Select -> color range and clikc the eye dropper on the darkest blue area you can find.  Now increase the Fuzziness until it looks like the best areas are selected.  Hit the OK button, create a new blank layer, turn off the rest of your layers, and fill the selection with your blue.  You can see the result below.

Hopefully this has been helpful.  You don’t have to make your map quite as involved as mine, and of course if you are looking in a smaller area you can constrain your map further.

Stay tuned for more updates on this topic.  If you have a feed reader you can subscribe to my blog and if you’d like you can get email updates, too.