LeeCroft at 04:24, 24 February 2015

2015-02-24T04:24:24Z

← Older revision		Revision as of 04:24, 24 February 2015
Line 1:		Line 1:
			===Audio & Video===

	The audio from the lecture given on January 5, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec02-07Jan2015.mp3 is now available].		The audio from the lecture given on January 5, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec02-07Jan2015.mp3 is now available].

LeeCroft at 04:23, 24 February 2015

2015-02-24T04:23:58Z

← Older revision		Revision as of 04:23, 24 February 2015
Line 4:		Line 4:

	If anyone manages to merge the audio and video, please contact Prof. Somayaji!		If anyone manages to merge the audio and video, please contact Prof. Somayaji!

			===Topics & Readings===
			In order to do this course, you must be comfortable with HTML and CSS. The Code Academy courses should be used help if you are unfamiliar or serve as a refresher. You will need to familiarize yourself with this on your own time.

			===Notes===
			<h4>HTML</h4>
			In a web browser, by using the developer tools (usually found in a tools menu) you can:
			<ul>
			<li>see client side code</li>
			<li>inspect specific elements of web page</li>
			</ul>

			HTML (HyperText Markup Language) is a standard markup language used to create web pages. It uses HTML tags to let the browser interpret the content of the page. HTML is derived from the Standard Generalized Markup Language (SGML) to simplify it and specialize it for web content.

			The HTML code for a web page should begin with something like <code><!DOCTYPE HTML…></code> to indicate to the the browser what type of document it is parsing. The main portion of the code is then nested between opening and closing <code><HTML></code> tags. Comments can be included in the code as <code><!-- some comment --></code>.

			Note that a markup language uses a mix of data and metadata. The metadata says something about the data (ie <code><p></code>, <code><h1></code>, …). In order to work with html, you will need to become familiar with the various commonly used tags.

			XML is another markup language: HTML is too specialized, SGML too verbose, so XML was created to be in the middle of the two. It is used as a general data definition language.

			<h4>CSS</h4>

			Cascading Style Sheets (CSS): marks up the HTML file, mix them together to make the web page look pretty. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file (source Wikipedia: CSS)

			<h4>Web pages and servers</h4>
			A simple web page consists of an HTML file (which may be but is not necessarily stylized with a CSS file). The purpose of a simple web server is to serve the HTML file, and any associated files (CSS, images, etc) needed for that page, to the client’s browser. Generally, an index.html page is the default start/home page on a server.

			Nowadays, we create programs to create/change the representation of HTML in the DOM (Document Object Model), which is a structured representation of the document. It is through the DOM that a program can change the structure and content of a web page. It represents the document as a structured group of nodes and objects that have properties and methods.

			With content management systems, you don't have to think about code behind web pages and can instead focus on the content. Today, you pick your content and a theme and you’re done. Some examples of these are WordPress and MediaWiki. We're going to learn the tech behind how to do that.

			<h4>HTTP</h4>
			HTTP is a network protocol for sending and receiving data. Most content is requested via the “GET” method. “POST” is normally used in forms for passwords, billing information, etc

			We can view information about HTTP requests and responses using the network tab of the developer tools in a web browser. These requests and responses have information such as status codes, headers and content stored in them. Some common status codes are:
			<ul>
			<li>“200” OK</li>
			<li>“304” not modified (it was cached)</li>
			<li>“404” page not found</li>
			</ul>

			The headers contain metadata. Inside the headers, we can see an IP address and a port. This is "who" you're talking to. If port is <1024, it’s a well-known port (ie. DNS port 53, SSH port 22, HTTPS port 443. Other fields include the user-agent (which browser is connecting), privacy policies, etc...

			<h4>JavaScript</h4>
			We will also be working with JavaScript in this course. JavaScript is not actually compiled, it is simply run in a parser using "just in time" compilation. We can input JavaScript directly into a console using the developer tools on a web browser. This console provides a read evaluate print loop. This means that you type in JavaScript code for it to read and evaluate and then it will immediately print the result of the evaluation.

Soma: Created page with "The audio from the lecture given on January 5, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec02-07Jan2015.mp3 is now available]. Vid..."

2015-01-09T17:13:14Z

Created page with "The audio from the lecture given on January 5, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec02-07Jan2015.mp3 is now available]. Vid..."

New page

The audio from the lecture given on January 5, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec02-07Jan2015.mp3 is now available].

Video [http://www.screencast.com/t/eQbjO31FDeX is also available], however the audio track is silent.

If anyone manages to merge the audio and video, please contact Prof. Somayaji!

WebFund 2015W Lecture 2 - Revision history

LeeCroft at 04:24, 24 February 2015

LeeCroft at 04:23, 24 February 2015

Soma: Created page with "The audio from the lecture given on January 5, 2015 [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w-lec02-07Jan2015.mp3 is now available]. Vid..."