Web App Intro

7/28/2019 Web App Intro

1/31

Web and Web Applications:an Overview of the Technology Landscape

IT 4203Advanced Web Development

Jack G. Zheng

Fall 2010
http://www.spsu.edu/


2/31

Overview

What is the web? What is web application?

How does it work?

What are the major and latest technologies?

2


3/31

What is the Web?

The Internet

A world-wide network of networks and computers

based on the Internet Protocol

World Wide Web, or Web

An Internet application based on the HTTP

protocol

A client/server application for information and

services

3


4/31

Web Related Terms Web page: usually refers to a static HTML file, or a dynamically

generated HTML document displayed in a browser.

Web site: a collection of web pages, applications, etc., that serve acommon purpose.

Web (based) information system: an information system that utilizes webtechnologies to deliver information and services, to users or otherinformation systems/applications.

Web application: a specific functionality-oriented component that utilizesweb technologies to deliver information and services to users or otherapplications/information systems. A web information system usually consists of one or more web applications,

together with information components and other non-web components.

Webware: usually refers to web applications (or programs or software) thatdirectly serves users through web browsers.

Web service: A software component that utilizes web technologies to deliverinformation and services to other applications/information systems.

4


5/31

Evolution of the Web Application

Pre-web (before 1990)

Early/simple web (1990s)

Dynamic web (since second-half 1990s)

Current web Infrastructural web (21st century)

Web 2.0 (since 2005)

5


6/31

Pre-Web

Before there was the Web, there was the Internet TCP/IP (Transmission Control Protocol/Internet Protocol) architecture

Internet Applications Usenet, BBS, Telnet

Email, FTP

Web

P2P

Video streaming

Instant messaging, VoIP

Gaming

Which one generates the most traffic volume on the Internet? Answer form: ipoque, Cisco, Sandvine

6
http://en.wikipedia.org/wiki/History_of_the_Internethttp://www.ipoque.com/resources/internet-studies/internet-study-2007http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-481374_ns827_Networking_Solutions_White_Paper.htmlhttp://www.sandvine.com/news/global_broadband_trends.asphttp://www.sandvine.com/news/global_broadband_trends.asphttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-481374_ns827_Networking_Solutions_White_Paper.htmlhttp://www.ipoque.com/resources/internet-studies/internet-study-2007http://en.wikipedia.org/wiki/History_of_the_Internet


7/31

Early Web, Simple Web

Invented by SirTim Berners-Lee, 1989

It is a client/server application for information andother services

Fundamental elements of the web Web server

Web client: browser Web protocol: HTTP (Hypertext Transfer Protocol)

Web address: URL (Uniform Resource Locator)

Web content: HTML (Hypertext Markup Language)

7
http://www.w3.org/2004/07/timbl_knightedhttp://www.w3.org/2004/07/timbl_knighted


8/31

The Internet

Simple Web Architecture

8

Web server HTML Files

HTTP - Response

URL

http://spsu.edu/index.html

Web client: browser

HTTP - Request
http://en.wikipedia.org/wiki/HTML


9/31

HTML

A web page is created using HTML, a

standard markup language to describe a web

document/page using tags (markups)

All content in a web page are wrapped in tags

, ,

, , , , etc.

9


10/31

Browser Web browser software (web client) knows how to interpret

these tags and display them nicely to users (rendering) Provides an interface for users

It understands HTML, scripts and works with other plug-ins

Web browser products Market share

http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0

Internet Explorer

Firefox

Chrome WorldWideWeb

http://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gif

10
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0http://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gifhttp://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gifhttp://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gifhttp://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gifhttp://marketshare.hitslink.com/browser-market-share.aspx?qprid=0http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0


11/31

Web Server Web server

Hosts web sites, files (web pages), applications, etc.

Processes request from clients (browsers) and send responseback to clients

Resources on web servers are located by URLs.

Web servers are located by the IP address and domain names.

Major web server products Apache

Internet Information Services (IIS)

Market share data http://news.netcraft.com/

http://www.securityspace.com/s_survey/data/201007/index.html

11
http://news.netcraft.com/http://www.securityspace.com/s_survey/data/201007/index.htmlhttp://www.securityspace.com/s_survey/data/201007/index.htmlhttp://news.netcraft.com/


12/31

URL (Uniform Resource Locator)

URL is used to locate a particular resource on a webserver

Components of a URL

