teaching machines

CS 318 Lab 1 – GitHub, Brackets, and Hellos

January 19, 2017 by . Filed under cs318, lectures, spring 2017.

Dear students,

Welcome to CS 318. In this class we learn to make web pages. We’ll learn some technologies like HTML5 and CSS, which are the primary tools of the web design trade. But more importantly, we’ll also grow our brains to think about how to structure information, separate style from content, and communicate through technology to audiences with diverse abilities and devices.

This class will always meet in a computer lab because we will be doing things. At the start of each lab, I will lead a 20-30 minute discussion, during which time I ask you to leave your computer monitors turned off. For the remainder of the lab you can have them on, because you will work with a partner to complete hands-on exercises spelled out below my notes here.

Let’s break some ice. Find a neighbor that you do not know and interview them with a couple of questions:

  1. If this class was prison, you’d ask, “What are you in for?” I hope this class is not prison. Ask them why they are taking the class and what they hope to do with the knowledge and skills they gain from it.
  2. Ask them about their pets or former Halloween costumes or their favorite family vacation. Find something that’s human about them.

We will spend a few minutes getting to know each other.

Now let’s get into the meat of the class. Suppose you are rummaging through a box in a grandparent’s attic, and you encounter a yellowed piece of paper, which we’ll call Exhibit A:

ingredients112cupswhitesugar1egg212cupssourcream4cupsallpurposeflour
2teaspoonsbakingsoda14teaspoonsaltdirectionspreheatovento350degreesf
175degreesclightlygreaseorlinebakingsheetswithparchmentpapercombinet
hesugarbeateneggandsourcreamtogethermixintheflourbakingsodaandsaltbl
endthoroughlydividedoughinhalfandformeachhalfintoalongrollnoteifyour
kitcheniswarmkeepthehalfofdoughyourenotworkingwithintherefrigeratorc
utoffanarrowsliceofdoughrolllightlywithhandsonlightlyflouredboardint
opencillikestripabout7incheslongformintoafigure8andpinchendstogether
placeoncookiesheetrepeatwithremainingdoughbakeat350degreesf175degree
scfor12to15minutes

What is it? Does it communicate information effectively?

A lot of our communication is “one-dimensional”. We broadcast a line or sequence of information. To group chunks of information into words, phrases, and sentences, we just add a little punctuation.

But some of our information is far more complicated. It’s a hierarchy. We usually show hierarchies in pictures, but when we get to a computer, all that information has to get funneled into a one-dimensional channel of bits. That leads us to an exercise.

Devise a scheme for communicating to your partner your family tree. Include three generations: your grandparents’ generation, your parents’ generation, and your generation. But use only words, not pictures nor gestures, and use as few words as possible. The fewer, the better!

After the time is up, communicate your trees to each other, and draw your partner’s tree. No questions are allowed, nor feedback, until both partners have shared.

We’ll share some of our strategies.

Communicating hierarchies of information and content is what the web is designed to do. The solution that Tim Berners-Lee invented for doing so in 1989 and which has stuck with us is called HTML: hypertext markup language. In HTML we sandwich are information in elements, which have an opening tag and a closing tag:

<bun>
patty
</bun>

HTML is a lot like our family tree problem, with the advantage that the information has a single root element from which all other elements descend.

We’ll dive into HTML in more detail next lab. For the rest of the time today, we’re going to get our tools for writing and publishing HTML set up.

Sincerely,

Lab

We have a few goals for today’s lab:

Please find a partner and work together on the steps below. Use only one machine and do a lot of talking to each other. Only one of you should be at the “helm,” running the keyboard and mouse. The other should be contributing with ideas, questions, and encouragement. Periodically, you will be asked to trade places.

Feel free to ask questions of your instructor or teaching assistant.

GitHub Account

All your work this semester will be stored on and submitted for grading via GitHub, a web service that’s like a USB drive on steroids. We’re using it for a few reasons:

Create a GitHub account by doing the following:

  1. Visit GitHub.
  2. Enter a username, email address, and a password of your choosing. Click Sign Up.
  3. Choose the free plan. Click Continue.
  4. Respond as you wish to the optional survey. Click Submit.
  5. Check your email and verify your email address.

Repository

Now create your repository, which we can think of as a folder that resides on the internet. You’ll use a single repository for all your work this semester. Follow these steps to make your repository:

  1. On the main page of your GitHub account, click Start a project.
  2. Enter cs318 for your Repository name.
  3. Click Create repository.

GitHub Desktop

