

In [10]:

    
from IPython.display import Image
from IPython.display import HTML

Welcome to CS130

CS-130 Fundamentals of Web Programming

Contact

Brad Miller
Office	Olin, 321
email	bmiller@luther.edu\
Skype	bonelake\
Google+	millbr02

Lecture Notes: http://github.com/bnmnmetp/CS130/LectureNotes

Office Hours

Monday Wednesday, Friday: 9:30 -- 10:30, 1:00 -- 2:30
Other times by appointment, drop-in, or virtual. Really! I’m here to help you, so stop in. Mornings are open and I’m usually around.

Text Book

I have written a set of class notes and exercise in the form of an online textbook. You can find a link to the textbook on the katie course page.

Goals

To understand the common technologies used to create and deliver web pages
To understand how modern web publishing works
To learn HTML and CSS
To learn how to learn about rapidly changing technologies
To become familiar with the Javascript Language

Course Outline

HTML
1. Functional view of the web
2. Creating basic web pages “from scratch”
3. HTML 5 Elements
4. Serving and Deploying on github
Styling Web Pages with CSS
1. Presentation -vs- content
2. CSS Matching Rules
3. Laying out your pages
4. Responsive design with Bootstrap
Javascript
1. Language fundamentals
2. The Document Object Model (DOM)
3. Conditionals
4. Loops
5. Javascript Helper Objects: Arrays and localStorage

Getting Help

The best way for you to get help is to contact me by stopping in my office. The second best is for you to email me your question, and your code. The answers to many of your questions may also be in the textbook, but I realize that you may not be following everything in the text, and so some additional explanation might be useful. What about googling for some help? I would strongly encourage you to NOT google for an answer. Many of the answers you might find by googling will lead you down a bad path. Its not that they are wrong it is just that many of the answers you are likely to find are meant for programmers with much more experience. The exeption to this is w3schools. The answers on w3schools are going to be short, to the point, and good for beginners. So, if you want to be efficient with your time, I recommend you stick to the resources I have mentioned here when you need help.

Class Requirements:

Participation

“The teacher’s job is to design learning experiences, not primarily to impart information” This is going to be an experiential class, I’ll lecture some and try to explain some big picture stuff but, I’ve learned everything I know in this area by doing stuff. I expect you to be engaged and to ask questions and do stuff. If you stop at the bare minimum of what I ask you to do for any particular assignment you’ll be missing an opportunity.

Homework

You will have at least weekly homework assignments, sometimes more frequently when they are easier. I will often ask you to complete something that we started working on in class by the beginning of the next class. This type of assignment counts toward your class participation grade.

Grading

60%   Homework Assignments
30%   Weekly Quizzes
10%   Class participation

The grading scale is:

90 -- 100   A
80 -- 89    B
70 -- 79    C
60 -- 69    D
0 --  59    F

Lets get going

Question 1: How does this browser thing work anyway?

Thats a little complicated

Loading a web page

Browser makes a request to a server for a page
- URL http://www.luther.edu/ideas-creations-blog/index.html
- Break it down:
  - http
  - www.luther.edu
  - /ideas-creations-blog/index.html
- The language that the browser uses to 'talk' to the server is called HTTP for Hyper Text Transfer Protocol
- A protocol is the special set of rules that end points in a telecommunication connection use when they communicate.

The request looks like:
- GET /ideas-creations-blog/index.html HTTP/1.1

The server responds with
- HTTP/1.1 200 OK
- And then some Headers
- And then the contents of the page follow
The contents of the page are
- HTML -- Hyper Text Markup Language
- CSS -- Cascading Style Sheets
- Javscript
- images
- videos
- etc.

Lets try a simple page
- http://knuth.luther.edu/~millbr02/test.html

Here is what the Conversation Looks like:

telnet knuth.luther.edu 80
Trying 192.203.196.71...
Connected to knuth.luther.edu.
Escape character is '^]'.
GET /~millbr02/test.html HTTP/1.1
Host: knuth.luther.edu

HTTP/1.1 200 OK
Date: Tue, 25 Aug 2015 17:49:10 GMT
Server: Apache/2.4.7 (Ubuntu)
Last-Modified: Sat, 15 Nov 2014 20:03:02 GMT
ETag: "1d8-507eb3ba531e6"
Accept-Ranges: bytes
Content-Length: 472
Content-Type: text/html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test Page</title>
        <meta name="generator" content="TextMate http://macromates.com/">
        <meta name="author" content="Brad Miller">
        <!-- Date: 2007-09-03 -->
</head>
<body>
<h1>Hello CS-440</h1>
<p>This is a test page for your http client program</p>
</body>
</html>
Connection closed by foreign host.

What does the browser do with this?

The browser renders the HTML into the nice picture we see on the screen.
Behind every beautiful webpage is a bunch of HTML
This HTML is turned into a graph
The graph is then turned into cool stuff



In [18]:

    
#  %install_ext https://raw.github.com/tkf/ipython-hierarchymagic/master/hierarchymagic.py
%load_ext hierarchymagic

What does this graph look like?



In [25]:

    
%%dot -- 
    digraph G {
        html->head; html->body; 
        head->meta; head->title; 
        body->h1; h1->"hello cs-440"; body->p; p->"this is a test...";
    }