Introduction to web (techie side)


Published on

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

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to web (techie side)

  1. 1. How web sites work An epic story of how delivers important news to my screen every morning
  2. 2. 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?
  3. 3. 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.
  4. 4. 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
  5. 5. 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, or of course
  6. 6. Do websites actually exist in cyberspace? •  No!!! •  Websites live in specific locations on web servers
  7. 7. 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 •
  8. 8. How does a URL map to a web page? •  Domain names are part of a URL  ( •  DNS servers map domain names to physical machines
  9. 9. 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
  10. 10. Finally a web page •  This is what we expect to see on our screen
  11. 11. 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
  12. 12. 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??
  13. 13. HTML is very simple •  Yes that kind of simple •  BUT it does do a couple of things very well
  14. 14. 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
  15. 15. HTML and Images •  It’s still not quite right •  The Browser now needs to request all the Images from the server too
  16. 16. We request this
  17. 17. It starts like this
  18. 18. Trasforms into this
  19. 19. And finally blossoms into this
  20. 20. 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!!!
  21. 21. 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
  22. 22. A little bit of jargon •  Server side code versus client side code
  23. 23. 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)
  24. 24. What is a Database? •  Think of Dom’s rolodex, it stores specific information •  The databases we use allow us create our own structure
  25. 25. 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
  26. 26. Honourable techies •  Thanks for listening, you can all be honourable techies for the day… Because deep down I all know you want to be