Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mashups Campus Tech

1,611 views

Published on

Using Microsoft Popfly and mashups to teach IT concepts at Bentley College. Presented at Campus Technology conference 2008 in Boston.

Published in: Business, Technology
  • Be the first to comment

Mashups Campus Tech

  1. 1. Microsoft Popfly: Web 2.0 in the Classroom at Bentley College Mark Frydenberg Sr. Lecturer, Computer Information Systems Bentley College Waltham MA [email_address] Twitter: @checkmark Philip DesAutels Academic Evangelism Manager Microsoft Corporation Waltham MA [email_address]
  2. 2. 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>
  3. 3. 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>
  4. 4. Information Technology Through the Lens of Web 2.0 Web 2.0
  5. 5. Mashups
  6. 6. What is a Mashup?
  7. 7. Mashups
  8. 8. 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>
  9. 9. Teach Programming Concepts Visually Games Animations Stories Simulations Graphics
  10. 10. <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>
  11. 11. Tools focus on Data Flow, Not Syntax
  12. 12. 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>
  13. 13. 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>
  14. 14. Living in an Object Oriented World <ul><li>Class </li></ul><ul><li>Object </li></ul><ul><li>Instance </li></ul><ul><li>Method </li></ul><ul><li>Parameters </li></ul><ul><li>Properties </li></ul>
  15. 15. 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, blog, or FaceBook. </li></ul>
  16. 16. Blocks that Interact with Images <ul><li>Image Sources </li></ul><ul><li>FaceBook </li></ul><ul><li>Yahoo Images </li></ul><ul><li>Image Scraper </li></ul><ul><li>Yahoo Images </li></ul><ul><li>Flickr </li></ul><ul><li>Display </li></ul><ul><li>Photo Sphere </li></ul><ul><li>Carousel </li></ul><ul><li>Image Fader </li></ul><ul><li>PhotoShow </li></ul><ul><li>Photo Stack </li></ul><ul><li>Slide Show </li></ul><ul><li>PhotoTiles </li></ul>Images in Games <ul><li>Whack A Mole </li></ul><ul><li>Slide Puzzle </li></ul><ul><li>Scribble Canvas </li></ul><ul><li>Asteroids </li></ul>
  17. 17. Interact with Real Data <ul><li>UserInput </li></ul><ul><li>RSS </li></ul><ul><li>Weather </li></ul><ul><li>Wikipedia </li></ul><ul><li>LocalMovies </li></ul><ul><li>Stocks </li></ul><ul><li>YahooWeather </li></ul><ul><li>Facebook </li></ul><ul><li>Live Image Search </li></ul><ul><li>Flickr </li></ul><ul><li>iTunes Top Songs </li></ul><ul><li>IMDB </li></ul><ul><li>YouTube </li></ul><ul><li>del.icio.us </li></ul><ul><li>Virtual Earth </li></ul><ul><li>MSN Shopping </li></ul>
  18. 18. Blocks that Require Developer Keys <ul><li>Some blocks require you to register your applications to gain access to the data. </li></ul><ul><li>Yahoo Video </li></ul><ul><li>Yahoo Traffic </li></ul><ul><li>FaceBook </li></ul><ul><li>Flickr </li></ul><ul><li>Yahoo Images </li></ul><ul><li>Windows Live News Search </li></ul><ul><li>… others </li></ul>
  19. 19. Working With Mashups <ul><li>Create </li></ul><ul><li>Rip </li></ul><ul><li>Tweak </li></ul><ul><li>Share </li></ul><ul><li>Embed </li></ul>
  20. 20. Demo <ul><li>Wikipedia </li></ul><ul><li>XML </li></ul><ul><li>Each operation in a Popfly block runs some JavaScript code. </li></ul><ul><li>Many Popfly operations that access data from external sources make use of web services (methods running on other computers) to get back results in XML </li></ul><ul><li>Popfly evaluates the XML data to display the results in your mash up </li></ul>
  21. 21. Local Movies Map
  22. 22. Local Movies Map
  23. 23. Teaching Popfly in Four Easy Lessons
  24. 24. Student Work <ul><li>Tim’s Web Site </li></ul><ul><li>Matt’s Web Site </li></ul>
  25. 25. Learning Outcomes <ul><li>Exposure to Software Development </li></ul><ul><li>Relevance to Business and Student Interests </li></ul><ul><li>Hands on experience with Web 2.0 concepts </li></ul><ul><li>Build real Web 2.0 applications without programming syntax. </li></ul><ul><li>Apply knowledge of Web 2.0 concepts and web sites. </li></ul>
  26. 26. Student Feedback <ul><li>“ Since I have not done any programming before, Popfly made it easy for me see how the different components of a mashup work together, and that the same principle applies to other software. </li></ul><ul><li>There are so many possibilities and it is kind of exciting when you can pull off a creative idea successfully. It helped me to learn more about myself as being a good problem solver. Popfly was probably the most interesting part of my experience in the course.” </li></ul>
  27. 27. Student Feedback <ul><li>Mashups gave me a taste of what it is like to create applications and software and what's really involved in creating them. </li></ul><ul><li>It also really gave me a good idea of the true meaning of Web 2.0 because you were in control of what data came from where and what you did with it. </li></ul>
  28. 28. For More Information <ul><li>http://popfly.com </li></ul><ul><li>http://popflywiki.com/teachingpopfly.ashx </li></ul>Questions?

×