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

about.php

profile.php

match.php

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

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:

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:

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:

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

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:

 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:

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

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

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:

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.

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.

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)

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

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.

DATING WEBSITE RESEARCH

As we’ve decided as a group to create a dating website that connects to a MySQL database, I need to research other dating websites to see the basic necessities and view the wireframe of each website. I googled the top 4 dating websites/apps and the following results were returned:

Tinder

Tinder is a app on mobile’s and tablets, it involves connecting to your social media site: Facebook. From which you can choose your profile pictures, set an age you’re searching for, choose whether you’re looking for a man/woman/both. Then main functionality of Tinder is the swiping method (swipe right to match, swipe left to not match). If two people swipe right they get matched and are then able to send messages to each other through an IRC. Tinder’s logo is a small orange cartoon-like flame.

Match.com

Match.com came up as the number 1 dating website. The homepage includes a simple user interface with drop-down boxes in the sign-up form which is in the centre of the frame. It includes information on: Why Match.com? , Events , Our Site, Register Now and, Login through a parallax scrolling feature on the homepage. The background includes a Man and Women, that are suggested to be on a date.

eHarmonyeHarmony follows an almost identical wireframe to Match.com. It also has a parallax scrolling feature, when scrolling up it includes information about eharmony, success stories and, links to their social media. Along with this a background-image of a couple is also used, it has a log-in button at the top-right and a simple sign-up form on the left. eHarmony and Match.com both don’t use a image logo for their website, but just have a format for the text of the website.

Lovestruck.com

The fourth most popular dating website was Lovestruck.com, which again follows an almost identical layout to Match.com and eHarmony.com . A couple is used as the background-image, the login in button is at the top-right , parallax scrolling is used to navigate to the information of the website and, there is a simple drop-down sign-in box to the left of the page.

Our dating website

As a group we need to decide whether we want to follow a similar format to Match.com, eharmony.com and, lovestruck.com or if we want to use something unique like the swiping method used by tinder. Along with this we also need to draft ideas of the name of our dating website and whether we want to include a image-logo or have a unique font and think about the typography and colours we want to use.

References:

droid-life.com, 2015. Tinder Plus. Available from: http://www.droid-life.com/2015/02/02/tinder-plus-a-paid-version-of-the-popular-dating-app-coming-to-android-next-month/ [Accessed: 22/02/2015]

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

eharmony.com, 2015. Available from: http://www.eharmony.co.uk/?aid=78888&cid=53999 [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]

HTML & CSS – Typical Web Browser

During a lecture with Phil, we were shown the basic typical web page layout and were asked to create something similar. In the workshop I did struggle but towards the end I produced the result for the task. Below is my result and the code:

At the end of the workshop we were asked to create the below image using HTML & CSS for homework and to then post it onto our blog, so that will be my next HTML & CSS post.

Meeting my group members

For our Design for Digital Media Environments unit we have been put into groups of 3 to create functional bit of php talking to a mysql database. The website can be based on whatever we agree on. After our group meeting we quickly decided on making a University dating website as this would include a sign up page, profile page and a page to filter and search for a potential dating match.

We have been set the task to create a page in regular HTML5 CSS3 which will be used in the web app that we are creating together. We needed to get together and get a picture of all of us together along with a short biography and profile pictures.

Below is our group picture, which will be incorporated into the ‘About Us’ webpage:

After our group discussion, we decided that I was best suited to create the functionality of the website through using PHP and HTML code to connect to the database. My other group members, Callum and Michael agreed that they were both more suited on designing the website by using CSS and planning the wireframe and colour scheme.