The cs318 folder that you just made resides on the internet, but we need it on our own computer in order to add and edit its files. If you are using a lab computer, click on the Start Menu and search for GitHub_Install. Click Install. If you are using your own computer, download and install it.

Sadly, GitHub did not make this software easy for system adminitrators to install in a lab setting. It installs into a temporary location that only you can access—and only on your current computer. This temporary location will be cleared periodically, and it won’t be available if you switch machines. Likely you will need to install it several times throughout the semester. But let’s not worry about that right now. Minimize the hassle by using the same machine all semester. Pick a good one! (They’re all the same.) Or bring a laptop.

Now, let’s pull down our cs318 repository using GitHub Desktop:

  1. Open GitHub Desktop.
  2. Log in with your GitHub account.
  3. On the Repositories step, click Skip.
  4. Right-click on Tutorial in the left panel and click Remove. The tutorial covers more than we need.
  5. Click on + and the Clone tab. Choose the cs318 repository.
  6. The software wants to know where to place the repository on your local computer. On a lab machine, choose Documents, or some other directory on your H: drive. On your personal machine, choose some directory that you can find easily.
  7. You should see a view of your repository that says you have no changes. Right-click on the cs318 repository in the left panel, and click Open in Explorer or Open in Finder.

Brackets

GitHub Desktop doesn’t help us author webpages. It just helps us share them. To author webpages, we will use Brackets, a free editor started by Adobe but now in the hands of the people. It is already installed on the lab machines. If you’re using a personal machine, download and install it.

Open Brackets via the Start Menu. Click Getting Started / Open Folder… and navigate to the cs318 directory that you pulled down with GitHub Desktop.

Now we are ready to make some web pages!

Hello, World!

We will start by making the simplest of web pages.

Let’s create a directory for this first lab:

  1. Right-click in Brackets’ left panel and choose New Folder.
  2. Name it lab01. Be exact, as your instructor uses tools for grading that are very picky. Notice the leading 0 and the lowercase letters. For files on the web, you want to avoid uppercase and space characters.

Now let’s create a web page:

  1. Right-click on lab01 and choose New File.
  2. Name the file hello.html. Be exact.
  3. Enter the following text in the editor. I encourage you to type it rather than copy and paste. Feel the rhythm of HTML run through your fingertips. 
    <!DOCTYPE html>
<html>

<body>
Goodbye, Pluto!
</body>

</html>
    The whitespace is not terribly important.
  4. Believe it or not, but files like this are what make the web. But we don’t normally see the raw HTML. We must render the HTML. Click on the Live Preview button on the top-right of the Brackets window. It looks like a lightning bolt. Your web browser should pop open and display the rendered HTML.
  5. Arrange the Brackets editor and browser so that you can see both side-by-side. Edit the text, and watch it update live in the browser.

Committing

Let’s get this page up on GitHub now because the world needs to see it.

  1. Save your edits in Brackets.
  2. Switch to GitHub Desktop. You should see that your local repository has a new change. Enter a short summary that describes the changes. Convention says to use second person singular, with an implied subject. Like Add first page. If it helps, pretend that you are giving a command to the changes.
  3. Click Commit to Master. This saves the edits into a chunk of changes called a commit, but the commit is still only on the local machine. Click Publish to send it up to GitHub.

At the end of every work session, you are expected to commit your changes. If your computer falls in the river, at least your latest changes will still be on GitHub, but only if you commit regularly.

GitHub Pages

Now it’s time to let GitHub serve out our web pages:

  1. In GitHub Desktop, right-click on the cs318 repository and click View on GitHub. The browser will display your remote repository, which should now contain your lab01 directory.
  2. Open the Settings tab and scroll down to the GitHub Pages section.
  3. Click on Source and select master branch.
  4. Click Save.
  5. Now visit https://YOURUSERNAME.github.io/cs318/lab01/hello.html in your browser, replacing YOURUSERNAME with your real GitHub username.

We only need to do these steps once in the semester.

Another challenge.

Now switch places with your partner.

Let’s revisit the process of creating and committing a file:

  1. Create a new file named two.html in your lab01 directory.
  2. Insert the same HTML elements as you did in hello.html. But instead of the planetary salutation in the body element, insert your first names and last initials—on separate lines. View the page in the live preview.
  3. What do you notice about the formatting in the live preview? Fix the problem by embedding each of your names in a paragraph element, which is opened by a <p> tag. What is it closed by?
  4. Commit your new file and publish it to GitHub. Make sure it displays in your browser.

Once you have completed all these steps, check in with your instructor or teaching assistant to get your work checked off. You are free to leave when you have completed the steps or when lab ends, whichever comes first.

TODO