Pixels & Data

Screen grabs

Mon, 28 May 2012 14:53:53 +1000

Screen grabs of the Death by Chocolate mashup- just in case Yahoo! Pipes decide not to work.

Recipes Tab

Snapshots Tab

Tweets Tab

About Tab

Death By Chocolate- The Final Mashup

Mon, 28 May 2012 14:49:00 +1000

A mashup, as defined by Wikipedia, is an interface which combines two or more data presentation or functionality sources, producing results that are easy, fast and integrated.

Death By Chocolate is a mashup interface that combines chocolate recipes, snapshots & tweets.

Built for chocolate lovers, this website is a place where you can look for recipes to:

make delicious chocolate desserts (everyone will love you for that)

look for pictures of chocolate others’ have posted (not encouraged if you are on a diet!)

see what the Twitterverse (tweeters) are talking about chocolate (and rejoice that you are not the only one obsessed with chocolate!).

This is a celebration of being a chocoholic; to bring fellow chocoholics together, knowing that somewhere in the universe, someone else loves chocolate as much as you do (or even more).

As an avid baker, I often find myself having to visit some different food blogs and search through tons of recipes to find the one that I want, which was extremely time consuming. Also, being a foodie, I love looking at food photography and can spend hours looking through different food websites.

Thus, I wanted to make an interface that integrates data to make life easier for myself as well as other users. With the social media aspect added, it connects people because of the common interest they share- chocolate.

This is a list of the data sources that Death By Chocolate is drawn from:

Recipes:

Snapshots:

Twitter:

You can access the mashup here.

Issues faced

Mon, 28 May 2012 12:13:00 +1000

A couple of issues occurred while doing the mashup:

#1: JQuery

At first, I had planned to have 3 columns for the mashup, with each column containing a different function (i.e. recipes, photos & tweets). However after recommendations from tutorial mates during the poster presentation, I decided to design it in such a way that users are able to view & hide the different tabs so as to create a bigger area to view each content.

With the help of JQuery to enable that, I initially used this tutorial- however it was not suitable as it gave the content div a weird ‘animation’ effect; also it hid some of the content-divs, which made it very messy as the different content-divs were ‘layered’ onto each other.

I later found another tutorial which worked better for the purposes of my mashup.

#2: Styling of Yahoo! Pipes

I encountered more problems with the styling of Yahoo! Pipes than expected.

a) the image option for my Flickr pipe would not work in my mashup, so I had to abort using it and switch to the list option.

The image option of my Flickr pipe, as viewed in Yahoo! Pipes.

Evidence of the Flickr image scroll not working.

The list option of my Flickr pipe, as viewed in Yahoo! Pipes.

Removing the descriptions of the images, it caused the images to become distorted and produce a weird white border, which I had a lot of problem trying to find out what it was. Also, I later found out that the styling of this Flickr pipe resulted in the other Yahoo! pipe in my mashup to malfunction.

In the end, I resorted to using PHP to link thumbnails of the photos to the original Flickr photo.

b) Majority of the time, my Twitter pipe would not spit out the Twitter feeds despite actually having feeds and I would get this error message:

I realised that using the Twitter API was more reliable, hence stuck to using it eventually.

c) As mentioned above, the weird white border appeared in my Recipe pipe. Despite using Firebug to find out what that is, I still could not locate its div name.

As such, the only resolution I had was to add a white background to the entire pipe div.

Improved Layout Mockups + Wireframe

Mon, 28 May 2012 10:19:22 +1000

Mockups done of the mashup after the improvement of the layout:

Recipes tab

Snapshots tab

Tweets tab

About tab

Wireframe of the Recipe tab, which will be the same for the other tabs, apart from the difference in content.

Post Poster Presentation

Fri, 06 Apr 2012 00:03:19 +1000

Had our posters pasted up in tutorial on Wednesday, and we went around to give our comments and this is what one kind soul critiqued for mine:

I’ve decided to make changes to the layout of my mashup site- to allow expandable & collapsible columns so that it makes it less cluttered and gives the user a larger viewing area for each column.

