Fundamentals of Web for Non-Developers

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


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.

Transcript of Fundamentals of Web for Non-Developers

  • 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:)
  • agendaWeb ConceptsHttp/Https, Cookies, Caches, Forms, Html, Javascript, CSS, Request/Response, Responsive Web DesignInfrastructureServers, Databases, Load Balancers
  • web concepts
  • 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 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).httPS
  • 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 ContentScripts (javascript)Styles (css)Pages (html)Images (jpg, png, gif)Web content is sent from server and browsersrenders and displays that is programmed.Data* (xml, json)
  • 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: JavascriptsJavaScript (JS) is an interpreted computer programming language. It wasoriginally implemented as part of web browsers so that client-sidescripts could interact with the user, control the browser, communicateasynchronously, and alter the document content that was displayed.
  • 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.
  • Web Content: JSONJavaScript Object Notation (JSON), is atext-based open standard designed forhuman-readable data interchange
  • 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
  • CachingAny content can be cached in any infrastructural nodeScripts (javascript)Styles (css)Pages (http pages)ImagesAnimations (ash)
  • 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
  • ajaxAcronym for Asynchronous JavaScript and XMLIt is a web development technique used on the clientside to create asynchronous web applications.
  • 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