Wordle

The Image to the left was created using wordle.net.

It is super easy to use. You can either copy and paste text into the text block or enter a Web site address that has RSS feeds.

I entered the URL for TheEpitaph.com. The words that appear most often are displayed in a larger size.

Clearly this is mostly eye candy for your site, but it does help visualize what words are most popular within the text. Here is an example of how word clouds can be used.

The site allows you to change the colors, fonts, and layouts.

Here is another wordle creation. This time the source was copy and pasted from the the curriculum page on journalism.arizona.edu


Wordle provides the html to put a small image on your site, but you can also take a screen capture if you want a bigger version. To take a screen shot on a Mac, hit: "apple" "shift" and "4" all at the same time. Then drag the cross around the word cloud. It will save the image to your desktop.

If you are running Windows, hit the "print screen," open an image editing application and select "edit" > "paste."

MapMaker

*Click a balloon for more information.

Last week I tried out Dipity, a timeline service I hadn't used before. This week I want to show you MapMaker, an awesome mapping application on the web. I have used this service many times and love it. It also happens to be free.

To get started, you need to register for a free account. This will allow you to save your map and add or subtract points later.

MapMaker has a helpful guide to get your started.

Here is how I created my map:
1) Login
2) Move the map and zoom in on Tucson
3) Single click on the area in the map that I want to be a point on the map
4) Name the point
5) Add html to style the information I want to appear (find more info about the html I used and html in general below)
6)Save marker
7) Repeat steps 3-6

Here is the html I used for the balloon that is "Photo 1" Look at the balloon and then compare to the code.
<b>50-mile ride:</b> Photo 1 <br /><img src="http://farm4.static.flickr.com/3325/3194673580_4f2983b607_o.jpg" width="225px" height="169px"> <br />This is an image of me riding on the <a href="http://tucsonbiketrails.wikispaces.com/Santa+Cruz+Trail" target="new">Santa Cruz bike path</a>.

Let me explain what each piece of html does here:
<b>50-mile ride:</b> Photo 1 <br />
In the above piece of code "50-mile ride" is between bold html tags. You can see the first tag which starts the bold and then the tag with the "/" ends the bold. That is why when you look at the "Photo 1" balloon, only "50-mile ride" is bold. The last html tag you see is a break tag or br tag, which essentially acts has a hard return. It forces the what ever comes next onto a new line.

<img src="http://farm4.static.flickr.com/3325/3194673580_4f2983b607_o.jpg" width="225px" height="169px"> <br />
In this piece of code, we are including the image. In this case it is a photo of me that I uploaded to Flickr. All you would do with this code is copy your image url and paste it in place of my photo. You also need to change the width and height numbers to represent your image. Flickr is great for this because they automatically have image sizing options. You want your images to be no bigger than 250 pixels in either direction and remember to keep it proportional.

This is an image of me riding on the <a href="http://tucsonbiketrails.wikispaces.com/Santa+Cruz+Trail" target="new">Santa Cruz bike path</a>.
The last piece of code is a little blurb about the photo with a link to more information about the Santa Cruz bike path. The a href part is the html tag. You can essentially copy my coding and insert your own URL. The "target ="new"" part of the code tells the browser to open the link in a new window. The words between the ">" and the "" will become the words that are the hyperlink.

To add the map to your Web site, you want to click the button that says "iframe" in MapMaker and copy and paste that html into your page. Here is what the map I created looked like
<iframe src="http://mapmaker.donkeymagic.co.uk/preview.php?map_id=9173" id="map" frameborder="0" height="500" width="600">&amp;amp;lt;br&amp;amp;gt;</iframe>

If you want to learn a little more about basic html and check out a cheat sheet, I recommend W3schools.

I used MapMaker in BorderBeat to highlight the restaurants we wrote about. It is just a little different way to present the data. Check it out here.

Trying out Dipity timeline

Just a quick example of a dipity.com timeline. You can click the images and get more information about the event. You can also change the view as well. It is nice because if you decide to add an event after you posted the timeline to a Web site, it will automatically update it.