Category Archives: Stage 1

IDAT106 – Transforming Stonehouse Postcard

With a very broad brief I decided to do a premotion of potential for the future from the perspective of the past. Only in the last ten years has Stonehouse really developed having been in a constant state of decay with little investment. I decided to play on this with my postcard which is designed to look like dated promotional material for the area meant to encourage development that never happened or took far too long.

And now in Sarcas-O-Vision:

The real idea behind it is that it shows us that these visions rarely come true. The font was used in the 1982 film Blade Runner in which the dystopic appearance of the city(complete with flying cars) is supposedly set in the year 2019 which is unrealistic yet may have seemed plausible 27 years ago that in 37 years it could be a reality. So widespread and total change in older cities, particularly in Plymouth, is slow with buildings, architecture and street layouts only changing when social, technological and economic needs and capabilities change or historical events and decay force change.

An interesting aspect of the development of cities is the growth of its infrastructure be it visible such as roads or invisible such as sewage systems or mobile phone tower coverage. A one hundred and thirty years ago the people building houses couldn’t have known the effect on wifi and mobile phone signals the stone that they were using to build walls would have nor could have electricians sixty years ago anticipated the amount of electricity we now consume. So as society advances our buildings can be left behind with the need for constant modernisation, some things can be upgraded whereas others need to be replaced. This can seem to fracture a city with mixed architecture, the best example of this probably being London which has massive variance between building designs.

Sir Patrick Abercrombie’s Plan for Plymouth is an example of when a fresh start to an area can accommodate the growth of infrastructure and create consistancy(even if people dislike it). Within Stonehouse the Millbay area is now under development albeit slowly after the demolition of many industrial buildings in the area. On Stonehouse Peninsular there has been regeneration of The Royal William Yard and the surrounding area which is helping Plymouth catch up.

And just as Plymouth starts getting the funding it so desperatly needs, we hit a recession. Oh well.

In a semi-related note I also found this blogpost with a good collection of Retro-Futurism which is worth a look for those who are interested and this talk on faux nostalgia and how yesterday looked at tomorrow.

A symptom too much free time.

Leave a Comment

IDAT102 – Mind the gap

Managed to fix the last visible bug in which when the browser window was at certain sizes a small gap between the right hand side of the menu and the main content area showed up.


I managed to fix this by changing:

ul#menu li {
padding: 0.3em 0.3em 0.3em 0.3em;

to:

ul#menu li {
padding: 5px 5px 5px 5px;

Evidently ems aren’t entirely consistent and it may have been a problem of it trying to round to the correct number of pixels but being just under. Pixels are more precise so this way is much better.

Leave a Comment

IDAT102 – Rounded corners, CSS, Validation and Compatibility fun

I finally worked out how to sort out my validation problem with the light gray to darker gray gradient. It was failing because of it being inside of the tags of the menu without having ‘li’ tags around it. But whenever the tags were added a gray border displayed around it as it was part of ul#menu in the stylesheet. Moving the image outside of the menu resulted in it appearing to the right of the menu instead of below it. So using ‘div id=”container”‘ to hold both the menu and the image and in ul#menu moving float:left; to it.

Using paint.net(I don’t have photoshop) I made up some rounded corners for my site’s header. I butchered some example code and eventually got it to do exactly what I wanted.

After this I set to work getting the rest of the site to pass by using the W3C validator to find the errors on each page. The irony being that having gotten the site to pass validation it now doesn’t work properly in internet explorer 7 on windows XP. Seeing as I only need to develop for firefox for this project it shouldn’t be a problem but its still annoying.

Oh well.

Probably something todo with this guy:

Working on:
Vista/Windows 7 with Firefox 3.5
Vista/Windows 7 with Internet explorer 8
Windows XP with Internet explorer 8
Windows XP with Firefox 3.5
Windows 98SE(for the 0.10% of people still using it) with Firefox 2
Mac OSX 10.5 with Firefox 3.5.3
Mac OSX 10.5 with Safari 4

Not working on:
Windows 98SE with Internet Explorer 6(fairly obvious that this wouldn’t work)
Windows XP with Internet Explorer 6
Windows XP with Internet Explorer 7

To test
Vista with Internet Explorer 7

I’m also currently trying to come up with a decent domain name for my server. For now at least I’m still using this rubbish free one, [removed], I’ll probably get one in the next couple of days.

At least I get a special badge.

Leave a Comment

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.

Leave a Comment

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.

 

Leave a Comment

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:

Leave a Comment

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.

Leave a Comment

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.

Leave a Comment