THE WEBSITE SO FAR

Here is screenshots of the website, we’ve created so far. I’ve used the bootstrap template as my other group members will be focusing on the design and layout of the page. So far, i’ve made the website be able to navigate through the homepage, the about page, the profile page, find a match page and logout.

index.php
Screen Shot 2015-04-14 at 18.17.02

about.php

Screen Shot 2015-04-14 at 18.17.05

profile.php

Screen Shot 2015-04-14 at 18.17.08

match.php
Screen Shot 2015-04-14 at 18.17.11

The navigation of the website is now all currently working.

Heres a short video navigating through the current website project:

The next step is to make the website functional by:

  • connecting the sign-up form to the database so the user information is stored
  • being able to sign in after signing up and then directed to the profile page
  • only being able to view profile.php, match.php and the logout button after signing in
  • profile.php needs to show the signed in users information
  • fetch matches by searching through the database on match.php

Using Bootstrap for the ‘About Us’ php page

We have been set the task to create a ‘Meet the team’ or ‘About Us’ page that includes an description of each group member and myself. Along with an explanation of the website we have agreed as a group to make. In a workshop with our workshop teacher Kyle, he suggested to use a website called Bootstrap.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap essentially provides you with a template to build a functioning website, by downloading the source code (Source Less, JavaScript, and font files, along with our docs), download bootstrap (Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included).

Screen Shot 2015-03-23 at 01.41.15 Screen Shot 2015-03-23 at 02.19.28

For the ‘About Us’ webpage, we decided to use the ‘jumbotron’ template as it has a clear navigation and a user friendly approach. As seen below:

Screen Shot 2015-03-23 at 02.24.24

From here, I placed all the downloaded bootstrap files into the local host/public/includes/css folder then opened it in brackets ( A modern, open source text editor). I then experimented and edited the code to suit the requirements of our webpage. I haven’t targeted my focus directly to the CSS and design of the webpage, as my other group members are more keen to design the website.

For the ‘About Us’ webpage I included 3 images using an id as they all include the same design requirements and made a few adjustments to the css of the page so it wasn’t an exact replica of the bootstrap template. Below is the result:

Screen Shot 2015-04-14 at 18.17.05

References:

Getbootsrap.com, 2015. Getting started. Available from: http://getbootstrap.com/getting-started/#examples [Accessed:27/02/2015]

Getbootsrap.com, 2015. Bootstrap. Available from: http://getbootstrap.com/ [Accessed:27/02/2015]

WIREFRAME OF ABOUT US PAGE & SITEMAP

We were asked to do sketches of the about us page that I will be creating. Therefore, Callum and I sketched out the following wireframes of the about us page. Each sketch of the page included:

  • TITLE/LOGO
  • NAV BAR
  • IMAGES OF GROUP MEMBERS
  • BIOGRAPHY OF GROUP MEMBERS
  • LOG IN BUTTON
  • SIGN UP BUTTON
  • LOG OUT BUTTON
  • LINKS TO SOCIAL MEDIA SITES
  • FOOTER
  • HEADER

The sketches our below:

FullSizeRender-2

FullSizeRender-3

FullSizeRender-1We also sketched the sitemap of how the website would navigate for a logged in user and logged out user, the sketch is below:

FullSizeRender-4

Deciding on a name and colour scheme

As we are creating a Bournemouth University Dating website, we need to draft website name ideas that follow a university theme. We agreed as a group that we shouldn’t have a image-logo but instead be recognisable by the name of the website, the font we use and, the colour theme we select.

We drafted three website name ideas of:

BUsingles – Bournemouth University Singles

uniDate – University Date

You&I – You and I (UNI)

They all relate to the theme of university and are short and are self explanatory in the sense that they link to dating. The negatives of uniDate and You&I are that they aren’t subjective to Bournemouth University. However, I like You&I as it comes from the abbreviation UNI though some users may not instantly recognise this link and think that it’s a dating website for all occupations. Similarly the website name uniDate doesn’t strictly apply to Bournemouth University, and could be misinterpreted as for all universities. Whereas, BUsingles does relate to Bournemouth University and a dating website.

Therefore as we outweighed the positive and negatives of each website name, we concluded that BUsingles was the best option for our website.


