The Internet

INTRO

INTRO // The Internet

A connection of computers through a network

Tim Berners-Lee invents the World Wide Web in 1990

50 websites exist by 1993

Wikipedia, Yahoo, Ebay, Hotmail, Craigslist, Paypal, Youtube, Myspace, Twitter, Facebook, etc. etc...

»

»

»

»

1,000,000,000+ websites by 2014

»

More than just pictures of cats

»

INTRO // How The Web Works

A simplified look at a typical web architecture

Client

(Web Browser, Mobile App)

Web Server

Database

Requests

Responses

INTRO // Web Site vs Web App

What's the difference between

Web Sites

and

Web Apps

???????

INTRO // Web Development

The development process can be broken into two areas

FRONT-END WEB DEVELOPMENT

BACK-END WEB DEVELOPMENT

• How things look to the user

• Involves: Images, Content, Structure

• HTML, CSS, & Javascript

• How things work

• Involves: "business logic"

• Ruby, PHP, C++, Java, etc.

_________________________________________________________________________________________

INTRO // Front-End Technologies

HTML

Content

CSS

Presentation

JavaScript

Interactivity

We'll be learning about all three of these today

INTRO // Back-End Technologies

Ruby

Dynamic, elegant programming language

We'll be learning about these two tomorrow

Sinatra

A simple library for quickly creating web applications with Ruby 

INTRO

Tools We'll Be Using

INTRO // Tools

Web Browser

We'll be using Google Chrome

It provides many developer-friendly tools ("inspect element")

INTRO // Tools

Coding Environment

We'll be using Cloud9

• It's free

• Provides syntax highlighting, code hinting, auto completion, and a lot more features geared toward writing code

• Word, Pages and any WYSIWYG editor are NOT suitable for code!

INTRO // Goal

By the end of this workshop, our goal is to build a To Do List app that saves tasks to a database.

INTRO

Let's take a look!

Developer Tools

Your browser has some very powerful built-in tools to help you inspect your web page 

Dev Tools

Developer Tools

You can open the developer tools by

• Right-clicking on any element and selecting "Inspect element"

• Pressing the "hamburger" button at the top right corner and selecting More Tools -> Developer Tools

• Pressing the keyboard shortcut Cmd-Option-i  (Mac) or Ctrl-Alt-i (Win... I think)

Dev Tools

Let's take a look

Cascading Style Sheets

Rules that specify how your elements should appear in your document

CSS

Before

After

CSS

CSS Syntax

h1 {
    font-size: 16px;
    color: red;
}

• CSS Selector

• Declaration block denoted by the opening {   and closing   }

• A declaration consists of a property and a value, separated by  :  and ends with  ;

CSS

property: value; 

p {
    font-size: 16px;
    color: red;
}

Properties:

Values:

Pre-defined terms that will change the way elements look and behave.

Properties are set with values using a colon.

Declaration:

Together, each property-value pair form a declaration

CSS

Selecting an HTML element

article {
    background-color: red;
}

The rule's selector will define which elements in the HTML document will have this rule's declarations applied.

CSS

Selecting an HTML element

p {
    text-align: center;
}

Select the element by its tag name

<p> 
    It's morphing time!
</p>

CSS

Selecting an HTML element

.box {
    width: 100px;
    height: 100px;
    background-color: green;
}

We don't just have to select by element type...

Custom rules can be written using the class selector. In order to apply a class, we add a class attribute to our HTML element.

CSS

Applying a class attribute

<div class="box">
    <p>I'm shaped like a box</p>
</div>

This is the class attribute.

A class is a way of grouping similar things together, like how cars and trucks are both automobiles. The class attribute is useful for styling and adding interaction to many elements at once.

CSS

Selecting an HTML element

.highlight {
    background-color: red;
}

<h1 class="highlight"> 
    Hello there! 
</h1>

Class selectors are denoted through dot ( . ) notation

CSS

