Tagging For Learning

According to Wikipedia, "tagging" is defined as "a (relevant) keyword or term associated with or assigned to a piece of information (e.g. a picture, article, or video clip), thus describing the item and enabling keyword-based classification of information.(source).

If photos are metatagged properly in this manner, collections of photos can be automatically aggregated on to a web 2.0 application. View a sample of a page that is dynamically created from multiple sources and multiple contributors from some of the sources based on a predefined tagging scheme. The photo of the Bixby Bridge shows how photos can be tagged in Flickr. Notice that the photo is automatically connected to a map by geotagging.

Many Websites such as blogs, social networking sites, social bookmarking sites and photo sharing sites produce RSS feeds based on tags. Including content from RSS feeds can create dynamic and interesting Web sites.

The following set of activities will help you understand how photos and other information can be tagged, and how tagged information can be used in interesting ways for learning.

After completing the following activities you will be able to:

• View a sample tagging system.
• Generate a set of 5 unique tags related to set of photos that you have taken (preferably) or you have been provided with.
• Tag a series of photos appropriately.
• Locate and aggregate similar resources based on a specific tag or set of tags.
• Geotag photographs so they can be associated with a map.
• Integrate Flickr photos, based on a specific tag, with Google Earth and Google Maps.
• Create dynamic Web pages using RSS feeds related to a specific tag from a variety of sources.
• Create a dynamic Web page by using Widgets.

Overview:

Using iPhoto, students will learn how to properly add metadata to the photos they have in their iPhoto library. This activity will give them valuable practice and opportunity to learn the fundamental concept of what a tag or keyword does. This activity can also be used where there is no Internet service available.

Background:

In iPhoto, keywords are additional descriptive words that you may assign to images. They may be visible while in iPhoto or hidden from view. They do not change the visual part of the photograph, but rather a part of the additional information that is attached to the file. It is part of what is known as metadata. Other pieces of metadata that are attached to each picture file include the brand and model of camera that the picture was taken with, the camera settings (F-stop, shutter speed, etc.) and the date the picture was taken.

Preparation:

Although you can change your keyword list at any time, it is good to spend a little time planning the list at the start. While a single keyword functions similarly to an album, one value of keywords is that you can search for individual keyed items within an album. For instance, if you had a summer vacation album and you had attached a keyword "Sally" to all photos with your cousin Sally in them, you could click on your Summer Vacation album and then type "Sally" in the search field to find all pictures of your cousin Sally on Summer Vacation.

Keywords are also powerful within iPhoto to narrow down a select group of photos with common attributes. Here keywords show the intersection of an additive filter of your picture's keywords. For instance if you had tagged your photos with the keywords that included "students", "science", "computers", you can quickly find all the pictures of students using computers in an activity that involved science.

So discuss with your students about predicting a list of maybe 5-10 keywords that might be useful for pictures that they are likely to take.

Quickstart: View the attached PDF file for step by step instructions

Keyword Manager is an excellent $19 plug-in for iPhoto that adds powerful tagging capabilities to iPhoto.

Duration: 0:54

This video tutorial explains how to upload images to Flickr. The images would have been exported from whatever program you have them in or directly from your camera.

Flickr's website: http://www.flickr.com/

Duration: 2:20

This video tutorial explains how to add GPS coordinates to Flickr images. The images will then be placed directly on Flickr maps.

You must tag photos with:

geotagged

geo:lon=-121.90314

geo:lat=36.3725

To add the photo(s) to the map, go to the link:

http://flickr.com/account/geo/import/

See how to explore Flickr for geotagged photographs.

If you don't happen to own or use a GPS, then don't worry, as there are a couple of other ways to add Flickr photos to a map.

See how to use the Flickr Organizer to place photos on a map.

Another way to add geo tags to your image is by using Google Earth version 4 and a little application called Flickr Geo Tagger.

All you have to do within Google Earth is to zoom right in at the point where you took the photo from, then using Flickr Geo Tagger click on - Get geo data. You can then copy and paste the whole line of tags from Flickr Geo Tagger over to your image in Flickr, in the Add a tag text field (see video tutorial above on adding tags in Flickr).

These demo movies show you how to use Flickr Geo Tagger with Flickr and Google Earth.

Download Flickr Geo Tagger.

Download Google Earth.

