Research
We researched about Univeral Design and Universal Experience. We
learned that the best experience is delivered on a website through
a clear, visible and comprehendable webpage, regardless of the
user's ability, disability, age or size and other characteristics.
Surely, users would like to use a visually pleasing and
comprehensible product. We also learned that we need consistency
on our webpage. If huge differences are made between webpages, it
is not easily understandable and is probably frustrating for the
user. We think the most important aspect is that the user feels in
charge and comfortable.
Application of this universal design principles minimizes the need
for assistive technology.It creates products, systems, and
environments to be as usable as possible by as many people as
possible irrespective of external factors.
Response to the Brief
Our project was envisaged for users who would like to get a brief
outline of information of the European Union country that they
would like to visit. Therefore, our target audience are people who
like to travel frequently and would like to know quick information
like the capital city, the cheapest flight fare and the cheapest
hotel cost in the journey. We came up with several ideas to begin
with for example ;
A restaurant website -- This idea was the first
proposed idea. We wanted to book an available time for a
particular day. The reservation could only be made for the next
day. We had also planned to give frequent customers a discount in
order to gain their loyalty. The users had to first create an
account, which would give them their unique ID. Upon visiting the
website, if their details and password were entered correcty, the
would be able to retrieve their ID and book a reservation.
However, when we were planning out the code, we discovered that we
had to cross-reference the time that the user had inputed with the
available times first before the user could book the reservation.
This was not possible because we had yet to learn how to do this.
We also had to open an account for several users. Our second table
would have to have the user's unique ID, (the relation), and the
third task was to link the tables and then count the number of
reservations a user had.
We thought that this was a mammoth task to do considering the time
frame and limited knowledge that we had. We eliminated this idea
as a result, with reluctance.
Travel wish list--We delved into the tourism
sector with this idea. We wanted the users to rank the top ten
countries on their bucket list. We would then display the
countries that the user wanted to visit that correalted with the
general public's opinion.
Albeit this idea seemed practical, we figured out that there was
nothing to relate to, which was one of the learning outcomes. The
only this that we could possible do was to store the data, and
cross-check it with the existing table of the public's opinion,
that too which we did not have an understanding of. As a result,
this idea was abandoned.
Travelling guide-- This is the idea we finally
settled on after much deliberation. We researched our ideas for
the first three days and only after that were we able to settle on
this project. We had initially decided to have a travel guide of
all the countries, but upon realising that we did not know how to
add external information into the database and that we had to type
out information on all 196 countries of the world, we narrowed it
down to the countries in the EU currently.
Final artefact in operation
Click here to view the full project code
We were able to create a fully functional website that allows the
user to input any country in the EU and recieve the capital of the
country, how much the cheapest flight ticket costs and how much
the cheapest hotel costs per night. In order to do this we created
a relational database to link the country table and the
information table so that the user can receive the information
from the server.
HTML-- The HTML is displayed to the user. The
question is posed to the user here and the submit button is also
located here. The information is displayed here aswell. The
specific instructions to run own code is is also here, displayed
to the user.
Client Side Javascript--The client side
javascript is what happens to the information when the user clicks
the submit button. The relevent data is requested from the
database and displayed back to the user in a list. When the button
is clicked a message displaying "Search Complete" is also shown
and the information is displayed.
Server Side Javascript-- The server side
javascript listens for the submit button being clicked. Up hearing
the click, the information that the user entered is used to the
database. It then queries the database for the facts about the
country. These facts are then stored under the values:
country.countryID and country.country_name.
The database--
The country table with list of EU countries and the
information table with the information of the countries are linked
by the primary key countryID in the country table and
using the foreign key countryID in the info table. These are manually
inputted into the database. The headings in this
table is country.countryID and country.country_name.
The info table which is created in the database has the headings of
info.infoID, info.infoCapital,infoAmount,info.infoFact and info.country,
which is the relational key in this table.
Specific instructions--The following things have
to be taken into consideration before operating our code:
-The first letter of the country has to be capital.
-No abbreviations or alternatives should be entered for "United
Kingdom"
-The Netherlands should be only inputed as "Netherlands".
-There should not be a black space after the last letter of the
country.
HTML code
Website page
Client side javascript code
Server side javascript code
Create country table in database
Insert information into country table in database
Create info table in database
Insert information into info table in database
Create a new table combining information
Design
In order to customise our webpage, we used CSS to add a light blue
boarder to our header. We had initially discued that own colour
theme would be blue as the colour of the EU is blue. We created a
simple but aesthetic design to suit the theme of our website. We
made sure that the colours complimented each other and not to
overcomplicate the design of the page. We customised the font,
headings, headder and the button of the webpage.
We used up the first three days in order to discuss and develop our idea.
We planned on what would be in the table and what the relational key would be.
We began by coming up with a variety of ideas to meet the task
before settling on one. Once we decided to create a travel
website, we broke up the team. Alex researched all the countries
and their relevant data for the database. Neha and Nayana began
working on the HTML. Fatimah worked on the CSS and formatting of both
the report and website.
Then, Neha and Nayana began working on the javascript. We began
using a sample code as a foundation and moulding to the purpose of
our website. We ran into some difficulty with the client-side
javascript. We were unsure if we wanted our search to save into a table
in the database in order to retrieve information. However, we
decided we didn't and manipulated the code accordingly.
It took us a considerable amount of time, with all of us working and the help of our teacher
to successfully make the server side javascript work. Alex and Fatimah combined their efforts with
Neha and Nayana in helping to add in information into the database. Eventually, we finished
the code and the report in time for the deadline by working strongly together as a team.
Our Development
We identified that there is a pattern to be followed with code
that uses a user-inputted value, links two tables and retrieves
the relevent information. We used this to our advantage and manipulated
our code in order to suit our variable names and needs. This way, we addressed
abstraction.
We realised even before writing the code how valuable and needful data was
to our project. In order to collect the data on the relevent countries, we compiled
the data onto one page which can be viewed here.
Though we did not use hardware in this project, we did learn the uses of
communication between server side javascript and client side javascript. We realised that variables
had to be the same so the effect communication could be done between parts of code.
We think that our design was the best way of approach for the completion of this task. We
believe that this programme would be used the initially planning stages of a
trip as it gives the user an approximate cost reality check.
Reflection
We were asked to design an interactive website where we must
retrieve information from a relational database and give it to the
user appropriately.
Our webiste asks the users to input a country, the country and
relevant data are retrieved from the database and displayed to the
user.We planned and found a solution to our task before
implimentation.
We worked effieciently as a team. Everybody met the task they were
assigned to the best of their ability. Our final artefact turned
out as we had hoped. We were all challenged by our individual
tasks but helped each other out if we were struggling. Our biggest challenge was
connecting the two tables in the database i.e. the server side
javascript. We got help on how to use the foreign key and primary key
from our teacher aswell.
Further Development
Perhaps if we had longer to work on this project, we would like to
have the facility for the user to look up the country or the city. In
that case we could have more details about one specific country
which would be more useful to the user.
We would have also liked to
alter the code in order to display the flag of the country as well
as the information mentioned.
Due to our limitation in knowledge,
we had to ask the user to perform certain tasks in order for the code
to work. If possible, we would have avoided this altogether for a more pleasent
user experiance.
We would have also used an already existing information table
to display to the user instead of having to type up all the information in the
database.