Context 1: Assignment Two: Visual Essay: Update

Here's the basic concept for my visual essay, a conveyor belt which will continuously move while images and videos travel along it. I believe it's a simple yet effective idea, it provides me with a good formula to visually present my essay.

Design Practice 2: Interactive Spaces: Development (3)

To finish off I added a contact me page and polished up the background image, The only issue is that I'm not 100% positive that my pages work on all monitors. I then went about finding a decent web host and registering a domain name, In the end I registered a domain at GoDaddy.com and purchased a web host plan from HostGator.com after reading good reviews for the two. If your looking to do the same thing make sure you search for coupon dealers, I got my GoDaddy domain for $4.37 /y instead of $7 and got -$7.60 of my monthly HostGator plan, meaning my first month was only $0.01. Then it was just a case of figuring out how to link the domain and host together and uploading my site using the FTP client FileZilla, the HostGator tutorials were perfect for newbies and easy to use. So after a final activation call to America to activate my account I am finally live, I will getting feedback of people assessing my site from different monitors and browsers to check every things working. I've basically published this site for fun and for end-of-year presentation purposes.

                                    Website is live and can be viewed at:
                               www.mediadobson.com

Design Practice 2: Interactive Spaces: Development (2)

Just a quick recap, the main addition since last time is a video gallery, It uses javascript to ease in and out of view when the uses clicks it's thumbnail, I like it a lot and I works perfectly in creating the allusion that the videos are inside comic book boxes.

 I had some good feedback on Wednesdays lecture, so everything seems to be going good. I really only have to add a 'contact me' page and do a bit of tidying up like, such as making the banner a link to the homepage and altering the opacity of the background image. I will also be diving into finding an online host and domain name shortly, to get my website online.

Problems:
A few problems to note are that my website works perfectly on Firefox (Tested on 3 different monitors) But on Internet Explorer everything shifts up slightly (accept on my monitor), This could be due to the use of absolute positioning. I learnt that in my exception using height pixels for div's was acceptable, I avoided this originally as I was informed to and used absolute positioning to put text and images on top of my divs.(Everything was being pushed down using padding, and It was the only way I could figure out how to position over background div images while maintaining the visibilty of the background image).

I have decided that the shifting up is an acceptable problem and will not be altering all my pages code to fix the div positioning, It still works suitable and serves it's purpose, It was a school boy error and I will have to use firefox to showcase my work and explain my problem in the presentation.

Design Practice 2: Interactive Spaces: Development

So I've set up the overall comic book template I will be using for my online portfolio, I'm creating a background of various comic books scatted on a wooden desk with a large comic book open in the center of the page, this will give the illusion of reading my portfolio on the canvas of a comic book. The hardest part surprisingly was finding an image of a comic book/magazine that was folded over on its self with a visible spine to place in the middle, I had to take one of my own magazine, fold it over and scan it to get a suitable image. Various photoshop effect are placed on the header and the canvas to create a comic book feel, effects such as chrome and poster edges.

Scanned magazine spine incorporated into my template.

 In terms of the code, I have encountered various problems so far, firstly I had to make my container tag relative to the divs to enable my absolute positioning inside the div's to position correctly on different monitors and browsers, I have tested the layout on different screens and browsers and It's perfect, except for one old version of Internet explorer, which I must fix. Custom fonts have also proven to be a problem as I didn't know they would show up as default fonts on different computers, I have amended this by imprinting comic-book font words into pictures instead of being typed. I also had to add the following for my site to work in Internet explorer  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">]

Here is an example of quality comparisons when it comes to youtube, we learnt that you should always consider the codec, format and quality of images and videos you embed on your site, If your web page loads to slow, viewers will simply move on to different sites. .jpeg are used for photos, where as .gif and .png are better for banners and buttons, they also have a lot less bits of colour in them. It is crucial to minimize the quality of images and videos in order for optimum accessibility's for all users, I will be using 360p video embedded into my site, along with reduced quality .png graphics (seen below) for butons and boxes.

So at the moment I'm in the process of adding visuals to the homepage to branch of to various pieces of my work and blog posts,  I have established a main navigation's within linked to Home - Portfolio - About Me - Contact - Blog, along with social networking links at the top and bottom of the page and an archives of blog post also at the bottom. I have a core mainframe to replicate now and my main aim is to continue with the comic book theme throughout by using black and white lines, photoshop effects and specific fonts, I will post again when I have completed more.