Top Banner
15/02/2017 1 1 Web Applications Development Introduction Instructor Víctor J. Sosa-Sosa PhD Information Technology Lab Cinvestav-Tamaulipas [email protected] Web Applications Development Introduction 2 Content Introduction TCP/IP Architecture, Client/Server Model Application Protocols (HTTP,SMTP,FTP, DNS) XML Web Application Architectures
47

Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

Mar 23, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

1

1

Web Applications Development

Introduction

InstructorVíctor J. Sosa-Sosa PhD

Information Technology [email protected]

Web Applications Development

Introduction2

Content

� Introduction

� TCP/IP Architecture, Client/Server Model

� Application Protocols (HTTP,SMTP,FTP,DNS)

� XML

� Web Application Architectures

Page 2: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

2

3

TCP/IP Architecture,

Client/Server Model

Web Applications Development

Introduction4

Protocol: Definition

� A Protocol is the special set of rules, convention or standard that controls

or enables the connection, communication, and data transfer between

computing endpoints.

� In its simplest form, a protocol can be defined as the rules governing the

syntax, semantics, and synchronization of communication.

� Protocols may be implemented by hardware, software, or a combination of

the two. At the lowest level, a protocol defines the behavior of a hardware

connection.

� Protocols exist at several layers in a telecommunication connection. For

example, there are protocols for the data interchange at the hardware

device level and protocols for data interchange at the application program

level. In the standard model known as Open Systems Interconnection (OSI),

there are one or more protocols at each layer in the telecommunication

exchange that both ends of the exchange must recognize and observe.

� Protocols are often described in an industry or international standard.

Page 3: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

3

Web Applications Development

Introduction5

TCP/IP Definition

(Transmission Control Protocol/Internet Protocol) : A communications

protocol developed under contract from the U.S. Department of Defense

to interconnect dissimilar systems. Invented by Vinton Cerf and Bob

Kahn, this de facto Unix standard is the protocol of the Internet and the

global standard for local area networks and wide area networks, the

major exception being the traditional networks of the telephone

companies. However, telephone companies that deploy voice over IP

(VoIP) networks are, in fact, using TCP/IP as well.

Reliable and Unreliable

The TCP/IP suite provides two transport methods. TCP ensures

that data arrive intact and complete, while UDP just sends out

packets. TCP is used for everything that must arrive in perfect form,

and UDP is used for streaming media, VoIP and videoconferencing,

where there is no time to retransmit erroneous or dropped packets in

real time.

Web Applications Development

Introduction6

TCP/IP Definition

� IP Makes It Routable

TCP/IP is a routable protocol, and the IP "network" layer in TCP/IP provides this

capability. The header prefixed to an IP packet contains not only source and

destination addresses of the hosts, but source and destination addresses of the

networks they reside in. Data transmitted using TCP/IP can be sent to multiple

networks within an organization or around the globe via the Internet, the world's

largest TCP/IP network. The terms "TCP/IP network" and "IP network" are

synonymous.

The IP Identifies Everything

Every node in a TCP/IP network requires an IP address (an "IP") which is either

permanently assigned or dynamically assigned at startup.

Page 4: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

4

Web Applications Development

Introduction7

OSI Model, DoD Model and TCP/IP Protocol Suite

DoD: Department of Defense

Web Applications Development

Introduction8

OSI Model and TCP/IP Protocol Suite

Page 5: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

5

Web Applications Development

Introduction9

TCP/IP Protocol Suite

The TCP/IP suite uses encapsulation to provide abstraction of protocols and services. Such

encapsulation usually is aligned with the division of the protocol suite into layers of general

functionality. In general, an application (the highest level of the model) uses a set of protocols to send

its data down the layers, being further encapsulated at each level.

This may be illustrated by an example network scenario,

in which two Internet host computers communicate

across local network boundaries constituted by their

internetworking gateways (routers).

Web Applications Development

Introduction10

TCP Header

Page 6: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

6

Web Applications Development

Introduction11

IP Header (Ver. 4)

Web Applications Development

Introduction12

IP Header (Ver. 6)

Priority: Identify datagram priority

Flow label: Identify datagrams in the same “flow”

(the flow concept is not very clear).

Next header: Identify the above layer protocol

Page 7: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

7

Web Applications Development

Introduction13

Layers in the Internet Protocol Suit

RFC 1122 TanenbaumCisco

Academy

Kurose,

Forouzan

