Mashups in the Information Technology Classroom

Presentation at SIGCSE 2009

1. Mashups in the Information
Technology Classroom

2. 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 ?

3. 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

4. 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.

5. Information Technology Through the Lens of Web 2.0
Web 2.0

6. 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

7. 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

8. What is a
Mashup?

9. Mashups

10. Mashups

11. Read about Real World Mashups
•http://programmableweb.com
•http://mashable.com
•http://webmashup.com
•http://readwriteweb.com

12. 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

13. MASHUPS WITH MICROSOFT
POPFLY

14. •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 !

15. popflywiki.com : Teaching Popfly
•http://popfly.com
•http://popflywiki.com/teachingpopfly.ashx

16. Mash-ups in 6 Steps
•Drag and connect blocks in
your mashup onto the design
surface.
•Specify the methods and
parameters for each block.
•Play to run your mashup.
•Customize to work on it some
more.
•Save it when you’re done.
•Share your mash-up on your
web page

17. Student Work
Tim’s Web Site Matt’s Web Site

18. Popfly Exercise
Weather Map Mashup from Lesson 3

19. MASHUPS WITH YAHOO PIPES

20. 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.

23. Yahoo Pipes

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

26. 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.

27. MASHUPS WITH GOOGLE
SPREADSHEETS

28. 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

29. =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

31. Tech Companies Info Mashup
•=hyperlink(ImportFeed("http://news.google.c
om/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))

35. OTHER MASHUP TOOLS

36. 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

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

38. Store Finder Project

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

40. Your Thoughts?
•What concepts can students better learn using
mashups?
•Which tools or techniques are better suited
for your classroom?