KIB204

Web Interface Design - Geoffrey Kelly

0 notes

Mashup Submission

This is ‘Hungover’, my mashup submssion. ‘Hungover’ Is a website made for an 18-30 year old  target audience, built around the concept of entertaining and alleviating the pain of hangovers. The site contains feeds of information to help with hangovers, entertaining comedy videos to make users feel better, relaxing music to soothe their brain, posts and images of other sufferers so they don’t feel alone, a map to locate nearby bottle shops and bars in case they decide drinking more will help, and a searchable cocktail list to put their ingredients to use.

‘Hungover’ sources it’s data from ~Bing, ~Youtube, ~SoundCloud, ~Twitter, ~Flickr, ~Google Maps and ~Esquire (cocktail site), using mainly yahoo pipes and php coding.

Overall I am Quite happy with the result of my Mashup, I believe it reflects my original concept quite well and I think my styling efforts display a youthful vibe that relates to my target audience. However I have encountered some problems, which after consulting my tutor, still can’t be resolved. My completed site is fully functional when using the WAMP server, but after uploading it to the QUT server space, the main content page doesn’t display, instead being replaced by a white screen. As the problem is caused from the QUT server, I will most likely be unable to submit my assignment properly, so i have included a link to my project in a drop box file, a print screen of my site fully functioning, and will also send an email to Cassie including my project files. 

All other pages should work, (the link will send you to the welcome page) but the drinks page and the about page can only be accessed from the main content page, so here is the url’s to view them individually:

About Page=  https://student.ci.qut.edu.au/~n7549539/Kib204%20mashup/Project/mashup_about.php

Drinks Page=  https://student.ci.qut.edu.au/~n7549539/Kib204%20mashup/Project/mashup_search.php

0 notes

Inspiration

When developing my site, I didnt draw directly from any particular website, but bits and pieces from a few. I liked the concept of www.stumbleupon.com ,  where although the site itself doesn’t have much content, it delivers you to content from many other sources. on top of this, the content ur delivered to can be personalised to your interests, which made me focus on making my website tailored specifically so hungover people would appreciate it more then the average person.

I liked how other sites, such as www.bored.com and tumblr itself (and regrettably facebook, not that i’d usually admit to drawing inspiration from facebook..) delivers the user with heaps of entertaining content (although mostly games) on one scrolling page, so there isn’t an excessive amount of navigation, letting any old zombie be entertained with minimal effort (i believe hungover people are essentially zombies) which is why I restructured the layout of my website.

http://www.pophangover.com/ is another entertainment, however coincidentally has nothing to do with hangovers. It does however cater to a similiar age group than mine does, and it contains a seemingly endless supply of different photos and links to other websites, creating multiple data sources in the one site to keep people mindlessly entertained, which is partly what my site aims to do. I was also inspired by the background styling, being what an actual wall could look like, suggesting its more of a place than jsut a website, which is what i tried to replicate with my bricks :)

0 notes

Just in case things go wrong when being assessed, here is the main page in detail

Just in case things go wrong when being assessed, here is the main page in detail

0 notes

Youtube DX

i struggled with adding in youtube videos defined with the search “comedy”, which as it turn out was entirely pipe fault and i had been doing the right thing every time i tried -__-. i found this out when randomly without even working on videos, they happened to appear. but i am still having trouble with them showing up consistently, if they dont show, they are still there, yahoo pipes jut doesn’t care about my grade!

0 notes

Drinks!

I had been hoping if i had time to also add in a drinks search bar, considering i have already shown the user where they can buy the ingredients. I wasn’t sure how feasible it would be, until i found this excellent site full of different drinks and recipes, and it is neatly formatted so it will be easier to scrape :) at the moment i only have the info as a list on a separate page, but if i have time i will give the page a search bar so the user can search what drinks they can make with the ingredients they bought (vodka, gin etc), which will give more functionality and interaction to the page :)

0 notes

Xpath for the lose..

i had been struggling for way too long to try and scrape data from a page that contained information for hangovers, for my info section, so i finally changed my approach and am now happier with it :) instead of scraping data from one page (that wasn’t the most suitable for xpath) I used a yahoo pipe to to scrape a bing search for hangover cures and displayed all the results from that in my page, so the user would have a full list of different hangover info that they could navigate to on a different page, and as it was a live feed, the info would always be up to date! now i just need pipes to not stop working..

0 notes

Updated Wireframe
I completely changed the wireframing for my website, making the layout more uitable for a crolling page. content that would take up a larger space (info and videos) was put on the left in larger containers (which will have scroll bars). the smaller contents (music, twitter feed, image) were put on the right, to make it like a side bar of entertainmnent next to the main content. the google map was put on the bottom so it could have a wider screen space to display its map details 

Updated Wireframe

I completely changed the wireframing for my website, making the layout more uitable for a crolling page. content that would take up a larger space (info and videos) was put on the left in larger containers (which will have scroll bars). the smaller contents (music, twitter feed, image) were put on the right, to make it like a side bar of entertainmnent next to the main content. the google map was put on the bottom so it could have a wider screen space to display its map details