This is the material of my technical training about "Fundamentals of Web" to non-developers, especially to business people. In this presentation, I tried to cover concepts with details that everyone can understand. Even though most of the information I mention verbally in the training, the slides could help the ones who are not very familiar with web and web applications.
Fundamentals of WebHigh level overview of web conceptsLem Orhan ErgnPrincipal software Engineer @ Sonyguide for non-developers
The aim of this training is to let youknow concepts of web and web applicationsunderstand how web based software worksunderstand the technical discussions betterand answer your questions:)
The Internet is a global system of interconnectedcomputer networkswww, email, social networking, le transfer, onlinechat, commerce, game playing, teleconferencing,VoIP, video on demand etc.Internet is tangible network of computerssharing/exchanging information with the help ofPROTOCOLS.Internet
ProtocolProtocol is a form of etiquette.Internet Protocols are thestandards, designed tospecify how computers interact and exchangemessages over internet.Protocols usuallyspecies:The format of the messages &how to handle errors
Open systems nter-connection (OSI) modelis a conceptual model that describes the internalarchitecture of a communications system by splittingits components into abstraction layers.
tcp modelThis model is a condensed version of the OSI modeland only has four layers. It is considered as standardaround internet.
http modelIt stands for HypertextTransfer Protocol.HTTP provides a set of rules and standards thatgovern how information is transmitted on the WorldWide Web.http://www.sony.co.uk
http modelHTTP is a client-server protocol by which twomachines communicate using a reliable, connection-oriented transport service such as theTCP.Opens a tcp/ip connection via socketsTransmits the request for a documentWaits for a reply from the serverOnce the response is arrived, the socket is closedRequestResponse
http modelThere is no memory between client connections.Pure HTTP server treats every request as if it wasbrand-new (i.e. Stateless)To load faster, Http pages are stored in yourcomputer and internet caches.You dont have controlover some caches like the ones in proxies.
PORT NUMBERSA port is an endpoint to a logical connection and theway a client program species a specic serverprogram on a computer in a networkPort numbers range from 0 to 65536, but the first 1024 are reserved for privileged services.The other ports could be used by any application.HTTP: 80SSH: 22TELNET: 23
Privacy: Anyone can see the contentIntegrity: Anyone can alter the contentAuthentication: Authentication is sent in clear formStateless: Need to maintain information acrossmultiple request-responseshttp Limitations
HTTPS stands for HypertextTransferProtocol over Secure Socket Layer, orHTTP over SSL.SSL acts like a sub layer under regularHTTP application layering.HTTPS encrypts an HTTP messageprior to transmission and decrypts amessage upon arrival.httPS
HTTPS by default uses port 443 as opposed to the standard HTTPport of 80.URLs beginning with HTTPS indicate that the connection betweenclient and browser is encrypted using SSLSSL transactions are negotiated by means of a key based encryptionalgorithm between the client and the server, this key is usually either40 or 128 bits in strength (the higher the number of bits the moresecure the transaction).httPShttps://login.yahoo.com/config/login_verify?src=ym
HTTP server is implemented by serversEach client-server transaction consists of 3 main parts:1) Request/Response line 2) Header information 3)The bodyhttp model
there are several waysto send a requestGETPOSTPUTDELETEHEADOPTIONSTRACECONNECT
HTTP METHOD: GETRetrieval of informationServer sends a representation of a resource to client
HTTP METHOD: POSTThe body of the request is accepted as a resourceMainly the data of forms are submitted by post
Web Content: HTMLHyperText Markup Language (HTML) is the mainmarkup language for creating web pages and otherinformation that can be displayed in a web browser.
Web Content: CSSCascading Style Sheets (CSS) is a style sheet language used fordescribing the presentation semantics (the look and formatting) of adocument written in a markup language.
Web Content: IMAGESAny image could be displayed in an html page. It is important to keepthe size of images small for the sake of performance.
Web Content: XMLExtensible Markup Language (XML) is amarkup language that denes a set ofrules for encoding documents in aformat that is both human-readable andmachine-readable.
ServerBrowserInfrastructureServer infrastructure could be that simple!
Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserServers in thesame zone do notinteract overproxyZoneThe content canbe cached in anyof the levelsCentral Cache ServersThe infrastructurecould be simplerthan hereServer infrastructurecould be much morecomplex too
Clientrequest - responseYou request a web page and get dataServerClientBrowser caches the contentServerCache200ClientYou request the same web page withlast modified date of the cached contentServer304ClientSince server says content has notchanged, the data in cache is loadedServerCache1234Server does not return content. It justreturns status code 304Server returns content with code 200
Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache ServersReturns cached scripts,styles and content frombrowser cacheRefresh By f5Cache-Control: no-cache // HTTP 1.1Pragma: no-cache // HTTP 1.0Expires: Sat, 26 Jul 1988 05:00:00 GMT // in pastAsks for content if cache is not set
Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache ServersRefresh ByCTRL+f5Asks for content. Browsercache is not used.
Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache Serverscache onserver sideCache could be on server sideand needs to be cleaned eitherautomatic or manually
ajaxLets see how ajax works. Fill thefollowing text area.
ajaxWrite a text and press the button
ajaxPage is not refreshed.A new textappears below the entry area.Lets look at how it works
ajaxPage is initially loaded toyour machineSource code of the pagecan be displayed withinbrowser
HTML CodeDocument Object modelajax
ajaxWhen you click on thebutton, web page calls theserver from client site(i.e. from your browser)ServerBrowser