SlideShare ist ein Scribd-Unternehmen logo
1 von 90
Downloaden Sie, um offline zu lesen
How modern web sites
                      WORK
                             by Claudio Cicali




Sunday, September 23, 2012
Who is this guy?

                             I’ve been creating web sites since 1999
                                             (phew...)




Sunday, September 23, 2012
Let’s introduce,
                               you know...

                               INTERNET



Sunday, September 23, 2012
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 short

Sunday, September 23, 2012
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, September 23, 2012
Servers and Clients need
             a unique identifier
             to address each other

             This ID has to be unique
             in the whole WORLD
Sunday, September 23, 2012
The IP address
                             something like
                             192.54.43.89
                   ( from 0.0.0.0 to 255.255.255.255 )


Sunday, September 23, 2012
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 short

Sunday, September 23, 2012
Those addresses are
                          a finite resource

                             ( 4,294,967,296 )

Sunday, September 23, 2012
Last week, Europe
                  officially ran out of IP
                          addresses

                             (ooops...)

Sunday, September 23, 2012
NOW WHAT!?!




Sunday, September 23, 2012
The new hot thing is

                             IP Version 6

                     Slow and painful adoption

Sunday, September 23, 2012
IPV6, the big promise:
             we will never have the
            shortage problem again
                              128
                             (2     addresses )

Sunday, September 23, 2012
Numbers?
                             192.19492.1011.234
                             290.929.492.92992 3
                             923.23902.202.203.3

                              NOT FUNNY!

                       Numbers are for computers,
                           not for humans
Sunday, September 23, 2012
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:

                             An image
                             A web page
                             A pdf document
                             A javascript file
                               A zip archive
                                    ...
Sunday, September 23, 2012
http://www.example.com/index.html


                             You see URLs every day.

                             It’s the Uniform Resource Locator



Sunday, September 23, 2012
http://www.example.com/index.html


       Protocol              “human” server name      Resource

         (How?)                   (Where?)            (What?)

                               ( See? No numbers! )


Sunday, September 23, 2012
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
http://www.example.com/index.html

                                     resolved as...


                             187.78.32.45

                                     http://187.78.32.45/index.html
                                              is valid as well
Sunday, September 23, 2012
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 address


Sunday, September 23, 2012
“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 pages


Sunday, September 23, 2012
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
Internet is all about

                                SERVICES
                                 (provided by... servers)




Sunday, September 23, 2012
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 friend


Sunday, September 23, 2012
In order to use the service,
              you need to TALK to a server
                  using a well understood
                      LANGUAGE


Sunday, September 23, 2012
http://www.example.com/index.html


                 This language is the
                   PROTOCOL


Sunday, September 23, 2012
The protocol stack

                              Application Protocol

                               Internet Protocol

                                    Electricity


Sunday, September 23, 2012
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 XMPP


Sunday, September 23, 2012
Internet protocols specification
                must be OPEN
              (hey, it’s MY data!)

        Don’t trust CLOSED protocols
               (Skype, anyone?)

Sunday, September 23, 2012
One more thing....




                      A protocol is SECURE
                         when no one can
                          eavesdrop on it


Sunday, September 23, 2012
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
The evil eavesdropper




Sunday, September 23, 2012
HTTP (not secure)

                  My
                             Username: CLAUDIO       Me
              Home banking
                               Password: s3cret   (client)
                server




                              HTTPS (secure)

                  My
                              kwer2u589erwtwrtj      Me
              Home banking
                              w09r0wemf09fwq’e9   (client)
                server




Sunday, September 23, 2012
A message is safe from eavesdropping
              only if it’s encrypted

                             Thus, the protocol must use
                              some sort of encryption


Sunday, September 23, 2012
HTTP is bad, HTTPS is good

         SMTP is bad, SMTP + TLS is good

                             FTP is bad, SFTP is good


Sunday, September 23, 2012
“I read this on the internet”




Sunday, September 23, 2012
Let’s focus on the web,
                                 the realm of the
                                HTTP protocol



Sunday, September 23, 2012
Internet (as a network
                 of computers)
                  is relatively old

                             ~ early 80s

Sunday, September 23, 2012
The WEB (as a collection of
        interlinked documents)
              is relatively new



Sunday, September 23, 2012
YOU ARE
                              HERE




Sunday, September 23, 2012
Sir Tim Berners-Lee




                             March 1989, the proposal

                     Christmas 1990, a client and server
                          exchanged a hypertext
                              for the first time
Sunday, September 23, 2012
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:

                                the HTTP protocol
                             (to exchange documents)
                                          +
                               the HTML language
                                (to write documents)
Sunday, September 23, 2012
You browse the web
                        using a web browser (*)




                                              * Capt. Obvious
