Introduction To Computational Media on the Web (ICM-W) : Week 1

WHAT IS COMPUTATION..?

Computation Wikipedia Definition
Computation can be defined as finding a solution to a problem from given inputs by means of an algorithm (sequence of instructions)

The first use of the word "computer" was recorded in 1613, referring to a person who carried out calculations, or computations, and the word continued to be used in that sense until the middle of the 20th century. from: Wikipedia: History of computing hardware

COMPUTATIONAL MEDIA..?

Media Wikipedia Definition
Plural form of medium. A truncation of the term media of communication, referring to those organized means of dissemination of fact, opinion, entertainment, and other information.

Using computers to create and disseminate something..

  • Art
  • Communication
  • Entertainment
  • Education

    • ON THE WEB..?

    WEB is short for World Wide Web: collection of interlinked hypertext documents accessible via a protocol called HTTP (Hypertext Transfer Protocol) via the Internet

    A Means of Dissemination?

    So.. Why? What are the strong points of using computational media on the web?

    Collaborative
    Efficient
    Interactive
    What else?

    Drawbacks?
    isolating?

    Some questions:

  • Can a painting be interactive?
  • Is the experiece of interactive art different for each user?
  • Is it an echo chamber?
  • What happened to all of my time?

    • What is programming?

    Creating a sequence of instructions to enable something to be accomplished.

    We are all natural programmers specifying instructions for ourselves and executing them.
    We program all day long, usually subconsciously but never-the-less we are doing it. Everything from telling our feet to walk the 12 ft to the door way, opening the door if it is closed and walking through to your brain or central nervous system telling your body to breathe on a regular basis. Inhale, exhale, inhale, exhale...

    Programming typically involves using the following constructs to create an algorithm (the instructions):

  • Conditionals - Testing an equation to see if it is true or false and executing a set of instructions based upon that result (see the if statement above)
  • Iteration - Repeating a set of instructions over and over again. More commonly referred to as a loop. (see the breathing example)
  • Variables - A symbolic representation of some value which can change or vary. (In algebra you used variables in equations, like y = x + 6. A more complete example would be: Given x = 5, y = x + 6, what does y equal?)

    • Other important concepts in programming are Data Structures which include things like Objects and Arrays and Functions for making pieces of code reusable.

    Everything you need to learn in this course, you will learn in the first 4 weeks
    The rest you will be able to pickup having learned the foundations.

    People vs. Computers

    Raed Tihs Snetnece

    Congratulations, you are not a computer.
    Computers are not very good at this.
    People generally have no problems what-so-ever.
    Computers need precise language.

    Syntactical Errors (or syntax errors) are often the result of people skipping over portions and filling in the blanks because we understand. Computers, just don't understand, you have to be very explicit.

    Pair Programming

    Have no fear, there is a way to remedy this situation. Pair programming involves teaming up with another individual while you are programming. Generally one person is the driver and the other the back seat driver looking over the driver's shoulder. One person is dealing with the mechanics while the other is checking them and keeping an eye on the overall program.

    We will start out using pair programming (next week). Towards the end of the semester it will be up to you whether or not you would like to work in this manner.

    Languages

    High level and Low level.

    High level languages are those that are closest to our (human) language whereas low level languages are closest to what the machine understands. Low level languages are generally faster, written specifically for the computer and high level languages often go through a series of translations, interpreting the code and rewriting it at a lower level before the machine actually runs it.

    All programming languages have both weak and strong points. Perl for instance is structured to make it very easy to do text parsing whereas PHP is great for writing web based applications. Both are high level languages and are interpretted but that is more than made up for by their utility.

    In this course we will be concentrating on learning JavaScript, a high level language that runs in web browsers on the client side as well as PHP which typically runs on web servers.

    HTML

    HTML stands for HyperText Markup Language. While not a traditional programming language, it is the language that is used to create web pages. Typically a markup language is used to define the structure and display of content, HTML is no different.

    To write HTML, one of the first things you will need is a plain text editor. Most operating systems come with this capability built-in (TextEdit on the Mac and Notepad on Windows). While these applications work fine, there are some benefits to using a programmer's text editor such as TextWrangler on the Mac or TextPad on Windows.

    The benefit of these is that they have line numbering, syntax coloring and other benefits that will make it easier to work with.

    Tags

    HTML is a tag based language. This means that you define the structure of the content of a document using tags.

    Here are some that we'll start with:

    <html>...</html> Start and end HTML
    <head>...</head> Head of page, not actual content
    <title>...</title> Title of page
    <body>...</body> Body of page, where the content goes
    <div>...</div> Content section
    <p>...</p> Paragraph
    <b>...</b> Bold
    <br /> Line break
    <H1></H1> (Also H2, H3, H4, etc..)
    <!-- ... --> Comments
    <blink>...</blink> Make your text blink
    <a href="http://...">...</a> Link to another page. The "href=""" portion is an attribute. Many tags have optional attributes.

    Here is the source of an HTML example page: 
    <html> <!-- Start the HTML -->
	<head> <!-- Start the Head -->
		<title>This is a Web Page</title> <!-- The Title of the page, start and end tag with text in-between -->
	</head> <!-- End the Head, always with a "/" -->
	<body> <!-- Start the body -->
		This is where you would put the content of the page. <!-- This is a comment and won't display -->
		This will be on the same line as the above.  To specify a line break, you use: <br /> <br />
		<!-- The above text displays both a <br /> and has this funny code: <br />   That funny code allows us to display the special characters that are typically used to define a tag so that we can display them without the browser actually thinking they are the start and end of a tag.  This symbol:  < is written as < meaning "less than".  This symbol: > is written as > -->
		This text will be a line down
		<br /><br /> <!-- Two line breaks --> <!-- Line break tags include the closing "/" as part of them, there isn't a </br> tag. -->
		<blink>This Text Probably Doesn't Blink</blink>
	</body> <!-- End the body -->
