Project404 - Online Journal

Project 404: analysis

2006-12-08T11:50:00.001Z

Developments:

Add more ways for users to interact with the work, such as the email page and contact form
Research further theories that could inform the work, such as "something/nothing" and psychology
Make the work bigger, add more pages and come up with more ideas
Promote the work more, particularly within the art dept to receive more feedback

Successes:

Making a functioning (even if it doesn't look like it), live website
People who have no clue as to the intention to the work managing to form a meaning from it
People having fun and "playing" with the work - exploration
Working in a medium that is relatively new and rising to the challenge of getting people to understand it
Increasing my knowledge of net art and the theories that support it

Project 404: User feedback

2006-12-08T11:42:00.001Z

I posted the site on various public spaces and received the following comments (in 24 hours, pretty good I thought):

"So my responses then ?..confusion, uncertainty, frustration at not getting what I was expecting ....possibly being "led up the garden path"....then slight amusement at the concept..."

"i dunt get it, it just says coming soon :s "

"I found it kinda fun to try and find the hidden areas,but i couldnt see any information - only the hidden txt and the control panal and the msg board. I looked in the source to see who made the site any like coments or anything, then i saw all the text i was like say whhhat and saw it was "Invisible" "

"its almost as good as the thealegreen website for navigation! it reminds me of why most people should never ever have their own websites"

"i clicked your link but nothing was there. you might want to fix that."

"ok interpretation... uhh... i don't understand what it's meant to be - i get the 404 bit, and that there isn't actually meant to be anything there... but it's the nothingness that is frustrating, and it filled me with great confuzzlement - the nothingness being that there is nothing that makes me want to stay there lol. though i suppose it makes my eye twitch because i'm quite the fan of website designing and there's something in my brain that says "there must be something visually tastey here. keep clicking." ... but you defied that! ITS A PSYCOLOGICAL GAME JADE HANLEY! A GAME! whyyyyyyyyyyyy *eyetwitch* "

"ok...i like the loading page - its clever. don't know how i feel bout it though. its tempting to like try again or keep waiting etc even though u know nothing more will happen"

"Grr, that's annoying! "

"Although knowing the intent of Project 404, I still find it incredibly annoying and frustrating myself when I can't find links...for me I don't want to give up...it's exciting to see what the next page will be hiding from me..."

Project 404: map

2006-12-07T16:34:00.001Z

This is a "map" of how all the pages link up, with the arrow showing the next page. The arrows crossed out with blue had the links changed when I added the email form. There are many possible pathways for the user to take through the work, and some are more obvious than others are.

Hopefully, by tomorrow I will have some feedback on the work.

Project 404: Added user inputs

2006-12-07T16:19:00.001Z

One fo the things I have always felt was lacking in this project was some kind of user input to the website. As it currently stands, I control the page order and provide the pathways for the user to find. However, one of the key advantages of the internet is the fact that users can participate and manipulate it too. This was an aspect that I felt my site lacked, and was important to add.

I considered following the "search" page I have used, where the script to make the actual page work is missing. However, while this would allow people the interaction of being able to fill in the form, they didn't really acheive anything by doing it. I decided it would be better to make some kind of forum, but hide the submitted content, like Jodi did in their 404 piece.

By changing the colour of the inputted text to white I was able to hide the comments in the same way that Jodi did. This makes it seem as though there is no content on the page aside from the headers:

When users submit comments into the box there is confusion, because they have put in the data but it can't be seen anywhere. This encourages them to look more carefully, and maybe try highlighting things which would lead them to the comments on the page:

I believe that as a result of finding this hidden text it would encourage people to explore the work more, which is why I linked to this page from the front page. I also like the fact that it encourages uses to leave their feedback and comments on the work itself, while actually being involved in the making of the work. This is something that really interests me, and I would like to investigate how much I could involve the user in my work.

Part 2

After seeing how much I liked the comment aspect, I decided to include another aspect that could involve the user more. Now, I knew this would involve PHP, which is not a language I understand (outside of includes). Normally I don't touch it, but I decided to give it a go. I looked at some tutorials on how to make a PHP form that would email the data to a given address, and eventually came up with this:

$email = $_POST['email'];
$subject = $_POST['subject'];

$recipient = "$email";
$subject = "$subject";

$message = "E-mail: $email \n";
$message .= "Subject: $subject \n\n";

$headers = "From: $email \n";
$headers .= "Reply-To: $email";

mail($recipient,$subject,$message,$headers);
?

The script takes the email address put in by the user and users it as the recipient address. The "subject" is also included there. Effectively, by submitting the data they are emailing themselves a blank email. However, the user doesn't know this when they submit the form. The intention was that the email would invole the user. When they check their inbox they will have no idea where this email came from, becuase unless they checked the source code and are able to understand the script, they have no idea what the data is being used for.

The sending of the blank email links to the theme of "no idea" because the email that arrives is blank, apart from the subject (if any) that the user submitted. It also shows their lack of understanding of the code, or what the data would be used for (there is no explaination). It reflects how readily people give away their personal details, without even needing something to be offered in return (The proof? 6 people have submitted emails to the form in 24 hours...)

This is how the email appears when it arrives in the inbox:

Artist reference: Word Perhect

2006-12-07T13:11:00.001Z

Word Perhect

Tomoko Takahasi's Word Perhect is a parody of the popular word processing program "Word":

Reclaiming the initiative back from the software, Word Perhect presents an idiosyncratic hand-drawn interface leading to a set of functioning but strangely altered tools.

The interface is hand drawn, referencing to a time before computers. The use of "sticky tape" and "found" objects (train tickets, receipts etc) as paper reminds us that we didn't always need to word process things - scribbling a quick note on a scrap of paper from your pocket used to work just fine. Now, this takes on even more significance, with computers becoming small enough to fit in your pocket and in fact take on the roll of that scrap of paper.

The roughness of the project contrasts traditional desgin of software, where companies aim to make things as sleek, stylish and cool as possible. The Apple Mac is a great example of this; half the reason for their popularity is how stylish and "cool" they look, and the companies know this; Steve Jobs is quoted as saying "We made the buttons on the screen look so good you'll want to lick them" about Mac OS X's Aqua user interface (Fortune, Jan. 24, 2000).

In fact, I prefer this interface...it makes a nice change.

As with many net art pieces, there is a sense of playfullness to the work. For example, the "error" messages that come up are written with a sarcastic tone - try to erase something and you're told "Once you written, you can't take it back. Be responsible whatever you've done!!" Sounding a lot like a mother teaching her child a lesson, the messages link to the patronising tone I feel that normal Word uses -"Are you sure you want to close without saving?" The "attitude" of many piece of software is that the user is stupid, and needs to be reminded about what they are doing. There is a power play between the user and the computer - man and machine - ultimately won by the user, with the ability to press the "power" button.

The main focus of the project is the way that word processing tools try and standardise language:

As word processing software becomes ever more advanced, correcting syntax and spelling errors, these familiar programmes begin to impose a standardised corporate language onto our writing

The "rebel" against this, Takahashi takes standards of the program and alters them, subverting the normal word processing experience. Doing this draws attention to something that people deal with on a daily basis, just as my work is intended to highlight the lack of information we receive from errors on a daily basis.

Project 404: Additional pages.

2006-12-05T19:41:00.001Z

In addition to altering the pages as described below, I developed the project further by adding in some additional pages. One of the strongest aspects of the site, I believe, is the error messages, because from the feedback I have received, I feel they successfully communicate the idea and feeling that I was aiming for.

Therefore, I researched more errors to be included in the site. From the many available, I have (currently) chosen:

408 - Request Timeout
403 - Forbidden/Access denied
401 - Unauthorized

I put the 408 error after the loading page, so that when the user finds the hidden button and "cancels" the loading page, it is as though they have caused the page to timeout.

The 403 error exists much in the same way that the 404 page does, as another frustration in the site.

The 401 page loads after the user inputs their password at the password request. The intention was to make it look like the page had rejected their password (when any password is acceptable).

It was important for me to choose errors that fitted in with the pathways within the site. For example, it would make no sense to have put the 401 page unless the user had been made to put in some kind of data (in this case, a password) first. Although this is probably wasted on a person who doesn't understand the error codes, where they just signify something bad happening. However, to someone who understands the language, having the "narrative" run in the right order is essential to their understanding of the work.

Project 404: Revising pages 2

2006-12-05T12:42:00.001Z

While I changed many of the pages in a similar way, as described in the previous entry, possibly the biggest change (and the one that took the longest) was the "loading" page.

The concept of this page was a loading page that never actually loads (something dial up users are VERY familar with, as more and more websites are being aimed at broadband connections). The first version looked like this:

To be honest, I didn't put much thought into why I chose the circles. I guess it could be perceived as representing "going around in circles", suggesting there is no end, no way out (much like Project 404 in fact). Circles seem to be used a lot for "waiting", for example, the "page loading" icon in the top right hand corner of Firefox. Maybe this comes from clock faces and hands?

The colours are the kind of generic colours you often see on loading animations. Not grey, but not really exciting. How many hours have I wasted watching boring animations like this?

There were several things I didn't like about this page:

The colours didn't really link to any other part of the site

There was no "progress" bar to inform the less observant viewer that the page had "stopped" loading

The link to the next page was VERy hard to find

The link to the next page was hard to click when you had managed to find it

I generally felt that the loading animation I had made for the Flash version of Project 404 was much more successful than this original one, so I decided to rework this animation and make it part of the new Project 404.

First, this meant changing the background colour to white - the default colour for Flash and web pages anyway, and also a symbol of blankness, no idea etc. I used default black for the text, but the loading bar is a slightly lighter grey (so it can be seen).

The final result looks like this:

The link to the next page is in the same place it was before; a hidden rollover that causes the word "not" to appear, changing the sentence from "patience is a virtue" to patience is not a virtue".

After looking at this animation and comparing it to what I wrote in the previous entry about the importance of default fonts, I have decided to redo the fonts (urgh, 700 keyframes, fun)

However, this causes a problem. In Flash, I cannot just set the font properties to use a default font face like I can using HTML, I have to choose a font from the list available. This is problematic because the default fonts in Firefox and Internet Explorer are different, meaning that in one browser, the font wuld not match the rest of the website. So Times New Roman vs Arial...

Arial is clearer and easier to read than TNR. Also, TNR is over used and therefore disliked. As a Firefox user, I would also be more inclined to use the default font for Firefox (Arial). HOWEVER...

TNR is the default font for many programs (e.g. word) - that's probably why it's hated so much. Therefore, it is the standard default, and would be more suitable to use for my site where I want to use minimal formatting. In addition, it is the default of Internet Explorer, and as much as I hate IE, it still has the highest percentage of users, meaning that the animation would still appear to be using the default font to the majority of viewers.

This is the primary reason for me choosing Times New Roman as the font in the loading animation. Here is what it looks like after all the modifications:

Project 404: Revising pages

2006-12-04T17:31:00.001Z

No updates for ages because I've been rushing to get Digital Media finished, and my body decided to help my stress levels by catching tonsillitis, so not only do I have a lot of work to do, I have a lot of work to do while feeling like shit.

With this version of Project 404, I wanted to make a more realistic site. This was because:

I wanted to consider the conflict between reality and the virtual environment of the internet. This ties in to Hyperreality, where the concious is confused between what is real and what is fake.

The more believable the site is the more "natural" people's reactions to it will be, whether that is to shout and swear at the computer or to close the brower - this shows how they deal with the emotional impact and what effect the work has had on them (obviously, this is very much dependant on the way thtey approach the work - taken as a website, people would give up quickly. Taken as a piece of net art, there are instantly expectations that something is going to be different to the normal function of a website)

I didn't want the colour or other "design" aspects to take the focus away from the actual work itself

Image 1:

Image 2:

Image one is from the "prototype" version of Project 404, the blank website. The formatted font and red text instantly imply (to a more experienced user, at least) that this is not a genuine error message. By removing the formatting and therefore using the browsers default font style and link colour, the error code instantly looks more genuine because real error pages rely on these defaults (see the example 404 from my website)

In order to keep people moving through the site the link is presented obviously. However, a user who explores the site will find that there is still another link hidden in the text that takes them to another page (rather than the "dead end" contact form).

The error code actually means that no content has been found, a direct reference to the starting point of this work. However, "normal" internet users would not understand this, because they are not required to speak this "language" in everyday use of the web. The only understanding they will be able to draw is that something is wrong, error = bad.

Another example of refining my Blank Website work for Project 404 is the maintenance page.

Image 1:

Image 2:

Again, image one (the first version) looks fake. I used red because of it's semiotic meaning - STOP. However, in the context of the internet (and computers) this is incorrect, as red rarely means stop. Examples? Ok... Error messages and dialogue boxes (on Windows at least) disply in grey boxes. Occasionally these are accompanied by symbols - a no entry sign (like the road sign), which is the only red example I can think of. Other icons that also mean stop! or problem! are the yellow triangle for script errors (but most people would ignore that anyway).

The most obvious example of red not being used where you might expect it to be is in the BSoD (Blue Screen of Death), the fatal system error in the Windows platform (there is a red screen used in early Vista versions, but only for boot up errors).

Perhaps the reason for not using red as a "stop" is because it also signifies "danger", and would scare computer users (especially nervous ones...)

Anyway...

Again, I changed the formatting so that a web browser's default font would be used, and again, the links are default (blue, underlineded). I am now much happier with this page. I feel that it is much "tighter" than the previous version of it. It certainly feels more like a genuine page.

The main reason I have chosen the default colours is because this means a lack of content on the actual pages. Also, and more importantly for semiotic readings, it means that there is a lack of content in code of the pages as well. The layout - everything from the font, to the colour of the links; the margin from the edge of the page to the background colour - are left up to the user's browser to determine, this is web design minimalism!

Different displays in two browsers on Windows XP
Internet Explorer:

Firefox:

As you can see from these screenshots, browsing the website with Internet Explorer looks completely different to browsing with Firefox because each browser has differen "defaults". The obvious difference is the font, which is Times New Roman (ugly, standard windows font and hated by all) in Internet Explorer, and Arial in Firefox. There is also a difference in line spacing, with Internet Explorer having much wider spacing that Firefox. However, the default colours are the same - black text on a white background, and blue links (purple when visited). These similarities, I feel, correctly communicate the lack of formatting and therefore content, which is my intention.

Well done Microsoft

2006-11-29T00:11:00.001Z

Award for most non-sensical sentence ever:

And also, at last, something not owned by Microsoft that messes up. Although it is myspace, so I'm not sure whether it really counts or not...

Random grey background, links down the side, all blue. No formating. Things appearing in odd places...

Artist reference: Corrupt

2006-11-29T00:04:00.001Z

Corrupt

This is the online version of the work "Corrupt". The project uses a program to alter the data of a binary image before saving it. The alteration in the binary code result in the file becoming corrupt, causing some interesting renders. For example, the Mona Lisa with half the painting tinited green and various body part offset.

"And because it is a real corruption system that damages
the binaries of a file, some of the results can’t be showed because they are too damaged... "

For me, this piece highlights the disposable nature of computing. Normally, when an image or file becomes corrupt, it is deleted, disregarded. It is "wrong". In this piece, the artist presents this wrongness as something that should be celebrated. It also plays on our destructive instinct, to break things, manipulate them. Some sort of satisfaction - a power play between you and the computer that highlights the limitations of the digital culture?

The piece also highlights how digital imaging is representational. The Mona Lisa, one of the most recognisable pieces of artwork in the world, has been altered (some might go so far as to say vandalised?), yet it is ok because we know this is not the real Mona Lisa, but a digital photograph of it.

For me this draws attention to one of the main advantages net art has over traditional art. Intended for use on the internet, you can see the work itself. You can view net art on the train using a phone, or in the house on your laptop. When was the last time you saw someone carrying their Picasso on the tube?

Movies of the installation can be seen here:
http://www.recyclism.com/corrupt.php

Earlier work projected

2006-11-27T22:58:00.001Z

My earlier animation being projected:

Original file:
Question Mark Scroll

spacer.gif {ART}

2006-11-27T19:12:00.001Z

http://www.spacergifart.com

A site made about an invisible piece of (ex)essential webdesign:

What is a "spacer.gif"?

The spacer.gif is a means, employed by web designers, of keeping table based layouts from collapsing in on themselves. The spacer.gif was once a valuable tool in a net world governed by the interdependence of content and layout. However, to the contemporary high-efficiency web designer, who employs css formatting and layout capabilities, spacer gifs are largely an obsolete and unnecessary tool. The independence of content from layout has come, and spacer gifs, as a concept and as digital objects, are disappearing.

The concept is prevserving an aspect of digital design that has been depreciated as technology advances. It draws your attention to the importance of something that never really seemed that important before, especially as the majority of people wouldn't even know was a spacer.gif was, what it is used for or how to use one.

The site is written to parody art websites, with the kind of language you would expect on a website marketting art works, complete with installation instructions.

Similarities to minimalism can be seen. The construction of a website has been stripped to the one thing that held the structure together. It seems strange that a complex, functioning website could fall apart if this one file, of empty information, 1 pixel by 1pixel, was deleted. The importance of this is highlighted by taking it from the code and placing it in the position of a high art object: putting it on a wall in a frame. The way they are presented is like an artwork, in particular a series of prints (the idea is that you print out the space.gif and place it on the wall.

This website follows the kind of humour often included in net art pieces, where only the "elite" will comprehend the "joke". Some people would not understand the importance of a blank square, they will see it as "art gone mad".

There is also the irony in suggesting this piece should be "printed". With conventional CMYK colour printer, there is no such thing as white ink, so nothing would print.

I like the concept of this work - basically taking blankness as it's subject, similar to my work.

Artist Reference: Requiem For A Dream website

2006-11-22T11:40:00.001Z

While not actually net art, the Requiem For A Dream website is a good example of how you can manipulate and play with the user's expectations of a webste.

Built as an extension of the film, the website takes many of the themes. In fact, it is so similar to the film itself that one reviewer suffered flash backs to the film when looking at the website.

The website loads and the title and producer's logo are shown fade in. There are the only reference to the film title and the kinds of sleek, smooth promotional websites usually chosen for films. A banner ad loads in the centre of the screen, with messages from the Tappy Tibbons gameshow also used in the film. Clicking on this banner takes you to the main part of the website, via an animation with some hideously bad flashing effects. The phrase "TAPPY TAPPY" a reference to the gameshow's host takes on a new meaning on the internet - tappy tappy your mouse.

The website is a badly designed advert for the game show "Tappy Tibbons", complete with too much American game show enthusism, and a certain atmosphere of being taken for a ride. A first time visitor who hadn't seen the film may consider this a glitch, but this website suddenly "crashes", errors appear all over the screen and static noises are used to reinforce the idea of it failing.

From this, a clever menu system loads. Using Flash to make mouseover buttons that fade when they are hovered over, to reveal an image underneath. Different aspects of this image are interactive and lead you to different points in the film's narrative. It gets difficult to describe here because everyone will take a different route, but there is a guide on "How to navigate The Requiem For A Dream website with some degree of success".

The route I took brought me to a mock website about internet addiction, "net-compusions.org". Again, poorly designed and ugly looking, this reinforces the idea that a website doesn't have to look amazing for users to understand its message. This page leads to one about gambling (addiction is one of the main themes in the film), which does look like a dodgy gameling site, complete with banner advert.

The site also relates to the film by including sounds and images that were used. A conversation between the two main characters, Harry and Marion, has some sentences transcripted, and mixed up with badly distorted images and HTML code.

This continues the idea of there being an error with displaying the site. The text from the conversation fades in and out and is confused with the HTML code and the image. The text also isn't displayed in order so it isn't coherent, making the storyline even harder to follow.

No matter which route you use to go through the site, the final page is the same.

The page layout hints at a monochrome version of the first Tappy Tibbons website, but the image is so distorted it is impossible to tell for sure. Exploring this page reveals it is the film credits, which appear when you roll over some sections of text.

I really like this site. It confuses the viewer with fake error messages and confusing screens (ironically, I have had some problems viewing the site because real error messages have been coming up). It links in well with the themes of the film and gives you an idea of what the film is about without having to resort to a synopsis. Although this makes it confusing, it also means you want to spend more time with the website in order to understand what it is about.

Artist Reference: Brighid Lowe - Now Here/Nowhere

2006-11-21T22:36:00.001Z

Now Here/Nowhere

Flash based net art piece by Brighid Lowe. The animation itself is simple - the white text moves across a black background, presumably tweened. Sometimes it stops in the middle and vanishes. Sometimes words bounce back accross the screen. Sometimes they fade out or overlap other phrases.

Unlike my work, the piece is not interactive. The user sits and watches the text, and reads it and tried to understand what it means.

In his book "Internet Art: The Online Clash of Culture and Commerce", Julian Stallabrass describes the work as refering:

"to the experience of net browsing itself, and to the online cultures obsession with the present"

In order to understand the work, the user has to sit and wait for the text to unfold before them. This is very different to "normal" internet browsing, where the message and the presentation of the message are meant to be understood as quickly as possible. This links to my work, in that the user is frustrated with things not happening immediately, as we are so used to on the internet.

Words like "waiting", "bored" and "angry" are used multiple times. While these are frequently emotions we experience while using the internet, and they are frustrating, we will usually give up if the information isn't instantanious. If a page doesn't load quickly we click back. If we get bored, we log off. If we get any, we give up. Waiting or having to work to get information is not something internet users are used to having to do.

In addition, this particular piece has no end (similar to my piece, which keeps going, crossing over multiple pathways and repeating itself). The animation loops, so eventually you get back to the original statement about the beginning, which suddenly takes on additional meaning, especially when you realise you have already seen this bit and close the window. We don't want to wait to go back through again. Reading text and having no input was boring. It prevents us from doing what we are used to doing on the internet: interacting and changing things.

Project 404 version 2

2006-11-20T21:39:00.001Z

After viewing all the real error messages, I have decided to return to the style of the blank site I made earlier in the project (which is now online here).

..because:

The site was becoming increasingly focused on layout and design - a "pretty" thing, rather than the conceptual work that was my intention.
I meant to create something real, something believable (afterall, hyperreality is the confusion of the real and fiction. How can this happen when something looks "fake"?). The errors needed to look authentic.
The blankness - the white pages, black text - reflected the lack of an idea more than the newer version.
Removing the graphics allows the user to focus on the text, the words, and forces them to consider what they mean, and how this relates to my idea.
After trying out the Flash version of 404, and feel happier with the previous blank site, so I feel it shouldn't be rejected, but refined.
Already having much of the pathways in place allows me to create more routes to give the user a wider choice
While my knowledge of Flash has increased over the past year, I was still struggling with the creation of a functioning site. I have been working with HTML for years, and this is where I feel at "home".
What is the point of creating a Flash site that could just as well have been made in HTML and CSS?
I've seen the original Blank Site have a much more powerful effect on people than the Flash version, and since net art is about the viewer's response, it seems foolish to alter the most successful aspect of my work.

Research: Error Messages

2006-11-17T17:20:00.001Z

Web Server Error Messages - List of internet errors. Includes the numbers and what they mean.

HTTP Error 403 - Forbidden - Explaination and example of a 403 error, explaining what it means, possible solutions

404 Error Message - An example of a 404 error message.

Error Message Guidelines - A guide on how to write error messages. "Summary:

Established wisdom holds that good error messages are polite, precise, and constructive. The Web brings a few new guidelines: Make error messages clearly visible, reduce the work required to fix the problem, and educate users along the way." So everything it says I should work against?

Hotmail "server too busy" message. It is vague (higher than normal volume of what? Emails? traffic? spam?). Helpfully, none of the things they suggested worked. Waiting a few hours might be a better solution. Complete with dodgy American spelling. Typcially, it's when I NEED to check my email.

Kiss My Art 404 - The error message that comes up when the page isn't found on my server. Vague and unhelpful, but it serves people right for nosing about my webspace :P

Not really an error message, but an example of when things go wrong. Windows Live Mail Beta, with no formatting or images. Not entirely sure why this happens, WLMail is the only site affected. If this hadn't happened every time I tried to load WLMail in the last few weeks I'd put it down as related to the Hotmail error above. The links don't work, so once again, I can't check my email (Nice one Microsoft). I've tried clearing the cache and my internet options and I still get this nice retro view. What's better? The support team have ignored 2 emails about it. This is why people use Google Email. (Also, I opted out of the beta two days ago but they have yet to actually remove me)

Trying to contact tech support about email not working. But that's not working either so I can't do that. It doesn't tell me why it's not available. It doesn't tell me when it will be back. And to be honest, I will probably forget to try again later.

I SWEAR I am not targetting Microsoft. They must just be this shit that nothing works. To get to this error page, I clicked one of the links off their main page. This error annoys me because it is so polite and I am sick to death of seeing Microsoft error messages now. Would it kill them to make something that actually worked?!

So. Guidelines for MY errors should be:

As user unfriendly as possible. Vague; comlicated error codes; useless information; no obvious solution. (so that'd be Windows Live Messenger then)
Clearly visible - needs to be the focus
Brief and to the point - lack of information
Direct them to another page - send them around in circles

Scene 2 - Loading

2006-11-12T13:55:00.000Z

Influenced by my first blank website, I decided to make a loading page that never actually loaded. Slightly ironic considering I'm using Flash - my family has had broadband for less than a year, so seeing large, broadband only flash sites that just sat there and never loaded was a frequent occurance at our house.

This scene is made using a movie clip for the percentages (yes, I had to sit and type each one out). They start off being 1 frame each, sometimes two to make it look authentic, but gradually the number of frames between numbers get longer and longer, until it gets to 78% where the movie actually stops, but because I used a stop command, users will be sat there waiting.

The loading bar is an animation. I had to estimate how far the bar should have moved by certain percentages, in order to make it run at the same speed as the percentage counter. For example, the first keyframe is at frame 25, the next at 40, the next at 50, etc. Between each keyframe the animation is tweened to provide a smooth movement. I included the bar because it is a standard feature for loading pages - the internet is afterall a visual place.

I chose 78% for the animation to stop because it's over halfway, and I know (from experience) people will normally wait after 50%. 78% is also near enough to 100% to encourage you to wait a little bit longer - it's almost there. Also, 78% is at frame 775, which at 12fps, is just over a minute of waiting. On average, people will navigate away from a page if it isn't loaded in 30 seconds. How many people will have got bored before the first animation in my site is "loaded"? As in many net art pieces, the patient user is rewarded.

Of course, there's a sneaky alternative...

At the bottom, I have included the text "patience is a virtue" at the bottom. Frequently on sites that take a while to load the author puts messages like "It's worth the wait" to encourage people not to close the browser. Of course, the irony here is that the longer you wait the more you are wasting your time. I included this because I've frequently seen little "jokes" on net art pieces that work at the expense of the user.

In this case, when you hover over the right side of the text, the word "not" appears, changing the sentence to "patience is not a virtue", which is true in the case of this loading page. This rollover is a button will link to the next page.

Why is it...

2006-11-10T23:21:00.000Z

When things go wrong they go mega wrong.

As if the font disaster from earlier wasn't bad enough, and the pressure of impending deadlines (less than a month!), Flash decided to add it's own contribution to my stress levels.

Everything was going smoothly, I'd got up to scene 3 in the project (I'm always ahead of where I'm actually blogging. It's good to have a few days thinking about something else before you have to write all about it). Playing with menus and such, realised I hadn't tested the full movie since I added scene 3...so now was as good a time as any.

Flash, in its infinite wisdom, had decided that despite countless years of number '1' coming first, '2' second and '3' third, it would prefer it if the scenes in my movie went 1, 3, 2. And there was no way to change it back, short of reverting to the only saved file I had with only scenes 1 and 2 in, putting scene 3 in the right place, and copying, placing, and re-doing the timeline for the damn thing.

I thought maybe this wasn't the way forward, and decided to investigate my other options. The "loadMovie" actionscript seemed a good idea, so I played with that. I think I followed 5 tutorials on how to make it work without any success.

In the middle of playing about with this (which I hadn't saved), Flash decided that it would crash, so I lost all the loadMovie things I'd been playing with. Thanks, Flash. So I emailed Jess, and went back to doing Digital Media work instead.

If any Art teacher ever complains we are not commited, I'm going to hit them. It's a Friday night and my day has gone something like this:

10:00 - 11:45 - Studio
11:45 - 1:30 - Print
1:30 - 3:00 - Discourse
(Walk home, 30 minute walk)
3:30 - 6:00 - Studio
6:00 - 7:00 - Break! Dinner! TV!
7:00 - 8:30 - Studio
8:30 - 11:30 - Digital Media

Might make it to bed before midnight for the first in three days...

Problem - fonts

2006-11-10T16:17:00.000Z

Knew it was all going too well...

Decided I wanted my blog to fit in with the website, thought I'd use the same fonts to make a banner for the top of the page. Went to Photoshop, tried to find "Sydnie"...it wasn't there.

Ran a search on the computer for sydnie.ttf (the font file). Couldn't find it. Checked my Flash files to make sure I had the right name...yep, it's right there in Flash. So why no Photoshop?

I decided to Google the font and found out that there are some strange goings on. It seems it comes with Quicktime (program to play movie files), but can only be used in Quicktime and sometimes Flash. There are some solutions out that but none of the ones I tried worked...

How is this a problem? Some people have reported finding that the font suddenly goes missing from their computer. I'll put £10 on it happening to me the day before my assessment. So rather than run that risk, I'll have to change the font.

These are my options:

Virus 43
Pixellated style, quite scratchy, but not really "technical".
Out AEG LCD
Lines breaking up the font, like Sydnie. I like the fact there are diagonal lines as well as horizontal and vertical ones. However, the "4" character is a different style
3x5
Broken up by lines, only in boxes, like Sydnie. 4 is the same style. However, letters are curved and not pixellated.

Scene 1

2006-11-09T17:06:00.000Z

This is the Flash movie for the first page of the Project 404 website:

I wanted to make the first page more aesthetically pleasing than the original Project 404 site. My reasoning was that if I encountered a website designed to look as ugly as that (although that was intentional), I wouldn't spend very long visiting. In fact, I would probably close the browser right away. Scaring people away from my artwork probably isn't a good idea. Also, I am feeling much more confident about using Flash than I was at the start of the Semester when I made that site. Flash also offers greater freedom for animation and interaction.

Because I wanted to keep the first page simple, there isn't too much interaction or confusion. I have an invisible button over the entire stage, so that when the user clicks on the stage the second part of the animation is started. Clicking on the button on this "splash" page triggers a "goToAndPlay" command. This plays from frame 2 onwards, and the binary code takes over the whole screen, before it "turns off".

The binary code is a movie clip, which has a total of five frames. Each frame has a different piece of binary code, and the speed at which Flash plays each frame makes it look like the binary numbers are moving. And yes, the binary code does actually mean something if you understand (or know how to translate) binary. :P

Page 1 - colours and fonts

2006-11-08T16:21:00.000Z

This is the first page for the project, which I have made using Flash. I chose to use Flash instead of using HTML and CSS because Flash gave me the ability to animate the page. I also feel much more confident using Flash, so I might be able to make a whole site from it now, as opposed to just embedding animations on a webpage.

Fonts

I selected two sans serif fonts (Trebuchet MS and Arial)for the word "project" and the binary code. For the numbers "404" I chose a more complex font (Sydnie), because I knew that the numbers were going ot be bigger than the letters, so more details could be included.

I like the font Sydnie because when it is enlarged small squares become visible. I think that this adds a technological feeling because it reminds me of LCD displays. For me, the fact that the font is broken suggests some kind of imperfection, that something is not quite right, which is the sort of feeling I want people to have when they visit my work, because essentially I am playing with their expectations of a website by making one that doesn't "work".

Colours
I started with two colour schemes, one with black text on a white background and one with white text on a black background.

The word "project" is lost in the white because both colours requre a lot of light to be visible on the screen. I could consider choosing a darker green for this text, but I think that the intense colour goes well with the darker green, and also helps to highlight the smaller font size used for "project" against the larger one used for "404". The high amount of contrast between the black and white means that the breaks in the font are easy to see, which I like, because the breaks caused by the little boxes are something that attracted me to the font in the first place.

This is the white on black version, which I prefer to the first. The dark background makes all the colours stand out, including the dark green. The lines in the font used for "404" can be seen again using this colour combination. However, once again, because of the brightness of both the white and light green, the definition between the two is lost, meaning it is difficult to read the final letter.

I also decided that sticking to black and white felt quite plain, and made the colours look flat. I decided to try a green background:

Despite the brightness of the background you can still clearly see the white text. I liked the idea of using monochrome, which is why I tried the layout. However, the two shades of green have been lost.

The black text dominates the rest of the layout, mainly because the greens have lost their intensity in amongst the background. Also, there is a play off between the binary code where it crosses over the black text, because there is more contrast in this area where the background isn't green. This makes the binary easier to read, but the overall effect is uncomfortable.

Paying tribute to JODI.org's 404 piece:

The first thing I notice is the horrible clash between the dark green and the red, which just confuses and hurts your eyes! (It's even worse when the numbers are moving!). The bright green sits better with the red because they are both as saturated as each other. The black is easier to read than the white, but that might just be my eyes and my trouble reading red/white combinations.

I decided to try a darker green:

Although the bright green overlapping the white text is still a problem, the darker background helps make both the white and the light green stand out. It also compliments the darker green text on the right.

I tried the dark green background with black text. This has the advantage of making the word "project" stand out - you can read the whole thing because the last letter isn't overlapping white text. However, the contrast between the black text and the background isn't very high, and the black is almost lost in it, and the gaps in "404" no longer show up.

For now I have decided to work with the white text on dark green background. This is because it still makes a feature of the 404 text. However, I like the idea of the 404 being slightly hidden and not as obvious because I think it might link in with the confusing nature of the website I hope to create.

Artist Reference: JODI.org

2006-11-06T21:13:00.000Z

JODI.org is one of the best known net.art sites. Formed by Joan Heemskerk and Dirk Paesmans, they began making artwork for the internet in 1990. Their online work seems inaccessible at first, and only the most persistant and patient users are rewarded with a greater understanding of the artworks.

Their most famous piece of work (at least, the one I have heard mentioned the most) is http://wwwwwwwww.jodi.org/, which appears like a computer glitch, or as though someone inexperienced is making their first attempt at HTML. Close inspection at the source code reveals a diagram of a bomb, made using ASCII art. Of course, this isn't proper HTML code, so the browser renders it as the flashing green mess you are first greeted with.

Computer glitches are a common theme in JODI's earlier work, and a good example of this is 1997's http://404.jodi.org.

First, the page blinds you with it's "retro" background colour, screenshot here in #0000ff, but also available in #00ffff, #ff00ff, #00ff00, and #ff0000 (refresh to change the colour).

Aside from the acid colours, there is very little on the page, so even a novice web user would begin to search to page for somewhere else to click. The first "4" at the top, links to the "unread" page. At the bottom of this page there is a "Re:" button, and a text box for users to input data. When this is submitted, the site removes all vowels from the text, turning it into some kind of alien, computer language. JODI plays on our expectations. We expect the text to appear on the screen as a whole, and it take a few attempts to realise the vowels are removed. And if there aren't enough vowels? Your lack of understanding is reflected in the eternally flashing "F-Failed" page:

Returning to the 404 page, the "0" links to the "reply" page. Again, there is a text input box at the bottom where users submit text. The main frame is made up of a list of numbers (IP addresses). When the user submits a message, it is added to this log along with their IP address. While the IP address appears in green, the message is hidden using black text, making it look as though there isn't any content:

The user with more time and patience to explore the work is rewarded with content that isn't instantly available.

The third link on the index page, "4", is the "unsent" folder. This works in reverse to the "unread" page earlier, as this time the vowels are displayed and the consonants removed.

This piece of work was featured in Internet Art by Rachel Greene:

JODI.org's work - which takes it's name from the web browser error, or, in internet jargon, a "404" - turns interactivity into a futile exercise by using email communication as its focus. The project is split into three sections - "Unread", "Reply" and "Unsent" - each of which frustrates the user by deliberately rearranging or censoring his or her input

Personally, I would disagree with Greene's statement about "frustrating the user". While I can understand why some people, particularly those used to browsing normal websites, would find the site difficult to understand, this was not my experience. I found it interesting to try and figure out how the website was taking my input data and what it was doing with it. For example, my housemate sat there happily submitting things on the "reply" page without realising her comments were being recorded too. It was only when I submitted something and noticed the same IP address being used that we were able to understand what was happening. This felt almost like the artwork mocking those who weren't aware their comments were added; it feels very much like a joke on the user with less knowledge of computers.

For me, the work highlights how having content on the website can draw the users attention to the lack of it. The large "404" on the front page makes you notice the blank background more. The lurid green text on the "Reply" page sits next to hidden text that only users prepared to explore will be rewarded with finding. The lack of content is hightlighted by the very fact that there is actually content there, sitting right beside what is hidden. This juxtaposition is something I could explore in my Project 404 work, and something I touched on last Semester in my Digital Media project (This piece, if you are interested!)

About Project 404

2006-11-03T13:44:00.000Z

What is Project 404?

Project 404 is an online artwork using Flash, for interaction and animation, as well as CSS (Cascading Style Sheets) and XHTML (Extensible HyperText Markup Language).

The work is based around the concept of not having an idea "No Idea", something based on earlier digital work, which can be viewed here: "No Idea" (DML 110). The project explores the pressure of not having an idea in the creative environment using interactive, visual, and sonic elements to immerse the viewer in the project.

The aim is to create an website with minimal content in order to create feelings of confusion or being lost - common emotions for those working in the creative field.

What is the "Project 404 blog"?

The blog is my online journal. As painters produce sketches of their thoughts and ideas, this is a log of my development of a final project. A journal based in the same medium as my final piece seems logical. Also, I'm more likely to keep this up to date because it's easier than screenshotting, printing, cutting, and sticking little pictures in a book. And it won't get lost in the Library.