Sunday, September 23, 2012
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 the browser to load an URL
             (the resource it points to)

                             Most common resource types:
                              HTML files and images

Sunday, September 23, 2012
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 you




Sunday, September 23, 2012
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
1. Entering the URL                 Browser




                             This is the URL




Sunday, September 23, 2012
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
3. Display the resource

                                          psc.html?

                                                               84.8.54.56
                                      “Hello, my name is...”




Sunday, September 23, 2012
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 document


Sunday, September 23, 2012
For any resource
                               the browser needs
                              to get to the server
                             (and to the DNS too)




Sunday, September 23, 2012
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 performances


Sunday, September 23, 2012
Sunday, September 23, 2012
Under the cover: HTML




Sunday, September 23, 2012
Other URLs




Sunday, September 23, 2012
Admittedly this is not the
                             web site we are familiar with
                                      nowadays

Sunday, September 23, 2012
HTML - per se - has very poor
                 graphic capabilities

                        And this is OK, because
                           HTML is only for
                      structuring documents

Sunday, September 23, 2012
CSS to the rescue


             “CSS” is just another language
              create just for presentational
           purposes (a “style sheet” language)

                  Wide adoption started in 1998

Sunday, September 23, 2012
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
Sunday, September 23, 2012
Who is in charge of creating
                                those “languages”?

                                     The W3C

                       World Wide Web Consortium

                             (those are the “good guys”)

Sunday, September 23, 2012
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
“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, 2012
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 ways
Sunday, September 23, 2012
Pop-ups

                       Data validation without reloading the page

                       Widgets

                       Infinite scolling

                       “One page application” like GMail

                       Crazy “mobile” stuff


Sunday, September 23, 2012
1. HTML define the structure of the document

        2. CSS defines how the document appears

        3. JavaScript manages the behavior of the doc




Sunday, September 23, 2012
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 only


Sunday, September 23, 2012
DNS
                                      server


                                        ISP


              You            Router

                                               Firewall        Proxy



                                                                Web
                                                               Server


                                                           DB        File
                                                          Server    Server

Sunday, September 23, 2012
Cloud Computing




Sunday, September 23, 2012
Abstracts away the concept of SERVER

              concretizing the concept of SERVICE




Sunday, 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”)


                         You don’t need to care anymore.




Sunday, September 23, 2012
Think about “the cloud” as one infinitely
      big computer, open for everyone to use
                      (paying)




Sunday, September 23, 2012
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
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 ASPs
Sunday, September 23, 2012
Cloud computing aims to solve most
      of the hardest problems on internet
               based applications:
            scaling and reliability



Sunday, September 23, 2012
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 affected
Sunday, September 23, 2012
At the end:

                             YOUR data is always safe

        YOU pay only for what to you use


Sunday, September 23, 2012
<h1>Thank You!</h1>




Sunday, September 23, 2012

Weitere ähnliche Inhalte

Ähnlich wie An introduction to the web

Architecting large Node.js applications
Architecting large Node.js applicationsArchitecting large Node.js applications
Architecting large Node.js applicationsSergi Mansilla
 
Cloud software engineering
Cloud software engineeringCloud software engineering
Cloud software engineeringIan Sommerville
 
Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?Flaskdata.io
 
Dom API In Java Script
Dom API In Java ScriptDom API In Java Script
Dom API In Java ScriptRajat Pandit
 
Web Performance Optimization @Develer
Web Performance Optimization @DevelerWeb Performance Optimization @Develer
Web Performance Optimization @DevelerMassimo Iacolare
 
Calton pu experimental methods on performance in cloud and accuracy in big da...
Calton pu experimental methods on performance in cloud and accuracy in big da...Calton pu experimental methods on performance in cloud and accuracy in big da...
Calton pu experimental methods on performance in cloud and accuracy in big da...jins0618
 
0.Web Application Architecture.ppt
0.Web Application Architecture.ppt0.Web Application Architecture.ppt
0.Web Application Architecture.pptanoopkumarm
 
Personal robot industry
Personal robot industryPersonal robot industry
Personal robot industryChengcheng Liu
 
Deploying MediaWiki On IBM DB2 in The Cloud Presentation
Deploying MediaWiki On IBM DB2 in The Cloud PresentationDeploying MediaWiki On IBM DB2 in The Cloud Presentation
Deploying MediaWiki On IBM DB2 in The Cloud PresentationLeons Petražickis
 
Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]
Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]
Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]Adrien Blind
 
CloudFork
CloudForkCloudFork
CloudForkESUG
 
Présentation Aerys
Présentation Aerys Présentation Aerys
Présentation Aerys iCOMMUNITY
 
AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)
AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)
AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)Amazon Web Services
 
Azure Digital Twins.pdf
Azure Digital Twins.pdfAzure Digital Twins.pdf
Azure Digital Twins.pdfTomasz Kopacz
 
