introduction to web (techie side)

26
How web sites work An epic story of how rugbyheaven.com.au delivers important news to my screen every morning

Post on 17-Oct-2014

1.279 views

Category:

Technology


0 download

DESCRIPTION

A very insightful presentation by Nick McGrath about a technical introduction to websites. It explains how a website works and where it lives.

TRANSCRIPT

Page 1: Introduction to web (techie side)

How web sites work

An epic story of how rugbyheaven.com.au delivers important news to my screen every

morning

Page 2: Introduction to web (techie side)

Covering

•  What is a website and where does it live?

•  How does our browser find a given website?

•  How does our browser display a given website?

•  What is a database and how does it work?

Page 3: Introduction to web (techie side)

What is the Internet?

•  The internet is like our office computer network but on a global scale

•  There are literally millions of computers in this networked together

•  Simply put the internet is an international network of computers.

Page 4: Introduction to web (techie side)

What is the World Wide Web?

•  The www exists on the internet

•  It’s a lose term to define the part of the internet that everyone can see and use

Page 5: Introduction to web (techie side)

What is a website?

•  According to the wikipedia a website is a collection of related web pages, images, videos or other digital assets that are addressed with a common domain name

•  Let’s be serious though, we all know what a website is. We’ve all been to google.com, wikipedia.org or of course rugbyheaven.com.au

Page 6: Introduction to web (techie side)

Do websites actually exist in cyberspace?

•  No!!!

•  Websites live in specific locations on web servers

Page 7: Introduction to web (techie side)

How do we find what we’re looking for?

•  With all these computers and all this information available on the www wouldn’t it be great if there was a uniformed way of locating all the resources we’re looking for…

•  Introducing the uniformed resource locator or URL for short

•  http://www.rugbyheaven.com.au/news/200909.html

Page 8: Introduction to web (techie side)

How does a URL map to a web page?

•  Domain names are part of a URL ─ (http://www.rugbyheaven.com.au/news/200909.html)

•  DNS servers map domain names to physical machines

Page 9: Introduction to web (techie side)

Finally our browser has found our site

•  Now our computer can open a dialogue between the browser and the web server using the request-response model

Page 10: Introduction to web (techie side)

Finally a web page

•  This is what we expect to see on our screen

Page 11: Introduction to web (techie side)

How does it happen?

•  A request is made to the server for a single specific file (in this case index.html)

•  A response is sent back to the browser in the form of HTML

Page 12: Introduction to web (techie side)

HTML

•  Our browser reads the HTML and renders it to our screens

•  Why doesn’t it look anything like the web site I know and love??

Page 13: Introduction to web (techie side)

HTML is very simple

•  Yes that kind of simple

•  BUT it does do a couple of things very well

Page 14: Introduction to web (techie side)

HTML has friends

•  HTML is very good at displaying text / data and linking to other resources

•  Links to other resources can be overt or covert

•  This page has been improved slightly by including cascading style sheets

Page 15: Introduction to web (techie side)

HTML and Images

•  It’s still not quite right

•  The Browser now needs to request all the Images from the server too

Page 16: Introduction to web (techie side)

We request this

Page 17: Introduction to web (techie side)

It starts like this

Page 18: Introduction to web (techie side)

Trasforms into this

Page 19: Introduction to web (techie side)

And finally blossoms into this

Page 20: Introduction to web (techie side)

Statistics

•  In the example we just saw there were 64 files downloaded to the browser, they were combinations of css, js, jpg, gif and swf’s… And it all happened so quickly

•  A little closer to home, on the PhotoChains homepage there are more than 130 separate files downloaded!!!

Page 21: Introduction to web (techie side)

So who builds this?

•  Basically everything we’ve seen so far is built by Keong or a bunch of people like him

•  And if web sites / pages never changed I’d be out of a job

Page 22: Introduction to web (techie side)

A little bit of jargon

•  Server side code versus client side code

Page 23: Introduction to web (techie side)

So what does server side code do?

•  Web pages are not all static, in fact most these days are dynamic

•  Servers run pieces of code to deliver different and more specific responses to the browser

•  Server side rarely lives alone though, it’s usually coupled with one or more databases (or databi if you want to impress)

Page 24: Introduction to web (techie side)

What is a Database?

•  Think of Dom’s rolodex, it stores specific information

•  The databases we use allow us create our own structure

Page 25: Introduction to web (techie side)

Finally

•  We now know what a website is and where it physically lives

•  We also know how our computer finds that website

•  And finally we know how a webpage gets displayed in our browser

•  We know what a database is and a bit about how it works

Page 26: Introduction to web (techie side)

Honourable techies

•  Thanks for listening, you can all be honourable techies for the day… Because deep down I all know you want to be