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]

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

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.

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

Mashups

What is a Mashup?

Mashups

Real World Mashups http://programmableweb.com http://mashable.com http://webmashup.com http://readwriteweb.com

http://programmableweb.com

http://mashable.com

http://webmashup.com

http://readwriteweb.com

Teach Programming Concepts Visually Games Animations Stories Simulations Graphics

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 !

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 !

Tools focus on Data Flow, Not Syntax

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)

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)

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

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

Living in an Object Oriented World Class Object Instance Method Parameters Properties

Class

Object

Instance

Method

Parameters

Properties

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, blog, or FaceBook.

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, blog, or FaceBook.

Blocks that Interact with Images Image Sources FaceBook Yahoo Images Image Scraper Yahoo Images Flickr Display Photo Sphere Carousel Image Fader PhotoShow Photo Stack Slide Show PhotoTiles Images in Games Whack A Mole Slide Puzzle Scribble Canvas Asteroids

Image Sources

FaceBook

Yahoo Images

Image Scraper

Yahoo Images

Flickr

Display

Photo Sphere

Carousel

Image Fader

PhotoShow

Photo Stack

Slide Show

PhotoTiles

Whack A Mole

Slide Puzzle

Scribble Canvas

Asteroids

Interact with Real Data UserInput RSS Weather Wikipedia LocalMovies Stocks YahooWeather Facebook Live Image Search Flickr iTunes Top Songs IMDB YouTube del.icio.us Virtual Earth MSN Shopping

UserInput

RSS

Weather

Wikipedia

LocalMovies

Stocks

YahooWeather

Facebook

Live Image Search

Flickr

iTunes Top Songs

IMDB

YouTube

del.icio.us

Virtual Earth

MSN Shopping

Blocks that Require Developer Keys Some blocks require you to register your applications to gain access to the data. Yahoo Video Yahoo Traffic FaceBook Flickr Yahoo Images Windows Live News Search … others

Some blocks require you to register your applications to gain access to the data.

Yahoo Video

Yahoo Traffic

FaceBook

Flickr

Yahoo Images

Windows Live News Search

… others

Working With Mashups Create Rip Tweak Share Embed

Create

Rip

Tweak

Share

Embed

Demo Wikipedia XML Each operation in a Popfly block runs some JavaScript code. 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 Popfly evaluates the XML data to display the results in your mash up

Wikipedia

XML

Each operation in a Popfly block runs some JavaScript code.

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

Popfly evaluates the XML data to display the results in your mash up

Local Movies Map

Local Movies Map

Teaching Popfly in Four Easy Lessons

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

Tim’s Web Site

Matt’s Web Site

Learning Outcomes Exposure to Software Development Relevance to Business and Student Interests Hands on experience with Web 2.0 concepts Build real Web 2.0 applications without programming syntax. Apply knowledge of Web 2.0 concepts and web sites.

Exposure to Software Development

Relevance to Business and Student Interests

Hands on experience with Web 2.0 concepts

Build real Web 2.0 applications without programming syntax.

Apply knowledge of Web 2.0 concepts and web sites.

Student Feedback “ 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. 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.”

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

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

Student Feedback Mashups gave me a taste of what it is like to create applications and software and what's really involved in creating them. 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.

Mashups gave me a taste of what it is like to create applications and software and what's really involved in creating them.

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.

For More Information http://popfly.com http://popflywiki.com/teachingpopfly.ashx Questions?

http://popfly.com

http://popflywiki.com/teachingpopfly.ashx