Using In-Memory Encrypted Databases on the Cloud
Using In-Memory Encrypted Databases on the CloudUsing In-Memory Encrypted Databases on the Cloud
Using In-Memory Encrypted Databases on the CloudFrancesco Pagano
 

Ähnlich wie An introduction to the web (20)

Aegir
AegirAegir
Aegir
 
Architecting large Node.js applications
Architecting large Node.js applicationsArchitecting large Node.js applications
Architecting large Node.js applications
 
Cloud software engineering
Cloud software engineeringCloud software engineering
Cloud software engineering
 
Clouds
CloudsClouds
Clouds
 
Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?Will Web 2.0 applications break the cloud?
Will Web 2.0 applications break the cloud?
 
5c8605.ado.net
5c8605.ado.net5c8605.ado.net
5c8605.ado.net
 
Dom API In Java Script
Dom API In Java ScriptDom API In Java Script
Dom API In Java Script
 
Web Performance Optimization @Develer
Web Performance Optimization @DevelerWeb Performance Optimization @Develer
Web Performance Optimization @Develer
 
Calton pu experimental methods on performance in cloud and accuracy in big da...
Calton pu experimental methods on performance in cloud and accuracy in big da...Calton pu experimental methods on performance in cloud and accuracy in big da...
Calton pu experimental methods on performance in cloud and accuracy in big da...
 
Terrific Frontends
Terrific FrontendsTerrific Frontends
Terrific Frontends
 
0.Web Application Architecture.ppt
0.Web Application Architecture.ppt0.Web Application Architecture.ppt
0.Web Application Architecture.ppt
 
Personal robot industry
Personal robot industryPersonal robot industry
Personal robot industry
 
Deploying MediaWiki On IBM DB2 in The Cloud Presentation
Deploying MediaWiki On IBM DB2 in The Cloud PresentationDeploying MediaWiki On IBM DB2 in The Cloud Presentation
Deploying MediaWiki On IBM DB2 in The Cloud Presentation
 
Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]
Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]
Docker, cornerstone of cloud hybridation ? [Cloud Expo Europe 2016]
 
CloudFork
CloudForkCloudFork
CloudFork
 
Présentation Aerys
Présentation Aerys Présentation Aerys
Présentation Aerys
 
AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)
AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)
AWS re:Invent 2016: NEW LAUNCH! Introducing AWS Greengrass (IOT201)
 
Azure Digital Twins.pdf
Azure Digital Twins.pdfAzure Digital Twins.pdf
Azure Digital Twins.pdf
 
Using In-Memory Encrypted Databases on the Cloud
Using In-Memory Encrypted Databases on the CloudUsing In-Memory Encrypted Databases on the Cloud
Using In-Memory Encrypted Databases on the Cloud
 
Presentazione pagano1
Presentazione pagano1Presentazione pagano1
Presentazione pagano1
 

Kürzlich hochgeladen

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 

Kürzlich hochgeladen (20)

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 

