1 of 44

Slide Notes

DownloadGo Live

How Does a Web Page Work?

Published on Nov 19, 2015

No Description

View Outline

MORE DECKS TO EXPLORE

PRESENTATION OUTLINE

1.

HOW DOES A WEBPAGE WORK?

Photo by Sebastian Fuss
2.

Untitled Slide

Photo by TR4NSLATOR
3.

BROWSER

WEB DEV
Photo by A Guy Taking Pictures
4.

THE BROWSER BELONGS TO THE USER

THE USER LETS US LOAD OUR CODE
5.

NOT ALL BROWSERS ARE DESKTOP

IOS SAFARI IS NOW IN THE TOP 5
Photo by LJR.MIKE
6.

There has been an evolution...

In the beginning, there was HTML

Photo by Rory Finneren
7.

HTML uses tags to create links and define document structure

Photo by William Brawley
8.

SHOW HTML

9.

HTML is finally standardized on HTML 4.

Different browsers have different interpretations of the standard.

Photo by Sebastian Anthony
10.

WHAT ABOUT HTML 5?

THERE'S A DRAFT STANDARD...
Photo by davecito
11.

Early HTML was tortured into doing layouts.

Photo by cambodia4kidsorg
12.

CSS STYLES THE PAGE

Photo by eisenrah
13.

EXAMPLE

EANKA.COM
14.

EXAMPLE

KLICK.COM
15.

JAVASCRIPT

MAKES ACTIONS HAPPEN IN THE BROWSER
Photo by nyuhuhuu
16.

EXAMPLE

FORM VALIDATION
17.

EXAMPLE

PAULRHAYES.COM/EXPERIMENTS/CUBE-3D
18.

COMPROMISES

WEB DEV IS ALL ABOUT COMPROMISES
Photo by FelipeCN
19.

CONNECTS TO

NETWORK ENGINEERING & SYSTEMS ADMINISTRATION
Photo by Doha Sam
20.

... AND YOU HAVE A BROWSER...

Photo by Josh Bancroft
21.

... SO WHAT'S NEXT?

Photo by Stéfan
22.

PUT THE FILES ON A "SERVER"

A SERVER IS A COMPUTER THAT TAKES CARE OF CUSTOMERS
Photo by BobMical
23.

HTTP IS A WAY TO MOVE A FILE

WELL, A COPY OF A FILE ANYWAY
Photo by mathplourde
24.

SO YOU HAVE HTML, CSS AND JS FILES...

Photo by kjetikor
25.

A FIREWALL PROTECTS THE SERVER

OTHERWISE ANYONE COULD GIVE IT COMMANDS
Photo by Zac Garrett
26.

A DOMAIN NAME IS LIKE A PHONE BOOK AD

IT TELLS YOU WHAT IP ADDRESS TO USE FOR A WEBSITE
Photo by berlinframes
27.

HARDWARE ALWAYS FAILS

YOU NEED N+1 REDUNDANCY
Photo by darkroom productions
28.

AND YOU NEED TO WATCH IT 24/7/365

15 MINUTES TO RESPOND, ALWAYS
Photo by T. Fernandes
29.

HTTPS IS ITS SECURE COUSIN

THE ENTIRE TRANSMISSION IS ENCRYPTED
Photo by Josef Türk Reit im Winkl Chiemgau
30.

SERVER

APP DEV
Photo by Laurence Vagner
31.

WE COULD STORE DATA

THINGS LIKE TRACKING, LOGINS, FORMS, POLLS, ANY KIND OF RECORD
Photo by tec_estromberg
32.

... IN A DATABASE

THE BLUEPRINT IS A SCHEMA, THE LANGUAGE IS SQL
Photo by RixTox ╯~╰
33.

WE COULD PROCESS IN REALTIME

FULFILLMENT, ECOMMERCE, SEARCH AND THE LIKE
Photo by Tris Linnell
34.

WE COULD LINK UP TO OTHER SERVERS

APIS, AD NETWORKS, SYNDICATION, ...
Photo by arrayexception
35.

WE COULD UNLEASH THE
FULL POWER OF THE COMPUTER

Photo by joncallas
36.

WE DO THIS USING LANGUAGES

  • C#, PHP - programming the server
  • SQL - databases (many dialects)
  • SOAP, REST - connecting to other servers
  • .NET, Drupal, WordPress - frameworks
Photo by simonov
37.

FITTING IT ALL TOGETHER

Photo by mikemccaffrey
38.

WHAT IF THE BROWSER CODE COULD CHANGE?

WE COULD SEND ANYTHING TO THE BROWSER!
Photo by Kuba Bożanowski
39.

DIAGRAM

40.

THAT'S HARD!

THIS IS SO COMPLEX THAT NO ONE CAN DO IT
Photo by Stuck in Customs
41.

WE NEED QA!

SOFTWARE TESTING IS THE KEY TO SUCCESS
Photo by Cognizant Technology Solutions
42.

SOFTWARE TESTING

NOW PART OF THE NATIONAL CONVERSATION
43.

QUESTIONS?

Photo by an untrained eye
44.

TONIGHT

MAKE YOUR OWN WEBPAGE! HTML AND CSS.
Photo by secretlondon123

Alf Whitehead

about.me/alf.whitehead