A rough wireframe of how the improved mashup site will look like.

Death of Chocolate: The Poster

Thu, 05 Apr 2012 23:42:07 +1000

A downloadable version of the poster is available here.

Design Resources & Process

Thu, 05 Apr 2012 23:42:00 +1000

The Colour Palette:

Light brown & chocolate brown- related to chocolate.

Red- the colour is known the whet appetite and is widely used in the logo of food & beverage companies (E.g. Mcdonalds, KFC, Coca-Cola). It also helps to emphasise more important information as it stands out from other colours.

White- while it isn’t technically a colour, it helps to provide white space to make it look more spacious and less cluttered.

The Logo:

While researching for the look & feel I wanted for Death of Chocolate, I searched for chocolate pictures and got inspirations from these:

Death by Chocolate is a common term for desserts so rich, decadent and chocolatey that it might kill someone. I wanted to play on the word Death, hence using the gun, yet not wanting it to be over-morbid. As such, I used dripping, melted chocolate and chocolate “blood” being squirted out of the gun to give it a less serious and more fun feel to the brand.

Playing with different fonts & positioning of the different elements for the logo- I wanted a more edgy/modern font that would appeal to the younger crowd.

The final Death by Chocolate logo. I chose this particular font Blackout as it was simple (too many details and it would be too complex for a logo) and it could be seen from afar (as compared to a thin, fine font).

Experimenting with different elements & colour combinations of the mash up site (after deciding on the wireframe)- light brown, white, chocolate & red.

The chosen mock up to be developed and coded. The logo is placed at the top, which is the spot where most people will look at first. Then, the attention is shifted towards the sub-headings, as red is used to make it more dominant.

Data sources

Thu, 05 Apr 2012 00:42:00 +1000

There are 5 data sources that I will be using, out of these they will be categorised into Recipes, Snapshots & Tweets.

1. Recipes

MyBakingAddiction, ThePioneerWoman & Smitten Kitchen are three of the many food blogs that I read, but I chose these three as the data sources as:

a) There are many chocolate recipes on these sites

b) The recipes are tried and tested. I’m usually a bit skeptical with some websites/ recipes where the food look better than they taste (those are usually sponsored/ advertisements). I’ve used some of the recipes featured and they worked for me, hence I trust these food blogs and believe that the users will be able to make successful chocolate treats using these recipes.

2. Snapshots

Flickr is one of the largest imaging hosting website, and it is dependent on user-generated content- images that users upload to the site. I chose Flickr as it is one of the first websites that comes to most people’s mind when they are looking for a photo.

A screenshot of the search results with pictures related to chocolate.

Over 2 million pictures of chocolate itself, Flickr has proven to have a large database of pictures with many users.

3. Tweets

Twitter as commonly known by anyone who is tech & socially savvy, is the social networking site where users can post 140 characters about anything and everything (which is also known as tweets), and share photos in it too. This is a good way of getting to know the trending topics that people are talking about, what others are talking about a particular interest you share and share that “connected-ness” of not being the only one feeling a particular way about something.

A screenshot of search results of ‘chocolate’. Within the short time (probably just a couple of minutes), between the results page appeared and when this screenshot was taken, there were 20 new tweets about chocolate. This shows that it is mentioned quite often, hence there will not be a slow update/lack of new tweets about chocolate whenever users visit Death of Chocolate.

Using these data sources, I believe my mashup site will meet 4 out of the 6 criteria I pointed out in the first part of the assignment, namely:

1. Interaction & Connectivity: through the Twitter feed & Flickr pictures- these are all user-generated content.

2. Compatibility: The mashup site will be done to meet web standards and that it will be able to work in different web browsers.

3. User-experience & usability: Using a simple three-column layout helps to group different types of data such that it is easy to navigate and search for something that the user wants. Also, as it is a mashup site, it is supposed to make life easier for the user by combining more than two sources of data into one interface.

