Monthly Archives: October 2009

IDAT102 – Browser Compatibility

I was having some problems with my website, I test on various platforms and eventually discovered that part of my site doesn’t work properly. Its a .png image that sits on the left of the page to blur the bottom of the menu into the background to balance the page. The gradient moves from the light grey of the menu to a darker grey. The only browser this worked on was Firefox on Windows.

After some head scratching, Florian suggested that it was that I had usesd the .png file format and a different colour profile for the image.

Switched to GIF.

IDAT106 – Stonehouse – Humans VS The Machine

Had another Idea. The pixilated map represents a cold statistical view of Stonehouse, but also the area has meaning that can’t be expressed with just numbers, the image needs meaning on a human level. So the idea is to superimpose this onto the pixilated image in a rough flawed yet natural form.

In the first week I sketched a diagram of Stonehouse from memory.¬†As nobody ever really experiences Stonehouse looking down on it from the sky it also reflected my perspective of it on ground level and how far I judged distances so certain labels are in the wrong place and the shape of the coast it wrong, so the map is imperfect. However it more accurately reflects how the area feels and what impression it leaves on you moving through it. For myself I was fairly accurate but it would be interesting to see this done with someone who doesn’t know Stonehouse as well as I do.

So there is a conflict between the humanly perceived space which we live in and the space viewed as data by a machine which cannot make sense of the meaning behind what is inputted into it.

I manipulated the map I drew from memory and superimposed it onto the pixelmap to create a rough example of the concept, the presentation would be nicer in the final piece.

Population density.

 

IDAT102 – Website Building

I thought I’d get an early start in building my own website for assessment as part of IDAT102. Using trial and error(mostly error) I’ve been putting together a basic website using CSS.

I will update this with little pieces here and there in no particular order.

I used the work from the previous session as a starting point as it had the basic structure that I wanted. I added additional pages by duplicating the original index.html, which contained links to each page, and renaming each accordingly.

After this I started playing with the cascading style sheet of which the current version is here [removed]. I tidied up the interface of the site by tweaking the margins, padding, fonts and colours, ect. I added new features such as buttons becoming lighter on mouseover and the border around the menu link for the currently selected page to turn light blue. I also set a minimum length for the white content area and padding to make it so there is always an empty space between the content and the end of the page.

body {
background-color:#999999;
}

#content {
     width: 800px;
     margin: 0 auto;
     background-color: #CCCCCC;
}

#main {
     width: 600px;
     background-color: #FFFFFF;
     float: right;
     color:#000066;
     font-family:sans-serif;
     font-size:14px;
     padding-left: 40px;
     padding-right: 10px;
     min-height: 600px;
     padding-bottom: 100px;
}

#header {
     height: 124px;
     background-image: url(componant3.png);
     background-repeat:repeat-x;
}

h3 {
     color:#000066;
     padding-left: 15px;
     font-family:Verdana;
     font-size:14px;
     margin-bottom: 20px;
}

h1 {
     color:#B1C8E0;
     font-size: 40px;
     font-family:monospace;
     padding-top: 10px;
     padding-left: 10px;
     margin-bottom: 0px;
}

ul#menu {
     float: left;
     list-style: none;
     text-align:center;
     padding-left: 0px;
     margin-top:0px;
}

ul#menu li {
     padding: 0.3em 0.3em 0.3em 0.3em;
     background-color:#cccccc;
     width:140px;
}

ul#menu li a {
     text-decoration:none;
     display:block;
     color:#CCCCCC;
     background-color:#0066FF;
     font-family:Arial, Helvetica, sans-serif;
}

ul#menu a:hover {
     color:#ffffff;
     background-color:#3399FF;
}

input, textarea {
     border: 2px solid #999999;
     width: 400px;
}

input[type="submit"] {
     background: #666666;
     color:#FFFFFF;
     width: 80px;
     border-bottom: 2px solid #999999;
     border-right: 2px solid #999999;
     border-left: 1px solid #999999;
     border-top: 1px solid #999999;
}

#form {
     background-color:#CCCCCC;
     padding-bottom: 10px;
     padding-top: 5px;
     font-size:10px;
     text-align:center;
}

ul#menu [class="selected"] {
   background-color:#99BFDF;
}

Using Adobe Illustrator I made several versions of a fading 10 x 124pixel texture for the site to give it a smoother appearance, eventually settling on this one.

