Web Applications Engineering: Udacity CX253

 

Courses and Enrollment http://www.udacity.com/courses

Follow
Google Plus https://plus.google.com/116286004036789369492/posts
Facebook http://www.facebook.com/pages/Udacity/174179219354091?sk=wall
Twitter http://twitter.com/udacity

Welcome to CS 253 - Web Application Engineering!

Sean Bennett - 11:03:24 PM Apr 16, 2012

http://www.udacity.com/view#Course/cs253/CourseRev/apr2012/Unit/4001/Nugget/5002

---

Welcome to Web Application Engineering! During this course, you'll learn how the web and web applications work, build your own web applications, and actually put them online to share with others using Google App Engine.

If you've never had any experience with web programming before, don't worry! All you need is some basic knowledge of Python, similar to what you would learn in CS 101http://www.udacity.com/overview/Course/cs101/CourseRev/apr2012. Steve Huffman, the creator of Reddit and Hipmunk, is going to be teaching you all about web applications, along with everything he wished he knew about them when he was first getting started. He's been working hard to put together a course that you'll all enjoy and learn a lot in!

The course is going to be structured in 7 units. Each unit will include lecture videos, embedded quizzes, and homework assignments. Each unit will be released once a week on Mondays. Homework assignments will be released on Tuesdays and will be due the following week on Mondays at 11:59 UTC. We also have a course forum and wiki pages with course notes and additional material to help you with each unit. At the end of the course, we'll have a final exam, and everyone who completes the course will be given a certificate and a grade to show their accomplishment!

• 
  
  

  Unit 1
• Homework 1
• Homework Help 1
• Office Hours 1
• Unit 2
• Homework 2
• Office Hours 2
• Unit 3
• Homework 3

• Instructor Comments
• Supplementary Material

Web Application Engineering

---

Description: Web applications have the power to provide useful services to millions of people worldwide. In this class, you will learn how to build your own blog application starting from the basics of how the web works and how to set up a web application and process user input, to how to use databases, manage user accounts, interact with other web services, and make your application scale to support large numbers of users.

WEEK 1:

How the Web Works
Introduction to HTTP and Web Applications

WEEK 2:

How to Have Users
Getting and processing user input

WEEK 3:

How to Manage State
Databases and persistent data

WEEK 4:

Whom to Trust
User authentication and access control

WEEK 5:

How to Connect
Web applications as services, using APIs

WEEK 6:

How to Serve Millions
Scaling, caching, optimizations

WEEK 7:

Changing the World
Building a successful web application, project

http://www.udacity.com/overview/Course/cs253/CourseRev/apr2012

Prerequisites

---

PREREQUISITES

This course assumes previous programming experience, comparable to what is covered by the Udacity CS101 course.

Questions

---

Is there a fee to take the course?
Nope, no fees. All of our classes are offered free of charge.

Can you enroll in more than one class? 
Yes! Keep in mind CS101 is intended for students with no previous programming background, CS212, 253 and 262 are courses oriented towards students with some programming experience (the equivalent of CS101), while CS373 and CS387 assumes students have prior programming experience.

When do classes start?
April 16, 2012.

When do I have to be online to watch the lectures?
The lectures are posted each week for you to view at your convenience.

How is the class formatted?
The class is broken into 6 week-long units and a seventh week that wraps up the course and has a final exam. Each unit contains multiple lecture segments with interactive quizzes built in. There will be one homework assignment which will include programming problems each week. There will be approximately 50 minutes of lecture videos.

Will there be closed captioning?
Yes, the videos will have captions in English. We're also working to support other languages in future.

What will I get for completing the classes?
Students who complete a course will also receive a certificate signed by the instructors.

STEVE HUFFMAN

---

Steve Huffman co-founded the social news site reddit.com in 2005 with his college roommate. reddit.com has since grown into one of the largest communities online. In 2010, he co-founded Hipmunk, a company to take the agony out of searching for plane and hotel tickets. Steve was named to Inc. Magazine's 30 under 30 list in 2011. He studied Computer Science at the University of Virginia.

SEAN BENNETT

---

Sean once grew a 3 foot long (almost 1 meter) beard while camping in the northern United States. He won't say how long it took to grow this monstrosity, but scientists hypothesize that it sprouted spontaneously in some primitive response to too much computer programming ability. When Sean isn't shaving, you can find him practicing forms of martial arts that are so difficult most humans can't even pronounce them. After honing his skills in the gym, he puts them to use in the interpreter where he systematically finds and kills every bug he encounters. Don't mess with Sean.

CS253 - Unit 1: The Basics

Contents

Course Outline