5. Consistency in design: The use of the same fonts, headers and colour scheme will be the same for the whole site, creating uniformity despite drawing the data from different sources.

Wireframes

Wed, 04 Apr 2012 19:15:00 +1000

I came up with 4 wireframes as shown below:

The final wireframe selected is Wireframe 1. I liked that the simple 3 column allows the user to see the three functions/areas at the first glance.

Use Case Scenario

Wed, 04 Apr 2012 16:10:00 +1000

The use-case scenario for Death by Chocolate. It is a very straightforward approach where users go to the mashup website, and get data in the form of recipes, pictures and tweets.

Mashup Case studies

Wed, 04 Apr 2012 14:45:00 +1000

Many of the mashup sites that I came across had these in common- Pictures & Twitter, hence that influenced what consists in my mashup as it has proven that these are what people want.

1. Portwiture

Portwiture draws in data from Twitter & Flickr. First, the user types in a Twitter

username..

Images from Flickr will appear based on keywords which the Tweeter has been using recently. The use of thumbnails gives the user a visual representation of the tweets in a glance.

2. LOLWRUS

LOLWRUS is a just-for-fun site where users can match their tweets with LOLcat pictures, which are basically, funny pictures of animals. Users can also vote for others’ submission, or retweet the pictures.

3. CelebrityTweet

CelebrityTweet is the ultimate stalker mashup site for fans of celebrities. Users can view the latest celebrity tweets, find celebrity twitter accounts to follow, and it even shows stats on how many tweets there are in a day and week.

The site also ranks the celebrities based on how many times they tweet in a day.

Brainstorming for a mashup idea- stuff that I love! :)

Wed, 04 Apr 2012 14:43:00 +1000

Brainstorming for a mashup idea- stuff that I love! :)

Mashup Idea: Death by Chocolate

Wed, 04 Apr 2012 14:42:00 +1000

Chocolate.. who doesn’t love chocolate?

As I walked down Woolies and looked at the huge range of easter eggs & bunny chocolates (which is to my amusement, such a HUGE thing in Western culture, cos we don’t do that in Singapore), that sparked my inspiration for my mashup- that delicious rich, brown, sweet treat that makes many people go weak in their knees.

I love baking and often, when I have to search for a recipe, I usually have to go to my favourite food blogs (3-5 of them) and search through tons of recipes to look for one that I am really interested in. Hence, I decided to mashup up 3 of these blogs, together with pictures and social media. I want to make an interface that integrates data to make life easier for the users (who are chocolate lovers), and with the social media aspect added, it connects people because of the common interest they share- chocolate. More detailed information in upcoming posts!

Using PHP

Wed, 04 Apr 2012 14:32:00 +1000

I’ve always had a phobia with PHP ever since being bombarded with and having to use it for the first assignment in Advanced Web Design.. I still don’t like it but at least I understood it a little better in last week’s tutorial. I’ve screenshot Cassie’s PHP example because mine couldn’t work, and I still can’t figure out what is wrong with it..

Notes:

1. // are used to type in comments while using PHP

2. Echo- used to make things appear in HTML:
<?php
echo “Hello world!”;
?>

3. Using Variables

<?php
 //declare a variable
 $unitCode = ‘KIB204’;

 //use that variable! echo it to the page:
 echo $unitCode;

 //NOTE: Variables always start with a $

 ?>

The unit code is <?php echo $unitCode ?>!

—
<?php
 //you can write lines of text and include variables,
 //they will be displayed by the page as the correct value!
 echo “I can even echo out text like this. By the way, the unit code is $unitCode.”;

—

//how about some different kinds of variables!

<?php
 $sandwichPrice = 5.40;
 $drinkPrice = 1.50;

 //you can perform maths on variables, like so:
 $totalPrice = $sandwichPrice + $drinkPrice;

 echo “A sandwich costs $$sandwichPrice and a drink costs $$drinkPrice.
 All together that’s $$totalPrice.”;

—

//You can even “do maths” on words…