And in the css file:

#header {
height: 124px;
background-image: url(componant3.png);
background-repeat:repeat-x;
}

This repeats the image across the length of the heading, which uses less bandwidth and is more flexible then using a single image. The file is named componant3 because it is the 3rd major version.

I wanted a smoother transition from the menu down the page so I created another fading texture from the colour of the menu background to the overall background but instead decided to have it written into the HTML itself rather then the CSS. This image for some reason doesn’t blend in properly in internet explorer 8 and is clearly visible so either the hexidecimal value is read differently by firefox and IE or the rendering engine of one of them displays .png incorrectly.

For the favicon I used this online tool I converted a simple pattern I drew in mspaint (windows 7 version) into a .ico file. I then added the code

<link rel="shortcut icon" href="favicon.ico" />

between the head tags on every page to instruct the browser to load the favicon.

I’ve also been looking into server side scripting for storage of data inputted into the form but have been mostly unsuccessful, hopefully I’ll work it out in next week’s session.

Design wise I will probably alter the appearance significantly before completion. The site is viewable in its current form at [removed], please bear in mind that it has only been developed for use with firefox and that certain things don’t work properly on other browsers.

Here is a rough sketch of my design:

IDAT106 – Stonehouse Visual Representation – Further Ideas

Just a couple of possibly bad ideas:

Textures and materials in the final piece that represent each pixel such as a leaf for a pixel which contains trees, pebble for beach ect, either using computer texture or photo. The images could be mapped to the pixels.


Using a single strip of pixels and narrowing down focus.


Changing perspective on the image.


Blurring the pixilated image to create a smooth effect.

I’ll add to this as I come up with more and make decisions.

IDAT107 – Visual Intelligence

In this module we are looking at ‘Visual Intelligence’ which I would describe as the way information can be extrapolated without having to be processed through a mental system that has to be trained like language so that people can immediatly identify what they are seeing. Text has to be read in a serial way in a linear order, the words are recognised from the patterns of shapes that are letters and put together. After this the person must assemble and understand the meaning encoded in the text for the information to be transfered.

A visual image can bypass the need for a common language to give information. By coupling written words with visual imagry you can convey information on a number of levels.

This leads onto our project for 02/11/09. We will each make a ‘Digital Signature’ which reprisents various aspects of our identity and possibly our constructed online identity which is how we choose to project ourselves.

SOFT131 – HTML & Javascript

I will have nightmares about this little face in which it completely fails to move sideways.

From my short time using Javascript I’ve come to realise the full horror of programming where a single misplaced uppercase letter causes the complete failure of everything, causing the computer to crash, catch fire and eventually explode.

Edit: Now in HDTM

IDAT106 – Collecting data from Stonehouse for Visual Representation – Development of Ideas

From today’s session I’ve gotten a better idea of the direction to take my part of this project. Using the idea of amalgamating areas into single pixels in which a single colour is derived, this colour can be used to reprisent the location and can indicate its appearance, landuse and ‘atmosphere’.

IDAT106 – Collecting data from Stonehouse for Visual Representation – Initial Ideas

In the IDAT106 module, having been split into groups, we have been tasked with collection of data from Stonehouse, an area of Plymouth, for use in an abstract form to be presented as art that with context can convey information in a fresh and interesting way.

Fortunately for me I happen to live in Stonehouse and know the area very well so my “local knowledge” should be quite useful.

Using an aerial photograph from google maps as a starting point our group split up to each develop our own separate ideas and themes for the project.

One of my intial ideas was to map the areas of green (trees, grass and plants) verses the areas of grey (buildings, roads ect). This led onto the idea of working out the overall colour of parts of the area and eventually to pixilate images to the extent there is only one remaining colour that can be used to describe the location. By combing these into a mosaic they can become a texture into which over data can be reprisented as the height of each tile. As not every location in the area can be accessed, this could possibly take place along a route or journy along with the collected data.

Using the inital aerial photograph I made this example of how this “texture” could appear. This average colour information could also be used in a different, more abstract, form to compliment the data and provide meaning. For example landuse would relate well with the colour. Also the level of detail and size of each pixel can be changed.

I feel that it should retain some context and meaning rather then becoming entirely abstract yet I would like it to be aesthetically appealing.