MCS 275 Spring 2021
David Dumas
Course bulletins:
python3 -m pip install FlaskCreate the rough design for two web applications we'll write in Python in the next few lectures.
Continue study of HTML and CSS by making some mockups of the user interfaces.
There are whole courses about these topics*, and in MCS 275 we're only covering them in a superficial, crash-course manner.
Why are they here at all?
* e.g. IT 202
I will prioritize getting a working product that uses things we've discussed in the course.
That will mean skipping some natural features (e.g. authentication) and avoiding some technologies because they'd take too long to introduce (e.g. JS), or because they'd hide the way of course concepts are being used (e.g. SQLAlchemy).
Users open a URL in their browser and are connected to a page where they can read and post text messages.
The recent messages are displayed to everyone, in chronological order.
Toy model of IRC, AIM, GroupMe, Discord, Slack, ...
Users submit items (text that fits an app-specific theme), view items, and vote (+/-) on items.
Items can be viewed in order of vote score (best first) or in chronological order.
Toy model of Slashdot, Reddit, Stack Exchange, Hacker News, Lobsters ...
Chat app name?
Post and Vote app theme/name?
Whinge: Post your pet peeves, vote for those that you find particularly relatable. Amusement ensues.
Sample whinge: When someone in front of you on the stairs stops to check their phone.
(Seriously, why do people do this?)
Let's make some HTML+CSS documents that look like the applications we're planning to build.
Later, we'll use these as the starting point for the HTML the apps will generate.
A language that styles HTML. Basic syntax is
SELECTOR {
PROPERTY1: VALUE1;
PROPERTY2: VALUE2;
}
Elements that match the SELECTOR will have their styling changed by adjusting values of the given properties (things like color, font size, border).
CSS has a complex system of units for values like distances and sizes.
body {
font-family: "Verdana", sans-serif;
background: #C0C0C0;
}
p {
border: 1px solid #000000;
}
The body element of the document (hence everything) will use the font called "Verdana", or if that isn't available, some sans serif font.
The body will be displayed with a light gray background.
Each paragraph will be surrounded by a 1-pixel black border.
There are lots, e.g. color, background, font-family, font-size, width, height, border, margin, margin-top, margin-left, padding, padding-left, ...
You can embed a stylesheet (block of CSS) directly in HTML by placing it inside <style> within <head>.
Or you can use the HTML <link> tag to specify the CSS can be found at another URL (e.g. is in another file).
<link rel="stylesheet" href="mysite.css">
Like <style>, <link> should go in the header.
The latter approach makes stylesheets reusable.
An HTML element in a document can be given a unique identifier with the id attribute.
<p id="selector-intro">Let's talk about CSS selectors...</p>
If two elements have same id, your HTML is invalid.
You can link to an element within a document by id e.g.
We discuss <a href="#selector-intro">selectors</a> below.
You can create classes (categories) for elements in a HTML document. Mainly used so items in a category (e.g. important, outdated, footnote) can be styled differently (e.g. red, faded, small text).
Specify the category of an element using the class attribute.
<p class="urgent-warning">Space wasps approaching.</p>
No need to declare classes in advance, nor to refer to every class in your CSS.
Apply class- or id-specific styles in CSS:
/* Text in paragraphs is orange */
p { color: #FFA500; }
/* Paragraphs of class "urgent-warning" have big, red
text. This overrides the previous line, as the more
specific selector gets precedence. */
p.urgent-warning { color: #FF0000; font-size: 120%; }
/* The paragraph with id "selector-intro" is bold */
p#selector-intro { font-weight: bold; }
div ul {
/* style for any ul that has
a div ancestor */
}
div > ul {
/* style for any ul that has
a div as its parent */
}
ul ul {
/* style for ul inside another ul */
}
first-child, only-child, selection by adjacency, values of attributes, ...
python3 -m http.serverOpens a web server that serves files in the current directory and its subdirectories.
Visit http://localhost:8000/ in a browser (or substitute other port number shown in startup message) to see index.html.
Firewall rules typically prevent incoming connections from the internet (and maybe the local network too). That's good! Or
python3 -m http.server --bind 127.0.0.1will make sure it only listens for connections from the same machine.