Making Abstract Concrete: Mash-ups
What is a mashup?: Project Statement | 09.18–10.04
--
The term “mash-up” gets its roots from music industry. A musical mash-up is an musical arrangement of two or more songs in an one audio track. Below video is a music mashup, done by DJ Noy Alooshe, that combines Michael Jackson’s Billie Jean with Daft Punk’s Get Lucky.
Just like mash-up in music, a web mash-up usually means a web application that integrates several elements from different sources into one application/interface to enable users to accomplish certain tasks that they can’t otherwise achieve by using these sources separately. In other words, they aggregate several content to fulfill specific tasks.
Web mash-ups generally combine, visualize and aggregate. A mash-up can include text, data (images, social media) feed, video, geo-location etc. By combining many kinds of content and mapping them visually, mash-ups try to make existing data more useful.
A fine example for a web mashup is PadMapper, which is a rental finding platform. It uses variety of rental listing pages’ data such as zillow.com, craiglist.org, apartments.com to map all listing content to a seperate Google Maps page. By this way, Padmapper users can search their apartments from a single page without getting lost in multiple pages.
From the back stage view, mash-up connects different kinds of information by using API’s, which enables software engineers to use ready-made pathways (parts of shortcut codes) to retrieve content/data from a specific source rather than finding way on their own. To illustrate what is an API, restaurant analogy from Pragmatic Startup Blog helps. Think that resturant like a food bank, where resturant is giving their food for free as well as allowing to resell the food you take by opening your own eatery so that (if you are low on cash) you can make profit from it. A public API would be the all items in the menu that you can get from this food bank.
Mash-ups generally have three types: Business (or Enterprise) Mash-ups, Consumer Mash-ups and Data Mash-ups. While business mash-ups connect internal company content (data etc.) with external services to be used by companies stakeholders only, consumer mash-ups connect multiple public sources together to create a more meaningful content, which will be used by general public. Data mash-ups are the ones that combine different kinds of content and create a distinctive content as a result that which is usually can’t be routed back to their original sources. Their end result usually differs highly , almost indistinguishable from their source.
Peer-Presentations: How does it sound like?| 09.29
Today, I’ve teamed up with Willow to present our topics to each other. Her topic was Bluetooth and it was an enjoyable discussion. I’ve made suggestions for her since I’ve already know what Bluetooth is and how it works. On the other hand, she also provided valuable feedback my narrative. I’ve started explaining web mashups with the same order of my project statement, from music mashups to API analogy. Willow also pointed out if mashups are only public but then I realized that I’ve forgot to mention types of mashups.
Then I’ve sketched up a quick version of my actors and possible storyline. I may show how the restaurant analogy works and how it works in real life side by side in my animation. Then I can focus on on real-life scenario and add more examples how developers or mash-up creators can combine two or more sources together.
In-Class Check-In 10/11
- I need to finalize my script / narrative.
- I have to work on my storyboard to wrap up my ideas on how can I visualize web mashups with my actors and their relationship.
- I have to look for inspirational pieces for visual styles and editing.
- What is it? How does it works? Why is it important for today?
10/13 Script
What is a Web-Mashup?
The term “mash-up” gets its roots from music industry. A musical mash-up is an musical arrangement of two or more songs in one song. For example, if you combine Michael Jackson’s Billie Jean….with Daft Punk’s Get Lucky… You created a mashup with two songs, which sounds familiar but new.
In technology, a web mash-up is web application that combines information/ content/data, from more than one source into a single web application or interface. They combine information and create something new from several sources so that users, us, accomplish certain tasks that we can’t otherwise achieve by using resources separately.
From the back stage, behind the scenes view, web mash-ups work by connecting different kinds of information from different content providers by using API’s. Content providers are the resources of the data. They can be governments, enterprises or individuals and they can ask for money to allow their data to be used but usually they willing to share their data to be used. An Application program interface (API) specifies how software components should interact and APIs are used when programming graphical user interface (GUI) components. They enable software engineers to use ready-made pathways (parts of shortcut programming codes) to retrieve content/data from a specific source rather than finding way on their own.
To illustrate what is an API and how it is related to a web mash-up, let’s think about two persons. Maggie and John. Maggie is a web developer, who want to develop a web-mash-up but does not have a content or information to show in her mash-up so she needs to find some. On the other hand, John is a entrepreneur who is having some financial issues. In order to get things right, John decided to open his own eatery but just like John does not have food to serve in his eatery so he needs to find some. Maggie, in order to find some content for her mashup, browses some content creator companies, who share some of their data/content for free. Similarly, John in order to find food for his eatery, he goes to some food banks, which are basically restaurants that give their foods for free. Then Maggie decides on using content from three companies. In order to find what these companies offer, he browses their API directory pages that lists all their available content/data and how to use them , API’s, for developers like Maggie. In like manner, John visited three food banks and looked up their menus that list all available foods that these food banks offer to needy persons. So API’s are like the items in a menu of a foodbank. They provide guidelines how to use the provider companies data and API’s are usually free for public use. Back in the stories of our two characters, Maggie decides to take rental listing data of two real-estate listing websites and map them into a visual map of another company by using their API’s. Similarly, John decides to create a three dish meal with the dishes, that he selected from the menus of the foodbanks. In the end, Maggie develops her web-mashup which users can see real-estate listing from two different sources on a visual geographical map and John creates three dish meal for the eatery that he founded. Both Molly and John was thinking of providing their service for free for their users and visitors, although they don’t have to.
Just like in our story, web-mashups are important for the internet. Generally speaking, there are three good ideas behind web-mashups, which makes them vital for our web. Firstly, they enable us to view information from different perspectives, for example they enable us to view real estate data on a map. Secondly, they enable us to compare the combined information by providing a single unified view. For example, they enable us to compare gas prices in our neighborhood. Final idea is that they also put something new into the data that they borrow from other sources. Just like enabling users to view eBay listing along with Zillow data.
In a few last words, web-mashups are here and will be here for providing us an easy to use and useful internet browsing experience, enriching our digital world.
10/18 To-Do
Finalize Script, Ask Stacie About It.
Storyboards
Visualize Key Frames
Script Re-Make
What is a Web-Mashup?
The term “mash-up” gets its roots from music industry. A musical mash-up is a musical arrangement of two or more songs in one song. For example, if you combine Michael Jackson’s Billie Jean….with Daft Punk’s Get Lucky… You will create a mashup of two songs, which will sound new but familiar.
In technology, a web mash-up is a web application that combines information, from multiple sources into a single one so that visitors can accomplish certain tasks that they couldn’t achieve by using resources separately.
Behind the scenes, web mash-ups work by connecting different kinds of content from different content providers, which can be governments, enterprises or individuals that allow their contents to be used freely by public.
Creators of web mash-ups usually use some guiding codes that help them retrieving content/data from content providers’. These assisting pathways, which are known as Application Program Interface’s, API’s, enable developers to extract data from a different computer program easily. In other words, API’s are guidelines between two softwares that they can follow to communicate with each other.
To understand web-mashups better, let’s take a look at the story of Maggie, the web developer, who has recently done an apartment hunt on web. After wasting many hours browsing each real-estate-listing websites individually for finding her next home, she decided to built a mash-up that will ease the apartment hunting for herself as well as others by combining multiple real-estate listing pages into one.
In order to do this, firstly she had to had find the real-state information that she want to show in her mashup. For this reason, Maggie browsed some content creator companies, real-estate listing websites, who share their listing information for free. Then she decided on using the listings of two companies that offer public to use their data freely through their public API’s.
After that, Maggie has browsed the API documentation pages of these companies that list all of their available content and describe how to use them. Then, she has decided to map this textual and visual information on to an another content: geographical maps, so that visitors can see where each listing located on a visual map and can compare them easier. In the end, Maggie developed her website, where users can do their aparment hunting easily by seeing real-estate listings from two different sources on a visual geographical map.
As you can see, web-mashups are important for the internet . They enable us to view information from different perspectives, such as viewing real estate data on a map just like Maggie’s web mash-up. Secondly, they enable us to compare the combined information by providing a single unified view of the content, such as comparing gas prices in a neighborhood. Lastly, they infuse new information into the data that they borrowed from other sources, such as listing eBay posts along with Zillow data.
So, web-mashups create easy to use and useful internet browsing experiences that enrich our digital world. If you were Maggie, the developer, what kind of web-mashup would you create to make our internet easier to use and more useful than before?
Script (As Almost Finalized) 10/24
What is a web mash-up?
In technology, a mash-up is a web application that combines information, from multiple sources into a single one so that visitors can accomplish certain tasks that they could not achieve by using them separately.
The term “mash-up” gets its roots from music industry. A musical mash-up is a musical arrangement of two or more songs in one song. For example, if you combine Michael Jackson’s Billie Jean….with Daft Punk’s Get Lucky… You will create a mashup of two songs, which will sound new but familiar.
To understand web mashups better, let us look at a story about a web developer — Maggie — who has recently searched for an apartment on the web. After wasting many hours browsing each rental listing website individually for finding her next home, she decided to built a mash-up that will ease the apartment hunting for herself and others by combining multiple rental listing into one page.
In order to do this, she had to have find the rental information that she wanted to show in her mashup. For this reason, Maggie browsed some content creator companies’ rental listing websites. Then she decided to use the listings of two companies that allow the public to use their data freely through mediators called Application Program Interfaces, API’s. Using API’s, Maggie could send a request to rental listing companies system to use their content and receive the content that she requested.
Next, Maggie browsed the API documentation pages of these companies to see a list all of their available content and learn about how she could use them. After merging two pieces of content into one, she decided to map the rental listing content onto another piece of content: geographical maps. This combination enabled visitors to see where each listing was located on a visual map and compare listings easier than they had in the past. In the end, Maggie developed a website, where users could hunt for apartments easily by seeing real-estate listings from two different sources on a visual geographical map.
As you can see, web-mashups are important. They enable us to view information from different perspectives, such as viewing rental listings on a visual map or, allow us to compare the combined information by providing a single unified view of the content, such as comparing gas prices in a neighborhood.
Not only web mashups improve our overall internet experience, they are also relatively easy to program even for beginners. Therefore, if you were Maggie, the developer, what kind of web-mashup would you create to make our internet easier to use and more useful than before?
Storyboard
(without last keyframe, will decide it later)
I’ve started my inspiration session by looking for styles of Maggie and her workplace. Here are some image-dump from my visual research (mostly from dribbble.com and behance.net)
Quickly, I have came out with Maggie and her workspace. I have used Daft Punk and Michael Jackson icons as posters on the walls and also incorporated some related objects such as headphones and of course her computer since she will be a web developer.
*maggies pics
After I decided on my storyboard, I’ve begun to collect some inspirations for wireframe (animation) styles although I had some ideas about it before storyboards.
I’ve looked up on some styles for wireframing my sample websites and actually decided on them on the road. I’ve decided to go with three big real estate listing website and make “knock-off” versions of them in order to establish a familiar visual look that my audience may have been browsed before.
Craiglist = Gregslist.com,
Trulia = Truelia.com,
Renthop = Rentalia.com
Then I’ve one by one mocked up these websites on Illustrator, which took a lot more than I have expected.
For my audio channel, I have searched for uplifting and cheerful keywords on Audisocket.com and have decided to go with Nicholas Pesci’s Carefree Moments.
