Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Sunday, September 9, 2012

Web206: Topic 1.3: Cut, Paste and Copyright (and Information Overload)

Image courtesy of http://www.flickr.com/photos/dermartin/2955625983/sizes/m/in/photostream/
Attribution-NonCommercial-ShareAlike 2.0 Generic (CC BY-NC-SA 2.0)

Information Overload

Information overload is a concern these days with so much information available on the Internet. Back in the days before the Internet when everything was printed - printing costs were high and demand and accessibility for certain material was low. Nowadays because EVERYTHING is available online and mainly for free, how do we filter out what we don't want? How much time do you spend deleting spam from your inbox? How many ads do you avoid while surfing the net? How much do you believe? Who are trusted, reliable and credible sources? Most things published online have NOT gone through an editor or a gate-keeper so people are able to air their grievances and express their opinions to anybody around the world.


Video: Clay Shirky's "It's not information overload, it's filter failure"


Video courtesy of http://www.youtube.com/watch?v=LabqeJEOQyI

My notes from this video:
  • Facebook has one of the BEST thought-out and executed privacy management tools of all the social networking sites. What the problem is though is that managing our privacy is an unnatural act - it isn't something that anybody is good at setting up and doing
  • Privacy is a way of managing information flow
  • We don't tend to worry about having a discussion with a friend in the street and somebody overhearing us. But we do worry about what is 'overhead' online, ie. status updates and relationship statuses on Facebook
We have had information overload in some form
or another since the 1500s.
What's changing now is the filters we used for most of that
500 year period are now breaking (Shirky, 2008).



Copyright

Everything we write is almost always based on something that someone else has written. Privacy is the infringement of copyright, while plagarism is the failure to give credit. If we are repeating something another person has said - we need to credit that person - EVEN IF they stole it from somebody else!

As a Web Designer we need to think about the images and content we create. Do we want others to be able to share our images? Re-use them? Modify them? Or make money from them? We need to either copyright our designs (visual or text) or apply a Creative Commons Licence. This needs to be enforced for future Internet users. Generations to come need to be aware of the dangers and penalties of copyright - whether we agree with the current copyright laws or not!

Lawrence Lessig (US lawyer and anti-copyright campaigner) is well known for his stand on copyright legislation and believes we need a reform because the current copyright laws are smothering creators. Creators are not able to express themselves without the fear of being penalised for plagarism. He believes creativity is not based on coming up with completely new ideas, but from modifying existing ideas. Everything old is new again.

Berry states "the paramount claim of Lessig's prognosis about the fate of culture is that we will be unable to create new culture when the resources of that culture are owned and controlled by a limited number of private corporations and individuals (Berry, 2005). He goes on to say the Creative Commons network might enable sharing of cultural goods and resources amongst possessive individuals and groups. But these goods are neither really shared in common, nor owned in common, nor accountable to the common itself. It is left to the whims of private individuals and groups to permit reuse.

Berry isn't a fan of Lessig and believes that Lessig's attempt to make it easier to understand which creative works can, or cannot, be used for modification has spawned a monster with a thousand heads and resulted in a more complex issue as the current copyright act (Berry, 2005).

As a web designer not only do we need to consider copyrighted images, but also code from other websites. Consider for instance the common practice of downloading html tags that define the layout of a website. Even if you don't include any of the content and only use the html and css coding to style a new webpage - is that copyright infringement? Are web designers obligated to give credit to the original author? What if that author stole it from another...and from another...and so on? The copyright issue in this situation is unclear (Snapper, 1999).

Plagiarism harms the author who receives no credit, but unless there is also copyright infringement, an author has few legal grounds for claiming economic loss for a plagiarised use of his work. There is no direct financial harm.

Snapper believes that the actual harm is not to the author, but to the reader. If sources are not credited - the reader can do no further research via the (un)credited sources.

An interesting point which Snapper raises is although academics write a great deal and profit from their writings with academic recognition, they rarely expect to make much money from copyright licenses.

And another...electronic publications lowers both the cost and the financial risk of publication, and therefore suggests that the electronic publication industry needs fewer copyright protections that the hard-copy publication industry (Snapper, 1999).

