Final To-do List!

Today I have written my final to-do list! The list involves minor changes to the css, in terms of changing the colour of a links, ensuring widths of containers are exactly the same, creating scrollbars etc. Other tasks that I intend to complete by the end of next week involve any debugging of the site, as well as validation and security. I have recently emailed my tutor asking if he can attempt to hack my website (without breaking it!) so that if there are any improvements I can make I can ensure these have been implemented before the final deadline. One additional feature I intend to add to Media Link is a small pop up message that prompts a new user to complete their profile. During user testing I observed the activity carried out after the sign up process and noticed that the user immediately selected the explore button, to which they could then potentially come across their incomplete profile with no work uploaded, or profile picture or biography. Consequently, I thought it would be a good idea to include a pop up box next to the edit profile button displaying the message ‘Remember to complete your profile!’. After these tasks are completed I will then need to screen record the website in use showing off all its functionality and add the recording into my final presentation!

Advertisements
Posted in Progress Update | Leave a comment

‘Setting Featured Work’ Function

<?php
session_start();

if(!isset($_SESSION[‘session’])){ //if login in session is not set
header(“Location: indexpage.php”);
}
require_once(‘homestart.php’);
require_once(‘connectpage.php’);

$userid = $_GET[‘userid’];

if(count($_POST[‘featured’]) <= 3){
$query = “UPDATE files set featuredwork = 0 where USERID = ‘$userid'”;
mysqli_query($db_server, $query);
foreach($_POST[‘featured’] as $selected){
$query1 = “UPDATE files set featuredwork = 1 where id=’$selected'”;
$result = mysqli_query($db_server, $query1);

}
if (!$result) {
echo “Unable to update database”;
} else {
echo “<div id=’successfeatured’>
Successfully set featured work! Click <a href=’profilepage.php?user=$myprofile’>here</a> to go to your profile!
</div>”;
}

}else{
echo “Please select only 3 featured items”;
}

?>

I have been working on this feature for quite some time now and had approached the coding several different ways before finally being successful in the end result.

By enabling the user to set up to three featured pieces of work, their work can be viewed instantly on their mini profile. Originally I had tried creating separate buttons to enable a user to set any file to be ‘featured’, however once setting three pieces of work, if a user wanted to change or update this, the functionality would fail due to the query I had written.

I decided to use check boxes instead so that a user on return to the edit profile page can see which files are selected as their featured work. In addition to this I felt that a tick box improves the user intuition aspect to the website which I had previously spoke about with my supervisor in the week when discussing areas for improvement.

The explanation of the code is as follows:

If the array is counted and the number is more than three, then it should not insert as featured work, and it will keep the file set to ‘o’. For each file is that selected to be a ‘featured file’ update its value to ‘1’. If this query result is false, print out “Unable to update database”, otherwise, print the div “successfeatured” which “Successfully set featured work! Click here to go to my profile”, or alternatively print an error which states that the user has selected more than three featured pieces of work!

Posted in Code | Leave a comment

Supervisor Meeting

Today I met with my supervisor to discuss the progress I had made over Easter. I asked my supervisor to navigate round the site naturally and I observed his actions or if there was any confusion with regard to certain selections etc. My tutors initial reaction was that the site was looking really good and that I had made some good progress on the functionality itself and the brand image was coming along nicely. Whilst observing I noticed some confusion as to what graphics or text were hyperlinks or not. Some images, such as the featured work images on the mini profiles, were clicked with the expectation that this might appear larger. The same instance was apparent when attempting to access the full profile where the name of the user was selected however I hadn’t made this a hyperlink, only had I made the profile picture a link.

The overall response was a positive one with some slight adaptations to make to improve the user experience and user intuition. Below are annotated screenshots whereby the user expected some content to be hyperlinks. In addition to this, there was confusion as to whether some pages were scrollable or not (as annotated in the first screenshot). From this feedback I intend to make the additional hyperlinks and attempt to ensure that each scroll bar is visible to the user.

