SlideShare une entreprise Scribd logo
1  sur  26
Télécharger pour lire hors ligne
How web sites work



 An epic story of how rugbyheaven.com.au
delivers important news to my screen every
                   morning
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?
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.
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
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
Do websites actually exist in cyberspace?

•  No!!!

•  Websites live in specific locations on web servers
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
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
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
Finally a web page

•  This is what we expect to see on our screen
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
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??
HTML is very simple

•  Yes that kind of simple

•  BUT it does do a couple of
   things very well
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
HTML and Images

•  It’s still not quite right

•  The Browser now needs to
   request all the Images from the
   server too
We request this
It starts like this
Trasforms into this
And finally blossoms into this
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!!!
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
A little bit of jargon

•  Server side code versus client side code
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)
What is a Database?

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

•  The databases we use allow us create our own structure
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
Honourable techies

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

Contenu connexe

Tendances

Tendances (16)

Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
Child Theming WordPress - Chris Aprea - WordCamp Sydney 2012
 
Static Site Generation with Hugo and Markdown
Static Site Generation with Hugo and MarkdownStatic Site Generation with Hugo and Markdown
Static Site Generation with Hugo and Markdown
 
Sharing is Caring - Web Development Resources
Sharing is Caring - Web Development ResourcesSharing is Caring - Web Development Resources
Sharing is Caring - Web Development Resources
 
Solving Common Client Requets with jQuery Presentation (v2)
Solving Common Client Requets with jQuery Presentation (v2)Solving Common Client Requets with jQuery Presentation (v2)
Solving Common Client Requets with jQuery Presentation (v2)
 
Web typography
Web typographyWeb typography
Web typography
 
State of the Web
State of the WebState of the Web
State of the Web
 
Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...
Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...
Building Ebooks that Last - Teresa Elsey (Bridge International Academies) - e...
 
E Books
E BooksE Books
E Books
 
3.6.16 - How Platforms Work - Casey West
3.6.16 - How Platforms Work - Casey West3.6.16 - How Platforms Work - Casey West
3.6.16 - How Platforms Work - Casey West
 
HTML / CSS / JS Web basics
HTML / CSS / JS Web basicsHTML / CSS / JS Web basics
HTML / CSS / JS Web basics
 
Wikis
WikisWikis
Wikis
 
Wikis Pp
Wikis PpWikis Pp
Wikis Pp
 
Geek basics
Geek basicsGeek basics
Geek basics
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
Expert guide for PHP
Expert guide for PHPExpert guide for PHP
Expert guide for PHP
 
OOCSS presentation
OOCSS presentationOOCSS presentation
OOCSS presentation
 

En vedette (7)

The Role Of Digital Marketing
The Role Of Digital MarketingThe Role Of Digital Marketing
The Role Of Digital Marketing
 
What Is A Blog?
What Is A Blog?What Is A Blog?
What Is A Blog?
 
Blog Presentation
Blog PresentationBlog Presentation
Blog Presentation
 
Blogging ppt
Blogging pptBlogging ppt
Blogging ppt
 
Blog ppt
Blog pptBlog ppt
Blog ppt
 
Search Engine Powerpoint
Search Engine PowerpointSearch Engine Powerpoint
Search Engine Powerpoint
 
Importance of digital marketing
Importance of digital marketingImportance of digital marketing
Importance of digital marketing
 

Similaire à Introduction to web (techie side)

The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
hernanibf
 
Lesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ayLesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ay
Codecademy Ren
 

Similaire à Introduction to web (techie side) (20)

Linked Data: The Real Web 2.0 (from 2008)
Linked Data: The Real Web 2.0 (from 2008)Linked Data: The Real Web 2.0 (from 2008)
Linked Data: The Real Web 2.0 (from 2008)
 
How does the Internet Work?
How does the Internet Work?How does the Internet Work?
How does the Internet Work?
 
How Does the Internet Work? (Wix she codes; branch)
How Does the Internet Work? (Wix she codes; branch)How Does the Internet Work? (Wix she codes; branch)
How Does the Internet Work? (Wix she codes; branch)
 
BD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginningBD Conf: Visit speed - Page speed is only the beginning
BD Conf: Visit speed - Page speed is only the beginning
 
How does the Internet Work?
How does the Internet Work?How does the Internet Work?
How does the Internet Work?
 
LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2LecWeek2 lecture-whatiswebdesign-part2
LecWeek2 lecture-whatiswebdesign-part2
 
Wp 3hr-course
Wp 3hr-courseWp 3hr-course
Wp 3hr-course
 
Week01 jan19
Week01 jan19Week01 jan19
Week01 jan19
 
eMusic: WordPress in the Enterprise
eMusic: WordPress in the EnterpriseeMusic: WordPress in the Enterprise
eMusic: WordPress in the Enterprise
 
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...WORKSHOP ON OWN WEBSITE LAUNCHING  On March, 11th Sunday 2018 Morning 10 A.M ...
WORKSHOP ON OWN WEBSITE LAUNCHING On March, 11th Sunday 2018 Morning 10 A.M ...
 
The things we found in your website
The things we found in your websiteThe things we found in your website
The things we found in your website
 