It is more likely that as the Web becomes a more important tool for research and distribution of information, we will see a slight shift in the importance that is attached to piracy and plagiarism. In order to protect the scholarly community against plagiarism in cyberspace, we may need to lessen the property protections of the copyright owner in cyberspace.

Snapper asks this in relation to Fair Use:

Scholars should be able to keep a copy of a source -
but this is considered plagiarism.
Therefore it would seem reasonable that copying
for the sake of archiving electronic information
be seen as 'fair use'.


An interesting question from Clay Shirky on the topic of information overload, but I think it suits the current copyright laws:

If we have the same problem for a long time -
maybe it's not a problem - it's a fact (Shirky, 2008)!




Sources of images

As a Web Designer I am always trying to source images to use which are permitted or licence free. This presentation was created by a fellow student, Katrina Comyns. She discusses remixing and re-using stock images and explains the difference between licenced, free and royalty free.




Here is a list of sources which offer free, royalty free, licence free, or paid images:


References:

Berry, D (2005) On the 'Creative Commons': a critique of the commons without commonalty. Retrieved from http://fsmsh.com/1155

Comyns, K (2012) Un-complicating the complex world of remixing and reusing Stock Photography - A guide for graphic designers. Retrieved from http://prezi.com/aowz1lv9k-pm/un-complicating-the-complex-world-of-remixing-and-reusing-stock-photography-a-guide-for-graphic-designers/

Shirky, C (2008) Web 2.0 Expo NY: Clay Shirky (shirky.com) It's Not Information Overload. It's Filter Failure. Retrieved from http://www.youtube.com/watch?v=LabqeJEOQyI

Snapper, J (1999) On the Web, plagiarism matters more than copyright piracy. Dept Humanities, Institute of Technology, Chicago.


Sunday, February 26, 2012

NED11: Module 2

Notes from Unit Outline
When the internet was first established the four most common utilities were Email, Newsgroups (Usenet), Telnet (command line interface) and FTP (file transfer protocol).

The World Wide Web was invented by Tim Berners-Lee and released in 1991. Here is the world's very first web page.

Gopher was introduced around the same time by Paul Lindner and Mark P McCahill at the University of Minnesota. It was the first internet hypertext system - and only text. Here is the last remaining Gopher entry point.

The WWW was initially used in the form of text-only interface due to modem speeds, however now with faster internet speeds, images and other data can transfer much faster.

Every computer has it's on IP address and every website has it's own URL (uniform resource locator). Here is quite a bit of information on the history and the purpose of URL's. Let's break down a URL to understand it better. Take a look at this URL:

http://www.curtin.edu.au/curtin/dept/design/index.html

http = protocol
www = server name
curtin = domain name
edu = type
au = country
curtin = directory
dept = sub directory
design = sub directory
index.html = file name.

To register a domain name in Australia - there are many sites to do this. This is one. This is the one I used to register mine. To register international domains you can use this one, but there are many. A simple Google search will show many many results. The Internet Corporation for Assigned Names and Numbers shows the 'type' extensions, why and when they were all created.

Web Design Basics:
To begin building a website using html code, you need a text editing program. As I use a Mac computer, I downloaded the free Text Wrangler. There are many available. Google 'text editing program' and there are many free and paid versions.

In addition to using a text editor, it is a good idea to test your coding in more than one browser. I use the default browser, Safari and also downloaded Mozilla FireFox for Mac. The beauty of FireFox is you can also download additional plug-ins which are great for designers. I particularly like the add-on called ColorZilla. When you come across a colour on a webpage that you like - click on the ColorZilla tool, click on the colour and the html colour number is saved to a clipboard. Then when you return to your text editor to change the colour of your font or background - you have the html colour number ready to insert.

Here is an image of some html coding in Text Wrangler:

Here is what the above html code looks like in Safari:

And here it is in FireFox:

If you look closely you will see a difference between how the Safari browser displays the html code to the FireFox browser. The html code is identical with the exact same font type and font size, however it DOES look different. For interest's sake - have a look at this blog in more than one browser. It should differ in appearance - maybe a slight colour variation or font type or size. The more browsers you can test your coding in - the better! This exercise is taken from our textbook 'Head First HTML and CSS' by Freeman and Freeman. I will be working my way through this text book during NED11.