userintution2

userintution3

userintutition

Posted in Supervisor Meeting | Leave a comment

Critical Evaluation and Reflection

In this blog post I will critically evaluate the strengths and weaknesses of MEDIA LINK and critically reflect upon the decisions I have made throughout the year.

The majority of my intentions for MEDIA LINK have been fulfilled, however not surprisingly, there have been some changes and sacrifices I have had to make along the way. Firstly, I am disappointed that I wasn’t able to make my website mobile friendly. I experienced several issues in terms of CSS with the desktop platform that I wasn’t able to create another adaptive CSS file for smaller screen sizes. This wasn’t a necessity of my project, however I feel that it would have strengthened the project’s commercialism purely because a large amount of internet use is now carried out on a mobile device. Having said this, the purpose of my site is for freelancers to gain connections and showcase their work. Typically, the uploading of files such as PDF’s or GIF’s is carried out on a laptop or computer, consequently the mobile friendly aspect to the website is not a crucial element, instead, is a future development.

Another feature I wasn’t able to implement was the Live Chat feature. This was incredibly complex and essentially was an important part of my website with regard to making connections. The Live Chat functionality required AJAX to enable ‘live’ messaging. Last year, I had attempted using AJAX to create a live feed but experienced several problems which caused it to be unreliable. I was keen for this instant connection to be a part of my website, however to create an external window connecting two users together via the live chat and whats more- saving all the messages between a user, was too advanced for me. In an attempt to ensure a user is able to connect or contact another user they can display their email on their profile, as well as their personal website.

In hindsight, another weakness was that I should have perhaps pursued using the Foundation framework. I started using Foundation at the start of the project because I was told that it would assist with various aesthetics such as pop up boxes/modals and automatically enabled responsive design. This was correct, but I hadn’t anticipated the knowledge required when adding additional code. Several parts of the Foundation CSS styling overrode my own styling which became extremely frustrating when trying to adapt any visual elements. Some of my fellow students used frameworks  and it presents a more modern design and I feel that I should of taken more time to get to grips with the grid system as this would of helped improve some parts of the design of my website.

Despite these weaknesses I can confidently state that MEDIA LINK has several strengths. I am pleased with the random nature of the website. Initially, I was apprehensive as to whether users would find this method of discovery frustrating, however I have received positive feedback from user testing which is a strong indicator that the feature is useful to those wishing to gain inspiration and expand their connections across the media sector as a whole.

I feel that the concept behind MEDIA LINK is an interesting and original one. Because the Media industry is experiencing a gradual convergence, (in devices, apps, and websites) MEDIA LINK provides fantastic platform for freelancers to crossover their connections into other areas of media expertise, as well as searching for inspiration and gain connections in their own media profession.

The supporting marketing campaign for MEDIA LINK further strengthens the concept of my site. The idea being that on the launch of the website I will distribute MEDIA LINK business cards that feature a QR code that a media freelancer will scan, navigating them to the sites sign up page, following this they can discover a media freelancer at random. The QR code is suitable for the random discovery because the individual is unaware of the link they will be presented with. Another great advantage to these cards is that are an enticing way to help increase the number of users of my website. The site is solely ‘user-driven’ therefore this was crucial and the QR cards have been a creative method of promotion to potentially achieve a substantial number of users.

With regard to the evaluations of my own decisions throughout the project, the most sensible decision I made was to remove the GPS feature of the site. The advice came from both my tutors who expressed their confusion of the purpose of MEDIA LINK. When presented with the homepage, both tutors explained that the site looked extremely similar to that of Google Maps. Of course, I had embedded Google Maps to the site, but this was to only act as a supporting visual to show the different media freelancers around the world. They reminded me that this wasn’t the original purpose of my site- the intention was for a user to showcase their work and gain connections. Without realizing, I had strayed completely from my primary focus, which potentially could have been detrimental to my project! By removing the map and all its functionality, it totally minimized any confusion with regard to the sites main purpose.

