Validation.

Another part of the brief was for us to validate our code using the 'W3schools' html validator. This consisted simply of copying my code into a validator for it to check how many errors or warning would come up.

Mine came up with, after being input, 37 errors and 2 warnings.

So after looking through the results I found them to be quite disappointing or to be honest annoying. The reason for this is that a lot of the problems came about with the conditional comments as seen in the example above, which we were told to ignore as changing them would result in problems with different interoperability.

Another major focus of the the errors was my own fault for making some very simple mistakes that were placing '/' where the weren't needed although this did not affect how my website looked in anyway, I still took them out for purposes of cleaning up my code.

After doing so this drastically decreased the amount of errors at which point all that was left was placing a list tag in unordered lists. But other than that my website seemed to be fine.

Site testing.

Part of the brief was to test our websites in different browsers in order to see how they appeared and what differences came about.

Note: I have taken screenshots and placed them in my Sketchbook.

So firstly, I checked my Website in the browser, which is probably the least used 'Opera'. Opera is actually a very good browser and seemed to display my website perfectly except for one particular difference between Safari and Firefox and that was the 'Line Break' tag. My lines breaks seemed to be bigger than that in the other two browsers. Apart from that everything seemed to work including the javascript.

Next I checked my website on Internet Explorer 7. This was mostly the same too except the padding, which place my text a little more into the center had not taken affect (this just means that the text went right to the edge of the 'div' and wasn't really a big issue). The main thing I noticed though was that the javascript was not working but I didn't have sufficient knowledge as to why it wasn't working. However, the thumbnails still linked to a larger version of the image, just without the lightbox.

The last browser I tested in was Internet Explorer 8 and that seemed to also work well - javascript included. No problems with line breaks or text either.

So overall, my website seemed to work quite well on different browsers and platforms with the main disappointment being the text and javascript.

Javascript - Lightbox 2.0

'Lightbox 2.0' is the name give to the javascript I have used in my website. It comes in an already coded form however, I still needed to include various bit and pieces in my html file in order for it to work.

http://www.huddletogether.com/projects/lightbox2/ 

Firstly, a Lightbox is just a another fancy way to view images rather than just having a basic link that goes to a larger version of an image. Once the thumbnail has been clicked on it makes the whole screen go dark and a white box is then bought up with the image inside.

Above is a screenshot that demonstrates what the javascript does. As you can see there is a dark tint on the background and this promotes the image in the middle. Lightbox 2.0 also allowed me to leave comments at the bottom left of the lightbox for purposes of 'reference' ( at least this is what I used it for).

Now in order for me to get the javascript working I needed to edit and add certain things. So firstly, I needed to, once downloaded, make sure my folder structure was correct or rather once I added the javascript folders to my own website folder I needed to make sure that the files included in the Lightbox 2.0 all had the correct paths (since it is set to it's own default path).

So with that sorted out I needed to copy this code to every page with javascript inside it.

The code in the top image is simply linking the html page to the javascript pages and the single line of code below is linking to the CSS code, which comes with the Javascript.

After I had done this the javascript on my site was then active and worked really well.

HTML and Tags used.

Here is a look at my index page:

So the top starts of with the 'html' tag and this tells the browser that the document is a html document. This is followed by 'head' which contains general information such as style-sheet links etc. Below this is the 'title' tag and this simply allows anything typed inside the tag to be displayed at the top of the browser window. For example at the top of the browser on my index page it would say 'Welcome to 'about drawing'.

Then there are conditional comments that tell the browsers, which style-sheets to link depending on the browser itself. They also link to the print version of my site.

Here is where the main bulk of the site is kept in the 'body' tag. As you can see it contains all my divs -  div simply means a separation of part of the site - and the divs contain all my content. I've used various tags in the divs such as 'img src' to link images onto my site. 

Other tags such as 'a' allow me to link internally to other pages of my site and I can apply this to images or text as I have down here.

The bottom of my site - below this is simply the closing of my divs, body and html tags - contains my footer and links in it. As you can see I have used an unordered list to apply CSS to.

My Design proccess so far.

Towards the beginning of the assignment I came up with ideas for my website. These ideas now placed in my text book consisted of an image as my header along with buttons with paint splodges and a varied use of color.

However, after presenting these ideas it turned out they didn't really work too well. So I ended up presenting my final, more minimalistic design and this seem to be a lore more successful.

Here is my final mockup:

This is my final mockup of my layout and color scheme etc. There is always a good chance of me changing a few things to suit the web but in essence it will look like this.

I had also produced variations of the header such as non-curved versions and also variations of the logo in the top left of this mockup however as you can see I have picked the ones which suited my site best design wise (they're also the designs that I was told to use in my presentation).

I am currently still working on my background since I had planned to put one in to make things a little more exciting.

So far my favorite background and the one I'll probably use throughout my whole website is this one:

  It contains simply of 2 paint splodges and pencil shadings. I plan on applying this to all pages as design wise it works better than the ones below.

This is the background I'd have used for my drawing page.

This is the background I'd have used for my media page.

This is the background I'd have used for my sketch page.

Note that I originally intended to have a separate background for each page and thus each topic. However, the designs weren't consisted so they didn't flow well enough. In the end I decided to stay with one background, which in my opinion goes better than the others and works better than the others.

Changing My Fonts.

I previously looked at custom fonts for my designs, however since I have started producing different designs for my site I no longer believe I will be using a lot of my own images and thus have decided to not use those fonts I have collected from Dafont.

However, there is always a possibility that on will be used somewhere so I will be keeping an eye on them but for the time being I have decided to stick with simple and easy to read fonts in order to make my site clear and understandable for others when they visit.

These simple fonts, preferably fonts that can be found on both Windows and Mac to avoid complications for example:

Times New Roman

Arial - (and variations)

helvetica

Verdana

There are quite a few more but these are examples of potential fonts for my links and content information.

Altering my design.

After looking at some websites and seeing one I really liked I've decided to change my design ideas. Rather than using my older ideas I'm going to put down in my sketchbook new layouts, which I hope to be minimalistic like the website I looked at previously.

I'll also be taking into account the use of simple fonts, Javascript, color scheme etc.

However, as my website is based upon the subjects of Drawing I am going to have to fill up a lot of the space with text and images unlike the website I previously looked at earlier. I hope to avoid a 'crammed' look.

Looking at a couple of websites based on drawing.

So after doing some designs but being slightly stuck on ideas (though I still have managed to come up with a few things), I decided to do some research into existing websites that are in some way similar or related to the one I am trying to do.

http://aboutdrawing.org/

This first website (the screenshot above) is a site I managed to find and I really like the design, colors and layout used. It's obvious and clear the the designer has gone for a a simple/minimalistic look with a thin header and footer.

You can see that it is easy on the eyes with very little text and this has been placed into a small paragraph with a very simple font style, most likely Arial or Times New Roman.

Finally, as you can see there is an image in the middle, which can actually be changed using very small arrows (they are quite difficult to locate especially if you have slight eye problems). This is known as javascript.

  

http://www.linesandcolors.com/

The second website I have looked at is quite different in all areas. Rather than a color the background has a repeated pattern on both axis with the main body of the site being a little more crammed with content (though they're purposes are obviously not the same).

The main issue I have with this website is that the background doesn't really flow with the rest of the site. I'm also not a big fan of the Header image though I do admit it goes with the body design.

The color scheme seems to be quite random as well as the header has blue, then it moves to a beige color, this is accompanied by the background as mentioned earlier, which is a dark grey like color.

If we now look at the text you can see that it's simple and understandable but I question it's readability - though I have no trouble myself others might because it is fairly crammed together and quite small.

The images however are nice, large and clear.

Mixing sketchbook and digital work. (Update on Work).

When drawing various ideas in my sketchbook, such as buttons layouts etc I will need to translate them into digital format or recreate them in order to give a better idea to how they'd look on my website.

I have drawn two basic layouts, however, I will pick one layout and then apply my various assets to it then change small things within the layout such as borders, different positioning of logo and so on.

I will also create more than one set of navigation (or buttons) in case my ideas do not work or suit my overall design. Of course I will also need to create button overlays or rather rollover buttons to indicate when something has been clicked on.