So what exactly is HTML?
HTML documents are plain-text (also known as ASCII) files that can be created using any text editor (e.g., Emacs or vi on UNIX machines; BBEdit on a Macintosh; Notepad on a Windows machine). You can also use word-processing software if you remember to save your document as "text only with line breaks." (Information courtesy of http://www.put.com/HTMLPrimer.html).

Here is a very brief example of necessary html code required for a website:
<html>
    <head>
    <TITLE>A Simple HTML Example</TITLE>
    </head>
    <body>
    <H1>HTML is Easy To Learn</H1>
    <P>Welcome to the world of HTML. 
    This is the first paragraph. While short it is 
    still a paragraph!</P>
    <P>And this is the second paragraph.</P>
    </body>
    </html>

If you want to learn html, there are many tutorials online. I would suggest starting with the W3 Schools.  This is also another good beginner's guide.

Exercise 1: Web Design Basics
  1. The above code contains tags which make up the basic structure of an html document
  2. The <p> tag denotes the start of a paragraph
  3. The difference between a <p> tag and a <br> tag is that a <p> tag puts a line break above and below the text - similar to starting a paragraph. Whereas the <br> tag only does one line break below the text
  4. To create a bulleted list you use these tags: <ul> <li> and </ul>. The <ul> tag means unordered list and <li> means list
  5. To create a numbered list you use these tags: <ol> <li> and </ol>. The <ol> tag means ordered list
  6. When you open your browser and go to a website you will notice a title in the browser header (or the tab header if you use tabs). Look up! See the name of this blog in the browser title? This title is provided in the html coding in this way <title>Blogger: Internet Design Units</title>
  7. To add an image to html coding the required element (or tag) is <imgsrc="nameofimage.jpg">
  8. To add a link to html coding the required element is: <a href="URLhere">
  9. To make an image a clickable link you need to put the <img> element inside the <a> element. You need the URL of the site you want the image to take you to when clicked on AND the location of the image file. The code is entered like so: <a href="sitetogotowhenclicked"><img src="locationofimage.jpg"></a>. Don't forget to close your a href element with </a>
  10. The coding required to make a table 3 columns x 4 rows is:
<table>
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
<td>row 2 column 3</td>
</tr>
<td>row 3 column 1</td>
<td>row 3 column 2</td>
<td>row 3 column 3</td>
</tr>
</table>

Definitions:
<table> begins the table and </table> ends the table.
<tr> is the beginning of a table row while </tr> ends the table row.
<td> is the table data cell. This is where the actual information is entered. </td> ends the table data cell.

Exercise 2: HTML Introduction
  1. To provide invisible information in a html document, you type the element: <!--hidden text here-->
  2. Spaces between words should be entered as %20 so they are displayed properly. It is also important to ensure you use <br> and <p> effectively so your text appears as the browser exactly as you typed it in the html document
  3. You can provide additional information in your html document in the form of a small pop-up message when you hover your mouse over it. The tag is written like so: <img src="urlofimage.gif" alt="here is the pop-up message">
  4. You can create a link that jumps to a different section of the same page by using the <a> element as a landing point. There are three steps to this. Firstly find the location on the page where you would like the landing point to be (like a heading) and wrap a short piece of text in an <a> element. Then choose a name for this section of text like "jump to here" and insert an id attribute into the point you want to jump FROM, like so: <a href="URLofpagewithlandingpoint.com#landingpoint"FROM HERE</a>. This lesson on w3schools shows an example
  5. To show a table with empty cells you need to indicate the border width like so: <table border="1">. This creates a table with a border thickness of 1. The higher the number - the thicker the border
  6. To turn an image into a hypertext link you need to embed the URL of the image within the <a href> element. You can add a border around the image by using the element <img border="3" src="image" alt="URL" width="32" height="32"/>. Once again, the higher the number - the thicker the border
  7. To change the colour of hypertext links use this tag: <body link=#ff0000>. This will change all links to the colour red.
  8. To change the background colour of text, you need to add this html: p style="background-color:#FFFF00">. The colour is determined using the HEX value. HEX means the number used to identified colours used on the internet. Here are the HEX values of all colours.
A very useful tag:
To add an 'email to' link to a webpage, use the following tags within the body of html:
    <p>
    This is an email link:
    <a href="mailto:someone@example.com?Subject=Hello%20again">
    Send Mail</a>
    </p>