Experimenting with Info Graphic

My name is Trang Phan (Trangie) and I am an animation student at Queensland University of Technology. This is my info graphic blog about my journey of creating an awesome mashup :) My student number: N6872158

[trangieinfographic]

[trangieinfographic]

Final assignment

I haven't had any particular idea for the final assignment yet.

Here are some areas that I am currently interested in:

Missing people and children

Because there seem to be no missing people map for Australia. This mashup can be very practical not only for touch screen but also web and can be used in related campaigns. It will not only just display data and information but also will help find the missing people.

Public BBQ map

It is useful on a weekend J

Water restriction map

It would benefit the people who want to move to a new area and raise awareness of water consumption within the community. 

[trangieinfographic]

Final mashup

http://trangiep.com/pages/secret/

“The secret” is a mashup which collect data from twitter (which contains the words “my secret”), and images from flickr, deviantart and the postsecret website. It will collect all the data relating to post secret and secret itself and display them in a visually appealing way.

I tried to create a “dark” and “secretive” feeling throughout the whole visual theme of the website. The main colours were dark with a hint of bright pink to make the information stand out and easier to read. An intro page was also developed to raise the audience’s interest level. It’ll make our user curious and wonder about the main page and what it really is? There is also a quicker way to go to the main page as there is a button at the end of the page. It is made to be “not too obvious” so user have to click around a bit to find their way.

I have tried to use both java scrip and the PHP method to develop this mashup. The java scrip is a lot easier for me to styling text as I am not familiar with PHP code. However, I applied PHP code for the image pipe because it gives more control and will display the images the way i want them to be displayed.

The major problem I had was the twitter pipe is not always working. It would work and stop and work again half an hour later and there are still some problem with the images as some of them will not displayed which I cannot solved.

However, it have been a great learning problem as I have never know it is so simple to mash up dada from different websites. This could be great techniques that I can apply to my website/ portfolio in the future. Instate of updating new work on my website all the time (which sometime are not convenient), I can just update my twitter/ flickr/ or other art account. 

[trangieinfographic]

Week 4

This page display a mashup that display postsecret thumbnail images from deviantart, flickr and postsecret website. 

http://trangiep.com/pages/secret/pages/secret.php

Using teh PHP method gives a lot more control over the data output, however I personally find it harder to use because I haven't have much PHP experience. 

[trangieinfographic]

This is my daily depiction. The time spend on each activity is represented my the size of the icon, the longer time spent, the bigger the images are. 

[trangieinfographic]

the secret welcome page

[trangieinfographic]

the secret logo

[trangieinfographic]

Week 3 exercise

Below is a mashup that I have made using yahoo pipe, css and html. The mashuup display images from deviantart secret project, flickr images with tagged (post secret) and images from post secret website. it also display data twitter that contain the words "my secret". The only problem had was I don't know how to stylised the scrollbar yet.  This is defiantly something I really need to fix up in the final mashup.

Another problem I had was the twitter fetch is not always updated. It would work and suddenly not working then stop again. 

http://trangiep.com/pages/secret/pages/secret.html

This method, compare to the PHP method, gives less control over the data output, however, it is a lot more simple, especially with people with less coding background.

[trangieinfographic]

My yahoo pipes

This is a simple pipe that display postsecret images from flickr

http://pipes.yahoo.com/pipes/pipe.info?_id=a5cc6382f368791e79e2e81954c34f03

Another test:

this pipe will pull images from the postsecret website and display them like flikr images.

http://pipes.yahoo.com/pipes/pipe.info?_id=22a23b943f1c97176d1e7f0132448b3e

Postsecret: 

this pipe display images from postsecret, images with "postsecret" tag from flickr and images from the deviantart secret project

http://pipes.yahoo.com/pipes/pipe.info?_id=22a23b943f1c97176d1e7f0132448b3e

[trangieinfographic]

final idea

Detailing of your mashup concept. What data you will use, how you will source it, interface mockups and analysis etc. Show me that you have made conscious decisions about the interface design principles you employ. Convince me as to why this mashup will be valuable to a particular audience (that audience might be general -> everyone, a niche group -> e.g. useful for “movie buffs on the go”, of maybe just yourself).

The secret

The secret is a mashup that combines live data from twitter about people’s secret. It will also dispay picture (post secret/ tumblr/flikr) and YouTube videos.  

Aim:

This mashup is not only going to be entertaining (post secret is one of the most popular website in the US), but will also help people to connect with each other emotionally. The thing that make it better than the actual post secret site itself id it has information from different sources since there are a lot of similar projects. It also creat a stronger connection between the viewer and the website since the data are being updated in real time.

Inspiration:

Inspired by PostSecret which is an ongoing community mail art project, created by Frank Warren, in which people mail their secrets anonymously on a homemade postcard.

http://www.postsecret.com/

Inspiration:

Target audience: general public, people of any age could find this appealing.