An introduction to the web

  • 1. How modern web sites WORK by Claudio Cicali Sunday, September 23, 2012
  • 2. Who is this guy? I’ve been creating web sites since 1999 (phew...) Sunday, September 23, 2012
  • 3. Let’s introduce, you know... INTERNET Sunday, September 23, 2012
  • 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 short Sunday, September 23, 2012
  • 11. Clients and Servers use a common “language” to talk to each other The Internet Protocol (IP) Sunday, September 23, 2012
  • 12. Servers and Clients need a unique identifier to address each other This ID has to be unique in the whole WORLD Sunday, September 23, 2012
  • 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. 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 short Sunday, September 23, 2012
  • 15. Those addresses are a finite resource ( 4,294,967,296 ) Sunday, September 23, 2012
  • 16. Last week, Europe officially ran out of IP addresses (ooops...) Sunday, September 23, 2012
  • 18. The new hot thing is IP Version 6 Slow and painful adoption Sunday, September 23, 2012
  • 19. IPV6, the big promise: we will never have the shortage problem again 128 (2 addresses ) Sunday, September 23, 2012
  • 20. Numbers? 192.19492.1011.234 290.929.492.92992 3 923.23902.202.203.3 NOT FUNNY! Numbers are for computers, not for humans Sunday, September 23, 2012
  • 21. Luckly, we (the clients) can address servers by their “human name” Sunday, September 23, 2012
  • 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. http://www.example.com/index.html You see URLs every day. It’s the Uniform Resource Locator Sunday, September 23, 2012
  • 24. http://www.example.com/index.html Protocol “human” server name Resource (How?) (Where?) (What?) ( See? No numbers! ) Sunday, September 23, 2012
  • 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. http://www.example.com/index.html resolved as... 187.78.32.45 http://187.78.32.45/index.html is valid as well Sunday, September 23, 2012
  • 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 address Sunday, September 23, 2012
  • 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 pages Sunday, September 23, 2012
  • 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. Internet is all about SERVICES (provided by... servers) Sunday, September 23, 2012
  • 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 friend Sunday, September 23, 2012
  • 32. In order to use the service, you need to TALK to a server using a well understood LANGUAGE Sunday, September 23, 2012
  • 33. http://www.example.com/index.html This language is the PROTOCOL Sunday, September 23, 2012
  • 34. The protocol stack Application Protocol Internet Protocol Electricity Sunday, September 23, 2012
  • 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 XMPP Sunday, September 23, 2012
  • 36. Internet protocols specification must be OPEN (hey, it’s MY data!) Don’t trust CLOSED protocols (Skype, anyone?) Sunday, September 23, 2012
  • 37. One more thing.... A protocol is SECURE when no one can eavesdrop on it Sunday, September 23, 2012
  • 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. The evil eavesdropper Sunday, September 23, 2012
  • 40. HTTP (not secure) My Username: CLAUDIO Me Home banking Password: s3cret (client) server HTTPS (secure) My kwer2u589erwtwrtj Me Home banking w09r0wemf09fwq’e9 (client) server Sunday, September 23, 2012
  • 41. A message is safe from eavesdropping only if it’s encrypted Thus, the protocol must use some sort of encryption Sunday, September 23, 2012
  • 42. HTTP is bad, HTTPS is good SMTP is bad, SMTP + TLS is good FTP is bad, SFTP is good Sunday, September 23, 2012
  • 43. “I read this on the internet” Sunday, September 23, 2012
  • 44. Let’s focus on the web, the realm of the HTTP protocol Sunday, September 23, 2012
  • 45. Internet (as a network of computers) is relatively old ~ early 80s Sunday, September 23, 2012
  • 46. The WEB (as a collection of interlinked documents) is relatively new Sunday, September 23, 2012
  • 47. YOU ARE HERE Sunday, September 23, 2012
  • 48. Sir Tim Berners-Lee March 1989, the proposal Christmas 1990, a client and server exchanged a hypertext for the first time Sunday, September 23, 2012
  • 50. “I’ve more than 30 years experience on the web” Sunday, September 23, 2012
  • 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. You browse the web using a web browser (*) * Capt. Obvious Sunday, September 23, 2012
  • 53. What does “opening a web site” mean? Sunday, September 23, 2012
  • 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 images Sunday, September 23, 2012
  • 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 you Sunday, September 23, 2012
  • 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. 1. Entering the URL Browser This is the URL Sunday, September 23, 2012
  • 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. 3. Display the resource psc.html? 84.8.54.56 “Hello, my name is...” Sunday, September 23, 2012
  • 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 document Sunday, September 23, 2012
  • 61. For any resource the browser needs to get to the server (and to the DNS too) Sunday, September 23, 2012
  • 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 performances Sunday, September 23, 2012
  • 64. Under the cover: HTML Sunday, September 23, 2012
  • 66. Admittedly this is not the web site we are familiar with nowadays Sunday, September 23, 2012
  • 67. HTML - per se - has very poor graphic capabilities And this is OK, because HTML is only for structuring documents Sunday, September 23, 2012
  • 68. CSS to the rescue “CSS” is just another language create just for presentational purposes (a “style sheet” language) Wide adoption started in 1998 Sunday, September 23, 2012
  • 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
  • 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. 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. “CSS 3, which was started in 1998, is still under development as of 2012” Sunday, September 23, 2012
  • 74. 1. HTML define the structure of the document 2. CSS defines how the document appears 3. Sunday, September 23, 2012
  • 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 ways Sunday, September 23, 2012
  • 76. Pop-ups Data validation without reloading the page Widgets Infinite scolling “One page application” like GMail Crazy “mobile” stuff Sunday, September 23, 2012
  • 77. 1. HTML define the structure of the document 2. CSS defines how the document appears 3. JavaScript manages the behavior of the doc Sunday, September 23, 2012
  • 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 only Sunday, September 23, 2012
  • 79. DNS server ISP You Router Firewall Proxy Web Server DB File Server Server Sunday, September 23, 2012
  • 81. Abstracts away the concept of SERVER concretizing the concept of SERVICE Sunday, September 23, 2012
  • 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. Think about “the cloud” as one infinitely big computer, open for everyone to use (paying) Sunday, September 23, 2012
  • 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. 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 ASPs Sunday, September 23, 2012
  • 87. Cloud computing aims to solve most of the hardest problems on internet based applications: scaling and reliability Sunday, September 23, 2012
  • 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 affected Sunday, September 23, 2012
  • 89. At the end: YOUR data is always safe YOU pay only for what to you use Sunday, September 23, 2012