</html> <!-- End the HTML -->

    See this page

    To try this out, copy the above into a new text file and save it as something.html then open it in a web browser to see it.

    More Information:
    HTML Special Characters
    HTML Tag Reference: http://www.w3schools.com/tags/default.asp
    HTML Cheatsheet - Webmonkey: http://www.webmonkey.com/reference/HTML_Cheatsheet
    w3schools.com HTML Tutorial

    Comments

    Comments are very important to programming. They allow you and others to understand your code. You should immediately get into the habit of commenting everything you do. Comments in HTML start with <!-- and end with -->

    Nesting

    As you see in the above example, HTML tags are generally nested within each-other. For instance all of the content you want inside the body of the page is nested within the body start and end tags.

    Indenting

    Indenting isn't strictly required but it really helps YOU to see the nesting structure of the document. What is inside what and gives you the ability to quickly recognize when you missed closing a tag.

    Attributes

    Tags, such as the <a> shown above can have "attributes". In the case of the <a> it is "href" which indicates the URL that the link should be to. Other common attributes are "id" and "class". "id" allows a specific tag/element on the page to be referenced through JavaScript or CSS (which we'll cover later). "class" is useful when using CSS to define the design of the page.

    View Source

    View Source one of the very fundamental things that made web publishing very successful in the beginning was the inclusion of "View Source" in most web browsers. This allows people to look at the HTML of a page they are viewing so as to understand how it was constructed and learn how to do similar things themselves.

    Uploading to a Server

    While you can view this page from your computer by simply opening it in a web browser, in order for other's to see it you need to place it on a "Web Server". ITP provides each of us with space on our server "itp.nyu.edu" to place web pages.

    To do this, you need an SFTP (secure file transfer protocol) client application (Fetch, Fugu, WS-FTP). NYU's ITS group has serveral pieces of software available for download for free including various text editors and SFTP clients: https://www.nyu.edu/its/software/

    The server you will connect to is: itp.nyu.edu Your username is your net-id, your password is your net-id password (if you don't have a net-id password setup you need to go to http://start.nyu.edu). The protocol is SFTP.

    When you connect, it will place you in your "home" directory. Inside that directory there will be another folder called "public_html". Inside this folder is where you would put any web pages you create.

    Any page that you put in there can be accessed via a web browser by going to this URL:
    http://itp.nyu.edu/~NETID/pagename.html

    If you create another directory inside of "public_html" you indicate that page in your URL like this:
    http://itp.nyu.edu/~NETID/directoryname/pagename.html

    This URL is also what you would use in a link from another page: <a href="http://itp.nyu.edu/~NETID/directoryname/pagename.html">Link to my page</a>

    Images

    To place an image in a page, you use a URL in the "src" attribute:

    <img src="URLTOIMAGE" />

    <img src="animage.jpg" />
    or
    <img src="http://itp.nyu.edu/~sve204/animage.jpg" />

    Here is an image:


    CSS

    CSS was introduced as a way to separate the design of a page from the structure of the content on the page. It allows you to specify position of elements, color, fonts and other related design like aspects.

    One of the attributes for many of the tags available in HTML is "style".

    The style tag allows you to define CSS in-line with HTML

    Example: <div style="font-size: 10pt; color: #550000;">This is 10pt. Text and red</div>

    This is 10pt. Text and red


    A more common usage of CSS is to define it in a separate file and to include that file by putting the following in the "head" of your HTML document:

    <link rel="stylesheet" type="text/css" href="mystyle.css">

    Another way is to include it in the head of the document like this: 

    		<style>
		/*This is a comment*/
		/* Put your CSS definitions here */
		
		</style>


    Here are some CSS definitions and what they mean:

    #green {color:green}
    Sets the color of any text inside an element with the "id" of "green" to be green: <div id="green">this text will be green</div>

    .center {text-align:center}
    Sets the alignment of any text inside an element with the "class" of "center" to be centered: <div class="center">this text will be centered</div>

    More Information:
    w3schools CSS Tutorial
    CSS Reference
    Webmonkey Stylesheets
    Color Charts