Showcase research

Bozboz and Soup

Web showcases are all about highlighting and reinforcing the brand identity of the agency involved. The overall style can change dramatically depending on the image the agency want to communicate ranging from youthful and quirky like the local agency “Bozboz”

to elegant and minimalist like the site for the soup agancy. Both sites make use of both horizontal and vertical navigation, soup has its main nav at the side, probably because of the vertical scrolling, while BozBoz prefer a horizontal main nav with a sidebar for secondary navigation that changes depending on the content being shown.

What they share is the upfront positioning of logo and brand elements such as logos and brand names and a technical flare that highlights the skills of the designers involved. In the two examples above the BOZ boz site has its logo in a pretty conventional place at the top left but then features a massive full motion video window below, flying through a matrix of DNA like segments to reveal the companies specialities in branding, web design and motion graphics, the soup site has its agency name in a massive font making a very bold statement of identity, starts with a nifty animation before flying through its one page vertically scrolling setup. The use of slab/sans serif fonts in both sites gives them a sleek modern look although the Soup site tries to mix this with retro elements in its palette choice, two tone, textured backgrounds and icon graphics.

Both pages make efforts to highlight their portfolio of work, Bozboz has a gallery of “featured” clients above the fold on their home page while Soup have a trendy animated accordion setup where project briefs pop up from a menu made of circular holes in the page.

Contact detail are obviously very importanat and Bozboz includes its phone number, email and social links right at the top of the page in the headerThe contact page for both sites features both a map and description of the location as well as email links, phone number and address information, the Bozboz site has in addition a form for enquiries. All elements are rendered in a style consistent with the home page and flashy header graphics are prominent, the soup site makes the map itself a design element by styling it in a sleek dark grey.

 

 

 

 

 

 

 

 

Both sites make attempts to make the whole user experience as attractive as possible, and small design flares are everywhere from the pop out tooltips on sidebar menu hover to slide in animated overlays when mouseovering the portfolio thumbnails.

Soup have a slightly less conventional setup with circular masked thumbs that transition in vertically on mouseover, clicking a link triggers a sort of accordion effect where the whole gallery slides down to reveal the content below.

Both sites are great examples of modern site design, highlighting content and usability while showcasing the design talent and technical proficiency of the authors.

Advertisements

Portfolio ideas

Ok so for my portfolio I wanted to do something a bit flash, I’m not sure if this is a great plan as my skills are not exactly top notch.  So something flash, which isn’t incredibly hard 🙂

Technology to use

First lets have a look at some of the “Flash” things you can do with web sites and the various scripts and plugins that we can use to do them.

1. Jquery Parallax

I’ve used this before which is a bonus I suppose. Allows for a pretty nifty parallax effect where different page elements scroll at different speeds relative to the scroll bar. Last time I used lots of AP divs the size of the screen, stacked on top of each other with transparent PNG’s to make smaller elements. Worked ok but the AP divs shuffled around a lot on different screen sizes making layout pretty basic and a bit of a nightmare.

2. Scrollorama

Scrollarama is a Jquery plugin made by John Polacek. It allows for all sorts of transitions and effects to be linked to the position of the scrollbar. You set out your divs as a long vertical single page, and then using the plugin transform any CSS property you want as the scrollbar descends. Seems pretty intuitive to use and you can have fades and horizontal movement as well as parallax effects. One of the problems I had using the Ian Lunn Parallax method above was that on different size screens gaps might appear between the background divs and that the ap divs appeared in different places. This might help with that.

3. Jquery Scroll path

 Scroll path lets you make a path Using canvas that the browser then scrolls along when you move the scrollbar or link to different pages. Its pretty nifty and does all sorts of thing like rotating pages. The only problem is that I dont know how to use canvas – at all. So this might have some start up time involved 🙂 Would be great to use it in conjunction with parallax though.

4. Sequence