Flickr photos that are geotagged are added to Google Earth and Google Maps by using the KML and geoFeed feeds. On an Flickr page that has a feed, which can be a feed based on a specific tag, you will find links to three different feeds: the latest items added, a geoFeed, and a KML feed. For example, when Flickr generates a feed based on a specific tag, it scans that set of photos for items that are geotagged and includes them in the geoFeed and the KML feed.

Part 1: Placing Photos in Google Earth

1. Download and install the latest version of Google Earth if you do not already have it.
2. To see how Flickr's KML feed can be integrated with Google Earth, go to this Flickr page.
3. Control or right click on the KML feed link, and copy the link.
4. Open Google Earth, open the Add menu, and pick Network Link...
5. Paste the copied link into the Link field, give it a name if you wish, and click OK.
6. A list of geotagged photos should appear on the left.

Part 2: Placing the Photos on Google Maps

1. To see how Flickr's geoFeed can be integrated with Google Maps, go to this Flickr page.
2. Control or right click on the geoFeed link, and copy the link.
3. Go to Google Maps and paste the geoFeed link into the search box on the page.
4. Click the Search Maps button and check out the results.
5. The Flickr Explore menu will also let you find photos that have been geotagged.

These steps can be used to create dynamic content from most RSS feeds within a blog, wiki, or course server like WebCT or Moodle, as long as the server is set up to handle javascript within Web pages. Displaying an RSS feed within a Web page is problematic unless the XML from the RSS feed is converted to code that is understood by a Web browser. One way of doing this is to use Web-based tools that convert any RSS feed to javascript.

Part 1: Creating Dynamic Resource Lists Based on a del.cio.us tag.

1. Highlight and copy the following url to your clipboard: http://del.icio.us/rss/tag/ade2007. This is the feed associated with all items tagged with "ade2007" on del.icio.us. Of course, you could use the tag based feed for any other tag on del.icio.us, or any other Website that produces similar RSS feeds. You just have to copy the link to the RSS feed off of the page by control or right-clicking on the RSS link and choosing the copy option.
2. Go to Alan Levine's Feed to Javascript Website and go to the Build part of the site.
3. Paste the URL from step 1 into the field where it says to enter the web address of the RSS feed.
4. Adjust the options as you like and click the preview feed button.
5. Once you are satisfied with the feed, click the generate javascript button.
6. Select and copy the generated javascript.
7. Download the file that is called feed2js.zip that is attached to this page and extract the archive by double clicking on it.
8. Open the mashupblank.html file in a text editor.
9. Find the opening and closing paragraph tags and paste the generated javascript between the opening and closing paragraph tags. <p>Paste javascript here.</p>
10. Save the file, but make sure it still has an .html extension.
11. View the file in any modern Web browser.

Your code should look something like this, depending on the setting you chose to use when generating the javascript:

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

<meta name="generator" content="Adobe GoLive">

<title>Untitled Page</title>

</head>

<body bgcolor="#ffffff">

<p><script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fdel.icio.us%2Frss%2Ftag%2Fade2007&chan=y&targ=y&html=a" type="text/javascript"></script>

<noscript>

<a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fdel.icio.us%2Frss%2Ftuchodi%2Fmashup&chan=y&targ=y&html=y">View RSS feed</a>

</noscript>

</p>

</body>

</html>

Part 2: Using a Flickr Tag Feed to Create Dynamic Content on Your Web Page.

1. Highlight and copy the following url: http://api.flickr.com/services/feeds/photos_public.gne?tags=adeinstitute2007&lang=en-us&format=rss_200. This is the Flickr feed related to the tag adeinstitute2007. (Or use the RSS feed related to any Flickr tag.)
2. Go to Alan Levine's Feed to Javascript Website and go to the Build part of the site.
3. Paste the URL from step 1 into the field where it says to enter the web address of the RSS feed.
4. Adjust the options as you like and click the preview feed button, but make sure you have the Yes radio button selected under the Use HTML in Item Display option.
5. Once you are satisfied with the feed, click the generate javascript button.
6. Select and copy the generated javascript.
7. Go back to the mashupblank file you modified in Part 1, and add a new set of opening and closing paragraph tags. <p></p>.
8. Paste the generated javascript between the tags.
9. Save the file again, but make sure it still has an .html extension.
10. View the file with any Web browser.

There are other sites that provide this same service (some with adds), or you can install Alan's scripts on your own server.

These steps can be used to create dynamic content using "Widgets" within a blog, wiki, or course server like WebCT or Moodle, as long as the server is set up to handle javascript within Web pages. The latest version of iWeb supposedly supports widgets as well, but this has not been tested at the time of writing these activities.