Over the course of the semester the overall look and feel of Media Link changed several times.

logged-in-screen

screen-shot-2015-01-02-at-00-18-20

Screen Shot 2015-04-20 at 11.12.58

The screenshots above are the three total redesigns I made. On reflection, the first design, although it was exciting and creative using a bright colour palette, it lacked in professionalism. The second design felt very corporate and had lost the creative/media theme. During feedback I was told that the background image of the light drew the attention away from the map graphic. My third and final design features a high res image of a horizon. I wanted to keep the design simple with the focal point on the copy of the website and the minimalistic look gives a contemporary modern feel.

Another practical decision I made was to disregard the pop up boxes I had created. Originally, the pop up boxes were appropriate because the content displayed behind was the map graphic which featured tags of the geographic locations of users. Since I had removed the map element the pop ups were no longer necessary- consequently I adapted each pop up to a simple container.

Finally, in a more general sense, my overall planning and organization of my project has been extremely accurate and I have therefore managed to keep to the schedule of my Gantt Chart. I have found several parts of my project extremely difficult, especially PHP and CSS elements. What I have found most difficult has been performing the role of both the programmer and the designer. The two roles are conflicting, consequently, on multiple occasions I have had to sacrifice one for the other. Despite the issues I have faced throughout the project, I am extremely glad that I selected a project which involved coding. I have challenged myself and feel that, slowly but surely, my coding knowledge is falling into place! Undertaking this project has confirmed to me that I wish to enter the developer/programmer industry and [hopefully] the launch of MEDIA LINK will be the ‘masterpiece’ of my portfolio!

Posted in Progress Update | Leave a comment

Feedback from Promotional QR code cards!

The cards you have designed look good. Just be careful not to mix alignment too much (the left-aligned ‘media link’ text looks strange when placed above centred content) and watch your visual alignment (it would look better if the foreground content didn’t overlap with the strong shape of the rock in the bottom-left corner).
With regards to how the cards might work, I really like your idea of the card offering one random connection! That’s really good. I appreciate your concerns regarding sign-ups but it’s fairly common practice for websites to offer a ‘teaser’ of the content and then request that the user signs up to engage with it. I know this would be more difficult to implement but maybe the user is shown a single random profile and then prompted to sign up if they wish to establish a link with them?


Above is the feedback I received from my tutor with regard to the promotion QR code cards I intend to create. The feedback has been really useful especially in terms of how the cards might work. The idea of immediately being faced with a random media freelancers profile will perhaps be a more practical, appealing one in comparison to a tedious sign up form that could potentially disengage individuals within seconds. This is something I will have to think about with regard to the functionality of the redirects.
Posted in Design, Progress Update, Supervisor Meeting | Leave a comment

Registering REAL users to my site

I am extremely pleased to announce that I have managed to get REAL media freelancers to sign up to my site which will improve the commercialism of my site. Below are some screenshots of the media freelancers that have signed up so far…

Screen Shot 2015-04-18 at 10.03.18 Screen Shot 2015-04-18 at 10.03.21 Screen Shot 2015-04-18 at 10.03.24 Screen Shot 2015-04-18 at 10.03.29

Although 4 users isn’t a substantial number at present, I aim to increase this number to 15 before the launch date. Essentially I would rather have 15 real users than 30 fake users!

Posted in Improvements | Leave a comment

No CAPTCHA reCAPTCHA

Recently I have implemented a Recaptcha box into my site, during the sign up page to protect my website against bots! When navigating to the Google Recaptcha page to register my site to use the Recaptcha API I noticed the Recaptcha box had been redesigned. The Recaptcha is now more advanced in its security and easier to use.

Screen Shot 2015-04-18 at 09.46.38

https://www.google.com/recaptcha/intro/index.html#

Posted in Code, Design, Improvements | Leave a comment