How modern web sites                      WORK                             by Claudio CicaliSunday, September 23, 2012
Who is this guy?                             I’ve been creating web sites since 1999                                      ...
Let’s introduce,                               you know...                               INTERNETSunday, September 23, 2012
The SERVER and the CLIENT                                                      Bob’s PC                                   ...
Sunday, September 23, 2012
Sunday, September 23, 2012
Sunday, September 23, 2012
Sunday, September 23, 2012
Sunday, September 23, 2012
Sunday, September 23, 2012
Clients and Servers use a common       “language” to talk to each other               The Internet Protocol (IP)Sunday, Se...
Servers and Clients need             a unique identifier             to address each other             This ID has to be un...
The IP address                             something like                             192.54.43.89                   ( fro...
The SERVER and the CLIENT                                                             Bob’s PC                            ...
Those addresses are                          a finite resource                             ( 4,294,967,296 )Sunday, Septemb...
Last week, Europe                  officially ran out of IP                          addresses                             ...
NOW WHAT!?!Sunday, September 23, 2012
The new hot thing is                             IP Version 6                     Slow and painful adoptionSunday, Septemb...
IPV6, the big promise:             we will never have the            shortage problem again                              1...
Numbers?                             192.19492.1011.234                             290.929.492.92992 3                   ...
Luckly, we (the clients) can        address servers by their              “human name”Sunday, September 23, 2012
The URL         Uniquely identifies a resource out there           A resource can be any of this things:                   ...
http://www.example.com/index.html                             You see URLs every day.                             It’s the...
http://www.example.com/index.html       Protocol              “human” server name      Resource         (How?)            ...
When you say         “I’ll give you the link of that web page”                             what you actually mean is      ...
http://www.example.com/index.html                                     resolved as...                             187.78.32...
DNS                        (Domain Name System)            Translates server names to IP addresses                        ...
“I need a kitten”                                    www.google.com?                             DNS                      ...
About DNS...                     Google offers its own, free for all:                           8.8.8.8 or 8.8.4.4        ...
Internet is all about                                SERVICES                                 (provided by... servers)Sund...
A service is something you use to...                             read a web page                               upload a fil...
In order to use the service,              you need to TALK to a server                  using a well understood           ...
http://www.example.com/index.html                 This language is the                   PROTOCOLSunday, September 23, 2012
The protocol stack                              Application Protocol                               Internet Protocol      ...
We define the service by                      the application protocol it uses                       read a web page, via H...
Internet protocols specification                must be OPEN              (hey, it’s MY data!)        Don’t trust CLOSED pr...
One more thing....                      A protocol is SECURE                         when no one can                      ...
In the vast majority of the cases,             a protocol message leaves and enters            your computer in CLEAR PLAI...
The evil eavesdropperSunday, September 23, 2012
HTTP (not secure)                  My                             Username: CLAUDIO       Me              Home banking    ...
A message is safe from eavesdropping              only if it’s encrypted                             Thus, the protocol mu...
HTTP is bad, HTTPS is good         SMTP is bad, SMTP + TLS is good                             FTP is bad, SFTP is goodSun...
“I read this on the internet”Sunday, September 23, 2012
Let’s focus on the web,                                 the realm of the                                HTTP protocolSunda...
Internet (as a network                 of computers)                  is relatively old                             ~ earl...
The WEB (as a collection of        interlinked documents)              is relatively newSunday, September 23, 2012
YOU ARE                              HERESunday, September 23, 2012
Sir Tim Berners-Lee                             March 1989, the proposal                     Christmas 1990, a client and ...
Hypertext?Sunday, September 23, 2012
“I’ve more than 30 years experience on the web”Sunday, September 23, 2012
Tim Berners-Lee created two “tools”            which are the foundation blocks                  of the whole web:         ...
You browse the web                        using a web browser (*)                                              * Capt. Obv...
What does “opening a web site” mean?Sunday, September 23, 2012
URL, remember?           http://www.example.com/index.html       When you “go” or “open” to a web site     you instruct th...
If you specify only www.wikipedia.org   as you url the browser will add “http://” for you and the server will add “index.h...
Visiting a web page: 3 steps process                1. Enter the desired URL                2. Download the resource      ...
1. Entering the URL                 Browser                             This is the URLSunday, September 23, 2012
2. Download the resource                                                  DNS, remember?                                  ...
3. Display the resource                                          psc.html?                                                ...
Other resources (i.e.: images) can                be “embedded” inside a document                  Their URL is not manual...
For any resource                               the browser needs                              to get to the server        ...
If a page contains 50 images,                             the browser needs at least 51                                   ...
Sunday, September 23, 2012
Under the cover: HTMLSunday, September 23, 2012
Other URLsSunday, September 23, 2012
Admittedly this is not the                             web site we are familiar with                                      ...
HTML - per se - has very poor                 graphic capabilities                        And this is OK, because         ...
CSS to the rescue             “CSS” is just another language              create just for presentational           purpose...
body  {                               background-­‐color:  red;                               font-­‐family:  Arial;      ...
Sunday, September 23, 2012
Who is in charge of creating                                those “languages”?                                     The W3C...
Current “stable” version of HTML is 4.01       (but everyone is using HTML5)          Current “stable” version of CSS is 2...
“CSS 3, which was started in 1998, is                       still under development as of 2012”Sunday, September 23, 2012
1. HTML define the structure of the document        2. CSS defines how the document appears        3.Sunday, September 23, 2...
We are talking about the behavior             of web pages       A web page needs to be enhanced          in ways that HTM...
Pop-ups                       Data validation without reloading the page                       Widgets                    ...
1. HTML define the structure of the document        2. CSS defines how the document appears        3. JavaScript manages the...
JavaScript is a real programming language               It has had its “dark age” (up to 2004)                Now it’s so ...
DNS                                      server                                        ISP              You            Rou...
Cloud ComputingSunday, September 23, 2012
Abstracts away the concept of SERVER              concretizing the concept of SERVICESunday, September 23, 2012
Sunday, September 23, 2012
You don’t buy a server to have a remote space                    You rent some remote space (in “the cloud”)              ...
Think about “the cloud” as one infinitely      big computer, open for everyone to use                      (paying)Sunday, ...
Many sort of “clouds”, with different levels of “opacity”                       If you’re directly involved on creating th...
SaaS is an example of “Cloud” usage                                    (Software as a Service)                            ...
Cloud computing aims to solve most      of the hardest problems on internet               based applications:            s...
Scaling means:       We cannot keep adding hardware!   We need to optimize what we already have!             Reliability m...
At the end:                             YOUR data is always safe        YOU pay only for what to you useSunday, September ...
<h1>Thank You!</h1>Sunday, September 23, 2012
Upcoming SlideShare
Loading in …5
×

An introduction to the web

1,479
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,479
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

An introduction to the web

  1. 1. How modern web sites WORK by Claudio CicaliSunday, September 23, 2012
  2. 2. Who is this guy? I’ve been creating web sites since 1999 (phew...)Sunday, September 23, 2012
  3. 3. Let’s introduce, you know... INTERNETSunday, September 23, 2012
  4. 4. The SERVER and the CLIENT Bob’s PC (client) Big computer(s) (server) Network Alice’s Mac Traffic control Big computer (client) (router) Big computer (server) (server) Joe’s iPhone (client) This is a NETWORK “NET” for shortSunday, September 23, 2012
  5. 5. Sunday, September 23, 2012
  6. 6. Sunday, September 23, 2012
  7. 7. Sunday, September 23, 2012
  8. 8. Sunday, September 23, 2012
  9. 9. Sunday, September 23, 2012
  10. 10. Sunday, September 23, 2012
  11. 11. Clients and Servers use a common “language” to talk to each other The Internet Protocol (IP)Sunday, September 23, 2012
  12. 12. Servers and Clients need a unique identifier to address each other This ID has to be unique in the whole WORLDSunday, September 23, 2012
  13. 13. The IP address something like 192.54.43.89 ( from 0.0.0.0 to 255.255.255.255 )Sunday, September 23, 2012
  14. 14. The SERVER and the CLIENT Bob’s PC (client) 3 9.3 8.34 5.1 45.8 .8 8 5.45 Big computer(s) (server) Network Alice’s Mac Traffic control Big computer (client) (router) Big computer (server) 3.1 .134 99.3 (server) 5.1 8.34 65.4 28.4 45 . 88.1 Joe’s iPhone (client)8.1 This is a NETWORK 45. 5.11 “NET” for shortSunday, September 23, 2012
  15. 15. Those addresses are a finite resource ( 4,294,967,296 )Sunday, September 23, 2012
  16. 16. Last week, Europe officially ran out of IP addresses (ooops...)Sunday, September 23, 2012
  17. 17. NOW WHAT!?!Sunday, September 23, 2012
  18. 18. The new hot thing is IP Version 6 Slow and painful adoptionSunday, September 23, 2012
  19. 19. IPV6, the big promise: we will never have the shortage problem again 128 (2 addresses )Sunday, September 23, 2012
  20. 20. Numbers? 192.19492.1011.234 290.929.492.92992 3 923.23902.202.203.3 NOT FUNNY! Numbers are for computers, not for humansSunday, September 23, 2012
  21. 21. Luckly, we (the clients) can address servers by their “human name”Sunday, September 23, 2012
  22. 22. The URL Uniquely identifies a resource out there A resource can be any of this things: An image A web page A pdf document A javascript file A zip archive ...Sunday, September 23, 2012
  23. 23. http://www.example.com/index.html You see URLs every day. It’s the Uniform Resource LocatorSunday, September 23, 2012
  24. 24. http://www.example.com/index.html Protocol “human” server name Resource (How?) (Where?) (What?) ( See? No numbers! )Sunday, September 23, 2012
  25. 25. When you say “I’ll give you the link of that web page” what you actually mean is “I’ll give you the URL of that web page”Sunday, September 23, 2012
  26. 26. http://www.example.com/index.html resolved as... 187.78.32.45 http://187.78.32.45/index.html is valid as wellSunday, September 23, 2012
  27. 27. DNS (Domain Name System) Translates server names to IP addresses (and viceversa) It’s a server itself, and for obvious reasons can be addressed only by its IP addressSunday, September 23, 2012
  28. 28. “I need a kitten” www.google.com? DNS YOU 1 192.16.45.32! 192.16.45.32 DNS YOU 2 SEARCH.HTML “cute cats” DNS YOU 3 cute cats pagesSunday, September 23, 2012
  29. 29. About DNS... Google offers its own, free for all: 8.8.8.8 or 8.8.4.4 If you mistype a server name you MUST receive a “Server not found” error. If not, then your Internet Provider is tricking you (so, use the Google DNS servers)Sunday, September 23, 2012
  30. 30. Internet is all about SERVICES (provided by... servers)Sunday, September 23, 2012
  31. 31. A service is something you use to... read a web page upload a file receive an email send an email watch a video chat with a friendSunday, September 23, 2012
  32. 32. In order to use the service, you need to TALK to a server using a well understood LANGUAGESunday, September 23, 2012
  33. 33. http://www.example.com/index.html This language is the PROTOCOLSunday, September 23, 2012
  34. 34. The protocol stack Application Protocol Internet Protocol ElectricitySunday, September 23, 2012
  35. 35. We define the service by the application protocol it uses read a web page, via HTTP or HTTPS upload a file, via FTP receive an email, via POP3 or IMAP send an email, via SMTP watch a video, via RTMP chat with a friend, via XMPPSunday, September 23, 2012
  36. 36. Internet protocols specification must be OPEN (hey, it’s MY data!) Don’t trust CLOSED protocols (Skype, anyone?)Sunday, September 23, 2012
  37. 37. One more thing.... A protocol is SECURE when no one can eavesdrop on itSunday, September 23, 2012
  38. 38. In the vast majority of the cases, a protocol message leaves and enters your computer in CLEAR PLAIN TEXT Someone just need to listen to the conversation (and you don’t need to have hacking skillz)Sunday, September 23, 2012
  39. 39. The evil eavesdropperSunday, September 23, 2012
  40. 40. HTTP (not secure) My Username: CLAUDIO Me Home banking Password: s3cret (client) server HTTPS (secure) My kwer2u589erwtwrtj Me Home banking w09r0wemf09fwq’e9 (client) serverSunday, September 23, 2012
  41. 41. A message is safe from eavesdropping only if it’s encrypted Thus, the protocol must use some sort of encryptionSunday, September 23, 2012
  42. 42. HTTP is bad, HTTPS is good SMTP is bad, SMTP + TLS is good FTP is bad, SFTP is goodSunday, September 23, 2012
  43. 43. “I read this on the internet”Sunday, September 23, 2012
  44. 44. Let’s focus on the web, the realm of the HTTP protocolSunday, September 23, 2012
  45. 45. Internet (as a network of computers) is relatively old ~ early 80sSunday, September 23, 2012
  46. 46. The WEB (as a collection of interlinked documents) is relatively newSunday, September 23, 2012
  47. 47. YOU ARE HERESunday, September 23, 2012
  48. 48. Sir Tim Berners-Lee March 1989, the proposal Christmas 1990, a client and server exchanged a hypertext for the first timeSunday, September 23, 2012
  49. 49. Hypertext?Sunday, September 23, 2012
  50. 50. “I’ve more than 30 years experience on the web”Sunday, September 23, 2012
  51. 51. Tim Berners-Lee created two “tools” which are the foundation blocks of the whole web: the HTTP protocol (to exchange documents) + the HTML language (to write documents)Sunday, September 23, 2012
  52. 52. You browse the web using a web browser (*) * Capt. ObviousSunday, September 23, 2012
  53. 53. What does “opening a web site” mean?Sunday, September 23, 2012
  54. 54. URL, remember? http://www.example.com/index.html When you “go” or “open” to a web site you instruct the browser to load an URL (the resource it points to) Most common resource types: HTML files and imagesSunday, September 23, 2012
  55. 55. If you specify only www.wikipedia.org as you url the browser will add “http://” for you and the server will add “index.html” for youSunday, September 23, 2012
  56. 56. Visiting a web page: 3 steps process 1. Enter the desired URL 2. Download the resource 3. Do something with the resource (i.e.: display it)Sunday, September 23, 2012
  57. 57. 1. Entering the URL Browser This is the URLSunday, September 23, 2012
  58. 58. 2. Download the resource DNS, remember? web20.it? DNS 84.8.54.56! psc.html? 84.8.54.56 “Hello, my name is...”Sunday, September 23, 2012
  59. 59. 3. Display the resource psc.html? 84.8.54.56 “Hello, my name is...”Sunday, September 23, 2012
  60. 60. Other resources (i.e.: images) can be “embedded” inside a document Their URL is not manually entered but you can find it inside the html documentSunday, September 23, 2012
  61. 61. For any resource the browser needs to get to the server (and to the DNS too)Sunday, September 23, 2012
  62. 62. If a page contains 50 images, the browser needs at least 51 server round trips (plus the DNS’s). Number and dimension of resources account for the web site performancesSunday, September 23, 2012
  63. 63. Sunday, September 23, 2012
  64. 64. Under the cover: HTMLSunday, September 23, 2012
  65. 65. Other URLsSunday, September 23, 2012
  66. 66. Admittedly this is not the web site we are familiar with nowadaysSunday, September 23, 2012
  67. 67. HTML - per se - has very poor graphic capabilities And this is OK, because HTML is only for structuring documentsSunday, September 23, 2012
  68. 68. CSS to the rescue “CSS” is just another language create just for presentational purposes (a “style sheet” language) Wide adoption started in 1998Sunday, September 23, 2012
  69. 69. body  { background-­‐color:  red; font-­‐family:  Arial; color:  silver; } h1  { color:  white; } p  { text-­‐tranform:  uppercase; } img  { border:  3px  dotted  white; }Sunday, September 23, 2012
  70. 70. Sunday, September 23, 2012
  71. 71. Who is in charge of creating those “languages”? The W3C World Wide Web Consortium (those are the “good guys”)Sunday, September 23, 2012
  72. 72. Current “stable” version of HTML is 4.01 (but everyone is using HTML5) Current “stable” version of CSS is 2.1 (but everyone is using CSS3)Sunday, September 23, 2012
  73. 73. “CSS 3, which was started in 1998, is still under development as of 2012”Sunday, September 23, 2012
  74. 74. 1. HTML define the structure of the document 2. CSS defines how the document appears 3.Sunday, September 23, 2012
  75. 75. We are talking about the behavior of web pages A web page needs to be enhanced in ways that HTML can’t do A web page “reacts” to user input in a lot of different waysSunday, September 23, 2012
  76. 76. Pop-ups Data validation without reloading the page Widgets Infinite scolling “One page application” like GMail Crazy “mobile” stuffSunday, September 23, 2012
  77. 77. 1. HTML define the structure of the document 2. CSS defines how the document appears 3. JavaScript manages the behavior of the docSunday, September 23, 2012
  78. 78. JavaScript is a real programming language It has had its “dark age” (up to 2004) Now it’s so vastly used that one can make a professional career knowing that language onlySunday, September 23, 2012
  79. 79. DNS server ISP You Router Firewall Proxy Web Server DB File Server ServerSunday, September 23, 2012
  80. 80. Cloud ComputingSunday, September 23, 2012
  81. 81. Abstracts away the concept of SERVER concretizing the concept of SERVICESunday, September 23, 2012
  82. 82. Sunday, September 23, 2012
  83. 83. You don’t buy a server to have a remote space You rent some remote space (in “the cloud”) You don’t need to care anymore.Sunday, September 23, 2012
  84. 84. Think about “the cloud” as one infinitely big computer, open for everyone to use (paying)Sunday, September 23, 2012
  85. 85. Many sort of “clouds”, with different levels of “opacity” If you’re directly involved on creating the infrastructure of your start-up, you need fine control over the cloud resources (I’m thinking about Amazon EC2) If you just want to safely backup and be able to access your data from anywhere, you don’t want to mess with arcane configuration options (I’m thinking about iCloud)Sunday, September 23, 2012
  86. 86. SaaS is an example of “Cloud” usage (Software as a Service) You use a web site for your personal accounting needs You pay for using the application once a year Evolution of the ~90s ASPsSunday, September 23, 2012
  87. 87. Cloud computing aims to solve most of the hardest problems on internet based applications: scaling and reliabilitySunday, September 23, 2012
  88. 88. Scaling means: We cannot keep adding hardware! We need to optimize what we already have! Reliability means: No single point of failure! If our datacenter in USA is flooded, we switch to the datacenter in Germany The user is not affectedSunday, September 23, 2012
  89. 89. At the end: YOUR data is always safe YOU pay only for what to you useSunday, September 23, 2012
  90. 90. <h1>Thank You!</h1>Sunday, September 23, 2012

×