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 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
Student Work Tim’s Web Site Matt’s Web Site
Popfly Exercise Weather 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?

Mashups in the Information Technology Classroom

  • 1.
    Mashups in theInformation Technology Classroom
  • 2.
    Agenda Teaching Mashupsand 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 ata 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 ConceptsThrough 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 Throughthe Lens of Web 2.0 Web 2.0
  • 6.
    Learn By ExperienceTechnologies 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 ConceptsMash-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 aMashup?
  • 9.
  • 10.
  • 11.
    Read about RealWorld Mashups http://programmableweb.com http://mashable.com http://webmashup.com http://readwriteweb.com
  • 12.
    What’s Mashable? AnythingXML 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.
  • 14.
    Developed by Microsoftnon-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 : TeachingPopfly http://popfly.com http://popflywiki.com/teachingpopfly.ashx
  • 16.
    Mash-ups in 6Steps 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’sWeb Site Matt’s Web Site
  • 18.
    Popfly Exercise WeatherMap Mashup from Lesson 3
  • 19.
  • 20.
    Yahoo Pipes Simplestis 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.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
    Pipes Exercises Findapartments on Craigslist near restaurants on the main street in your town.
  • 26.
    Exercises (Popfly orPipes) 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 GOOGLESPREADSHEETS
  • 28.
    Data Mashups withGoogle 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) Countriesand 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
  • 30.
  • 31.
    Tech Companies InfoMashup =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) )
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
    Other Mashup ToolsQrowd 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.
  • 39.
  • 40.
    Your Thoughts? Whatconcepts can students better learn using mashups? Which tools or techniques are better suited for your classroom?