[trangieinfographic]

Initial ideas

Here is a list of ideas that I might develop for my mashup:

Pray for Japan

Why?

Because it is on the top news list, everyone want to know about what is happening in Japan, how they could help, etc.

  What are the negative points:

It is not very original, the idea is overdone and once everything is back to normal in Japan people will forget about the mash up as it will no longer be up to date.

  What might be included?

Photos, drawing and artwork, fund raising events, song that people wrote

  2012 – The end of the world and what is happening to the earth

Why?

It is an interesting topic which I personally want to learn more about.

Because natural disasters keep happening more frequently recently, a lot of people want to know more about this.  

 Music mashup

What are the negative points?

It is very broad; I need to think of a way to get the most useful information. A lot of it would be myth rather than fact.  

  What might be included?

Information, photos, myth, fact, video documentary, what people tweet about 2012, movie about the end of the world, etc.

  Music mashup

Why?  

Because it is entertaining, you could watch it all day and not get bored

  What are the negative points?

It is also very broad.

It is overdone, a lot of people have made mashup about music, therefore if i chose to develope about mashup I need to think of a way to make it different and more appealing than other existing mashups.  

  What might be included?

Popular songs and how people mashed them up, etc. 

    Missing children/ Missing people mashup

I haven’t find any mashup about missing people/ children in Australia  

A mash up that help people find their family members/or friends during natural disaster

It could be really useful in time of disaster when people don’t know what to do and they can go on this mashup and report about the missing person and find help.

What are the negative points?

It is a bit too complex and time consuming. Could be an idea for the major assignment

  Post secret mashup

A mash up that collect people’s secret and dreams 

[trangieinfographic]

Some mashups that I really like

Mapdango

By combining Google Maps with information from several useful websites like Flickr and Wikipedia, Mapdango is 'the' mashup for finding out more about a specific location including current events and weather.

Popurls

Popurls is the best mashup for keeping a handle on things. Popurls displays the latest and greatest from sites like Digg and Del.icio.us as well as images from Flickr, YouTube videos, and much more. This makes it the best mashup for finding out what's hot on the web right now.

Twittervision

Twittervision is a great mashup that allows you to see tweets across the map in real time. You can also switch to 3D mode to see tweet coming from a revolving Earth as seen from space. More entertainment than useful, Twittervision can be quite mesmerizing.

MusicMesh

MusicMesh is a  fantastic web mashup allows you to visually browse through bands starting with a single artist and easily watch videos of the artist that are posted on YouTube. It is definitely a fun way to discover new music or just watch videos of your favorite band.

HousingMaps

HousingMaps is a great mashup for anyone in the market for a new home, HousingMaps takes information from Craigslist and combines it with Google Maps to create a great utility for finding a house for sale or one for rent. The sheer usefulness of this site makes it one of the best mashups on the web.

[trangieinfographic]

What make a good mashup?

It need to be creative and unique. A good mashups need to be both visually appealing and either useful or, at least, entertaining to the point of needing to come with a warning label “not to view at work” if you want to get anything done.

User Experience

Users are different. Some are able to easily use a website to perform their task. Other simply are not. The stimulation that a product provides depends on the individual user’s experience with similar products. Users compare websites and have different expectations. Furthermore, they have different goals, and so they use what we have made in different modes.

Think about it: when judging the food and service at a restaurant, you will always compare what you experience to other restaurants you have been to. They have shaped your experience. Your companions compare it to their previous experiences, which are certainly different from yours. The same goes for software, websites, mashup and apps. We need to evocative qualities vary even more, simply because all users have a unique history and unique memories.

http://www.smashingmagazine.com/2011/03/15/why-user-experience-cannot-be-designed/

[trangieinfographic]

What is a mashup?

The definition of Mashups

From what I understand, A web mashup attempts creates something new out of the information. It is Web page or application that uses and combines data, presentation or functionality from two or more sources to create new services. Mashups are generally client applications or hosted online. There are many types of mashups, such as business mashups, consumer mashups, and data mashups. The most common type of mashup is the consumer mashup, aimed at the general public.

In the past years, more and more Web applications have published APIs that enable software developers to easily integrate data and functions instead of building them by themselves. Mashups can be considered to have an active role in the evolution of social software and Web 2.0. Mashup composition tools are usually user friendly and easy to use. They generally do not require programming skills and rather support visual wiring of GUI widgets, services and components together.

  A restaurant mashup might combine itself with a website that displays maps and create a map with little pins in it marking the restaurants. When the user hovers the mouse over one of these pins, the mashup might pop up the review of the restaurant. In that way, the web mashup creates something new and distinct.

The Nintendo Wii, for example , has been difficult to find in stores. A web mashup might help by taking the data from various stores like EB Games and other websites like Ebay and combine this information with Google maps to present you with an easy-to-use interface for finding a Wii in your area.

Modified from Wikipedia