World Wide Web

Quiz: Course Outline

Quiz: File Types

Quiz: Components of the Web

Quiz: Best Browser

Intro to HTML

The Bold Tag

Quiz: Bold Tag

More Tags

Quiz: Italics

Quiz: Missing End Tag

Making Links

Quiz: Making Links

Adding Images

Whitespace

Quiz: Whitespace

Quiz: Paragraph Tag

Inline vs. Block

Span and Div

Quiz: Span and Div

Document Structure

Introducing URLs

Quiz: Correct URL

Query Parameters

Quiz: Query Parameters

Fragments

Port

Quiz: Port

HTTP

Quiz: GET

Quiz: Most Common Method

Making Requests

User Agent Header

Quiz: Valid Headers

http Response

Response Headers

Quiz: Telnet Request

Web Applications

Quiz: Dynamic Content

1. Course Outline

In this class you will learn how to build web applications! Throughout this course you will be building a blog that will have user registration and allow you to submit user entries. This blog will be online for anyone to see and play with!

In this unit you are going to cover the following basics of the web:

the web- what it is, what it looks like and how the pieces fit together

HTML- the main document type of the web

URLs-how you refer to documents on the web

HTTP- the protocol that the web runs on

Web Applications- what they are and how they fit into the big picture

2. World Wide Web

The world wide web is a collection of HTML documents. HTML stands for HyperText Markup Language and it is the basis for almost every webpage – it is what glues everything together.

The links between pages are called hyper links, or just links, give the internet its web-like characteristic.

The web was invented in the early 1990’s and has somewhere around 30 billion pages!

2.1. Quiz: Course Outline

What is the main type of document on the web?

a. HTML

b. Microsoft Word

c. PDF

d. Plain Text

2.2. Quiz: File Types

What type of files can be found on the web?

a. Plain text

b. HTML

c. Images

d. Videos

e. Music

2.3. Quiz: Components of the Web

2012-04-05-Image1.jpg

Using the letters that are associated with each piece of technology and match them up with their name and definition.

HTTP – the main protocol of the web

Servers – computers that host the files that makes up the web

Internet – the world’s largest computer network

Browser – a program that runs on your computer to display files found on the web

2.4. Quiz: Best Browser

Which of these browsers is the best?

a. Internet Explorer

b. Firefox

c. Chrome

d. Safari

e. Opera

3. Intro to HTML

HTML, or HyperText Markup Language is the heart of the web. It is made up of:

text content, which is what you see

markup, which is what the content looks like

references to other documents, for example, images and videos

links to other pages

Explore HTML here, www.udacity.com/html_playground, and play around in this fake little test browser. 

A few things to note:

Plain text is plain text in HTML, for the most part. 2012-04-05-Image2.jpg

If you want to make the text look different you have to use markup.

HTML markup is made up of things called “tags”. Tags look something like this:

Contents

The contents can include other tags, or it may just be text. The tag is called the “opening tag” and the tag is called the “closing tag”. Notice that the only difference between the opening and closing tags is that the closing tag has a slash, /, in front of the tag name.

The whole construct: Contents can also be referred to as “an element”.

Let’s learn about our first tag.

3.1. The Bold Tag

The first tag we are going to learn about is the bold tag. It looks like this:

Contents

It has an opening tag and a closing tag with the slash, and anything that appears between the opening and closing tags appears bold.

b for bold.

OK, quiz time:

3.2. Quiz: Bold Tag

In the box below, make the words reasonably straightforward bold:

3.3. More Tags

Now we want to teach you another tag. This is the tag. em stands for emphasis, and it makes things italic. The complete element will look like this:

contents

There is the opening tag, the contents that we want to appear italic, and then the closing tag with the slash. The structure is just like the bold tag we saw earlier.

3.4. Quiz: Italics

What we want you to do is to make the phrase 'HTML is reasonably straightforward' italic.

3.5. Quiz: Missing End Tag

What would happen if we were to forget to close the tag in our example?

Nothing is italicised

The browser crashes

Everything after is italicised

Your guess is as good as mine

3.6. Making Links

Now we will teach you all a new concept. This is HTML attributes. Attributes appear something like this:

Contents

We still have our opening tag name and the closing tag as before, but now we have this new thing called an attribute.

Attributes have a name (in the example above it is simple called ATTR) and a value (inside the quotes). Tags may have multiple attributes.

An example of a tag that uses attributes is the anchor tag , and a full example would look something like this:

derp

Here, within the opening tag we have the opening a, an attribute called href, the value of the attribute which is a URL in this case. If this were rendered in a browser we would just see the word “derp”, but it would be a link to reddit.com.

