Fundamentals of Web for Non-Developers

Slide 1

Slide 1 text

Fundamentals of Web High level overview of web concepts Lemİ Orhan Ergİn Principal software Engineer @ Sony guide for non-developers

Slide 2

Slide 2 text

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:)

Slide 3

Slide 3 text

agenda •Web Concepts Http/Https, Cookies, Caches, Forms, Html, Javascript, CSS, Request/ Response, Responsive Web Design •Infrastructure Servers, Databases, Load Balancers

Slide 4

Slide 4 text

web concepts

Slide 5

Slide 5 text

The Internet is a global system of interconnected computer networks www, email, social networking, ﬁle transfer, online chat, commerce, game playing, teleconferencing, VoIP, video on demand etc. Internet is tangible network of computers sharing/exchanging information with the help of PROTOCOLS. Internet

Slide 6

Slide 6 text

Protocol Protocol is a form of etiquette. Internet Protocols are the standards, designed to specify how computers interact and exchange messages over internet. Protocols usually speciﬁes: The format of the messages & how to handle errors

Slide 7

Slide 7 text

Open systems ınter-connection (OSI) model is a conceptual model that describes the internal architecture of a communications system by splitting its components into abstraction layers.

Slide 8

Slide 8 text

tcp model This model is a condensed version of the OSI model and only has four layers. It is considered as standard around internet.

Slide 9

Slide 9 text

http model It stands for Hypertext Transfer Protocol. HTTP provides a set of rules and standards that govern how information is transmitted on the World Wide Web. http://www.sony.co.uk

Slide 10

Slide 10 text

http model HTTP is a client-server protocol by which two machines communicate using a reliable, connection- oriented transport service such as the TCP. Opens a tcp/ip connection via sockets Transmits the request for a document Waits for a reply from the server Once the response is arrived, the socket is closed Request Response

Slide 11

Slide 11 text

http model There is no memory between client connections. Pure HTTP server treats every request as if it was brand-new (i.e. Stateless) To load faster, Http pages are stored in your computer and internet caches. You don’t have control over some caches like the ones in proxies.

Slide 12

Slide 12 text

PORT NUMBERS A port is an endpoint to a logical connection and the way a client program speciﬁes a speciﬁc server program on a computer in a network Port 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: 80 SSH: 22 TELNET: 23

Slide 13

Slide 13 text

Privacy: Anyone can see the content Integrity: Anyone can alter the content Authentication: Authentication is sent in clear form Stateless: Need to maintain information across multiple request-responses http Limitations

Slide 14

Slide 14 text

HTTPS stands for Hypertext Transfer Protocol over Secure Socket Layer, or HTTP over SSL. SSL acts like a sub layer under regular HTTP application layering. HTTPS encrypts an HTTP message prior to transmission and decrypts a message upon arrival. httPS

Slide 15

Slide 15 text

HTTPS by default uses port 443 as opposed to the standard HTTP port of 80. URL's beginning with HTTPS indicate that the connection between client and browser is encrypted using SSL SSL transactions are negotiated by means of a key based encryption algorithm between the client and the server, this key is usually either 40 or 128 bits in strength (the higher the number of bits the more secure the transaction). httPS https://login.yahoo.com/config/login_verify?src=ym

Slide 16

Slide 16 text

SSL HANDSHAKE

Slide 17

Slide 17 text

HTTP server is implemented by servers Each client-server transaction consists of 3 main parts: 1) Request/Response line 2) Header information 3) The body http model

Slide 18

Slide 18 text

there are several ways to send a request GET POST PUT DELETE HEAD OPTIONS TRACE CONNECT

Slide 19

Slide 19 text

HTTP METHOD: GET •Retrieval of information •Server sends a representation of a resource to client

Slide 20

Slide 20 text

HTTP METHOD: POST •The body of the request is accepted as a resource •Mainly the data of forms are submitted by post

Slide 21

Slide 21 text

Web Content Scripts (javascript) Styles (css) Pages (html) Images (jpg, png, gif) Web content is sent from server and browsers renders and displays that is programmed. Data* (xml, json)

Slide 22

Slide 22 text

Web Content: HTML HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser.

Slide 23

Slide 23 text

Web Content: Javascripts JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.

Slide 24

Slide 24 text

Web Content: CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.

Slide 25

Slide 25 text

Web Content: IMAGES Any image could be displayed in an html page. It is important to keep the size of images small for the sake of performance.

Slide 26

Slide 26 text

Web Content: XML Extensible Markup Language (XML) is a markup language that deﬁnes a set of rules for encoding documents in a format that is both human-readable and machine-readable.

Slide 27

Slide 27 text

Web Content: JSON JavaScript Object Notation (JSON), is a text-based open standard designed for human-readable data interchange

Slide 28

Slide 28 text

Server Browser Infrastructure Server infrastructure could be that simple!

Slide 29

Slide 29 text

Load Balancer Web Servers Load Balancer Application Servers Database Servers Proxy Browser Servers in the same zone do not interact over proxy Zone The content can be cached in any of the levels Central Cache Servers The infrastructure could be simpler than here Server infrastructure could be much more complex too

