Networked Media Class 1

Node.js

JavaScript (ECMAScript) engine for building server side apps
http://nodejs.org/
Uses V8

Event/Callback driven - A callback function is registered for a specific event. When that event occurs the callback method is run.

A public server

In order to run node servers that are accessible to others via the internet, we'll need somewhere to host it. At the moment, the easiest way to run a Node.js server is to use a company such as Digital Ocean which provides Virtual Private Servers. Digital Ocean has a few things going for them, first is the cost, second is the fact that you can get one running with Node.js already installed very quickly.

In order to get started, you'll need to create an account with Digital Ocean.

After that, you can go ahead and create a "droplet". A "droplet" is Digital Ocean's term for a VPS. After coming up with a hostname, I would choose the smallest size, an appropriate region (one close to you, perhaps), and then in "Select image" go to the second tab, "One-click apps" and choose "Node x.x.x on x.x" (the version numbers change), choose the $5/mo size, and click "Create" at the bottom.

The Command line

Digital Ocean will email you a password to use with the default "root" account. In order to do anything, you first have to login to the newly created server via the command line to change your password. To do so, open up Terminal on your Mac (or use PuTTY if you are on a PC). To connect on from the Terminal app on the Mac, you type the following:

ssh root@ip_address
		
(The "ip_address" is in the email you get from Digital Ocean.) You will be prompted to enter the password (which is also from the email) and then prompted to enter it again to change it. Go ahead and change it to something you will remember but sufficiently complex that it will be difficult for hackers.

If you don't have Node preinstalled (you should if you choose it as a "one-click app") on your server, you'll need to go through the following steps:

apt-get update
apt-get install nodejs
apt-get install nodejs-legacy
apt-get install npm
		

Once you have done that, we can move on although it is probably a good idea to keep the terminal open as we'll be using it again shortly.

Uploading

In order to upload to your server, we need to use a tool that will allow us to connect via SSH to transfer the files. I have found that Fetch and Cyberduck are good tools.

To connect, choose "SFTP", under "Hostname" or "Server" use the IP address emailed to you by Digital Ocean. The "username" is "root" and the "password" is what you just created in Terminal.

Basic HTTP Server

Here is a HTTP server that we can start with:

server.js

// HTTP Portion
var http = require('http');
var fs = require('fs'); // Using the filesystem module
var httpServer = http.createServer(requestHandler);
var url = require('url');
httpServer.listen(8080);

function requestHandler(req, res) {

	var parsedUrl = url.parse(req.url);
	console.log("The Request is: " + parsedUrl.pathname);
		
	fs.readFile(__dirname + parsedUrl.pathname, 
		// Callback function for reading
		function (err, data) {
			// if there is an error
			if (err) {
				res.writeHead(500);
				return res.end('Error loading ' + parsedUrl.pathname);
			}
			// Otherwise, send the data, the contents of the file
			res.writeHead(200);
			res.end(data);
  		}
  	);
  	
  	/*
  	res.writeHead(200);
  	res.end("Life is wonderful");
  	*/
}
	

Running it

To run, upload these files to a new folder on your your server (using Fetch or Cyberduck)
Then you can run the server via node.

ssh root@YOUR_IP
cd directory_you_just_created
npm install socket.io
node server.js

Assuming you don't get any errors, you should be able to connect via your browser: http://YOUR_IP:8080/index.html

You may also want to read though this: Keep Node.js script running after logging out from shell

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.

Text Editor

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.

In particular, they have line numbering, syntax coloring and other features 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.

An example of a tag would be: <b>some text</b> which when rendered in a browser looks like this: some text.

Here are some tags 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 - Block level
  • <span>...</span> Grouping - Inline
  • <p>...</p> Paragraph
  • <b>...</b> Bold
  • <br /> Line break (you'll notice that this tag doesn't have any content and therefore is both an begin and end tag, with the slash)
  • <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 the page rendered in a browser

    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.

    Comments

    Comments in HTML start with <!-- and end with -->

    Nesting

    As you see in the above example, HTML tags are 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.

    Images

    To place an image in a page, you use a URL in the "src" attribute of the img tag:
    <img src="URLTOIMAGE" />
    <img src="animage.jpg" />
    		or
    <img src="http://itp.nyu.edu/~sve204/animage.jpg" />
    

    Style

    You can use some basic CSS (cascading style sheets) in the "style" attribute of tags.
    <div style="background: #00ff00; text-color: #ff0000;">This will be funky</div>
    This will be funky

    We'll get deeper into CSS later in the semester.

    More Information:

    HTML Tag Reference
    HTML Special Characters
    w3schools.com HTML Tutorial
    More more more