MCS 275 Spring 2023
Emily Dumas
Reminders and announcements:
python3 -m pip install FlaskCreate the rough design for a web application we'll write in Python in the next few lectures.
Continue study of HTML and CSS by making some mockups of the user interfaces.
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 use of things we're learning (e.g. SQLAlchemy).
A work order (WO) is a request that a certain job be done (e.g. "fix flickering computer projector in lecture room" or "replace damaged lock on tiger cage").
After a WO is created, it needs to be assigned to a person who will do the job.
Later, the person who the WO was assigned to may mark it complete.
The "ticket systems" used to track support requests are similar.
A system to track WOs would have several user types:
As we won't build any user account system, we'll just create separate pages (or views) in our web application that serve the needs of these different user types.
App name?
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 app 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.
The color code
#789ABC
means
= 0x78 = 120 out of 255 = 0x9A = 154 out of 255 = 0xBC = 188 out of 255Google has a color picker that can be helpful.
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.