Easel: Thoughts

Overall looking back at the project it has been very educational. We did manage out time quite well and managed to get a working prototype out there. Our last minute panic was a real learning experience as we had to rush to fix all of the issues that came up when migrating to dakar. We ended up leaving late last night having fixed almost all the issues.

Finally we changed out group image on the about page. The pug was initially used as a place holder but we decided to use it as our group image as it was often only a few of us doing the work which has been noted. So we used this as a bit of an in joke, but jazzed it up for the final about page.

Arman saw through his birthday in the Digital Media Design studio, happy birthday!

about page pug

Easel: Other issues Fix

To fix the image date error, we had to create a php.ini file in dakar (something which was present in my own hosting, which was why it worked there an not here). On there we changed the date settings to GMT rather than grab it from the timeline its in. This stopped the error from appearing.

As we couldn’t connect to the external server (due to 1 and 1 connection permissions) we fixed this by creating a new database and connecting to that.

The upload directory permissions were fixed on my dakar. Something that Rob could do when we provided him with the file directory we wanted to write to.

Finally all of our images were not showing (e.g. the nav logo). Rob said this could be due to us using static paths instead of relative ones. Up until last minute I have changed all the paths to relative ones and have managed to get a few images showing, but the most important one (the navbar logo) still won’t show. Ive checked the console log etc.. but with no luck. I may not get it done by submission time but its something id like to fix.

Easel: Database fix

Our main issue was not being able to register or log in at all.

As we couldn’t migrate the database over to Dakar (due to an issue with my hosting) we had to reinstall phpmyadmin on dakar and rebuild the table. We then changed the connect.php file to connect to this database instead of the 1 and 1 database.

However we were still having register issues. Every submission returned and error. After almost an hour of looking it seem to be that we hadn’t changed the character limit for the username and password from 0. Changing this to 15 then solved the problem and allowed us to register and login.

Issue number 1 Fixed

connect.php linking to new database
connect.php linking to new database

Easel: Major issues

Having the website almost completely ready, we only needed to make a few changes to the CSS for submission.

However having figured out yesterday that the project had to be submitted on Dakar we went ahead and moved the file over. We didn’t think it would be much of an issue to move the site as we thought we could still connect to the 1 and 1 database remotely.

However countless issues arose which led us to believe we were going to have stay up all night to complete this task.

Completed website on private hosting
Completed website on private hosting

Issues to fix were

  • errors with date ordering for each uploaded image
  • failed registration an log in attempts
  • unable to connect to external server
  • no permission to upload to directory
  • relative path issues for  every path on the site.

Easel: HTML5 Video

On our landing page we decided to try something different than a simple pattern background. Now that our functionality was sorted we decided to add some flare.

We thought an HTML5 video background would be pretty cool. We went to the beach and recored a rather artsy video of the waves and some birds. The next step was to create the background. Using the <Video> tags in HTML5 we could insert the video into the website. Adding autoplay, loop and muted to the code allowed it to loop continuously. We had trouble making it full screen, but we fixed this but inserting it into div with a height and width of 100% and fixing it then setting the video attribute in CSS to “cover” it would make it full screen.

Sea Video Background
Sea Video Background

Easel: Image Display issues

The next hurdle was to display the images from our new “Uploads” directory. This can be a relatively simple matter of creating a glob and echoing out each file in that directory. That is the first option we used. Assuming the simplest answer was the best. Initially it was our idea to create a wall of images. However this proved to be more difficult than expected. To keep the proportions of the image we thought echoing each image out in the background of a square DIV would work fine. However the issue was we were using the $filename php attribute inlace of naming each image. What this did was on echo out the first image in the upload directory multiple times as a div background. After speaking to both Phil and Kyle there didn’t seem to be a way around it.

images echoed in sequence
images echoed in sequence

We then tried a more complicated route. Using the timthumb plugin we attempted to automatically create a thumbnail for each image and have it post to the web page. The problem this case however was that the thumbnails it created were too low resolution and too small to be front and centre on an art app. Therefore we decided to revert back to the old script. The only new addition we made to this old script was to now order the images by the date so the latest ones would appear at the top of the page.

imagedisplay.php with date ordering functionality.
imagedisplay.php with date ordering functionality.

Easel: Logo Design

As we had made some progress with the website itself we still did not have an identity or logo to work with. Abbie took to the iPad to begin sketching out a few Ideas. We had decided on the name Easel for our website because we found that it makes it extremely obvious what the purpose of the website is and its arty background.

Abbie’s sketches for the logo

We liked the incorporation on the easel itself into the logo that Abbie drew. So we decided to go with logo 2. I got to work on creating a vector rendition of this in Illustrator.

initial logo
initial logo

Here is the finished and initial logo created. It stays pretty true to the sketches Abbie created and we all like the look of it. However after using the logo in the navbar it made it quite unreadable because the A was much larger than the rest of the text. I redesigned the logo to have all the same size fonts, but had to sacrifice joining the easel with the text. This is not a big issue as it is much more readable now.

larger new logo in a triangle
larger new logo in a triangle