Webdev Week 2

CSS & Review

Office Hours every Wednesday

(11am-12:30pm in Bodine Math Lounge)

Updates to the course webpage

  • Slides posted on homepage
  • Office hours posted on homepage
  • Git Cheatsheet (section 12.2) updated

Topics we've come across

  • Unix command line
  • HTML
  • Git/GitHub
  • Ruby
  • MVC

What you should know

  • Basic command line use: cd, ls, rm, cp, mv, 
  • How to create and edit plain-text files
  • How to make a Git commit using the command line
  • Basic HTML syntax: opening and closing tags, attribute syntax

If you are struggling with one of these things, find a tutorial online or come to office hours!

Review: HTML

HTML has

  • A set of tags that have certain meanings
  • The ability to set attributes on those tags
  • A corresponding styling language called CSS and a corresponding programming language called JavaScript

HTML is a markup language similar to XML that is used to write content for the web.

An HTML document

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
        <title>A simple HTML document</title>
    </head>
    <body>
        <div class="content">
            <p>This is a paragraph</p>
            <ul>
                <li>This is</li>
                <li>A list</li>
            <ul>
        </div>
    </body>
</html>
  • doctype - what version of html
  • tags - basic unit of html
  • head - metadata
  • charset - what encoding our file is in
  • attributes - content metadata. No spaces surrounding "="

Review: Git

Git is a distributed version control tool that lets you easily track changes in your code over time.

Git is also:

  • A filesystem-based tool: git doesn't carry any settings between folders (unless you tell it to)
  • A way to "save your place" by making a snapshot of your code at a given point in time.
  • A way to share and collaborate on code.

Git Concepts

  • Repository - A project or chunk of standalone code that is set up to be used with Git. You can think of it as the folder that your project lives in.
  • Commit - A snapshot of what a repository looked like at a given point in time. You can think of it as a bookmark that you can use to undo a mistake.
  • Tag - a way of pointing out a specific commit as significant. Tags are often used to represent software version numbers in Git. 

More Git Concepts

  • Remote - A repository stored on another server that you can use to share and back up your work. We are using a GitHub repository as our remote.
  • GitHub - A commercial service that hosts Git remotes and provides a sophisticated web interface for managing those remotes.
  • Pushing - Uploading commits from your local repository to a remote.
  • Pulling - Downloading commits from a remote to your local repository.

Review: Ruby

Ruby lets you

  • Use simple english-like syntax like "each", "unless", and "do"
  • Switch between functional and imperative programming depending on the task at hand
  • Develop more quickly than a statically typed, compiled language like C or Java

Ruby is a dynamic scripting language that has become very popular for web development

irb demo!

Ruby Gotchas

# double quotes are not the same as single quotes
name = "Quinn"
puts "Hello, #{name}" # prints Hello, Quinn
puts 'Hello, #{name}' # prints Hello, #{name}

# the last line in a function is the implied return value
def sayhi(name)
    "Hi #{name}"
end

# is equivalent to
def sayhi(name)
    return "Hi #{name}"
end

# parentheses are usually optional
puts sayhi "Quinn"

Ruby Blocks

# blocks are enclosed in {} or do...end
# they're a little bit like anonymous functions

fruits = ['apples', 'bananas', 'oranges']

fruits.each {|fruit|
    puts "Monkeys like #{fruit}"
}

fruits.each do |fruit|
    puts "Monkeys like #{fruit}"
end

# Ruby also lets you use functional concepts like map, join, & select

puts "Monkeys like " + fruits.join(" & ")

ERB gotchas

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
    </head>
    <body>
        <p><%= @this_will_output_something %></p>
        <p><% @this_will_not_output_anything %></p>
    </body>
</html>

</review>

CSS

Cascading Style Sheets!

CSS

  • declarative language
  • selectors paired with rules
  • current version is 3
  • a work in progress (try googling "vertical center CSS" to see what I mean)

Selector Examples

/* this is a comment */

/* This is an element selector. It will match all <p> elements */
p { 
    /* This is a rule. It describes how the <p> elements should look. */
    background: #FEFEFE;
}

/* This is a class selector. It will match all elements with class="widget" */
.widget { 
    font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
    color: #333;
}

/* This is an id selector. It will match ONE element with id="bob" */
#bob {
    width: 9001px;
}

Combining Selectors

/* this will match all paragraphs */
p {
    padding: 10px;
}

/* this will match the intro element */
#intro {
    font-family: sans-serif;
}

/* this will match paragraphs that are descendants of the id="intro" element */
#intro p {
    background-color: #c0392b;
    color: #FFF;
}

/* this will match paragraphs that are direct children of the id="intro" element */
#intro > p {
    text-decoration: underline;
}

demo

Debugging

  • Browsers have debuggers!
  • Let's use one!

Exercise

http://bit.ly/1u2c8S7

Assets

  • Static content that is needed by Views
  • Examples of assets: CSS files, Javascript files, images, & fonts
  • In Sinatra, assets go in the public folder. Files in this folder are served at /.

Sinatra CSS demo!

Lab Time

You can access this slideshow at slides.com/qrohlf

Webdev Week 2

By Quinn Rohlf

Made with Slides.com

Webdev Week 2

  • 1,259

More from Quinn Rohlf