Monday 2/29

  • Review Midterm Guidelines
  • Office Hours reminder: by appointment, or additional office hours on Wednesday
  • Show & Tells: George, Camille, James C
  • User Testing (slides)
  • User Test Responsive Prototypes
  • HTML5 Audio/Video
  • Intro to Git & GitHub
  • Review Topics
  • Non-Quiz...?

HTML5 Audio & Video

  • <audio> and <video> elements
  • Some useful attributes:
    • autoplay muted loop poster="path/to/image"
  • Useful resource: archive.org (example)
  • Formats supported by various browsers. See sub-features for video here and for audio here. It is best to include multiple sources. Example:
    <video autoplay loop muted poster="video/stock_flowers.jpg">
  <source src="video/stock_flowers.mp4">
  <source src="video/stock_flowers.ogv">
</video>

Git / GitHub

  • Git - Version Control
  • Key vocab from the GitHub Glossary:
    • repository - Project folder.
    • commit - A revision to a file or set of files. Add files before committing them.
    • fork - A personal copy of another user's repository that lives on your account
    • clone - A copy of a repository that lives on your computer instead of on a website's server.
    • merge - Combine changes. Git can merge changes automatically.
    • push - Send your committed changes to a remote repository
    • pull - Fetch changes and merge them
    • pull request - A request to merge (pull) changes
    • remote - A version of a repository that is hosted somewhere else, for example on GitHub's server.
  • GitHub - a website to host "git repositories"
  • In class exercise:
    • Fork my repo to your github account
    • Clone it to your computer
    • Edit the index.html to add a link to your GitHub account
    • Commit your changes
    • Push your committed changes to your fork
    • Submit a pull request from your fork to the original repo. I will merge in the changes.

HW

  • Read up on GitHub
  • Post your project to your personal GitHub.
  • Submitting a pull request to this github repo that adds a link to your github account.
  • Review the Non-Quiz and come to the next class with any questions related to this or your midterm projects / self learning

Wednesday 3/2

Grid Review

Forms & User Input

Forms and Input elements allow the user to interact and submit information. Typically forms "submit" to a server with a GET or POST request.

  • A <form> element wraps one or more elements that accept user input. Their name attribute determines the name for a set of name-value pairs (often referred to as "key-value pairs"). The form has two important attributes:
    • action attribute determines a url that the form will submit its data
    • method is an HTTP request method, either get (default) or post. A get request is the type of request we make with our browsers when we load a webpage, and the result will look something like this: http://formactionurl.com/?key=value&key2=value2.

  • <input> has a type attribute. There are many different types including

    • text - text input
    • radio - radio button. A set of radio buttons shares a name and only one of them can be selected. Each has a unique value. That value becomes the value for that name/key.
    • color colorpicker
    • search
    • email
    • password
    • date
    • button - same as a <button> element
    • submit - button that submits the form
    • Read more about types here and about input attributes here.

  • <label> is a way to label a form element. Its attribute for="name" determines the name of the input element it references.

  • <select> - a dropdown with several <option> elements. The select has a name attribute, and can have a multiple attribute to allow selection of multiple options. Read more here.

In our example in class, we submitted a form to the Spotify API that looked like this.

  <form action="https://api.spotify.com/v1/search" method="GET">

    <!-- a text input fills out the q= value -->
    <label for="q">Enter a search query</label>
    <input name="q" type="text" placeholder="Enter Text">

    <br/>

    <!-- two radio buttons share the same name, to fill out the type of thing we're searching for, either type=artist or type=track -->
    <label for="type">Choose a type</label><br/>

    <label for="artist">Artist</label>
    <input id="artist" name="type" type="radio" value="artist">

    <label for="track">Track</label>
    <input id="track" name="type" type="radio" value="track">

    <input type="submit">
     Click to submit
    </input>
  </form>