Pixels & Data @pixelsanddata-blog - Tumblr Blog

Posts

Screen grabs

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

#screen grabs #Death by chocolate

Death By Chocolate- The Final Mashup

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.

#The Final Mashup

Issues faced

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.

#mashup #yahoo pipes #issues

Improved Layout Mockups + Wireframe

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.

#Wireframes #Layouts

Post Poster Presentation

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.

#assignment 1 #feedback

Death of Chocolate: The Poster

A downloadable version of the poster is available here.

#poster #assignment 1 #death of chocolate

Design Resources & Process

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.

#assignment 1 #design process #design resources #mockups

Data sources

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.

#assignment 1 #data sources #mashup

Wireframes

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.

#wireframes #assignment 1

Use Case Scenario

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.

#use case scenario #assignment 1

Mashup Case studies

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.

#assignment 1 #mashup case studies

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

#assignment 1 #mash up idea

Mashup Idea: Death by Chocolate

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!

#Assignment 1 #mashup idea

Using PHP

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";

#PHP #tutorial 4

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!

#data visualisation #infographics

Styling a Yahoo! Pipes website

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;

#tutorial 3 #yahoo pipes #styling #CSS

What is a mashup?

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

#mashup #definition

Trending Blogs

Recently Viewed Blogs

Pixels & Data