Lecture 1.1 (Tue, Jan. 19)

Note

These notes are more of a sketch or outline. They probably aren't very useful on their own. But they are hopefully helpful for my students to review what we went over.

Welcome to class!

What we're going to learn:

  • Web development
  • Front-end
  • Back-end
  • Talking to external things (databases, services)

There's a lot of work!

But hopefully a lot of fun.

I love the web. It's open, it's crazy, it's decentralized and democratic. It's this wild playground where everything is being tried by someone, somewhere.

History

The Web was created in 1989–1990 by Tim Berners-Lee at CERN. He originally built it to share scientific information.

You browsed with text.

Two key things:

  • World Wide Web, a large-scale collection of linked documents, enabled by
  • Hyper-Text Markup Language, a means of describing text with links.

Demo browsing in Lynx.

As time went on, we added things (simplified greatly):

  • Mosaic added images.
  • Netscape spawned from Mosaic.
  • Netscape added JavaScript to allow web pages to start being interactive.
  • Sun launched Java, tried to bolt it into the browser.
  • Microsoft added a bunch of things. Shipped Internet Explorer free with Windows, killing Netscape's commercial prospects.

  • Dominant model:

    • Server sent hypertext, mostly static
    • JavaScript added a bit of interactivity on top of that
    • Super-interactive things (games, demos, etc.) were in Java or Flash or things like that
    • Most things involved fetching new documents from the server

  • Around 2005, Google introduced Gmail. First widely-adopted application to adopt a new paradigm of continually rewriting the page based on new data from the server.

  • Last ~5–10 years have seen significant renewed innovation around the web, particularly doing cool interactive things in the browser.

How the Web is Made

Gluing all this together is a series of standard documenting file formats, languages, and protocols that are used to make the Web happen.

Draw the Picture of the Web.

  • HTML, CSS, JavaScript in the browser
  • HTTP shuttles data back and forth
  • Server runs something (we'll use Python), prepares data and answers queries
  • Server may talk to additional services

Many different technologies and pieces. Ther are a lotof moving pieces. As we go forward, we'll work on peeling back these layers.

Class Structure

There are a lot of moving pieces to this class.

  • Lecture. You're here. Good. Sometimes I'll talk for a while. Sometimes you'll say things. Sometimes we'll do things.

  • Web site. There's a link in TRACS. It has all the juicy content.

  • TRACS. This will mostly be for assignments, grades, and class management. Content and discussion is elsewhere.

  • Software. There are several pieces of software; instructions and links are on the web.

    Show off:

    • PyCharm
    • Git (on the class web site)

  • External services. We need several of these. The web is built on them. We'll be using:

    • Texas State's private GitHub for storing and sharing code.
    • Microsoft Azure for hosting our web sites (the class site is hosted on Azure).
    • Slack for talking about class material. Please do not ask about your grades on Slack, e-mail or in-person discussions are more appropriate for that (sort-of).

  • Assignments

    • 4 solo assignments (including one due next week, it will be up by end of day).
    • 5 team assignments. The later ones are substantial projects.

    We're going to practice learning by doing. Which means we need to do, a lot.

  • Quizzes. 5 of them.

Walk through some of the policy things.

HTML

OK, let's start looking at HTML.

The Web is built on HTML. Most of what we do involves one of several things:

  • Creating HTML to describe content
  • Shipping HTML across the network
  • Styling HTML to provide an appearance
  • Modifying HTML to get a different set of content

So what does it look like?

<!doctype html>
<html>
<head>
<title>Hello, world</title>
</head>
<body>
<h1>Hello</h1>
<p>The world is greeted.</p>
</body>
</html>

Several things to note:

  • Doctype declaration. There are many different ones; this one means ‘use HTML5’, which is kinda weird, but we'll be doing that all the time.
  • Tags which delimit elements. The element is everything delimited by a start <tag> and end </tag>.
  • Text inside the elements.
  • Most elements have end tags. A few don't, but we'll get to those later.

Start building up more elements.

Next Week

We'll start looking at generating HTML with code.

You have an assignment due in one week. It's basically ‘Hello, world’ to make sure you have the development tools working and can write and submit code.

Work through the setup instructions, and ping if there are problems.