In this lab we will focus on:
This lab will be due Sunday, Feb. 18th, midnight eastern time.
Last week we watched a video on the "Business Model Canvas" (BMC) being applied to the Pokemon Go app.
What does this have to do with web design?
This is not a class on business planning, but some business planning, even if for a fake business, will help you answer questions like:
The BMC is the simplest and most visual way I've found to explore business plans--it's even what we used to help children design their own businesses a few years ago at the Governor's School of Entrepreneurship!
I bring this up because many new web programmers make the mistake of adding in too many features that have no purpose for the job at hand. For example, comment sections. Comment sections might be cool and sound like a good idea at the time, but you should stop and ask yourself, "Do I or my users really need a comment section?" Comment sections are hard to program, require a database, and allow for users to post spam to your site, so if there is no need to code one, save yourself the time and move on to the next idea.
If you just want to program a small piece of a website to get a good idea of how it would work in general, go right ahead. We learn best when experimenting. If you are designing a website that you plan to "take live," then I recommend going about it with clear attention to what the goals of the website are.
By the end of the semester when I ask you to make a website for a business of your own, I want you to be able to demonstrate and explain why you have a big red button in the top right corner of your home page. Maybe you are a natural gas company, and you want to prioritize helping people if they smell a leak, so your button is:
Developing this ability to select and use the most appropriate features for your website is, for our class, more important than a mastery of HTML.
Now, so far we've only seen text for our websites. But there's two other, fundamental, important, and common "content types" that we'll talk about today: images and tables.
For text, I will just say this: You have control over the size, color, decoration (underline, etc.), style (italics, bold), and font of your text. Use these powers responsibly. By "responsibly," I might mean to choose colors that are easy to read, don't have too many different fonts on one page because that's annoying, and be cognizant of how your HTML might be used by a screen reader.
For example, header tags (<h1>, etc.) can be used by a screen reader to detect the hierarchy and help the user "jump" between sections. Further, tags like <b> and <i>, which make font bold and italics, are usually better replaced with <strong> and <em> nowadays. Simply put, the first two change the way the font looks. The second two change the way the font looks and sounds when read by a screen reader. This makes it clear that the text is receiving semantic emphasis, not just some visual difference.
Images in HTMl use the <img /> tag. Unlike paragraphs and headers and so on, the image tag is a "self-closing tag." This means (in strict versions of HTML), there is no </img> to be found, and the tag closes itself with a space and a slash at the end like so:
<img src="http://google.com/favicon.ico" alt="Google Logo" />
So, to specify where the image file is stored, we use the src attribute. In the above example, I've used the URL to Google's browser tab logo. To explain that to screen readers, I've briefly labled the image with the alt attribute.
You can also control the size of the image like so:
<img src="http://google.com/favicon.ico"
alt="Google Logo"
height="64"
width="128" />
This will make the image 64 pixels tall and 128 pixels wide. It will look pretty distorted, however, since the original image is very small and square, not rectangular.
Finally, in my above example I wrote the attributes on one line each. You do not have to do this, but you have the option it if it would make your code easier to read by other programmers. All that matters is that I've correctly named, labeled, spaced, and closed off everything
Tables used to be used for layouts, but we don't do that anymore because it causes a lot of problems.
Instead, tables are useful for displaying "tabular" data, like a spreadsheet or the Kentucky Mesonet's yearly weather data.
Tables start out like this:
<table>
</table>
Then we add in the rows that we want:
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Next, it's a good idea to have a "header row" at the top:
<table>
<tr>
<th>Pet Name</th>
<th>Species</th>
<th>Color</th>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
This is where it's a little tricky to imagine. Although our code is written top to bottom, the labels (Pet Name, etc.) will appear left to right along the top of our table. Also, because we used the <th> tags, the browser (and screen readers) will know that these are headers. The <th> tag is to tables as the <h1> tag is to paragraphs.
Next, we fill in our data, one row at a time:
<table>
<tr>
<th>Pet Name</th>
<th>Species</th>
<th>Color</th>
</tr>
<tr>
<td>Spencer</td>
<td>Cat</td>
<td>White with Blue</td>
</tr>
<tr>
<td>Clarence</td>
<td>Cat</td>
<td>Blue with White</td>
</tr>
<tr>
<td>Molly</td>
<td>Dog</td>
<td>Gold</td>
</tr>
</table>
Here we fill in the data in a way that corresponds with our header row: The first line of each "chuck" is a Pet Name, the second is a Species, and so on. Also, we use <td> tags here instead of <th> tags.
If you have not guessed or read so already, these tag names are abbreviations for Table Row (<tr>), Table Header (<th>), and Table Data (<td>).
Bootstrap is a set of code that helps you get started with a webpage quicker. It was written by developers working at Twitter, and has since taken on a popularity of its own.
We won't go too much into detail into Bootstrap here, but I need to mention it because the tool I am about to introduce is intended to help you write websites with Bootstrap.
In other words, we'll be using a tool to write code for us using code that was meant to help write websites for us.
The most important take away from Bootstrap itself is that it comes with a lot of components. These are common UI features that appear on websites, like navbars, buttons, lists, progress bars, ... In addition, Bootstrap is "responsive" from the get go, meaning that your layouts should automatically adjust to work ideally on phones, tablets, laptops, desktops, and so on, with you only needing to code one version of the website!
You can see the full list of components with example codes here it you are interested.
What we will be using is a program called Pingendo. If for some reason Pingendo does not work, you can use a similar tool that runs in the browser named LayoutIt.
Before we get started, here are some useful links about Pingendo:
To get started with Pingendo:
For example, here is a test webpage I made in Pingendo:
And here is the same webpage as it appears in my browser:
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.
<img />) at a minimum must have what two attributes?