<?php
 $unitPrefix = “KIB”;
 $unitSuffix = “456”;

 //the . means ‘concatenate’ - add two strings of text together
 $newUnit = $unitPrefix . $unitSuffix;

 echo “$newUnit”;

Found this link on Cassie’s tumblr and had a go! My...

Sun, 01 Apr 2012 00:01:52 +1000

Found this link on Cassie’s tumblr and had a go! My Marketing lecturer used to talk about how exciting data was but I never believed her.. but interface design makes it so yummy and easy to digest all these information!

Styling a Yahoo! Pipes website

Sat, 31 Mar 2012 13:26:00 +1000

Yahoo! Pipes has a fixed height for the divs which cannot be changed by setting the height for the video results unless this is used- e.g. #videos>div

Use !important to priortise a particular style

To get rid of something using CSS, use: display:none;

What is a mashup?

Sat, 31 Mar 2012 12:01:18 +1000

“… a mashup is a Web page or application that uses and combines data, presentation or functionality from two or more sources to create new services. The term implies easy, fast integration, frequently using open APIs and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data.”

Definition from Wikipedia

What I already have known about mashups from the past 5 weeks of KIB204, but nevertheless still a good reminder as I think about what I want to do my my mashup idea..

Visualizing Data Helps Charities Get Attention

Sat, 31 Mar 2012 11:50:44 +1000

Visualizing Data Helps Charities Get Attention:

A good and timely article a friend shared on Facebook- how knowledge transfer is done in an easier way through the visualisation of data. Just what we learnt in lecture this week.. sweeet!

Initial Analysis Poster A downloadable version of the poster is...

Wed, 21 Mar 2012 09:24:00 +1000

Initial Analysis Poster

A downloadable version of the poster is available here

Example 3: Rachael Yamagata

Wed, 21 Mar 2012 07:46:00 +1000

rachaelyamagata.com, as it speaks for itself, is the official website for Rachael Yamagata, a American singer-songwriter.

The target audience for the site would mainly be her fans, who would go to the website to find out more about her and her music. The site also offers a platform to showcase some of her photos from her life and her music videos, and updates fans about upcoming tour dates and album releases.

________________________________________________________

How does Rachael Yamagata’s website fit my criteria then?

1. Interaction & Connectivity

Her website contains a live twitter feed, which makes it convenient as site visitors can view her tweets without having to go to Twitter.

That said, there are still links to her social media- Facebook group, Youtube channel and Twitter account, which makes it easy if anyone wants to follow her on Twitter, or be part of her Facebook group.

In her blog, there are also easy share buttons for her fans who want to share news about her on more than 300 social media sites.

2. Compatibility

The websiteworks well on different browsers as shown:

As viewed on an iPod/iPhone:

As viewed on a Blackberry device:

Even though it looks fine on the mobile device in terms of alignment, it does not have a mobile web version of it that makes it easier to use on a mobile device (i.e bigger navigation buttons, less images, etc) However, this might be alright since people usually wanna read more about an artiste in detail, check out about his/her news and watch videos and that would be hard to read if it were to be done on a mobile device.

(A check of a few other artistes’ website on my phone shows that they also do not have a mobile web version of their websites)

3. User-experience and usability

The user experience is enhanced as one can listen to Rachael Yamagata’s songs as he/she browses through the website. However, this is not intrusive as it only plays when you click on it, which is great when one is visiting the website in a place where music from a website can be awkward (e.g. the library). This function is also good for those who wants to listen to her music, without having to go to Youtube or another websites to do so.

The website is easy to navigate, with its easy navigation bar- what you click is what you get. It is relatively simple, with a good amount of white space in between different kinds of information.

4. Consistency in design

The handwritten font in the navigation buttons and headers gives it a tighter consistent look throughout the website. Other than that, a blue and green colour palette can be seen through different elements- the logo, headings and the pictures of her.

To add on, the header and navigation bar is present in most pages in the website, and users can return to the homepage easily by clicking on the header.

5. E-commerce

Rachael Yamagata also has the e-commerce element in her website with a store selling some of her merchandise.