Slide 30

Slide 30 text

Client request - response You request a web page and get data Server Client Browser caches the content Server Cache 200 Client You request the same web page with last modified date of the cached content Server 304 Client Since server says “content has not changed”, the data in cache is loaded Server Cache 1 2 3 4 Server does not return content. It just returns status code 304 Server returns content with code 200

Slide 31

Slide 31 text

Caching Any content can be cached in any infrastructural node •Scripts (javascript) •Styles (css) •Pages (http pages) •Images •Animations (ﬂash)

Slide 32

Slide 32 text

Load Balancer Web Servers Load Balancer Application Servers Database Servers Proxy Browser Zone Central Cache Servers Returns cached scripts, styles and content from browser cache Refresh By f5 Cache-‐Control: no-‐cache // HTTP 1.1 Pragma: no-‐cache // HTTP 1.0 Expires: Sat, 26 Jul 1988 05:00:00 GMT // in past Asks for content if cache is not set

Slide 33

Slide 33 text

Load Balancer Web Servers Load Balancer Application Servers Database Servers Proxy Browser Zone Central Cache Servers Refresh By CTRL+f5 Asks for content. Browser cache is not used.

Slide 34

Slide 34 text

Load Balancer Web Servers Load Balancer Application Servers Database Servers Proxy Browser Zone Central Cache Servers cache on server side Cache could be on server side and needs to be cleaned either automatic or manually

Slide 35

Slide 35 text

ajax Acronym for Asynchronous JavaScript and XML It is a web development technique used on the client side to create asynchronous web applications.

Slide 36

Slide 36 text

ajax Let’s see how ajax works. Fill the following text area.

Slide 37

Slide 37 text

ajax Write a text and press the button

Slide 38

Slide 38 text

ajax Page is not refreshed. A new text appears below the entry area. Let’s look at how it works

Slide 39

Slide 39 text

ajax Page is initially loaded to your machine Source code of the page can be displayed within browser

Slide 40

Slide 40 text

HTML Code Document Object model ajax

Slide 41

Slide 41 text

ajax When you click on the button, web page calls the server from client site (i.e. from your browser) Server Browser

Slide 42

Slide 42 text

ajax Server sends new data as response. The data is put to object graph of the page at runtime.

Slide 43

Slide 43 text

ajax Object graph is changed. The new data is displayed on browser. But you cannot see the new data in the source code of the page. You can trace the response of server via plugins like FireBug

Slide 44

Slide 44 text

Cookies A cookie, also known as an HTTP cookie, web cookie, or browser cookie, is a small piece of data sent from a website and stored in a user's web browser while a user is browsing a website.

Slide 45

Slide 45 text

Usage of Cookies •Session Management •Shopping Cart, Authentication •Personalization •Remember me, Preferences •Tracking & Analytics •Ads, Browsing History, Analytics, Tracking

Slide 46

Slide 46 text

Cookie Content A web browser is expected to be able to store at least 300 cookies of 4 kb each, and at least 20 cookies per server or domain. •Cookie domain •Path •Expiration time or maximum age •Secure ﬂag •HttpOnly ﬂag. •Name–value pair Data to send to server Data to be used by browsers to determine when to delete a cookie, block a cookie or accept a cookie

Slide 47

Slide 47 text

Setting Cookies Cookies can not only be set by server. These can be set by Javascript in client’s browsers (if cookie is not marked as HTTPOnly).

Slide 48

Slide 48 text

Forms An HTML form on a web page allows a user to enter data that is sent to a server for processing.

Slide 49

Slide 49 text

Forms Forms can be generated in several ways Server Browser Client Side Server Browser Server Side by programming languages by javascript editing DOM

Slide 50

Slide 50 text

Form Validation Forms can be validated in client side via javascript and in server side by application. Server Browser Please note that validation on client side could be bypassed easily

Slide 51

Slide 51 text

Responsive web design Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) http://discover.store.sony.com/sportswalkman/ http://www.slideshare.net/bytte/responsive-web-design-10389263

Slide 52

Slide 52 text

HTML5 vs FLASH Web browsers cannot render Flash media themselves, instead it is rendered primarily using the proprietary but freely available Adobe Flash Player http://sixrevisions.com/html/html5-infographics/ http://venturebeat.com/2012/01/31/html5-versus-flash-infographic/ All web browsers support HTML and other Web standards to various degrees.

Slide 53

Slide 53 text

HTML5 vs FLASH It’s time for reading some code http://charag.com/client/eagleriverdaycamp/v2/eagle.html http://citwings.com/phillips_locked_room_game.html HTML5 Animation Flash Animation

Slide 54

Slide 54 text

References http://www.slideshare.net/simplyharshad/http-vs-https HTTP vs HTTPS

Slide 55

Slide 55 text

Lemİ orhan ergİn [email protected] @lemiorhan @lemiorhan agilistanbul.com @lemiorhan LINKEDIN TWITTER SLIDESHARE BLOGGER Principal Software Engineer @ Sony Founder & Author @ agilistanbul.com