Become Ron Lin in Three Easy Steps.

Ron Lin works at the Los Angeles Times. In many ways, he’s your typical mild-mannered reporter. He covers the county government beat for the Metro desk. He pounds copy. He hits deadlines. He has crusty editors who think print first. He has no known aspirations of becoming a full-time computer programmer.

He is a hero, and he blogs among us.

He also develops web applications that generate millions of page views, serve the public interest and lap the competition.

Ron is the man behind the paper’s wildly popular fire maps. When a fire breaks out in Southern California, Ron works to keep maps like this one up to date, and readers return repeatedly to see his latest updates.

The beauty is that he does it all with his web browser. He uses Google’s My Maps tool to quickly sketch up a map, and a little HTML know-how to embed it on latimes.com. He taught himself. The tools are free.

In this class, you’ll see three browser tricks just like Ron’s. They can improve any blog post. They can impress your readers. They require only a web browser, and a little wherewithal. They include:

1. How to publish a locater map from Google.
2. How to publish a simple chart with Google Charts.
3. How to publish a word cloud from Wordle.

The examples I’ll be working through are all already documented below. So, if you’re bored with me already, feel free to cruise them at your leisure. I’ll leave them up here, so you can feel free to bookmark the page and go grab a smoke. The substance is all here, you’ll only be missing out on my charming presentation.

– Ben Welsh

Publish a Google map in no-time flat.

View Larger Map

Part I: Make the map

1. Visit maps.google.com.
2. Log in with a Gmail or other Google account. If you don’t have one, you’ll need to sign up. At the L.A. Times we have a joint account that is used by different people across the newsroom.
3. Click the “My Maps” link in the upper-left-hand part of the page. It’s just below the Google logo and to the right of “Get Directions.”
4. Click “Create new map” — a link also found there in the upper left.
5. Now you should have a palette of tools for drawing your own map. Points. Lines. Bubbles. The whole deal. I won’t go through it all here, but if you need more help you should consult Google’s documentation, which includes a helpful screencast.
6. Go ahead and draw your map. If you look above, you can see what map I made. It shows the new stop sign in my hometown, Swisher, Iowa.
7. Once you’re done, click the “Save” link in the left-hand toolbar.

Part II: Jack the map

1. Click the “Link” button in the upper-right-hand corner of the page.
2. A window should drop down with two boxes in it. The top box contains a direct link to this page, here on Google’s site. The lower box contains a snippet of HTML code you can use to “embed” your map someplace else — like your blog, for instance.
3. Copy the contents of that lower box to your clipboard. It’s all the code you need to need to plant this map on your site.

Part III: Blog the map

1. Login to WordPress or whatever CMS you’re using.
2. Paste the HTML code clipped from Google into a new post or story. If you’re using WordPress there’s a nice guide here. Some blogs or CMS systems might restrict what kind of HTML you can just dump in, so there’s a chance you’ll bump your shin here if your system is locked down. Unfortunately, if that’s the case, you’ll have to sort out the issue with whoever manages your CMS. If you’re using a blog application besides WordPress, you’d probably do well just to search Google for help. Since these maps are commonly embedded, there’s likely to be something out there.
3. Publish the post.

– 30 –

Publish a quickie chart and look real smart.

Men accounted for 97.3 percent directing jobs in a study of 100 films released in 2007.

Part I: Snatch the data

1. Collect your data, in this case a breakdown of the gender of movie directors.

Part II: Make the chart

1. Visit the Google Chart Creator.
2. Fiddle with the buttons until you get a chart you like.

Part III: Blog the chart

1. After you’ve created a chart you like, copy the image URL from the bottom of the page.
2. Place the image in your block like you would any other shot on your blog.

– 30 –

Publish a word cloud and make mom proud.

Los Angeles Mayor Antonio Villaraigosa's 2009 State of the City address.

Part I: Make the cloud

1. Collect your data, in this example, the text of Mayor Villaraigosa’s most recent State of the City address.
2. Copy the text you want to visualize to you clipboard.
3. Visit Wordle.net and click the “Create” link at the top.
4. Paste in the text and click “Go.”
5. You should now have a beautiful word cloud you can fiddle around with.
6. If something went wrong, consult Wordle’s troubleshooting guide.

Part II: Jack the cloud

1. Center your browser window so that the entire cloud is on the screen.
2. Take a snapshot of your current window. If you’re using Windows, it’s usually as easy as tapping the “Print Screen” button. If you’re on a different system, or your keyboard doesn’t have the button, check out the guide here.
3. Open up Microsoft Paint or Photoshop or whatever you use to edit images. Since “Print Screen” saves the image to your clipboard, like anything else you might cut or copy, all you have to do is paste the image into a new file.
4. Use the cropping tools to cut down the image so it only contains the cloud
5. Save out the result in either PNG or GIF file format.

Part III: Blog the cloud

1. Login to your WordPress or whatever CMS you use.
2. Upload your image to your site. If you’re using WordPress, they have a step-by-step guide here.
3. Insert the hosted image’s URL into an img tag in the HTML. If you’re using WordPress, it will do all that for you.

– 30 –