Comer[,

KozierokStallings

Arpanet

Reference

Model 1982

(RFC 871)

Four layers Four layers Four layers Five layersFour+one

layersFive layers Three layers

"Internet

model"

"TCP/IP

reference

model"

"Internet

model"

"Five-layer

Internet

model" or

"TCP/IP

protocol

suite"

"TCP/IP 5-

layer

reference

model"

"TCP/IP

model"

"Arpanet

reference

model"

Application Application Application Application Application ApplicationApplication/

Process

Transport Transport Transport Transport TransportHost-to-host

or transportHost-to-host

Internet Internet Internetwork Network Internet Internet

Link Host-to-

network

Network

interfaceData link

Data link

(Network

interface)

Network

access

Network

interface

Physical (Hardware) Physical

Web Applications Development

Introduction14

Example of Protocols

Application

DNS, TFTP, TLS/SSL, FTP, Gopher, HTTP,

IMAP, IRC, NNTP, POP3, SIP, SMTP, SMPP,

SNMP, SSH, Telnet, Echo, RTP, rlogin.

Routing protocols like BGP and RIP which

run over TCP/UDP, may also be considered

part of the Internet Layer.

Transport TCP, UDP, DCCP, SCTP, IL, RUDP, RSVP

Internet

IP (IPv4, IPv6), ICMP, IGMP, and ICMPv6

OSPF for IPv4 was initially considered IP

layer protocol since it runs per IP-subnet,

but has been placed on the Link since RFC

2740.

Link ARP, RARP, OSPF (IPv4/IPv6), IS-IS, NDP

DCCP:Datagram Cobestion Protocol. SCTP: Stream Control Transmission Protocol IL: The internet Link Protocol RUDP:Reliable UserDatargam Protocol RSVP: Resource Reservation Protocol .

Page 8: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

8

Web Applications Development

Introduction15

Cient/Server Definition

� C/S is a distributed application architecture that partitions

tasks or work loads between service providers (servers) and

service requesters, called clients. Often clients and servers

operate over a computer network on separate hardware.

� A server machine is a high-performance host that is running

one or more server programs which share its resources with

clients. Its connection always is active. Its IP is permanent

(could be a group of IPs).

� A client does not share any of its resources, but requests a

server's content or service function. Clients therefore initiate

communication sessions (talk first) with servers which await

(listen to) incoming requests. Connection could be intermittent

and IP could change. Don’t communicate each other.

Web Applications Development

Introduction16

Client/Server Example

TCP/IP

InternetHTML

HTML

Web

Browser

Web

Browser

PC

MAC

HTTP

HTTP

HTTPHTML

Documents

Web Server

Client Middleware Server

1

2

3

4

Page 9: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

9

Web Applications Development

Introduction17

Client/Server: Advantages

� In most cases, a client-server architecture enables the roles and responsibilities of a

computing system to be distributed among several independent computers that are

known to each other only through a network. This creates an additional advantage,

improves maintenance. For example, it is possible to replace, repair, upgrade, or

even relocate a server while its clients remain both unaware and unaffected by that

change.

� All data is stored on the servers, which generally have far greater security controls

than most clients. Servers can better control access and resources, to guarantee that

only those clients with the appropriate permissions may access and change data.

� Since data storage is centralized, updates to that data are far easier to administer .

� Many mature client-server technologies are already available which were designed

to ensure security, friendliness of the user interface, and ease of use.

� It also functions with multiple different clients of different capabilities.

� To be an open system is a plus.

� In general, it could take advantage of more available computing resources.

Web Applications Development

Introduction18

Client/Server Disadvantages

� Traffic congestion on the network has been an issue

since the inception of the client-server paradigm. As

the number of simultaneous client requests to a given

server increases, the server can become overloaded.

� The client-server paradigm lacks the robustness,

should a critical server fail, clients’ requests cannot be

fulfilled.

� Note: In some cases, some advantages in C/S are also

disadvantages.

Page 10: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

10

19

Application Protocols:

HTTP, SMTP, FTP, POP3, IMAP, DNS

Web Applications Development

Introduction20

Application Protocols

� It is a piece of anapplication that definesthe messagesexchanging with otherapplication.

� Define actions to betaken.

� Use communicationservices supported bylower layers protocols(TCP, UDP).

applicationtransportnetworkdata linkphysical

applicationtransportnetworkdata linkphysical

applicationtransportnetworkdata linkphysical

Page 11: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

11

Web Applications Development

Introduction21

Some Terms used in

Distributed Applications

Host: A computer or server

Process: Program running in a host.

IPC: InterProcess Communication. Used when there are 2 or

more processes in the same host communicating each other.

Usually, supported by the OS.

User Agent: Software process, interfacing between users (above)

and the network (below). Implements application protocols,

e.g.: Web: browser, Email: mail reader, Streaming: audio/video

media player.

Processes running in different hosts that have to communicate

each other use application protocols.

Web Applications Development

Introduction2222

More terms…

� Web page: A container with multimedia items.

� Multimedia Items can be HTML files, JPEG images, Java Applets,

MS Activex, audio/video files,…

� The Web page contains a base HTML file that includes several

referenced items.

� Each item is addressed by an URL (Uniform Resource Locator).

� URL example:

http:// www.myserver.com :8080 :/path/archivo.ext

Protocol Host Port resource

Page 12: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

12

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

23Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012 23

HTTP: HyperText Transfer Protocol

� Application protocol that defines

the Web.

� Client/Server Model

� client: Web browser that

requests, receives and

renders web items

� server: Web server that

responses the items that are

requested

� IETF: Internet Engineering Task

force: www.ietf.org

� http1.0: RFC 1945

� http1.1: RFC 2068

PC runningIE (HTTP-Client)

Server runningIIS

(HTTP-Server)

Mac running Safari (HTTP-Client)

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

24Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP Request Format

HTML y

forms

Browser

HTTP

Request

Client

WebHTML

Documents

HTTP

Server

HTTP Request Syntax

<method><resource identifier><HTTP version><crlf>

[<Header> : <value>]<crlf>

--

--

[<Header> : <value>]<crlf>

blank line <crlf>

[Entity body]

GET /path/file.html HTTP/1.0

Accept: text/html

Accept: audio/x

User-agent: MacWeb

Request

Line

Request

Header

Tags

Body

ExampleRequest

Line

Request

Header

Tags

Blank Line

Page 13: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

13

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

25Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP Response Format

HTTP Response Syntax

<HTTP version><result code>[<explanation>]<crlf>

[<Header> : <value>]<crlf>

--

--

[<Header> : <value>]<crlf>

blank line <crlf>

[Entity body]

HTTP/1.0 200 OK

Server: NCSA/1.3

Mime_version: 1.0

Content_type: text/html

Content_length: 2000

<HTML>

--

--

</HTML>

Response

Header (status)

Header

Tags

Body

ExampleResponse

Header

Header

Tags

Item Body

(HTML document)

HTML y

forms

Browser

HTTP

Request

Client

WebHTML

Documents

HTTP

Server

Blank Line

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

26Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012 26

HTTP: Transport Service

TCP is the Transport Service:

� Client starts a TCP connection

(create a socket) to a Web server

at the port 80

� Server accepts TCP connections

from clients (it is always

listening)

� HTTP messages are exchanged

between the client and server

� TCP connection is closed

HTTP is a state-less

protocol

� Servers do not keep

information about old

client requests

Protocols that keep state are complex!

� History (past) has to be kept (state)

� If the server or client fails, the state could be inconsistent

comments

Page 14: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

14

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

27Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012 27

HTTP Example

When a user introduces the following URL:

www.tamps.cinvestav.mx/~vjsosa/index.html

1a. the HTTP Client starts a TCP

connection to a HTTP Server

(process) in

www.tamps.cinvestav.mx at port

80 (default http server port).

2. The HTTP client sends a request (resource) through the TCP socket

connection.

1b. The HTTP server in www.tamps.cinvestav.mx is waiting for (listen) TCP connections at port 80. It accepts connection and notifies to the client.

3. The HTTP Server receives the request and builds a response message that includes the requested item (~vjsosa/index.html).time

(This page contains

10 items -jpg images- )

Repeat steps 2 and 3.

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

28Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012 28

HTTP: Persitent vs No-Persistent

No-persistent

� http/1.0: the server parses the

request, responds and closes TCP

connection.

� 2 RTTs to obtain every web item

� TCP Connection

� request/item transfer

� Each transfer suffers TCP low-start

� Browsers could open many

connections at the same time

(parallel)

Persistent

� HTTP/1.1 default

� Use the same TCP connection to:

parse, respond and parse the next

request.

� The client sends next request at the

moment a new HTML reference is

found, using the same TCP connection.

� 1 RTT for each web item , avoiding the

continuous TCP slow-start.

Persistent without pipelining:

The client sends a new request only when the

previous answer has been received (1 RTT for each

web item).

Persistent with pipelining:

HTTP/1.1 default.

The client sends a new request as soon as a new

web item is referenced (almost 1 RTT for all web

items).

Page 15: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

15

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

29Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP/1.1 Methods

Method Description

OPTIONS This method allows the client to determine the options and/or requirements

associated with a resource, or the capabilities of a server, without implying a

resource action or initiating a resource retrieval.

GET It retrieves whatever information (in the form of an entity) is identified by the

Request-URI.

HEAD The HEAD method is identical to GET except that the server MUST NOT return a

message-body in the response.

POST The POST method is used to request that the origin server accept the entity

enclosed in the request as a new subordinate of the resource identified by the

Request-URI in the Request-Line.

PUT It requests that the enclosed entity be stored under the supplied Request-URI.

DELETE It requests that the origin server delete the resource identified by the Request-URI.

TRACE It used to invoke a remote, application-layer loop- back of the request message.

CONNECT This specification reserves the method name CONNECT for use with a proxy that

can dynamically switch to being a tunnel (e.g. SSL tunneling).

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

30Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP/1.1 General Header FieldsHeader Field Function

Cache-Control used to specify directives that MUST be obeyed by all caching

mechanisms along the request/response chain.

Connection allows the sender to specify options that are desired for that

particular connection and MUST NOT be communicated by

proxies over further connections.

Date represents the date and time at which the message was

originated, having the same semantics as orig-date in RFC 822

Max-Forwards provides a mechanism with the TRACE and OPTIONS methods

to limit the number of proxies or gateways that can forward the

request to the next inbound server.

MIME-Version MIME version used to code the item.

Pragma used to include implementation- specific directives that might

apply to any recipient along the request/response chain

Upgrade allows the client to specify what additional communication

protocols it supports and would like to use if the server finds it

appropriate to switch protocols.

Page 16: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

16

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

31Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP/1.1 Request Header FieldsHeader Field Function

Accept can be used to specify certain media types which are acceptable for the response.

Accept-Chars can be used to indicate what character sets are acceptable for the response.

Accept-Encoding similar to Accept, but restricts the content-codings that are acceptable in the resp.

Accept-Language similar to Accept, but restricts the set of natural languages that are preferred as a

response to the request.

Authorization consists of credentials containing the authentication information of the user agent for

the realm of the resource being requested.

From contains an Internet e-mail address for the human user who controls the requesting

user agent.

Host specifies the Internet host and port number of the resource being requested, as

obtained from the original URI given by the user or referring resource.

If-Modified-Since used with a method to make it conditional: if the requested variant has not been

modified since the time specified in this field, an entity will not be returned from the

server

Proxy-

Authorization

allows the client to identify itself (or its user) to a proxy which requires

authentication.

User-Agent contains information about the user agent originating the request.

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

32Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP/1.1 Response Header Fields

Header Field Function

Location used to redirect the recipient to a location other than the Request-URI for completion

of the request or identification of a new resource.

Proxy-

Authenticate

MUST be included as part of a 407 (Proxy Authentication Required) response. The

field value consists of a challenge that indicates the authentication scheme and

parameters applicable to the proxy for this Request-URI.

Retry-After can be used with a 503 (Service Unavailable) response to indicate how long the

service is expected to be unavailable to the requesting client.

Server contains information about the software used by the origin server to handle the

request.

WWW-

Authenticate

MUST be included in 401 (Unauthorized) response messages. The field value consists

of at least one challenge that indicates the authentication scheme(s) and parameters

applicable to the Request-URI.

More Information: RFC 2616

Page 17: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

17

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

33Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP Entity Headers

Header Function

Allow Specifies the request methods supported by the object

Content-Encoding Specifies the encoding of the object

Content-Language Specifies the language of the object

Content-Length Specifies the length of the object

Content-Location Specifies the actual location of the object

Content-MD5 Specifies an MD5 message digest of the object

Content-Range Specifies the range of objects includes

Content-Type Specifies the MIME type of the object

Expires Specifies when the returned object expires

Last-Modified Specifies when the returned object was last modified

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

34Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP Status Codes

Codes that come in the first line in an HTTP response:

Types of Codes:

Informational: 1xx Successful: 2xx

Redirection: 3xxClient Error: 4xx

Server Error: 5xx

Examples:100 Continue101 Switching Protocols200 OK202 Accepted203 Non-Authoritative Information

301 Moved Permanently304 Not Modified305 Use Proxy307 Temporary Redirect400 Bad Request401 Unauthorized403 Forbidden404 Not Found405 Method Not Allowed500 Internal Server Error501 Not Implemented503 Service Unavailable505 HTTP Version Not Supported

Page 18: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

18

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

35Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP Example(client side):

1. Start up a Telnet connection with an HTTP Server:

telnet www.tamps.cinvestav.mx 80

2. Send a Get request :

GET /index.html HTTP/1.0

Open TCP connection at port 80(default HTTP server port) in www.tamps.cinvestav.mxAvery written thing is sent to the server

After writing this, click twice. You are sending a short and complete HTTP request .

3. Pay attention to the server response..(remember, the

Telnet client is not a web browser)..

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

36Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP: Authentication

Authentication: controls the access to

the Server content.

� Credentials : tipically, username

and password.

� No-State: Clients must present

their credentials in every request.

� authorization: it has to be

included as a request header

field.

� If authorization: is not included,

access is denied by the server

and sends the following

response:

� WWW authenticate:

client serverUsual http request msg

401: authorization req.WWW authenticate:

Usual http request msg + Authorization: <cred>

Usual http response msg

time

Usual http request msg + Authorization: <cred>

Usual http response msg

Page 19: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

19

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

37Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP: Keeping state (Cookies)� Generated number (#) by the

HTTP server,

� this # is used then by the server to:

� authentication

� Remember user preferences , previous selections, etc.

� The server sends a “cookie” to the client, included in the response message

� Set-cookie: 1678453

� The client includes this cookie in future requests addressed to that server.

� cookie: 1678453

client server

a cookie comes here

Usual http request msg

Usual http response msg Set-cookie: #

Usual http request msg cookie: #

Usual http response msg

Usual http request msg cookie: #

Usual http response msg

a cookie comes here

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

38Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

HTTP: Caching

� Objective: avoid to transfer web

items from the server to the

client if they have not changed

� client: has a web cache. In

every request includes the date

that the copied item keeps in

the cache

If-modified-since:

<date>

� server: the response will contain

the web item only if it was

changed:

HTTP/1.0 304 Not

Modified

client server

http request msgIf-modified-since:

<date>

http responseHTTP/1.0

304 Not Modified

Not modifiedWeb item

http request msgIf-modified-since:

<date>

http responseHTTP/1.1 200 OK

<data>

Modified Web item

Page 20: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

20

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

39Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

Why an HTTP Cache?

It is assumed: the http cache

is close to the clients (e.g.,

same intranet)

� Fast response time: that

means “closer” to the

clients

� It decreases http traffic in

distant servers

� Links beyond institutional/ISP

network sometimes become

a bottleneck.

WebServers

PublicInternet

Institutionalnetwork 10 Mbps LAN

1.5 Mbps access link

Institutional

Cache

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

40Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

FTP: File Transfer Protocol

� It allows to tranfer files to/fromm remote hosts

� Client/Server model

� client: part that starts the transfer

� server: remote file server

� FTP: RFC 959

� FTP Server port: 21

No se puede mostrar la imagen en este momento.

Files TransferFTP

Server

FTP user interface

FTP Client

local filesystem

Remote File system

user

Page 21: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

21

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

41Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

FTP: out and in-band connections

� Clients connect servers at port 21,

using TCP as transport.

� Two parallel TCP connections are

open for:

� control: exchanges

commands, response

messages between client and

server. “FTP out-of-band”. “HTTP

in-band”

� data: transfers data file

to/from server

� FTP servers keep state: current

directory, authentication, ..

FTPclient

FTPserver

TCP Connection for control , port 21

TCP Connection for data, port 20

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

42Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

FTP: Commands and Responses

Example: commands

� They are sent as ASCII text

through the control channel.

USER username

� PASS password

� LIST returns the file list in the

current directory.

� RETR filename gets the file

� STOR filename puts the file

into a remote server

Return codes:

� Some status codes, similar to

HTTP

� 331 Username OK,

password required

� 125 data connection

already open; transfer

starting

� 425 Can’t open data

connection

� 452 Error writing file

Page 22: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

22

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

43Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

SMTP: Simple Mail Transfer Protocol

Three main components:

� user agent

� mail server

� SMTP: simple mail transfer

protocol

User Agent

� Known also as “mail reader”

� Write, read, answer mail

messages

� E.g., Outlook, Thunderbird, elm,

Netscape Messenger

� Incoming and outgoing

messages are stored in the

server

User mailbox

Outgoing messages queue

mailserver

useragent

useragent

useragent

mailserver

useragent

useragent

mailserver

useragent

SMTP

SMTP

SMTP

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

44Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

SMTP: Mail Servers

� Mailbox contains incoming mail

messages, ready to be read by

user agents.

� Messages are kept in an

outgoing queue, ready to be

sent by the server.

� The SMTP protocol is used

between mail servers to

exchange mail messages

� client: mail transmitter

� server: mail receiver

mailserver

useragent

useragent

useragent

mailserver

useragent

useragent

mailserver

useragent

SMTP

SMTP

SMTP

Page 23: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

23

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

45Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

SMTP: [RFC 821][2821]

� SMTP used TCP connections to make reliable mail transfers

from client to server at port 25.

� Direct transfer: transmitter server to receiver server

� Three steps :

� handshaking

� Message transfer

� close

� Command/response interaction

� commands: ASCII text

� responses: state code and message

� Messages are 7 bits ASCII-texts

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

46Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

SMTP: Example

S: 220 university.edu

C: HELO tamps.cinvestav.mx

S: 250 Hello tamps.cinvestav.mx, pleased to meet you

C: MAIL FROM: <[email protected]>

S: 250 [email protected]... Sender ok

C: RCPT TO: <[email protected]>

S: 250 [email protected] ... Recipient ok

C: DATA

S: 354 Enter mail, end with "." on a line by itself

C: would you like to go out with me?

C: what about tomorrow night?

C: .

S: 250 Message accepted for delivery

C: QUIT

S: 221 university.edu closing connection

Page 24: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

24

Web Applications Development

Introduction47

� telnet servername 25

� Could you obtain the 220 statue answer from server?

� Use the simple commands: HELO, MAIL FROM, RCPT TO, DATA,

QUIT

This commands let you send an email without using an email client

program.

SMTP: exercise

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

48Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

Mail Message Format

RFC 822: standard to send/receive

text messages :

� Header lines, e.g.,

� To:

� From:

� Subject:

� different of SMTP commands

� Body

� The “message” only ASCII

characters

header

body

blankline

Page 25: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

25

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

49Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

Mail Message Format: Multimedia Extensions

� MIME: Multipurpose Internet Mail Extension, RFC 2045, 2056

� Additional lines in the message header declares MIME-Type

content

From: [email protected]

To: [email protected]

Subject: invitation for dinner.

MIME-Version: 1.0

Content-Transfer-Encoding: base64

Content-Type: image/jpeg

base64 encoded data .....

.........................

......base64 encoded data

Multimedia data type, subtype,

Parameters declaration

Method used for data coding

MIME version

Coded data

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

50Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

MIME: Types

Text

� Subtypes examples: plain,

html

Image

� Subtypes examples: jpeg, gif

Audio

� Subtypes examples : basic (8-

bit mu-law encoded), 32kadpcm

(32 kbps coding)

Video

� Subtypes examples: mpeg,

quicktime

Application

� Some data have to be processed

by another application before

rendering

� Subtypes examples : msword,

octet-stream

Content-Type: type/subtype; parameters

Page 26: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

26

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

51Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

Multipart TypeFrom: [email protected]

To: [email protected]

Subject: invitation to dinner.

MIME-Version: 1.0

Content-Type: multipart/mixed; boundary=98766789

--98766789

Content-Transfer-Encoding: quoted-printable

Content-Type: text/plain

Hi,

In this email you will find my picture :-)

--98766789

Content-Transfer-Encoding: base64

Content-Type: image/jpeg

base64 encoded data .....

.........................

......base64 encoded data

--98766789--

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

52Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

SMTP: Final comments

� SMTP uses persistent connections

� SMTP requires 7-bits ASCII

messages (head and body)

� Some strings are special in

messages (e.g., CRLF.CRLF).

Some messages have to be coded

in base64 or quoted-printable

� SMTP server uses CRLF.CRLF

to finish a message.

Comparison with HTTP:

� HTTP is pull-based

� SMTP is push-based

� Both of them have

commands/responses in ASCII

text and use status codes

� HTTP wraps each item in a

different response menssage.

� SMTP: multiple items can be

included in a multipart message.

Page 27: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

27

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

53Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

Reading the Email: POP3/IMAP

� SMTP: receive/send to/from mail servers

� Mail access protocol: pull mails from server (pull vs push)

� POP: Post Office Protocol [RFC 1939]

� authorization (agent <-->server) and download

� IMAP: Internet Mail Access Protocol [RFC 1730]

� More features (more complex)

� Manipulation of messages stored in the server

� HTTP: Gmail, Hotmail , Yahoo! Mail, etc.

useragent

Mail server transmitter

useragent

SMTP SMTP POP3 oIMAP

Mail serverreceiver

No se puede mostrar la imagen en este momento.No se puede mostrar la imagen en este momento.

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

54Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

POP3 protocol

Authorization phase

� Client commands :

� user: username

� pass: password

� Server response

� +OK

� -ERR

Transaction phase, client:

� list: lists numbers of messages

� retr: extracts messages by

number

� dele: erases messages

� quit: exit

C: list

S: 1 498

S: 2 912

S: .

C: retr 1

S: <message 1 contents>

S: .

C: dele 1

C: retr 2

S: <message 1 contents>

S: .

C: dele 2

C: quit

S: +OK POP3 server signing off

S: +OK POP3 server ready

C: user vjsosa

S: +OK

C: pass mipassword

S: +OK user successfully logged on

Page 28: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

28

Web Applications Development

Introduction55

POP3 and IMAP

� Some aspects of POP3:

� The previous example

uses the “download and

delete” mode.

� The user is not able to

read the message from

the server again. If the

user changes the mail

reader, the message is

lost.

� Copies could be kept in

different clients.

� POP3 is stateless during

session.

IMAP

• Keeps messages in the

server

• Allows user to organize

messages in folders.

• IMAP keeps state during

session :

� Folder names and

mapping between

message IDs and folder

names

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

56Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

DNS: Domain Name System

Internet routing:

� IP addresses (32 bit) give

directions to datagrams

� “name”, e.g.,

www.cinvestav.mx –used by

humans

Q: How could you map names

to addresses ?

Domain Name System(DNS):

� Distributed database implemented

in a hierarchy of many servers

“name servers”

� Application level protocol. host,

routers, name servers

communicate trying to “solve”

names (address/name translation)

� note: it is an internet core

function implemented as

application protocol

Page 29: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

29

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

57Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

1 6

DNS: A simple example

host

vjsosa.tamps.cinvestav.mx

wants the IP address of mypal.upc.es

1. contacts its local DNS ,

dns.tamps.cinvestav.mx

2. dns.tamps.cinvestav.mx

contacts its root name server, if

necessary.

3. The root name server contacts to

the authoritative name server

dns.upc.es, if necessary

Requesting hostvjsosa.tamps.cinvestav.mx

mypal.upc.es

Root name server

Authoritative DNSdns.upc.es

Local DNS dns.tamps.cinvestav.mx

23

4

5

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

58Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

DNS: iterative queries

recursive query:

� It adds more work to

core name servers

� Too much work?

iterative query:

� The contacted server

responds with a name

server

� “I don´t know that name

but you might contact

this server”

1 8

requesting host

vjsosa.tamps.cinvestav.mx

mypal.upc.es

root name server

local name server

dns.tamps,cinvestav.mx

2

3

4

authoritative name server

dns.upc.es

5 6

intermediate name server

dns2.upc.edu

7

Iterative query

Page 30: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

30

Web Applications Development

Introduction59

nslookup examples

• nslookup tamps.cinvestav.mx

• nslookup -query=mx tamps.cinvestav.mx (Mail eXchange)

• nslookup -type=ns tamps.cinvestav.mx (Name Server)

• nslookup -type=soa tamps.cinvestav.mx (Start Of Authoritiy)

• nslookup -type=any google.com (available dns record)

• nslookup 209.132.183.181 (reverse)

• nslookup redhat.com ns1.redhat.com (using specific dns)

• nslookup -timeout=10 tamps.cinvestav.mx (change timeout to wait for response)

• nslookup -debug tamps.cinvestav.mx

Web Applications Development with

ASP.NET (c) Cinvestav-Tamaulipas 2009-

2010

60Information Technology

Training Program© Cinvestav-Tamaulipas 2009 - 2012

More examples online

http://www.thegeekstuff.com/2012/07/nslookup-examples

http://www.thegeekstuff.com/2012/02/dig-command-examples/

Page 31: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

31

61

XML: eXtensible Markup

Language

Web Applications Development

Introduction62

XML: Introduction

� GML (Generalized Markup Language): Created by IBM in 1969.

Used to produce books, reports,…

� SGML (Standard Generalized Markup Language): Came from IBM.

First information technology structure and standardized, in 1986 came

up as an ISO standard. It is very powerful, complex and that is the

reason why requires complex software to process it. Extensible,

structured and allows validation.

� HMTL (HyperText Markup Language): created by Tim Berners-Lee

and Anders Berglund in 1989. Language based on tags, used to label

technical documents. It was a simplified application of SGML and is

used as the main interface language to the web.

� XML (eXtensible Markup Language): developed by W3C, a

restricted version of SGML. In 1988 came up the XML 1.0

specification.

Page 32: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

32

Web Applications Development

Introduction63

XML vs. HTML

� HTML limitations:

� Mix of content (data) and presentation

� Difficult to process.

� It is predefined, which limit the definition of complexstructures.

� We can not describe, validate or transform documents:

� Very hard to extract information

� XML was designed to transport and store data, with

focus on what data is.

� HTML was designed to display data, with focus on

how data looks.

Web Applications Development

Introduction64

XML (eXtensible Markup Language)

� Meta-language tags derived from SGML.� It is not an HTML extension.

� It allows to define languages of tags (HTML).

� It fulfills the requirements as an information exchangelanguage :� Simple: because it is based on tags and are very legible.

� Platform independent: UNICODE encoding.

� Standard and very widespread: W3C.

� Definition of complex structures : Schemas.

� Validation and transformation: DTD, Schemas, XSLT.

� Integration with other systems .

� Make client-side processing easier.

� Other applications: Views generation: HTML, WML. Applicationconfiguration.

Page 33: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

33

Web Applications Development

Introduction65

<?xml version=“1.0” encoding=“ISO-8859-1” ?>

<bares>

<bar tipo:”sport”> < nombre > eclipse</nombre>

<cerveza>

<nombre>Sol</nombre>

< precio> 20 </precio>

</cerveza>

<cerveza>

<nombre>XX</nombre>

< precio> 30 </precio>

</cerveza>

</bar>

<bar tipo:“snacks”> . . . . .. .</bar>

</bares>

XML: Example

Processing

Instructions

Root

TagAttribute

Web Applications Development

Introduction66

XML: DTD (Document Type Definition)

� XML document definitions.

<!DOC TYPE bares [

<! ELEMENT bares ( bar*) ><! ELEMENT bar ( nombre, cerveza+) >

<!ATTLIST bar tipo =“botanero”|”deportes”|“otros” >

<! ELEMENT nombre ( #PCDATA) >

<! ELEMENT cerveza ( nombre, precio) >

<! ELEMENT precio ( #PCDATA) >

]>

Nombre and

precio are text

An element

cerveza has 1

nombre and 1

precio

A n element bar

has nombre and

1 or more

cerveza elements

An element

bares has 0 or

more nested

elemets bar

tipo is an attribute

Page 34: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

34

Web Applications Development

Introduction67

XML: DTD

� XML document:� Valid: follows the DTD structure

� Inside of XML document:

� <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD WebApplication 2.2//EN”

� "http://java.sun.com/j2ee/dtds/web-app_2_2.dtd">

� Well Formed: follows the nesting XML rules .

� Limitations:� DTD is not written in XML.

� Very limited data types.

� It does not support name spaces.

Web Applications Development

Introduction68

XML: Schema

� XML Schema comes up to solve DTD limitations:

� is written in XML,

� has name spaces,

� has more data types,

� is more simple to define unordered data sets of sub-

elements.

Page 35: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

35

Web Applications Development

Introduction69

XML: Schema

<?xml version=“1.0”>

<xsd:schema xmlns:xsd=“http://www.w3c.org/2000/08/XMLSchema”>

<xsd:element name=“Bares” type= BarType/>

<xsd:element name=“Bar1” >

<xs:complexType>

<xs:sequence>

<xs:element name=“nombre" type="xs:string"/>

<xs:element name=“cerveza" type="xs:string"/>

</xs:sequence>

</xs:complexType>

<xsd:element name=“Bar2” > . . . . . .

</xs:complexType>

<xs:complexType name=“BarType”>

<xs:sequence>

<xs:element ref=“Bar1” minOccurs=“0" maxOccurs=“unbounded"/>

<xs:element ref=“Bar2” minOccurs=“0" maxOccurs=“unbounded"/>

</xs:sequence>

</xs:complexType>

</xs:schema>

Web Applications Development

Introduction70

XML – Standards family

� NameSpaces: is a collection of names, identified by a URI reference,that are used in XML documents as element types and attributenames. In order for XML documents to be able to use elements andattributes that have the same name but come from different sources,there must be a way to differentiate between the markup elementsthat come from the different sources.xmlns:xsd=http://www.w3c.org/2000/08/XMLSchema

� XSLT: Extensible Stylesheet Language Transformations.

� XSL: Extensible Stylesheet Language.

� XPath: a query language for selecting nodes from an XML document.

� /BARES[Tipo=“Sports”], /bares/bar

� XLink: outlines methods of describing links between resources in XMLdocuments, whether internal or external to the original document.

� XPointer: link to sections in XML documents.

� XQuery: a query and functional programming language that isdesigned to query collections of XML data

Page 36: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

36

Web Applications Development

Introduction71

XML - Parser

� The XML DOM contains methods (functions) to traverse XML trees,

access, insert, and delete nodes. We will talk about DOM later…

� However, before an XML document can be accessed and

manipulated, it must be loaded into an XML DOM object.

� An XML parser reads XML, and converts it into an XML DOM object

that can be accessed with JavaScript.

� Most browsers have a build-in XML parser.

if (window.XMLHttpRequest)

{

xhttp=new window.XMLHttpRequest();

}

else // Internet Explorer 5/6

{

xhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xhttp.open("GET","books.xml",false);

xhttp.send("");

xmlDoc=xhttp.responseXML;

The following JavaScript fragment

loads an XML document ("books.xml"):

//Create an XMLHTTP object

//Open the XMLHTTP object

//Send an XML HTTP request to the server

//Set the response as an XML DOM object

72

Web Application Architectures

Page 37: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

37

Web Applications Development

Introduction73

Web Application Scenario

Web Applications Development

Introduction74

Web Application: Canonical View

Page 38: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

38

Web Applications Development

Introduction75

Web Application Scenario

Web Applications Development

Introduction76

• Servidor HTTP: Por ejemplo: Apache HTTP Server, Apache

Tomcat HTTP Server, Microsoft IIS, etc...

• Cliente HTTP (o Navegador Web): Por ejemplo: Internet Explorer,

FireFox, Chrome, etc...

• Base de datos: Por ejemplo: MySQL, Apache Derby, mSQL,

SQLite, PostgreSQL, OpenOffice's Base; Commercial Oracle, IBM

DB2, SAP SyBase, MS SQL Server, MS Access.

• Programa Cliente: pueden ser escritos en HTML Form,

JavaScript, VBScript, Flash, etc...

• Programa Servidor: pueden ser escritos en Java Servlet/JSP,

ASP, PHP, CGI, etc...

Web Application Scenario

Page 39: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

39

Web Applications Development

Introduction77

Web Application: Architectural Views

Web Applications Development

Introduction78

Web Applications: Evolution

Page 40: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

40

Web Applications Development

Introduction79

Web Application Architectures

�Fat Clients

� Client-side applications

�Thin Clients

� Server-side applications

�Web Objects

� Object-oriented applications

�Web Services

Web Applications Development

Introduction80

Web Apps: Fat Clients

� Fat clients refer to web applications that are executed client-side, by the user´s web

browser. This type of applications is an important part of the Dynamic HTML

(DHTML) concept, enabling web pages to be scripted; that is, to have different and

changing content depending on user input, environment conditions (such as the time

of day), or other variables.

� Web authors write client-side scripts in languages such as JavaScript and VBScript.

� There are more powerful and heavy tools to develop client-side applications, e.g.:

ActiveX controls and Java Applet.

� Client-side scripts are often embedded within an HTML document, but they may

also be contained in a separate file, which is referenced by the document that uses it.

Upon request, the necessary files are sent to the user's computer by the web server

on which they reside.

� Due to security restrictions, client-side scripts may not be allowed to access the

users computer beyond the browser application. Techniques like ActiveX controls can

be used to sidestep this restriction.

Page 41: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

41

Web Applications Development

Introduction81

Web Apps: Fat Clients� Client-Side Scripts

• JavaScript and VBScript code included in HTML

• Web browsers interpret the scripts, which have access to DOM (Document

Object Model)

� ActiveX Controls

• COM Objects that can be referred by a client

• ActiveXs have access to all client´s resources.

• Can be used to implement advanced user interfaces

• Security issues are overcome using digital signatures, which allow to identify the

component author

� Java Applets

• Compilated component included in an HTML page that is executed by the

browser. The browsers needs a Java VM.

• Limited access to client’s resources.

• Advanced applications running at client-side

• Digital signature is used for security reasons

Web Applications Development

Introduction82

Web Apps: Fat Clients with RIA

� RIA: Rich Internet Application

� RIA is a web application that has many of the characteristics of desktop applications,

typically delivered either by way of a site-specific browser, via a browser plug-in,

independent sandboxes, or virtual machines. Adobe Flash, Java, and Microsoft

Silverlight are currently the three most common platforms, with penetration rates

around 99%, 80%, and 54% respectively (as of July 2010). Although new web

standards have emerged, they still use the principles behind RIAs.

� Users generally need to install a software framework using the computer's operating

system before launching the application, which typically downloads, updates, verifies

and executes the RIA. This is the main differentiator from JavaScript-based

alternatives like Ajax which use built-in browser functionality to implement

comparable interfaces.

� Technologies that are commonly for RIA include: Flex, Curl, OpenLaszlo, Ajax, XUL,

JavaFX, and Windows Presentation Foundation technologies such as Silverlight.

Page 42: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

42

Web Applications Development

Introduction83

Web Apps: Fat ClientsApplets/

ActiveX/ RIA

HTTP

Web Server

ApplicationServer

HTMLpages

ServerPages

BusinessObjects /ExistingSystems

Browser

Web Applications Development

Introduction84

Web Apps: Thin Clients

� Thin clients refer to a web server technology in which a user's request is

fulfilled by running a script directly on the web server to generate dynamic

web pages. It is usually used to provide interactive web sites that interface

to databases or other data stores.

� In the earlier days of the web, server-side scripting was almost exclusively

performed by using a combination of C programs, Perl scripts and shell

scripts using the Common Gateway Interface (CGI). Those scripts were

executed by the operating system.

� Nowadays, these and other on-line scripting languages that often are

executed directly by the web server itself or by extension modules (e.g.

mod_perl or mod_php) to the web server. Examples of server-side scripting

language are: JSP (*.jsp), ASP/ASP.NET (*.asp,*.aspx), Cold Fusion Markup

Language (*.cfm), PHP (*.php), Ruby (*.rb).

Page 43: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

43

Web Applications Development

Introduction85

Web Apps: Thin Clients

HTTP

Web Server

ApplicationServer

HTMLpages

ServerPages

BusinessObjects /ExistingSystems

Browser

Web Applications Development

Introduction86

Web Apps: Web Objects

� We technology using distributed objects

� It is convenient in controlled environments like intranets

� Based on distributed objects protocols often supported by a

client/server model

� IIOP (Internet InterORB Protocol)

• Communication protocol between CORBA (Common Object

Request Broker Architecture) objects.

� DCOM (Distributed COM)

•Protocol for distributed COM objects (ActiveX)

� RMI (Remote Method Invocation)

• A Java programming interface for distributed. RMI uses JRMP

(Java Remote Method Protocol). It is also possible to use IIOP.

Page 44: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

44

Web Applications Development

Introduction87

Web Apps: Web Objects

ActiveX Applets

HTTP

Web Server

ApplicationServer

HTMLpages

ServerPages

Browser

DCOM RMI IIOP

BusinessObjects

EnterpriseJava Beans

ActiveXServer

Web Applications Development

Introduction88

Web Apps: Web Services

� Web Services are application components that

communicate each other using open protocols.

� Are self-contained and self-describing

� Can be discovered using UDDI

� Can be used by other heterogeneous applications

� XML es the basis for Web Services

� Web Services main standard.� XML: eXtensible Markup Language

� SOAP: Simple Object Access Protocol

� WSDL: Web Service Definition Language

� UDDI: Universal Description, Discovery and Integration

Page 45: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

45

Web Applications Development

Introduction89

Web Apps: Web Services

UDDI ServerUDDI ServerUDDI ServerUDDI ServerHost AHost AHost AHost A

HTTP + SOAPHTTP + SOAPHTTP + SOAPHTTP + SOAPHost BHost BHost BHost BInvokeInvokeInvokeInvoke XMLXMLXMLXMLWSDLWSDLWSDLWSDLstubstubstubstub WSDLWSDLWSDLWSDLskeletonskeletonskeletonskeleton

1111Web ServicesWeb ServicesWeb ServicesWeb Services

WSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLWSDLRequestRequestRequestRequest ResponseResponseResponseResponse2222

33334444

Web Applications Development

Introduction90

Web Services with REST

� Representational State Transfer (REST) is a style of

software architecture for distributed hypermedia

systems such as the World Wide Web.

� The term Representational State Transfer was

introduced and defined in 2000 by Roy Fielding in his

doctoral dissertation. Fielding is one of the principal

authors of the Hypertext Transfer Protocol (HTTP)

specification versions 1.0 and 1.1.

� Conforming to the REST constraints is referred to as

being ‘RESTful’.

Page 46: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

46

Web Applications Development

Introduction91

REST: Constraints

� The REST architectural style describes the following six

constraints applied to the architecture, while leaving

the implementation of the individual components free

to design:� Client-Server

� Stateless

� Cacheable

� Layered system

� Code on demand (optional), e.g., applets, java script, etc..

� Uniform interface

NOTE: Complying with these constraints, and thus conforming to the REST architectural style, will

enable any kind of distributed hypermedia system to have desirable emergent properties, such as

performance, scalability, simplicity, modifiability, visibility, portability and reliability

Web Applications Development

Introduction92

RESTful Web Services

� A RESTful web service (also called a RESTful web API) is

a simple web service implemented using HTTP and the

principles of REST. It is a collection of resources, with

three defined aspects:� the base URI for the web service, such as

http://example.com/resources/

� the MIME type of the data supported by the web service. This is often

JSON, XML or YAML but can be any other valid MIME type.

� the set of operations supported by the web service using HTTP methods

(e.g., POST, GET, PUT or DELETE).

Page 47: Web Applications Development Introductionvjsosa/clases/sd/01_WepAppDev_Intro... · Web Applications Development Introduction Instructor VíctorJ. Sosa-Sosa PhD Information Technology

15/02/2017

47

Web Applications Development

Introduction93

Web application design issues

Web Applications Development

Introduction94

Web Apps: ASP.NET