CS 205

Today's Plan

  1. demo_welcome
  2. "Anatomy of a web page"
    • Slides adapted from C. Gleason (Feb. '14)
  3. Install software for the workbook
  4. Checking out the workbook
  5. Adding an exercise
  6. demo_Welcome reprise

What's a Web Page made of?

A page on the WWW typically (but not always) consists of three components:

  1. HTML: Describes the page content
  2. CSS: Styles the page (color, layout, etc)
  3. JS: Modifies or adds interactive elements to the page

You could also have a “page” that is just a text file, or XML, or whatever. We won’t really consider that.

"page" === HTML

JavaScript

function favoritePies(id, data) {
  var width = 600,
      height = 200;

  var color = d3.scale.category10();
  var svg = d3.select(id)
              .append("svg")
              .attr("width", width)
              .attr("height", height);

  var x = d3.scale.linear()
            .domain([0, data.length])
            .range([0, width]);
}

CSS

body {
  padding-top: 50px;
}

.greeting {
  padding: 40px 15px;
  text-align: center;
}

#content {
  margin: auto;
}

What’s it made of?

Your CSS and JS could be included inside the <head> or <body> elements of your HTML file. However, this is considered bad practice.

Keep your data separate from your style and your business logic. (For the most part).

To do this, we will let our HTML document link to external CSS stylesheets and Javascript files. To do that we use:

  • <link> for CSS
  • <script> for JS

Where does it come from?

When you browse the web, your browser (and computer) go through a complex life cycle to serve your page.

A simple overview:

  1. Resolve DNS
  2. Fetch HTML file
  3. Parse from top to bottom:
    1. Execute inline CSS or JS along the way.
    2. Fetch linked CSS and JS files (blocking). This occurs during parsing above.
    3. Parse and execute CSS and JS files to render the page to the user.
  4. Fetch other linked items like images (<img>) (Non-blocking).

the virtue of being static

A static asset is any document (HTML, JS, CSS, image, etc) that does not change often and should be the same for all users. This is important for caching.

Your browser and external servers will cache for you.

Static doesn’t mean non-interactive! It just means we serve the same content to everyone. We can still use Javascript to make slick UIs.

On the other hand, dynamic or non-static sites are generated on the fly based on your request.

the virtue of being static

Why does this matter?

  • All visualization in this class will consist of static data.

Your javascript libraries (D3, Underscore, jQuery, etc) and CSS (Bootstrap) are readily available, and included in our workbook template.

The workflow

The CS 205 Workbook

Controller: python app.py

Checklist: update the workbook

Do this every time before you add an exercise:

Replicated from: https://courses.engr.illinois.edu/cs199205/workbook.php#updating%20to%20latest

  1. navigate to the workbook at the command line
  2. git fetch release
  3. git checkout master
  4. git merge release/master

Checklist: add an exercise

  1. add exName directory containing /res, /py, /web
  2. in exName/py:
    • create compute.py
    • containing function do_compute()
  3. in exName/web:
    • add index.html
    • add file vis.js
  4. in exName/res:
    • add all resource files

Checklist: update the workbook

Do this after every working session:

Replicated from: https://courses.engr.illinois.edu/cs199205/workbook.php#committing%20to%20git%20gitlab

  1. navigate to the workbook at the command line
  2. git status
  3. git add FILENAME
  4. git commit -m "USEFUL MESSAGE"
  5. git push origin master

Closing Words

Come to class EVERY TIME

Bring your laptop EVERY TIME