Mashups in the Information Technology Classroom

Agenda

• Teaching Mashups and Web 2.0• What are Mashups?• Microsoft Popfly• Yahoo Pipes• ASP.NET / C# Web Services with Google Maps• Google Spreadsheets• Sprout Builder• Teach Using Mashups ?

Web 2.0 at a Business University

• Web 2.0 is interdisciplinary• Experience “Data is the next Intel inside”• Tools are becoming more prevalent • Knowledge Workers will work with Information

Technologists and Software Developers• Data comes from many different sources• Understand concepts without mastering

implementation details• Web 2.0 opens the door to new business models

Teaching IT Concepts Through the Lens of Web 2.0

IT 101• IT 101 is a first year

required Intro to IT Course• “Technology Intensive”

sections

Topics• Computer maintenance• Windows Operating System• Spreadsheets• Web Pages• Internet / Networking• Multimedia / Graphics / Video• Current Events, Apps, and

Trends.

Information Technology Through the Lens of Web 2.0

Web 2.0

Learn By Experience

Technologies

• XML• RSS• Web Services• API• JavaScript• Servers• Distributed Applications• Compile

Application Development

• Software Design / Requirements

• Abstraction• Data• Logic• Iteration• Objects• Algorithmic Thinking• Methods• Parameters

Teach IT Concepts

Mash-Ups

• “Data is the next Intel Inside”

• XML, RSS• Web Services• Service Oriented

Architecture

Software Development

• Computer Programming• Application Development• Input, Output, Processing• Parameters• Application Programming

Interface (API)• Tools focus on Data Flow,

Not Syntax

What is a Mashup?

Mashups

Mashups

Read about Real World Mashups

• http://programmableweb.com• http://mashable.com• http://webmashup.com• http://readwriteweb.com

What’s Mashable? Anything XML

RSS Feeds• Reuters.com, Trulia.com

(real estate), flickr, twitter, delicious

• Google News search on a topic

REST• Wikipedia• Yahoo GeoCoding

Web Services Data (programming required)

• Xmethods.Net

MASHUPS WITH MICROSOFT POPFLY

• Developed by Microsoft non-professional products division

• Visually build real-world applications without code• Beta, Oct. 17, 2007• Share on web site, blog, or Facebook• I was in the New York Times !

popflywiki.com : Teaching Popfly

• http://popfly.com• http://popflywiki.com/teachingpopfly.ashx

Mash-ups in 6 Steps1. Drag and connect blocks in

your mashup onto the design surface.

2. Specify the methods and parameters for each block.

3. Play to run your mashup.4. Customize to work on it some

more.5. Save it when you’re done.6. Share your mash-up on your

web page

Student Work

Tim’s Web Site Matt’s Web Site

Popfly ExerciseWeather Map Mashup from Lesson 3

MASHUPS WITH YAHOO PIPES

Yahoo Pipes• Simplest is to output

custom RSS Feeds• Can output maps or

images if you add code to a badge and the feed contains that data

• A good Tutorial

• combine many feeds into one, then sort, filter and translate it.

• geocode your favorite feeds and browse the items on an interactive map.

• power widgets/badges on your web site.

• grab the output of any Pipes as RSS, JSON, KML, and other formats.

Yahoo Pipes

Pipes Exercises

• Find apartments on Craigslist near restaurants on the main street in your town.

Exercises (Popfly or Pipes)

• Make your own “friendfeed” mashup that combines data from different online RSS feeds with data about you (twitter, flickr, google search, etc.)

• Add a filter based on user input.

MASHUPS WITH GOOGLE SPREADSHEETS

Data Mashups with Google Spreadsheets

• Google Sets (ctrl and drag)• =GoogleFinance(“symbol”, “attribute”)• =GoogleLookup(“entity”, “value”)• =ImportFeed(“url”, paramters)• =ImportXML(url, Xpath expression)• =ImportHTML(“url”)• =ImportData(“url”)

http://googlesystem.blogspot.com/2007/09/google-spreadsheets-lets-you-import.html

=GoogleLookup(entity, value)• Countries and Territories (like "Burkina Faso"): population, capital, largest city, gdp • U.S. States (like "Tennessee"): area, governor, nickname, flower • Rivers (like "Amazon River"): origin, length • Cities and Towns (like "Chicago"): state, mayor, elevation • Musicians (like "John Lennon"): date of birth, place of birth, nationality • Actors (like "Audrey Hepburn"): date of birth, place of birth, nationality • Politicians (like "Anwar Al-Sadat"): date of birth, place of birth, nationality • U.S. Presidents (like "Zachary Taylor"): date of birth, place of birth, political party • Baseball Players (like "Wade Boggs"): games, at bats, earned run average, position • Chemical Elements (like "Helium"): atomic number, discovered by, atomic weight • Chemical Compounds (like "Isopropyl Alcohol"): chemical formula, melting point, boiling point,

density • Stars (like "Betelgeuse"): constellation, distance, mass, temperature • Planets (like "Saturn"): number of moons, length of day, distance from sun, atmosphere • Dinosaurs (like "Velociraptor"): height, weight, when it lived • Ships (like "USS Chesapeake"): length, displacement, complement, commissioned • Companies (like "Hewlett-Packard"): employees, ceo, ticker

Tech Companies Info Mashup

• =hyperlink(ImportFeed("http://news.google.com/news?hl=en&ned=us&q=" & A2 & "&ie=UTF-8&output=rss", "items url", "false", 1),ImportFeed("http://news.google.com/news?hl=en&ned=us&q=" & A2 & "&ie=UTF-8&output=rss", "items title", "false", 1))

OTHER MASHUP TOOLS

Other Mashup Tools

• Qrowd– Functional programming visually with blocks– Similar UI to Yahoo Pipes

• Sprout Builder– Build widgets from RSS, Video, images – Embed multimedia and RSS– Cool widgets/gadgets for your web page with no

HTML knowledge needed

MASHUPS WITH C#, WEB SERVICES, AND ASP.NET

Store Finder Project

http://it.bentley.edu/MEYFART_CHRI/final.aspx

Your Thoughts?

• What concepts can students better learn using mashups?

• Which tools or techniques are better suited for your classroom?