• Like
  • Save
Fundamentals of Web for Non-Developers
Upcoming SlideShare
Loading in...5
×
 

Fundamentals of Web for Non-Developers

on

  • 87,558 views

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 ...

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.

Statistics

Views

Total Views
87,558
Views on SlideShare
79,727
Embed Views
7,831

Actions

Likes
274
Downloads
2,558
Comments
24

69 Embeds 7,831

http://blogvecindad.com 2315
http://goodgle.kr 1371
http://marketinglowcost.typepad.com 992
http://www.marketinglowcost.typepad.com 463
http://clients.ifactory.dev 358
http://www.scoop.it 331
http://snippets.usejquery.com 281
http://ifactory.com.au 273
http://abcsforsuccess.com 171
http://krazzywebz.com 143
http://photogenicthoughts.com 129
http://www.share.com 108
http://fiberbit.com.tw 83
http://bambooinnovator.com 77
http://www.kno-kelly-endnotes.com 57
http://www.hanrss.com 54
http://www.teachified.com 54
http://realvideoproduction.com 49
https://my.examtime.com 43
http://winviter.com 42
https://twitter.com 40
http://www.asignatura1460702.blogspot.com 34
http://feeds.feedburner.com 33
http://www.linkedin.com 29
http://colebrook.edublogs.org 29
http://tools2.intranet.serviceplan.de 25
http://donnamurdoch.com 23
http://asignatura1460702.blogspot.com 23
http://blackboard.sl.on.ca 23
http://localhost 20
http://mammavalesempre.blogspot.it 14
http://onovomarketingnainternet.blogspot.com.br 14
http://translate.googleusercontent.com 13
http://www.ifactory.com.au 12
http://newtimemedia.de 10
http://pinterest.com 8
http://mammavalesempre.blogspot.com 6
http://www.dotstalentsolutions.com 6
http://rosablogando.blogspot.pt 6
https://www.linkedin.com 6
http://www.blogger.com 5
http://feedly.com 4
http://www.testing-webs.org 4
http://onovomarketingnainternet.blogspot.com 4
http://www.pinterest.com 4
https://www.rebelmouse.com 4
http://datinggameadvice.com 3
http://spotlightideas.co.uk 3
http://blog.naver.com 3
https://raw.statichtmlapp.com 3
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 24 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 24

Post Comment
Edit your comment

    Fundamentals of Web for Non-Developers Fundamentals of Web for Non-Developers Presentation Transcript

    • Fundamentals of WebHigh level overview of web conceptsLemİ Orhan ErgİnPrincipal software Engineer @ Sonyguide for non-developers
    • 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:)
    • agenda•Web ConceptsHttp/Https, Cookies, Caches, Forms, Html, Javascript, CSS, Request/Response, Responsive Web Design•InfrastructureServers, Databases, Load Balancers
    • web concepts
    • 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
    • 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
    • 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 don’t have controlover some caches like the ones in proxies.
    • 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
    • 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
    • SSL HANDSHAKE
    • 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: 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 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 defines 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 node•Scripts (javascript)•Styles (css)•Pages (http pages)•Images•Animations (flash)
    • 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.
    • 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 page.You can trace the response of server viaplugins like FireBug
    • 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.
    • Usage of Cookies•Session Management•Shopping Cart,Authentication•Personalization•Remember me, Preferences•Tracking & Analytics•Ads, Browsing History,Analytics,Tracking
    • 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
    • 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).
    • 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 javascript editing DOM
    • 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
    • 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
    • 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.
    • 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
    • Referenceshttp://www.slideshare.net/simplyharshad/http-vs-httpsHTTP vs HTTPS
    • Lemİ orhan ergİnlemiorhan@agilistanbul.com@lemiorhan@lemiorhanagilistanbul.com@lemiorhanLINKEDINTWITTERSLIDESHAREBLOGGERPrincipal Software Engineer @ SonyFounder & Author @ agilistanbul.com