JQuery Implementation

Within the results of the Photoshop design mock-up students requested a drop down login form in order to reduce the amount of information displayed on the header section. The image below displays the design of the homepage top bar so far, as you can see if have displayed the word login instead of username and password. This reduces the amount of text on the design therefore making it more appealing. I am aware that although students can figure out the word login would be a link to the login page it is not the best method. 

Arrows within interfaces are a useful tool in identify drop down lists therefore I implemented one next to the Login header. This will enable students to identify that once they click on the link a drop down will appear allowing them to enter their login details. 

Here is the CSS code for the arrow:

HTML Result:

After designing this mock-up I decided that the most effective way of creating a login drop down was using JQuery. Here I looked at various samples online to see what kind of design I was after and methods of displaying the information. I used the website as a sample tool for creating my login section:

http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/

Using the sample as a guideline I started altering the code to suit my project although I did experience some errors and the need to problem solve.

Login Form Transformation

The samples design did not suit my project therefore I need to alter it in order to match the rest of my design.I decided to remove any drop shadows on the text and keep it looking simple with the use of solid colours. I decided to stick with the dark blue from the footer in order to display a different colour next to the bright blue found within the header.

The input text will appear as normal to the user regarding the email section, I have implemented security within the password where input text will appear anonymous. As you can see I have kept the arrow next to the login as it is an effective method to represent a drop down menu. 

The login box will appear similar to the one displayed below, the box will overlap any content within the body instead of being directed onto another page. 

The image below is an example of what the content will look like when the user inserts their details.

Creating the Database Tables

Before developing any php code I went ahead and started building the first 3 database tables (user, subfolder and file). The permissions table will be added further on once all the other tables and queries are functional. I created my own database in phpmyadmin in order to place all the content (i.e. tables) within it.

conninfo.php

jointables.php
The jointables page is meant to connect the tables and retrieve the data from each user, the code developed below will attempt to do so although I will need to test it. 

User Table




Subfolder Table 

File Table

HTML Design Continuation

Due to the servers at Uni not working I will continue with the design process in order to not fall behind on the target schedule.

I have been experimenting with various designs and methods of displaying the content effectively. I used the design mockups and results from the students feedback in order to apply it to the design. Below are some examples:

Homepage

Footer

HTML Design Startup

Now that the christmas holidays are over it is time to take all my research and apply it to building and developing the project. As I am home for several more days I will not be able to work on the server functionality this week as I cannot access the university server system because of this I decided to work on some of the html coding instead. Regarding the design I need to follow and produce a design that reflects the photoshop mockup chosen by my target audience. During the process of designing I have acknowledged that changes will be made throughout the course of the term due to significant factors. 

HTML Designs
I started designing the homepage of the website here I used the prototype as a basis below are screen captures of different ideas I have experimented with. I first started with white coloured font to see if it displays clearer than the black in the mock up. Comparing both of the images below the white seems off balanced as it contrasts with the black text of the logo therefore I altered the font colour and experiment with a lighter shade of blue. A way for the white font to work is if I change the font colour of the logo to white but this will need further user testing. 

As you can see from the images the colour blue from the logo does not combine well with the background of the header therefore some alterations will need to be made. In order to do so I will experiment and produce several screen shots that I will test on monday on my target audience. I do predict the possibility that students will prefer the logo's colour to be changed instead of the header as the photoshop mockup user testing results showed that blue colour combination was the most popular.