0
Mashups in the Information Technology Classroom
Agenda <ul><li>Teaching Mashups and Web 2.0 </li></ul><ul><li>What are Mashups? </li></ul><ul><li>Microsoft Popfly </li></...
Web 2.0 at a Business University <ul><li>Web 2.0 is interdisciplinary </li></ul><ul><li>Experience “Data is the next Intel...
Teaching IT Concepts Through the Lens of Web 2.0 <ul><li>IT 101 </li></ul><ul><li>IT 101 is a first year required Intro to...
Information Technology Through the Lens of Web 2.0 Web 2.0
Learn By Experience <ul><li>Technologies </li></ul><ul><li>XML </li></ul><ul><li>RSS </li></ul><ul><li>Web Services </li><...
Teach IT Concepts <ul><li>Mash-Ups </li></ul><ul><li>“ Data is the next Intel Inside” </li></ul><ul><li>XML, RSS </li></ul...
What is a Mashup?
Mashups
Mashups
Read about Real World Mashups  <ul><li>http://programmableweb.com </li></ul><ul><li>http://mashable.com </li></ul><ul><li>...
What’s Mashable? Anything XML <ul><li>RSS Feeds </li></ul><ul><li>Reuters.com ,  Trulia.com  (real estate), flickr, twitte...
MASHUPS WITH MICROSOFT POPFLY
<ul><li>Developed by Microsoft non-professional products division </li></ul><ul><li>Visually build real-world applications...
popflywiki.com : Teaching Popfly <ul><li>http://popfly.com </li></ul><ul><li>http://popflywiki.com/teachingpopfly.ashx   <...
Mash-ups in 6 Steps <ul><li>Drag and connect  blocks in your mashup onto the design surface. </li></ul><ul><li>Specify  th...
Student Work <ul><li>Tim’s Web Site </li></ul><ul><li>Matt’s Web Site </li></ul>
Popfly Exercise <ul><li>Weather Map Mashup from Lesson 3 </li></ul>
MASHUPS WITH YAHOO PIPES
Yahoo Pipes <ul><li>Simplest is to output custom RSS Feeds </li></ul><ul><li>Can output maps or images if you add code to ...
 
 
Yahoo Pipes
 
