Web Application Research

After some discussion, my group decided that we should base our web application on a travel website, allowing users to compare different holidays. As is required in the brief the users can sort the holidays (possibly by location or type of holiday) and will be able to refine their search using key words and filters.
There should also be an option for a user to add an entry, although I’m not 100% sure how it would work. At the minute I think this would be more effective as a user-based rating website, similar to something like tripadvisor, where a user could post an image and a description of a holiday they had been on, and other users could see this review of their holiday. This aspect of the project will need to be discussed more as a group to figure out the logistics of it but overall I think a travel website is a good, achievable project.

I began some initial research into similar websites, to get an idea of a good website structure. Here are three examples that I looked at:
Screen Shot 2015-03-09 at 18.11.39
First Choice – http://www.firstchoice.co.uk/
Screen Shot 2015-03-09 at 18.11.24
Direct Holidays – http://www.directholidays.co.uk/Screen Shot 2015-03-09 at 18.10.59Thomas Cook – https://ww2.thomascook.com/

Something I noticed with all three of these websites is that the search bar is easily seen straight away, positioned at the very top of the page so no scrolling is required to reach it. I also think that the Login/Register button being located at the top of the page is a good idea, as if a user had to scroll for ages to find it they would probably give up and use a different site. A simple layout with clear buttons is something these three websites all have, and is a key feature which I would like to incorporate into our web application.

Web Application Structure


I began sketching out some ideas for the layout of our web application. At this stage we’ve narrowed down what we’re doing to either a recipe sharing site, or a website about different holidays. Bearing this is mind I sketched out a couple of variations which could be applied to either idea. I think it’s important to have the header the full width of the page, with maybe a login option on it, and I like the idea of the information we’re showing being displayed as an image with writing beside it, as shown below.
page design
Basic web page structure ideas

This is just a very simple look at some possibilities for now, until we decide as a group which web application we will be creating, so then I can focus on making a more complex and relevant layout.

Structuring My Blog

In last weeks seminar we discussed the structure of a weblog; how it’s organised and the visual construction of it. A task was then set to create and implement a structure into our own weblogs.

The main things I will be changing are:

  • More tags to find posts more easily
  • Consistent image and video width of 500px across all images and videos on my blog
  • Begin writing my posts in HTML instead of Rich Text, to assist in the development of HTML skills and also give me more flexibility in creating my posts
  • Using bullet points instead of posting large chunks of text at once
  • Post more regularly – aiming for twice a week at least

Over the next few days I will be going back through my old posts to adjust the size of images within them and add tags where I think they’re needed, and hopefully this will give my blog more structure and a more professional feel.

Meeting My Group

This week we were put into the groups that we will be working in for this project,  and set the task of creating an about page in HTML and CSS, to introduce each member of the group.
My group consists of myself, Billy, and Banks. We met during a break in our timetable to get to know each other, and begin thinking about the bios. We decided to use github to share the code

Screen Shot 2015-02-17 at 12.58.34

I uploaded the first commit to Git, which consisted of basic html and css for our page, but had no real content in it.
Screen Shot 2015-03-02 at 13.34.41
Billy then took the code and edited it to be more personal for our group, before uploading it as a second commit to git.
Screen Shot 2015-03-02 at 14.46.36
Red lines indicate lines of code which were removed, and green indicates lines which are added.

I then took this code and played about with the css to make it more visually appealing, and uploaded it to my dakar server.
Screen Shot 2015-03-02 at 13.34.57
Each image shows our bios when hovered over, shown below.Screen Shot 2015-03-02 at 14.44.16
I am very pleased with the outcome of this page, as I think it looks quite good, and I learnt more about hover effects while making it. It also gave me the opportunity to get to know the members of my group better.

Entity Relationship Diagrams

In this weeks seminar we were introduced to Entity Relationship Modelling (ERM), a way of planning tables to be created and the relationships between them. This is a very important step in regards to creating a database, as it is important to plan ahead. If the tables were created without a plan, then many changes would have to be made to them, so planning ahead saves a lot of time in creating a database. ERM involves deciding on important entities, as well as what attributes each entity will hold. An entity is a distinct thing which has data stored about it, and an attribute is a piece of data about an entity.

For homework we were tasked with creating an ERM for a cookbook website, where recipe book contributors can store their personal data (relevant to a cookbook application), and where all contributors are optionally able to create 1 or many recipes. Within this each recipe has a title, contributor and description, as well as at least one photo, and each photo is accompanied by a description. Below you can see my entities (in capitals) each followed by the attributes I think each one should hold.

Screen Shot 2015-02-16 at 16.44.53
This is then converted into an ERM, showing the relationship between each entity in my database. The crows foot indicates many, whereas a single line indicates one, so for example each contributor can make many recipes, but each recipe can only be contributed by one person.

Screen Shot 2015-02-16 at 16.40.24

This is obviously a very simple ERM, as in a larger database it would be much more complex, with many more entities, but I believe this has solved the problem presented to us.

Participatory Culture

In this weeks lecture we were introduced to a new module, Design for Digital Media Environments. In relation to this, Rob introduced us to the idea of User Generated Content, abbreviated to UGC. As homework to help us contextualise this concept, we were asked to make a contribution to a community based UGC platform, such as OpenStreetMap, Wikibooks, or Zotero.

I chose to look into OpenStreetMap, as I felt I could contribute data to the map. Focusing on my hometown of Banbridge, I zoomed into the main street, to try and identify things that I knew, but which weren’t already on the map. I decided to add a cafe onto the map. It was very easy to do, I simply clicked on the ‘Point’ button and chose where to place it.

Screen Shot 2015-02-09 at 11.47.20

Then a window popped up for me to insert the information about the point, as shown below:

Screen Shot 2015-02-09 at 11.48.16

This gently introduced me to the simplicity of contributing to a UGC community, and also showed me just how useful they can be. Though the map is generated by thousands of users, it is constantly being updated and so shows a very up to date version of the map, one that may show even more detail than Google Maps, for example. The idea that I can contribute to it makes it feel more accessible, and makes me feel like I have earned my use of it.

Development and Realisation – Final Poster Adjustments

My poster is almost complete, so to finish it off I made some small adjustments to it.

The first image is an initial finished version of my poster, and the second is the final version which I will be submitting. I decided that the colours on the first one were too drab, and so nothing on the poster really stood out at first glance. Firstly, I changed the colours of my ‘tree’, to a lighter green and brown. I think this gave it more vibrance against the dark background. I also lightened the background colour, as I felt the initial background colour just wasn’t right for the poster. Finally I changed the colour of my text, so it would stand out more on the background. I also increased the length of the ‘trunk’ of my tree to make it look more like a tree, and so I had to adjust the scaling at the side. I think this makes better use of the available area on my poster, as there is less empty space towards the top. Overall I think my final poster looks much better, and that by changing the colours I used the entire poster looks more vibrant and visually appealing.