Fundamentals of WebHigh level overview of web conceptsLemİ Orhan ErgİnPrincipal software Engineer @ Sonyguide for non-deve...
The aim of this training is to let you•know concepts of web and web applications•understand how web based software works•u...
agenda•Web ConceptsHttp/Https, Cookies, Caches, Forms, Html, Javascript, CSS, Request/Response, Responsive Web Design•Infr...
web concepts
The Internet is a global system of interconnectedcomputer networkswww, email, social networking, file transfer, onlinechat,...
ProtocolProtocol is a form of etiquette.Internet Protocols are the standards, designed tospecify how computers interact an...
Open systems ınter-connection (OSI) modelis a conceptual model that describes the internalarchitecture of a communications...
tcp modelThis model is a condensed version of the OSI modeland only has four layers. It is considered as standardaround in...
http modelIt stands for HypertextTransfer Protocol.HTTP provides a set of rules and standards thatgovern how information i...
http modelHTTP is a client-server protocol by which twomachines communicate using a reliable, connection-oriented transpor...
http modelThere is no memory between client connections.Pure HTTP server treats every request as if it wasbrand-new (i.e. ...
PORT NUMBERSA port is an endpoint to a logical connection and theway a client program specifies a specific serverprogram on ...
Privacy: Anyone can see the contentIntegrity: Anyone can alter the contentAuthentication: Authentication is sent in clear ...
HTTPS stands for HypertextTransferProtocol over Secure Socket Layer, orHTTP over SSL.SSL acts like a sub layer under regul...
HTTPS by default uses port 443 as opposed to the standard HTTPport of 80.URLs beginning with HTTPS indicate that the conne...
SSL HANDSHAKE
HTTP server is implemented by serversEach client-server transaction consists of 3 main parts:1) Request/Response line 2) H...
there are several waysto send a requestGETPOSTPUTDELETEHEADOPTIONSTRACECONNECT
HTTP METHOD: GET•Retrieval of information•Server sends a representation of a resource to client
HTTP METHOD: POST•The body of the request is accepted as a resource•Mainly 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 browsersr...
Web Content: HTMLHyperText Markup Language (HTML) is the mainmarkup language for creating web pages and otherinformation t...
Web Content: JavascriptsJavaScript (JS) is an interpreted computer programming language. It wasoriginally implemented as p...
Web Content: CSSCascading Style Sheets (CSS) is a style sheet language used fordescribing the presentation semantics (the ...
Web Content: IMAGESAny image could be displayed in an html page. It is important to keepthe size of images small for the s...
Web Content: XMLExtensible Markup Language (XML) is amarkup language that defines a set ofrules for encoding documents in a...
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...
Clientrequest - responseYou request a web page and get dataServerClientBrowser caches the contentServerCache200ClientYou r...
CachingAny content can be cached in any infrastructural node•Scripts (javascript)•Styles (css)•Pages (http pages)•Images•A...
Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache ServersReturns cache...
Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache ServersRefresh ByCTR...
Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache Serverscache onserve...
ajaxAcronym for Asynchronous JavaScript and XMLIt is a web development technique used on the clientside to create asynchro...
ajaxLet’s 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.Let’s 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
ajaxServer sends new data as response.The datais put to object graph of the page at runtime.
ajaxObject graph is changed.The new data isdisplayed on browser. But you cannot see thenew data in the source code of the ...
CookiesA cookie, also known as an HTTP cookie, web cookie,or browser cookie, is a small piece of data sent from awebsite a...
Usage of Cookies•Session Management•Shopping Cart,Authentication•Personalization•Remember me, Preferences•Tracking & Analy...
Cookie ContentA web browser is expected to be able to store at least300 cookies of 4 kb each, and at least 20 cookies pers...
Setting CookiesCookies can not only be set by server. These can be setby Javascript in client’s browsers (if cookie is not...
FormsAn HTML form on a web page allows a user toenter data that is sent to a server for processing.
FormsForms can be generated in several waysServerBrowserClient SideServerBrowserServer Sideby programming languagesby java...
Form ValidationForms can be validated in client side via javascriptand in server side by application.Server BrowserPlease ...
Responsive web designResponsive web design (RWD) is a webdesign approach aimed at crafting sites to providean optimal view...
HTML5 vs FLASHWeb browsers cannot render Flash mediathemselves, instead it is rendered primarily using theproprietary but ...
HTML5 vs FLASHIt’s time for reading some codehttp://charag.com/client/eagleriverdaycamp/v2/eagle.htmlhttp://citwings.com/p...
Referenceshttp://www.slideshare.net/simplyharshad/http-vs-httpsHTTP vs HTTPS
Lemİ orhan ergİnlemiorhan@agilistanbul.com@lemiorhan@lemiorhanagilistanbul.com@lemiorhanLINKEDINTWITTERSLIDESHAREBLOGGERPr...
Upcoming SlideShare
Loading in...5
×

Fundamentals of Web for Non-Developers

97,610

Published on

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.

Published in: Education
24 Comments
285 Likes
Statistics
Notes
No Downloads
Views
Total Views
97,610
On Slideshare
0
From Embeds
0
Number of Embeds
73
Actions
Shares
0
Downloads
2,669
Comments
24
Likes
285
Embeds 0
No embeds

No notes for slide

Fundamentals of Web for Non-Developers

  1. 1. Fundamentals of WebHigh level overview of web conceptsLemİ Orhan ErgİnPrincipal software Engineer @ Sonyguide for non-developers
  2. 2. The aim of this training is to let you•know concepts of web and web applications•understand how web based software works•understand the technical discussions better•and answer your questions:)
  3. 3. agenda•Web ConceptsHttp/Https, Cookies, Caches, Forms, Html, Javascript, CSS, Request/Response, Responsive Web Design•InfrastructureServers, Databases, Load Balancers
  4. 4. web concepts
  5. 5. The Internet is a global system of interconnectedcomputer networkswww, email, social networking, file transfer, onlinechat, commerce, game playing, teleconferencing,VoIP, video on demand etc.Internet is tangible network of computerssharing/exchanging information with the help ofPROTOCOLS.Internet
  6. 6. ProtocolProtocol is a form of etiquette.Internet Protocols are the standards, designed tospecify how computers interact and exchangemessages over internet.Protocols usually specifies:The format of the messages &how to handle errors
  7. 7. Open systems ınter-connection (OSI) modelis a conceptual model that describes the internalarchitecture of a communications system by splittingits components into abstraction layers.
  8. 8. tcp modelThis model is a condensed version of the OSI modeland only has four layers. It is considered as standardaround internet.
  9. 9. 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
  10. 10. 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
  11. 11. 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 don’t have controlover some caches like the ones in proxies.
  12. 12. PORT NUMBERSA port is an endpoint to a logical connection and theway a client program specifies a specific 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. SSL HANDSHAKE
  17. 17. 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
  18. 18. there are several waysto send a requestGETPOSTPUTDELETEHEADOPTIONSTRACECONNECT
  19. 19. HTTP METHOD: GET•Retrieval of information•Server sends a representation of a resource to client
  20. 20. HTTP METHOD: POST•The body of the request is accepted as a resource•Mainly the data of forms are submitted by post
  21. 21. 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)
  22. 22. Web Content: HTMLHyperText Markup Language (HTML) is the mainmarkup language for creating web pages and otherinformation that can be displayed in a web browser.
  23. 23. 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.
  24. 24. 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.
  25. 25. 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.
  26. 26. Web Content: XMLExtensible Markup Language (XML) is amarkup language that defines a set ofrules for encoding documents in aformat that is both human-readable andmachine-readable.
  27. 27. Web Content: JSONJavaScript Object Notation (JSON), is atext-based open standard designed forhuman-readable data interchange
  28. 28. ServerBrowserInfrastructureServer infrastructure could be that simple!
  29. 29. 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
  30. 30. 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
  31. 31. CachingAny content can be cached in any infrastructural node•Scripts (javascript)•Styles (css)•Pages (http pages)•Images•Animations (flash)
  32. 32. 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
  33. 33. Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache ServersRefresh ByCTRL+f5Asks for content. Browsercache is not used.
  34. 34. Load BalancerWeb ServersLoad BalancerApplication ServersDatabase ServersProxyBrowserZoneCentral Cache Serverscache onserver sideCache could be on server sideand needs to be cleaned eitherautomatic or manually
  35. 35. ajaxAcronym for Asynchronous JavaScript and XMLIt is a web development technique used on the clientside to create asynchronous web applications.
  36. 36. ajaxLet’s see how ajax works. Fill thefollowing text area.
  37. 37. ajaxWrite a text and press the button
  38. 38. ajaxPage is not refreshed.A new textappears below the entry area.Let’s look at how it works
  39. 39. ajaxPage is initially loaded toyour machineSource code of the pagecan be displayed withinbrowser
  40. 40. HTML CodeDocument Object modelajax
  41. 41. ajaxWhen you click on thebutton, web page calls theserver from client site(i.e. from your browser)ServerBrowser
  42. 42. ajaxServer sends new data as response.The datais put to object graph of the page at runtime.
  43. 43. ajaxObject graph is changed.The new data isdisplayed on browser. But you cannot see thenew data in the source code of the page.You can trace the response of server viaplugins like FireBug
  44. 44. CookiesA cookie, also known as an HTTP cookie, web cookie,or browser cookie, is a small piece of data sent from awebsite and stored in a users web browser while a useris browsing a website.
  45. 45. Usage of Cookies•Session Management•Shopping Cart,Authentication•Personalization•Remember me, Preferences•Tracking & Analytics•Ads, Browsing History,Analytics,Tracking
  46. 46. Cookie ContentA web browser is expected to be able to store at least300 cookies of 4 kb each, and at least 20 cookies perserver or domain.•Cookie domain•Path•Expiration time or maximum age•Secure flag•HttpOnly flag.•Name–value pair Data to send to serverData to be used by browsersto determine when to delete acookie, block a cookie oraccept a cookie
  47. 47. Setting CookiesCookies can not only be set by server. These can be setby Javascript in client’s browsers (if cookie is not marked as HTTPOnly).
  48. 48. FormsAn HTML form on a web page allows a user toenter data that is sent to a server for processing.
  49. 49. FormsForms can be generated in several waysServerBrowserClient SideServerBrowserServer Sideby programming languagesby javascript editing DOM
  50. 50. Form ValidationForms can be validated in client side via javascriptand in server side by application.Server BrowserPlease note that validation on clientside could be bypassed easily
  51. 51. Responsive web designResponsive web design (RWD) is a webdesign approach aimed at crafting sites to providean optimal viewing experience—easy reading andnavigation with a minimum of resizing, panning, andscrolling—across a wide range of devices (fromdesktop computer monitors to mobile phones)http://discover.store.sony.com/sportswalkman/http://www.slideshare.net/bytte/responsive-web-design-10389263
  52. 52. HTML5 vs FLASHWeb browsers cannot render Flash mediathemselves, instead it is rendered primarily using theproprietary but freely available Adobe Flash Playerhttp://sixrevisions.com/html/html5-infographics/http://venturebeat.com/2012/01/31/html5-versus-flash-infographic/All web browsers support HTML and other Webstandards to various degrees.
  53. 53. HTML5 vs FLASHIt’s time for reading some codehttp://charag.com/client/eagleriverdaycamp/v2/eagle.htmlhttp://citwings.com/phillips_locked_room_game.htmlHTML5 AnimationFlash Animation
  54. 54. Referenceshttp://www.slideshare.net/simplyharshad/http-vs-httpsHTTP vs HTTPS
  55. 55. Lemİ orhan ergİnlemiorhan@agilistanbul.com@lemiorhan@lemiorhanagilistanbul.com@lemiorhanLINKEDINTWITTERSLIDESHAREBLOGGERPrincipal Software Engineer @ SonyFounder & Author @ agilistanbul.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×