Pipes Exercises <ul><li>Find apartments on Craigslist near restaurants on the main street in your town. </li></ul>
Exercises (Popfly or Pipes) <ul><li>Make your own “friendfeed” mashup that combines data from different online RSS feeds w...
MASHUPS WITH GOOGLE SPREADSHEETS
Data Mashups with Google Spreadsheets <ul><li>Google Sets  (ctrl and drag) </li></ul><ul><li>=GoogleFinance(“symbol”, “att...
=GoogleLookup(entity, value) <ul><li>Countries and Territories  (like &quot;Burkina Faso&quot;): population, capital, larg...
 
Tech Companies Info Mashup <ul><li>=hyperlink( ImportFeed(&quot;http://news.google.com/news?hl=en&ned=us&q=&quot; & A2 & &...
 
 
 
OTHER MASHUP TOOLS
Other Mashup Tools <ul><li>Qrowd </li></ul><ul><ul><li>Functional programming visually with blocks </li></ul></ul><ul><ul>...
MASHUPS WITH C#, WEB SERVICES, AND ASP.NET
Store Finder Project
http://it.bentley.edu/MEYFART_CHRI/final.aspx
Your Thoughts? <ul><li>What concepts can students better learn using mashups? </li></ul><ul><li>Which tools or techniques ...
Upcoming SlideShare
Loading in...5
×

Mashups in the Information Technology Classroom

1,660

Published on

Presentation at SIGCSE 2009

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,660
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Mashups in the Information Technology Classroom"

  1. 1. Mashups in the Information Technology Classroom
  2. 2. Agenda <ul><li>Teaching Mashups and Web 2.0 </li></ul><ul><li>What are Mashups? </li></ul><ul><li>Microsoft Popfly </li></ul><ul><li>Yahoo Pipes </li></ul><ul><li>ASP.NET / C# Web Services with Google Maps </li></ul><ul><li>Google Spreadsheets </li></ul><ul><li>Sprout Builder </li></ul><ul><li>Teach Using Mashups ? </li></ul>
  3. 3. Web 2.0 at a Business University <ul><li>Web 2.0 is interdisciplinary </li></ul><ul><li>Experience “Data is the next Intel inside” </li></ul><ul><li>Tools are becoming more prevalent </li></ul><ul><li>Knowledge Workers will work with Information Technologists and Software Developers </li></ul><ul><li>Data comes from many different sources </li></ul><ul><li>Understand concepts without mastering implementation details </li></ul><ul><li>Web 2.0 opens the door to new business models </li></ul>
  4. 4. Teaching IT Concepts Through the Lens of Web 2.0 <ul><li>IT 101 </li></ul><ul><li>IT 101 is a first year required Intro to IT Course </li></ul><ul><li>“ Technology Intensive” sections </li></ul><ul><li>Topics </li></ul><ul><li>Computer maintenance </li></ul><ul><li>Windows Operating System </li></ul><ul><li>Spreadsheets </li></ul><ul><li>Web Pages </li></ul><ul><li>Internet / Networking </li></ul><ul><li>Multimedia / Graphics / Video </li></ul><ul><li>Current Events, Apps, and Trends. </li></ul>
  5. 5. Information Technology Through the Lens of Web 2.0 Web 2.0
  6. 6. Learn By Experience <ul><li>Technologies </li></ul><ul><li>XML </li></ul><ul><li>RSS </li></ul><ul><li>Web Services </li></ul><ul><li>API </li></ul><ul><li>JavaScript </li></ul><ul><li>Servers </li></ul><ul><li>Distributed Applications </li></ul><ul><li>Compile </li></ul><ul><li>Application Development </li></ul><ul><li>Software Design / Requirements </li></ul><ul><li>Abstraction </li></ul><ul><li>Data </li></ul><ul><li>Logic </li></ul><ul><li>Iteration </li></ul><ul><li>Objects </li></ul><ul><li>Algorithmic Thinking </li></ul><ul><li>Methods </li></ul><ul><li>Parameters </li></ul>
  7. 7. Teach IT Concepts <ul><li>Mash-Ups </li></ul><ul><li>“ Data is the next Intel Inside” </li></ul><ul><li>XML, RSS </li></ul><ul><li>Web Services </li></ul><ul><li>Service Oriented Architecture </li></ul><ul><li>Software Development </li></ul><ul><li>Computer Programming </li></ul><ul><li>Application Development </li></ul><ul><li>Input, Output, Processing </li></ul><ul><li>Parameters </li></ul><ul><li>Application Programming Interface (API) </li></ul><ul><li>Tools focus on Data Flow, Not Syntax </li></ul>
  8. 8. What is a Mashup?
  9. 9. Mashups
  10. 10. Mashups
  11. 11. Read about Real World Mashups <ul><li>http://programmableweb.com </li></ul><ul><li>http://mashable.com </li></ul><ul><li>http://webmashup.com </li></ul><ul><li>http://readwriteweb.com </li></ul>
  12. 12. What’s Mashable? Anything XML <ul><li>RSS Feeds </li></ul><ul><li>Reuters.com , Trulia.com (real estate), flickr, twitter, delicious </li></ul><ul><li>Google News search on a topic </li></ul><ul><li>REST </li></ul><ul><ul><li>Wikipedia </li></ul></ul><ul><ul><li>Yahoo GeoCoding </li></ul></ul><ul><li>Web Services Data (programming required) </li></ul><ul><li>Xmethods.Net </li></ul>
  13. 13. MASHUPS WITH MICROSOFT POPFLY
  14. 14. <ul><li>Developed by Microsoft non-professional products division </li></ul><ul><li>Visually build real-world applications without code </li></ul><ul><li>Beta, Oct. 17, 2007 </li></ul><ul><li>Share on web site, blog, or Facebook </li></ul><ul><li>I was in the New York Times ! </li></ul>
  15. 15. popflywiki.com : Teaching Popfly <ul><li>http://popfly.com </li></ul><ul><li>http://popflywiki.com/teachingpopfly.ashx </li></ul>
  16. 16. Mash-ups in 6 Steps <ul><li>Drag and connect blocks in your mashup onto the design surface. </li></ul><ul><li>Specify the methods and parameters for each block. </li></ul><ul><li>Play to run your mashup. </li></ul><ul><li>Customize to work on it some more. </li></ul><ul><li>Save it when you’re done. </li></ul><ul><li>Share your mash-up on your web page </li></ul>
  17. 17. Student Work <ul><li>Tim’s Web Site </li></ul><ul><li>Matt’s Web Site </li></ul>
  18. 18. Popfly Exercise <ul><li>Weather Map Mashup from Lesson 3 </li></ul>
  19. 19. MASHUPS WITH YAHOO PIPES
  20. 20. Yahoo Pipes <ul><li>Simplest is to output custom RSS Feeds </li></ul><ul><li>Can output maps or images if you add code to a badge and the feed contains that data </li></ul><ul><li>A good Tutorial </li></ul><ul><li>combine many feeds into one, then sort, filter and translate it. </li></ul><ul><li>geocode your favorite feeds and browse the items on an interactive map. </li></ul><ul><li>power widgets/badges on your web site. </li></ul><ul><li>grab the output of any Pipes as RSS, JSON, KML, and other formats. </li></ul>
  21. 23. Yahoo Pipes
  22. 25. Pipes Exercises <ul><li>Find apartments on Craigslist near restaurants on the main street in your town. </li></ul>
  23. 26. Exercises (Popfly or Pipes) <ul><li>Make your own “friendfeed” mashup that combines data from different online RSS feeds with data about you (twitter, flickr, google search, etc.) </li></ul><ul><li>Add a filter based on user input. </li></ul>
  24. 27. MASHUPS WITH GOOGLE SPREADSHEETS
  25. 28. Data Mashups with Google Spreadsheets <ul><li>Google Sets (ctrl and drag) </li></ul><ul><li>=GoogleFinance(“symbol”, “attribute”) </li></ul><ul><li>=GoogleLookup(“entity”, “value”) </li></ul><ul><li>=ImportFeed(“url”, paramters) </li></ul><ul><li>=ImportXML(url, Xpath expression) </li></ul><ul><li>=ImportHTML(“url”) </li></ul><ul><li>=ImportData(“url”) </li></ul>http://googlesystem.blogspot.com/2007/09/google-spreadsheets-lets-you-import.html
  26. 29. =GoogleLookup(entity, value) <ul><li>Countries and Territories (like &quot;Burkina Faso&quot;): population, capital, largest city, gdp </li></ul><ul><li>U.S. States (like &quot;Tennessee&quot;): area, governor, nickname, flower </li></ul><ul><li>Rivers (like &quot;Amazon River&quot;): origin, length </li></ul><ul><li>Cities and Towns (like &quot;Chicago&quot;): state, mayor, elevation </li></ul><ul><li>Musicians (like &quot;John Lennon&quot;): date of birth, place of birth, nationality </li></ul><ul><li>Actors (like &quot;Audrey Hepburn&quot;): date of birth, place of birth, nationality </li></ul><ul><li>Politicians (like &quot;Anwar Al-Sadat&quot;): date of birth, place of birth, nationality </li></ul><ul><li>U.S. Presidents (like &quot;Zachary Taylor&quot;): date of birth, place of birth, political party </li></ul><ul><li>Baseball Players (like &quot;Wade Boggs&quot;): games, at bats, earned run average, position </li></ul><ul><li>Chemical Elements (like &quot;Helium&quot;): atomic number, discovered by, atomic weight </li></ul><ul><li>Chemical Compounds (like &quot;Isopropyl Alcohol&quot;): chemical formula, melting point, boiling point, density </li></ul><ul><li>Stars (like &quot;Betelgeuse&quot;): constellation, distance, mass, temperature </li></ul><ul><li>Planets (like &quot;Saturn&quot;): number of moons, length of day, distance from sun, atmosphere </li></ul><ul><li>Dinosaurs (like &quot;Velociraptor&quot;): height, weight, when it lived </li></ul><ul><li>Ships (like &quot;USS Chesapeake&quot;): length, displacement, complement, commissioned </li></ul><ul><li>Companies (like &quot;Hewlett-Packard&quot;): employees, ceo, ticker </li></ul>
  27. 31. Tech Companies Info Mashup <ul><li>=hyperlink( ImportFeed(&quot;http://news.google.com/news?hl=en&ned=us&q=&quot; & A2 & &quot;&ie=UTF-8&output=rss&quot;, &quot;items url&quot;, &quot;false&quot;, 1) , ImportFeed(&quot;http://news.google.com/news?hl=en&ned=us&q=&quot; & A2 & &quot;&ie=UTF-8&output=rss&quot;, &quot;items title&quot;, &quot;false&quot;, 1) ) </li></ul>
  28. 35. OTHER MASHUP TOOLS
  29. 36. Other Mashup Tools <ul><li>Qrowd </li></ul><ul><ul><li>Functional programming visually with blocks </li></ul></ul><ul><ul><li>Similar UI to Yahoo Pipes </li></ul></ul><ul><li>Sprout Builder </li></ul><ul><ul><li>Build widgets from RSS, Video, images </li></ul></ul><ul><ul><li>Embed multimedia and RSS </li></ul></ul><ul><ul><li>Cool widgets/gadgets for your web page with no HTML knowledge needed </li></ul></ul>
  30. 37. MASHUPS WITH C#, WEB SERVICES, AND ASP.NET
  31. 38. Store Finder Project
  32. 39. http://it.bentley.edu/MEYFART_CHRI/final.aspx
  33. 40. Your Thoughts? <ul><li>What concepts can students better learn using mashups? </li></ul><ul><li>Which tools or techniques are better suited for your classroom? </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×