Part 1: Using Grazr to Create a Widget for Your Web Site, Course or Blog.

1. Highlight and copy the following url to your clipboard: http://del.icio.us/rss/tag/ade2007. This is the feed associated with all items tagged with "ade2007" on del.icio.us. Of course, you could use the tag based feed for any other tag on del.icio.us, or any other Website that produces similar RSS feeds. You just have to copy the link to the RSS feed off of the page by control or right-clicking on the RSS link and choosing the copy option.
2. Go to the Grazr Website and click the Create a Widget link at the top of the page.
3. Delete the generated URL and paste the URL that was copied in step 1 into the Enter a feed or outline URL.
4. Click the Update button.
5. Customize your widget if you wish.
6. Under Type of Web Page, select Generic Web Page.
7. Select and copy the javascript for the Grazr Widget you just created.
8. Download the file that is called feed2js.zip that is attached to this page and extract the archive by double clicking on it.
9. Open the mashupblank.html file in a text editor or HTML editor.
10. Paste the Grazr javascript between the paragraph tags.
11. Save the file again, but make sure it still has an .html extension.
12. View the file with any Web browser.

Note that the Grazr Widget is not fully functional in the ALI environment because the system is automatically stripping out the javascript code that was pasted in below. The Widget should work just fine in your Web page, but a lesson learned here is to test things out to make sure the Widgets work in specific learning environments like WebCT or Moodle.

Part 2: Using a YouTube Widget to Create Dynamic Content on Your Web Pages.

1. Go to this YouTube playlist page. Or, if you have , or if you want to create a YouTube account, you can create your own playlist and widget.
2. Select the content in the Embed field on the playlist page.
3. Go back to the mashupblank file you modified in Part 1, and add a new set of opening and closing paragraph tags. <p></p>.
4. Paste the Embed object tag code between the paragraph tags.
5. Save the file again, but make sure it still has an .html extension.
6. View the file with any Web browser.

Part 3: Adding an Interactive Google Map to Your Web Page

1. Visit this Flickr page that is generated based on the tag "bc ferries".
2. Scroll down the page and locate the geoFeed link. Control or right-click on the geoFeed link and copy the link to your clipboard.
3. Go to Google Maps and paste the geoFeed link into the search field and click the Search Maps button.
4. Click on the Link to this page link, and copy the code in the "Paste HTML to embed in website field".
5. Go back to the mashupblank file you modified in Part 2, and add a new set of opening and closing paragraph tags. <p></p>.
6. Paste the Google Maps embed code between the new paragraph tags.
7. Save the file again, but make sure it still has an .html extension.
8. View the file with any Web browser.
9. Visit the Google Map team's Web page to see more examples.

Using web 2.0 applications that facilitate tagging such as Flickr, Stumbleupon, and Del.icio.us allows the properly tagged content to then be aggregated in creative and useful ways by using a site like PageFlakes or another similar service.

Geotags, exactly like the ones used for Flickr images, can also be used on blog entries by using Technorati tags, and Del.icio.us tags. So, to give you an effective example of how this geotagged data from your Flickr feed, blog entries, etc. is then repurposed into 3rd party mash-up sites, check out BlockRocker. This site aggregates geotagged content from various places, using Google Maps to render out the locations.

If you wish to see more examples of other mash-up sites, then check out programmableweb and if you want to learn more about Geo-blogging, visit the Geo-Blogging Web site.

21st Century Skills

The students learn to use the method of geotagging to create opportunities to relate information to distinctive places. In this way, they create learning possibilities that enable them to compare situations and solutions in different places (cities, countries, etc...) and that allows precise cooperative work with students of other schools, counties, states and regions. There is an incredible number of possible tasks.

To give examples:

1. Students visit a national park and explore habitat, dynamics of shorelines, etc.
2. Students compare the issues on water use in Monterey, Siena, Hamburg and other places.
3. Students compare the structure and architecture of their local community to that of a distance place.

These subjects can be closely related to the following P21 Framework:

1. Information Media and Technology Skills
2. Learning and Innovation Skills
3. Core Subjects and 21st Century Themes (Global Awareness)

ISTE National Educational Technology Standards

1. Communication and Collaboration: These activities can span the globe and involve classes collaborating between different cities and countries.
2. Digital Citizenship: These activities make the students aware of their own community and its unique issues, structures and strategies.