Professional Documents
Culture Documents
know concepts of web and web applications understand how web based software works understand the technical discussions better and answer your questions:)
agenda
Web Concepts Infrastructure
Servers, Databases, Load Balancers Http/Https, Cookies, Caches, Forms, Html, Javascript, CSS, Request/ Response, Responsive Web Design
web concepts
Internet
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.
Protocol
Protocol is a form of etiquette. Internet Protocols are thestandards, designed to specify how computers interact and exchange messages over internet. Protocols usuallyspecies: The format of the messages & how to handle errors
tcp model
This model is a condensed version of the OSI model and only has four layers. It is considered as standard around internet.
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
http model
HTTP is a client-server protocol by which two machines communicate using a reliable, connectionoriented transport service such as the TCP.
Request
Opens a tcp/ip connection via sockets Transmits the request for a document
Response
Waits for a reply from the server Once the response is arrived, the socket is closed
http model
There is no memory between client connections. Pure HTTP server threats 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 dont have control over some caches like the ones in proxies.
PORT NUMBERS
A port is an endpoint to a logical connection and the way a client program species a specic server program on a computer in a network
TELNET: 23
HTTP: 80
SSH: 443
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 Limitations
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
httPS
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 https://login.yahoo.com/config/login_verify?src=ym 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).
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
Web Content
Web content is sent from server and browsers renders and displays that is programmed.
Pages (html) Styles (css) Images (jpg, png, gif) Scripts (javascript) Data* (xml, json)
Infrastructure
Server infrastructure could be that simple!
Browser
Server
Browser
Proxy
Zone
The content can be cached in any of the levels The infrastructure could be simpler than here
Load Balancer
Application Servers
request - response
You request a web page and get data
200
Client
Server
1 2 3 4
Browser caches the content Cache Client You request the same web page with last modified date of the cached content
304
Server
Client
Server does not return content. It just returns status code 304 Since server says content has not changed, the data in cache is loaded
Server
Cache
Client
Server
Caching
Any content can be cached in any infrastructural node
Scripts (javascript) Styles (css) Pages (http pages) Images Animations (ash)
Refresh By f5
Asks for content if cache is not set
Cache-Control: no-cache // HTTP 1.1 Pragma: no-cache // HTTP 1.0 Expires: Sat, 26 Jul 1988 05:00:00 GMT // in past
Browser
Proxy
Zone
Load Balancer
Application Servers
Refresh By CTRL+f5
Asks for content. Browser cache is not used.
Browser
Proxy
Zone
Load Balancer
Application Servers
Browser
Proxy
Zone
Load Balancer
Application Servers
ajax
Acronym for Asynchronous JavaScript an XML It is a web development technique used on the client side to create asynchronous web applications.
ajax
Lets see how ajax works. Fill the following text area.
ajax
Write a text and press the button
ajax
Page is not refreshed. A new text appears below the entry area.
ajax
Page is initially loaded to your machine
ajax
HTML Code
ajax
Browser
Server
When you click on the button, web page calls the server from client site (i.e. from your browser)
ajax
Server sends new data as response. The data is put to object graph of the page at runtime.
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.
ajax
You can trace the response of server via plugins like FireBug
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.
Usage of Cookies
Session Management Shopping Cart, Authentication Personalization Remember me, Preferences Tracking & Analytics Ads, Browsing History, Analytics, Tracking
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.
Namevalue pair Cookie domain Path Expiration time or maximum age Secure ag HttpOnly ag.
Data to be used by browsers to determine when to delete a cookie, block a cookie or accept a cookie
Setting Cookies
Cookies can not only be set by server. These can be set by Javascript in clients browsers (if cookie is not marked as HTTPOnly).
Forms
An 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
Client Side
Browser
Server Side
Browser
Server
Server
by programming languages
Form Validation
Forms can be validated in client side via javascript and in server side by application.
Server
Browser
HTML5 vs FLASH
Web browsers cannot render Flash media themselves, instead it is rendered primarily using the proprietary but freely available Adobe Flash Player All web browsers support HTML and other Web standards to various degrees.
http://sixrevisions.com/html/html5-infographics/ http://venturebeat.com/2012/01/31/html5-versus-flash-infographic/
HTML5 vs FLASH
Its time for reading some code
HTML5 Animation
http://charag.com/client/eagleriverdaycamp/v2/eagle.html
Flash Animation
http://citwings.com/phillips_locked_room_game.html
References
HTTP vs HTTPS
http://www.slideshare.net/simplyharshad/http-vs-https
BLOGGER
SLIDESHARE