Final User Testing Image

usertesting

Image | Posted on by | Leave a comment

PDF files opening in Google Docs

Screen Shot 2015-05-10 at 13.27.12

Screen Shot 2015-05-10 at 13.27.23

Posted in Design | Leave a comment

Videos featured in Portfolio

Screen Shot 2015-05-10 at 13.09.41

Screen Shot 2015-05-10 at 13.09.30

Posted in Design | Leave a comment

Last Minute!

I submitted my project on Friday which I am extremely pleased about! However, on the Thursday the day before, I had realised my upload file button hadn’t yet been coded to enable the uploading of PDF and video files. This was an aspect I had completely forgotten about as initially I had just enabled the button for all image file types!

The most difficult part of this task was to display the video files after they had been uploaded. This required downloading various Lightbox files that were specific for video and in addition to this giving the preview box a ‘video style’ format:

if($extension == ‘mp4’){

echo ‘<video style=”background: #F3F3F3;width: 175px; height: 180px;border-radius:0px;” controls>
<source src=”files/’.$file_name.'” type=”video/mp4″>
Your browser does not support the video tag.
</video>
‘;
}

The above code, gives the preview box a height and a width as well as controls for the video such as play/pause and volume. By using the variable $file_name this is how the preview box knows what file to echo out.

A user can see the video in a larger view (via the lightbox) on the profile page:

if($extension == ‘mp4’){

echo ‘<a href=”files/’.$file_name.'” class=”html5lightbox”>
<video style=”background: #F3F3F3;width: 175px; height: 180px;border-radius:0px;” controls>
<source src=”files/’.$file_name.'” type=”video/mp4″>
Your browser does not support the video tag.
</video>
</a>’;
}

The above code is similar to that of the edit profile page. The difference here is the link to the class html 5 light box for video. This lightbox has the <a> link integrated inside that tell the lightbox to display the file that was uploaded using the $file_name variable. I had decided that the lightbox was only needed for the profile page and not the edit profile page too.

After I had got the mp4 file upload working and the preview for the mp4 files, I then had to carry out the same process for the PDF files.

Unfortunately, I wasn’t able to enable the preview box of the thumbnail of the work to display the PDF file. Consequently I have had to set a default icon of the PDF graphic. I am disappointed that still I cannot seem to enable a small preview of the actual PDF file.

if($extension == ‘pdf’){
echo ‘<img src=”files/pdficon.jpg”>’;
}

?>

The above code means that if the file is a pdf, display the default pdf icon in the preview boxes.

I was still aware however, that this wasn’t enough for a portfolio as the main aim is to display work. If the PDF file cannot be viewed then the website does not serve its purpose of showcasing work. Consequently, although I was not able to create a thumbnail preview of the PDF, I made sure that on the profile page the PDF file actually opened in the larger view using Google Docs!

if($extension == ‘pdf’){
echo ‘<a href=”http://docs.google.com/gview?url=http://cs12cm.icsnewmedia.net/PROJECT/files/&#8217;.$file_name.’&embedded=true”>
<img src=”files/pdficon.jpg”>
</a>’;
}
?>
<p><?php echo $row[‘file_title’];?></p>
</div>
<?php
}
?>

Posted in Code, Improvements, Issues | Leave a comment

PHP Code Checker

I have thoroughly checked through all of my code and formatted it correctly as a few files were looking particularly messy!! After tabbing in for every line of code correctly, it is a lot easier to read and distinguish any mistakes or additional div tags! This was a time consuming task but is best practise!

I have also run each php file through a PHP code checker and every file is error free!

http://phpcodechecker.com/

Posted in Design | Leave a comment

ALL WEBSITE PAGES!

Screen Shot 2015-05-06 at 11.28.33

index page

Screen Shot 2015-05-06 at 11.29.18

sign up page

Screen Shot 2015-05-06 at 11.29.21

log in page

Screen Shot 2015-05-06 at 11.29.28

Error message for Username/Password details

Screen Shot 2015-05-06 at 11.29.36

Logged in home page

Screen Shot 2015-05-06 at 11.29.38

Explore page

Screen Shot 2015-05-06 at 11.29.44

Search for a user named: Joe

Screen Shot 2015-05-06 at 11.29.49

Search results for Joe

Screen Shot 2015-05-06 at 11.30.22

Search results with multiple users

Screen Shot 2015-05-06 at 11.30.34

View the full profiles of other users

Screen Shot 2015-05-06 at 11.30.39

View your own profile [logged in user has edit option on their profile page]

Screen Shot 2015-05-06 at 11.30.44

Edit your profile

Screen Shot 2015-05-06 at 11.30.49

Edit profile page showing text input fields with update buttons, update password, set featured work, delete work, delete account

Screen Shot 2015-05-06 at 11.30.53

Success message for setting featured work

Screen Shot 2015-05-06 at 11.31.01

Success message for details updated

Screen Shot 2015-05-06 at 11.32.13

Password do not match

Screen Shot 2015-05-06 at 11.32.18

Passwords do match

Screen Shot 2015-05-06 at 11.32.22

Success message for password has changed

Screen Shot 2015-05-06 at 11.33.09

Pop up message ‘Remember to complete your profile’, to prompt newly signed up users to prevent blank profiles!

Screen Shot 2015-05-06 at 11.33.37

Required fields display error messages

Screen Shot 2015-05-06 at 11.33.56

No search results page

Screen Shot 2015-05-06 at 11.34.15

Privacy Statement

Screen Shot 2015-05-06 at 11.34.24

About page with space at the bottom of the container for potential advertising

Screen Shot 2015-05-06 at 11.52.43

Lightbox for displaying work

Posted in Design | Leave a comment

Browser Compatibility

I have been testing MEDIA LINK on Google Chrome throughout the year and have just opened the website in Firefox and some aspects of the design are incorrectly placed! Admittedly, I should have checked this earlier on in the year, but when your default browser is Google Chrome this is very easy to forget! I intend to try and solve these CSS issues in the next few days…

Posted in Code, Design, Issues | Leave a comment