3.7. Quiz: Making Links

Make the words my favorite in the phrase below a link to udacity.com.

4. Adding Images

The next tag we are going to introduce is the image tag. The image tag looks like this, , and you won’t be surprised to learn it is for including images. The image tag has the following structure:

The image tag has an attribute names src (for “source”) which equals the URL which is the location of the image file to be downloaded. This is followed by a second attribute called alt. This stands for “alternate” and is the text that is to be displayed when the image doesn’t load.

The alt attribute is “required” in the sense that html parsers will complain at you if it is not there. Nothing will actually break if it is missing but it is really good practice to include it. If the image is moved or the requested URL is missing for some reason, this is the text that is displayed.

The text associated with the alt attribute is also the text picked up by the reading software used by blind people to access the web. It doesn’t take much effort to add an alt attribute to your images, but it can make somebody’s day just that little bit easier...

There is one more thing to be aware of about the image tag. Every tag we have looked at so far had a closing tag. Image tags don’t. There is not contents to an image tag, and so the closing tag is not required.

Tags, like , that don’t require a closing tag are called void tags.

Images will appear inline with text.

4.1. Whitespace

Let’s talk about whitespace for a moment.

You may have noticed that if you entered text into the editor on multiple lines, the browser window rendered it onto a single line. This is because in HTML, all whitespace, new lines, tabs, spaces are all converted into a single space.

To force the browser to display text on multiple lines we can use another tag called the break tag, and it looks like this:

is also a void tag.

The effect of
is to cause the browser to move to a new line before displaying the next piece of content. Multiple
tags will cause the browser to move down multiple lines before it displays further content.

Another way of creating line-breaks is to use the paragraph tag . The paragraph tag is NOT a void tag. Paragraph tags have content and appear like this:

Content

The content between the opening and closing tags will be rendered by the browser as a single paragraph.

4.2. Quiz: Whitespace

Enter the HTML to draw the following text:

Hello everyone!

We’re using two lines now!

on two lines, using the
tag.

4.3. Quiz: Paragraph Tag

OK, now let’s do the same thing, only this time using the paragraph tag. Enter the HTML to draw the following text:

Hello everyone!

We’re using two lines now!

on two lines, using the tag.

5. Inline vs. Block

One last thing I’d like to talk about regarding
and , is the question of why we have two different ways of creating line-breaks? Why do we have the
tag and also the
tag?

The answer is that the
tag is what we call an INLINE tag and the tag is what we call a BLOCK tag.

What the
tag was actually doing is telling the browser to end the line.

The tag acts differently. What the
tag does is to create an invisible “box”. So the HTML code:

text1
text2

Creates an invisible “box” around text1. This box can have height and width. Text2 will be outside this “box”.

The differences between inline and block tags will come up a fair amount in this course, and it is important to know that there is a distinction between them and they have different behaviours. So far, all of the elements that we have learned (other then ) are inline elements.

5.1. Span and Div

Two more elements that I’d like to teach you are called Span and Div. Both span and div are normal elements, that is they can both have content:

Content

Content

The only difference between these elements is that span is an inline element whereas div is a block element. The only function of these elements is to contain their content and there is a way of attaching styles to them to change the way in which their contents display. This is done by attaching attributes to the tags so they look something like this:

Content

Content

The class attribute refers to a CSS class. CSS classes are not something that we are going to spend a lot of time on in this course, as we will provide the CSS where needed. CSS is a separate language for adding styles to your documents.

We will be using and

elements a lot to control the layout of text, and the important thing to remember is that is an inline tag, and

is a block tag.

5.2. Quiz: Span and Div

Select all of the elements that are inline. Some of these are elements that you haven’t seen before, so I would like you to trty them out in your browser and see if you can figure it out for yourself:

a

p

div

img

span

strong

br

form

6. Document Structure

That is enough HTML elements for now. I want to quickly talk about the structure of an actual HTML document before we move on.

What we have seen up until now has just been some very simple markup. We’ve been seeing this like this:

Content

with just a little text and a few simple tags, but an actual HTML document has quite a bit more to it. Here we see a whole lot more HTML:

Content

This is what a complete HTML document looks like. Let’s look at this piece by piece. The first line:

specifies the doctype. i.e. what kind of HTML this is. The “HTML” string within this tag used to be a LOT more complicated, but now that we are using HTML5 we have a nice clean, simple doctype.

The and tags surround the rest of the document providing a kind of “container” for the document.

The and tags enclose the document header. This part of the document contains metadata about the document and other document information. JavaScript and CSS would also be included in the document header.

The