In this lab we will focus on:
This lab will be due Sunday, Jan. 28th, midnight eastern time.
You, likely, are enrolled in a CIT concentration at KCTCS. This means that the majority of your courses will be technical in nature. And although we will cover the technical material of programming with HTML and CSS in this course, the more important aspect for us in CIT 157 is "design." "Design" is less a technical topic and more an overlap of creative and practical topics.
"Design thinking" is an approach to solving problems. Usually in CIT and computer science, "problems" means something closer to "math problem" or "technical problem." For us in CIT 157, though, "problems" actually gets to mean "world problems."
The rough outline of design thinking goes like this:
You might notice that this resembles the Scientific Method somewhat, but it also has hints of creative "guesswork" from the humanities. What is most important in design thinking though is (1) not trying to be perfect, but better, and (2) "looping" your process so that you can acheive constant, small "revisions" in response to the market, world events, and so on.
Herbert A. Simon, who won the Nobel for his work in economics, wrote about "design" as something that spans both engineering and art, something that lies at the core of our identities as human-beings. Three important points from his book are:
I bring up the fog metaphor because users must navigate your website only with the limited set of options that they have in front of them, without knowing what options will follow, so we need to design with that in mind and help them "get where they are going" in as few clicks as possible. And I bring up the watchmakers because HTML, and web designs in general, are much more like the hierarchical watches than the "flat" watches. This idea of working with hierarchical designs is a topic that we will return to repeatedly in this course.
Now let's do some programming.
We will learn HTML and CSS in this course. CIT 155 is, as I teach it, more about HTML and CSS as languages in their own right than is CIT 157. Our course is more about creating and planning designs to meet a specific purpose. However, it's kind of hard to make websites without some understanding of HTML and CSS.
Therefore, we'll setup our programming tools today so that we can see our websites quicker, spending less time focusing on HTML and CSS on their own.
These steps should work on Windows, Mac, or Linux. If you are using a Chromebook or other device, shoot me an email and we'll work out an alternative setup:
ext install hdg.live-html-previewerLab1.html.html file extension. So, it's good practice for our class to always save your files and give them a name before you start trying to write them.)<h1>It Works!</h1>
<p>This is my first paragraph!</p>
Information is an easier word to spell, so I'll start there. "Information" is a vague term in everyday English.
In computer science and physics and statistics though it's more precise. "Information" here means "randomness" or "entropy," since the more "random" something is, the harder it is to describe in any simple order. Therefore, a shuffled deck of cards is said to "contain" more information than a sorted deck.
This is related to the idea of "Kolmogorov Complexity," which states that the "complexity" of a message is the size of the smallest program that could output that message.
The problem is, just like dividing by zero, it is impossible to come up with this "smallest problem" and also prove it can't be done any smaller.
What does this have to do with us, as students in CIT 157?
Imagine a very confusing website, something that appears to be in a "random" order. Or list all of the things you can do on Facebook. All of them. It's a long list. Then shuffle that list up so nothing is "grouped" together into those nice hierarchies anymore, and imagine a website build with random features all over the place like that.
How could you make that website make sense to the user?
Because it is impossible for math to find a "smallest program" for Kolmogorov's measure of "complexity," only a human and not a computer program can do their best to organize that messy website for other humans. Further, when you are designing a website, a brand new website with brand new ideas, your ideas will appear to the user at first much more like the shuffled list of Facebook features than the organized website Facebook has come to be over the years.
This comes back to our class because our central goal will be to "draw the line" all the way from:
The hardest step in all of this (the step a computer can't do for you) is organizing and testing those features and content in step two. And step two here is the "Hermeneutics" of our class, which refers to how we as humans interpret the meanings or possible meanings of information and symbols and attempt to organize those ideas into a meaningful (and not misleading or dishonest) order.
And in making meaning with our websites, we will do our best with the limited information we have--information about how our users might behave and examples taken from similar websites already succeeding out there on the web.
To submit, write your responses to the following questions in a Word document, then upload it to Blackboard under this week's folder in Current Assignments.
Labs are due two weeks from when they are assigned, on Sunday at 11:59pm eastern time.
Labs are each worth 5% of your final grade. Scoring on your submission will be based on the following rubric:
0% - Student does not submit on time or submits plagiarized or unacceptable work. Double check that you have attached the right file, as usually students get zeros because they upload a previous week's Lab by accident.
1% - Student answers less than half of the questions with sufficient or accurate responses. Make sure that you are leaving yourself enough time to complete the Lab each week, as usually students submit incomplete work because they were rushed at the last minute.
3% - Student answers almost all questions with sufficient and accurate responses. If you encounter a problem or have a question about one of the questions, be sure to post in Ask the Instructor well before 24 hours before the due date, then continue to attempt to resolve the issue on your own while you wait for a reply.
5% - Great job, maximum points! The student answers all questions accurately and sufficiently, demonstrating the best of their ability.
Note, because Labs span two weeks' worth of reading, it is recommended to go through the Lab twice, once after the first reading where you answer everything that you can, then again after the second reading where you answer everything else.
Lab1.html website above, what did the program do to help you? (Hint: what did the text editor pane, where you type your code, do as you typed, and what did the live preview pane on the right do as you typed?)<h1> tag do?<p> tag do?Lab1.html to have the code below and embed a screenshot of your text editor (with live preview open) as your answer to this question.<h7> a real HTML tag?Lab1.html webpage, similar to the example below. Embed a screenshot as your answer.Code for question 2 above:
<h1>It Works!</h1>
<h2>It Still Works!</h2>
<h3>It Definitely Still Works!</h3>
<h4>I'm Pretty Sure This Still Works</h4>
<h5>Work This Does.</h5>
<h6>Works? Yes. Mhm.</h6>
<h7>Oh no, this doesn't work.</h7>
Code for question 6 above:
<h1>My Items</h1>
<h2>Spatula</h2>
<h3>Mixing Batter</h3>
<p>This use requires a chef, batter, and a mixing bowl.</p>
<h3>Swatting a Fly</h3>
<p>This use requires a human and a fly.</p>
etc.
<h2>Mixing Bowl</h2>
etc.
<h2>Paper Towels</h2>
etc.