How the Internet Works – The 10,000ft. view – What is the internet?

View Github Repository Open presentation in a new window

RCopeland

See all presentation from RCopeland

How the Internet Works – The 10,000ft. view – What is the internet?

0 0

talk-how-the-internet-works

A Reveal.js slideshow about how the internet works, intended for non-technical people.

On Github RCopeland / talk-how-the-internet-works

How the Internet Works

The 10,000ft. view

Who am I

details here

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

What is the internet?

Cat Videos!

Funny Gifs!

Everything on the internet is a Document

The Documents have pieces that are delivered seperately.

  • The markup
  • The style
  • The behavior*

We're skipping that for now

What happens when I type in a url?

Let's talk about Client and Server

The Client

The Browsers

The Server

  • Apache
  • Nginx

The Basic Interaction

#1 - The Client hits a URL (by typing it, or hitting a link)

#2 - The Server receives the request, then performs any logic required to create the page.

#3 - The Server then delivers the page back down to the client.

#4 - The Client receives and then draws the page, so that the user can interact with it.

There's more!

A contact form

Steps for the contact form to work:

Let's assume its by itself on a page, and its already been loaded by the Client.

If the user types something, we should check it for errors...

It's done first on the Client side.

When the form is filled out, and user free, we click the Send button.

Then the Client will send it up to the Server.

When the Server gets the data, we check it again.

Why? Because you can never trust anything from the user.

Finally, the Server will take the data and perform the necessary steps to complete the task.

In this case, it will send an email to the site owner with the message.

Remember the component pieces thing?

Let's talk about it now.

So, when the Client receives its response from the server, it gets:

  • Markup
  • Styling
  • Behavior

Markup

Document Structure

Keywords:

  • HTML
  • Semantics

Styling

Look and Feel

Keywords:

  • CSS / LESS / SASS
  • Style Guide

Behavior

Actions that happen without a page refresh

Keywords:

  • Javascript / Coffeescript
  • Vendor Libraries: Omniture / Foresee / LiveLook / LivePerson

This slideshow is available on Github

http://www.github.com/RCopeland/talk-how-the-internet-works

THE END

Any Questions?