Fundamentals of WebHigh level overview of web concepts

Lemİ Orhan ErgİnPrincipal software Engineer @ Sony

guide 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 interconnected computer networks

www, email, social networking, file 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

ProtocolProtocol is a form of etiquette.

Internet Protocols are the standards, designed to specify how computers interact and exchange

messages 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 internal

architecture of a communications system by splitting its components into abstraction layers.

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

around internet.

http modelIt 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

http modelHTTP 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 socketsTransmits the request for a document

Waits for a reply from the serverOnce the response is arrived, the socket is closed

Request

Response

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.

PORT NUMBERSA port is an endpoint to a logical connection and the

way a client program specifies a specific 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

Privacy: Anyone can see the contentIntegrity: Anyone can alter the contentAuthentication: Authentication is sent in clear formStateless: Need to maintain information across multiple request-responses

http Limitations

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

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

SSL HANDSHAKE

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

there are several ways to send a request

GET POST

PUTDELETE

HEAD

OPTIONS

TRACE

CONNECT

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

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

Web Content: JavascriptsJavaScript (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.

Web Content: CSSCascading 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.

Web Content: IMAGESAny image could be displayed in an html page. It is important to keep

the size of images small for the sake of performance.

Web Content: XMLExtensible Markup Language (XML) is a markup language that defines a set of

rules for encoding documents in a format that is both human-readable and

machine-readable.

Web Content: JSONJavaScript Object Notation (JSON), is a text-based open standard designed for

human-readable data interchange

Server

Browser

InfrastructureServer infrastructure could be that simple!

Load Balancer

Web Servers

Load Balancer

Application Servers

Database Servers

Proxy

Browser

Servers in the same zone do not

interact over proxy

ZoneThe 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

Client

request - response

You request a web page and get data

Server

Client

Browser caches the content

ServerCache

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

ServerCache

1

2

3

4

Server does not return content. It just returns status code 304

Server 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 Balancer

Web Servers

Load Balancer

Application Servers

Database Servers

Proxy

Browser

Zone

Central Cache Servers

Returns cached scripts, styles and content from browser cacheRefresh By f5

Cache-­‐Control:  no-­‐cache  //  HTTP  1.1Pragma:  no-­‐cache  //  HTTP  1.0Expires:  Sat,  26  Jul  1988  05:00:00  GMT  //  in  past

Asks for content if cache is not set

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.

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

ajax

Acronym for Asynchronous JavaScript and XML

It is a web development technique used on the client side to create asynchronous web applications.

ajaxLet’s see how ajax works. Fill the

following text area.

ajaxWrite a text and press the button

ajaxPage is not refreshed. A new text

appears below the entry area.

Let’s look at how it works

ajaxPage is initially loaded to

your machine

Source code of the page can be displayed within

browser

HTML Code

Document Object model

ajax

ajax

When you click on the button, web page calls the

server from client site (i.e. from your browser)Server

Browser

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

ajaxObject 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

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

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 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 flag•HttpOnly flag.

•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

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

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

Forms

Forms can be generated in several ways

Server

Browser

Client Side

Server

Browser

Server Side

by programming languagesby javascript editing DOM

Form ValidationForms 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

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

HTML5 vs FLASHWeb 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.

HTML5 vs FLASHIt’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

References

http://www.slideshare.net/simplyharshad/http-vs-httpsHTTP vs HTTPS

Lemİ orhan ergİnlemiorhan@agilistanbul.com

@lemiorhan

@lemiorhan

agilistanbul.com

@lemiorhan

LINKE

DIN

TWITT

ERSL

IDES

HARE

BLOG

GER

Principal Software Engineer @ SonyFounder & Author @ agilistanbul.com