Getting back to Ian Lunn he’s recently come up with “Sequence” a jquery slider plugin that has no inherent styling and allows for parallax elements. Looks like you can make it pretty big so you could use it to fill up the whole top of the screen as Ian has done in some of his demos, doesn’t look like you can slide divs around with it though. It’s more of a straight up slider. Still its got some lovely effects and gradual scrolling.

Other possible Jquery goodness

  1. Blur.js – Nice blurred effect for element backgrounds
  2.  Turn.js – Page turning effect could be good for book layouts
  3. Slabtext – For making and formatting large headers
  4. Sliding panels for images

Styles and ideas

Now some possible graphic styles and perhaps some ideas about how to do them.

1. Woodcut/antique

So using woodcut sort of elements is a bit trendy but I personally quite like the style, it hooks into all sorts of current graphic designish ideas like gothic fonts like Bebas and those sort of retro banner/infographic ribbon/spiky rosette things. It also lends itself to paper texture backgrounds and neutral tones so it could work out quite nicely. I could have some sort of scrollable landscape with quirky flying machines and bits chuffing around, one thing would be sourcing all the diagrams and bits to make up all this stuff…could even animate some in a sort of “cutout” fashion as they move around (no idea how to actually do this)

2. Retro rainbows and ribbons

A sort of colourful retro thing might work. Ribbons spreading out and moving about as you scroll (a bit like an extended “Atari” logo) might be a nice alternative. Again this could be retro’ed up a little with some textures to have a sort of 70’s feel which could be reflected in the fonts. I could have moving elements perhaps scrolling elements like…erm…lines and swirls…hmm…dunno about this it might work really nicely with scroll path js if I could ever work out how to use it 😛

3. Big text

I’ve always liked the clean abstract look you get when you make something in illustrator then zoom right into it. Perhaps I could make something along these lines with parallax polygons moving past each other, perhaps obscuring and revealing content. One thing that might be nice would be to have sections that scrolled past and were made to look like the interiors of machines or engines, like theres a hole in the screen through which the arcane workings of the internet are revealed 🙂

4. Astrolabe