Protocol Host (domain, IP)

Port

File (resource) path

Example

http://www.spsu.edu:80/home/about/index.html

12

The default port is 80;

:80 is usually omitted.

http is the protocol www.spsu.edu is the domain;

.net is the top level domain

home/about/ is the directory(path) on the server;index.html is the actual file

(web page).


13/31

HTTP

HTTP (Hypertext Transfer Protocol) is the featurecommunication protocol for the web A web server and a browser communicate based on

HTTP

HTTP has two types of message HTTP Request: a message sent to the web server

HTTP Response: a message sent by the web server(responded by the server)

See example HTTP request and responsemessages at http://web-sniffer.net

13
http://web-sniffer.net/http://web-sniffer.net/http://web-sniffer.net/http://web-sniffer.net/


14/31

Domain A domain is a name assigned to a server on the Internet.

A domain name is divided into several levels starting fromthe right, and separated by dots . Example: www.spsu.edu

Top-level domain: a highest level domain that are pre-defined; usually indicates the type of the site Created in 1980: .com, .net, .org, .edu, .gov, .int, .mil

2 letter country code: .us, .uk, .jp, .ca, .au, .cn,

Top level domains are managed by ICANN (http://www.icann.org) and IANA (http://www.iana.org)

14

EDU is the top level domain.

SPSU is the 2nd level domain.WWW is the 3rd level domain.
http://www.icann.org/http://www.iana.org/http://www.iana.org/http://www.icann.org/


15/31

Domain Name System

Web servers are located by IP addresses

Domain Name System (DNS)

A system that provides the conversion between IPaddresses and domain names

Check IP and domain name online http://cqcounter.com/whois/

15
http://cqcounter.com/whois/http://cqcounter.com/whois/


16/31

Put Them Together What happens after a URL is entered in the web browser?

http://spsu.edu/index.html

16

DNS server(s)1. Looking for the IP of thedomain spsu.edu

2. Returning the IP of the

domain: 168.28.176.243

3. Sending an HTTP request

to 168.28.176.243

5. Sending an HTTP response back

4. Looking for the file /index.html
http://spsu.edu/index.htmlhttp://en.wikipedia.org/wiki/Domain_name_systemhttp://ip-lookup.net/domain.phphttp://web-sniffer.net/?url=http://spsu.edu/index.htmlhttp://www.httpviewer.net/?url=http://spsu.edu/index.htmlhttp://www.httpviewer.net/?url=http://spsu.edu/index.htmlhttp://web-sniffer.net/?url=http://spsu.edu/index.htmlhttp://ip-lookup.net/domain.phphttp://en.wikipedia.org/wiki/Domain_name_systemhttp://images.google.com/imgres?imgurl=http://cli.gs/images/blog/server.jpg&imgrefurl=http://blog.cli.gs/2008/10&usg=__mvYGe5sea8VqfXjIPWzddPJcmG4=&h=267&w=200&sz=18&hl=en&start=213&um=1&tbnid=LFAe3rwYc0782M:&tbnh=113&tbnw=85&prev=/images?q=server&start=198&imgsz=small|medium|large|xlarge&imgtype=clipart&as_st=y&ndsp=18&um=1&hl=en&sa=Nhttp://spsu.edu/index.html


17/31

Simple Web Applications

These are usually document based webapplications

Simple, small and fast

Commonly used for web presence,information publishing, etc.

http://www.atlantapetrescue.org

http://facultyweb.ggc.usg.edu/cpark/ http://2008.desrist.org

http://www.useit.com/alertbox/

17
http://www.atlantapetrescue.org/http://facultyweb.ggc.usg.edu/cpark/http://2008.desrist.org/http://www.useit.com/alertbox/http://www.useit.com/alertbox/http://2008.desrist.org/http://facultyweb.ggc.usg.edu/cpark/http://www.atlantapetrescue.org/


18/31

Dynamic Web Static dynamic

Web pages construction At design time at run time

HTML Static HTML files dynamic HTML: a mixture of HTML, scripts,

programming codes, executable programs, etc.

Content source Single source multiple sources (HTML files, XML files, other files,

databases, other websites)

Simple complex Web navigation/interaction mode

Click and read write/type, choose, move, slide, drag and drop,expand, draw, listen, speak, etc.

Development Webpage authoring web application development

18


19/31

Dynamic Web Technology:

Client Side (DHTML)

Cascading Style Sheet (CSS) Page style (color, size, position, etc.) and layout

Website themes

Simple animations

Client Scripting (JavaScript) Dynamic content: calendar

HTML DOM manipulation: dropdown menu

Animations: text animation

Browser plug-ins Flash, Sliverlight, Java Applets, PDF, embedded objects,

etc.

19
http://themegarden.org/http://javascriptkit.com/script/script2/eventscalendar.shtmlhttp://www.smartmenus.org/http://www.dynamicdrive.com/dynamicindex10/http://www.dynamicdrive.com/dynamicindex10/http://www.smartmenus.org/http://javascriptkit.com/script/script2/eventscalendar.shtmlhttp://themegarden.org/http://themegarden.org/


20/31


21/31

21

Server Side Web Applications

Generated

HTML

ApplicationServer

Web Server

Client

(Browser)

Request

Response

Database

Other

Servers:

Email,

LDAP,

etc.

Static HTML

Delegation
http://en.wikipedia.org/wiki/HTML


22/31


23/31

Dynamic Web Applications

Public websites E-Commerce: shopping, banking, media, trading, etc.

Web search engines

Content publishing

Web portal

E-government, e-Learning

Internal applications Oracle Enterprise Manager

Microsoft SharePoint Services

Enterprise Information Portal

23


24/31

Current Web

Web as a platform/infrastructure Web is becoming a fundamental piece of

enterprise information system

Web 2.0 A general and loose concept for recent

advancements of the World Wide Web

24


25/31

Web as a Platform

Web becomes a fundamental platform for multi-tierenterprise information systems Add-on platform

Web technologies are commonly and intensively used, not just forwebsites, but for all kinds of application and services.

Separated integrated Web applications are no longer separate systems, but are integrated

with many other applications.

Enabling technologies Matured web application servers and frameworks: .Net, JBoss,

SharePoint, DotNetNuke, Drupal, Structs, etc. XML family technologies and XML based application protocols

Service Oriented Architecture and web services

Cloud computing infrastructure

Security infrastructure: SSL, PKI

25


26/31

26

Multi-Tier (N-Tier) Architecture

Middleware

Communication

Server

Browser RelationalDatabases

Presentation Tier

Windows

applications

Application

Server

DataWarehouse

Directories

Application Tier Data Source Tier

Mobile

devices


27/31

Web 2.0

A general and loose concept for recentadvancements (roughly from 2005) of the WorldWide Web http://www.zdnet.com/videos/whiteboard/what-is-web-

20/154425

Human behavior aspect of Web 2.0: massiveuser participation, contribution, sharing, andcollaboration User generated content: Wiki, blog, video, news,

reviews, etc.

Social networking

Folksonomy (tagging)

27
http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425http://www.zdnet.com/videos/whiteboard/what-is-web-20/154425


28/31

Technical Aspect of Web 2.0

Rich interface, more responsive and interactive;brings desktop experience to the web AJAX (Asynchronous JavaScript and XML), Flash,

Silverlight

Content push: Google Finance

In-page navigation (MDI, TDI): Yahoo Mail, Zimbra, GoogleDocs, etc.

Content and service aggregation and integration XML (family), RSS, JSON

Portal

Web services: Amazon Web Services

Lightweight Web APIs: Google search API

Mash-up: housingmaps.com

28
http://en.wikipedia.org/wiki/AJAXhttp://jackzheng.net/googleajaxsearch.aspxhttp://jackzheng.net/googleajaxsearch.aspxhttp://jackzheng.net/googleajaxsearch.aspxhttp://en.wikipedia.org/wiki/AJAX


29/31

Web 2.0 Applications

29


30/31

Summary:

Web Application Technology Trend

Web client Browser any other application

Web server One server handles all multiple distributed and specialized servers

Web content HTML XML, XHTML, CSS, embedded content (Flash etc.), scripts

Web protocol HTTP working with other protocols (video streaming, email, etc.)

Web URL Physical document virtual entry point (resource identifier)

30


31/31

Summary

Key Concepts Internet, web

Web site, web page, web application, web service

Web server, browser HTTP, URL, Domain, IP, DNS, Protocol

HTML, DHTML, CSS, XML

Client side, server side

Multi-tier (n-tier) system, application server ASP.Net, Java (JSP)

Web 2.0, API, AJAX

31

Web App Intro

Documents

Transcript of Web App Intro