Joyent circa 2006 (Scale with Rails)
Joyent circa 2006 (Scale with Rails)Joyent circa 2006 (Scale with Rails)
Joyent circa 2006 (Scale with Rails)
 
Lesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ayLesson 102 23 aug13-1430-ay
Lesson 102 23 aug13-1430-ay
 
world wide web
world wide webworld wide web
world wide web
 
Web design - How the Web works?
Web design - How the Web works?Web design - How the Web works?
Web design - How the Web works?
 
Introduction to web sites design
Introduction to  web sites designIntroduction to  web sites design
Introduction to web sites design
 
USG Rock Eagle 2017 - PWP at 1000 Days
USG Rock Eagle 2017 - PWP at 1000 DaysUSG Rock Eagle 2017 - PWP at 1000 Days
USG Rock Eagle 2017 - PWP at 1000 Days
 
My website is live now what?
My website is live now what?My website is live now what?
My website is live now what?
 
JSON all the way
JSON all the wayJSON all the way
JSON all the way
 
Web tips
Web tipsWeb tips
Web tips
 

Plus de Dominique Hind

How to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedInHow to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedIn
Dominique Hind
 
Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010
Dominique Hind
 

Plus de Dominique Hind (20)

How to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedInHow to create Ad Campaign in LinkedIn
How to create Ad Campaign in LinkedIn
 
Digital - Where to next? An API future
Digital - Where to next? An API futureDigital - Where to next? An API future
Digital - Where to next? An API future
 
NZ Digital Download - 2 April 2011
NZ Digital Download - 2 April 2011NZ Digital Download - 2 April 2011
NZ Digital Download - 2 April 2011
 
Digital isn't everything, it's part of the pie
Digital isn't everything, it's part of the pieDigital isn't everything, it's part of the pie
Digital isn't everything, it's part of the pie
 
TCC Presentation - Digital 101 (Sydney, AU)
TCC Presentation - Digital 101 (Sydney, AU)TCC Presentation - Digital 101 (Sydney, AU)
TCC Presentation - Digital 101 (Sydney, AU)
 
Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010Qantas Customer Satisfaction Survey - 2010
Qantas Customer Satisfaction Survey - 2010
 
Digital Introduction - AU Market
Digital Introduction - AU MarketDigital Introduction - AU Market
Digital Introduction - AU Market
 
Google Shopping (Beta - Digital Camera Journey
Google Shopping (Beta - Digital Camera JourneyGoogle Shopping (Beta - Digital Camera Journey
Google Shopping (Beta - Digital Camera Journey
 
Search Introduction - Updated
Search Introduction - UpdatedSearch Introduction - Updated
Search Introduction - Updated
 
CRM Introduction
CRM IntroductionCRM Introduction
CRM Introduction
 
Five characters of social marketing - update
Five characters of social marketing - updateFive characters of social marketing - update
Five characters of social marketing - update
 
What is a landing page?
What is a landing page?What is a landing page?
What is a landing page?
 
New Media presentation
New Media presentationNew Media presentation
New Media presentation
 
Search Overview - LB Digital Download
Search Overview - LB Digital DownloadSearch Overview - LB Digital Download
Search Overview - LB Digital Download
 
Apple Email Marketing - Review
Apple Email Marketing - ReviewApple Email Marketing - Review
Apple Email Marketing - Review
 
Obama Campaign Summary
Obama Campaign SummaryObama Campaign Summary
Obama Campaign Summary
 
Search Marketing 101
Search Marketing 101Search Marketing 101
Search Marketing 101
 
Digital Marketing 101 - Interactive Training
Digital Marketing 101 - Interactive TrainingDigital Marketing 101 - Interactive Training
Digital Marketing 101 - Interactive Training
 
Dell Ideastorm - Community involvement
Dell Ideastorm - Community involvementDell Ideastorm - Community involvement
Dell Ideastorm - Community involvement
 
Social Marketing - 5 Characters Types
Social Marketing - 5 Characters TypesSocial Marketing - 5 Characters Types
Social Marketing - 5 Characters Types
 

Dernier

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Dernier (20)

Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

Introduction to web (techie side)

  • 1. How web sites work An epic story of how rugbyheaven.com.au delivers important news to my screen every morning
  • 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. 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. 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. 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
  • 6. Do websites actually exist in cyberspace? •  No!!! •  Websites live in specific locations on web servers
  • 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 •  http://www.rugbyheaven.com.au/news/200909.html
  • 8. 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
  • 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. Finally a web page •  This is what we expect to see on our screen
  • 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. 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. HTML is very simple •  Yes that kind of simple •  BUT it does do a couple of things very well
  • 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. HTML and Images •  It’s still not quite right •  The Browser now needs to request all the Images from the server too
  • 19. And finally blossoms into this
  • 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. 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. A little bit of jargon •  Server side code versus client side code
  • 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. What is a Database? •  Think of Dom’s rolodex, it stores specific information •  The databases we use allow us create our own structure
  • 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. Honourable techies •  Thanks for listening, you can all be honourable techies for the day… Because deep down I all know you want to be