Another idea might be to try and make a site that has lots of crossed elements like from an old astrolabe, the various elements could rotate and reveal content as you scroll (could even use this as a sort of home page then have these bits break apart, leading to a woodcut horizontal scroll as mentioned above…

 

Web 2.0

Web 2.0 is a broadly defined term that describes the move from static websites as simply a source to view or download information to those that facilitate participation, information sharing and collaboration. The term first surfaced as far back as 1999 with Darcy DiNucci’s article “Fragmented Future” where she described it as:

“…a transport mechanism, the ether through which interactivity happens”

but really gained exposure following the 2003 web 2.0 conference hosted by O’Riley Media and MediaLive. In 2005 O’Riley redefined the core principles of web 2.0 in the light of what he described as:

“a huge amount of disagreement about just what Web 2.0 means…”

listing the concepts of “The web as platform”, “Software above the level of a single device”, “The end of the software release cycle” and “Rich user experience” amongst others. Together these ideas describe web content that exists as a fluid, multi-platform, frequently updated service that values the creation of user generated material. A spectrum of web platforms that covers wikis, blogs, social networking sites, multimedia sharing sites and more.

Joopz - A web 2.0 texting site.

The technology that provides the “rich user experience” listed above, turning web pages from stodgy content displays to responsive GUI’s is AJAX. Back in the 1990’s every user action performed on a website required the reloading of the entire page, this was inefficient and slowed down the experience. In 1995 Java applets were introduced that allowed client side  code to handle data asynchronously from the web server, streamlining the experience. The term AJAX however didn’t appear until around 2005 when it was coined to describe the suite of technologies behind some of the Google applications at the time like Google Maps and Google Suggest. AJAX stands for “Asynchronous JavaScript + XML” and incorporates:

  • dynamic display and interaction using the Document Object Model;
  • data interchange and manipulation using XML and XSLT;
  • asynchronous data retrieval using XMLHttpRequest;
  • and JavaScript binding everything together.

Ajax isn’t really a platform in itself, its a suite of technologies used to create a sort of architectural framework for handling HTTP requests. It works by sandwiching a Javascript engine between the user and the server. This engine is responsible for rendering the interface and communicating with the server on the users behalf.

HTTP requests that do not need to be sent back to the server like data validation and some navigation are handled by the engine while those that do like loading additional interface code are handled asynchronously via XML without stalling the user experience.

Web 2.0 has also come to define a particular design aesthetic, one that is characterised by a friendly, clean feel, with bold logos and simple often very subtle use of colour and texture. To identify some of the recurring themes in web 2.0 design let’s take an example site in this case  “Tumblr” the social networking and blogging site.

1. Simplicity – less columns more “white space”

Compared to older websites web 2.0 tends towards layouts that centralise and highlight content. In the example above Tumblr opts for a simple two column layout with the majority of the page given over to user created material. The site is immediately understandable, its pretty much main content and sidebar navigation without any clutter.

Additionally the site elements are spread out so that there’s a lot of plain space both between content areas and the various navigation elements but in the site itself that surrounds the whole site. Compare this to another website, in this case http://www.techlearning.com and you can see how this “Zen” approach to layout pays off.

2. Subtlety – Textures and gradients.

The simplicity of web 2.0 continues over into the use of gradients for content and body backgrounds although gradients also appear on pretty much everything from buttons to logos. In the tumblr example the content background is an almost imperceptible top to bottom fade into the darker blue of the body. Another ubiquitous use of gradients in web 2.0 is the characteristic use of “glass” gradients.  These use simulated reflections or specular highlights to give a tactile feel to buttons and navigation encouraging the user to explore the site. Tumblr uses a very subtle “glass” effect on its login and signup navigation at the top of the page as well as on its logo. In contrast to the distressed look of many “grunge” websites, web 2.0 also keeps textures extremely subtle often using nothing more than a very fine grain, although paper and textiles are also used. The idea is to create interest without highlighting the effect until it becomes distracting. Here on the Tumblr website the grain is so fine is almost invisible making the effect almost subconscious.

3. Letterpress and friendly fonts

The whole idea in many web 2.0 sites is to promote a more human, approachable image.

With this in mind Tumblr has chosen Bookman old style bold for its logo, a serif font and spiced it up with a reflective gradient and some drop shadow. In many ways its going against the grain as many web 2.0 sites prefer san serif fonts to further emphasize the clean, modern feel. For other elements of the site Tumblr has employed drop shadow in other ways making a slim highlight/shadow on opposite sides of the elements making them seem either raised or slightly sunken into the background. This is known as a letterpress effect (taken from the print process) and is hugely popular across many web 2.0 sites.

4. Rounded corners

Rounded corners on content containers/boxes is a favourite of web 2.0. In general they help to soften the look of a site and help the site to seem less boxy and grid-like. For a long time rounded corners were only achievable using a severe amount of CSS fudging or through images but are now relatively easy through CSS3’s border-radius property.

On Tumblr rounded corners are everywhere from the navigation to the user avatars helping to create a smooth, friendly feel that gels with the rest of the site.

HTML and CSS – Part two.

The body tags form a container for just about everything that makes up the content of a site and comes after the head tags in the html container. There is a wide variety of content that can be placed within it such as links, paragraphs of text, lists, images, and forms. Basic text elements can be described using the <p> and <h1> – <h6> tags.

The <p> tag defines a paragraph, text will appear in a default font (Times New Roman) without justification or positioning on the page. These attributes can however be modified using CSS style sheets but we’ll talk more about that later. The p element needs a beginning and end tag and can support various mouse and key press event attributes. Here’s an example:

<p> I am a paragraph, hooray!</p>

The <h1> – <h6> tags define different levels of heading. The <h1> tag describes the main heading and is formatted in bold with a larger font size. The subsequent <h2> – <h6> tags display headings at a gradually reduced size in descending order. Heading elements are not just used for visual purposes but provide a broad structure to content that some programs can use to generate outlines or tables of contents. Like the <p> element the formatting of the <h1> – <h6> elements can be changed with CSS. <h1> – <h6> tags need both beginning and end tags and look like this:

<h1>This is an important heading, grrrr!</h1>

Information can also be presented as a list, there are various form of list that can be defined, the two most common being ordered and unordered. An ordered list has numerical values attached to the content while the unordered has bullet points marked with small discs (changeable in CSS). The syntax for both types in HTML is the same a pair of tags defines the beginning and end of the list while a separate pair of tags the <li> element describes the content, a list item. For example:

<ul>                                                                                                                                                <li> I am a list item, in no particular order</li>                                                                                  <li> So am I, how quaint</li>                                                                                                        <li> What a coincidence I am too</li>                                                                                                    </ul>

To include images in the body of a web page they must be linked. For this we use the <img> tag, it’s a void element without an end tag. The <img> element consists of two parts, the first is the src attribute and identifies the URL for the linked image. The second, the alt attribute, specifies alternate text for the image if the image cannot be displayed. It is worth noting that safari and Google chrome will not display the alt attribute. Here’s an example with the image in question being found within the images folder of the website.

<img src=”images/main-image.jpg” alt= “main image”/>

Properties like the width and height of an image can be specified in the HTML or controlled via CSS. To set the image dimentions in the HTML code the attributes are simply entered after the alt attribute as follows:

<img src=images/main-image.jpg” alt=”main image” width = “900” height =”300″ />

The dimensions are described in pixels. Img elements, like <p> elements support a range of mouseover and keypress event attributes. They can also be used as hyperlinks.

Links on web pages are usually described in HTML within the body container using the <a> tag. The a in this case stands for anchor and is used to set up relationships between elements. This relationship can take the form of a link to another document or a link within the document like a sort of bookmark. When using the <a> element the type of link is specified within the opening or beginning tag, after this comes the content that forms the link followed by the end tag. To create a link to another document the href attribute is used as follows:

<a href=”http:www.linksrus.com”> This is a link! </a>

In this example the text “This is a link” is anchored to the URL http:www.linksrus.com. By default all links are appear in the same way. An unvisited link is underlined and blue, a visited link is purple and underlined while and active link is red and underlined. To link to another element within the same page it’s a bit trickier but not by much. To do this first the name attribute is used within the opening a tag of the element to be linked to like this:

<h1><a name=texttofind>I am what you are linking to</a><h1>

Then after this element has been named you can link to it using the href attribute by specifying its name like this:

<p><a href=”#texttofind”>Go find me some text</a><p>

This will display the text “Go find me some text” as a link and when clicked it will take you to the heading “I am what you are linking” (as long as its on the same page).

One of the most important tags included in the body of a web page is the div tag. The div tag does not directly represent an element on the web page, instead it is used to group other elements together so that they can be formatted with styles. Div is a normal element with both beginning and end tags, the beginning tag of a div can have the style attribute included to change the formatting of the contents of the two div tags.  Div is also block level container meaning that there is a line feed after the <div> tag. Another formatting container that is similar is the span tag, this acts in a similar manner to the div tag but does not have the line break and can be used to apply formatting to say individual characters if desired. Here’s an example of how div tags work:

<h1> I am a header </h1>                                                                                                                    <p> And I am a paragraph</p>

<div style=”color:#00FF00″>                                                                                                                 <h1> I am a header but im inside the div! </h1> <p>                                                                              I am a paragraph but I’m also inside the div! </p>                                                                               </div>

In the above example the style attribute within the opening tag of the div container changes the formatting of the second two sentences, in this case changing them to a green colour. The first two lines of text are unchanged. In this case the styling for the div is inside the HTML itself however is often used along with id and class attributes in specifying content to be styled by CSS rules. Which brings us nicely to.

CSS

CSS stands for cascading style sheet, it was developed in December 1996 by the World Wide Web Consortium as a way to separate the styling of web page elements from their content. As we saw previously style information can be placed directly into the html code as with the div example. However this was leading, as pages became more intricate, to large and unwieldy code, hence the need for CSS.

CSS information can be defined in the header of a web page, although this means less work than including style information in the HTML code itself it still means a large amount of code all in one place, this led to the use of external style sheets that save the styles of HTML elements in a separate file.

CSS determines the styling of HTML elements through the use of rules. These rules are made up of two parts, the selector and the declaration. The selector corresponds to the HTML element you want to style and the declaration consists of pairs of properties and their corresponding value. Here’s an example:

p {font-family: “Palatino Linotype”;                                                                                                    font-size:18px;                                                                                                                                                }

Here the selector is “p” meaning that this CSS rule will be applied to all text within <p> tags in the HTML. The second part of the rule contains two style pairs the first specifies the font in this case “Palatino Linotype” the second the font size in pixels, here it’s 18. Note that the  break between the declaration pairs is marked by a semi colon, while the end of each pair is marked with a colon. The entire rule is contained within curly brackets.

This all well and good applying the same rule to all instances of HTML elements but often you will need to apply CSS rules to separate groups or individual instances of an element. For this we use class and id selectors. In the HTML class and id take the form of attributes contained within the opening tags of an element.

<h1 id=”mainheader”>I am a main header</h1>

<p class=”paragraph1″>I am some paragraph text </p>

Although they are used the same way the id attribute is used to describe a single, unique element while the class attribute can be applied to many elements so that they are all formatted the same way. In the CSS sheet declarations of a CSS rule are applied to id elements by using a # and the id name given to the element as follows:

#mainheader {font-family: Arial;                                                                                                        font-size 20px;                                                                                                                                                 }

Elements defined as a class have their rules set out in CSS following a full stop. As in the following:

.paragraph1 {font-family: molot;                                                                                                      color: #00FE24;                                                                                                                                      }

Using combinations of class and id especially in conjunction with div tags to group content styling and position information can be applied to all the various HTML elements that make up a page. Changes can then be made to the style sheet to amend and develop the page without having to go into the code and change the HTML line by line.

HTML and CSS

HTML (Hypertext markup language) forms the basic building blocks of web pages. Originally developed by Tim Berners Lee, a CERN physicist as a system to share simple documents, HTML now forms the backbone of the worldwide web and has significantly improved functionality and capabilities.

The manner in which HTML describes web pages is by using sets of markup tags. HTML tags are keywords surrounded by brackets and usually come in pairs, here’s and example.

<p> I am a paragraph, so rad. </p>

The first tag is known as the start tag or opening tag, the second is known as the end or closing tag and differs from the opening tag by the inclusion of a slash before the name of the element within the angle brackets. The tags are read by the browser and are not displayed, instead they indicate how the browser should interpret the content between them. This is the format for both Raw text and “normal” elements, there is a third class of element known as void elements that only have a start tag, This class of element contains attributes as in the following example.

<link rel=stylesheet href=superrad.css type=”text/css”>

This element would instruct the browser to link a stylesheet to use when presenting the HTML page to the user.

HTML tags can be nested within each other and in fact this nesting forms the basic layout of the code for constructing a web page as a whole. The “bottom level” or root element consists of a pair of <html> tags, this contains all the other elements and tells the browser that it is dealing with an HTML document. Before the <html> tag, at the very start of the code is a <!DOCTYPE> declaration that tells the browser what version of HTML is being used. Within the two <html> tags  the basic structure of the page is created.  This is formed firstly by the inclusion of <head> and <body> elements. here’s what this looks like.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;                                                 <html>                                                                                                                                      <head>                                                                                                                                          <title>Title of the document</title>                                                                                        </head>

<body>                                                                                                                                             The content of the site…                                                                                                            </body>                                                                                                                                            <html>

The head element is read by the browser but not displayed. It contains scripts to be downloaded to the client and run on the page, information on where to find style sheets the title of the page and other meta information. The title element defines a title in the browser toolbar provides a title for the page when it is added to favourites and for when it appears in search engine results. This last point makes the content of the title element quite important as it has a direct relationship to the ranking of the page within search engines and therefore potentially the amount of people that will visit.

<title>I am a title, look for me search engine!</title>

Also included in the head section of a page is the link element. The link element describes a relationship between a document and an external resource. The link element is an example of a void element and does not have a end tag. A link element is further defined by several attributes. The rel and rev attributes specify either forward or reverse link types, the href implies a URL for a linked resource and the type attribute describes the type of content being linked to. Link elements in the header are often used to link to style sheets that control the appearance of a page for example:

<link rel=”stylesheet” type=”text/css” href=”Project3.css” />

Provides a link to a document of a recognised format “stylesheet” that is of a “text/css” type at location “Project3.css” within the site.

Another void element placed in the header are the meta tags. These provide data “about” data in the form of keywords and descriptions. They can include general descriptions of the content of the site or information as to when it was last modified or who the author is etc. Meta information can be extremely important to search engine optimisation as it will be looked at to determine the relevance of the page to keyword searches. Meta information is always read as name/value pairs indicated by the terms “meta name” and “content” here’s a few examples:

<meta name=”keywords” content=”website, college project, web design, HTML, meta” />

This would be used to associate the name “keywords” with the text “website, college project, web design, HTML, meta” The following:

<meta name=”description” content=”Essays and writings on the format of HTML” />

This would provide a description of the site as Essays and writings on the format of HTML. Description meta information is not used by Google, Yahoo or Bing to determine search rankings but it does appear under the link on a search page and if your page has “extended site links”. It is also used as a default site description on social networking sites like Google+ and Facebook.

The script element is used to define a client side script to be run such as Javascript. They may be loaded as soon as the web page is loaded or due to other actions such as the selection of a link or the movement of a mouse. They can be linked to forms to process input or dynamically update the values of other fields or linked to form control to provide UI elements. Script elements have a beginning and end tag and can contain attributes that specify the type of script to be run, the character set used and whether or not to defer the loading of the script until the page has loaded. Here’s an example:

<script type-“text/javascript”>                                                                                                          document.write (“I am a script”)                                                                                                    </script>

Scripts like this one contain the scripting statements within them, it is also possible to link to external scripts through the src attribute.

Ethics, law and the internet.

The question of how the law should be applied to activities and content on the Internet seems to be an undertaking that has enjoyed a greater degree of success than any attempt to apply standards of ethical behaviour. There have been, throughout the history of the service numerous legislative precedents that illustrate the fact that many activities on the Internet are already subject to conventional legislation. Laws regarding child pornography, gambling, theft and fraud have all been regulated in similar ways both off and online. However as the net is an international entity the application of law can be very different depending on the country in which the action is brought. This applies especially to areas of defamation, free speech and indecency. In America for example section 230 of the communications decency act provides immunity for service providers online from legislation regarding  defamatory content provided by a third party. This has been upheld on numerous occasions most recently in Milgram v. Orbitz (2010) In the UK however, following Keith Smith vs Williams (2006) and Godfrey vs Demon (2001) ISP’s have to prove that they were unaware of any offensive content or be held accountable as publishers. Free speech is like wise an extremely contentious issue depending on your location when posting. Although protected under Article 19 of the the international declaration of human rights numerous countries including China, Singapore, Iran Tunisia and Saudi Arabia employ both legislative and code based systems to prevent access to information and prosecute authors regarded as having distributed information counter to governmental concerns.

Another concern of Internet law is that of copyright. Most information contained within a web page is considered intellectual property and is therefore protected by law. Issues of copyright online are governed by the Berne convention and an international organization called the World Intellectual Property Organisation financed by the UN. This international basis for legislation avoids the confusion exhibited in other forms of law depending on the location of the infringement. In terms of website content, links, text graphics, audio and video as well as unique HTML markup sequences are protected. Logos can also be considered trademarks and are therefore also included. Interestingly including trademarked names in metatags is not an infringement of copyright. Protection is automatic through displaying of the work with the international copyright symbol “©” the name of the owner and the date. In the UK the term of copyright is the lifetime of the author plus fifty years from the publication of the creation. The WIPO also provides support in association with the Internet Corporation for Assigned Names and Numbers against “Cyber Squatting”, the practice of registering a domain name for profit without actual use and contributed on the release of the Uniform Dispute Resolution Policy that provides a means of resolution for domain name disputes. It also initiated the treaty that formed the basis for the Digital Millenium Copyright Act. This act was decisive in the closure of services such as Napster in the 1990’s but has had limited success in reducing distribution of copyrighted material due to its vague handling of links to copyrighted materials and the increased decentralisation of file serving in clients such as BitTorrent. The current American administration is seeking to remedy this with the introduction of the Stop Online Piracy Act (SOPA) a move that would require Internet providers to block access to site deemed to be in distributing suspect material, this move has been heavily criticised as “draconian” and a threat to freedom of speech.

Protected under article 8 of the European Convention of human rights in the UK, the Information Technology Act in India and the Electronic communications privacy act in the US, privacy is another area of law is increasingly relevant to the Internet.There is rising concern regarding the use to which information collected from tracking cookies, search engines and social network sites is put especially when the information is used to created a profile of an individual. The 2007 case of Lane vs Facebook highlighted the irresponsible handling of such information after the social networking site began to publish personal information regarding Lane’s shopping habits without his consent. Google street view has also been criticised for distributing photos of individuals which have in some cases led to problems in their private lives. Threats to privacy on the Internet have also come from official sources. The FBI back in 2001 introduced the Magic Lantern trojan, a worm that logged keystrokes and in 2009 the UK home office instigated a plan to allow police access to individuals computers without a warrant. Any information found can then be used as evidence in court. These policies have drawn severe criticism from human rights campaigners. In a recent turn around thousands of governmental diplomatic documents have been posted online on the wikileaks site causing a furious response from politicians

Attempts to regulate ethics on the Internet seem to be successful only when behaviours encroach on matters of law as described above. That hasn’t however stopped a few organisations from trying. In 1989 the Computer ethics institute published a memo titled “Ethics and the Internet RFC 1087”. This was an attempt to protect the us government’s investment in the Internet from being “used irresponsibly”. They have since drafted the “Ten commandments of computer Ethics” which are as follows.

1. Thou Shalt Not Use A Computer To Harm Other People.

2. Thou Shalt Not Interfere With Other People’s Computer Work.

3. Thou Shalt Not Snoop Around In Other People’s Computer Files.

4. Thou Shalt Not Use A Computer To Steal.

5. Thou Shalt Not Use A Computer To Bear False Witness.

6. Thou Shalt Not Copy Or Use Proprietary Software For Which You have Not Paid.

7. Thou Shalt Not Use Other People’s Computer Resources Without Authorization Or Proper Compensation.

8. Thou Shalt Not Appropriate Other People’s Intellectual Output.

9. Thou Shalt Think About The Social Consequences Of The Program You Are Writing Or The System You Are Designing.

10. Thou Shalt Always Use A Computer In Ways That Insure Consideration And Respect For Your Fellow Humans.

As mentioned before many of the above in some way relate to the statutes already in place regarding privacy, copyright, decency and defamation. The rules have been adopted by many educational and professional institutions including the Systems Security Certification Consortium (CISSP) if not, perhaps, by the majority of Internet users.