Our next task is to decide on the colour scheme as a group. Whether we want to follow the same scheme as Bournemouth University of Black, Pink and Orange. Or whether we want to use our own colour scheme. The dating websites we researched use a green and blue colour scheme for the sign-in box and a pink and blue colour scheme to represent women and men.

The images below show the colour scheme of black, pink and, orange used by Bournemouth University:

Screen Shot 2015-04-14 at 12.08.14 Screen Shot 2015-04-14 at 12.07.57 The images below show the colour scheme of blue and green used on the sign-up forms from the dating websites: Match.com and Lovestruck.com:

Screen Shot 2015-04-14 at 12.11.37 Screen Shot 2015-04-14 at 12.11.58

My group members Callum and Michael will decide on the colour scheme and logo for our website as I am focusing on the functionality of the website.

References:

match.com, 2015. Available from: http://uk.match.com/signup/smart_landing_v2.phsl?tpl=20140616landing_registration_affiliate [Accessed 22/02/2015]

lovestruck.com, 2015. Available from: http://www.lovestruck.com/london/?utm_source=afu&utm_medium=affiliate&utm_campaign=skimlinks?utm_source=afu&utm_medium=affiliate [Accessed 22/02/2015]

mybu.bourenmouth.ac.uk, 2015. Available from: https://mybu.bournemouth.ac.uk/webapps/portal/execute/tabs/tabAction?tab_tab_group_id=_1_1 [Accessed:]

bournemouth.ac.uk, 2015. Available from: https://www1.bournemouth.ac.uk/ [Accessed:]

HTML & CSS – Positioning

Screen Shot 2015-03-03 at 22.27.43

In the lecture with Phil we learnt how a user experience is built out of the following layers:

Surface – this describes finished visual design aspects

Skeleton – this describes the screen layout and functional compartments in the screen

Structure – this defines navigation from place to place in the user interface

Scope – the places in the user interface are built to support user task-centric scope

Strategy – business goals drive user constituencies and contexts supported to form strategy
Screen Shot 2015-03-03 at 16.13.49

In our last lecture and workshop on HTML & CSS we began learning about positioning, and were set the task of producing the web browser above. Below is my outcome of the task and a screenshot of the CSS used:

Screen Shot 2015-03-03 at 16.51.25 Screen Shot 2015-03-03 at 16.51.35 Screen Shot 2015-03-03 at 17.40.24

PHPMYADMIN – Introduction and Creating tables

We have been introduced to a software tool written in PHP called, phpMyAdmin which supports MySQL for managing databases through a web browser.

We were given a phpMyAdmin username and password to login.

Screen Shot 2015-04-13 at 15.24.21

We were shown by our programmer lecturer how to create tables in phpMyAdmin to create the tables we drafted in our Entity Relationship Diagram and put them on the database.

Screen Shot 2015-04-13 at 16.16.49

Below is a screenshot of the template for creating a new table on phpMyadmin. The table includes fields for the

  • Table Name (i.e. USERS, MEMBERS)
  • Field Name (i.e. member_id, member_username, member_password)
  • Data type (i.e. INT, VARCHAR, TEXT, DATE)
  • Length/Values (how long the data can be)
  • Index (this is set to unique when using an ID data field)
  • Auto Increment (allows a unique number to be generated when a new record is inserted into a table)

Screen Shot 2015-04-13 at 15.30.23

Below is an example of a MEMBERS table, with a unique members_id that is auto incremented.

Screen Shot 2015-04-13 at 15.33.09

References:

phpmyadmin.net, 2015. Bringing MySQL to the web. Available from: http://www.phpmyadmin.net/home_page/index.php [Accessed: 24/02/2015]

The structure of my blog

We have been asked to do a blog post explaining the structure of our web blog, and why we think this is the best way to present our work.

Text:

The text I use for my blog is the default font text set by the theme I chose in wordpress. I haven’t changed it one because you have to be a premium member and, two because the font is clear. I also haven’t changed the colours of the default font colour as I like the different shades of black for the fonts as it’s simple but still effective.

Images & Video:

For any images I upload, I make them have a centre alignment and I change the width of the media file to be 693px as this is a similar width to the width of the text. I did this so it looks organised and neat.

Categories & tags:

For any categories that I add, they relate to the unit that I am currently studying. Hence this one will have the Category: Design for Digital Media Environments.

For any tags that I add, they will be tags that are mentioned in the blog. For instance when I mention PHP code or CSS… PHP and CSS will be tagged.