Applying an id attribute

<div id="unique">
    <p>I'm the only box like me</p>
</div>

This is the id attribute.

It’s used to uniquely identify an HTML element in a document. You can add this attribute to any tag. It’s useful for styling and adding interaction.

CSS

Selecting an HTML element

#page-title {
    background-color: red;
}

<h1 id="page-title"> 
    Hello there! 
</h1>

id selectors are denoted through hashtag ( # ) notation

CSS

JavaScript

The dynamic programming language built into every web browser

What's JavaScript used for?

JS

Adds interactivity to your web pages

Check out this fun lightbox example!

JS

JavaScript is available in every browser

JS

A little background info on JS ...

JS

Created by Netscape back in 1994

JS

JavaScript is NOT Java

This is a common misconception

JS

LET'S OPEN UP OUR CONSOLES

View   >   Developer   >   JavaScript Console

MAC

cmd + option + j

WIN

ctrl + shift + j

F12

or

JS

Basic Syntax

        
          var someNumber = 10;

• This is an example of a JavaScript statement

• Every statement ends with a semi-colon

JS

Comments

        
    // This is a single line comment

• The two forward slashes denote a single line comment

JS

How do you store values?

Values are stored in variables

JS

Variables

JS

Declaring a variable

        
           var someNumber = 5;

• var is reserved keyword

JS

• Prefix a statement with ' var ' to declare a variable

• Can change its value at anytime

• Equal sign is the assignment operator

Data Types

• Number

JS

• String

• Boolean

• Object

• Undefined

• Null

There are 6 different types of values:

Let's look at a few data types ...

JS

Number

        
   var someDecimalNumber = 3.1415926;

• Values of the number type are numerical values

JS

• Can be a regular integer

• Can be a decimal number

String

        
 var someString = "Some random text here";

• Strings are used to represent text

JS

• Defined by enclosing string of text characters in quotes

• Can use " "  or  ' '

Boolean

        
        var aTruthyValue = true;
        var aFalseyValue = false;

• true and false are reserved words

JS

• Similar to the concept of 1 & 0

• true is different from "true"

undefined

        
        var someUndefinedValue;
        var someVariable = undefined;

• A variable declared with no value is automatically set as undefined​ 

JS

• undefined is used to denote the absence of a meaningful value

Arrays

        
     var someArray = [45, "bloop", true, null];

• Allows you to store a sequence of values

JS

• It's a list of values stored between square brackets, separated by commas

• The values stored in the array can be of any data type

Arrays cont'd

        
     var someArray = [45, "bloop", true, null];
         someArray[1] // returns "bloop"

• Arrays are an ordered list of items

JS

• Each element in the array has an index position

• Index positions always start counting at 0

• Syntax: nameOfArray[indexPosition]

Arrays cont'd

        
     var someArray = [45, "bloop", true, null];
         someArray.length // returns 4

• To check how long an array is, check its length property

JS

• The length property returns how many elements are stored in the array

Objects

        
     var someObject = { key: "value" };
         someObject["key"] // returns "value"
         someObject.key    // returns "value"

• There are no index positions in objects

JS

• Retrieve values stored in objects by using the key's name

• There are multiple ways to retrieve values from an object: dot or square bracket notation

Time to try it yourself!

JS

Ruby

A dynamic, open source programming language with a focus on simplicity and productivity

It has an elegant syntax that is natural to read and easy to write.

def say(speech)
    puts speech
end

say "Hello World!"

# => Prints 'Hello World!' to the screen

Yukihiro Matsumoto aka Matz released Ruby in 1995 and says "I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language."

Origins

Gained a lot of popularity in the developer community around 2005 with the advent of Ruby on Rails, a web framework used to quickly create web applications.

Popularity

3.  Press Enter

Getting Started

2.  Type cd <space> and drag & drop the project folder

     into the command line 

1.  Open up Terminal (Mac) or Command Prompt (Win)